@charset "euc-kr";

@font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }

#wrapper.wide{width:auto; min-width:1200px; letter-spacing:-1px; margin-top:0;}
div.visual,
div.cont1,
div.cont2,
div.cont3,
div.cont4,
div.cont5,
div.cont6,
div.cont7,
div.cont8,
div.cont9,
div.cont10{
	position: relative;
	text-align: center;
}
.mask{
	width: 1200px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	min-height: 50px;
}
.mask .img{
	position: relative;
	left: -650px;
}
.floatingUi {
	position: fixed;
	overflow: hidden;
	right:0;
	top:50%;
	z-index: 10;
	margin:0;
	transform:translateY(-50%);    
	display: block !important;
    opacity: 1 !important;
}
.onFixdmenu {
	position: fixed !important;
	top:0px !important;
	margin:0;
}
@media all and (min-width:2500px) {
	.floatingUi{left:50%; margin:0 0 0 1029px;}
}

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

#topbanner .slide_box{height:120px;}
#topbanner .slider{width:1200px; height:120px;}
#topbanner .anythingControls{position:absolute; left:50%; top:10px; margin:0 0 0 510px;}
#topbanner .anythingControls ul{float:none;}
#topbanner .anythingControls li{float:none !important; display:inline-block;}
#topbanner .anythingControls li a{width:10px; height:10px; background:#000e6d; border-radius:100%; margin:0 4px 0 0; display:inline-block; text-indent:-9999em;}
#topbanner .anythingControls li a:hover{background:#000e6d;}
#topbanner .anythingControls li a.cur{background:#cc3344;}


