@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2018-01-16
******************************************************** */

@import url("./font.css");	/* 나눔고딕 */ 
@import url("//cdn.jsdelivr.net/nanumsquare/1.0/nanumsquare.css");
@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

/* layout */
body, table, th, td, button, select, input {
	font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}

body { background:url("/images/layout/bg.jpg") center top; }
#wrap {overflow:hidden; width:100%; min-width:1200px; position:relative; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */

/* ****************** 공통클래스 ********************** */
.area{ width:1200px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.sub-area {padding:0 100px;}
.sub-area-2 {padding:0 50px;}
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.text-ellipsis{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:inherit; color:inherit; vertical-align:middle;}
.text-ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.font-square { font-family:"Nanum Square",'NanumSquare', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-godo {font-family: 'Godo', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-myeongjo {font-family:'Nanum Myeongjo', NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-noto {font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

/* ****************** HEADER ********************** */
#header{background-color:#fff;}
#headerInner{position:relative; height:83px;}
#header .logo{position:absolute; top:21px; left:0px; z-index:100;}
.header-util-wrap {position:absolute; right:0; top:26px;}
.header-util {float:left;}
.header-util ul li {float:left; margin:0 8px;}
.header-util ul li a {display:block; font-size:12px; line-height: 32px; letter-spacing: -0.5px; color:#999;}

.header-util ul li a:hover {color:#333;}

.header-search {float:left; width:195px; height:32px; box-shadow:inset 1px 2px 3px #BBBBBB; background-color:#EAEAEA; line-height: 32px; border-radius:15px; margin-left: 15px;}
.header-search input {float:left;margin-top: 3px; margin-left: 13px; width:140px; border:0; font-size:13px; line-height: 25px; letter-spacing: -0.5px; color:#AAA; font-weight: 300; background-color:#EAEAEA; outline: none;}
.header-search button {float:right;display:inline-block; margin-right:10px; margin-top: 3px;}

#header.fixed {height:171px;}
#header.fixed #gnb {position:fixed; top:0px; left:0; width:100%;z-index:99; min-width:1200px;}
.gnb-wrap.fixed {position:fixed; top:47px; left:0; width:100%; z-index:98;}

/* Header :: GNB */
.main-menu-bg {background-color:#fff; box-shadow:0 0 8px rgba(0, 0, 0, 0.15); position:relative; z-index:9;}
#gnb{position:relative;; top:0px; left:0px; width:100%; z-index:99; background-color:#48acf7;}
#gnb > ul{text-align:center; margin:0px auto; background-color:#48acf7; position:relative; z-index:10; max-width:1200px; width:100%;}
#gnb > ul > li{position:relative; display:inline-block;}
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{position:relative; display:block; height:47px; line-height:47px; color:#fff; font-size:17px; letter-spacing:-0.5px; padding:0 62px; font-weight:600; }
#gnb > ul > li:first-child a {padding-left: 0; text-align:left;}
#gnb > ul > li:last-child a {padding-right: 0;}
#gnb > ul > li > a::before {content:""; position:absolute; width:6px; height:9px; background:url("/images/layout/main_menu_line.png") no-repeat center top; left:0; top:20px;}
#gnb > ul > li:first-child > a::before {background:none;}

#gnb > ul > li.on::after, #gnb > ul > li:hover::after {content:""; position:absolute; width:100%; height:5px; background:url("/images/layout/gnb_arrow.png") no-repeat center bottom; left:50%; margin-left: -95px; bottom:-5px;}
#gnb > ul > li.gnb07.on::after, #gnb > ul > li.gnb07:hover::after {margin-left: -25px;}
#gnb > ul > li.on .gnb-2dep {display:block;}


#gnb > ul > li.gnb01 .gnb-2dep {width:1200px;}
#gnb > ul > li.gnb02 .gnb-2dep {width:300px; left:48px}
#gnb > ul > li.gnb03 .gnb-2dep {width:500px; left:65px}
#gnb > ul > li.gnb04 .gnb-2dep {width:1200px; left:50%; margin-left: -375px;}
#gnb > ul > li.gnb05 .gnb-2dep {width:600px; left:50%; margin-left: -83px;}
#gnb > ul > li.gnb06 .gnb-2dep {width:800px; left:50%; margin-left: -530px;}
#gnb > ul > li.gnb07 .gnb-2dep {width:500px; left:50%; margin-left: -380px;}


/* Header :: sub-GNB */
.gnb-wrap {height:41px; background-color:#fff; box-shadow:0 0 8px rgba(0, 0, 0, 0.15); position:relative; z-index:5;}
.gnb-2dep {display:none; position:absolute; height:41px;}
.gnb-2dep li {float:left; margin-left: 50px;}
.gnb-2dep li:first-child {margin-left: 0;}
.gnb-2dep li a {display:block; font-size:15px; letter-spacing: -0.5px; color:#777777; line-height: 41px; }
.gnb-2dep li.on a {color:#48acf7; font-weight: 500;}

/* ****************** FOOTER ********************** */
#footer{background-color:#E5EDF1; }

/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; bottom:-100px; right:15px; display:block; width:46px; height:46px; background-color:#444; text-align:center; line-height:46px; color:#fff;
	opacity:0;filter:Alpha(opacity=0);
	-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%;
}
.to-top-btn.fixed{bottom:15px; opacity:1.0;filter:Alpha(opacity=100);}

.foot-util {background-color:#83a4bd; height:39px; }

/* Footer :: 푸터메뉴 */
.foot-menu{float:left; overflow:hidden;}
.foot-menu li{float:left; margin-left: 35px; position:relative;}
.foot-menu li::before {content:"/"; position:absolute; color:#fff; left:-20px; top:14px; font-size:12px; opacity:0.2;filter:Alpha(opacity=20);}
.foot-menu li:first-child::before {content:"";}
.foot-menu li:first-child {margin-left: 0;}
.foot-menu li a {display:block; font-size:13px; line-height: 39px; letter-spacing: -0.25px; color:#fff; font-weight: 300;}

.foot-link {float:right;}
.foot-link a {display:inline-block; position:relative; padding-left: 10px; margin-right:20px; line-height: 39px; font-weight: 400; color:#fff;}
.foot-link a::before {content:""; position:absolute; left:0; top:20px; width:2px; height:2px; border-radius:50%; background-color:#fff;}


/* Footer :: 패밀리사이트 */
.family-site-box{float:right; position:relative; width:130px; text-align:left; background-color:#53636f; padding:0 5px;}
.family-site-box .family-site-open-btn{display:block; height:39px; line-height:39px; text-indent:10px; font-size:13px; color:#fff;  font-weight: 300;}
.family-site-box .family-site-open-btn .arrow {display:inline-block; margin-left: 20px;}
.family-site-box.open .family-site-open-btn img{transform:rotate(180deg); right:-5px}
.family-site-list{position:absolute; bottom:39px; left:0px; width:100%;  padding:10px 0; background-color:#fff; border:1px solid #ddd; border-bottom:0;  z-index:11; display:none; box-sizing:border-box;}
.family-site-list a{display:block; padding:10px; color:#333; font-size:13px;}
.family-site-list a:hover{color:#000; text-decoration:underline;}


/* Footer :: 하단정보 */
.footer-info {padding:30px 0;}

.family-address{float:left; font-size:13px; line-height:26px; color:#333;}
.family-address img {float:left; margin-right:65px;}
.family-address .address-info {float:left;}
.family-address .address-info p {font-size:13px; line-height: 23px; letter-spacing: -0.35px; color:#2a2a2a; font-weight: 300; margin-bottom: 15px;}
.family-address address{color:#646464; font-size:13px; line-height: 26px; letter-spacing: -0.25px; font-weight: 300;}
.family-address address span {color:#006ab9;}


.footer-sns {float:right; }
.footer-sns ul li {float:left; margin-left: 12px;}
.footer-sns ul li:first-child {margin-left: 0;}
.footer-sns ul li a {display:block;}

/* ****************** QUICK MENU ********************** */
#quickMenu {position:fixed; right:15px; top:220px; text-align:center; border-radius:5px; border:1px solid #dfdfdf; z-index:999;}
#quickMenu.main {top:150px}
#quickMenu .quick-home {display:block; width:65px; padding-top: 15px; height:50px; font-size:12px; line-height: 17px; letter-spacing: -0.5px; color:#fff; background-color:#48acf7; border-radius:5px 5px 0 0;}
#quickMenu .quick-home:hover {background-color:#23b2ec; color:#fff;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
#quickMenu ul {padding:8px 0;background-color:#fff;}
#quickMenu ul li a {display:block; padding:8px 0; font-size:12px; line-height: 15px; letter-spacing: -0.5px; color:#8b8b8b; margin-top: 5px;}
#quickMenu ul li a i {padding-bottom:5px;}
#quickMenu ul li a:hover {color:#48acf7;}
#quickMenu .top-btn {display:block; width:65px; height:38px; padding-top: 7px; background-color:#585858; border-radius:0 0 5px 5px;}
#quickMenu .top-btn:hover {background-color:#999; color:#fff;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
#quickMenu .top-btn p {font-size:12px; line-height: 17px; letter-spacing: -0.5px; color:#fff;}
#quickMenu .main {top:150px;}

/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
.sub-visual {height:210px;}

#visual{width:100%; height:230px;}
#visual .visual-txt{position:relative; padding-top:78px; text-align:center; letter-spacing:-0.5px; color:#fff;}
#visual .visual-txt:before{content:""; display:block; width:1px; height:36px; position:absolute; top:0px; left:50%;background-color:#fff;}
#visual .visual-sub-txt{font-size:15px; font-weight:300; text-transform:uppercase; } 
#visual .visual-tit{font-weight:400; font-size:36px; padding:20px 0 30px;}
/*  SUB LAYOUT :: 상단정보 */
#middleArea{margin-top: -120px;}
#contentInfoCon{overflow:hidden; margin-bottom:15px;}
#contentInfoCon .content-tit{float:left; color:#282828; font-size:35px; font-weight:600; letter-spacing:-0.5px; padding-top: 15px; position:relative;}
#contentInfoCon .content-tit::before {content:""; position:absolute; width:40px; height:4px; background-color:#0973AF; border-radius:5px; left:0; top:0;}
#content {margin-bottom: 40px; border:1px solid #E6E6E6; background-color:#fff; padding: 50px 0px;}

.location{overflow:hidden; float:right; padding-top:32px;}
.location li{float:left; color:#333333; font-size:14px; letter-spacing:-0.35px;}
.location li i{font-size:18px; margin-top:-2px;}
.location li:before{display:inline-block; content:">"; vertical-align:middle; margin:-4px 8px 0 10px; font-family:"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; color:#333333; font-size:12px;}
.location li:first-child img{padding-bottom: 5px;}
.location li:first-child:before{display:none;}
.location li:last-child{color:#0074b8;}


/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; }
.footer-modal-content h1{height:60px; line-height:60px; font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0; background-color:#777; color:#fff;}
.modal-close-btn{position:absolute; top:11px; right:10px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }

/* 사이트맵 */
.sitemap-wrapper{padding:30px;}
.sitemap-wrapper > ul{overflow:hidden;}
.sitemap-wrapper > ul > li{float:left; width:20%; text-align:center;}	/* 메뉴 갯수에 맞게 %로 계산, 두줄로 들어갈 경우 height값 설정 */
.sitemap-wrapper.menu4 > ul > li{width:25%;}
.sitemap-wrapper.menu6 > ul > li{width:16.6%;}
.sitemap-wrapper.menu7 > ul > li{width:14.2%;}
.sitemap-wrapper > ul > li > h2{color:#191919; margin:0 2% 20px 2%; padding-bottom:20px; font-size:16px; border-bottom:1px solid #888; letter-spacing:-1.0px; margin-bottom:20px; font-weight:500;}
.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5%;}
.sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:10px 0; color:#666; font-size:13px; font-weight:400; line-height:1.2em;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#000; text-decoration:underline;}

@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content h1{height:46px; line-height:46px; font-size:18px; text-align:left; padding:0 15px}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
	/* 사이트맵  */
	.sitemap-wrapper{padding:15px}
}