@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2017-07-19
******************************************************** */

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500');

/* layout */
body, table, th, td, button, select {
	font-family:'Noto Sans KR',"나눔고딕", 'Noto Sans CJK KR', NanumGothic, "Nanum Gothic", "맑은 고딕", Malgun Gothic, "돋움", Dotum, Tahoma, Verdana, Calibri, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
}
body { background-color:#eee; }
#wrap{width:100%; min-width:320px; margin:0px auto; }
.material-icons{line-height:inherit !important;}

/* 공통클래스 */
.area{width:94%; margin:0px auto;}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.fl{float:left;}
.fr{float:right;}
.font-pop{font-family: 'Poppins', 'Noto Sans KR',"나눔고딕", 'Noto Sans CJK KR', NanumGothic, "Nanum Gothic", "맑은 고딕", Malgun Gothic, "돋움", Dotum, Tahoma, Verdana, Calibri, Arial, sans-serif; }
/* skip NAV */
.cm-accessibility a { position:absolute; text-align:center; width:200px; display:block; background:#c52227; color:#fff; left:-9999px; }
.cm-accessibility a:hover { z-index:999999; margin-left:-100px; left:50%; }
.cm-accessibility a:focus { z-index:999999; margin-left:-100px; left:50%; }
.cm-accessibility a:active { z-index:999999; margin-left:-100px; left:50%; }

/* ******************  레이아웃 ********************** */
/* -------- Header -------- */
#header{position:relative; height:55px;}
#headerInner{position:fixed; top:0px; left:0px; width:100%; height:55px; z-index:9997; background-color:#fff; border-bottom:1px solid #ddd; }
#headerInner .logo{padding-top:10px; margin-left:-20px;}
#headerInner .logo img{height:20px;}
#headerInner .header-search-box{display:none; position:absolute; top:0px; left:0px; width:100%; height:55px; background-color:#fff}
#headerInner .header-search-box .header-search-word{height:55px; border:0; width:calc( 100% - 50px ); background:#fff; text-indent:3%; color:#ccc; font-size:12px;}
#headerInner .header-search-box .header-search-word:focus{color:#333;}
#headerInner .header-search-open-btn,
#headerInner .header-search-btn{
	position:absolute; top:50%; right:3%; margin:-16px 40px 0 0;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#headerInner .header-search-open-btn i,#headerInner .header-search-btn i{font-size:32px; color:#aaa;}

#headerInner .header-search-btn.open{margin-right:0; }

/* logo LEFT */
#headerInner.header-logo-left .logo{padding-left:3%; }
/* logo CENTER */
#headerInner.header-logo-center .logo{text-align:center;}
/* NAV OPEN BUTTON */
.nav-open-btn{
	position:fixed; top:14px; right:3%; z-index:9999;
	transition:all 0.7s; -webkit-transition:all 0.7s; -oz-transition:all 0.7s; -ms-transition:all 0.7s; z-index:999999
}

.nav-open-btn .line{
	display:block; width:28px; height:2px; background-color:#aaa; border-radius:5px; margin: 5px auto;
	-webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
 }
.nav-open-btn.active .line:nth-child(2){
  opacity: 0;
}

.nav-open-btn.active .line:nth-child(1){
  -webkit-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -o-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.nav-open-btn.active .line:nth-child(3){
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}
/* Header :: BRAND LIST */
#headerBrandCon{padding-top:25px;}
#headerBrandTabCon{padding-bottom:15px}
#headerBrandTabCon.prd-category-tab-list ul li a{background-color:#eee; border:1px solid #ddd; border-right:0;}
#headerBrandTabCon.prd-category-tab-list ul li:first-child a{border-left:0;}
#headerBrandTabCon.prd-category-tab-list ul li a span{border-bottom-color:#eee; color:#aaa; }
#headerBrandTabCon.prd-category-tab-list ul li.selected a{background-color:#fff; border-bottom-color:#fff;}
#headerBrandTabCon.prd-category-tab-list ul li.selected a span{color:#0c284f; border-bottom-color:#0c284f;}
/* Header :: Gnb */
#gnb{ 
	overflow-y:auto; position:fixed; top:0px; right:-100%; width:100%; height:100%; background-color:#fff; z-index:9999;
	/* gnb OPEN 속도 */
	transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#gnb.open{right:0px;}
#gnb .gnb-logo{position:absolute; top:10px; left:3%; }
#gnb .gnb-logo img{height:27px;}
.lang-btn-box{position:absolute; top:14px; right:45px; display:inline-block; width:88px; height:26px; line-height:26px; border:1px solid #333; vertical-align:middle; font-family: 'Poppins','Noto Sans KR',"나눔고딕", 'Noto Sans CJK KR', NanumGothic, "Nanum Gothic", "맑은 고딕", Malgun Gothic, "돋움", Dotum, Tahoma, Verdana, Calibri, Arial, sans-serif;}
.lang-btn{display:block; width:100%; height:26px; text-indent:12px;}
.lang-btn > img{vertical-align:middle; margin:-3px 5px 0 0;}
.lang-btn span{font-weight:500; color:#555; font-size:11px; }
.lang-btn .arrow{position:absolute; top:12px; right:10px; line-height:8px;}
.lang-btn-box.open .arrow{transform:rotate(180deg); right:-3px;}
.lang-list-con{display:none; position:absolute; top:32px; left:-1px; width:100%; border:1px solid #333; z-index:99; background-color:#fff;}
.lang-list-con li{text-align:center;}
.lang-list-con li a{display:block; height:33px;font-weight:500; color:#555; font-size:12px; }
.lang-list-con li a:hover{color:#cc5218}
#gnb #navigation{overflow:hidden; margin-top:55px; border-top:1px solid #ddd;}
#gnb #navigation > li{/* float:left; width:50%; */ border-bottom:1px solid rgba(255,255,255,0.5); box-sizing:border-box;}
/* #gnb #navigation > li:nth-child(even){border-left:1px solid #ddd;} */
#gnb #navigation > li > a {display:block; padding:18px 4%; color:#333; font-size:14px; border-bottom:1px solid #ddd;  }
#gnb #navigation > li.has-2dep > a{background-size:17px;}
#gnb #navigation > li.active > a{color:#fff;}
#gnb #navigation > li > a:hover, #gnb #navigation > li.on > a{background-color:#0c284f; color:#fff;}
#gnb #navigation > li.has-2dep.active > a{background:#0c284f ; background-size:17px}
#gnb #navigation > li .gnb-2dep{display:none; background-color:#f2f2f2;}
#gnb #navigation > li .gnb-2dep > li{border-top:1px solid #ddd;}
#gnb #navigation > li .gnb-2dep > li:first-child{border-top:0;}
#gnb #navigation > li .gnb-2dep > li > a{display:block; color:#333; font-size:13px; padding:15px 6%;}
#gnb #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:5px 17%; background-color:#aaa; border-top:1px dotted #ddd;}
#gnb #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:10px 0; font-size:13px; color:#fff;}
#gnb #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}
.gnb-bg{display:none; 	position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.6; filter:alpha(opacity=60); z-index:9998;}
.to-otherpage-controls{overflow:hidden;}
.to-otherpage-controls a{float:left; width:50%; height:40px; line-height:40px; color:#fff; font-size:13px;  background-color:#3591d7; text-align:center;  }
.to-otherpage-controls a:first-child{background-color:#005bac}
/* -------- FOOTER -------- */
/* 하단 배너 */
#footerBannerCon{ width:100%;padding:0px 0 15px 0;}
#footerBannerCon img{width:100%;}
#footerBannerCon .slick-arrow{position:absolute; top:50%; width:40px; height:40px; margin-top:-20px; cursor:pointer; border:0; cursor:pointer; z-index:99; background-color:rgba(255,255,255,0.15);}
#footerBannerCon .slick-arrow i{font-size:40px; color:#fff;}
#footerBannerCon .slick-arrow.slick-prev{left:0; }
#footerBannerCon .slick-arrow.slick-next{right:0; }
#footerBannerCon .slick-dots{position:absolute; width:92%; left:4%; bottom:15px; text-align:center;}
#footerBannerCon .slick-dots li{display:inline-block; margin:0 2px ; }
#footerBannerCon .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:25px; height:5px; background-color:#fff;
}
#footerBannerCon .slick-dots li.slick-active button{background-color:#3591d7;}		/* 버튼 active */
/* FOOTER */
#footer{background-color:#222; }
.to-newspaper-btn{display:block; height:40px; line-height:40px; background-color:#005bac; text-align:center; color:#fff; font-size:13.5px;}
/* FOOTER :: 메뉴상단 */
.footer-menu-top{padding:13px 0; text-align:center; background-color:#333;}
.footer-menu-top li{display:inline-block; margin:0 10px;}
.footer-menu-top li a{color:#aaa; font-size:11px;}
.footer-menu-top li a strong{color:#f68326; font-weight:400;}
/* FOOTER :: 하단 */
.footer-tel-txt,.footer-copyright{display:block; padding:15px 0;}
.footer-tel-txt dl{overflow:hidden; font-size:16px; line-height:24px;}
.footer-tel-txt dl dt{float:left; color:#ccc;}
.footer-tel-txt dl dd{float:right; color:#fff; font-size:20px; font-weight:600;}
.footer-address{padding:12px 3%; border-top:1px solid #333; border-bottom:1px solid #333; color:#888; font-size:11px; line-height:16px;}
.footer-address,.footer-copyright{ color:#888; font-size:11px; line-height:16px;}

#enFooter{padding:30px 0; text-align:center; line-height:20px; letter-spacing:-0.3px;  font-size:13px; color:#333; font-family: 'Poppins','Noto Sans KR',"나눔고딕", 'Noto Sans CJK KR', NanumGothic, "Nanum Gothic", "맑은 고딕", Malgun Gothic, "돋움", Dotum, Tahoma, Verdana, Calibri, Arial, sans-serif;}
/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; bottom:15px; right:15px; display:block; width:46px; height:46px; background-color:#0c284f; text-align:center; line-height:46px; color:#fff; z-index:99;
	-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;transition:all 0.6s
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
/* ******************  서브 레이아웃 ********************** */
/* 서브 레이아웃 :: 비주얼 */
#container{padding-top:13px; background:url(/en/images/layout/container_top_bg.jpg) no-repeat 50% 0%; background-size:100% auto}
#visualCon{width:100%; height:100px;}
#visualCon h2{text-align:center; color:#fff; line-height:100px; font-size:24px; letter-spacing:-0.25px; text-transform:uppercase; font-weight:600; font-family: 'Poppins','Noto Sans KR',"나눔고딕", 'Noto Sans CJK KR', NanumGothic, "Nanum Gothic", "맑은 고딕", Malgun Gothic, "돋움", Dotum, Tahoma, Verdana, Calibri, Arial, sans-serif; text-shadow:6px 7px 15px rgba(0, 0, 0, .5);}


/* 서브 레이아웃 :: 상단메뉴 */
#topMenuBar {position:relative; }
#topMenuBar .depth1-tit{overflow:hidden; width:100%;}
#topMenuBar .depth1-tit a{position:relative; display:block; height:46px; color:#fff;  background-color:#cb572c; padding:0 3%;}
#topMenuBar .depth1-tit a span{line-height:46px; font-size:15px; font-weight:400; }
#topMenuBar .depth1-tit a .arrow{position:absolute; top:50%; right:2%; margin-top:-12px;}
#topMenuBar .depth1-tit a.open .arrow{transform:rotate(-180deg); margin-top:-14px;}
#topMenuBar .top-menu-list{display:none; width:100%; position:absolute; top:46px; left:0px; z-index:99}
#topMenuBar .top-menu-list li{width:100%; }
#topMenuBar .top-menu-list li a{display:block; height:45px; line-height:45px; padding:0 4%; font-size:13px; border-bottom:1px solid rgba(0,0,0,0.5); background-color:#fff; color:#333; }


/* 서브메뉴 레이아웃 :: 상단메뉴2 */
#topMenu{height:83px; background-color:#fff; width:94%; margin:0px auto 13px;}
#topMenu > ul {overflow:hidden; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#topMenu > ul > li{float:left; width:50%; background-color:#fff; border-top:1px solid #ddd; }
#topMenu.top-menu-company > ul > li:nth-child(4), #topMenu.top-menu-company > ul > li:nth-child(5){width:50%;}
#topMenu > ul > li a{display:block; height:40px; line-height:40px; text-align:center; color:#333; border-left:1px solid #ddd; background-color:#fff;}
#topMenu > ul > li.on a{background-color:#0c284f; color:#fff;}
#topMenu.fixed > ul{position:fixed; top:14px; left:0; right:0; z-index:10;}
/* ******************  모바일 전용 레이어팝업 ********************** */
.mobile-fixed-pop-wrapper{overflow-y:auto; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:999999; opacity:1.0;filter:Alpha(opacity=100);}
.mobile-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.75); }
.mobile-fixed-pop-inner-box{ position:relative; display:table-cell; vertical-align:middle; top:0px;}
.mobile-fixed-img-con{display:inline-block; min-width:250px; max-width:92%; margin:4% auto; }
.mobile-fixed-img-con img{max-width:100%; max-height:100%;}
.mobile-popup-btn-controls{overflow:hidden; text-align:center; background-color:#f2f2f2; border-top:1px solid #f2f2f2;}
.mobile-popup-btn-controls button{float:left; border:0; padding:0; margin:0px; background:none; width:50%; height:50px; background-color:#fff; font-size:14px; color:#333; cursor:pointer;}
.mobile-popup-btn-controls .today-close-btn{background-color:#eee;}