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

@import url("file:///C|/Users/Administrator/AppData/Local/Microsoft/Windows/Temporary Internet Files/Content.IE5/Y2Z43MDT/font.css");	/* 나눔고딕 & 본고딕 */
@import url('https://fonts.googleapis.com/css?family=Poppins:600'); /* 영문 :: Poppins */
@import url('https://fonts.googleapis.com/css?family=Teko:400,500'); /* 영문 :: Teko */

/* layout */
body,  button, select, input {
	font-family:/*'Poppins',*/ "Noto Sans KR", "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}
table, th, td {
	font-family:"Noto Sans KR", "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:1200px; position:relative; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */

/* ****************** 공통클래스 ********************** */
.area{ width:1200px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.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-teko{font-family:'Teko', sans-serif;}
.font-noto {font-family: "Noto Sans KR", "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

/* ****************** HEADER ********************** */
#header{position:fixed; top:0; left:0; width:100%; min-width:1200px; height:89px; border-bottom:1px solid #fff; border-bottom:1px solid rgba(255,255,255,0.3); z-index:100;}
#headerInner{position:relative; width:100%; height:100%;}
#header .logo{position:absolute; top:24px; left:40px; z-index:100;}
#header .fixed-home-btn{position:absolute; top:15px; left:0; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); opacity:0;filter:Alpha(opacity=0); z-index:100;}
#header .open-home-btn {position:absolute; top:24px; left:40px; z-index:100; opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
#header .util{position:absolute; top:0; right:0; /* width:200px; */ height:100%; z-index:100;}
#header .util > button{float:left; width:100px; height:100%; background-color:#242424; text-align:center;}
#header .util > button i{font-size:30px; color:#fff; vertical-align:middle;}

#gnbBg {position:absolute; z-index:9; left:0; top:90px; width:100%; height:0;background-color:#fff; }

/* Header :: GNB */
#gnb{position:absolute; top:0px; left:0px; width:100%; z-index:99; text-align:center;}
#gnb > ul{display:inline-block; }
#gnb > ul > li{position:relative; float:left;}
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{position:relative; overflow:hidden; display:block; height:89px; line-height:89px; color:#fff; font-size:18px; letter-spacing:-0.5px; padding:0 35px; font-weight:600; }
#gnb > ul > li > a p {position:relative; top:0; -webkit-transition: top 0.5s; -moz-transition: top 0.5s; -ms-transition: top 0.5s; -o-transition: top 0.5s; transition: top 0.5s;}
#gnb > ul > li:hover > a .en, #gnb > ul > li:hover > a .kor {top:-89px;}

#gnb > ul > li::after {content:""; position:absolute; z-index:10; width:0; height:3px; top:88px; left:50%; background-color:#12845d; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
#gnb > ul > li:hover::after {content:""; position:absolute; width:115px; margin-left: -55px;}

.gnb-2dep {padding-top: 30px; display:none; height:0; }
.gnb-2dep li a {display:block; text-align:center; font-size:15px; line-height: 42px; letter-spacing: -0.5px; color:#676767}
.gnb-2dep li a:hover {color:#12845d;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.gnb-2dep li a:hover  span {border-bottom: 1px solid #12845d; font-weight: 600;}

/* Header :: open */
#header.open {background-color:#fff; border-bottom: 1px solid #DDDDDD;}
#header.open .logo {display:none;}
#header.open .open-home-btn{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}

#header.open #gnb > ul > li > a {color:#454545;}
#header.open #gnb > ul > li:hover > a, #header.open #gnb > ul > li.on > a{color:#12845d;}

#header.open #gnbBg {border-bottom: 1px solid #ddd; background:url(file:///C|/Users/Administrator/AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.IE5/kr/images/main/header_bg1.jpg) #fff no-repeat 20% 100%;}

/* Header :: Fixed */
#header.fixed{height:72px; background-color:#fff; border-bottom:1px solid #DDDDDD;}
#header.fixed .logo{display:none;}
#header.fixed .fixed-home-btn{left:40px; -ms-transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); opacity:1.0;filter:Alpha(opacity=100);}
#header.fixed #gnbBg  {top:73px;}
#header.fixed.open .open-home-btn {display:none;}
#header.fixed #gnb > ul > li > a {color:#525252; height:72px; line-height: 72px; overflow:hidden;}
#header.fixed #gnb > ul > li:hover > a .en, #header.fixed #gnb > ul > li:hover > a .kor {top:-72px;}
#header.fixed #gnb > ul > li::after {top:71px;}

/* ****************** FOOTER ********************** */
#footer{width:100%;}
/* Footer :: 프랜차이즈 */
#footerFranchise{width:100%; height:110px; border-bottom:1px solid #acacac; background:url(/images/layout/footer_franchise_bg.jpg) no-repeat center top;}
.footer-franchise-inner{height:50px; padding:30px 0;}
.footer-franchise-info{display:table; float:left; width:50%;}
.footer-franchise-info dt, .footer-franchise-info dd{display:table-cell; vertical-align:middle;}
.footer-franchise-info dt{width:180px;}
.footer-franchise-info dt strong, .footer-franchise-info dt span{display:block;}
.footer-franchise-info dt strong{font-size:24px; color:#5c5c61; letter-spacing:7.5px; font-weight:600; margin-bottom:10px;}
.footer-franchise-info dt span{font-size:18px; color:#4c4c4c; color:rgba(76,76,76,0.3); letter-spacing:2px;}
.footer-franchise-info dd b, .footer-franchise-info dd em{display:block;}
.footer-franchise-info dd b{font-size:40px; color:#12845d; font-weight:600; letter-spacing:1px;}
.footer-franchise-info dd em{font-size:14px; line-height:28px; color:#7f7f7f; letter-spacing:-0.5px;}
.footer-franchise-list{float:right;}
.footer-franchise-list > li{float:left; line-height:50px; margin-left:70px;}
.footer-franchise-list > li:first-child{margin-left:0;}
.footer-franchise-list > li a{font-size:16px; color:#7a7a7a; letter-spacing:-0.25px;}
.footer-franchise-list > li img{margin-right:10px;}

/* Footer :: FooterInner */
#footerInner{width:100%; background-color:#323233;}
/* Footer :: 하단정보 */
.footer-address-box{float:left; padding:60px 0;}
.footer-logo{margin-bottom:34px;}
.footer-sns{margin-bottom:33px;}
.footer-sns > li{display:inline-block; vertical-align:top; margin-left:5px;}
.footer-sns > li:first-child{margin-left:0;}
.footer-address{font-size:13px; line-height:24px; color:#fff; color:rgba(255,255,255,0.5); letter-spacing:-0.5px; margin-bottom:30px;}
.footer-address span{display:block;}
.footer-address-box address{color:#fff; color:rgba(255,255,255,0.3); font-size:14px; line-height:28px;}

.footer-menu {float:right;}
.footer-menu > ul > li {float:left; border-left: 1px solid #424243; height:420px; padding-top: 55px; width:135px;}
.footer-menu > ul > li h3 {font-size:18px; letter-spacing: -0.5px; color:#fff; font-weight: 600; margin-bottom: 70px;}
.footer-menu > ul > li ul li {font-size:15px; line-height: 44px; letter-spacing: -0.5px; color:#fff; font-weight: 500;}
.footer-menu > ul > li ul li a:hover {color:#12845d; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

.footer-btn a {display:block; border:1px solid rgba(255, 255, 255, 0.2); text-align:center; height:30px; width:120px;  line-height: 30px; margin-bottom: 10px; font-size:13px;color:#fff; color:rgba(255,255,255,0.5);}


/* quickmenu :: 퀵메뉴 */
#quickMenu {position:fixed; right:0; bottom:-100px; text-align:center; z-index:90; opacity:0;filter:Alpha(opacity=0); visibility:hidden;
	-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;transition:all 0.6s; }
#quickMenu.fixed {bottom:15%; visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
.quick-menu-wrap {position:relative; width:74px; padding-top: 470px;}
.quick-online {position:absolute; top:0; right:0; width:74px;  background-color:#272C32; border-radius:13px 0 0 13px; text-align:center; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
/* .quick-online.two {top:100px;} */
.quick-online.two {top:220px;}
.quick-online a {display:block;/*  height:224px; */ padding:20px 0;}
.quick-online p {margin-top: 5px; margin-bottom: 20px; font-size:14px; line-height: 17px; letter-spacing: 1px; color:#e6e6e6; font-weight: 500; }

.quick-online:hover {background-color:#12845D}

.quick-online-two {position:absolute; top:220px; right:0; width:74px;  background-color:#272C32; border-radius:13px 0 0 13px; text-align:center; -webkit-transition: all 0.3s;}
.quick-online-two a {display:block;/*  height:224px; */ padding:20px 0;}
.quick-online-two p {margin-top: 5px; margin-bottom: 20px; font-size:14px; line-height: 17px; letter-spacing: 1px; color:#e6e6e6; font-weight: 500; }


.quick-online-two:hover {background-color:#12845D;}


.quick-sns li {margin-bottom: 13px;}
.to-top-btn {width:47px; height:47px; background-color:#fff;  opacity:0.9;filter:Alpha(opacity=0.9); margin:0 auto; -webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;border-radius:50px; display:block; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.to-top-btn img {display:inline-block; line-height:32px; padding-top:10px;}
.to-top-btn p {font-size:16px; line-height: 26px; color:#525252;}




/* footer-백업-180528 */
/* #quickMenu {position:fixed; right:0; bottom:-100px; text-align:center; z-index:90; opacity:0;filter:Alpha(opacity=0); visibility:hidden;
	-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;transition:all 0.6s; }
#quickMenu.fixed {bottom:10%; visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
.quick-menu-wrap {position:relative; width:74px; padding-top: 305px;}
.quick-online {position:absolute; top:0; right:0; width:74px;  background-color:#272C32; border-radius:13px 0 0 13px; text-align:center; -webkit-transition: all 0.3s;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;}
.quick-online.two {top:300px;}
.quick-online a {display:block;height:224px; padding:30px 0;}
.quick-online p {margin-top: 5px; margin-bottom: 20px; font-size:15px; line-height: 18px; letter-spacing: 1px; color:#e6e6e6; font-weight: 500; }

.quick-sns li {margin-bottom: 13px;}
.to-top-btn {width:47px; height:47px; background-color:#fff;  opacity:0.9;filter:Alpha(opacity=0.9); margin:0 auto; -webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;border-radius:50px; display:block; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.to-top-btn img {display:inline-block; line-height:32px; padding-top:10px;}
.to-top-btn p {font-size:16px; line-height: 26px; color:#525252;} */


/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{width:100%; height:470px; text-align:center; position:relative;}
.visual-tit {position:relative;}
.visual-tit a {display:inline-block; font-size:24px; color:#fff; }
.visual-tit p{font-size:16px; letter-spacing: -0.5px; color:#fff; line-height: 23px;}
.visual-tit h2 {font-size:72px; letter-spacing: -0.25px; color:#fff; font-weight: 500; padding-bottom: 15px; position:relative; margin-bottom: 25px; padding-top: 175px;}
.visual-tit h2::after {content:""; position:absolute; bottom:0; left:50%; margin-left: -13.5px; width:27px; height:2px; background-color:rgba(255, 255, 255, 0.8)}

.sub-visual-prev {position:absolute; z-index:10; left:0; top:230px;}
.sub-visual-next {position:absolute; z-index:10; right:0; top:230px;}
.sub-visual-prev img {margin-right:30px}
.sub-visual-next img {margin-left: 30px;}

.sub-tab {position:absolute; left:0; bottom:0; width:100%; height:70px; background-color:rgba(33, 34, 41, 0.8);}
.sub-tab ul li {float:left; width:20%; text-align:center;}
.sub-tab ul li a {display:block; font-size:17px; line-height: 70px; letter-spacing: -0.5px; color:#fff; position:relative;}
.sub-tab ul li a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:21px}
.sub-tab ul li:hover a::after, .sub-tab ul li.on a::after, .sub-tab ul li:hover + li a::after, .sub-tab ul li.on + li a::after, .sub-tab ul li:first-child a::after {background-color:transparent}
.sub-tab ul li:hover a, .sub-tab ul li.on a {background-color:#fff; font-weight: 600; color:#454545; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

/*  SUB LAYOUT :: 상단정보 */
#middleArea{padding-top:100px}
#contentInfoCon{overflow:hidden; margin-bottom:20px;}
#contentInfoCon .content-tit{float:left; color:#282828; font-size:35px; font-weight:500; letter-spacing:-0.6px;}
.location{overflow:hidden; float:right; padding-top:18px;}
.location li{float:left; color:#a7a7a7; font-size:13px; letter-spacing:-0.5px;}
.location li i{font-size:18px; margin-top:-2px;}
.location li:before{display:inline-block; content:">"; vertical-align:middle; margin:0px 8px 0 10px; font-family:"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; color:#c0c0c0; font-size:12px;}
.location li:first-child:before{display:none;}
.location li:last-child{color:#333;}


/* ****************** 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:22px; font-weight:400; letter-spacing:-0.5px; text-align:center; padding:0; background-color:#12845d; 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}
}


/* tab */
.tab-container{width:100%; position:relative; height:801px;}
.tab-list{width:100%; overflow:hidden;}
.tab-list li{float:left;}
.sub-content{width:100%;}
.sub-content article{width:100%; display:none;}