@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : Layout.CSS 
	Company : The Webstyle co.,ltd 
 	Author : Woo Seok, Shin 2015-09
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc 
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* SkipMenu */
#SkipMenu {
	overflow:hidden; 
	position:absolute; 
	left:0; 
	top:0; 
	z-index:500; 
	width:100%; 
	height:0px; 
	background-color:#105d9c;
}
#SkipMenu .skipNav {position:relative; height:35px; text-align:center;}
#SkipMenu .skipNav ul {display:inline-block; overflow:hidden;}
#SkipMenu .skipNav ul li {display:inline;}
#SkipMenu .skipNav ul li a {display:inline-block; font-size:12px; line-height:35px; font-weight:bold; color:#fff;}
#SkipMenu .skipNav .skipClose {display:inline-block; position:absolute; right:20px; top:11px;}
#SkipMenu .skipNav .skipClose a {display:block; width:13px; height:13px; text-indent:-9999px; background:url('/Images/Common/btn_skipMenu_close.png') center center no-repeat;}
#SkipMenu a:active, visited, link, hover {color:#fff;}

#Wrap {*zoom:1; position:relative; width:100%; min-width:1260px; min-height:100%;}

/* Header */
#Header_Wrap {position:absolute; left:0px; top:0px; z-index:200; width:100%; border-bottom:1px solid #0079c1;}
#Header_Wrap:before {content:""; display:block; position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#fff;}
#Header {*zoom:1; position:relative; width:1200px; height:120px; margin:0 auto;}
#Header:after {content:""; display:block; clear:both;}
#Header .logo_header {display:inline-block; position:absolute; left:10px; top:48px; z-index:20;}

#Header .header_nav_wrap {display:block;}
#Header .gnb {display:inline-block; *zoom:1; position:absolute; right:10px; top:5px; z-index:10;}
#Header .gnb:after {content:""; display:block; clear:both;}
#Header .gnb .topSearch {float:left;}
#Header .gnb .topSearch input.input_topSearch {border:0px; width:120px; height:25px; padding:0px; border-bottom:1px solid #0079c0; font-size:12px; line-height:24px; background:transparent;}
#Header .gnb .topSearch .btn_topSearch {width:12px; height:12px; margin-top:5px; text-indent:-9999px; background:url('/Images/Common/ico_btn_topSearch.png') left top no-repeat;}
#Header .gnb .siteLang {float:left; margin-left:10px;}
#Header .gnb .btn_allMenuOpen {display:none; margin-left:24px; width:24px; height:24px; border:1px solid #fff; text-indent:-9999px; background:url('/Images/Common/bg_lnb_allOpen.gif') 4px -17px no-repeat;}

#Header .lnb_wrap {display:inline-block; position:absolute; right:0px; top:47px;}
#Header .lnb {*zoom:1; height:73px;}
#Header .lnb:after {content:""; display:block; clear:both;}
#Header .lnb li.node1 {float:left; position:relative;}
#Header .lnb li.node1 a.depth1 {display:block; height:73px; padding:0 18px; font-family:"NotoSansRegular"; font-size:18px; line-height:73px;}
#Header .lnb li.node1 a.depth1>span {line-height:18px; padding-bottom:5px;}
#Header .lnb li.node1:hover a.depth1,
#Header .lnb li.node1.on a.depth1 {color:#0079c1;}
#Header .lnb li.node1:hover a.depth1>span,
#Header .lnb li.node1.on a.depth1>span {border-bottom:1px solid #0079c1;}
#Header .lnb li.node1 .submenu_wrap {display:none; position:absolute; left:-17px; left:-19px\9; top:73px; width:100%; padding:15px 33px; border-left:1px solid #0079c1; border-right:1px solid #0079c1; border-bottom:1px solid #0079c1;}
#Header .lnb li.node1 .submenu_wrap:before {content:""; display:block; position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; background-color:#fff;}
#Header .lnb li.node1 ul.submenu {overflow:hidden;}
#Header .lnb li.node1 ul.submenu li.node2 {margin-bottom:12px;}
#Header .lnb li.node1 ul.submenu li.node2 a.depth2 {display:block; font-family:"NotoSansRegular"; font-size:14px; line-height:18px;}
#Header .lnb li.node1 ul.submenu li.node2 a.depth2>span {padding-bottom:3px;}
#Header .lnb li.node1 ul.submenu li.node2:hover a.depth2 {color:#0079c1;}
#Header .lnb li.node1 ul.submenu li.node2:hover a.depth2>span {border-bottom:1px solid #66a0d1;}

