@charset "utf-8"; /*온라인교육 페이지 css*/

#main h3{width:100%; height:120px; padding-top:63px; color:#ffffff; font-size:30px; font-weight:300; text-align:center;}
#main strong{font-weight:bold;}

.tablet, .pc{display:none;}
#main #intro{background:url(../img/online/intro_bg_m.jpg) no-repeat center top; background-size:100% 430px;}
#intro .intro-box{padding:30px 20px 16px; text-align:center;}
#intro .intro-box p{padding-top:31px; font-size:18px; font-weight:300;}
#intro .intro-box .sub-headline{padding:3px 0 10px; margin-bottom:5px; color:#1f2558; font-size:30px; font-weight:bold; line-height:40px; text-align:center;}
#intro .intro-box .intro-txt{padding-bottom:9px; font-size:15px; line-height:24px; letter-spacing:-1px; text-align:center;}

#main li .circle .circle-tit{padding-top:50px; color:#1f2558; font-size:26px; line-height:34px;}

.cont-00{width:100%; padding:40px 0 20px; background:#f6f7f9;}
.cont-00 ul li{margin-bottom:40px; text-align:center;}
.cont-00 li .circle{width:190px; height:190px; margin:0 auto; border-radius:50%; background:#bdc1df; font-weight:bold; text-align:center;}
.cont-00 li .circle>div{position:relative;}
.cont-00 li .circle .circle-num{padding:10px 5px 0 0; font-size:41px; line-height:50px;}
.cont-00 li .circle .plus{position:absolute; top:3px; right:17px;}
.cont-00 li .lec-txt{margin:18px auto 10px; text-align:left;}
.cont-00 .elearning .lec-txt{width:165px;}
.cont-00 .booklearning .lec-txt{width:200px;}
.cont-00 .online-english .lec-txt{width:220px;}
.cont-00 .microlearning .lec-txt{width:190px;}
.cont-00 li .lec-txt p{position:relative; margin:5px 0;}
.cont-00 li .lec-txt p .check{position:absolute; left:0; top:5px; width:12px; height:auto;}
.cont-00 li .lec-txt p span{display:inline-block; padding-left:17px; line-height:17px; letter-spacing:-1px;}
.cont-00 .btn-cont-00{width:160px; height:40px; text-align:center; margin:0 auto;}
.cont-00 .btn-cont-00 a{display:inline-block; width:100%; height:100%; border-radius:50px; background:#1f2558; color:#ffffff; font-size:16px; font-weight:bold; line-height:40px;}

.cont-01{overflow:hidden; width:100%; margin-bottom:60px; text-align:center;}
.cont-01 h4, .cont-02 h4{width:100%; height:78px; padding-top:23px; margin-bottom:23px; background:url(../img/online/online_tit_img_m_01.png) no-repeat center; color:#ffffff; font-size:20px; font-weight:200; letter-spacing:-1px; text-align:center;}
.cont-01 .sub-tit-m, .cont-02 .sub-tit-m, .cont-03 .sub-tit-m, .cont-04 .sub-tit-m{margin:0 20px; font-size:13px; font-weight:300; line-height:17px; text-align:center;}
.cont-01 .tit-m, .cont-02 .tit-m, .cont-03 .tit-m, .cont-04 .tit-m{padding:15px 0; font-size:24px; line-height:29px; letter-spacing:-1px;}
.cont-01 .elearning-table-m, .cont-02 .booklearning-table-m{padding:0 20px;}
.cont-01 .elearning-table, .cont-02 .booklearning-table{position:relative; width:100%; height:100%; text-align:center;}
.cont-01 .elearning-table .elearning-table-bg, .cont-02 .booklearning-table .booklearning-table-bg{position:absolute; top:0; left:0; z-index:250; width:100%; height:100%; background:rgba(0,0,0,0.3);}
.cont-01 .elearning-table .btn-img-view, .cont-02 .booklearning-table .btn-img-view{position:absolute; bottom:6px; right:8px; z-index:300; width:45px; height:45px;}
.cont-01 .elearning-table .elearning-table-img, .cont-02 .booklearning-table .booklearning-table-img{width:100%; text-align:center;}

.cont-02{margin-bottom:60px; text-align:center;}
.cont-02 .label{width:126px; height:21px; margin:13px auto; border-radius:50px; background:#1f2558; color:#ffffff; font-size:11px; font-weight:500;}
.cont-02 .tit-m{padding:0 0 20px;}

.cont-03{text-align:center;}
.cont-03 h4, .cont-04 h4{width:100%; height:98px; padding-top:20px; margin-bottom:23px; background:url(../img/online/online_tit_img_m_02.png) no-repeat center; color:#ffffff; font-size:20px; font-weight:200; letter-spacing:-1px; line-height:24px; text-align:center;}
.cont-03 .cont-03-01 h5{padding:18px 0 6px; font-size:18px; font-weight:bold;}
.cont-03 .cont-03-01>p, .cont-03 .cont-03-02>p{margin:0 20px 20px; font-size:10px; font-weight:300; line-height:14px;}
.cont-03 .cont-03-01 div div{width:180px; margin:0 auto;}
.cont-03 .cont-03-01 div .dialogue-practice{width:300px;}
.cont-03 .cont-03-01 div div img{float:left; clear:both; width:108px; padding:10px 0; margin-right:7px;}
.cont-03 .cont-03-01 div div .dialogue-practice-img{width:203px; margin-left:10px;}
.cont-03 .cont-03-01 div div div{float:left; width:30%; height:100%; padding:10px 0; text-align:left;}
.cont-03 .cont-03-01 div div .dialogue-practice-txt{width:22%;}
.cont-03 .cont-03-01 div div div p:first-child{width:22px; height:22px; padding-top:1px; border-radius:50%; color:#ffffff; background:#5e5e8c; font-size:11px; text-align:center;}
.cont-03 .cont-03-01 div div div h6{font-size:15px; font-weight:bold; color:#5e5e8c;}
.cont-03 .cont-03-01 div div div p:last-child{font-size:11px; line-height:15px;}

.cont-03 .cont-03-02{clear:both;}
.cont-03 .cont-03-02 h5{padding:40px 0 6px; font-size:18px; font-weight:bold;}
.cont-03 .cont-03-02 div div{float:left; position:relative; width:138px; margin-right:18px;}
.cont-03 .cont-03-02 div div:last-child{margin-right:0;}
.cont-03 .cont-03-02 div div p{position:absolute; bottom:0; left:0; width:100%; height:18px; color:#ffffff; background:rgba(87,93,143,0.8); font-size:9px;}
.cont-03 .cont-03-02 div div img{width:100%;}

@keyframes englishMove
    {from{margin-left:0;}
       to{margin-left:-3588px;}
    }

.cont-03 .cont-03-02 .english-box{width:7200px; padding:0 20px;
animation-name: englishMove;
-moz-animation-name: englishMove;
-webkit-animation-name: englishMove;
animation-duration: 40s;
-moz-animation-duration: 40s;
-webkit-animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;}

.cont-04{margin:60px 0; text-align:center;}
.cont-04>div{width:360px; height:1185px; margin:0 auto;}
.cont-04 .cont-04-div{width:320px; height:265px; margin:25px 20px 20px; border:#d2d2d2 1px solid; text-align:left;}
.cont-04 .cont-04-03, .cont-04 .cont-04-04{height:280px;}
.cont-04 .cont-04-div img{width:100%; height:140px;}
.cont-04 .cont-04-div h5{padding:20px 0 12px 20px; font-size:16px; font-weight:bold;}
.cont-04 .cont-04-div div{padding-left:20px; font-size:10px; font-weight:300; line-height:14px; letter-spacing:-0.5px;}

.btn-cont{width:280px; height:50px; text-align:center; margin:20px auto 0;}
.btn-cont.go-online-english-list.btn-cont{margin-top:130px;}
.btn-cont.go-microlearning-list.btn-cont{width:250px; height:50px;}
.btn-cont a{display:inline-block; width:100%; height:100%; border-radius:50px; background:#1f2558; color:#ffffff; font-size:20px; font-weight:bold; line-height:50px;}
.btn-cont a span{color:#00f37f;}

.cont-05{clear:both;}
.cont-05 h4{width:100%; height:98px; padding-top:19px; color:#ffffff; background:url(../img/online/online_tit_img_m_01.png) no-repeat center top; font-size:20px; font-weight:300; line-height:26px; text-align:center;}
.cont-05 .cont-05-info{padding:0 20px;}
.cont-05 .cont-05-info .number{padding:0 0 8px; font-size:40px; font-weight:100; line-height:50px;}
.cont-05 .cont-05-info h5{font-size:22px; font-weight:bold; line-height:28px; letter-spacing:-1px;}
.cont-05 .cont-05-info img{width:230px; padding-top:28px;}
.cont-05 .cont-05-info>div>div{padding-top:16px; color:#555555; font-size:12px; font-weight:300; line-height:18px; letter-spacing:-1px;}
.cont-05 .cont-05-info .cont-05-info-02{padding:40px 0; text-align:right;}

.cont-05 .cont-05-info .cont-05-info-03 div{float:left; text-align:center;}
.cont-05 .cont-05-info .cont-05-info-03 .circle{margin:18px 7px 0 0;}
.cont-05 .cont-05-info .cont-05-info-03 .circle-blending{width:100px; margin-bottom:50px;}
.cont-05 .cont-05-info .cont-05-info-03 div p{float:left; width:45px; height:45px; padding-top:11px; margin-right:-6px; border-radius:100%; color:#000000; font-size:10px; -webkit-transform:scale(0.8); display:inline-block; line-height:11px;}
.cont-05 .cont-05-info .cont-05-info-03 .circle-blending p{margin-right:6px;}
.cont-05 .cont-05-info .cont-05-info-03 div .circle-01{background:rgba(185,210,232,0.8);}
.cont-05 .cont-05-info .cont-05-info-03 div .circle-02{background:rgba(235,197,213,0.8);}
.cont-05 .cont-05-info .cont-05-info-03 div .circle-03{background:rgba(216,228,191,0.8);}
.cont-05 .cont-05-info .cont-05-info-03 div .circle-04{padding-top:16px; background:rgba(239,211,184,0.8);}
.cont-05 .cont-05-info .cont-05-info-03 div .circle-05{padding-top:16px; background:rgba(184,233,228,0.8);}

.cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-01{margin:0 -12px 0 8px;}
.cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-02{margin-right:0;}
.cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-03{margin-top:-17px; background:rgba(216,228,191,0.8);}
.cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-04{margin-top:-17px; margin-right:0; background:rgba(239,211,184,0.8);}
.cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-05{margin-left:27px; margin-top:-27px; background:rgba(184,233,228,0.8);}

.cont-05 .cont-05-info .cont-05-info-03 .arrow{width:9px; height:auto; padding-top:20px;}
.cont-05 .cont-05-info .cont-05-info-03 .arrow img{width:9px; height:auto;}

@media screen and (max-width:330px){
    #main h3{font-size:25px;}
    .cont-01 h4, .cont-02 h4{font-size:17px;}
}

@media screen and (max-width:342px){
    #main #intro{background-size:100% 447px;}
    #intro .intro-box p{padding-top:25px;}
}

@media screen and (min-width:768px){
    .mobile{display:none;}
    .tablet{display:block;}
	#main #intro{background:url(../img/online/intro_bg.jpg) no-repeat center; background-size:cover;}
    #main h3{padding-top:76px;}
    #intro .intro-box{padding-top:50px;}
    #intro .intro-box p:first-child{margin-bottom:0;}
    #intro .intro-box .sub-headline{padding-top:0;}
    
    .cont-00 ul{width:450px; height:329px; margin:0 auto;}
    .cont-00 ul li{position:relative; float:left; width:190px; height:327px; margin:0 70px 50px 0;}
    .cont-00 ul li:nth-child(2){margin-right:0;}
    .cont-00 .online-english{clear:both;}
    .cont-00 .microlearning{float:left; width:190px; margin:0 0 17px 0;}
    .cont-00 li .circle{width:190px; height:190px; margin:0 auto; border-radius:50%; font-weight:bold; text-align:center;}
    .cont-00 li .circle .circle-num{padding:8px 10px 0 0;}
    .cont-00 li .circle .plus{top:-6px; right:13px; width:27px; padding:10px 5px 0 0;}
    .cont-00 li .circle .circle-num .tablet{width:24px; height:auto;}
    .cont-00 .btn-cont-00{position:absolute; bottom:0; left:50%; margin-left:-80px;}
    
    .cont-01 .sub-tit-m, .cont-01 .tit-m, .cont-02 .sub-tit-m, .cont-02 .tit-m, .cont-03 .sub-tit-m, .cont-03 .tit-m, .cont-04 .sub-tit-m, .cont-04 .tit-m{display:none;}
    .cont-01 .elearning-table .elearning-table-bg, .cont-01 .elearning-table .btn-img-view, .cont-02 .booklearning-table .booklearning-table-bg, .cont-02 .booklearning-table .btn-img-view{display:none;}
    .cont-01 .elearning-table-img, .cont-02 .booklearning-table-img{pointer-events:none;}
    .cont-01 .sub-tit-pc, .cont-02 .sub-tit-pc, .cont-03 .sub-tit-pc, .cont-04 .sub-tit-pc{display:block; font-size:16px; font-weight:300; line-height:22px;}
    .cont-01 .tit-pc{display:block; padding:25px 0 30px; font-size:30px; line-height:48px; letter-spacing:-1px;}
    
    .cont-02{padding-bottom:50px; margin-bottom:0; background:#f6f7f9;}
	.cont-02 h4{margin-bottom:20px;}
    .cont-02 .label{width:186px; height:32px; padding-top:5px; margin:25px auto 0; font-size:16px;}
    .cont-02 .tit-pc, .cont-03 .tit-pc, .cont-04 .tit-pc{display:block; padding:10px 0 30px; font-size:30px; line-height:48px; letter-spacing:-1px;}
    
    .cont-03>div{width:582px; height:450px; margin:0 auto;}
    .cont-03 h4.mobile, .cont-04 h4.mobile{display:none;}
    .cont-03 h4.pc, .cont-04 h4.pc{display:block;}
    .cont-03 h4, .cont-04 h4{width:100%; height:98px; padding-top:21px; margin-bottom:0; background:url(../img/online/online_tit_img_m_01.png) no-repeat center top; color:#ffffff; font-size:20px; font-weight:200; letter-spacing:-1px; line-height:24px; text-align:center;}
    .cont-03 .cont-03-01 h5, .cont-03 .cont-03-02 h5{font-size:20px; line-height:26px;}
    .cont-03 .cont-03-01>p, .cont-03 .cont-03-02>p{font-size:12px;}
    .cont-03 .cont-03-01 div div{float:left; width:180px;}
    .cont-03 .cont-03-01 div .dialogue-practice{width:298px; margin-right:84px; margin:0 34px 0 39px;}
    .cont-03 .cont-03-01 div .drill-practice{clear:both; width:285px; margin-left:89px;}
    .cont-03 .cont-03-02{height:140px;}
    
    @keyframes englishMove
    {from{margin-left:-375px;}
       to{margin-left:-3962px;}
    }
    
    .cont-03 .cont-03-02 .english-box{padding:0; margin-left:-375px;
    animation-duration: 25s;
	-moz-animation-duration: 25s;
	-webkit-animation-duration: 25s;
    }
    
    .cont-04>div{width:720px; height:635px;}
    .cont-04 .cont-04-div{float:left;}
    
    .btn-cont.go-online-english-list.btn-cont{width:280px; height:50px; margin-top:76px;}
    
    .cont-05 .cont-05-info{width:700px; margin:0 auto;}
    .cont-05-info>div{position:relative;}
    .cont-05 .cont-05-info .cont-05-info-01{padding-top:50px;}
    .cont-05 .cont-05-info .cont-05-info-02{padding-top:100px;}
    .cont-05 .cont-05-info img{position:absolute; bottom:-30px; right:0;}
    .cont-05 .cont-05-info .cont-05-info-02 img{bottom:50px; left:0; width:270px;}
    .cont-05 .cont-05-info div h5.pc{display:block;}
    .cont-05 .cont-05-info .cont-05-info-03 h5{float:left; margin-right:140px; margin-bottom:60px;}
    .cont-05 .cont-05-info .cont-05-info-03 div{float:left;}
    .cont-05 .cont-05-info .cont-05-info-03 div.circle{margin:20px 7px 0 0;}
    .cont-05 .cont-05-info .cont-05-info-03 div.circle-blending{margin:-26px 0 50px 6px;}
    .cont-05 .cont-05-info .cont-05-info-03 div.arrow img{bottom:-66px; right:103px;}
}

@media screen and (min-width:1280px){
    #main h3{height:266px; padding-top:87px; font-size:55px;}
    #main #intro{width:100%; padding:55px 0 30px 0; margin:0 auto;}
    #intro .intro-box p:first-child{padding-top:0; font-size:36px; line-height:62px;}
    #intro .intro-box .sub-headline{padding-bottom:30px; font-size:50px; line-height:50px;}
    #intro .intro-box .intro-txt{font-size:24px; line-height:38px;}
	
	#main li .circle .circle-icon{width:67px; padding-top:3px; margin:45px auto 8px;}
    #main li .circle .circle-tit{padding-top:80px; font-size:37px;}
    
    .cont-00{padding:53px 0 0;}
    .cont-00 ul{width:1280px;}
    .cont-00 ul li{width:277px; height:467px; margin:0 57px 60px 0;}
    .cont-00 ul li:nth-child(2){margin-right:57px;}
	.cont-00 .online-english{clear:none;}
	.cont-00 .microlearning{width:277px;}
    .cont-00 li .circle{width:277px; height:277px;}
    .cont-00 li .circle .circle-num{padding-top:23px; font-size:63px; line-height:68px;}
	.cont-00 li .circle .circle-num .tablet{width:31px; height:auto;}
    .cont-00 li .circle .plus{top:11px; right:23px; width:31px; padding:0;}
	.cont-00 .elearning .lec-txt{width:220px;}
	.cont-00 .booklearning .lec-txt{width:270px;}
    .cont-00 .online-english .lec-txt{width:295px;}
	.cont-00 .microlearning .lec-txt{width:247px;}
	.cont-00 li .lec-txt p{margin:11px 0;}
	.cont-00 li .lec-txt p .check{width:17px;}
	.cont-00 li .lec-txt p span{width:100%; padding-left:27px; font-size:18px; line-height:25px;}
	.cont-00 .btn-cont-00{width:200px; height:50px; margin-left:-100px;}
	.cont-00 .btn-cont-00 a{font-size:20px; line-height:50px;}
	
    .cont-01{margin-bottom:80px;}
    .cont-01 h4, .cont-02 h4, .cont-03 h4, .cont-04 h4, .cont-05 h4{height:115px; padding-top:37px; background:url(../img/online/online_tit_img.png) no-repeat center; font-size:32px;}
	.cont-01 .sub-tit-pc, .cont-02 .sub-tit-pc, .cont-03 .sub-tit-pc, .cont-04 .sub-tit-pc{font-size:24px; line-height:30px;}
    .cont-01 .tit-pc, .cont-03 .tit-pc, .cont-04 .tit-pc{padding:45px 0; font-size:44px; line-height:60px;}
    .cont-01 .elearning-table .elearning-table-img, .cont-02 .booklearning-table .booklearning-table-img{width:1278px;}
    
    .cont-02{padding-bottom:80px;}
    .cont-02 .tit-pc{padding:10px 0 45px; font-size:44px; line-height:56px;}
    .cont-02 .label{margin:35px auto 0;}
    
    .cont-03 h4, .cont-04 h4{margin-bottom:20px;}
    .cont-03>div{width:1280px; height:370px;}
    .cont-03 .cont-03-01 h5, .cont-03 .cont-03-02 h5{padding:20px 0 0 0; font-size:30px; line-height:45px;}
    .cont-03 .cont-03-01>p, .cont-03 .cont-03-02>p{margin:0 20px 30px; font-size:18px; line-height:24px;}
    .cont-03 .cont-03-01 div .dialogue-practice{width:332px; margin:0 54px 0 47px;}
    .cont-03 .cont-03-01 div .drill-practice{clear:none; margin-left:59px;}
    .cont-03 .cont-03-01 div div{width:230px;}
    .cont-03 .cont-03-01 div div div{width:90px;}
    .cont-03 .cont-03-01 div div div p:first-child{width:34px; height:34px; padding-top:6px; font-size:18px;}
    .cont-03 .cont-03-01 div div div h6{margin:10px 0; font-size:24px; line-height:29px;}
    .cont-03 .cont-03-01 div div div p:last-child{font-size:18px; line-height:24px;}
    
    @keyframes englishMove
    {from{margin-left:-380px;}
       to{margin-left:-5970px;}
    }
    
    .cont-03 .cont-03-02{height:224px;}
    .cont-03 .cont-03-02 .english-box{width:11150px; margin-left:-500px;
    animation-duration: 30s;
	-moz-animation-duration: 30s;
	-webkit-animation-duration: 30s;
    }
    .cont-03 .cont-03-02 div div{width:214px; margin-right:29px;}
    .cont-03 .cont-03-02 div div p{height:25px; padding-top:2px; font-size:14px;}
    
    .cont-04{margin:80px 0;}
    .cont-04>div{width:1280px; height:1070px;}
    .cont-04 .cont-04-div{width:600px; height:470px; margin:0 80px 50px 0;}
    .cont-04 .cont-04-02, .cont-04 .cont-04-04{margin:0;}
    .cont-04 .cont-04-03, .cont-04 .cont-04-04{height:500px;}
    .cont-04 .cont-04-div img{height:265px;}
    .cont-04 .cont-04-div h5{padding:36px 0 12px 36px; font-size:30px; line-height:35px;}
    .cont-04 .cont-04-div div{padding-left:36px; font-size:18px; line-height:24px;}
    
    .btn-cont{width:440px; height:76px; margin:40px auto 0;}
	.btn-cont.go-online-english-list.btn-cont{width:440px; height:76px;}
	.btn-cont.go-microlearning-list.btn-cont{width:400px; height:76px;}
	.btn-cont a{border-radius:50px; font-size:30px; line-height:76px;}
    
    .cont-05 .cont-05-info{width:1060px;}
    .cont-05 .cont-05-info .number{font-size:65px; line-height:80px;}
    .cont-05 .cont-05-info h5{font-size:34px; line-height:43px;}
    .cont-05 .cont-05-info>div>div{padding-top:25px; font-size:18px; line-height:25px;}
    .cont-05 .cont-05-info .cont-05-info-01{padding-top:100px;}
    .cont-05 .cont-05-info .cont-05-info-02{padding-top:145px;}
    .cont-05 .cont-05-info .cont-05-info-03{padding-top:60px;}
    .cont-05 .cont-05-info img{bottom:-56px;}
    .cont-05 .cont-05-info .cont-05-info-01 img{width:358px;}
    .cont-05 .cont-05-info .cont-05-info-02 img{width:490px}
    
    .cont-05 .cont-05-info .cont-05-info-03 h5{margin-bottom:120px;}
    .cont-05 .cont-05-info .cont-05-info-03 div p{width:77px; height:77px; padding-top:20px; margin-right:-12px; font-size:14px; line-height:18px; font-weight:bold;}
    .cont-05 .cont-05-info .cont-05-info-03 div .circle-04{padding-top:29px;}
    .cont-05 .cont-05-info .cont-05-info-03 div .circle-05{padding-top:29px;}
    .cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-01{margin:0 -22px 0 14px;}
    .cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-03{margin-top:-25px;}
    .cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-04{margin-top:-25px;}
    .cont-05 .cont-05-info .cont-05-info-03 .circle-blending .circle-05{margin-left:42px; margin-top:-46px;}
    .cont-05 .cont-05-info .cont-05-info-03 div.circle-blending{width:160px; margin:-32px 0 50px 43px;}
    .cont-05 .cont-05-info .cont-05-info-03 .arrow{width:16px;}
    .cont-05 .cont-05-info .cont-05-info-03 div.arrow img{bottom:-97px; right:179px; width:16px;}
}