footer {
  position: relative;
  bottom: -1rem;
}
.m-2 {
  margin: 2rem;
}
.ml-1 {
  margin-left: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.back {
  background: var(--gray-5);
  color: #fff;
  padding: 1rem 2rem;
}
/* .btn {
  background: var(--gray-2);
  padding: .5rem 1rem;
  display: inline-block;
  color: #000;
} */
strong {
  font-weight: bold;
}
.badge {
  background: var(--gray-2);
  padding: .2rem .5rem;
  margin: .2rem;
  display: inline-block;
}
.administration {
  background: rgb(255, 214, 51);
}
/* .course {
  background: rgb(255, 129, 129);
} */
select {
  appearance: auto;
  padding: .5rem 1rem;
  display: inline-block;
  margin-right: 1rem;
  margin-top: .8rem;
}
input {
  padding: .5rem 1rem;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.filterBlock {
  margin-bottom: 3rem;
}
.filterBlock .tag {
  color: #000;
  background: var(--gray-2);
  padding: .5rem 1rem;
  display: inline-block;
  margin-right: 1rem;
}
.tag:hover {
  background: var(--gray-5);
  color: #fff;
}
.courseBlock {
  margin-bottom: 5rem;
}
.toCourseDetail,
.courseContent.requirement {
  color: #000;
  width: calc(100% / 4 - 1rem);
}
.toCourseDetail:hover,
.courseContent.requirement:hover {
  filter: drop-shadow(.6rem .6rem 0 #ddd);
}
.courseContent {
  border: 1px solid #000;
  background: #fff;
  padding: 1rem 1.5rem;
  position: relative;
}

.exhibitContent {
  border: 1px solid #000;
  padding: 1rem 2rem;
  text-align: center;
  flex-basis: 200px;
}
.exhibitContent .number {
  font-weight: bold;
  font-size: 5rem;
}

.tabTitle li.active,
.tabTitle2 li.active {
  background: #0a325e;
  padding: 1rem 1.5rem;
}
.tabTitle li.active a,
.tabTitle2 li.active a {
  color: #fff;
}
.tabTitle a,
.tabTitle2 a {
  color: #000;
  padding-bottom: .6rem;
  display: inline-block;
}
.single-course{
  position: relative;
}
.dot {
  position: absolute;
  left: -2.5rem;
  top: 1rem;
}
.dot img {
  width: 1.5rem;
  height: auto;
}

.hoverBlock {
  background: #fff;
  border: 1px solid #000;
  /* display: none; */
  visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: .5rem;
  position: absolute;
  left: -1.2rem;
  top: 3rem;
  z-index: 11;
  transition-delay: .1s;
}
.hoverBlock a {
  color: #000;
}
.dot:hover + .hoverBlock {
  visibility: visible;
}
.hoverBlock:hover {
  visibility: visible;
}
.readmore {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
}
#collaboration input {
  margin-top: 3rem;
}
#collaboration ul {
  margin-bottom: 3rem;
}
#collaboration li {
  padding: 1rem;
}
#collaboration img,
#rejectSchool img {
  width: 24px;
  height: auto;
  margin-left: 1rem;
}
#course01.grey #info::before {
  content: none;
}
#course01.grey {
  padding-bottom: 1rem;
}
.matchDetailInfo strong {
  font-weight: bold;
  width: 125px;
  display: inline-block;
}
.popupReject,
.popupMatch,
.popupInvite,
.popupTrack {
  background: #fff;
  padding: 1rem 2rem;
  border: 1px solid #000;
  width: 480px;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.popupTrack {
  width: 80%;
}
.popupReject textarea {
  width: 100%;
  height: 100px;
}
.popupReject.show,
.popupMatch.show,
.popupInvite.show,
.popupTrack.show {
  display: block;
}
.schoolName {
  border: 1px solid #000;
  padding: .5rem 1rem;
  flex-basis: 45%;
  position: relative;
}
.schoolName a {
  position: absolute;
  right: 1rem;
}
.newsContent {
  align-items: center;
}
.newsContent .tag {
  background: var(--gray-4);
  padding: .5rem 1rem;
}
.newsContent a {
  color: #000;
}
.newsContent .item {
  border: 1px solid #000;
  padding: .5rem 1rem;
}
.editInfoPopup {
  border: 1px solid #000;
  background: #fff;
  padding: 1rem 2rem;
  width: 400px;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.editInfoPopup.show {
  display: block;
}

span.tag {
  background: var(--gray-3);
  padding: .5rem 1rem;
  margin: .5rem;
  display: inline-block;
}
#alliance span+:not(span.tag) {
  width: 200px; 
  display: inline-block;
  margin-right: 1rem;
}
.messageContent {
  padding: 1rem 2rem;
  border: 1px solid #000;
}
.replyBox {
  display: none;
}
.replyBox input {
  width: 100%;
  height: 200px;
  margin-bottom: 1rem;
  display: inline-block;
}
.replyBox.show {
  display: block;
}
.accountItem {
  border: 1px solid #000;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}
.accountItem strong {
  padding: 1rem;
  display: inline-block;
}
.popupInvite {
  background: #fff;
  border: 1px solid #000;
  padding: 1rem 2rem;
  width: 400px;
}
.match-content {
  position: relative;
}
.match-content.newSchool::before {
  content: 'NEW';
  position: absolute;
  top: 0;
  right: -1rem;
  background: rgb(255, 75, 75);
  color: #fff;
  text-align: center;
  width: 60px;
  height: auto;
  z-index: 1;
}
.schoolIcon {
  position: absolute;
  right: 1rem;
}
.checkIcon {
  width: 1.5rem;
}
.new-course {
  position: fixed;
  bottom: 120px;
  right: 25px;
}
.new-course img {
  width: 30px;
  height: auto;
  transform: translateY(8px);
  transition: .6s ease-in;
}
.box {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.popupTrack ul li {
  margin: 1rem 0;
}
.popupTrack li a {
  display: inline-block;
  margin: 0 1rem;
}
.chatIconBlock {
  position: fixed;
  right: 3rem;
  bottom: 6rem;
  z-index: 11;
}
.popupChatBox {
  border: 1px solid #000;
  padding: 1rem 2rem;
  height: 600px;
  width:600px;
  position: absolute;
  right: 3rem;
  bottom: 24rem;
  background: #fff;
  z-index: 11;
  display: none;
}
.popupChatBox.match {
  bottom: 10rem;
}
.popupChatBox.show {
  display: block;
}
.popupChatBox li a {
  display: inline-block;
  color: #000;
  margin: .5rem 3rem .5rem 0;
}
.popupChatBox h1 + a {
  float: right;
  font-size: 3rem;
  font-weight: bold;
}
.popupChatBox .tag {
  display: inline-block;
  margin-top: 2rem;
  transform: translateX(18rem);
  margin-bottom: 15rem;
}
.checkShowCheck {
  display: none;

}
.checkShow #track:checked +label+input+label+.checkShowCheck{
  display: block;
}
.checkShow #money2:checked +label+.checkShowCheck,
.checkShow #system2:checked+label+.checkShowCheck{
  display: block;
}
a.tag {
  padding: .5rem 1rem;
  display: inline-block;
  margin: .5rem;
  background: var(--gray-3);
  color: #000;
}
span.tag.submit {
  background: rgb(255, 183, 16);
  float: right;
}
#submitSchool input {
  display: inline-block;
  margin: 1rem;
  padding: 1rem 2rem;
}
.filterSchool {
  display: none;
}
.filterSchool+label {
  cursor: pointer;
  background: var(--gray-3);
  padding: .5rem 1rem;
  margin: .5rem;
  display: inline-block;
}
.filterSchoolBlock {
  display: none;
}
.filterSchool:checked+label+.filterSchoolBlock {
  display: inline-block;
}
#course01 #info::before {
  content: none;
}
#menu a {
  font-size: 1.3rem;
}
/* .match-school {
  display: none;
} */
.match-school.show {
  display: block;
}
.showMore {
  display: none;
}
#tracks:checked + label + input + label + .showMore {
  display: block;
}
table.info-table.track {
  display: none;
}
table.info-table.track.show {
  display: block;
}

a.right {
  position: relative;
  right: -34rem;
}
a.right2 {
  position: relative;
  right: -14rem;
}
.popupTrack.show {
  top: 30%;
  height: 600px;
}
/* footer */
footer .row:last-of-type ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
footer .row:last-of-type a {
  color: #ffffffcf;
}

/* video iframe  */
figure.media div div{
	height: 450px !important;
}

figure.media div div iframe {
	position: absolute !important;
	height: 450px !important;
	width: 90% !important;
	top: 2rem !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

@media screen and (max-width: 500px) {
	figure.media div div {
		height: 300px !important;
	}
	figure.media div div iframe {
		height: 300px !important;
	}
}