@charset "UTF-8";

/**
 * --------------------------------
 * event MO
 * --------------------------------
 */

body.fixed {position: fixed;overscroll-behavior: contain;overflow-y: scroll;}

.evt_intro {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;z-index: 100;}
.evt_intro .text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;gap: 20px;width: 180px;height: 120px;}
.evt_intro .text.reverse {opacity: 0;}
.evt_intro .text div {position: relative;width: 80px;height: 120px;}
.evt_intro .text span {position: absolute;width: 30px;height: 0;background: #CC2016;}
.evt_intro .text .n span.left {left: 0;bottom: 0;animation: animHeight .2s linear forwards;animation-delay: .3s;}
.evt_intro .text .n span.left i {opacity: 0;}
.evt_intro .text .n span.center {top: 0;left: 0;transform: skewX(22deg);transform-origin: top left;box-shadow: 0 0 15px #000;z-index: 2;animation: animHeight .2s linear forwards;animation-delay: .5s;}
.evt_intro .text .n span.right {right: 0;bottom: 0;animation: animHeight .2s linear forwards;animation-delay: .7s;}
.evt_intro .text .e span.left {left: 0;bottom: 0;animation: animHeight .2s linear forwards;animation-delay: .9s;}
.evt_intro .text .e span.top {left: 0;top: 0;width: 0;height: 30px;animation: animWidth .2s linear forwards;animation-delay: 1.1s;}
.evt_intro .text .e span.center {left: 0;top: calc(50% - 15px);width: 0;height: 30px;box-shadow: 0 0 15px #000;animation: animWidth .2s linear forwards;animation-delay: 1.3s;}
.evt_intro .text .e span.bottom {left: 0;bottom: 0;width: 0;height: 30px;animation: animWidth .2s linear forwards;animation-delay: 1.5s;}
@keyframes animHeight {
	0%{height: 0;}
	100%{height: 100%;}
}
@keyframes animWidth {
	0%{width: 0;}
	100%{width: 100%;}
}
.evt_intro.zoomin .text.start {opacity: 0;}
.evt_intro.zoomin .text.reverse {opacity: 1;}
.evt_intro.zoomin .text.reverse {animation: animZoomin 2s linear forwards;animation-delay: .5s;}
.evt_intro.zoomin .text.reverse .n span.left {height: 100%;animation: animHeight .2s linear forwards reverse;animation-delay: 3.2s;}
.evt_intro.zoomin .text.reverse .n span.center {height: 100%;animation: animHeight .2s linear forwards reverse;animation-delay: 3.0s;}
.evt_intro.zoomin .text.reverse .n span.right {height: 100%;animation: animHeight .2s linear forwards reverse;animation-delay: 2.8s;}
.evt_intro.zoomin .text.reverse .e span.left {height: 100%;animation: animHeight .2s linear forwards reverse;animation-delay: 2.6s;}
.evt_intro.zoomin .text.reverse .e span.top {width: 100%;animation: animWidth .2s linear forwards reverse;animation-delay: 2.4s;}
.evt_intro.zoomin .text.reverse .e span.center {width: 100%;animation: animWidth .2s linear forwards reverse;animation-delay: 2.2s;}
.evt_intro.zoomin .text.reverse .e span.bottom {width: 100%;animation: animWidth .2s linear forwards reverse;animation-delay: 2.0s;}
.evt_intro.zoomin .text.reverse .n span.left.zoom {display: flex;gap: 3%;animation: none;background-color: transparent;animation: animLeftZoomin 2s linear forwards;animation-delay: 1.6s;}
.evt_intro.zoomin .text.reverse .n span.left.zoom i {display: inline-flex;height: 100%;opacity: 1;transition: opacity ease-in-out .4s 1s;}
.evt_intro.zoomin .text.reverse .n span.left.zoom i:nth-of-type(4n+1) {width: 5%;background-color: #CC2016;}
.evt_intro.zoomin .text.reverse .n span.left.zoom i:nth-of-type(4n+2) {width: 3%;background-color: #831F19;}
.evt_intro.zoomin .text.reverse .n span.left.zoom i:nth-of-type(4n+3) {width: 8%;background-color: #FFDB46;}
.evt_intro.zoomin .text.reverse .n span.left.zoom i:nth-of-type(4n+4) {width: 1%;background-color: #4d4d4f;}
@keyframes animZoomin {
	100%{transform: translate(30%, -50%) scale(2);}
}
@keyframes animLeftZoomin {
	100%{transform: scale(30);}
}
.evt_intro.hide {opacity: 0;visibility: hidden;transition: opacity ease-in-out .4s, visibility ease-in-out .2s .4s;}

.evt_header {position: relative;margin: 0 auto;padding: 4.8611vw 6.9444vw 0;max-width: 720px;display: flex;justify-content: space-between;z-index: 1;}
.evt_header .logo a {position: relative;display: inline-block;width: 18.7500vw;height: 5.2778vw;max-width: 135px;max-height: 38px;min-width: 68px;min-height: 20px;background: url('../../../../neteacher/m/event/2025/0324/evt_logo.png') 0 0 no-repeat;background-size: contain;z-index: 11;}
.evt_header p img {width: 20.8333vw;max-width: 150px;min-width: 75px;}

#eventWrap {background-color: #121212;}
.evt_main {margin: 0 auto;width: 100%;max-width: 720px;min-width: 320px;}
.evt_main .inner {position: relative;}

.evt_top {position: fixed;bottom: -106px;right: 5.5556vw;width: 50px;height: 50px;transition: bottom .4s ease-in-out;z-index: 11;}
.evt_top.active {bottom: 5.5556vw;}
.evt_top .btn_evttop {display: inline-block;width: 50px;height: 50px;vertical-align: top;}
.evt_top .btn_evttop::after {content: '';display: inline-block;width: 50px;height: 50px;border-radius: 50%;background: url(https://pic.neungyule.com/neteacher//m/common/ico_quick_en.png) 0 -50px no-repeat;background-size: 100px auto;overflow: hidden;}

.sec_evt {position: relative;overflow: hidden;}
.sec_evt img {vertical-align: top;}

.sec_intro {position: relative;margin-top: -18.0556vw;padding-bottom: 1.1111vw;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_bg.jpg') 50% 0 no-repeat;background-size: 100%;overflow: hidden;}
.sec_intro::after {content: '';position: absolute;bottom: 0;left: calc(50% - 48.0556vw);width: 96.1111vw;height: 96.1111vw;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_teacher_bg.png') 0 0 no-repeat;background-size: cover;}
.sec_intro .inner::before {content: '';position: absolute;top: 69.4444vw;left: 0;width: 100.0000vw;height: 100.0000vw;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_teacher1_bg.png') 0 0 no-repeat;background-size: cover;}
.sec_intro.teacher2 .inner::before {background: url('../../../../neteacher/m/event/2025/0324/evt_intro_teacher2_bg.png') 0 0 no-repeat;background-size: cover;}
.sec_intro.teacher3 .inner::before {background: url('../../../../neteacher/m/event/2025/0324/evt_intro_teacher3_bg.png') 0 0 no-repeat;background-size: cover;}
.sec_intro .txt_area {position: relative;padding-top: 18.0556vw;overflow: hidden;z-index: 0;}
.sec_intro .txt_area::before {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 78.3333vw;height: 75.2778vw;max-width: 564px;max-height: 542px;min-width: 282px;min-height: 271px;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_light2.png') 0 0 no-repeat;background-size: cover;opacity: 0;animation: aniintrolight 5s linear infinite;animation-delay: 2s;z-index: 2;}
.sec_intro .txt_area::after {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 28.8889vw;height: 24.4444vw;max-width: 208px;max-height: 176px;min-width: 104px;min-height: 88px;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_light1.png') 0 0 no-repeat;background-size: cover;z-index: 3;}
@keyframes aniintrolight {
	0% {opacity: 1;}
	1% {opacity: 0;}
	2% {opacity: 1;}
	3% {opacity: 0;}
	4% {opacity: 1;}
	6% {opacity: 0;}
	15% {opacity: 1;}
	100% {opacity: 1;}
}
.sec_intro h2 {position: relative;padding-top: 6.9444vw;text-align: center;transform: translateY(0);opacity: 0;transition: transform .6s ease-in-out .2s, opacity 1.6s ease-in-out .2s;}
.sec_intro h2 img {width: 41.3889vw;max-width: 298px;min-width: 149px;}
.sec_intro p {position: relative;margin-top: 6.2500vw;text-align: center;transform: translateY(0) scale(0);opacity: 0;transition: transform .6s ease-in-out .2s, opacity .6s ease-in-out .2s;transition-delay: .6s;}
.sec_intro p img {width: 69.4444vw;max-width: 500px;min-width: 250px;}
.sec_intro p + p {margin-top: 4.1667vw;transition-delay: .8s;}
.sec_intro p + p img {width: 85.5556vw;max-width: 616px;min-width: 308px;}
.sec_intro p + p + p {margin-top: 4.1667vw;transition-delay: 1s;}
.sec_intro p + p + p img {width: 73.8889vw;max-width: 532px;min-width: 266px;}
.sec_intro p .txt_light {position: relative;display: inline-block;width: 85.5556vw;height: 14.7222vw;max-width: 616px;max-height: 106px;min-width: 308px;min-height: 53px;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_txt2.png') 0 0 no-repeat;background-size: cover;overflow: hidden;}
.sec_intro p .txt_light::before {content: '';position: absolute;top: -10%;left: -20%;width: 28.1944vw;height: 38.1944vw;max-width: 203px;max-height: 275px;min-width: 102px;min-height: 138px;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_txt2_light2.png') 0 0 no-repeat;background-size: cover;animation: aniintrolight2 5s linear infinite;animation-delay: 2.2s;}
.sec_intro p .txt_light::after {content: '';position: absolute;top: -10%;left: -20%;width: 28.1944vw;height: 38.1944vw;max-width: 203px;max-height: 275px;min-width: 102px;min-height: 138px;background: url('../../../../neteacher/m/event/2025/0324/evt_intro_txt2_light2.png') 0 0 no-repeat;background-size: cover;animation: aniintrolight2 5s linear infinite;animation-delay: 2.4s;}
.sec_intro p .txt_light img {position: relative;z-index: 1;}
@keyframes aniintrolight2 {
	0% {left: -20%;}
	20% {left: 40%;}
	35% {left: 60%;}
	45% {left: 120%;}
	100% {left: 120%;}
}
.sec_intro .swiper_area {position: relative;padding-top: 0;max-width: 720px;height: 101.3889vw;max-height: 730px;min-height: 365px;overflow: hidden;}
.sec_intro .intro_swiper {position: absolute;top: 0;left: 50%;transform: translateX(-50%);margin-left: 10px;width: 102.7778vw;max-width: 740px;min-width: 370px;overflow: hidden;z-index: 1;}
.sec_intro .intro_swiper .swiper-slide {position: relative;width: 102.7778vw;height: 97.2222vw;max-width: 740px;max-height: 700px;min-width: 370px;min-height: 350px;opacity: 0;}
.sec_intro .intro_swiper .swiper-slide .txt_name {position: absolute;top: -12.5000vw;left: 50%;transform: translateX(-50%) scale(1.2);transition: opacity .2s ease-in-out;}
.sec_intro .intro_swiper .swiper-slide .txt_name img {width: 18.3333vw;max-width: 132px;min-width: 66px;}
.sec_intro .intro_swiper .swiper-slide .pic {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 79.1667vw;height: 108.3333vw;max-width: 570px;max-height: 780px;min-width: 285px;min-height: 390px;overflow: hidden;}
.sec_intro .intro_swiper .swiper-slide .pic img {position: relative;width: 100%;}
.sec_intro .intro_swiper .swiper-slide .pic .shadow {position: absolute;top: 5.5556vw;left: 4.1667vw;margin-left: 0;z-index: 0;opacity: 0;transition: opacity .2s ease-in-out;}
.sec_intro .intro_swiper .swiper-slide .txt {position: absolute;bottom: -13.8889vw;left: 50%;transform: translateX(-50%);width: 69.4444vw;max-width: 500px;min-width: 250px;opacity: 0;transition: bottom .6s ease-in-out .2s, opacity .6s ease-in-out .2s;}
.sec_intro .intro_swiper .swiper-slide-active {transform-origin: 0 100%;opacity: 1;}
.sec_intro .intro_swiper .swiper-slide-active .txt_name {opacity: 0;visibility: hidden;transition: opacity 0s ease-in-out;}
.sec_intro .intro_swiper .swiper-slide-active .pic {transform: translateY(11.1111vw) translateX(-50%);}
.sec_intro .intro_swiper .swiper-slide-active .pic .shadow {opacity: 1;}
.sec_intro .intro_swiper .swiper-slide-active .txt {opacity: 1;bottom: -2.7778vw;}
.sec_intro .intro_swiper .swiper-slide-prev, .sec_intro .intro_swiper .swiper-slide-next {margin-top: 25.0000vw;opacity: 1;}
.sec_intro .intro_swiper .swiper-slide-prev .txt, .sec_intro .intro_swiper .swiper-slide-next .txt {transition: all .2s ease-in-out 0s;}
.sec_intro .intro_swiper .swiper-slide.teacher1 .pic img {margin-left: -2.7778vw;}
.sec_intro .intro_swiper .swiper-slide.teacher1 .pic .shadow {left: 1.3889vw;margin-left: 0;}
.sec_intro .intro_swiper .swiper-slide-prev.teacher1 .txt_name {left: 45%;}
.sec_intro .intro_swiper .swiper-slide-prev.teacher2 .txt_name {left: 45%;}
.sec_intro .intro_swiper .swiper-slide-next.teacher1 .txt_name {left: 45%;}
.sec_intro .intro_swiper .swiper-slide-next.teacher2 .txt_name {left: 45%;}
.sec_intro.active h2 {transform: translateY(0);opacity: 1;}
.sec_intro.active p {transform: translateY(0) scale(1);opacity: 1;}

.sec_info {padding: 4.8611vw 0 38.8889vw;background: url('../../../../neteacher/m/event/2025/0324/evt_info_bg.jpg') 50% 100% no-repeat;background-size: 100%;text-align: center;}
.sec_info p {opacity: 0;transform: translateY(100px);transition: transform .6s ease-in-out .2s, opacity .6s ease-in-out .2s;}
.sec_info p img {width: 81.9444vw;max-width: 590px;min-width: 295px;}
.sec_info .evt_btn {margin-top: 50px;opacity: 0;transform: translateY(100px);transition: transform .6s ease-in-out .2s, opacity .6s ease-in-out .2s;transition-delay: .6s;}
.sec_info .evt_btn img {width: 88.8889vw;max-width: 640px;min-width: 320px;}
.sec_info.active p {opacity: 1;transform: translateY(0);}
.sec_info.active .evt_btn {opacity: 1;transform: translateY(0);}

.sec_notice {padding: 11.1111vw 4.1667vw 22.2222vw;background-color: #000;}
.sec_notice h3 img {width: 51.6667vw;max-width: 372px;min-width: 186px;}
.sec_notice ul {margin: 4.5833vw 0 0 3.6111vw;}
.sec_notice ul li {position: relative;padding: 0.9722vw 0 0.9722vw 2.7778vw;line-height: 5.5556vw;font-size: 3.8889vw;color: #fff;font-weight: 300;word-break: keep-all;}
.sec_notice ul li::before {content: '';position: absolute;top: 3.3333vw;left: 0;width: 1.1111vw;height: 1.1111vw;border-radius: 100%;background-color: #fff;}
.sec_notice ul li small {display: inline-block;margin-top: 1.3889vw;font-size: 3.3333vw;}
.sec_notice ul li a {color: #fff;}

@media screen and (max-width: 360px) {
	.sec_intro {margin-top: -65px;padding-bottom: 4px;}
	.sec_intro::after {left: calc(50% - 173px);width: 346px;height: 346px;}
	.sec_intro .inner::before {top: 250px;left: calc(50% - 180px);width: 360px;height: 360px;}
	.sec_intro .txt_area {padding-top: 65px;}
	.sec_intro h2 {padding-top: 25px;}
	.sec_intro p {margin-top: 22px;}
	.sec_intro p + p {margin-top: 15px;}
	.sec_intro p + p + p {margin-top: 15px;}
	.sec_intro .intro_swiper .swiper-slide .pic .shadow {top: 20px;left: 15px;}
	.sec_intro .intro_swiper .swiper-slide .txt_name {top: -45px;}
	.sec_intro .intro_swiper .swiper-slide-active .pic {transform: translateY(40px) translateX(-50%);}
	.sec_intro .intro_swiper .swiper-slide .txt {bottom: -50px;}
	.sec_intro .intro_swiper .swiper-slide-active .txt {bottom: -10px;}
	.sec_intro .intro_swiper .swiper-slide-prev, .sec_intro .intro_swiper .swiper-slide-next {margin-top: 90px;}
	.sec_intro .intro_swiper .swiper-slide.teacher1 .pic img {margin-left: -10px;}
	.sec_intro .intro_swiper .swiper-slide.teacher1 .pic .shadow {left: 5px;}

	.sec_info {padding: 18px 0 140px;}

	.sec_notice {padding: 40px 15px 80px;}
	.sec_notice ul {margin: 17px 0 0 13px;}
	.sec_notice ul li {padding: 4px 0 4px 10px;line-height: 20px;font-size: 14px;}
	.sec_notice ul li::before {top: 14px;left: 0;width: 4px;height: 4px;}
	.sec_notice ul li small {margin-top: 5px;font-size: 12px;}

	.evt_header {padding: 17px 25px 0;}

	.evt_top {right:20px;}
	.evt_top.active {bottom: 20px;}
}

@media screen and (min-width: 720px) {
	.sec_intro {margin-top: -130px;padding-bottom: 8px;}
	.sec_intro::after {left: calc(50% - 346px);width: 692px;height: 692px;}
	.sec_intro .inner::before {top: 500px;left: calc(50% - 360px);width: 720px;height: 720px;}
	.sec_intro .txt_area {padding-top: 130px;}
	.sec_intro h2 {padding-top: 50px;}
	.sec_intro p {margin-top: 45px;}
	.sec_intro p + p {margin-top: 30px;}
	.sec_intro p + p + p {margin-top: 30px;}
	.sec_intro .intro_swiper .swiper-slide .pic .shadow {top: 40px;left: 30px;}
	.sec_intro .intro_swiper .swiper-slide .txt_name {top: -90px;}
	.sec_intro .intro_swiper .swiper-slide-active .pic {transform: translateY(80px) translateX(-50%);}
	.sec_intro .intro_swiper .swiper-slide .txt {bottom: -100px;}
	.sec_intro .intro_swiper .swiper-slide-active .txt {bottom: -20px;}
	.sec_intro .intro_swiper .swiper-slide-prev, .sec_intro .intro_swiper .swiper-slide-next {margin-top: 180px;}
	.sec_intro .intro_swiper .swiper-slide.teacher1 .pic img {margin-left: -20px;}
	.sec_intro .intro_swiper .swiper-slide.teacher1 .pic .shadow {left: 10px;}

	.sec_info {padding: 35px 0 280px;}

	.sec_notice {padding: 80px 30px 160px;}
	.sec_notice ul {margin: 33px 0 0 26px;}
	.sec_notice ul li {padding: 7px 0 7px 20px;line-height: 40px;font-size: 28px;}
	.sec_notice ul li::before {top: 24px;left: 0;width: 8px;height: 8px;}
	.sec_notice ul li small {margin-top: 10px;font-size: 24px;}

	.evt_header {padding: 35px 50px 0;}

	.evt_top {right:40px;}
	.evt_top.active {bottom: 40px;}
}