@charset "utf-8";
@font-face {
    font-family: 'Jua';
    font-style: normal;
    font-weight: 400;
    src: local('��'),
        url('Jua.eot') format('embedded-opentype');
}


body.bg{background:url(https://englishbus.co.kr/bnav/img/bg.gif) repeat;}
.pc{display:block !important;}
.mo{display:none !important;}
/*header*/
.header{width:100%; height:180px; position:absolute; top:0; z-index:100;}
.top{height:120px; background:#2e9dd9; position:relative;}
.logo img{display:block; position:absolute; left:1em; top:50%; margin:-41px 0 0;}
.page_nav{height:60px; background:#f3d950; overflow:hidden; zoom:1;}
.page_nav:after{content:''; display:block; clear:both;}
.smap li{float:left; color:#444; line-height:59px; font-family: 'Nanum Gothic', sans-serif; font-weight:bold; font-size:1.195em; padding:0 36px 0 15px; background:url(https://englishbus.co.kr/bnav/img/smap_li.png) no-repeat  right center;}
.smap li:last-child{background:none;}
li.home{padding:0 !important;}
.home a{display:block; width:60px; height:60px; background:#f5be1d url(https://englishbus.co.kr/bnav/img/ico_home.png) no-repeat center; background-size:cover;} 
.self_close{display:block; position:absolute; right:1.5em; top:50%; margin:-41px 0 0;}

/*container*/
.container{position:absolute; top:180px; bottom:40px; left:0; right:0; overflow:auto;}
.wrap{padding:2.0em 0 1em; text-align:center; zoom:1;}
.wrap:after{content:''; display:block; clear:both;}
.wrap h2{margin:0 auto 1.25em;}
.wrap h2 img{display:block; margin:0 auto;}

.step1{width:90%; max-width:1200px; margin:0 auto 0;}
.step1 li{display:inline-block; margin:0 1.65em 1.20em; vertical-align:top; width:240px; height:210px; background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2.png) no-repeat center 40px; border:3px solid #bfbfbf; box-sizing:border-box; *zoom:1; *display:inline;}
.step1 li.on{border:5px solid #faa731; background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_on.png) no-repeat center 40px;}
.step1 li a{display:block; width:100%; height:100%; text-align:center; position:relative;}
.step1 a > em{display:block; width:100%; font-family: 'Jua', sans-serif; color:#444; font-size:2.45em; text-align:center; position:absolute; bottom:44px;}
.step1 li.on a > em{color:#faa731;} 
.step1 li:hover{border-color:#f3d950;}
.step1 li.on:hover{border-color:#faa731;}

/*.step2{width:98%; max-width:1200px; margin:0 auto;}*/
.step2 li{display:inline-block; width:22%; max-width:240px; min-width:240px; height:210px; margin:0 0.8em 1.5em; vertical-align:top; background-color:#fff; border:3px solid #bfbfbf; box-sizing:border-box; *zoom:1; *display:inline;}
.step2 li:hover{border-color:#f3d950;}
.step2 li a{display:block; width:100%; height:100%; font-family: 'Jua', sans-serif; color:#444; font-size:2.45em; position:relative;}
.step2 li a em{display:block; text-align:center; width:100%; position:absolute; bottom:35px;}
.step2 li.on{border:5px solid #faa731;}
.step2-1{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_1.png) no-repeat center 25px;}
.step2-2{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_2.png) no-repeat center 25px;}
.step2-3{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_3.png) no-repeat center 25px;}
.step2-4{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_4.png) no-repeat center 25px;}
.step2-5{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_5.png) no-repeat center 25px;}
.step2-6{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_6.png) no-repeat center 25px;}
.step2-7{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_7.png) no-repeat center 25px;}
.step2-8{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_8.png) no-repeat center 25px;}
.step2-9{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_9.png) no-repeat center 25px;}
.step2-10{background:#fff url(https://englishbus.co.kr/bnav/img/sub/step2_10.png) no-repeat center 25px;}

.step2-1.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_1_on.png);}
.step2-2.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_2_on.png);}
.step2-3.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_3_on.png);}
.step2-4.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_4_on.png);}
.step2-5.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_5_on.png);}
.step2-6.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_6_on.png);}
.step2-7.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_7_on.png);}
.step2-8.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_8_on.png);}
.step2-9.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_9_on.png);}
.step2-10.on{background-image:url(https://englishbus.co.kr/bnav/img/sub/step2_10_on.png);}

.step3{width:80%; max-width:720px; margin:0 auto 20px; text-align:left;}
.step3 li{display:block; line-height:1.00em; margin:0 auto 15px; background:#fff; border:3px solid #bfbfbf; box-sizing:border-box;}
.step3 li:hover{border-color:#f3d950;}
.step3 a{display:block; width:100%; font-family: 'Jua', sans-serif; color:#444; font-size:2.45em; position:relative; cursor:pointer; background:url(https://englishbus.co.kr/bnav/img/sub/mstep.png) no-repeat right center;}
.step3 a em{display:block; padding:43px 0 43px 140px; font-family:inherit;}
.step3_1 em{background:url(https://englishbus.co.kr/bnav/img/sub/step3_1.png) no-repeat 50px center; background-size:auto 78%;}
.step3_2 em{background:url(https://englishbus.co.kr/bnav/img/sub/step3_2.png) no-repeat 50px center; background-size:auto 78%;}
.step3_3 em{background:url(https://englishbus.co.kr/bnav/img/sub/step3_3.png) no-repeat 50px center; background-size:auto 78%;}
.step3 li.on{background:#fff; border:5px solid #faa731;}
.step3 li.on a{color:#faa731; background:url(https://englishbus.co.kr/bnav/img/sub/mstep_on.png) no-repeat right center;}

.btn{width:100%; text-align:center; padding:10px 0 0;}
.btn a{display:inline-block; margin:0 0.8em 1em; vertical-align:top; *zoom:1; *display:inline;}
.btn a img{display:block;}

.bookGroup{width:98%; max-width:1100px; margin:10px auto 0; display:table; table-layout:fixed; border-spacing:50px;}
.row{display:table-row;}
.bookGroup .cell{display:table-cell; vertical-align:top; background:#fff; position:relative; border:6px solid #ccc; padding:50px 0 90px; box-sizing:border-box; font-family: 'Nanum Gothic', sans-serif;}
.bookGroup .cell img{display:block;}
.bookGroup .cell.best{border:6px solid #df398f;}
.bookGroup .cell h4{position:absolute; top:-66px; left:50%; margin:0 0 0 -143px;}
.img_best{position:absolute; top:auto; bottom:-30px; left:-150px;}
.bookImg{text-align:center;}
.bookImg img{width:auto; max-width:180px; height:auto; border:1px solid #ccc; margin:0 auto;}
.bookGroup .cell h6{color:#444; font-size:1.665em; line-height:120%; font-weight:bold; padding:25px 1em 20px; word-wrap:break-word;}
.bookGroup .txt{width:68%; margin:0 auto; font-size:1.125em; color:#777; line-height:150%; text-align:left; padding:0 0 30px; font-family: 'Nanum Gothic', sans-serif;}
.bookGroup a.more{display:block; width:68%; height:58px; border:1px solid #ccc; margin:0 auto; background:url(https://englishbus.co.kr/bnav/img/sub/btn_more.png) no-repeat center; position:absolute; left:50%; bottom:25px; margin-left:-34%;}

.recommGroup{width:98%; max-width:1000px; margin:0 auto 30px; display:table; table-layout:fixed; border:1px solid #ccc; background:#fff; padding:10px 0;}
.recommGroup .cell{display:table-cell; vertical-align:top; text-align:left; padding:15px 30px; position:relative; box-sizing:border-box; font-family: 'Nanum Gothic', sans-serif;}
.recommGroup .cell h6{font-family: 'Noto Sans KR', sans-serif; font-size:1.65em; color:#444; padding:2px 0 15px 31px;}
.recommGroup .cell h6 strong{font-weight:500; color:#2e9dd9;}
.recommGroup .bookImg img{max-width:100px; max-height:100px; float:left;}
.with_txt{float:left; padding:0 0 0 20px; width:72%; height:100px; position:relative;}
.with_txt p{font-family: 'Nanum Gothic', sans-serif; color:#111; font-size:1.085em; padding:4px 0 0; font-weight:bold; line-height: 1.225em; height: 3.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.cell.with h6{background:url(https://englishbus.co.kr/bnav/img/sub/ico_with.png) no-repeat 0 0;}
.cell.with .more img{display:block; width:auto; height:34px; position:absolute; left:20px; bottom:0;}
.cell.tip{border-left:1px dashed #ccc;} 
.cell.tip div{font-family: 'Nanum Gothic', sans-serif;}
.cell.tip h6{background:url(https://englishbus.co.kr/bnav/img/sub/ico_tip.png) no-repeat 0 0;}

/*footer*/
.footer{width:100%; height:40px; line-height:39px; text-align:right; background:#ccc; padding:0 1.5em 0 0; box-sizing:border-box; position:absolute; bottom:0;}
.footer p{font-size:0.825em;}
.key_logo{display:block; position:absolute; left:1.5em; top:50%; margin-top:-10px;}

@media all and (orientation:landscape){
	.land{display:block; width:100%; max-width:1980px; height:100%; margin:0 auto; background:#2e9dd9 url(https://englishbus.co.kr/bnav/img/main/pc_bg.png) no-repeat center 0; background-size:cover; position:relative;}
	.land img{display:block; margin:0 auto;}
	.land h1{padding:1.5em 0 1em; width:40%; margin:0 auto; text-align:center;}
	.land h1 img{width:100%; max-width:724px;} 
	.land a{display:block; margin:0 auto; width:100%; max-width:430px;}
	.land a img{width:100%;} 
	.land > p{width:100%; height:40px; line-height:40px; text-align:right; position:absolute; bottom:0; font-size:0.825em; padding:0 1.5em 0 0; box-sizing:border-box;}
	.land .big{display:block;}
	.land .small{display:none;}
	.port{display:none;}
}

@media all and (orientation:portrait){
	.land{display:none;}
	.port{display:block; width:100%; height:100%; padding:0 0 5% 0; background:#f3d950 url(https://englishbus.co.kr/bnav/img/main/m_bg.png) no-repeat center -10px; background-size:100% auto; box-sizing:border-box;}
	.port > p{width:100%; height:28px; line-height:28px; text-align:center; position:absolute; bottom:0; font-size:0.70em; box-sizing:border-box;}
	.port img{display:block; margin:0 auto;}
	.port h1{padding:0.8em 0 0.4em; width:66%; margin:0 auto; text-align:center;}
	.port h1 img{width:100%; max-width:480px;} 
	.port a{display:block; margin:0 auto; width:54%; min-width:160px; max-width:360px;}
	.port a img{width:100%;} 
}

@media all and (min-width:768px) and (orientation:portrait){
	.port{background:#2e9dd9 url(https://englishbus.co.kr/bnav/img/main/t_bg.png) no-repeat center 0; background-size:cover;}
}

@media all and (max-width:1024px){
	.land h1{padding:0.5em 0; width:40%; min-width:260px;}
	.land > p{ height:30px; line-height:30px;}
	.land a{width:28%; min-width:200px;}
	.land .big{display:none;}
	.land .small{display:block;}
	
	/*header*/
	.header{height:140px;}
	.top{height:100px;}
	.logo img{width:auto; height:50px; margin:-25px 0 0;}
	.page_nav{height:40px;}
	.smap li{font-size:1.025em; line-height:40px; padding:0 26px 0 8px; background-size:auto 44%;}
	li.home{padding:0;}
	.home a{width:40px; height:40px;}
	
	/*container*/
	.container{top:140px; bottom:30px;}
	.step1 li{width:200px; height:200px; margin:0 0.6em 2em;}
	.step1 a > em{font-size:2.0em; bottom:40px;}
	
	.step2 li{background-size:auto 50%; background-position: center 15px; height:160px;}
	.step2 li a{font-size:2.0em;}
	.step2 li a em{ bottom:25px;}
	
	.bookImg img{width:auto; max-width:220px; height:auto;}
	.bookGroup .cell h6{width:90%; margin:0 auto;}
	.img_best{position:absolute; top:auto; bottom:-15px; left:-80px; width:120px;}
	.bookGroup a.more{background-size:80% auto;}
	.with_txt{float:left; padding:0 0 0 15px; width:64%; height:auto; position:relative;}
	.with_txt p{line-height: 1.225em; height:auto; overflow:inherit; text-overflow:clip; display:block;}
	.cell.with .more img{position:static; width:100%; height:auto; max-width:169px; margin-top:10px;}
	
	/*footer*/
	.footer{width:100%; height:30px; line-height:30px; text-align:right; background:#ccc; padding:0 1.5em 0 0; box-sizing:border-box; position:absolute; bottom:0;}
	.footer p{font-size:0.765em;}
	.key_logo{display:block; width:auto; height:18px; position:absolute; left:1.5em; top:50%; margin-top:-9px;}
}

@media all and (max-width:812px){
	.pc{display:none !important;}
	.mo{display:block !important;}

	.header{width:100%; height:110px;}
	.top{height:70px;}
	.logo img{width:auto; height:36px; left:0.5em; margin:-18px 0 0;}
	.page_nav{height:40px;} 
	.smap li{font-size:0.975em; padding:0 20px 0 5px; background-size:auto 44%;}
	.self_close{display:block; width:auto; height:40px; position:absolute; right:1.0em; top:50%; margin:-20px 0 0;}
	
	.container{position:relative; top:0; bottom:auto; min-height:500px; padding:110px 1em 0;}
	.wrap{padding:1.5em 0 1em; text-align:center;}
	.wrap h2{margin:0 auto 1.0em;}
	.wrap h2 img{display:block; width:70%; max-width:560px; margin:0 auto;}
	.step1{width:96%;}
	.step1 li{float:none; width:100%; height:60px; line-height:58px; margin:0 auto 0.6em; background-position:1.5em center; background-size:auto 60% !important;}
	.step1 li a{background:url(https://englishbus.co.kr/bnav/img/sub/mstep.png) no-repeat right center; background-size:contain;}
	.step1 li.on{border:3px solid #faa731; background-position:1.5em center;}
	.step1 li.on a{background-image:url(https://englishbus.co.kr/bnav/img/sub/mstep_on.png);}
	.step1 a > em{font-size:1.95em; width:auto; padding-left:80px; position:static; text-align:left;}
	
	.step3{width:96%; max-width:640px; margin:0 auto 20px; text-align:left;}
	.step3 a{font-size:2.00em; background-size:auto 90%;}
	.step3 a em{display:block; padding:43px 0 43px 100px;}
	.step3_1 em{background:url(https://englishbus.co.kr/bnav/img/sub/step3_1.png) no-repeat 20px center; background-size:auto 68%;}
	.step3_2 em{background:url(https://englishbus.co.kr/bnav/img/sub/step3_2.png) no-repeat 20px center; background-size:auto 68%;}
	.step3_3 em{background:url(https://englishbus.co.kr/bnav/img/sub/step3_3.png) no-repeat 20px center; background-size:auto 68%;}
	.step3 li.on a{background-size:auto 90%;}
	
	.btn{padding:2em 0 1em;}
	.btn a{margin:0 5px;}
	.btn a img{display:block; width:145px;}
	
	.bookGroup{width:98%; max-width:800px; margin:40px auto 0; display:table; table-layout:fixed; border-spacing:15px;}
	.bookGroup .cell h4{position:absolute; top:-55px; left:50%; margin:0 0 0 -115px;}
	.bookGroup .cell h4 img{width:230px;}
	.bookImg img{width:auto; max-width:160px; height:auto; border:1px solid #ccc; margin:0 auto;}
	.img_best{position:absolute; width:auto; height:100px; top:auto; bottom:-10px; left:-40px;}
	.bookGroup .cell h6{color:#444; font-size:1.55em; line-height:120%; font-weight:bold; padding:25px 0 20px;}
	.bookGroup .txt{width:80%; margin:0 auto; font-size:1.125em; color:#777; line-height:150%; padding:0 0 30px;}
	.bookGroup a.more{height:48px; background-size:80% auto;}
	
	.recommGroup{width:98%; max-width:740px; margin:0 auto 30px; display:table; table-layout:fixed; border:1px solid #ccc; background:#fff; padding:10px 0;}
	.recommGroup .bookImg img{max-width:80px; height:auto; float:left;}
	.with_txt{float:left; padding:0 0 0 20px; width:55%;}
	
	.footer{text-align:center; position:relative;}
	.key_logo{display:none;}
}
@media all and (max-width:640px){
	.step3{margin-bottom:10px;}
	.step3 a{font-size:1.85em; line-height:120%;}
	.step3 a em{padding:30px 0 30px 75px;}
	.step3_1 em{background-size:auto 55%;}
	.step3_2 em{background-size:auto 55%;}
	.step3_3 em{background-size:auto 55%;}
	
	.bookGroup .cell h6{font-size:1.35em;}
	.recommGroup{width:96%; max-width:480px; margin:20px auto 0; display:block; border-spacing:0;}
	.recommGroup .cell{display:block; width:94%; margin:0 auto; padding:15px;}
	.cell.with{padding-bottom:20px;}
	.cell.with:after{content:''; display:block; clear:both;}
	.with_txt{width:70%;}
	.cell.tip{border-left:0; padding-top:20px;}
	.cell.tip{border-top:1px dashed #ccc; border-left:0;} 
}

@media all and (max-width:580px){	
	.bookGroup{width:96%; max-width:480px; margin:10px auto 0; display:block; border-spacing:0;}
	.row{display:block;}
	.bookGroup .cell{display:block; margin:60px auto 30px;}
	.bookGroup .cell h6{font-size:1.35em; padding-bottom:15px;}
	.bookGroup .txt{width:78%; margin:0 auto; font-size:1.0em; color:#777; line-height:150%; padding:0 0 30px;}
	.bookGroup a.more{width:60%; height:48px; background-size:82% auto; margin-left:-30%;}
}

@media all and (max-width:420px){
	.wrap h2 img{display:block; width:90%; max-width:560px; margin:0 auto;}
	.step1 a > em{font-size:1.65em;}
	.step2 li{width:45%; min-width:150px; height:120px; margin:0 5px 15px; background-position:center 12px; background-size:auto 50px;}
	.step2 li a{font-size:1.85em;}
	.step2 li a em{bottom:17px;}
	.step2 li.on{background-size:auto 50px;}
	.step3 a{font-size:1.685em; background:none;}
	.step3 li.on a{background:none;}
	
	.bookGroup .cell{display:block; margin:30px auto 50px;}
	.cell.best{margin-top:45px;}
	.img_best{position:absolute; width:auto; height:90px; top:auto; bottom:-15px; left:-25px;}
	.recommGroup .bookImg{float:none;}
	.recommGroup .bookImg img{margin:0 auto; width:auto; max-width:100%; height:100px; float:none;}
	.with_txt{width:100%; padding:5px 0 0; text-align:center;}
	.cell.with .more img{margin:10px auto 5px;}
}

@media all and (max-width:320px){
	.logo img{width:auto; height:30px; left:0.5em; margin:-15px 0 0;}
	.btn a img{display:block; width:120px;}
	.step3 a{font-size:1.15em; line-height:120%; background:none;}
}