@charset "UTF-8";

.wrapper{max-width:720px; margin:0 auto; overflow-x:hidden;}

/* header */
header{position:fixed; top:0; left:0; width:100%; padding:3.33333vw 0; background:#fff; overflow:hidden; z-index:50; border-bottom: 1px solid #19bde6;}
header .logo{width:34.44444vw; height:5.27777vw; margin:0 auto;}
header .logo a{display:block;}
header .logo a img{width:100%;}
header .logo a img{width:100%;}
header .btn_open_gnb{position:absolute; top:2.7777vw; left:2.7777vw; width:6.38888vw;}
header .btn_open_gnb img{width:100%;}
header .btn_close_gnb{display:none; position:absolute; top:2.7777vw; left:2.7777vw; width:6.38888vw;}
header .btn_close_gnb img{width:100%;}

@media screen and (min-width:721px){
    header{padding:24px 0;}
    header .logo{width:248px; height:38px;}
    header .btn_open_gnb{top:20px; left:20px; width:46px;}
    header .btn_close_gnb{top:20px; left:20px; width:46px;}
}

.gnb{display:none; flex-direction: column; justify-content:center; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(42,206,247); z-index:40;}
.gnb li+li{margin-top:11.1111vw;}
.gnb li{text-align:center;}
.gnb li a{display:block; font-size:6.6666vw; color:#fff; letter-spacing: -0.035em;}
.gnb li a.on{font-weight:700; color:#fff;}

@media screen and (min-width:721px){
    .gnb li+li{margin-top:80px;}
    .gnb li a{font-size:48px;}
}

/* 다운로드 */
.app{position:relative; margin-top:11.1111vw;}
.app .img img{width:100%;}
.app ul{display:flex; justify-content: space-between; position:absolute; bottom:12.5vw; left:0; width:100%; padding:0 6.7777vw;}
.app ul li{width:40.5555vw;}
.app ul li img{width:100%;}

@media screen and (min-width:721px){
    .app{margin-top:80px;}
    .app ul{bottom:90px; padding:0 56px;}
    .app ul li{width:292px;}
}

/* top banner */
#topBanner .owl-dots{position:absolute; bottom:4.16666vw; left:0; width:100%; text-align: center;}
#topBanner .owl-dots .owl-dot span{display:inline-block; width:2.083333vw; height:2.083333vw; background:#707070; border-radius:50%;}
#topBanner .owl-dots .active span{background:#19bde6;}
#topBanner .owl-dots .owl-dot+.owl-dot{margin-left:2.77777vw;}

@media screen and (min-width:721px){
    #topBanner .owl-dots{bottom:30px;}
    #topBanner .owl-dots .owl-dot span{width:15px; height:15px;}
    #topBanner .owl-dots .owl-dot+.owl-dot{margin-left:20px;}
}

/* AI 자동학습 */
.ai .inner{position:relative;}
.ai h2 img{width:100%;}
.ai .links{position:absolute; top:109.1666vw; left:0; width:100%; padding:0 6.94444vw; z-index:1;}
.ai .links li{float:left; width:30%; text-align:center;}
.ai .links li:nth-of-type(1),.ai .links li:nth-of-type(4){width:33%;}
.ai .links li:nth-of-type(2),.ai .links li:nth-of-type(5){width:40%;}
.ai .links li:nth-of-type(3),.ai .links li:nth-of-type(6){width:27%;}
.ai .links li button{position:relative; font-size:4.44444vw; color:#c8e8f6; font-weight:300; letter-spacing: -0.05em; line-height:1;}
.ai .links li button.on{color:#fff; font-weight:700;}
.ai .links li button.on:after{content:""; display:block; position:absolute; bottom:-0.694444vw; left:0; width:100%; height:0.138888vw; background:#fff;}
.ai .links li+li{border-left:1px solid #c8e8f6;}
.ai .links li:nth-of-type(4){margin-left:0; padding-left: 0; border-left:0; clear:left;}
.ai .links li:nth-of-type(4),
.ai .links li:nth-of-type(5),
.ai .links li:nth-of-type(6){margin-top:2.77777vw;}
.ai .group{position:absolute; top:135.41666vw; left:0; width:100%;}
.ai .group .pad{position:absolute; top:-99.4444vw; left:0; width:100%;}
.ai .group .pad img{width:100%;}
.ai .group .pad a{display:block; position:absolute; left:50%; top:23.61111vw; width:12.7777vw; margin:0 0 0 -6.38888vw;}
.ai .group .cont{display:none;}
.ai .group .cont>p img{width:100%;}
.ai .group .cont.is-show{display:block;}

@media screen and (min-width:721px){
    .ai .links{top:786px; padding:0 50px;}
    .ai .links li button{font-size:32px;}
    .ai .links li button.on:after{bottom:-5px; height:1px;}
    .ai .links li:nth-of-type(4),.ai .links li:nth-of-type(5),.ai .links li:nth-of-type(6){margin-top:20px;}
    .ai .group{top:975px;}
    .ai .group .pad{top:-716px;}
    .ai .group .pad a{top:170px; width:92px; margin:0 0 0 -46px;}
}

/* 인간이 할 수 없는 부분 */
.solution{position:relative;}
.solution h2 img{width:100%;}
.solution .links{position:absolute; top:98.61111vw; left:4.16666vw; width:91.6666vw;}
.solution .links li+li{margin-top:6.94444vw;}
.solution .links a{display:block; position:relative;}
.solution .links strong{display:inline-block; position:relative; font-size:5vw; font-weight:500; letter-spacing: -0.05em; color:#000; line-height:150%;}
.solution .links strong:after{content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:0.27777vw; background:#44bfea; transition:width 0.3s ease;}
.solution .links a p{margin-top:5px; font-size:3.61111vw; color:#7c7c7c; line-height:150%;}
.solution .links .ico{position:absolute; top:0; right:0; width:13.05555vw;}
.solution .solution_popup{position:absolute; top:0; left:0; z-index:20; transform:translateX(-100%); transition:transform 0.5s ease;}
.solution .solution_popup .close_sPop{position:absolute; top:9.72222vw; right:9.72222vw; width:5.83333vw;}
.solution .solution_popup .close_sPop img{width:100%;}
.solution .solution_popup.is-show{transform:translateX(0%);}
.solution .solution_popup p{display:none;}
.solution .solution_popup p img{width:100%;}
.solution .dim{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:10;}

@media screen and (min-width:721px){
    .solution .links{top:710px; left:30px; width:660px;}
    .solution .links li+li{margin-top:50px;}
    .solution .links strong{font-size:36px;}
    .solution .links strong:after{height:2px;}
    .solution .links a p{margin-top:5px; font-size:26px;}
    .solution .links .ico{width:94px;}
    .solution .solution_popup .close_sPop{top:70px; right:70px; width:42px;}
}

/* AI 교과 스마트학습 */
.smart img{width:100%;}

/* 영상 */
.video{position:relative;}
.video img{width:100%;}
.video div{position:absolute; top:111.11111vw; left:0; width:100%; text-align:center;}
.video div a{display:inline-block; width:12.77777vw;}

@media screen and (min-width:721px){
    .video div{top:800px;}
    .video div a{width:92px;}
}

/* 초특가할인1 */
.free{position:relative;}
.free img{width:100%;}
.free .type{position:absolute; top:42.7777vw; left:0; width:100%; text-align:center;}
.free .type a{display:inline-block; width:38.0555vw;}

@media screen and (min-width:721px){
    .free .type{top:308px;}
    .free .type a{width:274px;}
}

/* 초특가할인2 */
.price img{width:100%;}

/* award */
.award{position:relative;}
.award p img{width:100%;}
.award  #awards{position:absolute; top:38.05555vw;}

@media screen and (min-width:721px){
    .award  #awards{position:absolute; top:274px;}
}

/* footer */
footer{padding-bottom:5.5555vw; background:#151619; text-align:center;}
footer .f_util{padding:2.77777vw 0; background:#333333;}
footer .f_util a{display:inline-block; font-size:3.33333vw; color:#8a8a8a; letter-spacing: -0.05em; font-weight:300;}
footer .f_util a+a{margin-left:4.16666vw; padding-left:4.16666vw; border-left:1px solid #8a8a8a;}
footer .f_logo{margin-top:4.86111vw;}
footer .f_logo a{display:inline-block; width:26.94444vw;}
footer .f_logo a img{width:100%;}
footer address{display:inline-block; position:relative; margin-top:4.16666vw; font-weight:300; font-size:2.36111vw; line-height: 180%; letter-spacing: -0.02em; color:#8a8a8a;}
footer .sns{margin-top:5.55555vw;}
footer .sns a{display:inline-block; width:5.277777vw;}
footer .sns a img{width:100%;}
footer .sns a+a{margin-left:6.94444vw;}

@media screen and (min-width:721px){
    footer{padding-bottom:40px;}
    footer .f_util{padding:20px 0;}
    footer .f_util a{font-size:24px;}
    footer .f_util a+a{margin-left:30px; padding-left:30px;}
    footer .f_logo{margin-top:35px;}
    footer .f_logo a{width:194px;}
    footer address{margin-top:30px; font-size:17px;}
    footer .sns{margin-top:40px;}
    footer .sns a{width:38px;}
    footer .sns a+a{margin-left:50px;}
}

/* review popup */
.review{display:none; position:absolute; top:0; left:0; z-index:100;}
.review .txt img{width:100%;}
.review .reviewPage{position:absolute; top:45vw; left:0; width:100%; padding:0 2.75vw;}
.review .reviewPage p{display:none;}
.review .reviewPage p img{width:100%;}
.review .reviewPage #page01{display:block;}
.review .paging{position:absolute; bottom:3.125vw; left:0; width:100%; text-align:center;}
.review .page a{display:inline-block; width:6.25vw; font-size:2.75vw; line-height:6.25vw; color:#666; vertical-align: top;}
.review .page .on{color:#3bb4d9;}
.review .page02{display:none;}
.review .prev{display:inline-block; width:6.25vw;}
.review .prev img{width:100%;}
.review .next{display:inline-block; width:6.25vw;}
.review .next img{width:100%;}
.review .close_review{position:absolute; top:3.125vw; right:3.125vw; width:5.25vw;}
.review .close_review img{width:100%;}
.reviewDim{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:90;}

@media screen and (min-width:721px){
    .review .reviewPage{position:absolute; top:360px; left:0; width:100%; padding:0 22px;}
    .review .reviewPage p{display:none;}
    .review .reviewPage #page01{display:block;}
    .review .paging{position:absolute; bottom:25px; left:0; width:100%; text-align:center;}
    .review .page a{display:inline-block; width:50px; font-size:22px; line-height:50px; color:#666;}
    .review .page .on{color:#3bb4d9;}
    .review .page02{display:none;}
    .review .prev{width:50px;}
    .review .next{width:50px;}
    .review .close_review{position:absolute; top:25px; right:25px; width:42px;}
}

@media screen and (min-width:800px){
    .review{left:50%; margin-left:-400px;}
}

.utils{display:flex; justify-content: space-between; position:fixed; bottom:0; left:0; width:100%; padding:2.7777vw; background:rgba(255,255,255,.7); z-index:20; transform:translateY(0%); transition:transform 0.3s ease;}
.utils.is-hide{transform:translateY(100%);}
.utils a{display:block; width:44.38888vw;}
.utils a img{width:100%;}

@media screen and (min-width:721px){
    .utils{padding:20px;}
    .utils a{display:block; width:334px;}  
}