/* visual */
.visual { background:#1b076b; position:relative; height: 1116px; overflow: hidden; }
.visual .bg { }
.visual .mask { display:flex; justify-content:center; overflow:visible; }
.visual .txt1 { position:absolute; top:58px; left:0; right:0; margin:0 auto; z-index:1; }
.visual .txt2 { position:absolute; top:153px; left:0; right:0; margin:0 auto; z-index:1; }
.visual .light1 { position:absolute; top:100px; left:50%; margin-left:-623px; background-blend-mode:screen; }
.visual .light2 { position:absolute; top:197px; left:50%; margin-left:403px; background-blend-mode:screen; }
.visual .light1 img { animation:neonBlink2 2.3s infinite; }
.visual .light2 img { animation:neonBlink 1.5s infinite; opacity:0; }
@keyframes neonBlink {
    0% { opacity:0; }
    50% { opacity:1; }
    100% { opacity:0; }
}

@keyframes neonBlink2 {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.visual .teacher1 { position:absolute; top:402px; left:0; right:0; margin:0 auto; }
.visual .teacher2 { position:absolute; top:606px; left:50%; margin-left:-650px; z-index:1; }


/* update */
.update{background-color:#161f47;}
.update .mask:before{content:""; display:block; position:absolute; top:28px; left:213px; width:61px; height:64px; background:url(img/update_ico.png) 0 0 no-repeat; animation:rotate_circle 4s linear infinite;}


.cont0{background:url(img/cont0.png) no-repeat center;}

.cont1{background:#22232c;}
.cont2{background:#1f2853;}
.cont2_2 .wifi{position:absolute; left:616px; top:108px; background: url(img/wifi.png) no-repeat; width:142px; height:116px; animation: wifi 3s steps(4) infinite;}

.cont3{background:#44518e; padding:0 0 50px;}
.cont3 .mask{overflow:visible;}
.cont3 .slide_box{position:relative; margin:50px 0 0;}
.cont3 .slider{width:1200px; height:479px;}
.cont3 .anythingControls{position:absolute; left:360px; bottom:27px; text-align:center; width:825px;}
.cont3 .anythingControls ul{float:none;}
.cont3 .anythingControls li{float:none !important; display:inline-block;}
.cont3 .anythingControls li a{width:18px; height:18px; background:#d7d7d7; border-radius:100%; margin:0 6px 0 0; display:inline-block; text-indent:-9999em;}
.cont3 .anythingControls li a:hover{background:#d7d7d7;}
.cont3 .anythingControls li a.cur{background:#cc3344;}

.cont4{background:#212121; position:relative; overflow:hidden; padding:0 0 80px}
/* .cont4 .box{position:absolute; left:0; bottom:100px;} */
.cont4 .box{margin:30px 0 0;}
.cont4 .book_slider .bx-viewport ul li {background:url(img/cont4_slider.png) no-repeat; width:2298px; height:615px;}


.section{font-family:'Noto Sans KR';}
.section .section_tit{background:url(img/section/section_tit.png) no-repeat center top;}
.section .section_tab{}
.section .section_tab .tabArea{overflow:hidden;}
.section .section_tab .tabArea li:first-child{margin:0;}
.section .section_tab .tabArea li{float:left; width:240px; height:150px;}
.section .section_tab .tabArea li a{display:block; background:url(img/section/section_tab.png) no-repeat; width:100%; height:100%; text-indent:-9999em;}
.section .section_tab .tabArea li a.s1{background-position:0 0;}
.section .section_tab .tabArea li a.s2{background-position:-240px 0;}
.section .section_tab .tabArea li a.s3{background-position:-480px 0;}
.section .section_tab .tabArea li a.s4{background-position:-720px 0;}
.section .section_tab .tabArea li a.s5{background-position:-960px 0;}
.section .section_tab .tabArea li.on a.s1{background-position:0 -150px;}
.section .section_tab .tabArea li.on a.s2{background-position:-240px -150px;}
.section .section_tab .tabArea li.on a.s3{background-position:-480px -150px;}
.section .section_tab .tabArea li.on a.s4{background-position:-720px -150px;}
.section .section_tab .tabArea li.on a.s5{background-position:-960px -150px;}
.section .class_tit1{background:#181f46; margin:49px 0 0; text-align:center; color:#fff; font-size:55px; font-family: 'GmarketSansBold'; line-height:1; padding:26px 0 18px;}
.section .class_tit1 span{color:#81fff2;}

.slide_book{overflow:hidden; margin:58px 0 0;}
.slide_book .slideBox{position:relative; width:1000px; height:255px; margin:0 auto;}
.slide_book .slider{width:195px; height:247px;}
.slide_book .item:first-child{margin:0;}
.slide_book .item{float:left; position:relative; width:175px; height:247px; padding:9px 0 0 0; margin:0 0 0 0; text-align:center;}
.slide_book .item .bookBox{display:inline-block; position:relative; width:175px !important; cursor:pointer;}
.slide_book .item .bg{position:absolute; left:0; top:0; background:url(img/book/book_bg.png) no-repeat; width:175px; height:247px; z-index:2;}
.slide_book .item.on{padding:9px 0 0 0px;}
.slide_book .item.on .bg{background:url(img/book/book_bg_on.png) no-repeat;}
.slide_book .item img{position:absolute; left:1px; top:10px; z-index:1; width:164px; height:218px;}
.slide_book .item img.grayscale{opacity:1;}
.slide_book .item img.color{opacity:0;}
.slide_book .item.on img.grayscale{opacity:0;}
.slide_book .item.on img.color{opacity:1;}
.slide_book .slideBox .left,
.slide_book .slideBox .right{width:75px; height:100%; z-index:2;}
.slide_book .slideBox .arrow{height:100%;}
.slide_book .slideBox .arrow a{display:block; background: url(/promotion/lecture/2018/koc_winter/img/koc4_slider_arrow.png) no-repeat; width:100%; height:100%; vertical-align:middle; text-indent:-9999em; opacity:0.5; transition:opacity .3s}
.slide_book .slideBox .arrow a:hover{opacity:1; filter:alpha(opacity=100);}
.slide_book .slideBox .arrow.disabled a{cursor:default;}
.slide_book .slideBox .left span a{background-position:0 center;}
.slide_book .slideBox .right span a{background-position:-99px center;}
.slide_book .slideBox .left{position:absolute; left:-100px; top:0px;}
.slide_book .slideBox .right{position:absolute; right:-80px; top:0px;}
.section_dec{margin:50px 0 0; text-align:center;}
.section_dec .class_tit2{display:inline-block; background:#5260ae; width:1076px; padding:20px 0; text-align:center; border:4px solid #000; color:#fff; border-radius:67px; line-height:1;}
.section_dec .class_tit2 .s1{font-size:30px;}
.section_dec .class_tit2 .s2{font-size:50px; font-family: 'GmarketSansBold'; margin:10px 0 0;}
.section_dec .mid{text-align:left; margin:-100px 0 0;; padding:150px 60px 60px; border:4px solid #000; overflow:hidden;}
.section_dec .mid .book_dec{float:left; text-align:center; width:271px; margin:10px 0 0;}
.section_dec .mid .book_dec .thumb{position:relative; width:271px; height:363px; border:1px solid #cfcfcf; overflow:hidden;}
.section_dec .mid .book_dec .thumb:before{position:absolute; left:0px; top:-13px; background:url(img/section/dec_book_bg1.png) no-repeat; width:269px; height:12px; content:"";}
.section_dec .mid .book_dec .ico_book_view{margin:30px 0 0; background:url(img/section/ico_book_view.png) no-repeat; width:229px; height:50px;}
.section_dec .mid .t_box{float:left; margin:0 0 0 40px; width:760px;}
.section_dec .mid .t_box .list{background:#f2f2f2; padding:20px 28px 0; height:120px;}
.section_dec .mid .t_box .list li:first-child{margin:0;}
.section_dec .mid .t_box .list li{margin:8px 0 0; color:#111; font-size:20px; font-weight:300; ; text-indent:-38px; padding:0 0 0 38px;}
.section_dec .mid .t_box .list li .num{display:inline-block; width:28px; height:28px; background:#7785a7; border-radius:100%; color:#fff; padding:5px 0 0 0; text-align:center; font-size:15px; font-family: 'GmarketSansBold'; margin:0 9px 0 0; text-indent:0;}
.section_dec .mid .t_slide{margin:30px 0 0;}
.section_dec .mid .t_slide .slide_box{position:relative; overflow:hidden;}
.section_dec .mid .t_slide .slide_box .slider{width:220px; height:269px;}
.section_dec .mid .t_slide .slide_box li{text-align:center;}
.section_dec .mid .t_slide .slide_box li .thumb{position:relative; display:inline-block; cursor:pointer;}
.section_dec .mid .t_slide .slide_box li .thumb:after{position:absolute; right:0; bottom:0; width:51px; height:51px; background:url(img/section/ico_play.png) no-repeat; content:"";}
.section_dec .mid .t_slide .slide_box li .thumb .inner2{position:relative; background:#fff2cb; border-radius:50%; width:174px; height:174px; overflow:hidden;}
.section_dec .mid .t_slide .slide_box li .thumb .pic{position:absolute; left:-107px; top:10px; width:400px;}
.section_dec .mid .t_slide .slide_box li .some{margin:15px 0 0;}
.section_dec .mid .t_slide .slide_box li .some .s1{display:inline-block; padding:0 32px 0 0; font-size:24px; color:#222; font-family: 'GmarketSansLight'; background:url(img/section/ico_home.png) no-repeat right 4px; cursor:pointer;}
.section_dec .mid .t_slide .slide_box li .some .s1 span{font-family: 'GmarketSansBold';}
.section_dec .mid .t_slide .slide_box li .some .s2{text-align:left; font-size:16px; color:#333; line-height:1.3;}
.section_dec .mid .t_slide .left,
.section_dec .mid .t_slide .right{width:75px; height:100%; z-index:2;}
.section_dec .mid .t_slide .arrow{height:100%;}
.section_dec .mid .t_slide .arrow a{display:block; background: url(/promotion/lecture/2018/koc_winter/img/koc4_slider_arrow.png) no-repeat; width:100%; height:100%; vertical-align:middle; text-indent:-9999em; opacity:0.5; transition:opacity .3s}
.section_dec .mid .t_slide .arrow a:hover{opacity:1; filter:alpha(opacity=100);}
.section_dec .mid .t_slide .arrow.disabled a{cursor:default;}
.section_dec .mid .t_slide .left span a{background-position:0 0;}
.section_dec .mid .t_slide .right span a{background-position:-99px 0;}
.section_dec .mid .t_slide .left{position:absolute; left:-20px; top:0px;}
.section_dec .mid .t_slide .right{position:absolute; right:-20px; top:0px;}

.cont5{background:#e6e8f8; padding:0 0 90px}
.cont5 .box{position:relative;}
.cont5 .box ul{position:absolute; left:70px; top:0; overflow:hidden;}
.cont5 .box li{display:inline-block; background:url(img/cont5_2.png) no-repeat; float:left; width:541px; height:401px; margin:0 0 0 14px; opacity:0; transition:all .3s; cursor:pointer; cursor: url(img/cur.png),url(img/cur.cur),pointer;}
.cont5 .box li:hover{opacity:1;}
.cont5 .box li:nth-child(1){margin:0; background-position:-70px 0;}
.cont5 .box li:nth-child(2){background-position:-625px 0;}
.gray_line {height:100px; background:#f7f7f7;}
.cont6{background: #061f29;overflow: hidden;display: flex; justify-content: center;}

/* °Ü¿ï¹æÇÐ ·çƾ */
.learning_routine_cont { overflow:hidden; }
.learning_routine_cont .mask {width:1300px;overflow: visible;}
.learning_routine_cont .thumb { position: relative; left: 50%; transform: translateX(-50%); }
.best_routine .mask {width:1300px;overflow: visible;}
.best_routine .swiper-button-next:after,
.best_routine .swiper-button-prev:after { display:none; }
.bonus_event .mask {width:1300px;overflow: visible;}

.section_wrap{overflow:hidden; width:1200px; height:840px; margin:0 auto;}
.section_wrap .section_tab2{float:left; width:256px; height:100%;}
.section_wrap .section_tab2 .tabArea li:nth-child(1){height:165px;}
.section_wrap .section_tab2 .tabArea li:nth-child(5){height:171px;}
.section_wrap .section_tab2 .tabArea li{display:block; width:100%; height:168px;}
.section_wrap .section_tab2 .tabArea li a{display:block; background:url(img/section/section_tab2.png) no-repeat; width:100%; height:100%; text-indent:-9999em;}
.section_wrap .section_tab2 .tabArea li a.s1{background-position:0 0;}
.section_wrap .section_tab2 .tabArea li a.s2{background-position:0 -165px;}
.section_wrap .section_tab2 .tabArea li a.s3{background-position:0 -333px;}
.section_wrap .section_tab2 .tabArea li a.s4{background-position:0 -501px;}
.section_wrap .section_tab2 .tabArea li a.s5{background-position:0 -669px;}
.section_wrap .section_tab2 .tabArea li.on a.s1{background-position:-256px 0;}
.section_wrap .section_tab2 .tabArea li.on a.s2{background-position:-256px -165px;}
.section_wrap .section_tab2 .tabArea li.on a.s3{background-position:-256px -333px;}
.section_wrap .section_tab2 .tabArea li.on a.s4{background-position:-256px -501px;}
.section_wrap .section_tab2 .tabArea li.on a.s5{background-position:-256px -669px;}
.section_wrap .mask{width:auto; margin:auto;}

.section_wrap .section_dec2{float:left; width:944px; height:100%;}
.section_wrap .section_dec2_top{position:relative; background:#181f46; height:113px; border-bottom:4px solid #000; padding:0 60px 0;; font-size:23px; color:#fff; overflow:hidden;}
.section_wrap .section_dec2_top .slide_box{position:relative; overflow:hidden; line-height:1;/*  text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; */}
.section_wrap .section_dec2_top .slier{width:800px; height:113px;}
.section_wrap .section_dec2_top .slide_box a{position:relative; color:#fff; font-size:23px; padding:0 10px 0 10px;}
.section_wrap .section_dec2_top .slide_box a:after{position:absolute; left:0; top:6px; background:#6e6e6e; width:1px; height:20px; content:'';}
.section_wrap .section_dec2_top .slide_box a:first-child:after{background:none;}
.section_wrap .section_dec2_top .slide_box a.on{color:#fdff42;}
.section_wrap .section_dec2_top .slide_box a:first-child{border:none;}
.section_wrap .section_dec2_top .inner1{display:flex; align-items:center; width:800px; height:112px !important; align-content: center; flex-wrap: wrap; justify-content: center; line-height:1.3;}

/*
.section_wrap .section_dec2_top .arrow{position:absolute; top:37px; width:21px; height:33px;}
.section_wrap .section_dec2_top .arrow.left{left:14px; background:url(img/section/section_dec2_top_arrow_left.png) no-repeat;}
.section_wrap .section_dec2_top .arrow.right{right:14px; background:url(img/section/section_dec2_top_arrow_right.png) no-repeat;}
*/

.section_wrap .section_dec2_top .left,
.section_wrap .section_dec2_top .right{width:60px; height:100%; z-index:2;}
.section_wrap .section_dec2_top .arrow{height:100%;}
.section_wrap .section_dec2_top .arrow a{display:block; width:100%; height:100%; vertical-align:middle; text-indent:-9999em;}
.section_wrap .section_dec2_top .left span a{background:url(img/section/section_dec2_top_arrow_left.png) no-repeat center;}
.section_wrap .section_dec2_top .right span a{background:url(img/section/section_dec2_top_arrow_right.png) no-repeat center;}
.section_wrap .section_dec2_top .left{position:absolute; left:0; top:0px;}
.section_wrap .section_dec2_top .right{position:absolute; right:0; top:0px;}



.section_wrap .section_dec2_mid{border-right:4px solid #000; border-bottom:4px solid #000; background:#fff; height:727px; text-align:center; padding:35px 0 0;}
.section_wrap .section_dec2_mid .class_tit2{color:#181f46; line-height:1.3;}
.section_wrap .section_dec2_mid .class_tit2 .a1{font-size:30px;}
.section_wrap .section_dec2_mid .class_tit2 .a2{font-size:50px; font-family: 'GmarketSansBold';}
.section_wrap .section_dec2_mid .section_box{}
.section_wrap .section_dec2_mid .section_box .book_dec{display:inline-block; vertical-align:top; width:271px; padding:30px 0 0; width:; margin:0 88px 0 0;}
.section_wrap .section_dec2_mid .section_box .book_dec .thumb{border:1px solid #c4c4c4; width:269px; height:360px; overflow:hidden;}
.section_wrap .section_dec2_mid .section_box .book_dec .thumb img{width:100%; object-fit: cover;}
.section_wrap .section_dec2_mid .section_box .book_dec .btn_box{margin:20px auto 0; width:229px;}
.section_wrap .section_dec2_mid .section_box .book_dec .btn_box button{display:block; width:100%;; height:50px; text-indent:-9999em;}
.section_wrap .section_dec2_mid .section_box .book_dec .ico_book_view{margin:0 0 10px; background:url(img/section/ico_book_view.png) no-repeat;}
.section_wrap .section_dec2_mid .section_box .book_dec .ico_lecture_view{background:url(img/section/ico_lecture_view.png) no-repeat;}
.section_wrap .section_dec2_mid .section_box .t_box{display:inline-block; vertical-align:top; width:308px;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide{position:relative;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .slider{width:308px; height:530px;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .thumb{position:relative; overflow:hidden; width:100%; height:410px; border-bottom:1px solid #181f46;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .thumb .pic{position:absolute; left:-145px; bottom:-40px;}

.section_wrap .section_dec2_mid .section_box .t_box .t_slide .some{margin:10px 0 0;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .some .s1{display:inline-block; padding:0 32px 0 0; font-size:28px; color:#222; font-family: 'GmarketSansLight'; background:url(img/section/ico_home.png) no-repeat right 7px; cursor:pointer;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .some .s1 span{font-family: 'GmarketSansBold';}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .some .s2{font-size:19px; color:#333; line-height:1.3;}


.section_wrap .section_dec2_mid .section_box .t_box .t_slide .anythingControls{position:relative; left:0; top:0; text-align:center; width:100%;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .anythingControls ul{float:none;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .anythingControls li{float:none !important; display:inline-block;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .anythingControls li a{width:18px; height:18px; background:#7c7c7c; border-radius:100%; margin:0 7px 0 0; display:inline-block; text-indent:-9999em;}
.section_wrap .section_dec2_mid .section_box .t_box .t_slide .anythingControls li a.cur{background:#181f46;}



.cont4 .box{display:flex;}
.cont4 .box .roller.original{margin-right:12px; animation:100s linear 0s infinite normal forwards running rollingRight1;}
.cont4 .box .roller.clone{animation:100s linear 0s infinite normal none running rollingRight2;}

.t_slide .bol_open{position:absolute; left:0; bottom:38%; border:1px solid #000; background:#f3e75e; width:100px; height:100px; display:flex; justify-content: center; align-items: center;border-radius:100%; font-size:22px; color:#3a350a; font-weight:700; line-height:1.2; font-family:'GmarketSansBold';}


/* keyframes */
@keyframes rotate_circle{
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

@keyframes rollingRight1 { /* ¿øº»¿ë */
    0% {transform: translateX(0);}
    50% {transform: translateX(-100%);}
    50.01%{transform: translateX(100%);}
    100%{transform: translateX(0);}
}

@keyframes rollingRight2 { /* Ŭ·Ð¿ë */
    0% {transform: translateX(0);}
    100% {transform: translateX(-200%);}
}

@keyframes wifi {
  to {
    background-position:-568px 0;
  }
}