/* common */
#main{ overflow: hidden; position: relative; }
#main section{ overflow: hidden; }

/* title-box */
.title-box{ opacity: 1 !important; }
.title-box *{ color: #111; }
.title-box h2{ font-family: var(--engFont); font-size: 12rem; font-weight: 600; letter-spacing: 15px; filter: blur(10px); -webkit-filter: blur(0px); opacity: 0; }
.title-box p{ font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; margin-top: 20px; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.title-box div{ display: inline-block; opacity: 0; transform: translateX(-50px); transition: transform 1s, opacity 1s; transition-delay: 0.8s; }

.title-box.aos-animate h2{ animation: blurSpacing 1s forwards; }
.title-box.aos-animate p{ animation: textClip 1s 0.5s forwards; }
.title-box.aos-animate div{ opacity: 1; transform: translateX(0); }

/* round-btn */
a.round-btn{ width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; position: relative; z-index: 5; }
a.round-btn img{ filter: invert(0); transition: filter 0.5s; transition-delay: 0.2s; }
a.round-btn::before{ content: ""; width: 100%; height: 100%; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s; }

a.round-btn.black{ border: 1px solid rgba(17, 17, 17, 0.6); }
a.round-btn.black img{ filter: invert(1); }
a.round-btn.black::before{ background: #111; }


@media screen and (hover: hover){
	/* round-btn */
	a.round-btn:hover img{ filter: invert(1); transition-delay: unset; }
	a.round-btn:hover::before{ transform: translate(-50%, -50%) scale(1); }

	a.round-btn.black:hover img{ filter: invert(0); }
}

@media screen and (max-width: 1700px){
	/* title-box */
	.title-box h2{ font-size: 9rem; }
	.title-box p{ font-size: 1.9rem; }

	/* round-btn */
	a.round-btn{ width: 110px; height: 110px; }
}

@media screen and (max-width: 1280px){
	/* title-box */
	.title-box h2{ font-size: 6rem; }
	.title-box p{ font-size: 1.8rem; }

	/* round-btn */
	a.round-btn{ width: 100px; height: 100px; }
}

@media screen and (max-width: 900px){
	/* title-box */
	.title-box h2{ font-size: 5rem; }
	.title-box p{ font-size: 1.7rem; }

	/* round-btn */
	a.round-btn{ width: 80px; height: 80px; }
}


/* cursor */
.cursor{ width: 70px; height: 70px; position: absolute; top: 0; left: 0; z-index: 1200; transform: translate(-50%, -50%); pointer-events: none; }
.cursor .inner{ width: 100%; height: 100%; background: #111; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; transform: scale(0); transition: transform 0.5s;  }
.cursor span{ font-family: var(--engFont); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1; letter-spacing: 10px; opacity: 0; filter: blur(10px); -webkit-filter: blur(10px); transition: opacity 0.8s, filter 0.8s, letter-spacing 0.8s; }

.cursor.active .inner{ transform: scale(1); }
.cursor.active span{ opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); letter-spacing: 0; transition-delay: 0.3s; }


/* visual */
#visual{ position: relative; --spacing: 15px; }
#visual .mobile{ display: none; }
#visual .slick-slide{ outline: none; }
#visual .text-box{ padding-bottom: 100px; }
#visual .text-box{ position: absolute; bottom: 0; left: 0; right: 0; z-index: 100; }
#visual .text-box .flex-box{ position: relative; }
#visual .text-box *{ color: #FFF; }
#visual .text-box ul{ position: relative; }
#visual .text-box ul li{ width: 100%; position: absolute; bottom: 0; left: 0; opacity: 0; transform: scale(0.9); filter: blur(10px); -webkit-filter: blur(10px); will-change: opacity, transform, filter; }
#visual .text-box ul li:not(.animated){ display: none; }
#visual .text-box h2{ font-family: var(--engFont); font-size: 12rem; font-weight: 600; }
#visual .text-box p{ font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; margin-top: 25px; }

#visual .text-box ul li.animated{ position: relative; animation: textShow 1s both; }
#visual .text-box ul li.hidden{ animation: textHide 1s both; }

#visual .text-box .btns{ display: flex; align-items: center; margin-top: 40px; }
#visual .text-box .btns > *:not(:last-child){ margin-right: 10px; }
#visual .text-box .btns button{ width: 60px; height: 60px; border: 1px solid #FFF; border-radius: 50%; position: relative; }
#visual .text-box .btns button::before{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); background: #FFF; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s; }
#visual .text-box .btns button::after{ content: ""; display: inline-block; width: 22px; height: 37px; background: url("/img/main/scroll_arrow.svg") no-repeat center center / contain; filter: unset; -webkit-filter: unset; transition: filter 0.5s; }
#visual .text-box .btns button.prev::after{ transform: rotate(90deg); }
#visual .text-box .btns button.next::after{ transform: rotate(-90deg); }

#visual .text-box .btns button:hover::before{ transform: translate(-50%, -50%) scale(1); }
#visual .text-box .btns button:hover::after{ filter: invert(1); -webkit-filter: invert(1;) }

#visual .text-box .btns > div{ display: flex; align-items: center; margin-left: 30px; }
#visual .text-box .btns .bar{ width: 100px; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 10px; margin: 0 15px; transform: translateY(3px); }
#visual .text-box .btns .bar div{ width: 0; height: 100%; background: #FFF; border-radius: 10px; }
#visual .text-box .btns span{ font-family: var(--engFont); font-size: 3rem; font-weight: 600; line-height: 1; vertical-align: middle; }

#visual .visual-wrap{ width: calc(100vw + 1px); position: relative; left: -1px; }
#visual .visual-wrap.mobile{ display: none; }
#visual .visual{ outline: none; position: relative; }
#visual .visual::before{ content: ""; height: 50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; }
#visual .bg{ width: 100%; height: 100vh; position: relative; transform: scale(1.2); transition: transform 1.5s ease-in-out; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; }
#visual .visual .bg img{ width: 100%; height: 100%; object-fit: cover; }
#visual .visual.slick-active .bg{ transform: scale(1); }

#visual .scroll-box{ display: flex; position: absolute; bottom: 0; right: 0; }
#visual .circle{ display: inline-block; position: relative; }
#visual .circle::before{ content: url("/img/main/scroll_arrow.svg"); position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); animation: top50 1.5s infinite linear; }  
#visual .circle img{ width: auto; height: auto; animation: rotate360 10s infinite linear; }

@keyframes textShow{
	0%{ opacity: 0; transform: scale(1.1); filter: blur(10px); -webkit-filter: blur(10px); }
	100%{ opacity: 1; transform: scale(1); filter: blur(0); -webkit-filter: blur(0); }
}

@keyframes textHide{
	0%{ opacity: 1; transform: scale(1); filter: blur(0); -webkit-filter: blur(0); }
	100%{ opacity: 0; transform: scale(0.9); filter: blur(10px); -webkit-filter: blur(10px); }
}

@media screen and (max-width: 1700px){
	#visual .text-box{ padding-bottom: 80px; }
	#visual .text-box ul{ width: calc(100% - 200px); }
	#visual .text h2{ font-size: 9rem; }
	#visual .text p{ font-size: 1.9rem; }
	#visual .scroll-box{ width: 130px; }

	#visual .text-box .btns button{ width: 55px; height: 55px; }
	#visual .text-box .btns button::after{ width: 18px; }
	#visual .text-box .btns > div{ margin-left: 20px; }
	#visual .text-box .btns span{ font-size: 2.8rem; }
}

@media screen and (max-width: 1280px){
	#visual .text-box{ padding-bottom: 60px; }
	#visual .text-box ul{ width: calc(100% - 150px); }
	#visual .text h2{ font-size: 6rem; }
	#visual .text p{ font-size: 1.8rem; }
	#visual .scroll-box{ width: 100px; }

	#visual .text-box .btns button{ width: 50px; height: 50px; }
	#visual .text-box .btns button::after{ width: 15px; }
	#visual .text-box .btns > div{ margin-left: 10px; }
	#visual .text-box .btns .bar{ width: 70px; }
	#visual .text-box .btns span{ font-size: 2.4rem; }
}

@media screen and (max-width: 900px){
	#visual .text-box{ height: 100%; text-align: center; padding: var(--headerH) 0 0; }
	#visual .text-box > div{ height: 100%; }
	#visual .text-box .flex-box{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: var(--headerH); }
	#visual .text-box ul{ width: 100%; }
	#visual .text h2{ font-size: 5rem; line-height: 1.2; }
	#visual .text p{ font-size: 1.7rem; padding: 0 30px; }

	#visual .btns{ position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); }
	#visual .text-box .btns .bar{ width: 50px; }

	#visual .scroll-box{ margin-top: 50px; position: static; }
}

@media screen and (max-width: 640px){
	#visual .pc{ display: none; }
	#visual .mobile{ display: block; }
}

@keyframes rotate360{
	0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }
}

@keyframes top50{
	0%{ top: 40%; }
	50%{ top: 60%; }
	100%{ top: 40%; }
}

@keyframes opacity1{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}


/* concerrt */
#concert{ padding: 130px 0 190px; overflow: hidden; }
#concert .title-box{ text-align: center; margin-bottom: 35px; }
#concert .flex-box{ display: flex; align-items: center; margin-bottom: 45px; position: relative; z-index: 15; }
#concert .date{ width: 300px; position: relative; z-index: 15; }
#concert .date p{ font-family: var(--NanumEB); font-size: 6.4rem; font-weight: 900; color: #111; letter-spacing: -0.02em; }
#concert .button{ width: 125px; display: flex; justify-content: flex-end; position: relative; z-index: 10; }
#concert .button a{ display: flex; justify-content: center; align-items: center; width: 100px; height: 60px; background: #111; border-radius: 10px; font-size: 1.7rem; font-weight: 500; color: #fff; line-height: 1; letter-spacing: -0.02em; text-align: center; }

#concert .slide{ width: calc(100% - 280px - 145px); position: relative; }
#concert .slide::before, #concert .slide::after{ content: ""; width: calc(100vw - 100%); height: 100%; background: var(--baseBg); position: absolute; top: 0; z-index: 10; }
#concert .slide::before{ left: 0; transform: translateX(-100%); }
#concert .slide::after{ right: 0; transform: translateX(100%); }
#concert .day-wrap .slick-list{ margin-right: -37px; overflow: visible; }
#concert .day{ display: flex; flex-direction: column; align-items: center; margin-right: 37px; position: relative; cursor: pointer; }
#concert .day span{ display: inline-block; font-family: var(--Nanum); font-size: 1.4rem; color: #111; letter-spacing: -0.02em; text-align: center; }
#concert .day .num{ width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-family: var(--NanumB); margin-top: 10px; border-radius: 50%; overflow: hidden; position: relative; }
#concert .day .num::before{ content: attr(data-day); color: inherit; }
#concert .day.border .num{ border: 1px solid #111; }
#concert .day.full .num{ background: #111; color: #fff; }
#concert .day.half .num{ border: 1px solid #111; }
#concert .day.half .num::before, #concert .day.half .num::after{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; }
#concert .day.half .num::after{ content: attr(data-day); color: #fff; background: #111; clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0%); }

#concert .day ul{ width: 220px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); text-align: center; padding-top: 10px; display: none; }
#concert .day ul li{ position: relative; transform: translateY(30px); opacity: 0; transition: transform 0.8s, opacity 0.8s; }
#concert .day ul li:not(:last-of-type){ margin-bottom: 5px; }
#concert .day ul li::before{ content: ""; width: 8px; height: 6px; background: #111; position: absolute; top: 1px; left: 50%; transform: translate(-50%, -100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
#concert .day ul li:not(:first-of-type)::before{ display: none; }
#concert .day .box{ background: #fff; border: 1px solid #111; border-radius: 10px; padding: 10px; }
#concert .day .box *{ color: #111; letter-spacing: -0.02em; }
#concert .day .box span{ font-family: var(--baseFont); font-size: 1.4rem; font-weight: 400; color: #FF8A00; letter-spacing: -0.02em; }
#concert .day .box span.green{ color: #007F41; }
#concert .day .box span.yellow{ color: #FF8A00; }
#concert .day .box dl dt{ font-size: 1.5rem; font-weight: 600; margin: 4px 0; }
#concert .day .box dl dd{ font-size: 1.3rem; font-weight: 300; }
#concert .day .box dl dd:not(:first-of-type){ margin-top: 4px; }

#concert .day .more{ width: 100%; height: 45px; display: flex; justify-content: center; align-items: center; background: #111; border: none; border-radius: 10px; -webkit-border-radius: 10px; font-family: var(--engFont); font-size: 1.7rem; font-weight: 500; color: #fff !important; letter-spacing: -0.02em; text-align: center; }

a.round-btn:link, a.round-btn:hover, .round-btn:visited{ color: #fff; }

#concert .day ul.on li{ transform: translateY(0); opacity: 1; }

#concert .poster-wrap{ width: 100%; position: relative; z-index: 10; cursor: none; }
#concert .poster-wrap *{ cursor: none; }
#concert .poster-wrap::before{ content: ""; width: calc((100vw - 100%) / 2); height: 100%; background: var(--baseBg); position: absolute; top: 0; left: 0; z-index: 10; transform: translateX(-100%); }
#concert .poster-wrap .slick-list{ overflow: visible; margin-right: -47px; }
#concert .poster-wrap .slick-track{ margin: 0; }
#concert .poster{ margin-right: 47px; position: relative; }
#concert .poster h4, #concert .poster p, #concert .poster ul li{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#concert .poster .figure{ border-radius: 0px 0px 0px 0px; overflow: hidden; transition: border-radius 1s; position: relative; }
#concert .poster figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 141%; margin-bottom: -4px; }
#concert .poster figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; }
#concert .poster figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#concert .poster .text{ width: 100%; position: absolute; top: calc(55% + 50px); left: 0; z-index: 20; transform: translateY(-50%); text-align: center; padding: 20px; opacity: 0; transition: top 0.5s, opacity 0.5s; }
#concert .poster .text *{ color: #fff; letter-spacing: -0.02em; }
#concert .poster .text h4{ font-size: 2.8rem; font-weight: 600; }
#concert .poster .text p{ font-size: 2rem; font-weight: 400; margin: 15px 0 18px; }
#concert .poster .text ul li{ font-size: 1.6rem; }
#concert .poster .text ul li:not(:last-of-type){ margin-bottom: 5px; }
#concert .poster .info{ border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 25px 0; margin-top: 25px; }
#concert .poster .info *{ letter-spacing: -0.02em; }
#concert .poster .info h4{ font-size: 2.5rem; font-weight: 500; color: #111; }
#concert .poster .info p{ font-size: 1.7rem; font-weight: 400; color: #111; margin: 10px 0 14px; }
#concert .poster .info ul li{ font-size: 1.4rem; font-weight: 400; color: #333; padding-left: 20px; position: relative; }
#concert .poster .info ul li:not(:last-of-type){ margin-bottom: 5px; }
#concert .poster .info ul li::before{ position: absolute; top: calc(1.5em / 2); left: 0; transform: translateY(-50%); }
#concert .poster .info ul li.location::before{ content: url("/img/main/location_icon.svg"); }
#concert .poster .info ul li.date::before{ content: url("/img/main/date_icon.svg"); }

#concert .poster a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; }

@media screen and (hover: hover){
	#concert .poster:hover .figure{ border-radius: 300px 300px 0 0; }
	#concert .poster:hover figure::after{ opacity: 1; }
	#concert .poster:hover .text{ top: 55%; opacity: 1; }
}

@media screen and (max-width: 1700px){
	#concert{ padding: 100px 0 150px; }
	#concert .date{ width: 260px; }
	#concert .date p{ font-size: 5.5rem; }

	#concert .slide{ width: calc(100% - 260px - 145px); }

	#concert .poster .text h4{ font-size: 2.6rem; }
	#concert .poster .text p{ font-size: 1.9rem; }

	#concert .poster .info h4{ font-size: 2.2rem; }
}

@media screen and (max-width: 1500px){
	#concert .poster .info{ margin-top: 15px; padding: 15px 0; }
}

@media screen and (max-width: 1300px){
	#concert .poster-wrap .slick-list{ margin-right: -20px; }
	#concert .poster{ margin-right: 20px; }
}

@media screen and (max-width: 1280px){
	#concert{ padding: 80px 0 100px; }
	#concert .date{ width: 220px; }
	#concert .date p{ font-size: 4.5rem; }

	#concert .day ul{ width: 180px; }

	#concert .button{ width: 110px; }
	#concert .button a{ width: 80px; height: 50px; font-size: 1.6rem; }

	#concert .slide{ width: calc(100% - 220px - 110px); }

	#concert .poster .text h4{ font-size: 2.4rem; }
	#concert .poster .text p{ font-size: 1.8rem; }

	#concert .poster .info h4{ font-size: 2rem; }
	#concert .poster .info p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1000px){
	#concert{ padding: 60px 0 80px; }
	#concert .flex-box{ flex-direction: column; align-items: flex-start; position: relative; }
	#concert div.date{ width: calc(100% - 110px); margin-bottom: 20px; }
	
	#concert .slide{ width: 100%; }
	#concert .day:first-of-type ul{ left: 0; transform: translateX(0); }
	#concert .day:first-of-type ul li::before{ left: 20px; }

	#concert .button{ position: absolute; /* top: -4px; */ top: 0; right: 0; }
	#concert .button a{ width: 80px; height: 45px; } 
}

@media screen and (max-width: 900px){
	#concert .date p{ font-size: 3rem; }

	#concert .button{ top: -4px; }

	#concert .poster .text h4{ font-size: 2.2rem; }
	#concert .poster .text p{ font-size: 1.6rem; margin: 10px 0; }

	#concert .poster .info h4{ font-size: 1.8rem; }
}


/* mpyc */
#mpyc{ background: #231815; padding: 120px 0 145px; }
#mpyc .tit{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; position: relative; }
#mpyc .tit a{ width: 120px; height: 120px; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.6); padding: 15px; border-radius: 50%; }
#mpyc .tit a::before{ content: ""; display: block; width: 100%; height: 26px; background: url("/img/main/link_arrow.svg") no-repeat center center / contain; }

#mpyc .title-box{ width: calc(100% - 120px); display: flex; flex-wrap: wrap; align-items: center; }
#mpyc .title-box > *{ padding-right: 80px; }
#mpyc .title-box h2{ color: #FFF; }
#mpyc .title-box p{ color: #FFF; line-height: 1.7; }

#mpyc .gallery ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -5px; }
#mpyc .gallery ul li{ margin: 5px; }
#mpyc .gallery figure{ display: block; padding-bottom: 52.68%; position: relative; overflow: hidden; }
#mpyc .gallery figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-width: 1700px){
	#mpyc{ padding: 100px 0 120px; }
	#mpyc .tit{ margin-bottom: 40px; }
	#mpyc .tit a{ width: 90px; height: 90px; }

	#mpyc .title-box{ width: calc(100% - 90px); }
}

@media screen and (max-width: 1280px){
	#mpyc{ padding: 50px 0; }
	#mpyc .tit{ margin-bottom: 20px; }
	#mpyc .title-box > *{ padding-right: 50px; }
	#mpyc .tit a{ width: 60px; height: 60px; }

	#mpyc .title-box{ width: calc(100% - 60px); }
}

@media screen and (max-width: 800px){
	#mpyc .gallery ul{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 600px){
	#mpyc .tit a{ position: absolute; top: 5px; right: 0; }

	#mpyc .title-box{ width: 100%; }
	#mpyc .title-box h2{ padding-right: 80px; }
	#mpyc .title-box p{ padding-right: 0; }
}


/* academy */
#academy{ background: var(--mainColor); overflow: hidden; }
#academy > div{ position: relative; }
#academy .text-box{ width: 100%; position: absolute; bottom: 95px; left: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; }
#academy .title-box *{ color: #fff; }
#academy .text-box .link.on{ pointer-events: auto; }

#academy .flex-box{ height: 100vh; display: flex; justify-content: flex-end; }
#academy .figure-box{ max-width: 100%; width: 815px; display: flex; position: relative; }
#academy .figure-box > div{ width: calc((100% - 55px) / 2); position: absolute; }
#academy .figure-box > div.odd{ top: 0; left: 0; }
#academy .figure-box > div.even{ bottom: -50px; right: 0; }
#academy .figure-box > div:first-of-type{ margin-right: 55px; }
#academy .figure-box ul li{ padding-bottom: 50px; }
#academy .figure-box figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 143%; margin-bottom: -4px; }
#academy .figure-box figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#academy .figure-box .odd .orign{ animation: origin_up 60s linear infinite; }
#academy .figure-box .odd .clone{ animation: clone_up 60s linear infinite; }
#academy .figure-box .even .orign{ animation: origin_down 60s linear infinite; }
#academy .figure-box .even .clone{ animation: clone_down 60s linear infinite; }

/* 위로 롤링 */
@keyframes origin_up{
	0%{ transform: translateY(0); }
	50%{ transform: translateY(-100%); }
	50.01%{ transform: translateY(100%) }
	100%{ transform: translateY(0); }
}

@keyframes clone_up{
	0%{ transform: translateY(0); }
	100%{ transform: translateY(-200%) }
}

/* 아래으로 롤링 */
@keyframes clone_down{
	0%{ transform: translateY(0); }
	50%{ transform: translateY(100%); }
	50.01%{ transform: translateY(-100%); }
	100%{ transform: translateY(0); }
}

@keyframes origin_down{
	0%{ transform: translateY(0) }
	100%{ transform: translateY(200%); }
}

@media screen and (max-width: 1740px){
	#academy .text-box{ padding: 0 20px; }
}

@media screen and (max-width: 1500px){
	#academy .figure-box{ width: 700px; }
	#academy .figure-box figure{ opacity: 0.8; }
	#academy .figure-box figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); }
}

@media screen and (max-width: 1280px){
	#academy .title-box{ width: calc(100% - 150px); }

	#academy .figure-box{ width: 600px; }
}

@media screen and (max-width: 1000px){
	#academy .text-box{ bottom: 50%; transform: translateY(50%); flex-direction: column; align-items: center; }
	#academy .title-box{ max-width: 100%; width: 600px; text-align: center; margin-bottom: 40px; }

	#academy .flex-box{ justify-content: center; }
	#academy .figure-box{ width: 100%; }
	#academy .figure-box > div{ width: calc((100% - 20px) / 2); }
	#academy .figure-box > div:first-of-type{ margin-right: 20px; }
}


/* board */
#board{ padding: 140px 0 115px; }
#board .title{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
#board .title h4{ font-family: var(--NanumEB); font-size: 6.4rem; font-weight: 800; color: #000; letter-spacing: -0.02em; }
#board .title a{ width: 75px; height: 75px; display: inline-block; border: 1px solid rgba(17, 17, 17, 0.6); border-radius: 50%; position: relative; }
#board .title a::before{ content: ""; width: 25px; height: 25px; display: inline-block; background: url("/img/main/link_arrow.svg") no-repeat center center / contain; filter: invert(1); -webkit-filter: invert(1); position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); transition: filter 0.2s 0.2s; }
#board .title a::after{ content: ""; display: block; height: 100%; background: #111; border-radius: 50%; transform: scale(0); transition: transform 0.5s; }
#board .grid-box{ display: grid; grid-template-columns: 670px calc(100% - 670px); margin: -40px; }
#board .grid-box > div{ margin: 40px; }

#board .video .iframe{ position: relative; }
#board .video figure{ display: block; position: relative; overflow: hidden; padding-bottom: 56.323%; }
#board .video figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#board .video button{ width: 90px; height: 90px; background: none; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#board .notice ul{ margin-top: -40px; }
#board .notice ul li{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 40px 0; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
#board .notice ul li h6{ width: calc(100% - 100px); font-size: 2rem; font-weight: 400; color: #111; letter-spacing: -0.02em; padding-left: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; }
#board .notice ul li h6::before{ padding: 6px 10px; border-radius: 50px; font-size: 1.4rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#board .notice ul li.notice h6::before{ content: "NOTICE"; background: var(--mainColor); }
#board .notice ul li.news h6::before{ content: "NEWS"; background: #6B4B43; }
#board .notice ul li span{ font-size: 1.7rem; font-weight: 300; color: #111; letter-spacing: -0.02em; }
#board .notice ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (hover: hover){
	#board .notice .title a:hover::before{ filter: unset; -webkit-filter: unset; transition-delay: unset; }
	#board .notice .title a:hover::after{ transform: scale(1); }
}

@media screen and (max-width: 1700px){
	#board{ padding: 100px 0; }
	#board .title{ margin-bottom: 40px; }
	#board .title h4{ font-size: 5.5rem; }
	#board .title a{ width: 60px; height: 60px; }

	#board .video button{ width: 75px; height: 75px; }

	#board .notice ul{ margin-top: -30px; }
	#board .notice ul li{ padding: 30px 0; }
}

@media screen and (max-width: 1280px){
	#board{ padding: 70px 0; }
	#board .title{ margin-bottom: 30px; }
	#board .title h4{ font-size: 4.5rem; }
	#board .title a{ width: 50px; height: 50px; }
	#board .grid-box{ grid-template-columns: 50% 50%; margin: -20px; }
	#board .grid-box > div{ margin: 20px; }

	#board .video button{ width: 60px; height: 60px; }

	#board .notice ul{ margin-top: -25px; }
	#board .notice ul li{ padding: 25px 0; }
	#board .notice ul li h6{ font-size: 1.9rem; }
	#board .notice ul li h6::before{ padding: 5px 10px; }
	#board .notice ul li span{ font-size: 1.6rem; }
}

@media screen and (max-width: 1100px){
	#board .grid-box{ display: block; margin: 0; }
	#board .grid-box > div{ margin: 0; }
	#board .grid-box > div:not(:last-of-type){ margin-bottom: 70px; }
}

@media screen and (max-width: 900px){
	#board .title h4{ font-size: 4rem; }
	#board .video .title{ margin-bottom: 10px; }

	#board .notice ul{ margin-top: -20px; }
	#board .notice ul li{ padding: 20px 0; }
	#board .notice ul li h6{ font-size: 1.8rem; padding-left: 80px; }
	#board .notice ul li h6::before{ font-size: 1.3rem; padding: 4px 8px; }
}



/* iframe */
#iframe{ background: var(--mainColor); margin-top: -2px; }
#iframe .iframe{ width: 100%; position: relative; /* padding-bottom: 49%; */ padding-bottom: 56.5%; opacity: 1 !important; }
#iframe .iframe::after{ content: ""; width: 100%; height: 100%; background: var(--mainColor); position: absolute; top: 0; left: 0; transform: scaleX(1); transform-origin: left; transition: transform 1.5s; }
#iframe .iframe > img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#iframe .iframe button{ width: 90px; height: 90px; background: none; border: 1px solid #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#iframe .iframe button img{ position: relative; top: 1px; left: 1px; }
#iframe .iframe a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0 ; z-index: 10; }

#iframe .iframe.aos-animate::after{ transform: scaleX(0); }

@media screen and (max-width: 1280px){
	#logo{ padding-bottom: 50px; }
}

@media screen and (max-width: 1280px){
	#iframe .iframe button{ width: 70px; height: 70px; }
}

@media screen and (max-width: 900px){
	#iframe .iframe button{ width: 60px; height: 60px; }
}

@media screen and (max-width: 800px){
	#iframe{ margin-top: 80px; }

}


/* notice */
#notice{ padding: 125px 0 250px; }
#notice .flex-box{ display: flex; }
#notice .text-box{ width: 600px; }
#notice .title-box a{ margin-top: 60px; }

#notice .list-box{ width: calc(100% - 600px); padding-top: 20px; }
#notice .list-box ul li{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 40px 0; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
#notice .list-box ul li h6{ width: calc(100% - 100px); font-size: 2.3rem; font-weight: 400; color: #111; letter-spacing: -0.02em; padding-left: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; }
#notice .list-box ul li h6::before{ padding: 6px 10px; border-radius: 50px; font-size: 1.4rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#notice .list-box ul li.notice h6::before{ content: "NOTICE"; background: var(--mainColor); }
#notice .list-box ul li.news h6::before{ content: "NEWS"; background: #6B4B43; }
#notice .list-box ul li span{ font-size: 1.7rem; font-weight: 300; color: #111; letter-spacing: -0.02em; }
#notice .list-box ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1700px){
	#notice{ padding: 100px 0 200px; }
	#notice .list-box ul li h6{ font-size: 2.1rem; }
}