/* LNB 브랜드소개 Logo Type
#Header .lnb li.node1 .submenu_wrap.sub01 {left:-507px; left:-406px\9; width:1180px; padding:30px 33px;}
#Header .lnb li.node1 .submenu_wrap.sub01 .submenu li.node2 {float:left; margin-bottom:0px;}
#Header .lnb li.node1 .submenu_wrap.sub01 .submenu li.node2 a:hover {background-color:#222;}
#Header .lnb li.node1 .submenu_wrap.sub01 .submenu:first-child {margin-bottom:10px; padding-bottom:11px; background:url('/Images/Common/bg_line_dot.gif') left bottom repeat-x;}
*/
#Header .lnb li.node1 .submenu_wrap.sub01 {width:196px;}
#Header .lnb li.node1 .submenu_wrap.sub02 {width:196px;}
#Header .lnb li.node1 .submenu_wrap.sub03 {width:204px;}
#Header .lnb li.node1 .submenu_wrap.sub04 {width:196px;}
#Header .lnb li.node1 .submenu_wrap.sub05 {width:207px;}
#Header .lnb li.node1 .submenu_wrap.sub06 {left:-15px; width:190px;}

#Header a.btn_lnb_toggle {display:none; position:absolute; top:27px; right:20px; z-index:30; width:28px; height:24px; text-indent:-9999px; background:url('/Images/Common/btn_lnb_toggle.gif') left top no-repeat;} 

