@charset "utf-8";

/* Common */
body, html {  background:#ddd; }
body, input, textarea, select, button, table { font-family: 'Noto Sans KR', NanumGothic, ng, sans-serif; font-size: 14px; font-weight: 400; }

.wrap {  position: relative; background: #fff; max-width: 1920px; box-shadow: 0px 0px 10px #999; margin: 0 auto   }

.clear { clear: both; }
.clearFix:after, .setWidth:after { content: ""; display: block; clear: both; }

.pcView {  }
.mobileView { display: none !important; }
.noWrap { white-space: nowrap; }

/* Skip to content */
.skip { margin: 0 }
.skip > a { display: block; position: absolute; z-index: 11; top:0px; left:0px; right:0px; overflow: hidden; height: 0; line-height: 34px; text-align: center; font-size: 16px; background: #222;}
.skip > a:focus { height: auto; text-decoration: none; color: #fff; }

/* Layout */
.setWidth { width:1080px; box-sizing: border-box; margin: 0 auto; position: relative;}

/* Header */
#header { position: fixed; overflow: hidden; height:104px; top:0px; left:0px; right:0px; z-index: 100; background: #fafafa;  box-sizing: border-box; padding-top: 34px; }
#header .headerWrap { background: #fff; height: 69px; background: #fff; border-bottom: 1px solid #eee;}
#header.sticky { position: fixed; display: none; }
#header:after { content:""; position: absolute; bottom:0px; left:0px; right:0px;  display: block; height: 1px; background:  #ddd }
#header.mobile { overflow: visible; }

#header .logo { top: 15px; left:0px; position: absolute; }
#header .logo a { display: block; overflow: hidden; width:  120px; height: 40px;text-indent: -9999px;  background: url(../images/logo.png) left center no-repeat; background-size: auto 40px;}


#gnb {    font-size: 14px;  float: right; margin-right: 80px; display: block;  overflow: hidden; padding-bottom: 20px;}
#gnb a { text-decoration: none; white-space: nowrap }
#gnb > ul > li { float: left; position: relative; text-align: left;  width: auto; margin-top: 23px; box-sizing: border-box;  }
#gnb > ul > li:first-child >  a { border-left: none; }
#gnb > ul > li > a {  display: block; position: relative;  text-align: center; line-height: 20px;    font-size: 18px; font-weight: 400; color: #333;  transition: border 0.3s; width: 180px; border-left: 1px solid #ddd; }
#gnb > ul > li > a :first-child{ border-left: none; }
#header.hover #gnb > ul > li > a {   }

#gnb > ul.three > li > a { width: 200px; }
#gnb > ul.four > li > a { width: 180px; }
#gnb > ul.five > li > a { width: 160px; }
#gnb > ul.six > li > a { width: 140px; }

#gnb > ul > li:hover > a,
#gnb > ul > li:focus > a { color: #DB072F;   }
#gnb > ul > li.current > a  { color: #DB072F;  }
#gnb > ul .depth2 {   padding:0px;  margin-bottom: 10px;   border-left: 1px solid #ddd; height: auto; }
#gnb .menuImg { padding: 25px 40px 10px; margin-top: 10px; }
#gnb .menuImg:after  { width: 48px; height: 48px; margin: 0 auto;  display: block; content: ""; background-position: center top; background-size: 100% auto;  }
#gnb li:hover .menuImg:after,  #gnb li.current .menuImg:after {  background-position: center bottom; }

#gnb > ul .depth2 a { display: block;position: relative;   height: 30px;  line-height: 30px; color: #666; transition: border 0.3s;   text-align: center; font-size: 15px;  }
#gnb > ul > li:first-child .depth2 { border:none; }
#gnb > ul .depth2 a:hover,
#gnb > ul .depth2 a:focus { color: #DB072F;      }
#gnb > ul .depth2 > li.current > a { color: #DB072F; font-weight: 700; }

.extraMenus { position: absolute; right:-10px; top:0px; left:0px; right:0px; background: #DB072F; height: 34px; overflow: hidden; }
.companyName { float: left;  line-height: 34px; color: #fff; font-size: 12px; font-weight: bold; }

.quickMenu {     box-sizing: border-box; position: relative; float: right;  border-right: 1px solid #d95557;  }
.quickMenu li { float: left; border-left: 1px solid #d95557; height: 34px; }
.quickMenu li.toggleLanguage, .quickMenu li.multiLanguage { background-color: #c90000; } 
.quickMenu li a { text-align: center; display: block;  color: #999;  font-size: 12px;   line-height: 34px; color: #fff; padding: 0 15px;}
.quickMenu li a:hover { background:  #ba0000}
.quickMenu li a i { vertical-align: middle; margin-right: 3px; margin-bottom: 2px; }
 
 
.search_bar {width:100%; height: 120px;display: none; z-index: 100; position: fixed; top:101px; left: 0; margin: 0 auto; background-color: #fafafa; border-bottom: 3px solid #DB072F; border-top:1px solid #eee;}
.search_bar .inner { display: block; width: 100%;  padding: 35px 15px 0;  max-width: 730px; margin: 0 auto;  box-sizing: border-box; position: relative;}
.search_bar .inner .searchWrap {  left:15px; right: 145px; position: absolute; }
.search_bar .inner .searchWrap input { width: 100%; display: block; height: 45px; padding: 0 15px; box-sizing: border-box; margin: 0; border:1px solid #e5e5e5; background-color: #fff; margin-right: 4px;}
.search_bar .inner button { width: 120px; height: 45px; background-color: #FF7D00; border:0; color: #fff; float: right;}
.mobileBtn { display: none; }

#header .functions { position: absolute; right:0px; top:16px;  }
#header .functions a { display: block; float: left; margin-left: 5px;  height: 36px; width: 36px; text-align: center; line-height: 28px; vertical-align: middle; font-size: 16px; box-sizing: border-box; border:1px solid #ddd;  color: #999 } 
#header .functions a:hover { border-color:#ccc; color: #333  }
#header .functions a.on { border-color: #ccc;  color: #DB072F;} 

.contentWrap { padding-top: 104px;position: relative; z-index: 1; }

#content {    box-sizing: border-box; padding: 60px 0 80px; }

.contentHeader { padding: 130px 0 130px;     box-sizing: border-box;  background-position:  center;   background-size: auto 100%; background-repeat:  no-repeat;  position: relative; background-image:url(../images/sub_header.png);   }
.contentHeader h2 { font-size: 48px; font-weight: bold; line-height: 40px; color: #fff;  text-align: center;  text-shadow:  0px 0px 6px rgba(0, 0, 0, 0.5)}

.subTitleWrap {  }
.subTitleWrap p { text-align: center; font-size: 16px; color: #fff; }

.contentHeader .breadcrumb { position: absolute; bottom:-120px; left:0px; line-height: 30px; }
.contentHeader .breadcrumb .menuSection > a, .contentHeader .breadcrumb   a.home  { display: block;  padding:0 12px 0 15px; background: url(../images/bread_arrow.png) left no-repeat ;  font-size: 14px; float: left; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);  }
.contentHeader .breadcrumb .menuSection >  a:after { content: ""; font-family: xeicon; font-size: 12px; margin-left: 5px;  }
.contentHeader .breadcrumb .menuSection >  a:hover {   }
.contentHeader .breadcrumb   a.home {     padding: 0 10px 0 0; background: none; }
.contentHeader .menuSection { display: inline-block; position: relative; }
.contentHeader .menuSection ul { display: none; position: absolute; z-index: 99; background: rgba(37,38,47,.9); border:1px solid #30313a; border-top:none; min-width: 120px; top:30px; left: 10px; }
.contentHeader .menuSection ul li {  }
.contentHeader .menuSection ul li a { display: block; padding: 3px 10px; white-space: nowrap; color: #ccc; font-size: 13px; border-top:1px solid #30313a; }
.contentHeader .menuSection ul li a:hover, .contentHeader .menuSection ul li a:focus { color: #fff; background: #25262f;     }
.contentHeader .menuSection:hover ul, .contentHeader .menuSection:focus ul { display: block; }

/* LNB */

.lnbWrap { height: 50px; border-bottom: 1px solid #ddd; position: absolute; left: 50%; transform: translateX(-50%); background-color: #fff; width: 100%; z-index: 100;  transition: all 0.3s; }
.lnbWrap * { transition: all 0.3s; }

#lnb { overflow: hidden; height: 51px;   }
#lnb li { float: left; width: 25%; }
#lnb li a { display: block; line-height: 50px; font-size: 16px; text-align: center; color: #666; padding-left: 0; transition: all 0.3s; overflow: hidden; position: relative; } 
#lnb li a:focus,
#lnb li a:hover { color: #DB072F;  }
#lnb li.current a { color: #DB072F;  font-weight: 700;  padding-left: 0 !important; border-bottom: 1px solid #DB072F;}
#lnb li.current a:after { opacity: 1;  color: #DB072F;  float: right; }

.lnbWrap.bar_fixed {top:70px; position: fixed; height: 40px; background:rgba(250, 250, 250, 0.95); }
.lnbWrap.bar_fixed #lnb { height: 41px; }
.lnbWrap.bar_fixed #lnb li a { line-height: 40px; }

/* Footer */
#footer { /*background:url(../images/footer_bg.png) center bottom no-repeat #25262f;*/ clear:both; background-color: #25262f;}
#footer .footerMenus { background: #30313a; padding: 10px 0; }

#fnb { float: left; }
#fnb li { float: left; line-height: 30px;  font-size: 13px; margin-right: 30px; }
#fnb li a { color: #ccc; }
#fnb li a:hover { color: #fff; }
#fnb li a.privacy { font-weight: bold; }

.familySite { position:relative; float: right; height: 30px;   width: 160px; margin-left: 10px;  }
.affiliatesTitle a { display:block; color:#999; font-size: 13px;  padding: 5px 10px; text-align: left; border:1px solid #555;}
.affiliatesTitle a:after { content: ""; font-family: xeicon;  font-size: 14px; color: #999;   transition: all 0.5s;  float: right; margin-left: 10px;   }
.affiliatesTitle.on a:after { content: ""; }
.affiliatesList { display:none; position:absolute; bottom:100%; right: 0; width: 100%; z-index: 90;}
.affiliatesList li { line-height: 34px; font-size: 13px;   background:#555; border-top: 1px solid #444; }
.affiliatesList li a { display: block; padding: 0 10px;  color: #ccc; }
.affiliatesList li a:focus,
.affiliatesList li a:hover { color: #fff; background: #444; }

#footer .footerInfo { color: #ddd; font-size: 12px; padding:30px 0 80px; position: relative; }
#footer .footerInfo p { margin-bottom: 10px; line-height: 2em;}
#footer .footerInfo p span { color: #999; margin: 0 20px 0 5px; }
#footer .footerInfo b { color: #fff;  font-weight: normal;}
#footer .copyright i { vertical-align: -2px; }

.footerSNS {  position: absolute; top:30px; right:0px; }
.footerSNS li { float: left; margin-left: 10px;  }
.footerSNS li a { display: block; line-height: 26px; height: 30px; width: 30px; border:2px solid #555; text-align: center; font-size: 18px; color: #999; border-radius: 20px;  }
.footerSNS li a:hover { color: #fff; border-color: #999; }

.sitemapGNB { overflow: hidden;  }
.sitemapGNB.six > li { float: left; margin-left: 2%; width: 15%; }
.sitemapGNB.five > li { float: left; margin-left: 5%; width: 16%; }
.sitemapGNB.four > li { float: left; margin-left: 5%; width: 30%; } 
.sitemapGNB.three > li { float: left; margin-left: 5%; width: 30%; }
.sitemapGNB > li:first-child { margin-left: 0; }
.sitemapGNB li .title { font-weight: normal; font-size: 20px; padding-bottom: 10px; display: block; margin-bottom: 10px; border-bottom:1px solid #ccc; line-height: 40px; position: relative;  background-size: 50px auto; background-position: right -55px; background-repeat: no-repeat; }
.sitemapGNB li .title:after { content: ""; display: block; position: absolute; bottom:-1px; border-bottom:1px solid #DB072F; width:68px; }
 

.sitemapGNB li ul { margin-bottom: 20px; }
.sitemapGNB li ul li {  }
.sitemapGNB li ul li a { display: block; line-height: 40px; color: #666; padding-left: 0; transition: all 0.3s; overflow: hidden; position: relative;  }
.sitemapGNB li ul li a:after { content:""; font-family: xeicon; font-size: 10px;  margin-right: 10px; opacity: 0; color: #999; transition: all 0.5s;  filter: alpha(opacity=0); line-height: 36px; }
.sitemapGNB li ul li a:focus,
.sitemapGNB li ul li a:hover { padding-left: 5px; color: #DB072F;  }
.sitemapGNB li ul li a:focus:after,
.sitemapGNB li ul li a:hover:after { opacity: 1;  filter: alpha(opacity=100); color: #DB072F;  margin-left: 10px; }

#sitemapFNB { overflow: hidden; text-align: center; padding: 20px; margin-top: 20px; border:1px solid #ddd; background: #fafafa; }
#sitemapFNB li { display: inline-block; margin: 0 15px; }
#sitemapFNB li:first-child { margin-left: 0; }
#sitemapFNB li  a { line-height: 30px;  color: #333;  border-bottom: 1px solid #fff;}
#sitemapFNB li  a:hover {  border-bottom: 1px solid #DB072F; }

/* Scroll to top link */
.btn_top { display: none; position: fixed; right: 20px; bottom: 45px; z-index: 1000; width: 50px; height: 50px; line-height: 48px; background-color: #ff9a00; font-size: 18px; color: #fff; text-align: center; }
.btn_top:hover { background-color: #ff9a00; color: #fff; text-decoration: none; }
.btn_top i { line-height: 40px; color: #fff; }

#mainContent { padding-top: 102px; }

/* .row.lineWrap .col {display: inline-block; vertical-align: middle;} */




/* FHD 초과시 처리 */
@media all and (min-width: 1940px) {	 
	 #header, .search_bar { width: 1920px; left: 50%; right: auto; margin-left: -960px; } 
}

@media all and (max-width: 1280px) {
	body, html { min-width: 1080px; }
	.setWidth { width: 1080px;}
	.contentHeader { padding: 110px 0; }
}

@media all and (max-width: 1080px) {
	
	body, html { min-width: 980px; }
	.setWidth { max-width: 960px;}
	
	#gnb > ul.three > li > a { width: 180px; }
	#gnb > ul.four > li > a { width: 160px; }
	#gnb > ul.five > li > a { width: 140px; }
	#gnb > ul.six > li > a { width: 120px; }
	
}

@media all and (max-width: 980px) {
	
    .langSelector.forMobile {  display: block;   top: 8px;  left: 50%;  margin-left: 255px;  }

	body, html { min-width: 100%; }
	.setWidth { width: 720px;}

    
	.search_bar { top:85px; height: 100px;}
	.search_bar .inner { padding-top: 25px; }
    
	.extraMenus { height: 28px; }
	.companyName { line-height: 28px; }
	.quickMenu li { height: 28px }
	.quickMenu li a { line-height: 28px; }

	#header { padding-top: 28px; height: 88px; }
	#header .logo { top:15px;  } 
	#header .logo a { height: 32px; background-size:  auto 32px;  }
	#header .functions { top:11px; }
	
	#header .headerWrap { height: 59px  }

	.mobileMenuWrap {   position: fixed; top:88px;    right:-280px; bottom:0px; width: 280px;  background: #25262f; z-index: 102; overflow-y: auto; }
	.mobileMenuBackground { display: none; position: fixed; z-index: 101; left:0px; right:0px; bottom:0px; top:88px; background: transparent;  background: rgba(0,0,0,.3) }
 
	#mainContent { padding-top: 88px; }
 
	#gnb { float: none; margin: 10px;  }
	#gnb .menuImg { margin: 0; zoom: 0.5; position: absolute; top:10px; left:-10px; padding: 10px; display: block;}
	#gnb > ul {   }
	#gnb > ul > li { margin: 0;  float: none; width: auto;  padding-bottom: 10px;  }
	#gnb > ul > li:first-child { border-top:none; }
	#gnb > ul > li > a { color: #eee; border:none; margin: 0 auto; padding: 0; line-height: 45px; font-size: 14px; border-top:1px solid #424450; height: 35px; padding-left: 30px; width: auto !important;  text-align: left;   position: relative; }
	/*#gnb > ul > li > a:after { content: ""; border-bottom: 2px solid #5b5c6a; position: absolute; width: 75px;  bottom:0px; left: 0px;}*/
 
	#gnb > ul > li.current > a { font-weight: bold;  }
	#gnb > ul .depth2 { display: block !important;   margin: 0 auto; padding: 0; border-left: none; overflow: hidden; height: auto !important; }
	#gnb > ul .depth2 a {  text-align: left; border-color: #444; color: #999; font-size: 13px; line-height: 30px;    padding-left: 18px; margin-left: 11px; border-left: 1px solid #30313a; }
	#gnb > ul .depth2 > li.current > a { border-left-color: #5f6376;  color: #fff;}
	
	.contentWrap { padding-top: 88px; }

	.lnbWrap { width: 100%; padding: 0 20px; float: left;   margin-left: -20px; background: #eee; height: 40px; position: relative; }
	.lnbWrap .title { font-size: 16px; line-height: 40px; border:none; padding-bottom: 0; width: 140px;  background: #413f3c; margin-left: -20px; padding-left: 20px; color: #fff; float: left;  }
	.lnbWrap .title:after { display: none;  }

	#lnb { position: absolute;   width: auto;   background: #eee; padding: 39px 20px 0; height: 0; overflow: hidden; left:160px; right:0px; top:0px; z-index: 20; }
	#lnb.open { height: auto; }
	#lnb li a { width: 100%; }
	#lnb li.current { position: absolute; top:0px; left: 20px; right: 13px; display: block; }
	#lnb li.current a:after { content: "\e619"; font-size: 16px; color: #999; }
	#lnb.open li.current a:after { content: "\e60e"; font-size: 16px; color: #666; }

	.contentHeader {  padding: 90px 0;  }
	.contentHeader .breadcrumb { bottom:-90px; left: 10px;}

	

	#sitemap li .title { font-size: 16px; line-height: 20px; }
	#sitemap li .title:after { width: 60px; }

	#sitemap > ul > li { width: 100%; margin: 0; }
	#sitemap > ul > li li { float: left; margin-right: 10px; min-width: 30%; }
	
	.row .col.half.mobileHalf {
    width: 49% !important;
    margin: 0 !important;
    float: left !important;}
    .row .col.half.mobileHalf:first-child {
    margin-right: 2% !important;
	
}

@media all and (max-width: 740px) {
	
	
	#content { padding: 40px 0 60px; }
	.pcView { display: none !important; }
	.mobileView { display: block !important; }
	.noWrap { white-space: normal; }
	div.mobileView { display: block !important; }
	br.mobileView { display: inline !important; }
	.setWidth { width: 100%; padding-left:15px !important; padding-right: 15px !important; }
	#content { width: 100%; float: none; }

	.mobileBtn { margin-right: -10px; }
	
		.contentHeader h2 { font-size: 40px;   }

	#headMenu ul { width: auto;   }
	#headMenu ul li:first-child { margin-left: 5px; }
	
	.sitemapGNB > li { margin-left: 0 !important; width: 100% !important;  } 
	#sitemapFNB li  { display: block; margin: 0; text-align: center; }
	
	#header .logo { left: 15px; }
	#header .functions { right: 15px; }

    .langSelector.forMobile { display: block; top: 8px;left: auto;right: 15px;margin-left: 0; }
	
.familySite { float: none; width: 100%; padding-top: 10px; clear: both; margin-left: 0px; }
 
.familySite .affiliatesList { bottom: 30px; }
	
.footerSNS  { position: relative; top:auto; right: auto; margin: 20px 0 20px -10px; overflow: hidden; }	
.footerSNS li { zoom: 0.9; }

}

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

	body, html { min-width: 320px; }
	.quickMenu { margin-right: -16px; }
	.quickMenu li a { padding: 0 10px; font-size: 11px; } 
	.footerInfo em  { display: none; }
	
	#footer .footerMenus { padding: 15px 0; }



	#fnb { float: none; overflow: hidden; }
	#relatedLink { float: none; clear: both; width: auto; margin-top: 10px; }

	#sitemap > ul > li li { float: left; margin-right: 10px; min-width: 45%; }
	.contentHeader { padding: 80px 0; background-size: cover; }
	.contentHeader h2 { font-size: 32px;   }
	.contentHeader .breadcrumb { bottom:-90px;  zoom: .9; }
	
	.companyName {display: none;}
	.quickMenu li:first-child {border-left: 0;}
	ul.quickMenu {display: block; overflow: hidden;  box-sizing: border-box; border-right: 0;}
	.quickMenu li:nth-child(2) {display: none;}
	
}

@media all and (max-width: 320px) {
	
	.lnbWrap .title { width: 120px; }
	#lnb { left: 140px; }
	.setWidth {  padding-left: 10px !important; padding-right: 10px !important; }
	#headMenu ul li { padding: 0 10px; }
	#headMenu ul li:first-child { margin-left: 0px; }
	
	.contentHeader { padding: 60px 0; }
	.contentHeader h2 { font-size: 26px;   }
	.contentHeader .breadcrumb { bottom:-70px;  zoom: .85; }
 
 
}