@charset="euc-kr";

/* °øÅë */
#wrapper{overflow:hidden; min-width:1300px; width:auto; margin:0 auto; text-align:center;}
#wrapper > div > img{position:relative; left:50%; transform:translateX(-50%);}
#wrapper > div > .inner{width:1200px; margin:0 auto;}
#wrapper .mask { width:1300px; position:relative; margin:0 auto; min-height:50px; text-align:center; }
#wrapper .mask .thumb { position:relative; left:50%; transform:translateX(-50%); }


/* visual */
.visual{position:relative; background:#1B2839;}
.visual .inner{position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; padding-top:115px;}
.visual .inner .track{position:absolute; bottom:0; left:50%; margin-left:-831px;}

/* case */
.case{position:relative; background:#F7F7F7;}
.case .inner{position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; padding:100px 0;}
.case .inner .tit{margin-bottom:80px;}
.case .inner .track{margin-bottom:40px;}
.case .inner .card-list {display: flex; gap: 29px; justify-content:center;}
.case .inner .card-list .card {width: 348px; /* ÇÊ¿ä¿¡ ¸Â°Ô Á¶Àý */ height: 502px; perspective: 1000px; cursor: pointer;}
.case .inner .card-list .card img {width: 100%; height: 100%; position: absolute; backface-visibility: hidden; top: 0; left: 0;}
.case .inner .card-list .card .back {transform: rotateY(180deg);}
.case .inner .card-list .card .card-inner {width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s;}
.case .inner .card-list .card .card-inner.is-flipped {transform: rotateY(180deg); animation:none;}
.case .inner .card-list .card .card-inner .front{animation: tiltShake 2s infinite ease-in-out; transform-style: preserve-3d;}

/* combination */
.combination{position:relative; background:linear-gradient(180deg,rgba(21, 56, 74, 1) 0%, rgba(6, 28, 50, 1) 100%);}
.combination .inner{padding:100px 0;}
.combination .inner .con{position: relative; margin-top:60px;}
.combination .inner .con .slider{display:flex; justify-content:center; gap:72px; position:absolute; top:266px; left:0; width:100%;}
.combination .inner .con .slider .swiper-container{width:312px; height:87px; margin:0;}
.combination .inner .con .slider .swiper-container .swiper-wrapper .swiper-slide{display:flex; align-items:center; justify-content:center;}
.combination .swiper-notification {display: none !important;}
.combination .btn{display:block; position:absolute; bottom:59px; left:49.4%; transform:translateX(-50%); width:329px; height:70px; text-indent:-9999px;}
.combination .btn:before{content:""; display:block; position:absolute; bottom:-19px; right:-15px; width:56px; height:49px; background:url(img/click_ico.png) 0 0 no-repeat; animation:click 1s ease-in infinite alternate;}

/* route1 */
.route1{background:url(img/route01_bg.png) left bottom no-repeat;}
.route1 .inner{position:relative; padding:100px 0;}
.route1 .inner .tit{margin-bottom:60px;}
.route1 .inner .book{margin-bottom:30px;}
.route1 .inner .con{position:relative;}
.route1 .inner .con .arr{position:absolute; right:0;}
.route1 .inner .con .arr1_1{bottom:737px;}
.route1 .inner .con .arr1_2{bottom:649px;}
.route1 .inner .con .arr2{bottom:500px;}
.route1 .inner .con .arr3{bottom:350px;}
.route1 .inner .con .arr4{bottom:200px;}
.route1 .inner .con .arr5{bottom:50px;}

/* route2 */
.route2{position:relative; background:linear-gradient(180deg,rgba(33, 118, 96, 1) 0%, rgba(2, 24, 29, 1) 100%);}
.route2 *{font-family:"Pretendard";}
.route2:before{content:""; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:2560px; height:895px; background:url(img/route02_bg.png) 0 0 no-repeat; mix-blend-mode:soft-light;}
.route2 .inner{padding:100px 0;}
.route2 .inner > .tit{margin-bottom:60px;}
.route2 .inner .step{display:flex; gap:4px; position:relative; z-index:20;}
.route2 .inner .step:not(:last-child){margin-bottom:40px;}
.route2 .inner .step > .tit{display:flex; flex-direction:column; align-items:center; justify-content:center; width:98px; border-radius:10px; font-weight:600; font-size:24px; color:#fff; line-height:28px;}
.route2 .inner .step > .tit b{display:block; font-weight:900; letter-spacing:0px;}
.route2 .inner .step .con{width:calc(100% - 102px);}
.route2 .inner .step .con > ul{display:flex; overflow:hidden; border-radius:10px 10px 0 0;}
.route2 .inner .step .con > ul > li{flex:1;}
.route2 .inner .step .con > ul > li a{display:block; height:85px; background:#868686; font-weight:700; font-size:30px; color:#B2B2B2; line-height:85px;}
.route2 .inner .step .con > ul > li.on a{height:85px; background:#121212;}
.route2 .inner .step .con .contents > div{display:none; background:#fff; border-radius:0 0 10px 10px;}
.route2 .inner .step .con .contents > div.active{display:flex;}
.route2 .inner .step .con .contents > div .book{width:211px; padding:63px 0 63px 83px; box-sizing:content-box;}
.route2 .inner .step .con .contents > div .book a{display:block; height:46px; text-indent:-9999px;}
.route2 .inner .step .con .contents > div .book a.ebook{margin-top:9px; background:url(img/route02_btn01.png) 0 0 no-repeat;}
.route2 .inner .step .con .contents > div .book a.lecture{margin-top:3px; background:url(img/route02_btn02.png) 0 0 no-repeat;}
.route2 .inner .step .con .contents > div .teacher{width:calc(100% - 211px); padding:40px 0 50px;}
.route2 .inner .step .con .contents > div .teacher .tit{font-size:30px; color:#000; line-height:38px;}
.route2 .inner .step .con .contents > div .teacher .tit span{display:inline-block; position:relative; font-weight:700; z-index:10;}
.route2 .inner .step .con .contents > div .teacher .tit span:before{content:""; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:25px; z-index:-1;}
.route2 .inner .step .con .contents > div .teacher .lineup{display:flex; justify-content:center; gap:8px; margin-top:34px;}
.route2 .inner .step .con .contents > div .teacher .lineup li{position:relative;}
.route2 .inner .step .con .contents > div .teacher .lineup li:before{content:""; display:block; position:absolute; bottom:40px; left:0; width:100%; height:290px; border-radius:100px 100px 0 0;}
.route2 .inner .step .con .contents > div .teacher .lineup li img{position:relative; z-index:10;}
.route2 .inner .step .con .contents > div .teacher .lineup li a{display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:147px; height:32px; text-indent:-9999px; z-index:20;}
.route2 .inner .step1 > .tit{background:#F9A618;}
.route2 .inner .step2 > .tit{background:#53B8E5;}
.route2 .inner .step1 .con > ul > li.on a{color:#F9A618;}
.route2 .inner .step2 .con > ul > li.on a{color:#94E3FF;}
.route2 .inner .step1 .con .contents > div .teacher .tit span:before{background:#FFDC9F;}
.route2 .inner .step2 .con .contents > div .teacher .tit span:before{background:#94E3FF;}
.route2 .inner .step1 .con .contents > div .teacher .lineup li.v1:before{background:#FDE9C6;}
.route2 .inner .step1 .con .contents > div .teacher .lineup li.v2:before{background:#FFF2DD;}
.route2 .inner .step2 .con .contents > div .teacher .lineup li.v1:before{background:#C8EAF6;}
.route2 .inner .step2 .con .contents > div .teacher .lineup li.v2:before{background:#E3F8FF;}

/* route3 */
.route3{position:relative; background:#E4F7FF url(img/route03_bg.png) center bottom no-repeat;}
.route3 .inner{padding:100px 0 378px;}
.route3 .inner .tit{margin-bottom:80px;}
.route3 .inner .sub_tit{margin-bottom:20px;}
.route3 .inner .slider{overflow:visible;}
.route3 .inner .slider .swiper-wrapper{transition-timing-function: linear;}
.route3 .inner .slider .swiper-wrapper .swiper-slide{width:2560px;}
.route3 .inner .obj{position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:50;}

/* notice_wrap */
.notice_wrap{z-index:1; position:relative; width:1200px; margin:0 auto;}
.notice_wrap > .tit{display:block; height:70px; background-color:#111; border-radius:40px; font-family:"GmarketSansBold" !important; font-size:28px; color:#fff; line-height:74px; text-align:center;}
.notice_wrap > .tit span{position:relative; padding-right:30px;}
.notice_wrap > .tit span:before{content:""; display:block; position:absolute; top:8px; right:0; width:20px; height:13px; background:url(img/notice_arr.png) 0 0 no-repeat; transition:transform .5s;}
.notice_wrap > .tit.on span:before{transform:rotate(180deg);}
.notice_wrap .con{display:none; padding:50px; background-color:#F4F4F4; border-radius:40px; text-align:left; letter-spacing:-1px;}
.notice_wrap .con .tit{margin-bottom:10px; padding-left:10px; font-weight:900; font-size:20px; color:#333;}
.notice_wrap .con ul+p{margin-top:25px;}
.notice_wrap .con ul li{position:relative; padding-left:20px; font-size:16px; text-indent:-10px; color:#666;}
.notice_wrap .con ul li:not(:first-child){margin-top:4px;}
.notice_wrap .con ul li .bullet{width:5px; height:5px; display:block; background:#666; border-radius:50%; flex-shrink:0; margin:11px 8px 0 0;}
.notice_wrap .con ul li .bold{color:#333;}
.notice_wrap .con ul li.red{color:#F20000;}
.notice_wrap .con ul li a{font-weight:500;}

/* bestseller_emergency_school */
.bestseller_emergency_school{padding:0 0 80px;}
.bestseller_emergency_school_1 .slider{display:flex; margin:0 0 30px;}
.bestseller_emergency_school_1 .slider li.original {animation: 35s linear 0s infinite normal forwards running rollingRight1;}
.bestseller_emergency_school_1 .slider li.clone {animation: 35s linear 0s infinite normal none running rollingRight2;}
.bestseller_emergency_school_2 .swiper-pagination-bullet{width:15px; height:15px; margin:0 10px !important; background:#000; opacity:.5;}
.bestseller_emergency_school_2 .swiper-pagination-bullet-active{background:#F20000; opacity:1;}

/* °Ü¿ïÀ̺¥Æ® */
.best_routine_2 .slide_wrap .swiper-button-prev:after {display:none;}
.best_routine_2 .slide_wrap .swiper-button-next:after {display:none;}

/* lectureList */
#lectureList{width:1200px; margin:0 auto;}

/* floating */
.floatingUi{position:fixed; top:120px; left:5%; width:159px; z-index:100;}
.floatingUi *{font-family:"Pretendard";}
.floatingUi ul{overflow:hidden; margin:8px 0 10px; border:1px solid #ECECED; border-radius:10px;}
.floatingUi ul li:not(:last-child) a{border-bottom:1px solid #ECECED;}
.floatingUi ul li a{display:flex; justify-content:center; flex-direction:column; height:85px; background:#fff; font-weight:700; font-size:16px; color:#333; text-align:center; line-height:18px;}
.floatingUi ul li a span{font-weight:900; font-size:16px;}
.floatingUi ul li a p{margin-top:5px; font-weight:500; font-size:16px; color:#333; line-height:24px;}
.floatingUi ul li a p b{display:block; font-weight:700; font-size:18px;}
.floatingUi ul li.on a{background:#00DB90; border-bottom:none; color:#fff;}
.floatingUi ul li.on a p{color:#fff;}
.floatingUi .event{position: relative; padding-top:20px; margin-bottom:20px; cursor:pointer;}
.floatingUi .event img{position:absolute; top:0; left:0;}
.floatingUi .event a{display:block; position: relative; width:100%; height:39px; z-index:10; text-indent:-9999px;}
.floatingUi .event a:nth-of-type(1){height:100px; margin-top:0;}
.floatingUi .event a:nth-of-type(3){margin-top:2px;}
.floatingUi .event a:nth-of-type(4){margin-top:3px;}


/* ------------------------------ animation css ¡é ---------------------------------------------
	animation:60s linear 0s infinite normal forwards running rollingTop1;
	animation:60s linear 0s infinite normal forwards running rollingTop2;
	animation:click 1s ease-in infinite alternate;
	animation:blinker 1s ease-in infinite alternate;
------------------------------------------------------------------------------------------ */

/* Ä«µå Èçµé¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes tiltShake {
	0%   { transform: rotateZ(0deg); }
	15%  { transform: rotateZ(-2deg); }
	30%  { transform: rotateZ(2deg); }
	45%  { transform: rotateZ(-1deg); }
	60%  { transform: rotateZ(1deg); }
	75%  { transform: rotateZ(-1deg); }
	100% { transform: rotateZ(0deg); }
}

/* ÇÑÂÊÀ¸·Î È帣´Â ¾Ö´Ï¸ÞÀ̼Ç(top:À§·Î, right:¿À¸¥ÂÊÀ¸·Î) */
@keyframes rollingTop1 { 
    0% {transform: translateY(0);}
    50% {transform: translateY(-100%);}
    50.01%{transform: translateY(100%);}
    100%{transform: translateY(0);}
}

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

@keyframes rollingLeft1 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100%);
    }
    50.01% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

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

/* ¼Õ°¡¶ô Ŭ¸¯ À¯µµ ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes click{
	0% {transform:translate(0,0);}
	100% {transform:translate(10%,10%);}
}

/* ±ô¹Ú°Å¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes blinker {
	50%{opacity:0;}
}