.main #Header_Wrap {border-bottom:0px;}
.main #Header_Wrap:before {opacity:0.85;}
.main .selectBox.siteLang {background-color:transparent;}
.main .selectBox.siteLang .selectVal {border-color:transparent;}
.main .selectBox.siteLang.on {background-color:#fff;}
.main .selectBox.siteLang.on .selectVal {border-color:inherit;}

.main #Header .lnb li.node1 .submenu_wrap {border:0px;}
.main #Header .lnb li.node1 .submenu_wrap:before {opacity:0.85;}

/* 전체메뉴 스크롤바 */
.ps-container .ps-scrollbar-x {position: absolute; /* please don't change 'position' */ bottom: 1px; /* there must be 'bottom' for ps-scrollbar-x */ height: 4px; background-color: #aaa; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; opacity: 0; filter: alpha(opacity = 0); -webkit-transition: opacity.2s linear; -moz-transition: opacity .2s linear; transition: opacity .2s linear;}
.ps-container:hover .ps-scrollbar-x {opacity: 0.6; filter: alpha(opacity = 60);}
.ps-container .ps-scrollbar-x:hover {opacity: 0.9; filter: alpha(opacity = 90); cursor:default;}
.ps-container .ps-scrollbar-x.in-scrolling {opacity: 0.9; filter: alpha(opacity = 90);}
.ps-container .ps-scrollbar-y {position: absolute; z-index:100; /* please don't change 'position' */ right: 1px; /* there must be 'right' for ps-scrollbar-y */ width: 4px; background-color: #aaa; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; opacity: 0; filter: alpha(opacity = 0); -webkit-transition: opacity.2s linear; -moz-transition: opacity .2s linear; transition: opacity .2s linear;}
.ps-container:hover .ps-scrollbar-y {opacity:0.6; filter:alpha(opacity = 60);}
.ps-container .ps-scrollbar-y:hover {opacity:0.9; filter: alpha(opacity = 90); cursor:default;}
.ps-container .ps-scrollbar-y.in-scrolling {opacity:0.9; filter: alpha(opacity = 90);}
 
/* Container */
#Container {position:relative; overflow:hidden; padding:120px 0 200px 0;}
.main #Container {padding-top:0px;}
#Container .breadcrumb_wrap {height:51px; background-color:#f8f8f8;}
#Container .breadcrumb_wrap .breadcrumb {overflow:hidden; margin-left:0.83333%; padding-top:16px;}
#Container .breadcrumb_wrap .breadcrumb li {float:left; height:18px; margin-left:10px; padding-left:16px; font-family:"NotoSansLight"; font-size:14px; line-height:18px; background:url('/Images/Common/ico_breadcrumb_arrow.gif') left center no-repeat;}
#Container .breadcrumb_wrap .breadcrumb li.home {margin-left:0px; padding-left:0px; background:none;}
#Container .breadcrumb_wrap .breadcrumb li.active {color:#0079c1;}
#Container .breadcrumb_wrap .breadcrumb li a {display:inline-block; height:18px; font-family:"NotoSansLight"; font-size:14px; line-height:18px; color:#767676; vertical-align:top;}
#Container .breadcrumb_wrap .breadcrumb li.home a {display:block; width:18px; height:18px; text-indent:-9999px; background:url('/Images/Common/ico_breadcrumb_home.gif') left top no-repeat;}

#Container .contents_header_wrap {background:url('/Images/Common/bg_contents_header.gif') center center; background-color:#2c3c4e;}
#Container .contents_header {position:relative; max-width:1200px; height:153px; margin:0 auto; text-align:center;}
#Container .contents_header h1 {padding-top:54px; font-family:"NotoSansRegular"; font-size:35px; font-weight:bold; color:#ffffff; text-align:center;}
#Container .contents_header .h1_summary {margin-top:8px; font-family:"NotoSansLight"; font-size:14px; line-height:18px; color:#ffffff; text-align:center;}

#Container.container_brand {background:url('/Images/Common/bg_contents_header.gif') center center; background-color:#2c3c4e;}
#Container.container_brand .contents_header_wrap {background:none;}
/*#Container.container_brand .contents_header:after {content:""; display:block; position:absolute; right:-87px; top:-26px; width:348px; height:326px; background:url('/Images/Brand/bg_contents_header_brand.png') right top no-repeat;}*/

#Container.container_customer {background:url('/Images/Common/bg_contents_header') center center; background-color:#2c3c4e;}
#Container.container_customer .contents_header_wrap {background:none;}

#Container.container_qna {background-color:#f8f8f8;}

@media all and (max-width:360px) {
	#Container .contents_header .h1_summary {width:280px; margin:8px auto; word-break:keep-all;}
}

/* Contents */
#Contents {position:relative; max-width:1200px; min-width:300px; margin:0 auto; padding:50px 0;}

/* Footer */
#Footer_Wrap {position:absolute; left:0px; bottom:0px; z-index:100; width:100%; background-color:#222;}
#Footer {position:relative; width:1200px; height:200px; margin:0 auto;}
#Footer .logo_footer {display:inline-block; margin:40px 10px 37px;}

#Footer .fnb_wrap {margin:0 0 20px 10px;}
#Footer .fnb_wrap .fnb {display:inline-block; overflow:hidden;}
#Footer .fnb_wrap .fnb li {float:left; height:16px; padding-left:10px; padding-right:8px; background:url('/Images/Common/bg_fnb_division.gif') left top no-repeat;}
#Footer .fnb_wrap .fnb li:first-child {padding-left:0px; background:none;}
#Footer .fnb_wrap .fnb li a {display:block; font-family:"NotoSansLight"; font-size:14px; line-height:16px; color:#fff; text-align:left;}

#Footer .footer_quickLink {display:inline-block; position:absolute; top:40px; right:10px; text-align:right;}
#Footer .footer_quickLink .footer_sns {display:inline-block; overflow:hidden;}
#Footer .footer_quickLink .footer_sns li {float:left; margin-left:7px;}
#Footer .footer_quickLink .footer_sns li:first-child {margin-left:0px;}

#Footer .footer_siteInfo {margin-left:10px; font-family:"NotoSansLight"; font-size:12px;}
#Footer .footer_siteInfo .footer_addr {margin-bottom:8px; line-height:16px; color:#c1c1c1; word-break:keep-all;}
#Footer .footer_siteInfo .copyright {color:#00aeef;}

/* Back To Top */
.btn_backToTop {display:none; position:fixed; right:20px; bottom:10px; z-index:800; width:88px; height:88px;}
.btn_backToTop.show {display:block;}
.btn_backToTop a {display:block; overflow:hidden; width:88px; height:88px; text-indent:-9999px; background:url('/Images/Common/btn_top.png') left top no-repeat;}
.btn_backToTop a span.ico {background-image:none;}

@media all and (max-width:1045px) {
	#Wrap {min-width:1024px;}
	#Header {width:1024px;}
	#Footer {width:1024px;}
}

@media all and (max-width:768px) {
	#Wrap {min-width:320px;}
	
	#Header_Wrap {position:fixed;}
	.main #Header_Wrap:before {opacity:1;}
	
	#Header {width:auto; height:78px;}
	#Header:before {content:""; display:block; position:absolute; right:0px; top:0px; z-index:20; width:100%; height:100%; background-color:#ffffff;}
	#Header .logo_header {left:20px; top:24px;}
	#Header .logo_header img {width:125px; height:auto;}	
	
	#Header a.btn_lnb_toggle {display:block;}	
	#Header .header_nav_wrap {display:none; position:fixed; right:-321px; top:0px; width:320px; height:100%; padding-top:135px; border-left:1px solid #ccc;}
	#Header .header_nav_wrap:before {content:""; display:block; position:absolute; right:0px; top:0px; width:319px; height:100%; background-color:#000; opacity:0.6;}
	#Header .header_nav_wrap.on {display:block;}
	#Header .header_nav_wrap.on li.node1,
	#Header .header_nav_wrap.on li.node2 {background-color:#fff;}
	
			
	#Header .gnb {right:0px; top:78px; width:100%; height:57px; background-color:#222;}
	#Header .gnb .topSearch {margin-top:15px; padding-left:18px;}
	#Header .gnb .topSearch input.input_topSearch {color:#fff; border-bottom:1px solid #fff; background-color:#222;}
	#Header .gnb .topSearch .btn_topSearch {width:18px; height:18px; margin-top:5px; background:url('/Images/Common/ico_btn_search_white.png') left top no-repeat;}
	#Header .gnb .siteLang {float:none; margin-left:20px; margin-top:15px;}
	#Header .gnb .btn_allMenuOpen {display:inline-block;}
	#Header .gnb .btn_allMenuOpen.on {background-position:4px -74px;}
	
	#Header .lnb_wrap {position:relative; right:0px; top:0px; overflow:hidden; width:100%; height:100%;}
	#Header .lnb {height:auto;}
	#Header .lnb li.node1 {float:none;}
	#Header .lnb li.node1 .submenu_wrap {position:static; border:0px;}
	#Header .lnb li.node1 .submenu_wrap.sub01,
	#Header .lnb li.node1 .submenu_wrap.sub02,
	#Header .lnb li.node1 .submenu_wrap.sub03,
	#Header .lnb li.node1 .submenu_wrap.sub04,
	#Header .lnb li.node1 .submenu_wrap.sub05,
	#Header .lnb li.node1 .submenu_wrap.sub06 {width:100%; padding:15px 18px;}
	#Header .lnb li.node1 .submenu_wrap.sub01 .submenu li.node2 {width:25%;}	
	#Header .lnb li.node1 a.depth1 {height:57px; border-bottom:1px solid #fff; line-height:57px; color:#fff; background:url('/Images/Common/bg_lnb_depth1.gif') right top no-repeat; background-color:#0079c1;}
	#Header .lnb li.node1:hover a.depth1,
	#Header .lnb li.node1.on a.depth1 {color:#fff;}
	#Header .lnb li.node1.on a.depth1 {background-position:right -57px;}	
	#Header .lnb li.node1.on .submenu_wrap {display:block;}
	
	#Container {width:auto; padding:78px 0 200px 0;}
	#Container .breadcrumb_wrap {display:none;}
	#Contents {margin:0 10px;}
	
	.btn_backToTop {width:44px; height:44px;}	
	.btn_backToTop a {width:44px; height:44px; background-size:44px 44px;}
		
	#Footer {width:auto; margin:0 10px;}	
}
@media all and (max-width:590px) {		
	#Footer .logo_footer {position:absolute; left:0px; top:0px; margin-top:20px;}
	#Footer .footer_quickLink {display:block; position:static; padding-top:70px; text-align:center;}
	#Footer .footer_siteInfo {display:inline-block; position:absolute; left:0px; bottom:30px;}
}