@charset "utf-8";

/*
================================================================================
공통 콘텐츠
================================================================================
*/
h1.title{ margin-bottom:15px;font-size:42px;line-height:42px;color:#26282c;font-weight:500;text-align: center;}
h1.title span{ font-size:0.45em; display: inline-block;padding:0 0 0px 20px; letter-spacing: -0.05em; position:relative; vertical-align: middle;}

#cont1, #cont2{ position:relative;}
#cont1 .btn_top, #cont2 .btn_top, #cont3 .btn_top { position:absolute; right:0;}
#cont1 .btn_top a, #cont2 .btn_top a, #cont3 .btn_top a{display:block;width:40px;height:40px; border-radius:50%;background:#666 url('../img/common/btn_top2.png') no-repeat center 8px; color:#fff; font-size:8px; text-align:center; padding-top:15px; box-sizing:border-box;}
#cont1 .btn_top a:hover, #cont2 .btn_top a:hover, #cont3 .btn_top a:hover { background-color:#444; transition: all 0.5s;}
.conBox{padding-top: 50px;}
@media all and (max-width:500px){
#cont1 .btn_top a, #cont2 .btn_top a, #cont3 .btn_top a{ width:30px; height:30px; text-indent:-5000px; font-size:0; background:#666 url('../img/common/btn_top2.png') no-repeat center center;}
}


/* common */
.content_text a[href*="http"],
.content_text a[target="_blank"],
.content_text a[title*="새 창"],
.content_text a[title*="팝업"] {position:relative; padding-right:23px; color:#000 }
.content_text a[href*="http"]:after,
.content_text a[target="_blank"]:after,
.content_text a[title*="새 창"]:after,
.content_text a[title*="팝업"]:after { content: ""; display: block; position: absolute; top: 50%; right: 10px; margin-top: -7px; width: 25px; height: 20px; background:url(../img/common/ic_blank.png) no-repeat right 0; vertical-align: middle; }
.no_data { padding:30px 0 !important ; text-align:center !important;}

.content_text .conL, .content_text .conR{ box-sizing:border-box;}
.content_text .conL{ float: left; width: 48%; }
.content_text .conR{ float: right; width: 48%;}

.lineBox{ border:1px solid #ededed; }
.img_box,
.img_wrap,
.line_box { border:1px solid #d9d9d9; padding:70px; margin:0 0 10px 0; box-sizing:border-box; overflow:hidden;}
.noticeBox{ border:1px solid #d9d9d9; padding:30px; margin:0 0 40px 0; box-sizing:border-box; overflow:hidden;}
.noticeBox p{ font-size:16px; text-align:center;}
@media all and (max-width:1100px){	
h1.title{font-size:38px; line-height:38px;}
.line_box{ padding:40px}
}
@media all and (max-width:768px){
h1.title{font-size:34px; line-height:34px; margin-bottom:10px;}
}
@media all and (max-width:500px){	
h1.title{font-size:30px; line-height:30px;}
.line_box,
.noticeBox{ padding:25px}
.noticeBox p{ font-size:14px; text-align:left;}
}
.img_wrap img {width: 100%; }
.img_wrap span { display:block; padding:10px 10px 0; font-size:12px; line-height:18px; color:#777}
.imgBox img{ text-align:center;}
.conImg { max-width:820px; text-align:center; position:relative;}
.conImg img{}
.imgBox{ border:1px solid #e9e9e9; text-align:center; padding:30px;}

.txtBox { display: block; overflow:hidden; }


/* table */
.tableData { width:100%;*border-collapse: collapse;border-spacing: 0;border-bottom:1px solid #003756;border-top:2px solid #003756;table-layout:fixed;font-size:13px;}
.tableData thead th {padding:10px 5px; text-align:center;background-color:#f7f7f7;font-weight:bold;color:#333; font-size:14px;}
.tableData tbody th {background:#fff url(../img/common/bg_dot_gray_4_1_c8.gif) repeat-x 0 0; color:#003756; font-weight:bold;padding: 10px 5px; text-align:center; }
.tableData tbody th.f {background-image:none;}
.tableData tbody td { color:#666;text-align:center; padding: 10px 5px;background:#fff url(../img/common/bg_dot_gray_4_1_c8.gif) repeat-x 0 0;}
.tableData tbody td.f {background-image:none;}
.tableData tbody td.l {padding-left:10px;text-align:left;}
.tableData td.borL{border-left: 1px solid #535353 !important;}
.tableData .scrollBox{ max-height:300px; overflow-y:scroll; box-sizing:border-box;}
.tableData tbody td li{ margin-left:0; padding-bottom:0;}
.tableData tbody tr:nth-child(1) th,
.tableData tbody tr:nth-child(1) td{ background-image:none;}

.tableData2 { width:100%;*border-collapse: collapse;border-spacing: 0;border-top:2px solid #ededed;border-bottom:1px solid #ededed;table-layout:fixed;font-size:13px;}
.tableData2 thead th {padding:10px 5px; text-align:center;background-color:#ededed;font-weight:bold;color:#434343; font-size:14px;border-left: 1px solid #fff;}
.tableData2 tbody th {background:#f7f7f7 url(../img/common/bg_dot_gray_4_1_c8.gif) repeat-x 0 0; color:#89ba43; font-weight:bold;padding: 10px 5px; text-align:center; }
.tableData2 tbody th.f {background-image:none;}
.tableData2 tbody td { color:#666;text-align:center; padding: 10px 5px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;}

.tableData2 tbody td.f {background-image:none;}
.tableData2 tbody td.l {padding-left:10px;text-align:left;}
.tableData2 th.borL,
.tableData2 td.borL{border-left: 1px solid #ddd !important;}
.tableData2 th.borR,
.tableData2 td.borR{border-right: 1px solid #ddd !important;}
.tableData2 th.borB,
.tableData2 td.borB{border-bottom: 1px solid #b9d690 !important;}
.tableData2 tbody td li{ margin-left:0; padding-bottom:0;}
.tableData2 tbody tr:nth-child(1) th,
.tableData2 tbody tr:nth-child(1) td{ background-image:none;}
.tableData2 thead th:first-child,
.tableData2 tbody td:first-child{border-left:none;}

/*
================================================================================
서브콘텐츠
================================================================================
*/

aside{ width:100%; background:#a5a5a5; height:55px; position:relative;}
aside #subnav{ clear:both; position:relative;}
#subnav ul{ margin:0 auto; max-width:1100px; text-align:center;}
#subnav li{ width:25%; text-align:center; display:block; float:left; box-sizing:border-box; }
#subnav li > a{display:block;position:relative; color:#fff; text-decoration:none;font-size:17px; line-height:55px;border-right:1px solid #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#subnav li > a:hover,
#subnav li > a.on{color:#34366a; position:relative; font-weight:bold; background:#fff;border-right:1px solid #a5a5a5}
#subnav li:first-child a,
#subnav li:first-child a:hover{font-weight:bold; background:#de3d3a; color:#fff; border-right:1px solid #de3d3a;}

@media all and (max-width:1100px) {
aside{  background:#a5a5a5; height:50px;}
aside #subnav{max-width:768px; margin:0 auto;}
#subnav li > a{ line-height:50px; font-size:16px;}
}

@media all and (max-width:768px) {
aside{ display:none;}	
}


#subnav.sub01 li{ width:10%;}
#subnav.sub02 li{ width:10%;}
#subnav.sub03 li{ width:13%;}
#subnav.sub04 li{ width:10%;}


#visual { height:240px; position:relative; overflow:hidden; background:#f5bb4d url(../img/01_intro/top_visual.jpg) no-repeat 50% 0;}
#visual h2{ display:block;font-size: 45px;color:#fff;line-height: 45px;font-weight: 100;padding-top: 80px; text-transform: uppercase; text-align:center; /*font-family: 'Montserrat Hairline'; letter-spacing:-0.05em;*/padding-right:400px;text-shadow:1px 1px 1px rgba(1, 2, 3, 0.5)}
#visual h2 span{ font-size: 22px;font-weight: 100;display:block; letter-spacing:0;}


#visual.sub01 { background:#1c2043 url(../img/01_intro/top_visual.jpg) no-repeat 50% 0;}
#visual.sub02 { background:#133d57 url(../img/02_business/top_visual.jpg) no-repeat 50% 0;}
#visual.sub03 { background:#1d1424 url(../img/03_results/top_visual.jpg) no-repeat 50% 0;}
#visual.sub04 { background:#1d2e39 url(../img/04_community/top_visual.jpg) no-repeat 50% 0;}
#visual.sub03  h2{}

@media all and (max-width:1100px) {
#visual.sub01,
#visual.sub02,
#visual.sub03,
#visual.sub04{ height:200px; background-size: cover; background-position-y:0px;}	
#visual.sub01 h2,
#visual.sub02 h2,
#visual.sub03 h2,
#visual.sub04 h2{padding-top: 65px; padding-right:0; padding-left:50px; font-size:40px; line-height:40px;}
#visual h2 span{ font-size:20px;}
}
@media all and (max-width:768px) {
#visual.sub01,
#visual.sub02,
#visual.sub03,
#visual.sub04{ height:200px; background-size: cover; background-position-y:65px;}

#visual.sub01 h2,
#visual.sub02 h2,
#visual.sub03 h2,
#visual.sub04 h2{ padding-top:102px; padding-right:0; text-align:left; font-size:35px; line-height:35px; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}
#visual h2 span{ font-size:18px;}
}

@media all and (max-width:500px) {
#visual.sub01,
#visual.sub02,
#visual.sub03,
#visual.sub04{ background-position-x:55%; background-position-y:65px;}
	
#visual.sub01 h2,
#visual.sub02 h2,
#visual.sub03 h2,
#visual.sub04 h2{ font-size:30px; line-height:30px; padding-top:110px; padding-left:20px; font-weight: 600;}
#visual h2 span{ font-size:16px; font-weight: 600;}
}

.title_head{ margin-bottom:25px;}
.title_head p{ text-align:center;}
.bTitle{ color:#34366a; font-size:26px; line-height:28px;}
.bTitle em{ color:#de3d3a; font-weight:100;}
.smTitle{ color:#707070;font-size:22px; line-height:24px;}

@media all and (max-width:1100px){	

}

@media all and (max-width:768px){	
.title_head{ margin-bottom:20px;}
.bTitle{font-size:24px; line-height:26px;}
.smTitle{font-size:20px; line-height:22px;}
}

@media all and (max-width:500px){	
.bTitle{font-size:22px; line-height:24px;}
.smTitle{font-size:18px; line-height:20px;}
}

/***** 01_intro *****/
/* p01 */
.intro {overflow:hidden;;}
.intro .line_box{ background:url(../img/01_intro/01_imgBg.jpg) no-repeat 110% 100%; position:relative; padding: 50px 60px 85px 60px;}
.intro .line_box p{ width:51%; font-size:16px;}
.intro .line_box p.sign{ width:45%; color:#333; font-size:15px; text-align:right; position:absolute; bottom:40px;}

@media all and (max-width:1100px){	
.intro .line_box p,
.intro .line_box p.sign{ width:auto;}
.intro .line_box{ background:url(../img/01_intro/01_imgBg.jpg) no-repeat center 0; padding:380px 50px 40px 50px;}
.intro .line_box p.sign{ position:relative; bottom:0;}
}

@media all and (max-width:500px){	
.intro .line_box p{ font-size:14px;}
.intro .line_box {background-size: 350px; padding: 230px 30px 30px 30px;}

}
/* p02 */
.history .line_box{ background:url(../img/01_intro/02_imgBg.jpg) no-repeat 96% 0; position:relative;}
.history p.year_tit {font-size:30px; color:#707070; display:block; font-weight:700; margin-bottom:50px;}
.history dl{ width:50%;}
.history dt {position:relative; font-size:26px; float:left; color:#333; display:none;}
.history dd{ display:block; border-bottom:1px solid #e2e2e0;margin-bottom: 20px; padding-bottom: 10px;}
.history dd li { line-height:20px;padding-bottom:12px; padding-left:80px;overflow:hidden; font-size:18px; letter-spacing: -0.04em; color:#222836; position:relative;}
.history dd li span{ position:absolute; left:0; display:block; font-size:17px; margin:0 20px 0 0; font-weight: 700; color:#34366a;font-family: 'Montserrat'; width:67px; text-align:right;}
.history dd li span.long{ width:73px;}

@media all and (max-width:1100px){	
.history dl{ width:65%;}
.history .line_box {background-size: 250px; background-position-x:99%; }
}

@media all and (max-width:768px){
.history dl{ width:auto;}	
.history .line_box { background-position-x:50%; padding-top:300px;}	
.history p.year_tit{ margin-bottom:30px; font-size:24px; text-align:center;}
.history dd li span{ font-size:15px; width:59px;}
.history dd li{ padding-bottom:7px; padding-left:70px;}
.history dd{ padding-bottom:7px; margin-bottom:15px;}

.history dd li span.long{ width:64px;}
}

/* p03 */
.mapCon01{ margin-bottom:60px;}
.map #map_view{position:relative; margin:0 0 10px 0; border:1px solid #d8d8d8; height:350px }
.map iframe { position:relative; margin-bottom:10px; overflow:hidden; background-color:#eee}
.mapBox{ padding:30px 70px; border:1px solid #d9d9d9; margin-bottom:25px; overflow:hidden;}
.mapBox h3{ float:left; padding-right:40px; font-size:28px;line-height: inherit; margin:0}
.mapBox li{color:#222836; font-size:18px;}
.mapBox  ul{ float:right; width:67%;}
.btn_map {position:relative; margin-bottom:45px;}
.btn_map a{ display:block; box-sizing:border-box; width:200px; float:right; margin-left:10px; padding:5px 15px; border:1px solid #ddd; border-radius:3px; text-indent:-5000px;}
.btn_map .naver{ background:url(../img/01_intro/map_naver.gif) no-repeat 50% 50%;}
.btn_map .daum{background:url(../img/01_intro/map_daum.gif) no-repeat 50% 50%;}
.btn_map .google{background:url(../img/01_intro/map_google.gif) no-repeat 50% 50%;}
/******daumMap*******/
.btn_skip {font-size:0; position: relative;}
.btn_skip a {position:absolute; display:block; width:100%; left:0; text-align:center; top:-10000px; z-index:500; font-size:12px; color:#fff }
.btn_skip a:hover, 
.btn_skip a:focus, 
.btn_skip a:active{position: absolute; top: 0; padding: 10px 0;  background:#2349B4; z-index:500}
#map {position:relative; overflow: hidden; width:100%;height:320px;background-color: #eee; margin-bottom: 20px}
#map:after{content:'';display:inline-block;width:380px;height:320px;/* float:right; */background:#fff url('../img/01_intro/map_bg01.jpg') no-repeat center 0;position: absolute;right: 0px;z-index:999;border-left:1px solid #fff;}
#map .root_daum_roughmap{width: 720px;float: left;}
#map .root_daum_roughmap .wrap_map{height: 288px;}
#map2.map:after{background:#fff url('../img/01_intro/map_bg02.jpg')no-repeat center 0; }

.customoverlay {position:relative;bottom:130px; left:0px; border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay .title {display:block;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background:#fff;padding:10px 15px;}
.customoverlay .title:before{ content:""; width:75px; height:35px; background:url(../img/common/ci.png) no-repeat; display: block; margin: 0 auto; background-size:contain;}
.customoverlay .title:after{content:"";width:25px;height:8px;display: block;position:absolute;bottom: -8px;left: 53px;margin: 0 auto;background: url(../img/common/bul/ico_downarrow.png);}
.customoverlay.academy .title:after{ left:65px;}

@media all and (max-width:1100px){	
.mapCon01{ margin-bottom:50px;}
.mapBox  ul{ float:right; width:50%;}
.mapBox{padding:30px 60px;}
.mapBox h3{ font-size:26px;}
#map .root_daum_roughmap{ width:60%}
#map:after{ width:40%;}
}
@media all and (max-width:768px){
.mapCon01{ margin-bottom:35px;}	
.mapBox{ margin-bottom:15px;}	
.mapBox h3{ float:none; padding-right:0; text-align:center; margin-bottom:10px;}	
.mapBox  ul{ float:none; width:auto; text-align:center;}
.mapBox li{ font-size:16px;}	
.mapBox{padding:30px;}	
.mapBox h3{ font-size:24px;}
.btn_map{ text-align:center;}
.btn_map a{ width:30%; margin:0; float:none; display: inline-block;}
#map {height: 300px; margin-bottom:10px;}
#map .root_daum_roughmap{ width:100%}
#map .root_daum_roughmap .wrap_map{ height:268px;}
#map:after{ display:none;}
}
@media all and (max-width:500px){
.mapBox{padding:25px; margin-bottom:10px;}		
.mapBox h3{ font-size:22px;}
.mapBox li{ font-size:14px;}
.btn_map a:after{ display:none !important; }
.btn_map .naver,
.btn_map .daum,
.btn_map .google{ background-size:80px;}
#map {height: 270px;}
}

/***** 02_business *****/
/* p01 */
.proBox { padding:0 0px 5px 0px;}
.proBox p{ position:relative;  font-size:17px; line-height:1.5;}
.proBox div.conR{ margin-top:35px;}
.proBox div.conL img{display:block; margin:0 auto;}
.proBox .title{ color:#34366a; font-size:28px; display:block; margin-bottom:20px;}
.proBox a.btn_down{ display:block; padding:0 40px; height:40px; line-height:40px; color:#fff; width:200px; box-sizing:border-box; background:#de3d3a url(../img/02_business/ico_down.png) no-repeat 80% 50%; font-size:15px; margin-top:30px;}
.proBox a.btn_down:hover{ background-color:#bb201d;  transition: all 0.3s;}

.pro .tab_content{border:1px solid #d9d9d9;padding:30px 50px 50px 50px;margin:-1px 0px 0 -1px;/* height:300px; */min-height: 300px;}
.pro .tab_content > div{display:table}
.pro .tab_content .content_text{ margin-bottom:0;}
.pro .tab_content div {display:table-cell;vertical-align:middle;float:none;width: 100%;}
.pro .tab_content .conL{width:50%;padding-right:40px;}
.pro .tab_content .conR{width:auto;max-width: 50%;}
.pro .tab_content .conR img,
.pro .tab_content .conL img{ display:block; margin:0 auto;}
.pro .tab_content p{ font-size:17px; line-height:1.7;}
.pro .tab_content .conL ul.list{ width:600px}
.pro .tab_content .list li{ position:relative; font-size:17px; margin-bottom:10px; padding-left:15px;}
.pro .tab_content .list li:before{ content:""; width:4px; height:5px; background:#4f556e; position:absolute; left:0; top:10px;}

.proList{text-align:center;width: 1000px;}
.proList li{width: 24.7%;display:inline-block;box-sizing:border-box; vertical-align:top;}
.proList li strong{font-size:20px;color:#434343;text-transform:uppercase;display:block;margin-bottom: 5px;}
.proList li p{text-align:center;}
.proList li .pic{display:block;border-radius:50%;border:5px solid #de3d3a;width: 180px;height: 180px;overflow:hidden;margin: 10px auto;}
.proList li .pic img{ width:100%}
.proList li p.txt{line-height:1.6;font-size: 14px;text-align:left;display: block;padding: 0 10px;}
.proList li a.btn_more{ display:block; color:#fff; padding:0px; height:35px; line-height:35px; width:130px; background:#929196; margin:0 auto;}
.proList li a.btn_more:hover{ background:#727179;}

/* down_box */
.down_box{display: flex !important;flex-wrap: wrap;gap: 5px;background:#fdfdfd;border: 1px solid #ccc;overflow:hidden;padding:25px 20px;color: #111;box-sizing: border-box;}
.down_box a{display:block;margin-bottom: 5px;position: relative;padding-left:30px;text-align: left;width: 100%;flex: 1 1 25%;}
.down_box .button{display:inline-block}
.down_box .button:before{ display: none;}
.down_box a:last-child{ margin-bottom: 0;}
.down_box a:before{content:'';width:20px;height: 21px;background: url('../img/common/icons_file.png?v') no-repeat 0 0;position: absolute;left: 0;top:0}
.down_box a.pdf:before{ background-position: 0 0; }
.down_box a.han:before{ background-position: -100px 0; }
.down_box a.excel:before{ background-position: -200px 0; }
.down_box a.img:before{ background-position: -300px 0; }
.down_box a.zip:before{ background-position: -400px 0; }
.down_box a.power:before{ background-position: -500px 0; }
.down_box a.word:before{ background-position: -600px 0; }
.down_box a.mp4:before{ background-position: -700px 0; }
@media only screen and (max-width:768px){
	.down_box{ padding:20px;}
	.down_box a{ flex:1 1 50%}
	.down_box p,
	.down_box .button{float: none !important;}
	.down_box .button{ margin-top: 5px;}
}

@media all and (max-width:1100px){
	.proBox{ padding:0 0 35px 0;}
	.proBox .title{ font-size:25px;}
	.proBox div.conL img{ width:100%; max-width:510px;}
	.pro .tab_content{ margin: -1px 0px 0 -1px; padding:40px;}	
	.proBox div.conR{ margin-top:0px;}
	.history dd li,
	.mapBox li,
	.pro .tab_content .list li,
	.proBox p,
	.pro .tab_content p{ font-size:16px;}
	
	.proList{ width: 688px;}
	.proList li{width: 24.6%;}
	.proList li .pic{ width:150px; height:150px;}
	.proList li strong{ font-size:18px;}
	.pro .tab_content .conR img, .pro .tab_content .conL img{ width:100%;}
	.pro .tab_content{ height:auto;}
	.pro .tab_content .conL ul.list{ width:auto}
}

@media all and (max-width:768px) {
	.proBox{ padding:0 0 0px 0;}
	.proBox .title{ font-size:20px;}
	.proBox div.conL img{ width:100%; max-width:510px;}
	.pro .tab_content{ padding:30px;}
	.pro .tab_content .list li{ padding-left:12px; margin-bottom:7px;}
	.pro .tab_content .list li:before{ content:""; width:3px; height:4px;}
	
	.history dd li,
	.mapBox li,
	.pro .tab_content .list li,
	.proBox p,
	.pro .tab_content p{ font-size:14px;}
	.proList{ width:auto; padding-top:0px;}
	.proList li p.txt{ font-size:13px;}
	.proList li .pic{width: 160px;height: 160px;margin-bottom: 5px;}
	.proList li strong{font-size: 17px;}
	.proBox a.btn_down{ width:160px; font-size:13px;padding: 0 25px;}
	.proList li a.btn_more{ width:100px;}
	.proList li{ width:45%;}
	.proList li:nth-child(1),
	.proList li:nth-child(2){margin-bottom: 30px;}
	.pro .tab_content .conL .btn_area{ padding:0 0 10px 0;}
}
@media all and (max-width:500px) {
	.pro .tab_content  div { display:block;vertical-align:middle; float:none;}
	.proBox div.conL,
	.proBox div.conR,
	.pro .tab_content .conL,
	.pro .tab_content .conR{float:none;width: auto;max-width: inherit;}
	.pro .tab_content .conL{ margin-bottom:20px; padding-right:0;}
	.proList li strong {  font-size: 16px;}	
	.proList li .pic{ width:120px; height:120px;}
	.proList li{ width:49%;}
	.proList li:nth-child(1),
	.proList li:nth-child(2){margin-bottom:40px;}	
}
@media all and (max-width:360px) {
	.proList li .pic{ width:100px; height:100px;}
}

/***** 04_community *****/
/* p02 */
.certificate{overflow:hidden; text-align:center;}
.certificate li {display:inline-block;width: 21.7%;margin: 0 1.5%;overflow:hidden;box-sizing:border-box;}
.certificate li span,
.certificate li strong,
.certificate li i { display:block; }
.certificate li p.ImgBox {border:1px solid #ddd;padding: 8px;margin:0 10px 20px 10px;display:block;box-sizing:border-box;box-shadow: 0px 1px 15px #c4c4c4;}
.certificate li p.ImgBox img { width:100%}
.certificate li p.txt {margin-bottom: 10px;color:#333;font-size:0.9em;height:60px;text-align:center;line-height:1.6;}
.certificate li p.txt strong{ font-size:1.1em;}

@media all and (max-width: 1100px){
.certificate li{margin: 0 2%;}	
.certificate li p.ImgBox{ box-shadow:none; margin:0 0px 10px 0px; padding:5px;}	
}

@media all and (max-width: 768px){
	
.certificate li {width:33%;}	
}
@media all and (max-width: 500px){
.certificate li { width:45%; float: left;}
}
/***** guide *****/
.guide .scrollArea{width:auto; padding:5px 10px; overflow-y:auto;}
.guide .scrollArea h4 {font-size:16px; color:#2c3b7a; margin:30px 0 15px; font-weight:700}
.guide h4:first-child {margin:0px 0 15px;}
.guide h5 {font-size:13px; color:#444; margin:20px 0 5px; font-weight:700}
.guide h4.mgt0 { margin-top:0}
.guide p {line-height:22px;color:#808080; padding:0;}
.guide ul {line-height:22px;color:#808080; padding:0 0 5px 0;}
.guide ul ul { padding-left:10px}
.guide li { margin-bottom:2px}
.guide dl{line-height:22px}
.guide dl dt{font-weight:bold;color:#434343;}
.guide dl dd{color:#808080; padding:10px 0 30px 0;}
.guide {padding:0 0 30px 0; color:#808080; line-height:22px; font-size:14px;}
.guide strong{color:#d25252;}
.guide.bgemail { background:url(../img/lpop/bg_email.gif) no-repeat 100% 0 }
.guide .email {padding:0 180px 10px 0;}

.guide ul.emailList { font-size:13px; margin:20px 0; line-height:1.4}
.guide ul.emailList li { background:url(../img/lpop/bulletList.gif) no-repeat 0 7px ; padding:0 0 0 10px; margin:3px 0}
.guide .box{ clear:both;background-color:#f6f6f6; padding:10px; color:#a06161}