@media screen and (max-width: 1500px){
	#notice .text-box{ width: 500px; }
	#notice .list-box{ width: calc(100% - 500px); }
}

@media screen and (max-width: 1280px){
	#notice{ padding: 80px 0 150px; }
	#notice .flex-box{ flex-direction: column; }
	#notice .text-box{ width: 100%; }
	#notice .title-box{ position: relative; }
	#notice .title-box div{ position: absolute; top: 50%; right: 0; transform: translate(-50px, -50%); }
	#notice .title-box.aos-animate div{ transform: translate(0, -50%); }
	#notice .title-box a{ margin-top: 0; }
	#notice .title-box a.round-btn{ width: 60px; height: 60px; }
	#notice .title-box a.round-btn img{ transform: scale(0.8); }

	#notice .list-box{ width: 100%; }
	#notice .list-box ul li{ padding: 30px 0; }
	#notice .list-box ul li h6{ font-size: 1.9rem; }
	#notice .list-box ul li h6::before{ padding: 5px 10px; }
	#notice .list-box ul li span{ font-size: 1.6rem; }
}

@media screen and (max-width: 900px){
	#notice{ padding: 60px 0 100px; }
	#notice .list-box ul li{ padding: 25px 0; }
	#notice .list-box ul li h6{ font-size: 1.8rem; padding-left: 80px; }
	#notice .list-box ul li h6::before{ font-size: 1.3rem; padding: 4px 8px; }
}



