@charset "utf-8";
/* CSS Document */

/* ==================================================
    공통
================================================== */
.tit-box h3 {font-size:6rem; font-weight:700; line-height:84px; letter-spacing:-2.8px;}
.tit-box h3 span.block {display:block;}
.tit-des {font-size:2.4rem; font-weight:400; line-height:34px;}
.txt-gradient { width: fit-content; margin:0 auto; background: linear-gradient(90.29deg, #3B02F8 0%, #00FFB3 99.23%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.tit-box h3.sub-bigtit,
.sub-bigtit {font-size:3.6rem; font-weight:700; line-height:1; letter-spacing:-0.9px;}
.sub-smtit {font-size:1.8rem; font-weight:400; line-height:29px;}
.sub-midtit {font-size:2rem; font-weight:400; line-height:32px;}
.sub-des {font-size:2.6rem; font-weight:400; line-height:36px;}

.dot-txt {position:relative; padding-left:11px;}
.dot-txt:before {position:absolute; display:block; content:''; clear:both; width:6px; height:6px; border-radius:3px; background-color:#3B02F8; top:11px; left:0;}
.sub-tit {font-size:2rem; font-weight:600; line-height:28px;}
.subtit-des {font-size:1.4rem; font-weight:400; line-height:20px;}
.dot-tit {font-size:1.8rem; font-weight:600; line-height:25px; position:relative; padding-left:11px;}
.dot-tit:before {position:absolute; display:block; content:''; clear:both; width:6px; height:6px; background-color:#3B02F8; border-radius:3px; top:9.5px; left:0;}

.padding-box { position: relative; height: 0; overflow: hidden;}
.padding-box > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.back-prime {background-color:#3B02F8;}
.back-prime2 {background-color:#17016E;}
.back-prime:hover {background-color:#fff; color:#3B02F8;}
.back-black {background-color:#1D1E1F;}
.back-black:hover {background-color:#fff; color:#1D1E1F;}
.back-gradient {background: linear-gradient(135.14deg, #4802F8 5.37%, #00FFB2 88.04%);}
.prime-btn {width:300px; height:80px; border-radius:50px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}
.prime-btn,
.prime-btn p {font-size:1.8rem; font-weight:700; color:#fff;}
.arrow-btn {position:relative;}
.arrow-btn p {transition:all 0.5s ease;}
.arrow-btn:hover p {transform:translateX(-7px);}
.arrow-btn img {opacity:0; transition: 0.5s ease; position:absolute; top:50%; margin-top:-8px; right:40px; transform:translateX(-3px);}
.arrow-btn:hover img {opacity:1; transform:translateX(0);}
.arrow-btn.wide { display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}
.arrow-btn.wide img {position:static; margin-top:0;}
.arrow-btn.wide:hover p {transform:translateX(-20px);}
.arrow-btn.wide img {transform:translateX(-5px);}
.arrow-btn.wide:hover img {transform:translateX(5px);}
.prime-btn.wid100 {width:100% ; border-radius:12px; height:70px;;}
.back-prime.wid100:hover {background-color:#3B02F8; color:#fff;}
.sm-btn {width:100px; height:44px; box-sizing:border-box; border-radius:10px; font-size:1.4rem; font-weight:700; color:#fff !important; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; transition:.3s ease-out; border:1px solid #1D1E1F;}
.sm-btn:hover {color:#1D1E1F !important;}
.prime-btn.p-mid {width:200px; height:60px;}
.prime-btn.p-mid p {font-size:1.4rem;}
.prime-btn.p-mid.arrow-btn:hover img {transform:translateX(21px);}
.toggle-btnbox {cursor: pointer;}
.toggle-btnbox p {font-size:1.3rem; font-weight:600; line-height:25px; color:#aaaaaa; margin-right:5px; text-align:right; transition:.3s ease-out;}
.toggle-btnbox:hover p {color:#17016E;}
.toggle-btnbox.active p {color:#17016E;}
.toggle-btn {display:block; width:44px; height:25px; background-color:#dddddd; border-radius:50px; padding:3px; box-sizing:border-box; transition:.3s ease-out;}
.toggle-btn span {display:block; box-shadow: 1px 1px 2px 0px #0000000D; width:19px; height:19px; border-radius:50px; background-color:#fff; transition:.3s ease-out;}
.toggle-btnbox.active .toggle-btn {background-color:#17016E;}
.toggle-btnbox.active .toggle-btn span {transform:translateX(19px);}

#sub .srch-inner {padding:15px 15px 15px 30px; background-color:#fff; border-radius:15px;}
#sub .srch-inner .ipt-box {height:50px;}
.ipt-box.iptdatepicker.iptdatepicker2:after {background-image:url('/img/ico_calendar2.svg');}
#sub .calendar.small .ipt-box.iptdatepicker {width:160px;}
#sub .day-box {width:300px;}
#sub .day-box .radio-box.custom-radio input[type="radio"] ~ label {width:100%; height:50px; border-radius:10px; border:1px solid #17016e; box-sizing:border-box; font-size:1.4rem; font-weight:500; padding:0; color:#17016E; line-height:48px; text-align:center;}
#sub .day-box .radio-box.custom-radio input[type="radio"] ~ label:hover {background-color:#F5F2FE;}
#sub .day-box .radio-box.custom-radio input[type="radio"]:checked ~ label {background-color:#17016e; color:#fff;}
#sub .small-btn {width:50px; height:50px; border-radius:10px; transition:.3s ease-out;}
#sub .reset-btn {background-color:#C3C9D0;}
#sub .reset-btn:hover {background-color:#a7acb1;}
#sub .small-btn.back-prime:hover {background-color:#3103ca;}

.blur-ul {margin-top:15px; gap:8px;}
.blur-ul li { font-size:1.6rem; font-weight:700; color:#fff; background: #FFFFFF33; border: 1px solid #FFFFFF99; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); border-radius:40px; padding:8px 15px; box-sizing:border-box; line-height:22px;}
.type-ul li {font-size:1.2rem; font-weight:600; line-height:17px; color:#00FFB2; padding:3px 9px; box-sizing:border-box; border-radius:50px; border:1px solid #00FFB2; white-space: nowrap;}

.pagenate {margin:40px auto 0 auto; width:fit-content;}
.pagenate .prev-btn,
.pagenate .next-btn {width:50px; height:50px; border-radius:25px; background-color:#fff; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; box-sizing:border-box; border:1px solid #fff; transition:border-color 0.3s ease;}
.pagenate .prev-btn:hover,
.pagenate .next-btn:hover {border-color:#3B02F8;}
.pagenate .next-btn img {transform:rotate(180deg);}

.swiper-button-next, .swiper-button-prev {width:50px; height:50px; border-radius:25px; background-color:#fff; border:1px solid #e8e8e8; box-sizing:border-box; background-image:url('/img/swiper_arrow.svg'); background-position:center; background-repeat:no-repeat; transition:background-image 0.3s ease;}
.swiper-button-prev {left:15px; right:unset;}
.swiper-button-next {transform:rotate(180deg); right:15px; left:unset;}
.swiper-button-next:hover, .swiper-button-prev:hover {background-image:url('/img/swiper_arrow_hover.svg');}
.swiper-button-next:after, .swiper-button-prev:after {display:none;}

/* ==================================================
    메인
================================================== */
/* ==================================================
| 메인비쥬얼 */
#mVisual {overflow:hidden;}
.mainvisual-section .visual-title { position: relative; width: 100%; height: 100%;}
.mainvisual-section .title-item { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); text-align: center;}
.mainvisual-section .title-item.black {width:100%;}
.mainvisual-section .title-item h4 { font-size: 8rem; font-weight:200; letter-spacing:-2.8px;}
.mainvisual-section .title-item h3 { display:block; margin-top:36px; font-size:12rem; font-weight: 700; letter-spacing:-2.8px;}
.mainvisual-section .visual-uptit { position: absolute; top: 0; left: 0; width: 100%; height: 100svh; clip-path: inset(74% 10% 0% 10% round 40px 40px 40px 40px);}
.mainvisual-section .title-item.white {width:calc(100% - 300px); top:50%; transform:translate(-50%, -50%); margin-top:-40px; position: relative; color: #ffffff; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); z-index: 2;}
.mainvisual-section .title-item.white h4 {font-size:6.8rem; font-weight:700; line-height:80px; max-width:1000px; margin:0 auto; letter-spacing:-2.8px; padding:0 38.5px; box-sizing:border-box;}
.mainvisual-section .visualimg-swiper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateY(400px) scale(1.2); object-fit: cover;}
.mainvisual-section .visualimg-swiper .img-box,
.mainvisual-section .visualimg-swiper img {width:100%; height:100%;}
.mainvisual-section .visualimg-swiper .rightimg-box img {max-width:100%; max-height:100%; width:auto; height:auto;}
.mainvisual-section .visualimg-swiper.swiper-horizontal > .swiper-pagination-progressbar,
.mainvisual-section .visualimg-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {width:100px; top:unset; left:50%; transform:translateX(-50%); height:1px; bottom:110px; opacity:0;}
.mainvisual-section .visualimg-swiper .swiper-pagination-progressbar {background: #FFFFFF66;}
.mainvisual-section .visualimg-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#fff;}
.mainvisual-section .visualimg-swiper .swiper-pagination-fraction {width: 160px; position: absolute; top: unset; left: 50%; transform:translateX(-50%); z-index: 1; color:#FFFFFF66; height: 20px; margin-top:0; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; font-size:1.8rem; font-weight:700; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;  bottom:100px; opacity:0;}
.mainvisual-section .visualimg-swiper .swiper-pagination-fraction span {white-space: nowrap;}
.mainvisual-section .visualimg-swiper .swiper-pagination-fraction span:first-of-type {color:#fff;}
.mainvisual-section .visualimg-swiper .swiper-button-next {right:40px;}
.mainvisual-section .visualimg-swiper .swiper-button-prev {left:40px;}
.mainvisual-section .btn { position: absolute; left: 50%; bottom: calc(42% - 70px); transform: translateX(-50%); width: 140px; height: 140px; border-radius: 75px; background: linear-gradient(158.1deg, #3B02F8 -2.03%, #00FFB2 90%);}
.mainvisual-section .btn img {animation:updown 1.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1)}
.mainvisual-section .scroll-down {position:absolute; top:unset; bottom:100px; right:40px; z-index:1; opacity:0;}
.mainvisual-section .scroll-down p {font-size:1.8rem; font-weight:600; color:#fff; letter-spacing:-0.1px; margin-bottom:8px; display:inline-block; margin-right:5px;}
@keyframes updown {
    0% {transform: translateY(0);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0);}
}
.mainvisual-section .gradient-btn .prime-btn {margin:0 auto; opacity:0;}
.mainvisual-section.show-item .visualimg-swiper.swiper-horizontal > .swiper-pagination-progressbar,
.mainvisual-section.show-item .visualimg-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {opacity:1;}
.mainvisual-section.show-item .visualimg-swiper .swiper-pagination-fraction {opacity:1;}
.mainvisual-section.show-item .scroll-down {opacity:1;}

.mainvisual-section .visualimg-swiper .swiper-slide {cursor:pointer;}
.mainvisual-section .visualimg-swiper .txt-box {width: calc(100% - 280px);max-width: 1780px; height: 660px; left:50%; top: 50%; transform: translate(-50%, -50%);}
.mainvisual-section .visualimg-swiper .jalnan,
#sub.course-idx .jalnan {line-height: 1.25; letter-spacing: 1px; font-weight: 400;}
.mainvisual-section .visualimg-swiper .slide1 .jalnan {transform: skewX(-17deg); position:relative; left:-20px;}
.mainvisual-section .visualimg-swiper .slide1 .jalnan p:not(:nth-of-type(1)) {padding-left:93px;}
.mainvisual-section .visualimg-swiper .slide1 .fs30 {color:#DACB9A;}
.mainvisual-section .visualimg-swiper .slide1 .bar-box {width:140px; height:1px; background-color:#DACB9A;}
.mainvisual-section .visualimg-swiper .txt-box .gradient-btn .prime-btn {margin:0; opacity:1;}
.mainvisual-section .visualimg-swiper .slide2 .fs30 span,
#sub.course-idx .fs30 span {position:relative;}
.mainvisual-section .visualimg-swiper .slide2 .fs30 span:after,
#sub.course-idx .fs30 span:after {position:absolute; display:block; content:''; clear:both; width:5px; height:5px; border-radius:2.5px; background-color:#3b02f8; top:-10px; left:50%; margin-left:-2.5px;}
.mainvisual-section .visualimg-swiper .txt-box .gradient-btn .arrow-btn:hover p {transform:unset;}
.mainvisual-section .visualimg-swiper .txt-box .gradient-btn .arrow-btn:hover img {opacity:0; transform:unset;}

/* ==================================================
| section1 */
#main .section1 {background: linear-gradient(180deg, #FFFFFF 20.06%, #022BF8 162.94%); }
#main .section1 .section-row {gap:120px;}
#main .section1 .section-body {max-width:1520px;}
#main .section1 .section-column1 { display:flex; justify-content: center; flex-direction:column;}
#main .section1 .tit-box h3 + h3,
#main .section3 .section-column1 .tit-box h3 + h3,
#main .section3 .section-column1 .tit-box .tit-des span + span {position:absolute; left:0; top:0; width:100%; opacity: 0;}
#main .section1 .video-box {z-index: 2; border-radius: 15px 15px 0 0;}
#main .section1 .video-box,
#main .section9 .video-box,
#sub.instructors-idx #sVisual .video-box {position:absolute; width: 80%; left:10%; top: 2%; padding-bottom: 52%;}
#main .section1 .macbook-img {opacity:0;}
#main .section1 .macbook-img,
#main .section9 .macbook-img,
#sub .macbook-img {max-width:100%; position:relative; z-index:1;}
#main .section1 .ani-box,
#main .section9 .ani-box {width:0; height:0;}
.pos-item {height:70px; border-radius:50px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}
#main .section1 .ani-item.back-prime {background-color:#3B02F8;}
#main .section1 .ani-item,
#main .section9 .ani-item {position:absolute;  width:fit-content;  padding:0 30px; background-color:#fff; z-index:1;}
#main .section1 .ani-item {opacity:0; z-index:3;}
#main .section1 .ani-item p,
#main .section9 .ani-item p {font-size:1.8rem; font-weight:700; line-height:22px; color:#C9C9C9;}
#main .section1 .ani-item img,
#main .section9 .ani-item img {position:absolute;}
#main .section1 .ani-item:first-child {left:-116px; top:13.6%;}
#main .section1 .ani-item:first-child img {left:-12px; top:-15px;}
#main .section1 .ani-item:nth-of-type(2) {right:-114px; top:41%;}
#main .section1 .ani-item:nth-of-type(2) img {right:40px; top:-33px;}
#main .section1 .ani-item:last-child {left: -56px; top: 64%;}
#main .section1 .ani-item:last-child img {left:63px; bottom:-33px;}
.charm-li li {border-radius:40px; padding:100px 40px 0; box-sizing:border-box; background-repeat:no-repeat;}
.charm-li li:first-child {background-color:#fff; background-image:url('/img/charm_bg1.png' ); background-position:center bottom;}
.charm-li li:last-child {background-color:#3B02F8; background-image:url('/img/charm_bg2.png'); background-position:10px bottom;}
.charm-li li h4 {font-size:4.2rem; font-weight:700; letter-spacing:-2.8px;}
.charm-li li h5 {margin-top:40px; font-size:1.8rem; font-weight:500; line-height:24px; }
#main .section1 .arrow-btn img {right:30px;}

/* ==================================================
| section2 */
#main .section2,
#main .section8 {min-height:100svh; }
#main .section2 .section-column {min-height:790px;}
#main .section2 .cont-area,
#main .section8 .cont-area {position:relative; z-index:1;}
#main .section2 .ico-box,
#main .section8 .ico-box {width:370px; height:100%; max-height:790px; box-sizing:border-box;}
#main .section2 .ico-box .ico-inner,
#main .section8 .ico-box .ico-inner {position:relative; width:fit-content; animation-duration: 2s; animation-direction: normal; animation-iteration-count: infinite;}
#main .section2 .ico-box .world-ico,
#main .section8 .ico-box .world-ico {width:fit-content; filter:drop-shadow(2px 4px 20px #00000026); }

@keyframes floating1 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.25,.46,.45,.94);
    }
    25% {
        transform: translate(0, -8px);
        animation-timing-function: cubic-bezier(.55,.085,.68,.53);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.25,.46,.45,.94);
    }
    75% {
        transform: translate(0, 8px);
        animation-timing-function: cubic-bezier(.55,.085,.68,.53);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating2 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.3,.45,.5,.95);
    }
    25% {
        transform: translate(0, -12px);
        animation-timing-function: cubic-bezier(.5,.1,.65,.55);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.3,.45,.5,.95);
    }
    75% {
        transform: translate(0, 12px);
        animation-timing-function: cubic-bezier(.5,.1,.65,.55);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating3 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.2,.5,.4,.9);
    }
    25% {
        transform: translate(0, -15px);
        animation-timing-function: cubic-bezier(.6,.05,.7,.5);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.2,.5,.4,.9);
    }
    75% {
        transform: translate(0, 15px);
        animation-timing-function: cubic-bezier(.6,.05,.7,.5);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating4 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.15,.55,.35,.85);
    }
    25% {
        transform: translate(0, -7px);
        animation-timing-function: cubic-bezier(.65,.02,.75,.45);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.15,.55,.35,.85);
    }
    75% {
        transform: translate(0, 7px);
        animation-timing-function: cubic-bezier(.65,.02,.75,.45);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating5 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.35,.35,.55,.95);
    }
    25% {
        transform: translate(0, -13px);
        animation-timing-function: cubic-bezier(.45,.15,.6,.5);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.35,.35,.55,.95);
    }
    75% {
        transform: translate(0, 13px);
        animation-timing-function: cubic-bezier(.45,.15,.6,.5);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating6 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.4,.3,.6,1);
    }
    25% {
        transform: translate(0, -9px);
        animation-timing-function: cubic-bezier(.5,.2,.55,.45);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.4,.3,.6,1);
    }
    75% {
        transform: translate(0, 9px);
        animation-timing-function: cubic-bezier(.5,.2,.55,.45);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating7 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.3,.4,.5,.9);
    }
    25% {
        transform: translate(0, -11px);
        animation-timing-function: cubic-bezier(.55,.1,.7,.4);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.3,.4,.5,.9);
    }
    75% {
        transform: translate(0, 11px);
        animation-timing-function: cubic-bezier(.55,.1,.7,.4);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating8 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.2,.45,.45,.95);
    }
    25% {
        transform: translate(0, -14px);
        animation-timing-function: cubic-bezier(.6,.05,.65,.5);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.2,.45,.45,.95);
    }
    75% {
        transform: translate(0, 14px);
        animation-timing-function: cubic-bezier(.6,.05,.65,.5);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating9 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.25,.5,.4,.9);
    }
    25% {
        transform: translate(0, -6px);
        animation-timing-function: cubic-bezier(.65,.1,.6,.5);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.25,.5,.4,.9);
    }
    75% {
        transform: translate(0, 6px);
        animation-timing-function: cubic-bezier(.65,.1,.6,.5);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating10 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.3,.35,.55,1);
    }
    25% {
        transform: translate(0, -10px);
        animation-timing-function: cubic-bezier(.5,.15,.65,.45);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.3,.35,.55,1);
    }
    75% {
        transform: translate(0, 10px);
        animation-timing-function: cubic-bezier(.5,.15,.65,.45);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating11 {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.35,.4,.5,.95);
    }
    25% {
        transform: translate(0, -16px);
        animation-timing-function: cubic-bezier(.45,.2,.7,.4);
    }
    50% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.35,.4,.5,.95);
    }
    75% {
        transform: translate(0, 16px);
        animation-timing-function: cubic-bezier(.45,.2,.7,.4);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating12 {
    0% {
        transform: translate(-50%, 0);
        animation-timing-function: cubic-bezier(.25,.46,.45,.94);
    }
    25% {
        transform: translate(-50%, -8px);
        animation-timing-function: cubic-bezier(.55,.085,.68,.53);
    }
    50% {
        transform: translate(-50%, 0);
        animation-timing-function: cubic-bezier(.25,.46,.45,.94);
    }
    75% {
        transform: translate(-50%, 3px);
        animation-timing-function: cubic-bezier(.55,.085,.68,.53);
    }
    100% {
        transform: translate(-50%, 0);
    }
}

#main .section2 .ico-box:first-child .ico-inner:nth-of-type(1) {left:150px; top:10px; animation-name: floating1; }
#main .section2 .ico-box:first-child .ico-inner:nth-of-type(2) {top:-3px; animation-name: floating2;}
#main .section2 .ico-box:first-child .ico-inner:nth-of-type(3) {left:80px; bottom:-130px; animation-name: floating3;}
#main .section2 .ico-box:first-child .ico-inner:nth-of-type(4) {bottom:-132px; animation-name: floating4;}
#main .section2 .ico-box:first-child .ico-inner:nth-of-type(5) {left:270px; animation-name: floating5;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(1) {left:30px; top:10px; animation-name: floating6;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(2) {left:290px; top:-110px; animation-name: floating7;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(3) {left:230px; top:-85px; animation-name: floating8;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(4) {left:210px; bottom:-74px; animation-name: floating9;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(5) {left:230px; bottom:-105px; animation-name: floating10;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(6) {animation-name: floating11;}
#main .section2 .bubble-hover {position:absolute; opacity:0; transition:0.3s ease; left:50%; bottom:calc(100% - 5px); transform:translateX(-50%); text-align:center;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(1) .bubble-hover,
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(3) .bubble-hover {left:unset; right:calc(100% - 5px); bottom:unset; top:50%; transform:translateY(-50%);}
#main .section2 .bubble-hover p { font-size:2rem; font-weight:600; color:#fff; padding:10px 15px; box-sizing:border-box; border-radius:10px; background-color:#1d1e1f; white-space: nowrap;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(1) .bubble-hover p,
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(3) .bubble-hover p {margin-right:15px;}
#main .section2 .bubble-hover img {position:relative; top:-5px;}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(1) .bubble-hover img,
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(3) .bubble-hover img {position: absolute; top: 50%; right: 0; transform: rotate(-90deg); margin-top: -8px;}
#main .section2 .ico-box .ico-inner:hover .bubble-hover {opacity:1; bottom:calc(100% + 5px);}
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(1):hover .bubble-hover,
#main .section2 .ico-box:last-child .ico-inner:nth-of-type(3):hover .bubble-hover {right:calc(100% + 5px);}

/* ==================================================
| section3 */
#main .section3 {padding:180px 0 0; box-sizing:border-box; background: url('/img/section3_bg.png') no-repeat center/cover; -webkit-mask-image: linear-gradient(180deg, #000000 65.35%, #220091 110.79%); mask-image: linear-gradient(180deg, #000000 65.35%, #220091 110.79%); background-position-y:calc(100% - 182px);}
#main .section3 .section-body {max-width:unset; padding:0;}
#main .section3 .section-column1 .cont-area {margin-top:82px;}
.instructorswiper-box {position:relative; left:-3%;}
.instructor-swiper {overflow:visible;}
.instructor-swiper .swiper-slide {transform-origin: center center; }
.instructor-swiper:after {position:absolute; display:block; content:''; clear:both; width:37.5%; height:108.058%; left:53%; top:50%; transform:translate(-50%, -50%); background-image:url('/img/ipad2.png'); background-position:center; background-repeat:no-repeat; background-size:contain; background-size:100% 100%;}
.instructor-swiper .swiper-slide.swiper-slide-active {opacity:1; box-sizing:border-box; width:35.209% !important; left:0%;}
.instructor-swiper .swiper-slide.swiper-slide-active .video-box {padding-bottom:75.297%; border-radius:10px;}
.instructor-swiper .swiper-slide.swiper-slide-prev {left:-2%;}
.instructor-swiper .swiper-slide.swiper-slide-prev,
.instructor-swiper .swiper-slide.swiper-slide-next {opacity:0.7; width:17.7% !important;}
.instructor-swiper .swiper-slide.swiper-slide-next {left:1.5%;}
.instructor-swiper .swiper-slide.swiper-slide-prev .video-box,
.instructor-swiper .swiper-slide.swiper-slide-next .video-box {padding-bottom:141%; border-radius:30px;}
.instructor-swiper .swiper-slide.swiper-slide-prev-prev {left:-2%;}
.instructor-swiper .swiper-slide.swiper-slide-prev-prev,
.instructor-swiper .swiper-slide.swiper-slide-next-next {opacity:0.5; width:14.59% !important;}
.instructor-swiper .swiper-slide.swiper-slide-next-next {left:2%;}
.instructor-swiper .swiper-slide.swiper-slide-prev-prev .video-box,
.instructor-swiper .swiper-slide.swiper-slide-next-next .video-box {padding-bottom:143%; border-radius:25px;}
.instructorswiper-box ~ .btm-box {margin-top:152px;}
.instructor-swiper .swiper-button-prev {left: calc(28.5% - 10px); right: unset; opacity:0.6;}
.instructor-swiper .swiper-button-next {right: unset; left: calc(76% - 10px); opacity:0.6;}
.quotes-box {padding:0 40px 140px;}
.quotes-box h5 {font-size:4rem; font-weight:700; line-height:56px;}
.quotes-box h5 ~ img {transform:rotate(180deg);}
.quotes-box li {border:1px solid #FFFFFF4D; padding:20px; box-sizing:border-box; font-size:2rem; font-weight:600; color:#fff; text-align:center; line-height:24px; height:80px; border-radius:10px;}
.logo-li li { width:400px; height:120px; border-radius:20px; background-color:#fff; text-align:center; line-height:120px;}
.js-marquee-wrapper {display:flex;}
#main .section3 .section-column2 {max-width:1680px; padding:0 40px; box-sizing:border-box; margin:0 auto;}
.postxt-li {width:857px; height:260px; position:relative;}
.postxt-li li {height:70px; padding:10px 40px; box-sizing:border-box; border-radius:50px; box-shadow: 0px 0px 30px 0px #0000001A; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center;  align-items: center; position:absolute;}
.postxt-li li img {position:absolute;}
.postxt-li li p {font-size:1.6rem; font-weight:600; line-height:20px; white-space: nowrap;}
.postxt-li li:nth-of-type(1) {background-color:#00FFB2; top:30px; right:115px;}
.postxt-li li:nth-of-type(1) img {left:20px; top:-30px;}
.postxt-li li:nth-of-type(2) {background-color:#fff; top:60px; right:519px;}
.postxt-li li:nth-of-type(3) {background-color:#3B02F8; top:85px; right:0;}
.postxt-li li:nth-of-type(4) {background-color:#6748FF; top:115px; right:280px;}
.postxt-li li:nth-of-type(5) {background-color:#3B02F8; top:170px; right:575px;}
.postxt-li li:nth-of-type(5) img {left:20px; top:-30px;}
.postxt-li li:nth-of-type(6) {background-color:#fff; top:170px; right:124px;}
.postxt-li li:nth-of-type(6) img {right:-9px; bottom:-20px;}
.postxt-li li:nth-of-type(1) span,
.postxt-li li:nth-of-type(2) span,
.postxt-li li:nth-of-type(6) span {color:#1D1E1F80;}
.postxt-li li:nth-of-type(3) span,
.postxt-li li:nth-of-type(4) span,
.postxt-li li:nth-of-type(5) span {color:#FFFFFFB2;}
.instructor-box .instructor-tab:not(.instructor-tab1),
.instructor-box .specialswiper-box:not(.specialswiper-box1) {display:none;}
.instructor-box ul {padding-top:60px;}
#main .section3 .instructor-box ul {padding: 60px 20px 20px 20px; width: calc(100% + 40px); margin-left: -20px;}
.instructor-box .instructordes-box {border-radius:25px; background-color:#fff; padding:20px 20px 30px; box-sizing:border-box; position:relative; box-shadow: 0px 4px 20px 0px #0000000D;}
.instructor-box .instructordes-box .img-box {border-radius:20px 100px 20px 20px; background-color:#e8e8e8; position:relative;}
.instructor-box .instructordes-box .img-box img {position:relative; z-index:1; margin-top:-80px; max-width:100%;}
.instructor-box .instructordes-box .img-box:after {position:absolute; display:block; content:''; clear:both; width: 100%; height:100%; left:0; top:0; border-radius:20px 100px 20px 20px; background: linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%); opacity:0; transition:.3s ease-out;}
.instructor-box .instructordes-box:hover .img-box:after {opacity:1;}
.instructor-box .txt-box {margin-top:28px;}
.instructor-box .txt-box p {font-size:2.8rem; font-weight:700; margin-bottom:10px;}
.instructor-box .txt-box span {font-size:1.6rem; font-weight:600; color:#3B02F8;}
.instructor-box .hover-box {width:100%; background: #000000CC;  backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); border-radius:25px; padding:40px 30px; box-sizing:border-box; position:absolute; left:0; bottom:0; z-index:1; opacity:0; transform:translateY(10px); transition:.3s ease-out;}
.instructor-box .instructordes-box:hover .hover-box {opacity:1; transform:translateY(0);}
.instructor-box .top-box {padding-bottom:24.5px; border-bottom: 1px solid #FFFFFF1A;}
.instructor-box .top-box p {font-size:2.8rem; font-weight:800; color:#fff; margin-bottom:9px;}
.instructor-box .top-box span {font-size:1.4rem; font-weight:700; color:#00FFB2; line-height:18px;}
.instructor-box .btm-box {margin-top:23.5px;}
.instructor-box .btm-box p {font-size:1.8rem; font-weight:400; line-height:22px; color:#FFFFFFCC; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; display:-webkit-box;  -webkit-box-orient:vertical; -moz-box-orient:vertical; word-wrap:break-word; -webkit-line-clamp:2;}
.instructor-box .detail-box {width:fit-content; margin:25px auto 0; gap:8px;}
.instructor-box .detail-box p {font-size:1.4rem; font-weight:700; color:#fff; line-height:24px;}
.instructor-box .detail-box .ico-box {width:24px; height:24px; border-radius:12px; background: #FFFFFF33; position:relative;}
.instructor-box .detail-box .ico-box:after {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; border-radius:12px; background: linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%); opacity:0; transition:.3s ease-out;}
.instructor-box .detail-box .ico-box img { position:relative; z-index:1;}
.instructor-box .detail-box:hover .ico-box:after {opacity:1;}
.instructor-mobox,
.instructor-mobox .mo-closebox {display:none;}

/* ==================================================
| section4 */
#main .section4 {padding-bottom:19px !important;}
.reason-ul {gap:27px 31px; max-width:919px; margin-left:auto;}
.reason-ul > li {background-color:#f8f8f8; border-radius:20px; padding:40px; box-sizing:border-box; transition:.3s ease-out;}
.reason-ul span {font-size:1.6rem; font-weight:600; line-height:22px; color:#3B02F8; transition:.3s ease-out;}
.reason-ul p {margin-top:6px; font-size:3rem; font-weight:700; line-height:42px; transition:.3s ease-out; letter-spacing:-1px;}
.reason-ul > li:hover {background-color:#3B02F8; transform:rotate(-5deg);}
.reason-ul > li:hover span {color:#00FFB2;}
.reason-ul > li:hover p {color:#fff;}
.reason-ul > li:hover .dot-ul li {color:#fff;}
.reason-ul > li:hover .dot-ul li:before {background-color:#00FFB2;}

/* ==================================================
| section5 */
#main .section5 {background-image:url('/img/section5_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;}
.rotate-arrow {position:relative; top:76px; left:50%; transform:translateX(-50%); /*height:0;  opacity: 0;  transition: height 0.3s ease-out, opacity 0.3s ease-out;*/}
.card-container .card-list { height:460px; position: relative; width:21.3%;}
.card-container .card-list li { width: 100%; -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transition: -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),   -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform;}
.card-container .card-list li { position: absolute; top: 0;}
.card-container .card-list li:nth-child(1) { z-index:5; -webkit-transform: rotate(-2deg); transform: rotate(-2deg);}
.card-container .card-list li:nth-child(2) { z-index:3; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
.card-container .card-list li:nth-child(3) { z-index:4; -webkit-transform: rotate(10deg); transform: rotate(10deg);}
.card-container .card-list li:nth-child(4) { z-index:2; -webkit-transform: rotate(25deg); transform: rotate(25deg);}
.card-container .card-list li:nth-child(5) { z-index:1; -webkit-transform: rotate(-25deg); transform: rotate(-25deg);}
.card-container .card-list li .cardlist-box { height:406px; border-radius: 25px; position: relative; top: 0; left: 0; padding:50px 20px; box-sizing:border-box;}
.card-container .card-list li:nth-child(1) .cardlist-box {background-color:#FFFFFF;}
.card-container .card-list li:nth-child(2) .cardlist-box {background-color:#3B02F8;}
.card-container .card-list li:nth-child(3) .cardlist-box {background-color:#7D63FF;}
.card-container .card-list li:nth-child(4) .cardlist-box {background-color:#17016E;}
.card-container .card-list li:nth-child(5) .cardlist-box {background-color:#00FFB2;}
.card-container .card-list li .cardlist-box .txt-box p { text-align:center; font-size: 2.8rem; font-weight: 700; letter-spacing:-2.8px;}
.card-container .card-list li .cardlist-box .txt-box span { text-align:center; display: block; font-size: 1.8rem; font-weight: 400; line-height: 24px; margin-top: 30px;}
.card-container .card-list.spread li:nth-child(1) {  z-index:1;  -webkit-transform: rotate(-10deg) translate(-175%, -80px);  transform: rotate(-10deg) translate(-175%, -80px);}
.card-container .card-list.spread li:nth-child(2) { z-index:2; -webkit-transform: rotate(10deg) translate(-92%, 120px); transform: rotate(10deg) translate(-92%, 120px);}
.card-container .card-list.spread li:nth-child(3) { z-index:3; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
.card-container .card-list.spread li:nth-child(4) { z-index:4; -webkit-transform: rotate(-10deg) translate(83%, 121px); transform: rotate(-10deg) translate(83%, 121px);}
.card-container .card-list.spread li:nth-child(5) { z-index:5; -webkit-transform: rotate(10deg) translate(173%, -70px); transform: rotate(10deg) translate(173%, -70px);}
.card-container .card-list.spread li:nth-child(1) img,
.card-container .card-list.spread li:nth-child(4) img {transform:rotate(10deg);}
.card-container .card-list.spread li:nth-child(2) img,
.card-container .card-list.spread li:nth-child(5) img {transform:rotate(-8deg);}

/* ==================================================
| section6 */
.zigzag-ul > li {position:relative; border-radius:30px;}
.zigzag-ul .padding-box {padding-bottom:115%; border-radius:30px;}
.zigzag-ul .pos-box,
.updown-ul .pos-box,
.review-ul .pos-box {position:absolute; left:30px; bottom:30px; width:calc(100% - 60px); z-index:1;}
.zigzag-ul .pos-box p {font-size:2.4rem; font-weight:700; line-height:34px; color:#fff;}
.zigzag-ul { padding-top:100px; box-sizing:border-box;}
.zigzag-ul > li:nth-of-type(1) {grid-row:1/3;}
.zigzag-ul > li:nth-of-type(2) {grid-row:1/2; position: relative;}
.zigzag-ul > li:nth-of-type(1) .padding-box:after,
.zigzag-ul > li:nth-of-type(5) .padding-box:after,
.zigzag-ul > li:nth-of-type(6) .padding-box:after,
.zigzag-ul > li:nth-of-type(8) .padding-box:after {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; border-radius:30px; background: linear-gradient(214.84deg, rgba(0, 0, 0, 0) 52.95%, #000000 116.06%);}
.zigzag-ul > li:nth-of-type(3) {grid-row:2/3; background-color:#AC82F0; align-self:stretch;}
.zigzag-ul > li:nth-of-type(4) {grid-row:1/2; position:relative; top:-100px; background-color:#5CC3EC; align-self:stretch; overflow:hidden;}
.zigzag-ul > li:nth-of-type(4) a {display:block; width:100%; height:100%;}
.zigzag-ul > li:nth-of-type(4) a:after {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; border-radius:30px; background: linear-gradient(180deg, rgba(92, 195, 236, 0) 47.21%, #5CC3EC 69.56%);}
.zigzag-ul > li:nth-of-type(4) .img-box {position:absolute; right:-5px; top:30px;}
.zigzag-ul > li:nth-of-type(5) {grid-row:2/3; position:relative; top:-100px;}
.zigzag-ul > li:nth-of-type(6) {grid-row:1/2;}
.zigzag-ul > li:nth-of-type(7) {grid-row:2/3; background-color:#17016E; align-self:stretch; overflow:hidden;}
.zigzag-ul > li:nth-of-type(8) {grid-row:1/3;}
.mo1024 {display:none;}

/* ==================================================
| section7 */
#main .section7 {min-height:100dvh;}
#main .section7 .section-body {max-width:unset; margin:0; padding:0;}
#main .section7 .tit-box .txt-gradient,
#main .section8 .tit-box .txt-gradient,
#main .section9 .tit-box .txt-gradient,
#main .section11 .tit-box .txt-gradient {margin:unset;}
#main .section7 .tit-des {line-height:36.5px;}
.bg-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
.bg-video__content {  height: 100%;  width: 100%;  object-fit: cover; touch-action: none!; user-select: none !important;}
.bg-video__content::-webkit-media-controls-fullscreen-button {display: none !important;}
.bg-video__content::-webkit-media-controls-play-button {display: none !important;}
.bg-video__content::-webkit-media-controls-timeline {display: none !important;}
.bg-video__content::-webkit-media-controls-current-time-display{display: none !important;}
.bg-video__content::-webkit-media-controls-time-remaining-display {display: none !important;}
.bg-video__content::-webkit-media-controls-mute-button {display: none !important;}
.bg-video__content::-webkit-media-controls-volume-slider {display: none !important;}
.bg-video__content::-webkit-media-controls-fullscreen-button {display: none !important;}
.updown-ul {will-change: transform; transition: transform 0.8s cubic-bezier(0.075, 0.820, 0.165, 1.000);}
.updown-ul > li {width:400px; height:300px; border-radius:30px; transition: transform 0.8s cubic-bezier(0.075, 0.820, 0.165, 1.000); will-change: transform; flex-shrink:0; overflow:hidden; position:relative; box-sizing:border-box;}
.updown-ul > li:nth-of-type(1) .img-box img,
.updown-ul > li:nth-of-type(2) .img-box img,
.updown-ul > li:nth-of-type(4) .img-box img,
.updown-ul > li:nth-of-type(6) .img-box img,
.updown-ul > li:nth-of-type(8) .img-box img {width:100%;}
.updown-ul > li:nth-of-type(3) {background-color: #3B02F8; padding:30px;}
.updown-ul > li:nth-of-type(5) {background-color: #7D63FF; padding:30px;}
.updown-ul > li:nth-of-type(7) {background-color: #17016E; padding:30px;}
.updown-ul > li:nth-of-type(3) .img-box,
.updown-ul > li:nth-of-type(5) .img-box,
.updown-ul > li:nth-of-type(7) .img-box {text-align:right;}
.updown-ul .pos-box p {font-size:3.2rem; font-weight:700; line-height:45px; color:#fff;}
.updown-ul .pos-box span {display:block; margin-top:5px; font-size:1.8rem; font-weight:500; line-height:25px; color:#fff;}
.updown-ul .blur-ul {margin-top:20px;}

/* ==================================================
| section8 */
#main .section8 .section-row {padding:0 40px; box-sizing:border-box;}
#main .section8 .section-body {max-width:unset; margin:0; padding:0;}
#main .section8 .section-column {min-height:740px; max-width:1740px; margin:0 auto;}
#main .section8 .cont-area {max-width:1600px; margin:0 auto;}
#main .section8 .ico-box {width:500px;}
#main .section8 .ico-box .world-ico {filter:drop-shadow(4px 4px 30px #00000040); border-radius:12px;}
#main .section8 .ico-box:first-child .ico-inner:nth-of-type(1) {left:230px; animation-name:floating1;}
#main .section8 .ico-box:first-child .ico-inner:nth-of-type(2) {left:0; top:32px; animation-name:floating2;}
#main .section8 .ico-box:first-child .ico-inner:nth-of-type(3) {left:186px; top:26px; animation-name:floating3;}
#main .section8 .ico-box:first-child .ico-inner:nth-of-type(4) {left:0; top:25px; animation-name:floating4;}
#main .section8 .ico-box:first-child .ico-inner:nth-of-type(5) {left:380px; animation-name:floating5;}
#main .section8 .ico-box:last-child .ico-inner:nth-of-type(1) {left:160px;  animation-name:floating6;}
#main .section8 .ico-box:last-child .ico-inner:nth-of-type(2) {left:380px; top:32px; animation-name:floating7;}
#main .section8 .ico-box:last-child .ico-inner:nth-of-type(3) {left:200px; top:87px; animation-name:floating8;}
#main .section8 .ico-box:last-child .ico-inner:nth-of-type(4) {left:380px; top:52px; animation-name:floating9;}
#main .section8 .ico-box:last-child .ico-inner:nth-of-type(5) { animation-name:floating10;}

/* ==================================================
| section9 */
#main .section9 {min-height:100svh; padding:0; position:relative; overflow:hidden; background-image:url('/img/section9_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;}
#main .section9 .section-body {max-width:1710px; position:static;}
#main .section9 .video-box {z-index:1; border-radius:15px 15px 0 0;}
#main .section9 .ani-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main .section9 .ani-item {box-shadow: 0px 0px 30px 0px #0000001A;}
#main .section9 .ani-item:nth-of-type(1) {top:9%; left:57px; z-index:2;}
#main .section9 .ani-item:nth-of-type(1) img {top: -31px; left: -15px;}
#main .section9 .ani-item:nth-of-type(2) {background-color:#3B02F8; top:19%; left:-0px;}
#main .section9 .ani-item:nth-of-type(2) img {right:-20px; bottom:-15px;}
#main .section9 .ani-item:nth-of-type(3) {top:69%; right:-32px;}
#main .section9 .ani-item:nth-of-type(3) img {left:-20px; top:-24px;}
#main .section9 .tit-area {max-width:450px; margin-left:auto; min-width:340px;}
.subtxt-box {border-left:1px solid #1D1E1F; padding-left:40px; box-sizing:border-box;}
.subtxt-box p {font-size:2.8rem; font-weight:700; line-height:39px;}
.subtxt-box span {display:block; margin-top:15px; font-size:1.8rem; font-weight:400; line-height:27.5px;}
.mo900 {display:none;}

/* ==================================================
| section10 */
#main .section10 .tit-box h3 span {color:#e8e8e8;}
#main .section10 .tit-box h3 span { position: relative; width: max-content; color: #e8e8e8; background: linear-gradient(to right, #1D1E1F 0%, #1D1E1F 50%, #e8e8e8 50%, #e8e8e8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100% 0; transition: background-position cubic-bezier(.1,.5,.5,1) 0.5s;}
#main .section10 .cont-wrap {max-width:780px; margin-left:auto;}
#main .section10 .tit-des {letter-spacing:-1.1px; line-height:43px;}
.txt-dash { display: inline; background: linear-gradient(to right, #3b02f840 0%, #3b02f840 100%); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 12px; transition: background-size 0.3s ease-out; font-weight:700;}

/* ==================================================
| section11 */
#main .section11 {min-height:100svh; background-color:#000; background-image:url('/img/section11_bg.svg'); background-position:center bottom; background-repeat:no-repeat; background-size:contain;}
#main .section11 .bg-img {position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:86%; max-width:2000px; padding:0 40px; box-sizing:border-box;}
#main .section11 .bg-img .img-box { width:100%; display: flex; align-items: flex-end;}
#main .section11 .bg-img svg { stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 1.5s ease-in-out;  width:100%; height: auto; display: block; aspect-ratio: 1947/1025;}
#main .section11 .bg-img.active svg { stroke-dashoffset: 0;}
#main .section11 .tit-area {margin-top:-50px;}
.anidot-ul, .postxt-ul {width:86%; max-width:2000px; position:absolute; left:50%; transform:translateX(-50%);  bottom:0; padding:0 40px; box-sizing:border-box;}
.anidot-ul li {font-size:0; text-indent:-9999px; background-color:#00FFB2; margin-left:auto; position:relative; opacity: 0; transition: all 0.2s ease-out;}
.anidot-ul li.show {opacity:1; }
.anidot-ul li:nth-of-type(1) {width:30px; height:30px; border-radius:15px; top:-137%;}
.anidot-ul li:nth-of-type(2) {width:50px; height:50px; border-radius:25px; top:-536%;}
.anidot-ul li:nth-of-type(3) {width:80px; height:80px; border-radius:40px; top:-1194%; left:20px;}
.anidot-ul li:nth-of-type(3).light {box-shadow: 0px 0px 250px 120px #00FFB280;}
.postxt-ul {grid-template-columns: repeat(9, 1fr); text-align:right; bottom:30px;}
.postxt-ul li {font-size:1.8rem; font-weight:600; color:#FFFFFF80;}
.postxt-ul li.big-txt {font-size:2.8rem; color:#00FFB2;}
.graph-ul li {border-left:1px solid #fff; padding-left:39px; box-sizing:border-box;}
.graph-ul li span {font-size:1.8rem; font-weight:500; color: #FFFFFF99; line-height:25px;}
.graph-ul li div p {font-size:4rem; font-weight:700; line-height:56px;}
.graph-ul li > p {font-size:2rem; font-weight:500; line-height:28px; }

/* ==================================================
| section12 */
.lefttab-ul {width:462px; flex-shrink:0;}
.lefttab-ul li {height:90px; padding:0 30px; box-sizing:border-box; border: 1px solid #f8f8f8; border-radius:12px; background-color:#F8F8F8; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center; align-items: center; position:relative; transition:.3s ease-out;}
.lefttab-ul li + li {margin-top:15px;}
.lefttab-ul li:after {position:absolute; display:block; content:''; clear:both; width:13px; height:20px; background-image:url('/img/trianglepurple.png'); background-position:center; background-repeat:no-repeat; right:-12px; top:50%; margin-top:-10px; transition:.3s ease-out; opacity:0;}
.lefttab-ul li p {font-size:2.4rem; font-weight:600; line-height:34px;}
.lefttab-ul li:hover {background-color:#F5F2FE; border-color:#F5F2FE; }
.lefttab-ul li.active {background-color:#F5F2FE; border-color:#3B02F866; box-shadow: 2px 2px 15px 0px #0000001A;}
.lefttab-ul li.active:after {opacity:1;}
.lefttab-ul li.active p {color:#3B02F8;}
.right-box {flex-grow:1;}
.rightbox-ul {height:100%;}
.rightbox-ul > li {background-color:#3B02F8; border-radius:25px; padding:80px; box-sizing:border-box; height:100%;}
.rightbox-ul > li:not(:first-of-type) {display:none;}
.rightbox-top p {font-size:4rem; font-weight:700; color:#fff; line-height:56px; letter-spacing:-2.8px;}
.rightbox-top li {border-radius:40px; height:40px; padding:0 15px; box-sizing:border-box; background-color:#00FFB2; font-size:1.6rem; font-weight:700; line-height:40px; color:#3B02F8;}
.rightbox-ul .dot-ul li {color:#fff; font-size:2rem; line-height:28px;}
.rightbox-ul .dot-ul > li:before {background-color:#00FFB2;}
.rightbox-ul .rightbox-ulwrap {height:100%; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column;}
.rightbox-bottom {margin-top:55px; flex-grow:1;}
.rightbox-bottom ul {height:100%;}
.rightbox-bottom .li { background-color:#fff; border-radius:20px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; -webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column; padding:20px; box-sizing:border-box;}
.rightbox-bottom .li p {font-size:1.8rem; font-weight:600; line-height:18px;}
.rightbox-bottom .li strong {display:block; margin-top:20px; font-size:4rem; font-weight:800; color:#3B02F8;}
.rightbox-bottom .li strong em {font-weight:800 !important;}
.rightbox-bottom .li span {display:block; margin-top:10px; font-size:2rem; font-weight:600; color:#9AA0C0; text-decoration:line-through;}
.rightbox-ul > .li3 .rightbox-bottom .li:last-of-type strong {font-size:2.6rem; line-height:32px; text-align:center;}
.rightbox-ul > .li3 .rightbox-bottom span,
.rightbox-ul > .li6 .rightbox-bottom span {text-decoration:none;}
.rightbox-ul > .li4 .rightbox-bottom .li:first-of-type strong {display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; gap:8px; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center;  align-items: center; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify; -moz-justify-content: center;  -ms-flex-pack: justify; justify-content: center;}
.rightbox-ul > .li4 .rightbox-bottom .li:first-of-type i {display:block; box-sizing:border-box; border-radius:50px; font-size:1.2rem; font-style:normal; font-weight:600; }
.rightbox-ul > .li4 .rightbox-bottom .li:first-of-type strong i {padding:7px 12px; background-color:#1D1E1F; color:#fff;}
.rightbox-ul > .li4 .rightbox-bottom .li:first-of-type span {margin-top:0;}
.rightbox-ul > .li4 .rightbox-bottom .li:first-of-type span ~ i {padding:7px 11.5px; background-color:#ECECEC; color:#999999;}
.mo870 {display:none;}

/* ==================================================
| section13 */
#main .section13 {position:relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 21.67%, rgba(59, 2, 248, 0.2) 100%); padding-top:0;}
#main .section13 .section-body {max-width:unset; padding:0; margin:0;}
.review-ul li,
.section13-swiper .swiper-slide {position:relative;}
.review-ul li:after,
.section13-swiper .swiper-slide:after {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; border-radius:20px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35.94%, #000000 142.81%); cursor:pointer;}
.review-ul .padding-box,
.section13-swiper .padding-box {padding-bottom:70%; border-radius:20px;}
.review-ul .padding-box img,
.section13-swiper .padding-box img {transition:transform 0.3s ease-out;}
.review-ul li:hover .padding-box img,
.section13-swiper .swiper-slide:hover .padding-box img {transform: scale(1.1);}
.review-ul .pos-box p,
.section13-swiper .pos-box p {font-size:2.8rem; font-weight:700; color:#fff; line-height:39px;}
.review-ul .pos-box span,
.section13-swiper .pos-box span {display:block; width:fit-content; margin-top:10px; background-color:#3B02F8; border-radius:50px; padding:7.5px 16px; box-sizing:border-box; font-size:1.8rem; font-weight:700; color:#fff; line-height:25px;}
.review-marquee {margin-top:36px;}
.review-marquee:after {position:absolute; display:block; content:''; clear:both; width:100%; height:calc(100% + 180px); left:0; top:0; background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0.51%, rgba(59, 2, 248, 0.6) 100%);}
.review-marquee .review-li li {width:400px; border-radius:20px; background-color:#fff; padding:30px; box-sizing:border-box; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column;}
.review-marquee .review-li li > div:first-of-type {flex-grow:1;}
.review-marquee .review-li li .review-tit {font-size:2rem; font-weight:700; line-height:28px;}
.review-marquee .review-li li .review-des {font-size:1.6rem; font-weight:400; margin-top:15px; line-height:26px;}
.review-marquee .review-li li span {font-size:1.6rem; font-weight:600; color:#999999;}
.review-marquee .gradient-btn {z-index:1;}

/* ==================================================
| section14 */
#main .section14 {background-image:url('/img/section14_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;}
.comparison-ul {padding:10px 0; box-sizing:border-box;}
.comparison-ul ul {padding-bottom:90px;}
.comparison-ul ul > li {height:100px; box-sizing:border-box; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; border-bottom:1px solid #e8e8e8;}
.comparison-ul ul > li:first-of-type {border-color:#1D1E1F; height:120px;}
.comparison-ul ul > li:last-of-type {border-color:#1D1E1F;}
.comparison-ul > li:nth-of-type(2) {position:relative;}
.comparison-ul > li:nth-of-type(2) .pos-box {position:absolute; left:50%; transform:translateX(-50%); top:-25px; background-color:#1d1e1f; border-radius:10px; padding:9px 20px; box-sizing:border-box; animation-duration: 1.2s; animation-direction: normal; animation-iteration-count: infinite; animation-name: floating12; }
.comparison-ul > li:nth-of-type(2) .pos-box:before {position:absolute; display:block; content:''; clear:both; width:24px;  height:16.58px; background-image:url('/img/ico_triangle.png'); background-position:center; background-repeat:no-repeat; left:50%; transform:translateX(-50%); bottom:-11px;}
.comparison-ul > li:nth-of-type(2) .pos-box p {font-size:2rem; font-weight:700; color:#fff; line-height:28px; white-space: nowrap;}
.comparison-ul > li:nth-of-type(2) ul {background-color:#3B02F8; box-shadow: 0px 0px 40px 0px #1F008533; border-radius:30px; padding:0 40px 90px; box-sizing:border-box;}
.comparison-ul > li:nth-of-type(2) ul > li {border-color:rgba(255, 255, 255, 0.4);}
.comparison-ul > li:nth-of-type(2) ul > li:first-of-type {border-color: #fff;}
.comparison-ul > li:nth-of-type(2) ul > li:last-of-type {border-color: #fff;}
.comparison-ul p {font-size:2.4rem; font-weight:700; line-height:34px;}
.comparison-ul span {display:block; margin-top:2px; font-size:1.6rem; font-weight:500; color:#999999; line-height:22px;}
.comparison-ul .ico-box {width:40px; height:40px; border-radius:20px; background-color:#fff; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}
.comparison-ul .big-txt {font-size:3.2rem; font-weight:700; line-height:45px; letter-spacing:-2.8px;}

/* ==================================================
| section15 */
#main .section15 {background-color:#000; overflow: hidden; min-height:100dvh; overflow-y:hidden; padding-bottom:0;}
#main .section15 .section-inner {position:relative; top:-50px;}
#main .section15 .tit-box span {margin:0;}
#main .section15 .cont-wrap {height:530px;}
.card_wrapper {height:320px; border-radius:30px; background-color:#171717; padding:0 100px; box-sizing:border-box; transition:background-color 0.3s ease-out;}
.card_wrapper .card_inner {height:100%; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center; align-items: center;}
.card_wrapper + .card_wrapper {margin-top:40px;}
.card_wrapper span {font-size:1.8rem; font-weight:600; color:#00FFB2; line-height:25px;}
.card_wrapper p {margin-top:10px; font-size:4rem; font-weight:700; line-height:56px; color:#fff;}
.card_wrapper .ico-box {width:200px; height:200px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}

/* ==================================================
| section16 */
#main .section16 {padding-bottom:0; padding-top:140px; /*margin-top:-180px;*/ margin-top:-1px; background-image:url('/img/section16_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; position:relative;}
#main .section16:after {position:absolute; display:block; content:''; clear:both; width:53.74%; max-width:876px; height:100%; right:40px; bottom:0; background-image:url('/img/section16_bg_obj.png'); background-position: center bottom; background-repeat:no-repeat; background-size:contain;}
#main .section16 .section-body {max-width:unset; padding:0; margin:0;}
#main .section16 .section-row {min-height:calc(100svh - 180px); }
#main .section16 .tit-area .tit-des {font-size:3.4rem; font-weight:300; line-height:48px;}
.knowhow-ul {max-width:600px;}
.knowhow-ul li {font-size:2rem; font-weight:600; color:#fff; line-height:28px; padding:20px 30px; box-sizing: border-box; border: 1px solid #FFFFFF4D; background: #FFFFFF0D; border-radius:10px; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);}
.knowhow-ul li + li {margin-top:10px;}
#main .section16 .section-column:first-of-type {flex-grow:1;}
#main .section16 .section-column:last-of-type { margin-top:80px; flex-shrink:0; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); background: #66666699; position:relative; z-index:1;}
.award-box {height:100px;}
.award-box .txt-box p {font-size:2.4rem; font-weight:700; color:#fff; line-height:34px;}
.award-box .txt-box span {display:block; margin-top:5px; font-size:1.4rem; font-weight:400; color:#fff; line-height:20px;}
.award-box > p {font-size:2.4rem; font-weight:700; color: #FFFFFFCC; line-height:34px;}
.mo430 {display:none;}

/* ==================================================
    수강권 index
================================================== */
/* ==================================================
| section1 */
#sub.course-idx .sub-wrap {padding-top:0;}
#sub.course-idx .rightimg-box img {width:100%; max-width:570px;}
#sub.course-idx .section1,
#sub.instructors-idx .section1 {padding:60px 0 97px; background-color:#F8F8F8;}
.event-swiper {position:inherit;}
.event-swiper .swiper-slide {border-radius:20px; height:140px; padding:20px 40px; box-sizing:border-box; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center; align-items: center; gap:10px;}
.event-swiper .swiper-slide:nth-of-type(1) {background-color:#3B02F8;}
.event-swiper .swiper-slide:nth-of-type(2) {background-color:#7D63FF;}
.event-swiper .swiper-slide:nth-of-type(3) {background-color:#17016E;}
.event-swiper .swiper-slide:nth-of-type(4) {background-color:#00E893;}
.event-swiper .swiper-slide:nth-of-type(5) {background-color:#00BEFD;}
.event-swiper .swiper-slide:nth-of-type(6) {background-color:#8C41E2;}
.event-swiper .swiper-slide p {font-size:2.4rem; font-weight:700; color:#fff; line-height:34px;}
.event-swiper .swiper-slide span {display:block; margin-top:8px; font-size:1.8rem; font-weight:500; color:#fff; line-height:25px;}
.event-swiper .swiper-pagination {bottom:-40px; top:unset;}
.freetrial-swiper .swiper-pagination {bottom:-30px; top:unset;}
.event-swiper .swiper-pagination-bullet,
.freetrial-swiper .swiper-pagination-bullet {width:10px; height:10px; border-radius: 50px; background-color:#e4e7f4; margin:0 7.5px !important; opacity:1 !important; transition:.2s ease-out;}
.event-swiper .swiper-pagination-bullet-active,
.freetrial-swiper .swiper-pagination-bullet-active {background-color:#3B02F8; width:20px; }

/* ==================================================
| section2 */
#sVisual.big .visual-txt .txt-wrap > * {text-align:left;}
#sVisual.big.position-visual .visual-inner.position-rel {height:640px;}
#sVisual.big .visual-txt .txt-wrap .txt-box h3 {font-size: 6rem; letter-spacing: -1.6px;}
#sub.course-idx #sVisual .visual-txt .txt-wrap .txt-box h2 {font-size: 8rem; margin: 20px 0 0 0; font-weight: 700; background: linear-gradient(90.29deg, #3B02F8 0%, #00FFB3 99.23%); background-clip: text; -webkit-background-clip: text; color: transparent; width: fit-content;}
#sVisual.big .visual-txt .txt-wrap .txt-box p {font-size: 2.4rem; margin-top: 58px; font-weight: 400; line-height: 28px;}
#sub.course-idx .section2,
#sub.course-payment .section1,
#sub.course-freetrial .section1 {overflow:unset;}
#sub.course-idx .section2 .section-row1 .section-column2,
#sub.course-idx .section2 .section-row1 .section-column3,
#sub.course-idx .section2 .section-row1 .section-column3-1 {padding-bottom:59px; border-bottom:1px solid #e8e8e8;}
.course-tab .radio-box > input[type="radio"] ~ label {font-size:1.6rem; font-weight:600; color:#6B7072; line-height:22px; padding:18px 20px; border:1px solid #e8e8e8; background-color:#f8f8f8; text-align:center; border-radius:12px;}
.course-tab .radio-box:hover > input[type="radio"] ~ label,
.course-tab .radio-box > input[type="radio"]:checked ~ label {border-color:#3B02F8; color:#3B02F8;}
.courselist-box {border:1px solid #e8e8e8; border-radius:12px; box-sizing:border-box; padding:19px;}
.courselist-adult {display:none;}
.radio-box.custom-radio.prime > input[type="radio"] ~ label {font-size: 1.4rem; font-weight:600; color:#17016E; line-height:20px; padding:10px 20px; border:1px solid transparent;}
.radio-box.custom-radio.prime:hover > input[type="radio"] ~ label {border-color: #17016E; background-color:#fff; color:#17016E;}
.radio-box.custom-radio.prime > input[type="radio"]:checked ~ label {border-color: #17016E; background-color: #17016E; color:#fff;}
.course-tab .radio-box:hover > input[type="radio"]:disabled ~ label { border-color: #e8e8e8; color: #6B7072; background-color:#f8f8f8;}
.radio-box.custom-radio.prime.gradient > input[type="radio"] ~ label:after,
.radio-box.custom-radio.prime.gradient > input[type="radio"] ~ label:before {position:absolute; display:block; content:''; clear:both; opacity:0; }
.radio-box.custom-radio.prime.gradient > input[type="radio"] ~ label:before {width:100%; height:100%; background:linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%); left:0; top:0; border-radius:50px; border:unset; padding:0; margin-top:0; z-index:unset;}
.radio-box.custom-radio.prime.gradient > input[type="radio"] ~ label:after {width:calc(100% - 2px); height:calc(100% - 2px); background-color:#fff; left:1px; top:1px; border-radius:50px; margin-top:0;}
.radio-box.custom-radio.prime.gradient > input[type="radio"]:checked ~ label {transition:unset; background-color:transparent; border-color:unset;}
.radio-box.custom-radio.prime.gradient > input[type="radio"]:checked ~ label span {background:unset; color:#fff; position:relative; z-index:1;}
.radio-box.custom-radio.prime.gradient > input[type="radio"]:checked ~ label:before {opacity:1;}
.radio-box.custom-radio.prime.gradient > input[type="radio"]:checked ~ label:after {margin-top:0; z-index:unset; background:#fff; opacity:0;}
.course-tab .radio-box > input[type="radio"][name="minute_type"] ~ label {background-color:#fff;}
.course-tab .day3, .course-tab .day5 {display:none;}
#sub.fullcalendar-page .courselist-des,
#sub.course-idx .info-box,
#sub.course-payment .info-box {background-color:#F5F2FE; border-radius:12px; box-sizing:border-box;}
#sub.fullcalendar-page .courselist-des { padding:30px; }
#sub.fullcalendar-page .courselist-des p {font-size:1.8rem; font-weight:400; line-height:25px;}
#sub.fullcalendar-page .courselist-des strong {font-weight:700;}
#sub.fullcalendar-page .courselist-des span {font-size:1.4rem; font-weight:400; line-height:20px; color:#6B7072; text-align:center;}
#sub.fullcalendar-page .courselist-des .des-box > .flex-box {white-space: nowrap;}
#sub .gradient-tag {position:absolute; background: linear-gradient(133.65deg, #3B02F8 15%, #00FFB2 85.87%); border-radius:50px 50px 0 50px; width:88px; height:40px; font-size:1.4rem; font-weight:700; color:#fff; line-height:40px; text-align: center; top:-20px; right:0;}
#sub.course-idx .section-column3-1 {display:none;}
.radio-box.custom-radio.flex > input[type="radio"] ~ label {display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex;}
#sub.course-idx .section-column4 .radio-box.custom-radio.flex > input[type="radio"] ~ label {height:160px; -webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.radio-box.custom-radio.period-radio > input[type="radio"] ~ label {padding:29px;}
.radio-box.custom-radio.period-radio:hover > input[type="radio"] ~ label .period-price,
.radio-box.custom-radio.period-radio > input[type="radio"]:checked ~ label .period-price {color:#3B02F8;}
#sub .radio-box.custom-radio.period-radio .gradient-tag {right:-1px;}
#sub.course-idx .info-box {padding:18px 30px;}
.time-box { box-sizing:border-box; border:1px solid #e8e8e8; border-radius:12px;}
.time-box > .inner {padding:19px;}
.time-box .inner-box {max-height:340px; padding-right:10px;}
.time-box .inner-box .course-tab + .course-tab {margin-top:10px;}
#sub .sticky-row {width:28.75%; min-width:360px; flex-shrink:0; position:sticky; top:130px;}
#sub .sticky-column {box-shadow: 0px 0px 15px 0px #0000001F; border-radius:20px; box-sizing:border-box; padding:30px;}
#sub .sticky-column .tit-box {padding-bottom:25px; box-sizing:border-box;}
.apply-details { border-top:1px solid #1d1e1f;}
.apply-details li {font-size:1.4rem; font-weight:600; line-height:20px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center; align-items: center; height:60px; box-sizing:border-box;}
.apply-details:first-of-type li + li {border-top:1px solid #f1f1f1;}
.apply-details:last-of-type li {border-bottom:1px solid #f1f1f1;}
.apply-details .apply-name {color:#6b7072;}
#sub .gradient-tag.round-tag {font-size:1.2rem; width:fit-content; height:22px; border-radius:50px; background: linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%); position:static; line-height:22px; padding:0 7.8px; box-sizing:border-box;}
.month-price {height:90px; box-sizing:border-box;}
#sub.course-idx .section2 .section-row2 .arrow-btn img {right:110px;}
.choice-box {padding:20px; box-shadow: 0px -4px 10px 0px #0000000D;}
.choice-box > .inner {height:80px; border-radius:12px; padding:20px; box-sizing:border-box; background-color:#B6BAC3; transition:background-color .3s ease-out;}
.choice-box.active > .inner {background-color:#17016E;}
.choice-box > .inner ul li {display:none;}
.choice-box .course_time1 span {color:#fff;}
.apply-details .course_time1 span {color:#1d1e1f;}
#sub.course-idx .arrow-btn:hover p {transform:translateX(0);}
.mo1500 {display:none;}
.courselist-inner .scroll-btn {width: 60px; height: 50px; background-color:#fff; position:absolute; z-index:5; top:50%; margin-top:-25px;}
.courselist-inner .scroll-btn div {border-radius: 25px; width:50px; height:100%; border: 1px solid #e8e8e8; box-sizing: border-box; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}
.courselist-inner .scroll-btn:first-child {left:-1px;}
.courselist-inner .scroll-btn:last-child {transform: rotate(180deg); right:-1px;}
.courselist-inner .scroll-btn:last-child div {right:0px;}
.group-li:not(.time-li) {display:none;}

#sub.fullcalendar-page #calendar {border-radius:16px; box-sizing:border-box; border:1px solid #e8e8e8; padding:30px 48px 10px; width:528px; max-height:500px;}
#sub.fullcalendar-page .ui-datepicker-calendar {border-collapse: separate; border-spacing:10px;}
#sub.fullcalendar-page .ui-datepicker-header {position:relative;  display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; gap:20px;}
#sub.fullcalendar-page .ui-datepicker-header a.ui-datepicker-prev.ui-state-disabled {opacity:0.5;}
#sub.fullcalendar-page .ui-datepicker-header a.ui-datepicker-prev {background:url('/img/swiper_arrow.svg'); background-size:8px 9px; width:40px;  height:40px; border-radius:20px; border: 0.8px solid #E8E8E8; background-color:#fff; background-position:center; background-repeat:no-repeat; padding:0; margin:0; box-sizing:border-box; transform: rotate(0deg); transition:.3s ease-out; order:1; position:static;}
#sub.fullcalendar-page .ui-datepicker-header a.ui-datepicker-next {background:url('/img/swiper_arrow.svg'); background-size:8px 9px; width:40px;  height:40px; border-radius:20px; border: 0.8px solid #E8E8E8; background-color:#fff; background-position:center; background-repeat:no-repeat; padding:0; margin:0; box-sizing:border-box; transform: rotate(180deg);transition:.3s ease-out; order:3; position:static;}
#sub.fullcalendar-page .ui-datepicker-header a.ui-datepicker-prev:hover,
#sub.fullcalendar-page .ui-datepicker-header a.ui-datepicker-next:hover {background:url('/img/swiper_arrow_hover.svg'); background-size:8px 9px; width:40px;  height:40px; border-radius:20px; border: 0.8px solid #E8E8E8; background-color:#fff; background-position:center; background-repeat:no-repeat; padding:0; margin:0; box-sizing:border-box;}
#sub.fullcalendar-page .ui-datepicker-title {font-size:2.8rem; font-weight:700; line-height:40px; padding:0; margin:0; order:2;}
#sub.fullcalendar-page .ui-datepicker-calendar thead th {padding:0; font-size:1.8rem; font-weight:500; color:#1d1e1f; font-family:'Pretendard', sans-serif;}
#sub.fullcalendar-page .ui-datepicker-calendar tbody td,
#sub.fullcalendar-page .ui-datepicker-calendar tbody td a {font-size:1.6rem; font-weight:600; color:#1d1e1f; font-family:'Pretendard', sans-serif; aspect-ratio:1/1; height:auto;}
#sub.fullcalendar-page .ui-datepicker-calendar tbody td a.ui-state-active {color:#fff;}
#sub.fullcalendar-page .ui-datepicker-calendar tbody td a,
#sub.fullcalendar-page .ui-datepicker-calendar thead th span,
#sub.fullcalendar-page .ui-datepicker-calendar tbody td span {line-height:1; width:100%; height:100%; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; border-radius:12px; aspect-ratio:1/1; height:auto;}
#sub.fullcalendar-page .ui-datepicker-calendar tbody td a {transition:none;}
#sub.fullcalendar-page .ui-datepicker-calendar tbody td:hover a {transition:.3s ease-out;}
#sub.fullcalendar-page .ui-datepicker-calendar thead th,
#sub.fullcalendar-page .ui-datepicker-calendar tbody td {aspect-ratio:1/1; height:auto;}
#sub.fullcalendar-page .ui-datepicker-calendar th:first-child {color:#FF0000;}
#sub.fullcalendar-page .ui-datepicker-calendar td:first-child a,
#sub.fullcalendar-page .ui-datepicker-calendar td:first-child span {color:#1D1E1F; opacity:0.3; cursor: not-allowed; pointer-events: none;}
#sub.fullcalendar-page .ui-datepicker-calendar th:last-child {color:#0044FF}
#sub.fullcalendar-page .ui-datepicker-calendar td:last-child a,
#sub.fullcalendar-page .ui-datepicker-calendar td:last-child span {color:#1D1E1F; opacity:0.3; cursor: not-allowed; pointer-events: none;}
#sub.fullcalendar-page .ui-datepicker-calendar td:first-child.ui-state-disabled,
#sub.fullcalendar-page .ui-datepicker-calendar td:last-child.ui-state-disabled {opacity:1;}
#sub.fullcalendar-page .ui-state-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none;}
#sub.course-idx .instructor-box .instructordes-box {height:100%; box-shadow:unset; padding:0; background-color:unset; border-radius: unset; }
#sub.course-idx .instructor-box .instructordes-box .img-box {padding:0 30px; box-sizing:border-box; border-radius:20px 80px 20px 20px;}
#sub.course-idx .instructor-box .txt-box p:not(.des-txt) {font-size:2.4rem; margin-bottom:4px; line-height:34px;}
#sub.course-idx .instructor-box .txt-box span {font-size:1.4rem; line-height:17px;}
#sub.course-idx .instructor-box .txt-box p.des-txt {margin-top:15px; font-size:1.6rem; font-weight:400; color:#6B7072; line-height:22px; margin-bottom:0; word-break:keep-all;}
#sub.course-idx .instructor-box .instructordes-box .img-box:after { border-radius:20px 80px 20px 20px; background: linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%);}
#sub.course-idx .instructor-box .instructordes-box .img-box:before {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; opacity:0; transition:.3s ease-out; background:linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%); border-radius:20px 80px 20px 20px; }
#sub.course-idx .instructor-box .instructordes-box .img-box img {margin-top:-41px;}
#sub.course-idx .instructor-box .radio-box.custom-radio > input[type="radio"] ~ label {font-size:unset; font-weight:unset; color:unset; padding:20px 20px 30px; border-radius: 20px; line-height:unset; height:100%; border:1px solid #e8e8e8; background-color:#fff; transition:border 0s;}
#sub.course-idx .instructor-box .instructordes-box:hover .radio-box.custom-radio > input[type="radio"] ~ label {border-color:#3B02F8;}
#sub.course-idx .instructor-box .instructordes-box:hover .radio-box.custom-radio > input[type="radio"]:checked ~ label {border-color:transparent ;}
#sub.course-idx .instructor-box .radio-box.custom-radio {height:100%;}
#sub.course-idx .instructor-box .radio-box.custom-radio > input[type="radio"]:checked ~ label,
#sub.course-idx .instructor-box .radio-box.custom-radio > input[type="radio"]:checked:hover ~ label {border-color:transparent;}
#sub.course-idx .instructor-box .radio-box.custom-radio > input[type="radio"]:checked ~ label:before { display:block; content: ''; position: absolute; clear:both; width:calc(100% + 2px); height:calc(100% + 2px); top: 9px; left: -1px; border-radius: 20px; border: 1px solid transparent; background: linear-gradient(149.16deg, #4802F8 -7.96%, #00FFB2 81.31%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; opacity:0; }
#sub.course-idx .instructor-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .img-box:after { opacity:1;}
#sub.course-idx .instructor-box .radio-box.custom-radio > input[type="radio"]:checked ~ label:before {opacity:1;}
#sub.course-idx .instructor-box .instructordes-box:hover .img-box:after {opacity:0;}
#sub.course-idx .instructor-box .instructordes-box:hover .img-box:before {opacity:1;}
#sub.course-idx .instructor-box .instructordes-box:hover .radio-box.custom-radio > input[type="radio"]:checked ~ label .img-box:before {opacity:0;}
#sub.course-idx .instructor-box .nope-li .radio-box.custom-radio > input[type="radio"] ~ label {background-color:#f8f8f8; transition:.3s ease-out;}
#sub.course-idx .instructor-box .nope-li .radio-box.custom-radio > input[type="radio"] ~ label:before,
#sub.course-idx .instructor-box .nope-li .radio-box.custom-radio > input[type="radio"] ~ label:after {display:none;}
#sub.course-idx .instructor-box .nope-li .txt-box p span {display:block; font-size:2.4rem; font-weight:300; line-height:34px; color:#1D1E1F; transition:.3s ease-out;}
#sub.course-idx .instructor-box .nope-li .txt-box p b {display:block; font-size:2.4rem; font-weight:700; line-height:34px; color:#1D1E1F; transition:.3s ease-out;}
#sub.course-idx .instructor-box .nope-li .txt-box > span {display:block; margin-top:10px; font-size:1.4rem; font-weight:400; line-height:22px; color:#1D1E1F; transition:.3s ease-out;}
#sub.course-idx .instructor-box .nope-li .arrow-btn {background-color:#b6b6b6; width:180px; height:60px; transition: .3s ease-out;}
#sub.course-idx .instructor-box .nope-li .arrow-btn p {font-size:1.6rem; }
#sub.course-idx .instructor-box .nope-li .arrow-btn img {right:30px;}
#sub.course-idx .instructor-box .nope-li .ico-box {width:62.15px; height:62.4px;}
#sub.course-idx .instructor-box .nope-li .hover-img {opacity:0;}
#sub.course-idx .instructor-box .nope-li .default-img,
#sub.course-idx .instructor-box .nope-li .hover-img {position:absolute; left:0; top:0; transition:.3s ease-out;}
#sub.course-idx .instructor-box .nope-li .arrow-btn .default-img,
#sub.course-idx .instructor-box .nope-li .arrow-btn .hover-img {left:unset; top:unset; margin-top:unset;}
#sub.course-idx .instructor-box .nope-li .instructordes-box:hover .radio-box.custom-radio > input[type="radio"] ~ label {background-color:#fff;}
#sub.course-idx .instructor-box .nope-li .instructordes-box:hover .arrow-btn {background-color:#3B02F8;}
#sub.course-idx .instructor-box .nope-li .instructordes-box:hover .arrow-btn img {transform:translateX(0);}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label {background-color:#3B02F8; border:1px solid #3B02F8;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .arrow-btn {background-color:#00FFB2;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .arrow-btn p {color:#3B02F8;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .txt-box p span {color:#fff;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .txt-box p b {color:#00FFB2;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .txt-box > span {color:#fff;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .ico-box .default-img {opacity:0;}
#sub.course-idx .instructor-box .nope-li .instructordes-box .radio-box.custom-radio > input[type="radio"]:checked ~ label .ico-box .hover-img {opacity:1;}
#sub.course-idx .block.ml-3 {display:block; margin-left:3px;}
.mo960 {display:none;}
#sub.course-payment .question-btn {display:none;}

/* ==================================================
    수강권 결제하기
================================================== */
.saved-box .flex-center-between {height:44px; background-color:#F5F2FE; border-radius:10px; padding:10px 20px; box-sizing:border-box;}
#sub.course-payment .course-tab {overflow-x:auto;}
#sub.course-payment .course-tab .radio-box > input[type="radio"] ~ label {font-size:1.4rem; height:60px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; }
#sub.course-payment .section-column3 .tbl-area,
#sub.course-payment .section-column4,
#sub.course-payment .tax-tr {display:none;}
.payment-box {border: 1px solid #E8E8E8; border-radius:12px; padding:29px 29px 24px; box-sizing:border-box;}
#sub.course-payment .apply-details {border-top:none;}
#sub.course-payment .apply-details li {height:auto;}
#sub.course-payment .apply-details li + li {margin-top:10px;}
#sub.course-payment .apply-details:first-of-type li + li {border-top:none;}
#sub.course-payment .apply-details:last-of-type li {border-bottom:none;}
#sub.course-payment .final-li {line-height:unset; padding-top:24px; border-top:1px solid #e8e8e8 !important; margin-top:25px !important;}
#sub.course-payment .final-li p:first-child {line-height:42px;}
#sub.course-payment .final-li p:last-child {line-height:42px;}
.agree-ul li + li {margin-top:10px;}
.agree-ul .border-li {border:1px solid transparent; box-sizing:border-box; transition:border-color 0.3s ease-out; border-radius:12px; overflow:hidden;}
.agree-ul .slide-btn {width:12px; height:20px; margin-left:20px; flex-shrink:0;}
.agree-ul .top-box .check-box span {width:fit-content; height:fit-content; display:block; font-size:1rem; font-weight:700; color:#fff; padding:3.5px 6.75px; box-sizing:border-box; background-color:#999; border-radius:3px; line-height:1; margin-top:1.5px;}
.agree-ul .top-box .check-box > input[type="checkbox"] ~ label {background-color:#F8F8F8; border-radius:12px; padding:20px 20px 20px 45px;}
.agree-ul .top-box .check-box > input[type="checkbox"] ~ label:before {left:20px;}
.agree-ul .top-box .check-box > input[type="checkbox"]:checked ~ label {background-color:#F5F2FE;}
.agree-ul li.border-li.checked {border-color:#3B02F8;}
.agree-ul li.border-li.checked .check-box > input[type="checkbox"] ~ label {background-color:#F5F2FE; border-radius:12px 12px 0 0;}
.agree-ul .toggle-box {display:none; background-color:#fff; padding:20px; box-sizing:border-box; border-radius:0 0 12px 12px;}
.agree-ul .toggle-inner {max-height:200px; padding-right:20px;}
#sub.course-payment .sticky-column {padding-top:26px;}
.faq-ul li {border-radius:10px; overflow:hidden;  border:1px solid transparent; transition:border-color 0.3s ease-out; box-sizing:border-box;}
.faq-ul li .top-box {background-color:#f8f8f8; border-radius: 10px; padding:17px 20px; box-sizing:border-box; transition:background-color .3s ease-out;}
.faq-ul li .top-box p {font-size:1.4rem; font-weight:600; transition:.3s ease-out; line-height:1.4;}
.agree-ul.faq-ul .toggle-box {border-radius:0 0 10px 10px;}
.faq-ul li.checked {border-color:#6748FF;}
.faq-ul li.checked .top-box {border-radius:unset; background-color:#F5F2FE;}
.faq-ul li.checked .top-box p {color:#3B02F8;}
.agree-ul.faq-ul .toggle-inner {max-height:unset; padding-right:0;}
.faq-ul .toggle-inner b {line-height:20px; font-size:1.4rem;}
.faq-ul .toggle-inner p {font-size:1.4rem; font-weight:400; line-height:20px;}
.faq-ul .toggle-inner ul {border:1px solid #E8E8E8; border-radius:12px;}
.faq-ul .toggle-inner ul li {padding:15px; border-radius:unset; margin-top:0;}
.faq-ul .toggle-inner ul li + li {border-top:1px solid #E8E8E8;}

.knowhow-ul {max-width:600px;}
.knowhow-ul li {font-size:2rem; font-weight:600; color:#fff; line-height:28px; padding:20px 30px; box-sizing: border-box; border: 1px solid #FFFFFF4D; background: #FFFFFF0D; border-radius:10px; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);}
.knowhow-ul li + li {margin-top:10px;}
#main .section16 .section-column:first-of-type {flex-grow:1;}
#main .section16 .section-column:last-of-type { margin-top:80px; flex-shrink:0; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); background: #66666699; position:relative; z-index:1;}
.award-box {height:100px;}
.award-box .txt-box p {font-size:2.4rem; font-weight:700; color:#fff; line-height:34px;}
.award-box .txt-box span {display:block; margin-top:5px; font-size:1.4rem; font-weight:400; color:#fff; line-height:20px;}
.award-box > p {font-size:2.4rem; font-weight:700; color: #FFFFFFCC; line-height:34px;}

/* ==================================================
    무료수업신청
================================================== */
#sVisual .txt-list li,
#sVisual .freetrial-swiper .swiper-slide {background: #FFFFFF66; border: 1px solid #FFFFFF; border-radius:20px; padding:30px 20px; box-sizing:border-box; text-align:center; position:relative;}
#sVisual .txt-list li .tit {font-size:2.4rem; font-weight:700; line-height:34px;}
#sVisual .txt-list li .des {font-size:1.6rem; font-weight:400; line-height:22px; color:#6B7072;}
#sVisual .txt-list li img,
#sVisual .txt-list .freetrial-swiper img {position:absolute;}
#sVisual .txt-list li:first-of-type img {top:-41px; right:5px;}
#sVisual .txt-list li:nth-of-type(2) img {right:-25px; bottom:44px;}
#sVisual .txt-list li:nth-of-type(3) img {left:-30px; top:43px;}
#sVisual .txt-list li:last-of-type img {left:32px; bottom:-23px;}
#sub .back-gradient.arrow-btn.mid {margin:40px auto 0; width:260px; height:70px;}
#sub.course-freetrial .sticky-column .fs14 {font-weight:400; line-height:20px; text-align:center;}
#sub.course-freetrial .free-step li {border: 1px solid #E8E8E8; border-radius:12px;}
#sub.course-freetrial .free-step li + li {margin-top:44px; position: relative;}
#sub.course-freetrial .free-step li + li:after {position:absolute; display:block; content:''; clear:both; width:100%; height:14px; background-image:url('/img/ico_down_arrow.png'); background-position:center; background-repeat:no-repeat; left:0; top:-30px;}
#sub.course-freetrial .free-step li .top {background-color:#3B02F8; padding:11.5px 20px; box-sizing:border-box; border-radius:12px 12px 0 0;}
#sub.course-freetrial .free-step li .bottom {padding:19px; box-sizing:border-box; border-radius:0 0 12px 12px;}
#sub.course-freetrial .free-step .fs12 {font-weight:700; color:#00FFB2; text-align:center; line-height:17px; display:block;}
#sub.course-freetrial .free-step .fs16 {font-weight:700; color:#fff; line-height:22px; margin-top:2px; text-align:center;}
#sub a.zoom {width:fit-content; display:block; text-align:center; font-size:1.4rem; font-weight:700; line-height:20px; border-bottom:1px solid #1d1e1f; margin:10px auto 0;}
#sub.course-freetrial .section-column2 .course-tab .radio-box > input[type="radio"] ~ label {white-space:nowrap; min-width:125px;}
#sub.course-freetrial .sticky-column .tit-box {padding-bottom:0;}
#sub.course-freetrial .sticky-column .cont-wrap {margin-top:25px;}
.mo-980 {display:none;}

/* ==================================================
    무료수업신청 완료
================================================== */
#sub.course-payment .sub-wrap {min-height: calc(100vh - 413px); box-sizing: border-box;}
#sub.course-payment .info-box {padding:20px;}
#sub.course-payment .info-box p.txt-prime {font-size:1.4rem; font-weight:700; line-height:24px;}
#sub.course-payment .info-box > p {font-size:1.2rem; font-weight:400;}
#sub.course-payment a.zoom {margin:10px 0 0 0;}

/* ==================================================
    BT 강사진
================================================== */
#sub.instructors-idx .sub-wrap {padding:0;}
#sub.instructors-idx #sVisual .video-box { width: 94.1%; left: 3%; top: 3.7%; padding-bottom: 71%; z-index: 2; border-radius: 5px;}
#sub.instructors-idx .graident-box {background-color:transparent;}
#sub.instructors-idx .graident-box div {position:relative; z-index:1;}
#sub.instructors-idx .graident-box .txt-gradient {color:transparent; }
#sub .graident-box:before,
#sub .graident-box:after {position:absolute; display:block; content:''; clear:both;}
#sub .graident-box:before { background: linear-gradient(95.32deg, #3B02F8 -0.06%, #00FFB2 100.5%); left:0; top:0; width:100%; height:100%;  border-radius:20px;}
#sub .graident-box:after {background-color:#fff; left:5px; top:5px; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:15px;}
#sub.instructors-idx .section2 .section-body {max-width:unset; margin:0; padding:0;}
#sub.instructors-idx .section2 .tit-area {position:absolute; width:100%; max-width:1680px; padding:0 40px; left:50%; top:50%; transform:translate(-50%, -50%); box-sizing:border-box;}
#sub.instructors-idx .section2 .instructor-box > ul {overflow-x:auto; margin-left:33.9%; overflow-y:hidden;}
#sub.instructors-idx .instructor-box > ul {padding-top:0; }
#sub.instructors-idx .instructor-box > ul > li {padding-top:20px; }
#sub.instructors-idx .section2 .instructor-box > ul > li {flex-shrink:0;}
#sub.instructors-idx .section2 .instructor-box .instructordes-box {width:382px; height:447px; }
#sub.instructors-idx .back-gradient.arrow-btn.mid {margin:80px 0 0 0;}
#sub.instructors-idx .instructor-box .img-box img {height:360px; margin-top:-44px;}
#sub.instructors-idx .instructor-box .txt-box p,
#sub.instructors-idx .instructor-box .top-box p,
.instructor-name p {font-size:2.4rem; line-height:34px; margin-bottom:0;}
.instructor-name {margin-bottom:4px;}
#sub.instructors-idx .instructor-box .txt-box p.fw400,
#sub.instructors-idx .instructor-box .top-box p.fw400,
.instructor-name p.fw400 {position:relative;}
#sub.instructors-idx .instructor-box .txt-box p.fw400:before,
#sub.instructors-idx .instructor-box .top-box p.fw400:before,
.instructor-name p.fw400:before {position:absolute; display:block; content:''; clear:both; width:1px; height:18px; background-color:#e8e8e8; top:8px; left:-9.5px;}
#sub.instructors-idx .instructor-box .top-box p.fw400:before {background-color: #E8E8E84D;}
#sub.instructors-idx .instructor-box .txt-box span {font-size:1.4rem; line-height:17px; display:block; margin-top:4px; font-weight:600;}
#sub.instructors-idx .instructor-box .hover-box {border-radius:20px; padding:30px 20px;}
#sub.instructors-idx .instructor-box .top-box {padding-bottom:0; border-bottom:none;}
.instructor-box .btm-inner {background: #FFFFFF1A; border-radius:15px; padding:19px; box-sizing:border-box;}
.instructor-box .info-ul, .instructor-box .type-ul {padding-top:0; }
.instructor-box .type-ul {row-gap:5px;}
.instructor-box .info-ul li {-webkit-box-align: start;  -moz-align-items: flex-start;  -ms-flex-align: start;  align-items: flex-start; }
.instructor-box .info-ul li img {margin-top:2px;}
.instructor-box .info-ul li + li,
#instructorPopup .info-ul li + li {margin-top:10px;}
.instructor-box .info-ul p,
#instructorPopup .info-ul p {font-size:1.6rem; font-weight:400; line-height:22px;}
#sub.instructors-idx .instructor-box .detail-box {margin:20px auto 0;}
#sub.instructors-idx .dot-ul > li {padding-left:10px;}
#sub.instructors-idx .dot-ul > li + li {margin-top:5px;}
#sub.instructors-idx .dot-ul > li:before {width:3px; height:3px; border-radius:1.5px; background-color:#1D1E1F; top:11px;}
#sub.instructors-idx .arrow-btn:hover p {transform:translateX(-13px);}
#sub.instructors-idx .arrow-btn:hover img {transform:translateX(13px);}
#instructorPopup .padding-box {padding-bottom:64.14%; border-radius: 20px;}
#instructorPopup .type-ul li {color:#3B02F8; border-color:#3B02F8; font-weight:700;}
#instructorPopup .popup-cont {max-height:668px; overflow-y:auto;}
#instructorPopup .prize-box p {font-size:1.4rem; line-height:20px; letter-spacing:-0.4px;}
#instructorPopup .arrow-btn img {width:14px; margin-top:-6px;}
#instructorPopup .instructor-name {margin-bottom:0;}
#sub.instructors-idx .instructor-box .scroll-out,
#sub.process .scroll-out { cursor: grab; -webkit-user-drag: none;  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;}
#sub.instructors-idx .instructor-box .scroll-out img,
#sub.instructors-idx .instructor-box .scroll-out p,
#sub.process .scroll-out img,
#sub.process .scroll-out p,
#sub.process .scroll-out span,
#sub.process .scroll-out ul {-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;}
#sub.instructors-idx .instructor-box .scroll-out:active,
#sub.process .scroll-out:active {cursor: grabbing;}
#sub.instructors-idx .section2,
#sub.instructors-idx .section3 {padding-bottom:100px;}
#sub.instructors-idx .section3 {background: linear-gradient(180deg, #FFFFFF -10.14%, #ABD4FF 141.17%);}
#sub.instructors-idx .instructor-box .instructordes-box {width:100%; box-shadow:unset; border:1px solid #e8e8e8; border-radius:20px;}
#sub.instructors-idx .section3 .instructor-box > ul {row-gap:40px;}
#sub.instructors-idx .section3 .instructor-box > ul > li {flex:1; min-width:382px;}
#sub.instructors-idx .section3 .instructor-box .img-box img {height:356px;}
#sub.instructors-idx .section4 {padding:60px 0; background-image:url('/img/instructor_section4bg.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;}
#sub.instructors-idx .section4 .tit-box h3 span:first-child {font-size:4.6rem; line-height:64px;}

/* ==================================================
    주니어과정, 성인과정
================================================== */
#sub.process .sub-wrap {padding-bottom:0;}
#sub.process .section .section-body {max-width:1160px;}
#sub.process .section4 .section-body {max-width:960px;}
#sub.process .section1 {padding-bottom:70px;}
#sub.process #sVisual .visual-txt .txt-wrap .txt-box p {color: #FFFFFF99;}
.process-swiper {padding: 30px; box-sizing: border-box; width: calc(100% + 60px); position: relative; left: -30px;}
.process-swiper .swiper-slide {width:50%;}
.process-swiper .padding-box {border-radius:20px; box-shadow: 0px 0px 30px 0px #00000026; padding-bottom:59.26%;}
.process-swiper .swiper-slide-prev .padding-box:after {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; border-radius:20px; background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8) 4.09%, rgba(0, 0, 0, 0) 100%);}
.process-swiper .swiper-slide-next .padding-box:after {position:absolute; display:block; content:''; clear:both; width:100%; height:100%; left:0; top:0; border-radius:20px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 4.09%, rgba(0, 0, 0, 0) 100%);}
.process-swiper .swiper-slide:not(.swiper-slide-active) .txt-box {opacity:0;}
.process-swiper .txt-box {text-align:center;}
.process-swiper .txt-box p {font-size:2.6rem; font-weight:700; line-height:36px;}
.process-swiper .txt-box span {display:block; margin-top:5px; font-size:1.6rem; font-weight:600; line-height:22px; color:#999999;}
.process-swiper .swiper-slide-prev,
.process-swiper .swiper-slide-next {position:relative; top:-10px;}
.process-swiper .swiper-button-prev,
.process-swiper .swiper-button-next {margin-top: -70px; top: 50%; border:unset;}
.process-swiper .swiper-button-prev {left:24.1%;}
.process-swiper .swiper-button-next {right:24.1%;}
.process-swiper .swiper-button-next:hover,
.process-swiper .swiper-button-prev:hover {background-image:unset;}
.process-swiper .swiper-button-next:after,
.process-swiper .swiper-button-prev:after {position:absolute; display:block; content:''; clear:both; width:calc(100% + 1px); height:calc(100% + 1px); border-radius:25px; background:url('/img/swiper_arrow_white.svg') center no-repeat, linear-gradient(140.24deg, #4802F8 -3.19%, #00FFB2 87.51%); transition:.3s ease-out; opacity:0; left:-0.5px; top:-0.5px;}
.process-swiper .swiper-button-prev:after {transform:rotate(-180deg);}
.process-swiper .swiper-button-next:after {transform:rotate(180deg);}
.process-swiper .swiper-button-next:hover:after,
.process-swiper .swiper-button-prev:hover:after {opacity:1;}
#sub.process .section2,
#sub.process .section4 {background-position:center; background-repeat:no-repeat; background-size:cover;}
#sub.process .section2,
#sub.process .section6 { padding-bottom:120px;}
#sub.process .section3 {padding-bottom:140px;}
#sub.process .section5 {padding-bottom:100px;}
#sub.process-junior .section2 {background-image:url('/img/process_junior_bg.jpg');}
#sub.process-adult .section2 {background-image:url('/img/process_adult_bg.jpg');}
.subject-ul {display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
.subject-ul li {border-radius:20px; box-shadow: 0px 0px 25px 0px #0000000D; background-color:#fff; padding:0 30px 40px; box-sizing:border-box;}
.subject-ul .point-txt {display:block; margin:0 auto; background-color:#3B02F8; border-radius:0 0 12px 12px; width:120px; height:35px; font-size:1.2rem; font-weight:600; color:#fff; font-family: "Outfit", serif; text-align:center; line-height:35px; letter-spacing:-0.2px;}
.subject-ul .img-box {width:80px; height:80px; text-align:center; line-height:80px; margin:5px auto 0;}
.subject-ul p {font-size:1.6rem; font-weight:600; line-height:22px; margin:10px auto 0; text-align:center;}
#sub.process .section3 .pos-img img:first-child {bottom: 0; left: 0;}
#sub.process .section3 .pos-img img:last-child {top: 0; right: 0;}
.textbook-swiper {overflow:visible;}
.textbook-swiper .swiper-slide {background: #FFFFFFD9; border: 1px solid #FAFAFA; box-shadow: 0px 0px 30px 0px #0000000D; border-radius:20px; padding:80px 80px 60px; box-sizing:border-box; align-self:center; height:100%;}
.textbook-swiper .book-img { max-width:100%; box-shadow: 0px 4px 12px 0px #00000033;}
.textbook-swiper .txt-box {text-align:center;}
.textbook-swiper .txt-box p {width:fit-content; margin:0 auto; font-size:2.4rem; font-weight:700; line-height:34px; padding:6px 23px; box-sizing:border-box; border-radius:100px; background-color:#17016E; color:#fff;}
.textbook-swiper .txt-box span {display:block; margin-top:10px; font-size:1.6rem; font-weight:400; line-height:22px;}
.textbook-swiper .swiper-slide .gradient-btn {width: 50px; height: 50px; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; opacity: 0; transition:.3s ease-out;}
.textbook-swiper .swiper-slide .gradient-btn .prime-btn {width: 50px; height: 50px; box-shadow: 0px 0px 12.5px 0px #00000033;}
.textbook-swiper .swiper-slide:hover .gradient-btn {opacity: 1;}
#sub.process .section4 {padding-top:80px; padding-bottom:100px; background-image:url('/img/process_section4bg.jpg');}
#sub.process .section4 .cont-wrap .p-relative.wid-fit.m0-auto {width:100%;}
#sub.process .section4 .macbook-img {cursor:pointer; width:100%;}
#sub.process .section4 .video-box {position:absolute; width:94.1%; left:3%; top:3.7%; padding-bottom:71.3%;z-index: 5; border-radius: 8px;}
.manager-ul li {background: #FFFFFF; border: 1px solid #FAFAFA; border-radius:20px; box-sizing:border-box; box-shadow: 0px 0px 25px 0px #0000000D; padding:32px 20px; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; gap:10px;}
.manager-ul li p {font-size:1.8rem; font-weight:700; line-height:25px;}
#sub.process .arrow-btn:hover p {transform:translateX(-15px);}
#sub.process .arrow-btn:hover img {transform:translateX(5px);}
#sub.process .section6 {background-color:#F5F2FE;}
#sub.process .section6 .section-body {max-width:unset; margin:0; padding:0;}
#sub.process .section6 .tit-area {max-width:1160px; padding:0 40px; margin:0 auto; box-sizing:border-box;}
#sub.process .updown-ul,
#sub.process .zigzag-ul {overflow-x:auto; overflow-y:hidden;}
#sub.process .updown-ul::-webkit-scrollbar { width: 3px; height: 1px;}
#sub.process .updown-ul::-webkit-scrollbar-track { background: #f8f8f8; border-radius:50px;}
#sub.process .updown-ul::-webkit-scrollbar-thumb { background: #B7B7B7; border-radius:50px;}
#sub.process .zigzag-ul > li {width:296px; height:340px; flex-shrink:1; top:unset !important; overflow:visible;}
#sub.process .zigzag-ul .img-box {width:296px; position:relative; right:unset; left:unset; top:unset; bottom:unset; border-radius:29px;}
#sub.process .updown-ul > li:nth-of-type(3),
#sub.process .updown-ul > li:nth-of-type(5),
#sub.process .updown-ul > li:nth-of-type(7) {padding:0; background-color:transparent;}
#sub.process .zigzag-ul {padding-top:0;}
#sub.process .zigzag-ul > li:nth-of-type(1) {background-color:#FFEDAD;}
#sub.process .zigzag-ul > li:nth-of-type(2) {background-color:#C8B88E;}
#sub.process .zigzag-ul > li:nth-of-type(5) {background-color:#FFBBC0;}
#sub.process .zigzag-ul > li:nth-of-type(6) {background-color:#B3FFF3;}
#sub.process .zigzag-ul > li:nth-of-type(8) {background-color:#D9D9D9;}
#sub.process .zigzag-ul > li a {position:relative;}
#sub.process .zigzag-ul > li a:after { position: absolute; display: block; content: ''; clear: both; width: 100%; height: 100%; left: 0; top: 0; border-radius: 30px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 36.03%, #000000 117.94%) !important;}
#sub.process .zigzag-ul > li:nth-of-type(4) a:after {background:linear-gradient(180deg, rgba(92, 195, 236, 0) 47.21%, #5CC3EC 69.56%) !important;}
#sub.process .zigzag-ul > li:nth-of-type(4) a:before { position: absolute; display: block; content: ''; clear: both; width: 100%; height: 100%; left: 0; top: 0; border-radius: 30px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 36.03%, #000000 117.94%) !important; z-index:1;}
#sub.process .updown-ul > li {width:296px; height:340px;}
#sub.process .updown-ul > li:nth-child(1) {background-color:#FFBBC0;}
#sub.process .updown-ul > li:nth-child(2) {background-color:#5CC3EC;}
#sub.process .updown-ul > li:nth-child(3) {background-color:#FFEDAD;}
#sub.process .updown-ul > li:nth-child(4) {background-color:#B3FFF3;}
#sub.process .updown-ul > li:nth-child(5) {background-color:#17016E;}
#sub.process .updown-ul > li:nth-child(6) {background-color:#AC82F0;}
#sub.process .updown-ul > li:nth-child(7) {background-color:#D9D9D9;}
#sub.process .updown-ul > li:nth-child(8) {background-color:#C8B88E;}
#sub.process .updown-ul .pos-box {width:calc(100% - 58px); left:29px;}
#sub.process .updown-ul .pos-box p {font-size:2.4rem; line-height:34px;}
#sub.process .updown-ul .pos-box span {font-size:1.4rem; line-height:20px;}
#sub.process .updown-ul .blur-ul {margin-top:15px;}
#sub.process .updown-ul > li,
#sub.process .zigzag-ul > li {position:relative;}
#sub.process .updown-ul > li:after,
#sub.process .zigzag-ul > li:before {position:absolute; display:none; content:''; clear:both; width:100%; height:100%; background-color:transparent; left:0; top:0; z-index:5;}
#sub.process .updown-ul > li.after:after,
#sub.process .zigzag-ul > li.after:before {display:block;}
.textbook-swiper .swiper-pagination {top:unset; bottom:-40px;}
.textbook-swiper .swiper-pagination-bullet {width:9px; height:9px; opacity:1; border-radius:0; background:#c9c9c9; transform:rotate(45deg); margin:0 5px !important; }
.textbook-swiper .swiper-pagination-bullet-active {width:12px; height:12px; background:url('/img/special_swiper.svg'); background-position:center; background-repeat:no-repeat; position:relative; top:1px; transform:rotate(0deg); background-size:cover;}
#sub.total .section3 .section-body {max-width:1630px;}
#sub.total .textbook-swiper .swiper-slide {align-self:center;}
#sub.actual .textbook-swiper .book-img {max-width:216px;}
.mo-btnbox {display:none;}
#sub.process .mo-btnbox .flex-center {width: 40px; height: 40px; border-radius: 20px; border: 1px solid #e8e8e8; position:absolute; background-color:#fff; z-index: 101; top:50%; margin-top:-20px;}
#sub.process .mo-btnbox .prev-btn {left:10px; }
#sub.process .mo-btnbox .next-btn {right:10px; transform:rotate(180deg);}

/* ==================================================
    회원 - 20250410 추가
================================================== */
#sub.member{min-height:calc(100vh - 153px);}
#sub.member .sub-wrap{padding-top:140px}
#sub.member .member-box{max-width:640px; margin-right:auto; margin-left:auto;}
#sub.member .member-box .cont-area{margin-top:40px;}
#sub.member .member-box .ipt-box{height:60px; border-radius:12px;}
#sub.member .member-box .member-label + .ipt-box{margin-top:5px;}
#sub.member .member-box .ipt-box input[type="text"],
#sub.member .member-box .ipt-box input[type="password"]{font-size:1.6rem;}
#sub.member .member-box .ipt-box input[type="text"]:readonly{background-color:#f7f7f7;}
#sub.member .member-box .ipt-box input[type="text"]::placeholder,
#sub.member .member-box .ipt-box input[type="password"]::placeholder{font-size:1.6rem;}
#sub.member .member-box .check-box > input[type="checkbox"] ~ label{color:#999; font-size:1.6rem; transition:.3s ease-out;}
#sub.member .member-box .check-box > input[type="checkbox"]:checked ~ label{color:#222;}
#sub.member .member-box .check-box > input[type="checkbox"] ~ label:before{margin-top:0;}
#sub.member .member-box .login-link{display:flex; gap:24px;}
#sub.member .member-box .login-link li{position:relative;}
#sub.member .member-box .login-link li:last-child:before{position:absolute; top:3px; left:-12px; width:1px; height:14px; background-color:#ddd; content:'';}
#sub.member .member-box .login-link li a{color:#999; font-size:1.6rem; line-height:20px;}
#sub.member .member-box .login-link li:last-child a{color:#3B02F8; font-weight:600;}
#sub.member .member-box .member-label{display:block; font-size:1.6rem; font-weight:600; line-height:1.4; cursor:pointer;}
#sub.member .member-box .member-label span{color:#FF0000;}
#sub.member .member-box .member-text-warning{margin-top:10px; margin-left:16px; color:#ff0000;}
#sub.member .member-box .nice-select{min-width:130px !important; font-size:1.6rem;}
#sub.member .member-box .member-email > span + input{margin-right:5px; margin-left:5px;}
#sub.member .member-box .member-agree-title{padding-bottom:15px; border-bottom:1px solid #222; font-size:2rem; font-weight:600;}
#sub.member .member-box .member-agree-title + .check-box{margin-left:20px;}
#sub.member .member-box .agree-ul .slide-btn img{transition:.3s ease-out;}
#sub.member .member-box .agree-ul .border-li.checked .slide-btn img{transform:rotate(180deg);}
@media (max-width:1024px){
    #sub.member{min-height:calc(100vh - 133px);}
    #sub.member .member-box{max-width:480px;}
    #sub.member .member-box .course-tab{gap:10px;}
}
@media (max-width:860px){
    #sub.member .sub-wrap{padding-top:40px}
}
@media (max-width:768px){
    #sub.member{min-height:calc(100vh - 170px);}
    #sub.member .member-box .cont-area{margin-top:20px;}
    #sub.member .member-box .ipt-box{height:50px; border-radius:10px;}
    #sub.member .member-box .ipt-box input[type="text"],
    #sub.member .member-box .ipt-box input[type="password"]{font-size:1.4rem;}
    #sub.member .member-box .ipt-box input[type="text"]::placeholder,
    #sub.member .member-box .ipt-box input[type="password"]::placeholder{font-size:1.4rem;}
    #sub.member .member-box .check-box > input[type="checkbox"] ~ label{font-size:1.4rem;}
    #sub.member .member-box .login-link li a{font-size:1.4rem;}
    #sub.member .member-box .prime-btn.wid100{height:60px; border-radius:10px;}
    #sub.member .member-box .member-text-warning{font-size:1.3rem;}
    #sub.member .member-box .member-label{font-size:1.4rem;}
    #sub.member .member-box .nice-select{font-size:1.4rem;}
}
@media (max-width:540px){
    #sub.member{min-height:calc(100vh - 206px);}
}





/* ==================================================
    고객센터
================================================== */
#sub.board .mo-btnbox .flex-center{position:absolute; top:50%; z-index:101; width:40px; height:40px; margin-top:-20px; border:1px solid #e8e8e8; border-radius:20px; background-color:#fff;}
#sub.board .mo-btnbox .prev-btn{left:10px;}
#sub.board .mo-btnbox .next-btn{right:10px; transform:rotate(180deg);}
#sub.board .board-search{overflow:visible;}
#sub.board .board-search .nice-select{height:50px !important; border-radius:10px; font-size:1.6rem; line-height:50px;}
#sub.board .board-search .ipt-box{height:50px;}
#sub.board .board-search .ipt-box input,
#sub.board .board-search .ipt-box input::placeholder{font-size:1.6rem;}
#sub.board .sm-btn{font-size:1.6rem;}
#sub.board .board-search .small-btn{width:50px !important; height:50px !important; flex-shrink:0;}
#sub.board .pagenate.add-btn{position:relative; width:100%; text-align:right;}
#sub.board .pagenate.add-btn nav{position:absolute; left:50%; transform:translateX(-50%);}
#sub.board .pagenate.add-btn .pagenate-btn{margin-left:auto;}
#sub.board .pagenate .prev-btn:not(:hover), #sub.board .pagenate .next-btn:not(:hover){border-color:#e8e8e8;}
#sub.board .pagenate .prev-btn, #sub.board .pagenate .next-btn{width:44px; height:44px;}

#sub.board .board-gallery{padding-top:40px;}
#sub.board .board-gallery .gallery_list{display:flex; flex-wrap:wrap; gap:24px;}
#sub.board .board-gallery .gallery_item{width:calc(25% - 18px);}
#sub.board .board-gallery .gallery_item a{display:block; overflow:hidden; padding:18px 20px; border:1px solid #e8e8e8; border-radius:12px; background-color:#f8f8f8; transition:.3s ease-out;}
#sub.board .board-gallery .gallery_item a:hover{border-color:#3B02F8; background-color:#fff;}
#sub.board .board-gallery .gallery_item a > span{display:block;}
#sub.board .board-gallery .gallery_item a .gallery_img{position:relative; margin:-18px -20px 18px -20px;}
#sub.board .board-gallery .gallery_item a .gallery_img img{width:100%;}
#sub.board .board-gallery .gallery_item a .gallery_img .gallery_type{position:absolute; top:12px; left:15px; padding:8px 20px; border-radius:19px; background-color:#17016E; color:#fff; font-size:1.4rem; font-weight:600; line-height:20px;}
#sub.board .board-gallery .gallery_item a .gallery_title{overflow:hidden; font-size:2rem; font-weight:600; text-overflow:ellipsis; line-height:28px; white-space:nowrap; transition:.3s ease-out;}
#sub.board .board-gallery .gallery_item a:hover .gallery_title{color:#3B02F8;}
#sub.board .board-gallery .gallery_item a .gallery_text{overflow:hidden; font-size:1.6rem; font-weight:300; text-overflow:ellipsis; line-height:24px; white-space:nowrap;}
#sub.board .board-gallery .gallery_item a .gallery_date{color:#999; font-size:1.6rem; font-weight:300; line-height:24px;}

#sub.board .board-view .board-view-table{border-top:2px solid #111; border-bottom:1px solid #111;}
#sub.board .board-view .board-view-table thead tr th{display:flex; padding:20px; background-color:#f8f8f8; align-items:center; justify-content:space-between; gap:10px;}
#sub.board .board-view .board-view-table thead tr th .board-view-title{display:flex; font-size:2rem; font-weight:600; text-align:left; line-height:36px;}
#sub.board .board-view .board-view-table thead tr th .board-view-title .board-view-type{display:inline-block; height:20px; margin-right:10px; padding:8px 20px; border-radius:19px; background-color:#17016E; color:#fff; font-size:1.4rem; font-weight:600; line-height:20px; vertical-align:top;}
#sub.board .board-view .board-view-table tbody tr td{font-size:1.6rem;}
#sub.board .board-view .board-view-table tbody tr .board-view-date{padding:20px; border-top:1px solid #eee; border-bottom:1px solid #eee; color:#999; text-align:right;}
#sub.board .board-view .board-view-table tbody tr .board-view-body{padding:30px 20px;}

#sub.board .board-faq{padding-top:40px;}
#sub.board .faq-type{display:flex; gap:6px;}
#sub.board .faq-type li a{display:block; padding:13px 20px; border:1px solid #e8e8e8; border-radius:10px; background-color:#f8f8f8; color:#6B7072; font-size:1.6rem; font-weight:600; text-align:center; line-height:22px; transition:.3s ease-out; letter-spacing:-0.9px;box-sizing:border-box;}
#sub.board .faq-type li a:hover,
#sub.board .faq-type li.on a{border-color:#3B02F8; background-color:#fff; color:#3B02F8;}

#sub.board .accordion-list{border-top:2px solid #111; border-bottom:1px solid #111;}
#sub.board .accordion-list .accordion-cell + .accordion-cell{border-top:1px solid #ddd;}
#sub.board .accordion-list .accordion-content{display:none;}
#sub.board .accordion-list .accordion-detail{padding:20px 20px 20px 75px; border-top:1px solid #ddd; background:#F9F9F9; color:#333; font-size:18px; font-weight:400; text-align:left; line-height:1.5;}
#sub.board .accordion-list .accordion-header .btn-accordion-menu{display:flex; position:relative; width:100%; min-height:80px; padding:8px 80px 8px 20px; font-size:2rem; font-weight:600; line-height:36px; align-items:center;box-sizing:border-box;}
#sub.board .accordion-list .accordion-header .btn-accordion-menu:before{display:inline-flex; width:36px; height:36px; margin-right:20px; border-radius:10px; background:#17016E; content:'Q'; color:#fff; font-size:20px; font-weight:600; text-align:center; flex:0 0 auto;align-items:center;justify-content:center;}
#sub.board .accordion-list .accordion-header .btn-accordion-menu .txt{display:block; width:100%; padding:15px 0; text-align:left;}
#sub.board .accordion-list .accordion-header .btn-accordion-menu .txt > em{display:inline-block; margin-right:8px; padding-right:10px; padding-left:10px; border:1px solid #17016E; border-radius:18px; color:#17016E; font-size:1.6rem; font-weight:500; line-height:34px;}
#sub.board .accordion-list .accordion-header .btn-accordion-menu .arrow{position:absolute; top:50%; right:20px; width:24px; height:24px; margin-top:-12px; background:url(/img/ico_slide.svg) center center no-repeat; transition:transform 0.2s ease;}
#sub.board .accordion-list .accordion-cell.on .accordion-header .btn-accordion-menu .arrow{transform:rotate(-180deg);}

#sub.board .board-list{padding-top:40px;}
#sub.board .board-list-table{border-top:2px solid #111; border-bottom:1px solid #111;}
#sub.board .board-list-table thead tr th{padding:23px 20px; background-color:#f8f8f8; font-size:2rem; font-weight:600; line-height:36px;}
#sub.board .board-list-table tbody tr td{padding:20px; border-top:1px solid #eee; font-size:1.8rem; text-align:center; line-height:24px;}
#sub.board .board-list-table tbody tr .board-list-type span{display:inline-block; padding-right:10px; padding-left:10px; border:1px solid #17016E; border-radius:18px; color:#17016E; font-size:1.6rem; font-weight:500; line-height:34px;}
#sub.board .board-list-table tbody tr .board-list-subject{font-weight:700; text-align:left;}
#sub.board .board-list-table tbody tr .board-list-stat{color:#aaa; font-weight:700;}
#sub.board .board-list-table tbody tr .board-list-stat.finish{color:#17016E;}

#sub.board .board-write-table{border-top:2px solid #111; border-bottom:1px solid #111;}
#sub.board .board-write-table tbody tr th{padding:12px 20px; border-right:1px solid #eee; border-bottom:1px solid #eee; background-color:#f8f8f8; font-size:1.6rem; font-weight:600; line-height:36px;}
#sub.board .board-write-table tbody tr td{padding:12px 20px; border-bottom:1px solid #eee;}
#sub.board .board-write-table tbody tr td .nice-select{height:44px !important; padding-left:13px; font-size:1.6rem; line-height:44px;}
#sub.board .board-write-table tbody tr td .ipt-box{padding:10px 15px;}
#sub.board .board-write-table tbody tr td .ipt-box.txtarea-box:focus-within{border-color:#3B02F8;}
#sub.board .board-write-table tbody tr td .ipt-box input,
#sub.board .board-write-table tbody tr td .ipt-box input::placeholder,
#sub.board .board-write-table tbody tr td .ipt-box textarea,
#sub.board .board-write-table tbody tr td .ipt-box textarea::placeholder{font-size:1.6rem;}
@media (max-width:1024px){
    #sub.board #sVisual .visual-nav.tab-wrap .nav-wrap .nav-menu.depth1-box > ul > li:first-child{margin-left:55px;}
    #sub.board #sVisual .visual-nav.tab-wrap .nav-wrap .nav-menu.depth1-box > ul > li:last-child{margin-right:55px;}
    #sub.board .board-search .flex-center-between{justify-content:right; flex-wrap:wrap; gap:10px;}
    #sub.board .board-gallery .gallery_list{gap:12px;}
    #sub.board .board-gallery .gallery_item{width:calc(50% - 6px);}
}
@media (max-width:768px){
    #sub.board .section:not(.section1){padding-top:25px;}
    #sub.board .board-gallery .gallery_item a .gallery_title{font-size:1.8rem;}
    #sub.board .board-search .nice-select{min-width:auto !important; padding-right:32px; font-size:1.4rem;}
    #sub.board .board-search .ipt-box input,
    #sub.board .board-search .ipt-box input::placeholder{font-size:1.4rem;}
    #sub.board .sm-btn{font-size:1.4rem;}
    #sub.board .pagenate.add-btn nav{top:6px;}
    #sub.board .pagenate .prev-btn, #sub.board .pagenate .next-btn{width:32px; height:32px;}
    #sub.board .pagenate.add-btn .pagenate-btn{}

    #sub.board .board-view .board-view-table thead tr th{padding:12px;}
    #sub.board .board-view .board-view-table thead tr th .board-view-title{font-size:1.8rem; line-height:26px;}
    #sub.board .board-view .board-view-table thead tr th .board-view-title .board-view-type{height:14px; margin-right:6px; padding:6px 12px; line-height:14px;}
    #sub.board .board-view .board-view-table tbody tr td{font-size:1.4rem;}
    #sub.board .board-view .board-view-table tbody tr .board-view-date{padding:12px;}
    #sub.board .board-view .board-view-table tbody tr .board-view-body{padding:24px 12px;}

    #sub.board .faq-type{width:100%; flex-wrap:wrap;}
    #sub.board .faq-type + .flex-box{width:100%;}
    #sub.board .faq-type + .flex-box .ipt-box{width:calc(100% - 55px);}
    #sub.board .faq-type li{width:calc(33.33% - 4px);}
    #sub.board .faq-type li a{padding-top:8px; padding-bottom:8px; font-size:1.4rem;}
    #sub.board .accordion-list .accordion-header .btn-accordion-menu{padding:4px 34px 4px 12px; font-size:1.6rem; line-height:24px;}
    #sub.board .accordion-list .accordion-header .btn-accordion-menu:before{display:none;}
    #sub.board .accordion-list .accordion-header .btn-accordion-menu .txt{padding-top:5px; padding-bottom:5px;}
    #sub.board .accordion-list .accordion-header .btn-accordion-menu .txt > em{display:block; width:63px; margin-bottom:4px; padding-right:0; padding-left:0; font-size:1.4rem; text-align:center; line-height:26px;}
    #sub.board .accordion-list .accordion-header .btn-accordion-menu .arrow{right:5px;}
    #sub.board .accordion-list .accordion-detail{padding:14px 12px; font-size:1.4rem;}

    #sub.board .board-list-table thead tr th{padding: 12px 4px;font-size:1.5rem;line-height:22px;}
    #sub.board .board-list-table tbody tr td{padding: 8px 4px;font-size:1.4rem;line-height:20px;}
    #sub.board .board-list-table tbody tr .board-list-type span{padding-right:6px; padding-left:6px; font-size:1.2rem; line-height:22px;}

    #sub.board .board-write-table col:first-child{width:100px !important;}
    #sub.board .board-write-table tbody tr th{padding-top:4px; padding-bottom:4px; font-size:1.4rem; line-height:22px;}
    #sub.board .board-write-table tbody tr td{padding:4px 12px;}
    #sub.board .board-write-table tbody tr td .nice-select{height:34px !important; font-size:1.4rem; line-height:34px;}
    #sub.board .board-write-table tbody tr td .ipt-box{height:34px; padding-top:5px; padding-bottom:5px; border-radius:5px;}
    #sub.board .board-write-table tbody tr td .ipt-box.txtarea-box{height:110px;}
    #sub.board .board-write-table tbody tr td .ipt-box input, #sub.board .board-write-table tbody tr td .ipt-box input::placeholder, #sub.board .board-write-table tbody tr td .ipt-box textarea, #sub.board .board-write-table tbody tr td .ipt-box textarea::placeholder{font-size:1.4rem;}
    #sub.board .board-write-table + .mt-30,
    #sub.board .board-write-table + .mt-30 + .mt-30{margin-top:20px !important;}
}
@media (max-width:480px){
    #sub.board .board-gallery .gallery_item{width:100%;}
}