@charset "utf-8";

@media (max-width:767px) { /* 최소 ~ 최대 767 */
.mview,  .mviewC {display:block !important;}
.wview,  .wviewC {display:none !important;}
.mviewT {display:table !important;}
.wviewT {display:none !important;}

#lnbWrap, .footlogo, .utilWrap, .fontOption, .search, .location, #relatesite,
#gnb {display:none;}
#headerTop{background:none; position:absolute;}
#header { height:47px; }
.allnavi, .h3titleline, .gnb2box.on  {display:block !important;}


#header h1 {float:left; margin-top:0px;background:none; padding-top:13px;}
#header h1 img{padding-top:0px;width: 105px;margin-left: -10px;}

#footer, .defaultbox {max-width:680px; padding:0 5%;}
#contents_area:before {content:"."; clear:both; display:block; height:0px; font-size:0;}
#contents_area { margin:0 auto; max-width:680px; width:auto; padding:0 5%; float:none;  font-size:12px;}
#contents_area h3 {margin:0; font-weight:400;  font-size:22px; ; border-bottom:none; text-align:center; line-height:50px; height:50px; }
#contents_area .location, #relatesite, .allnavi {right:5%;}
#footer .ftMenu, #footer address, 
#footer .copyright {margin:0 !important; clear:both;}
#footer address, #footer .copyright {font-size:11px; }
#footer .ftMenu li { padding:0 5px;}
.allnavi { top:15px;}
.allnavi img {width:20px;}

#contentsWrap {margin:10px auto 0;}
#footer .ftMenu {margin:0;}
#footer .ftMenu li a { line-height:20px; height:20px; text-decoration:none;}

#footer:before {content:"."; clear:both; display:block; height:0px; font-size:0;}


/* gnb2 */
.gnbOutBox { border-bottom:none; height:auto !important; background:none; width:100%; z-index:3;}

.gnb2box { position:absolute; top:-10px; right:0; }
.gnb2close img { padding:10px 0 0 25px; width:20px;}
.gnb2close {position:absolute; top:0; height:38px; background:#fff; width:100%;}

/*.btnEng { height:38px; width:80px; right:20px;}*/
.btnEng {
    height: 38px;
    width: 130px;
    right: 24px;
    background: none;
    top: -11px;
}
.btnEng a {display: inline;text-align:right;line-height:38px;font-size: 12px;}
.btnEng a img{margin-top:8px;width:  20px;}

#gnbWrap #gnb2 { width:200px; border:1px solid #cecece; border-width:0 1px; position:relative; margin-top:38px; }
/*
#gnbWrap #gnb2 > li { border-bottom:1px solid #cecece;} 
#gnbWrap #gnb2 > li.on { }
#gnbWrap #gnb2 > li:first-child { }
#gnbWrap #gnb2 > li > span {padding:12px 20px 11px; background:#ededed; display:block;}
#gnbWrap #gnb2 > li > span > a { margin-top:-3px; font-size:13px; font-weight:bold; color:#333333; line-height:16px; letter-spacing:-0.015em; *letter-spacing:-0.08em; text-decoration:none;}
#gnbWrap #gnb2 > li.on > span {display:block; background:#4472b4;  }
#gnbWrap #gnb2 > li.on > span > a {color:#fff;}
*/	
#gnbWrap #gnb2 > li { border-bottom:1px solid #cecece;} 
#gnbWrap #gnb2 > li.on { }
#gnbWrap #gnb2 > li:first-child { }
#gnbWrap #gnb2 > li > span { background:#ededed; display:block;}
#gnbWrap #gnb2 > li > span > a {background:#ededed; display:block;padding:12px 20px 11px; margin-top:-3px; font-size:16px; font-weight:bold; color:#333333; line-height:16px; letter-spacing:-0.015em; *letter-spacing:-0.08em; text-decoration:none;}
#gnbWrap #gnb2 > li.on > span { }
#gnbWrap #gnb2 > li.on > span > a,#gnbWrap #gnb2 > li > span > a:hover {display:block; background:#4472b4; color:#fff; padding:12px 20px 11px;}
	

/* gnb2 2depth */
.depth2Wrap2 { display:none; padding-top:0; background:#ffffff; z-index:998;}
#gnbWrap #gnb2 > li.on .depth2Wrap2 { display:block;  }
.depth2Wrap2 .menuWrap {position:relative; padding: 0px; }
.depth2Wrap2 .menuWrap .depth2 { }
.depth2Wrap2 .menuWrap .depth2 > li { border-bottom:1px solid #e2e2e2;}
.depth2Wrap2 .menuWrap .depth2 > li > a {display:block;  padding:10px 25px 8px 20px; line-height:1.1;font-size:12px; color:#666; background:url(../../images/layout/bul_lnb1.png) no-repeat 10px 50%;background-size: 8px 8px;}
.depth2Wrap2 .menuWrap .depth2 > li > a > span {margin-top:-1px;}
.depth2Wrap2 .menuWrap .depth2 > li.last a {background:none;}
.depth2Wrap2 .menuWrap .depth2 > li.on > a, .depth2Wrap2 .menuWrap .depth2 > li > a:hover {font-weight:bold; color:#1d4795; text-decoration:none; background:url(../../images/layout/bul_lnb1on.png) no-repeat 10px 50%;background-size: 8px 8px;}
.depth2Wrap2 .menuWrap .depth2 > li > .depth3 { /* display:none; */ padding:17px 0 21px 20px; border-top:1px solid #e2e2e2; background:#f3f3f3;}
.depth2Wrap2 .menuWrap .depth2 > li > .depth3 > ul {}
.depth2Wrap2 .menuWrap .depth2 > li > .depth3 > ul > li {margin-top:12px;  line-height:1.1;}
.depth2Wrap2 .menuWrap .depth2 > li > .depth3 > ul > li:first-child {margin-top:0;}
.depth2Wrap2 .menuWrap .depth2 > li > .depth3 > ul > li > a {display:block; padding-left:7px; font-size:11px; text-decoration:none; background:url(../../images/layout/bul_depth3_off.png) no-repeat 0 50%;}
.depth2Wrap2 .menuWrap .depth2 > li > .depth2Wrap2 .menuWrap .depth2 > li.on > a, .depth2Wrap2 .menuWrap .depth2 > li > .depth3 > ul > li > a:hover {font-weight:bold; color:#4472b4; background:url(../../images/layout/bul_depth3_on.png) no-repeat 0 50%;}
.depth2Wrap2 .menuWrap .depth2 > li.on > .depth3 {display:block;}
.depth2Wrap2 .menuWrap .depth2 > li > .depth3 > ul > li.on a{color: #4472b4}


#changeWrap  {position:relative; border:1px solid #d1d1d1; background:#f5f5f5 url(../../images/layout/changeWrapbg.png) no-repeat  20px 20px; margin:60px 0; background-size: 35px 30px;}
#changeWrap dl.contents { padding:16px 20px 0 0; }
#changeWrap dl.contents dt {font-size:13px; font-weight:bold; line-height:1.6; height:40px; vertical-align:middle;padding-left: 60px;}
#changeWrap dl.contents dd {font-size:11px; margin-top:10px; height:20px; padding-left: 20px;overflow:hidden;height:auto;}
#changeWrap dl.contents dd ul li {float:left; line-height:20px; padding-right:5px; }
#changeWrap dl.contents dd ul li input {margin:-1px 3px 0 0;}

#changeWrap dl.talktalk  { padding:10px 0 15px 20px;}
#changeWrap dl.talktalk .textbox {border:1px solid #cccccc; line-height:13px; height:13px; padding:6px 4px 7px; font-size:12px; }
#changeWrap dl.talktalk .btnChange {font-size:12px; width:60px; height:27px; line-height:27px; font-weight:bold; color:#ffffff !important; text-align:center; text-decoration:none !important; border:1px solid #42619e; background:#42619e;}
#changeWrap dl.change  { font-size:12px; height:43px; padding:10px 20px; line-height:1.3; background:#e6e6e6; text-align:left; }
#changeWrap dl.change dt {display:inline-block; font-weight:bold; padding:0; width:28%; }

#changeWrap dl.change dd {display:inline-block; font-weight:bold; padding:0;  width:69%;}
 
#changeWrap dl.talktalk .textbox {width:70%;}	

.gnbOutBox_img{display:none}
}

@media (min-width:768px) and (max-width:1099px) { /* 최소 768 ~ 1023  -- */
#header h1 {float:left; margin-top:10px;padding-top:50px;background:none}
#header h1 img{padding-top:0px}

.mview, .wviewC {display:block !important;}
.wview, .mviewC {display:none !important;}
.mviewT {display:none !important;}
.wviewT {display:table !important;}

#lnbWrap, .footlogo,
#gnb {display:none;}

.allnavi, .gnb2box.on {display:block !important;}
.gnbOutBox { border-bottom:none; height:auto !important; background:none; width:100%; z-index:3;}

#footer, .defaultbox {max-width:960px; padding:0 5%;}
#contents_area:before {content:"."; clear:both; display:block; height:0px; font-size:0;}
#contents_area { margin:0 auto; max-width:960px; width:auto; padding:0 5%; float:none; }
#contents_area .location, #relatesite, .allnavi {right:5%;}

#footer .ftMenu, #footer address, 
#footer .copyright {margin-left:0; }

#header { height:135px; }
/*#header h1 { padding-top:73px;}*//

#contentsWrap {margin:40px auto 0;}



/* gnb */
#gnbWrap {position:absolute; top:0; right:0px;}
#gnbWrap #gnb {}
#gnbWrap #gnb > li {float:left;  background:url(../../images/layout/bul_gnbli.png)  no-repeat 0 50% ;  padding: 0 22px 0 18px;}
#gnbWrap #gnb > li:first-child {margin-left:0; background:none;}
#gnbWrap #gnb > li:last-child {padding-right:0;}
#gnbWrap #gnb > li > span {height:61px; line-height:61px;}
#gnbWrap #gnb > li > span > a { margin-top:-3px; font-size:17px; font-weight:bold; color:#333333; line-height:16px; letter-spacing:-0.015em; *letter-spacing:-0.08em; text-decoration:none;}
#gnbWrap #gnb > li.on > span {display:block;  }
#gnbWrap #gnb > li.on > span > a {color:#245fb2;}
#gnb li a:hover {color:#245fb2;}

/* gnb 2depth */
.depth2Wrap { display:none; position:absolute; top:57px; min-width:150px; padding-top:0; background:#4472b4; z-index:998;}
.depth2Wrap .menuWrap {position:relative; padding: 0 10px; }
.depth2Wrap .menuWrap .depth2 { }
.depth2Wrap .menuWrap .depth2:first-child {background:none;}
.depth2Wrap .menuWrap .depth2 > li {float:left;}
.depth2Wrap .menuWrap .depth2 > li:first-child {}
.depth2Wrap .menuWrap .depth2 > li > a {font-size:14px; font-weight:normal; color:#d0dff4; line-height:40px; text-decoration:none;  padding:0 15px; display:block; margin-top:-2px;}
.depth2Wrap .menuWrap .depth2 > li > a:hover, .depth2Wrap .menuWrap .depth2 > li > a.on { font-weight:bold;  color:#fff !important;}

.depth2Wrap .menuWrap { }
.depth2Wrap.sub01 {}
.depth2Wrap.sub02 {left:0px;}
.depth2Wrap.sub03 {left:50px;}
.depth2Wrap.sub04 {left:50px;}
.depth2Wrap.sub05 {left:50px;}
.depth2Wrap.sub06 {left:50px;}
.depth2Wrap.sub07 {left:50px;}

.depth2Wrap .menuWrap .depth2 .depth3 {display:none;}

#container {position:relative; background:#fff; z-index:1;}
#contentsWrap {overflow:hidden; max-width:1140px; margin:50px auto 0;}

#changeWrap dl.talktalk .textbox {width:60%;}	
	
.gnbOutBox_img{display:none}

}










@media (min-width:1100px) { /* 최소 1024 ~ 최대 ------------------------------------------------------------------------------------------------------- */
.mview, .mviewC {display:none !important;}
.wview, .wviewC {display:block !important;}
.mviewT {display:none !important;}
.wviewT {display:table !important;}

.gnbOutBox { height:75px; width:100%; overflow:hidden;}
}



/* 모바일 / 타블렛 / PC / 레티나PC */
.col-mb-1, .col-mb-2, .col-mb-3, .col-mb-4, .col-mb-5, .col-mb-6, .col-mb-7, .col-mb-8, .col-mb-9, .col-mb-10, .col-mb-11, .col-mb-12, 
.col-mb-13, .col-mb-14, .col-mb-15, .col-mb-16,
.col-tb-1, .col-tb-2, .col-tb-3, .col-tb-4, .col-tb-5, .col-tb-6, .col-tb-7, .col-tb-8, .col-tb-9, .col-tb-10, .col-tb-11, .col-tb-12, 
.col-tb-13, .col-tb-14, .col-tb-15, .col-tb-16,
.col-pc-1, .col-pc-2, .col-pc-3, .col-pc-4, .col-pc-5, .col-pc-6, .col-pc-7, .col-pc-8, .col-pc-9, .col-pc-10, .col-pc-11, .col-pc-12,
.col-pc-13, .col-pc-14, .col-pc-15, .col-pc-16,
.col-lpc-1, .col-lpc-2, .col-lpc-3, .col-lpc-4, .col-lpc-5, .col-lpc-6, .col-lpc-7, .col-lpc-8, .col-lpc-9, .col-lpc-10, .col-lpc-11, .col-lpc-12 {
	position:relative;
	float:left;
	box-sizing: border-box;
	/*
	padding-left: 15px;
	padding-right: 15px;
	*/
}

.rowBox { position:relative; float:none; clear:both; display:block; box-sizing: border-box; margin-bottom:30px}
.rowBox:after {content:""; display:block; clear:both; float:none; height:0;}

.paddingBox {padding:0 15px;}
.paddingBox .w1 {width:100%;}
.paddingBox2 {padding:0 30px;}
.paddingBox3 {padding:0 45px;}

/*
@media (min-width:1100px) { 
	.hidden-pc {overflow:hidden !important; display:none !important;}
	.col-pc-1 {width: 6.25%;}
	.col-pc-2 {width: 12.5%;}
	.col-pc-3 {width: 18.75%;}
	.col-pc-4 {width: 25%;}
	.col-pc-5 {width: 31.25%;}
	.col-pc-51 {width: 31.70%;}
	.col-pc-53 {width: 33.125%;}
	.col-pc-6 {width: 37.5%;}
	.col-pc-7 {width: 43.75%;}
	.col-pc-8 {width: 50%;}
	.col-pc-9 {width: 56.25%;}
	.col-pc-10 {width: 62.5%;}
	.col-pc-11 {width: 68.75%;}
	.col-pc-12 {width: 75%;}
	.col-pc-13 {width: 81.25%;}
	.col-pc-14 {width: 87.5%;}
	.col-pc-15 {width: 93.75%;}
	.col-pc-16 {width: 100%;}
	.col-pc-151 {width: 95.7%;}
	.col-pc-158 {width: 98.1%;}
	.col-pc-16 {width: 100%;}
	.pc_pdl70 {padding-left: 50px;}
} 타블릿과 PC컨텐츠 영역 공통

@media (min-width:768px) and (max-width:1099px) {
*/
@media (min-width:768px) { /* 최소 768 ~ 1023 (1023에서 영역 확대) ---------------------------------------------------------------------- */

	.hidden-tb {overflow:hidden !important; display:none !important;}
  	.col-tb-1 {width: 6.25%;}
	.col-tb-2 {width: 12.5%;}
	.col-tb-3 {width: 18.75%;}
	.col-tb-4 {width: 25%;}
	.col-tb-5 {width: 31.25%;}
	.col-tb-53 {width: 33.125%;}
	.col-tb-6 {width: 37.5%;}
	.col-tb-62 {width:42.5%;}
	.col-tb-7 {width: 43.75%;}
	.col-tb-72 {width:46.8%;}
	.col-tb-8 {width: 50%;}
	.col-tb-9 {width: 56.25%;}
	.col-tb-10 {width: 62.5%;}
	.col-tb-11 {width: 68.75%;}
	.col-tb-12 {width: 75%;}
	.col-tb-13 {width: 81.25%;}
	.col-tb-14 {width: 87.5%;}
	.col-tb-15 {width: 93.75%;}
	.col-tb-151 {width: 94.8%;}
	.col-tb-159 {width: 99%;}
	.col-tb-16 {width: 100%;}
	
	.displayblock-tb {display:block;}
}

@media (max-width:767px) {/* 최소 ~ 최대 767 */
	.alignC_mb {text-align:center;}
	.hidden-mb {overflow:hidden !important; display:none !important;}
	.malignC {text-align:center;}

	/* 특별한경우가 아니고서는 5,7,8,9,10,11 culum은 사용하지 않는다. */
	.col-mb-1 {width: 6.25%;}
	.col-mb-2 {width: 12.5%;}
	.col-mb-3 {width: 18.75%;}
	.col-mb-4 {width: 25%;}
	.col-mb-5 {width: 31.25%;}
	.col-mb-53 {width: 33.125%;}
	.col-mb-6 {width: 37.5%;}
	.col-mb-62{width: 39.2%;}
	.col-mb-65 {width: 40%;}
	.col-mb-7 {width: 43.75%;}
	.col-mb-8 {width: 50%;}
	.col-mb-9 {width: 56.25%;}
	.col-mb-95 {width: 58.5%;}
	.col-mb-10 {width: 62.5%;}
	.col-mb-11 {width: 68.75%;}
	.col-mb-12 {width: 75%;}
	.col-mb-13 {width: 81.25%;}
	.col-mb-14 {width: 87.5%;}
	.col-mb-15 {width: 93.75%;}
	.col-mb-152 {width: 95.8%;}
	.col-mb-153 {width:97.5%}
	.col-mb-16 {width: 100%;}
	
	img.mb100p {width:100%;}
	.col-mb-16 + .col-mb-16 {margin-top:30px;}
	.displayinline-mb {display:inline;}
	
.paddingBox, .paddingBox2,
.paddingBox3 {padding:0;}
	
}

/* layer popup */
.ajaxLayerBgDiv {position:fixed; top:0; left:0; width:100%; height:100%; background:#000000; opacity:0.5; filter:alpha(opacity=50); z-index:100000;}
#ajaxLayerLoadingDiv {background:url('/web/images/loading.gif') no-repeat center center; height: 100px; width: 100px; position: fixed; z-index: 1000; left: 50%; top: 50%; margin: -25px 0 0 -25px; }