/* logo */
#logo{ padding-bottom: 75px; overflow: hidden; display: flex; }
#logo ul{ display: flex; align-items: center; }
#logo ul li{ width: max-content; margin-right: 120px; }
#logo ul li figure{ position: relative; }
#logo ul li figure::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 15; transform: translate(-50%, -50%); }
#logo ul li figure img{ opacity: 0; transition: opacity 0.8s; }
#logo ul li figure img.hover{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; opacity: 1; mix-blend-mode: luminosity; }

#logo ul.origin{ animation: 100s linear 0s infinite normal forwards running origin_left; }
#logo ul.clone{ animation: 100s linear 0s infinite normal none running clone_left; }

/* 왼쪽으로 롤링 */
@keyframes origin_left{
	0%{ transform: translateX(0); }
	50%{ transform: translateX(-100%); }
	50.01%{ transform: translateX(100%) }
	100%{ transform: translateX(0); }
}

@keyframes clone_left{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-200%) }
}

/* 오른쪽으로 롤링 */
@keyframes origin_right{
	0%{ transform: translateX(0); }
	50%{ transform: translateX(100%); }
	50.01%{ transform: translateX(-100%); }
	100%{ transform: translateX(0); }
}

@keyframes clone_right{
	0%{ transform: translateX(-200%) }
	100%{ transform: translateX(0); }
}

@media screen and (max-width: 1280px){
	#logo{ padding-bottom: 50px; }
}


@media screen and (hover:hover){
	#logo ul li:hover figure img{ opacity: 1; }
	#logo ul li:hover figure img.hover{ opacity: 0; }
}

@media screen and (max-width: 700px){
	#logo ul li figure img{ opacity: 1; }
	#logo ul li figure img.hover{ opacity: 0; }
}


/* animation */
@keyframes blurSpacing{
	0%{ letter-spacing: var(--spacing); filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; }
	100%{ letter-spacing: 0; filter: blur(0px); -webkit-filter: blur(0px); opacity: 1; }
}

@keyframes textClip{
	0%{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
	100%{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}