@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2021-04-13
******************************************************** */

/* ****************** LAYOUT ********************** */
.btn_submit{ min-width: 50px;}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }
.area{ max-width:1300px; margin:0px auto; position:relative} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box { max-width:1600px; margin:0px auto; position:relative;}
/* -------- 공통 :: 버튼 -------- */
.cm-button-style01{position:relative;box-sizing:border-box;border:1px solid #222;display:inline-block;text-align:center;}
.cm-button-style01:before{position:absolute; bottom:0px; left:0; width:100%; height:100%; background-color:#222; content:""; transition:transform 0.5s; transform: scaleY(0); transform-origin:center top;  }
.cm-button-style01 em{position:relative;color:#222;transition:all 0.3s;}
.cm-button-style01:hover:before{ transform: scaleY(1); transform-origin:center bottom;  }
.cm-button-style01:hover em{color:#fff; }

/*공통 :: 버튼2*/
.btn_more {position: relative;display: inline-block;height: 30px; color: #222;}
.btn_more > span {position: relative;display: inline-block;}
.btn_more .icon_more {position: absolute;left: 0;top: 0;display: flex; justify-content: flex-start; align-items: center;width: 30px;height: 30px;background-color: #123863; border-radius: 15px;overflow: hidden;transition: width 0.5s cubic-bezier(0.9, 0, 0.1, 1);}
.btn_more .icon_more .arrow {width: 15px;margin-left: 7px;transition: all .3s; font-size:17px; color:#fff}
.btn_more .txt {display: flex;align-items: center;height: 30px; padding-right: 15px;margin-left: 37px; font-size: 17px;font-weight: 500;transition: all 0.2s .2s;}
.biz_list .btn_more .txt {font-weight: 400;}
.btn_more:hover .icon_more {width: 100%;transition: width 0.5s cubic-bezier(0.9, 0, 0.1, 1);}
.btn_more:hover .icon_more .arrow{margin-left: 10px;transition: all .2s;}
.btn_more.white .icon_more {background-color: #fff;}
.btn_more.white .txt,.btn_more:hover .txt {color: #fff;}
/* ****************** HEADER ********************** */
#header{
	position:absolute; height:100px; top:0; left:0;width:100%; z-index:99; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}	/* 배경위에 헤더가있으면 absolute변경 후 headerInnerWrap 배경삭제 */
#headerInnerWrap{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:99;}
#headerInner{background-color:#fff; /*max-width:1300px;*/ max-width:1430px; padding: 0 40px; position:relative; height:100%; margin:0px auto; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;}
#header.over #headerInner{border-radius: 0;}
#header .logo{position:relative;z-index:100;float:left;display: table;height: 100%;}
#header .logo a{display: table-cell; height: 100%;vertical-align: middle;}
#header .logo img{display:block; vertical-align:top;}

/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9997;}	/* gnb overlay BG */
#gnb{position:absolute; text-align:right; top:0; left:0; width:100%; z-index:99;}
#gnb > ul{display:inline-block; *display:inline;*zoom:1;/*margin-right: 15vw;*/margin-right: 12vw} 
#gnb > ul > li{position:relative; float:left; word-break:keep-all; }
#gnb > ul > li > a{position:relative; z-index:100; display:block;padding:0 45px; text-align:center; color:#222; font-size:18px; letter-spacing:-0.2px; font-weight:400; -webkit-transition:all 0.5s; transition:all 0.5s; line-height:100px;}
#gnb > ul > li > a:before{position:absolute; left:50%; width:0;  bottom:25px; height:3px; background-color:#123863; content:"";  -webkit-transition:all 0.5s; transition:all 0.5s; }
#gnb > ul > li:hover > a:before,
#gnb > ul > li > a:hover:before{margin-left:-32px; width:65px;}
#gnb > ul > li:hover > a{color:#123863}

/* GNB :: 2차 각각메뉴 */
#gnb.total-menu > ul > li .gnb-2dep{
	/* display:none; */
	position:absolute; 
	top:100px; 
	left:50%; 
	z-index:99;
	width:220px;
	margin-left:-110px;
	text-align:left; 
	visibility:hidden;
	opacity:0;filter:Alpha(opacity=0);
}
#gnb.total-menu > ul > li .gnb-2dep:before{content:""; position:absolute; top:0; left:0px; right:0px; height:0; opacity:0;filter:Alpha(opacity=0); background-color:#123863; -webkit-transition:all 0.4s; transition:all 0.4s}
#gnb.total-menu > ul > li .gnb-2dep{padding:15px 0;}
#gnb.total-menu > ul > li .gnb-2dep li{position:relative; padding:8px 30px; opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0s 0s;-moz-transition:all  0s 0s;-o-transition:all  0s 0s;-ms-transition:all  0s 0s;transition:all  0s 0s; }
#gnb.total-menu > ul > li .gnb-2dep li a{ display:block; color:rgba(255,255,255,0.7); font-size:16px; font-weight:400; line-height:1.3; text-align:center}
#gnb.total-menu > ul > li .gnb-2dep li a:hover{color:rgba(255,255,255,1);}
/* over했을때 */
#gnb.total-menu > ul > li:hover .gnb-2dep:before{height:100%; opacity:1.0;filter:Alpha(opacity=100);}
#gnb.total-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#gnb > ul > li .gnb-2dep.open li{opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(1){-webkit-transition-delay: 0.1s; transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(2){-webkit-transition-delay: 0.2s; transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(3){-webkit-transition-delay: 0.3s; transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(4){-webkit-transition-delay: 0.4s; transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(5){-webkit-transition-delay: 0.5s; transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(6){-webkit-transition-delay: 0.6s; transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(7){-webkit-transition-delay: 0.7s; transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open li:nth-child(8){-webkit-transition-delay: 0.8s; transition-delay:0.8s;}
/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

/* ****************** 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); }
}

#footer{position: relative; width: 100%; background: #383c47 /*url("../../img/ftr_cover.png") center top no-repeat; -webkit-background-size: contain; background-size: contain*/;}
#footerInner{height: 100%; position:relative;}
/* Footer :: TOP버튼 */
.to-top-btn{position:absolute;top: -30px;left: 50%;margin-left: -30px;display:block;width:60px;height:60px;text-align:center;font-size: 14px;font-weight: 400;line-height:60px;color:#fff;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transition:all 0.3s;-moz-tran3sition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;background: rgb(122,181,199); /* Old browsers */background: -moz-linear-gradient(45deg,  rgb(122,181,199) 0%, rgb(107,155,240) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(45deg, rgb(125 173 232) 0%, rgb(18 56 99) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(45deg,  #123863) 0%,rgb(107,155,240) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123863', endColorstr='#6b9bf0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.to-top-btn:hover{color: #fff;}
@media all and (min-width:800px){
	.to-top-btn:hover{top: -33px; margin-left: -33px; color: #fff; width:66px; height:66px; line-height: 66px;}
}
/* -------- FOOTER :: 상단 -------- */
#footerTop{padding-top: 60px;}
/* Footer :: 푸터메뉴 */
.foot-menu{padding-bottom: 20px; text-align: center; border-bottom:1px solid rgba(255,255,255,0.2);}
.foot-menu li{display: inline-block; line-height:24px;}
.foot-menu li:before{display:inline-block; content:""; margin:-3px 15px 0 15px;  color:#fff; width:2px; height:2px; background-color:#fff; vertical-align:middle;} 
.foot-menu li:first-child{padding-left: 15px;}
.foot-menu li:first-child:before{display:none} 
.foot-menu li a{color:#fff; font-size:14px;}

/* Footer :: SNS 리스트 */
.foot-sns-menu{text-align: center; margin-top:20px}
.foot-sns-menu li{display: inline-block; margin: 0 12px;}
.foot-sns-menu li a{display: block; font-size: 25px;color: rgba(255,255,255,0.6);}
.foot-sns-menu li a:hover{ color:rgba(255,255,255,1)}
.foot-sns-menu li img{height: 23px;}

/* -------- FOOTER :: 하단 -------- */
#footerBottom{ padding:25px 0 60px; }
/* Footer :: 왼쪽정보 */
.footer-address p{font-size:14px; line-height:20px; padding-bottom:10px; text-align: center; -ms-word-break: keep-all; word-break: keep-all;}
.footer-address span{color:rgba(255,255,255,0.6); display:inline-block; margin-right:10px}
.footer-address p br.m_only{ display:none}
.footer-address a{color:rgba(255,255,255,0.6);}
.footer-address p.footer-caution-txt{color:rgba(255,255,255,0.4); padding-bottom: 30px;}
.footer-address p.copy span{ margin:0 5px; color:#fff}
.footer-address span.busi_hours{ margin-top: 9px;color: rgba(255,255,255,0.8); display:block}

/* modal layer content */
.footer-modal-content{position: relative; width: 96%; max-width: 1200px;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:#038fd8; 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{height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }
.footer-inner textarea{ width: 100%;height: 100%; padding: 20px; line-height: 1.7;  font-size: 14px; word-break: keep-all; border:0;}
sub {display: inline-block; }






/* *===============================================================
미디어 쿼리 시작 
=================================================================*/
/* -------- Header :: 스크롤시(fixed) -------- */
@media all and (min-width:1024px){

}
@media all and (max-width:1730px){
#gnb > ul{ margin-right: 7vw;}	
}

@media all and (max-width:1620px){	/* max-width : (area-box width) + 20px */
.area-box,.area{padding:0 30px;}

/* ****************** HEADER ********************** */
#headerInner{margin: 0 15px; max-width: 1640px;}
#gnbBg{margin: 0 15px; max-width: 1640px; width: auto;}
#gnb > ul{padding-left: 0; margin-right:0}
}
@media all and (max-width:1536px){

}
@media all and ( max-width: 1490px ){
/* -------- Header :: Layout -------- */
#headerInner{padding:0 40px;}	
#header .logo{padding: 0 0 0 10px;}
/* -------- Header :: GNB(PC) -------- */
#gnb.total-menu > ul > li .gnb-2dep li a{font-size:15px;}
}
@media all and ( max-width: 1366px ){
/* -------- Header :: Layout -------- */	
#headerInner{padding:0 20px}
#gnb.total-menu > ul > li .gnb-2dep ul li a{font-size:14px;}

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


}
@media all and (max-width:1224px){
/* -------- Header :: Layout -------- */		
#header,#headerInnerWrap{height:80px;}
#headerInnerWrap{position:fixed; z-index:99;}
#headerInner{-webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 12%);box-shadow: 0 1px 3px rgb(0 0 0 / 12%);}
#header .logo{}	/* padding값 적절히 바꿔주세요 */
#header .logo img {height:60px;}
#gnb > ul > li > a{ line-height:80px}
#gnb > ul > li > a{ font-size:17px;padding: 0 35px;}
#gnb.total-menu > ul > li .gnb-2dep{ top:80px; width: 200px;}

/* -------- footer :: Layout -------- */	
.footer-address span.first{ display:block;}
}

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

#gnb > ul > li > a{padding: 0 28px;}
}

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


}

@media all and (max-width:1024px){
.area-box,.area{padding:0 15px}


/* -------- Header :: GNB(Pc) -------- */
#gnb{display:none;}
.gnb-overlay-bg{display:none}

/* -------- Header :: GNB(Mobile/기본스타일) -------- */
.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:101;}	
#gnbM{ display:block; position:fixed; top:0px; right:-82%;width:80%; height:100%; max-width: 320px; background-color:#fff; z-index:999; 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 속도 */visibility:hidden;}
#gnbM.open{right:0px; visibility:visible;}
/* GNB Mobile :: 레이아웃 */
.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:80px; overflow-y:auto;}	/* padding-top : Header 높이값 */
	
/* GNB Mobile :: 메뉴영역 :: 1차 */
.navigation > li{}
.navigation > li:first-child{}
.navigation > li > a {position:relative; display:block; padding:17px 30px; color:#333; font-size:17px; font-weight:400; }
.navigation > li.active > a{color:#123863;}
.navigation > li.has-2dep > a{}
.navigation > li.has-2dep.active > a{}
.navigation > li .gnb-icon{position:absolute; top:50%; right:15px; margin-top:-10px;}
.navigation > li .gnb-icon i{font-size:20px;}
/* GNB Mobile ::  메뉴영역 :: 2차 */
.navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#f7f7f7; }
.navigation > li .gnb-2dep > li{height:auto !important;}
.navigation > li .gnb-2dep > li > a {display:block; color:#444; font-size:14px; padding:12px 30px;}
.navigation > li .gnb-2dep > li > a span{position: relative; display: inline-block; padding-left: 15px;}
.navigation > li .gnb-2dep > li > a span:before{position: absolute; top: 50%; margin-top: -2px; left: 0; display: block; content: ''; width: 4px; height: 4px; background-color:#444; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.navigation > li .gnb-2dep > li.on > a{color:#123863}
/* GNB Mobile :: 메뉴영역 ::  3차 */
.navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px; background-color:#aaa; margin:0 10px}
.navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;}
.navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}


/* -------- Header :: 네비게이션 오픈 버튼 -------- */
.nav-open-btn{display:block; position:fixed; top:20.5px; right:35px; z-index:9998; height:39px;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);}
.nav-open-btn .line{display:block; width:28px; height:2px; background-color:#3e3e3e; margin: 7px 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), .nav-open-btn.active .line:nth-child(4){opacity: 0;}
.nav-open-btn.active .line:nth-child(1){ -webkit-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
.nav-open-btn.active .line:nth-child(3){-webkit-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg);-o-transform: translateY(-11px) rotate(-45deg);transform: translateY(-11px) rotate(-45deg);}

}

@media all and ( max-width: 800px ){
/* -------- 공통 :: 버튼 -------- */	
.btn_more.on .icon_more {width: 100%;}	
.btn_more .txt{ color:#fff; font-size:14px}	
.btn_more .icon_more .arrow{ font-size:14px}
	
#gnbM {max-width: 280px;}	
	
	
#footer{width: 100%; height: auto;}
#footer:before{top: -42px;}

/* Footer :: TOP버튼 */
.to-top-btn{top: -23.5px; margin-left: -23.5px; width:47px; height:47px; font-size: 12px; line-height:47px;}

/* -------- FOOTER :: 상단 -------- */
#footerTop{padding-top: 40px;}
/* Footer :: 푸터메뉴 */
.foot-menu{padding-bottom: 15px; top: 0;}
.foot-menu li{display: inline-block; line-height:16px;}
.foot-menu li:before{margin:-3px 20px 0 20px;} 
.foot-menu li:first-child{padding-left: 20px;}
.foot-menu li a{font-size:11px;}

/* Footer :: SNS 리스트 */
.foot-sns-menu{ margin-top:12px}
.foot-sns-menu li{ margin:0 10px}
.foot-sns-menu li a{ font-size:20px}
/* -------- FOOTER :: 하단 -------- */
#footerBottom{padding: 25px 0 30px;}
/* Footer :: 왼쪽정보 */
.footer-address p{font-size:11px; line-height:1.6; padding-bottom:10px;}
.footer-address span{margin-right:8px}
.footer-address span.first{ display:block; width:100%}
.footer-address p.footer-caution-txt{padding-bottom: 20px;}	
	
/* modal layer content */
.footer-modal-content{width:auto; margin:50px 15px}
.footer-modal-content h1{height: 46px; line-height: 46px; font-size: 18px; text-align: left; padding: 0 15px;}
.modal-close-btn{top: 11px;right: 10px;}
.modal-close-btn i{font-size:24px}
.footer-inner-box{padding:15px}
.footer-inner{height:250px;}	
.footer-inner textarea{padding:10px; font-size:12px}
}
@media all and ( max-width: 600px ){
/* -------- Header :: Layout -------- */	
#header .logo{ padding-left:0}

}
@media all and ( max-width: 480px ){
#header,#headerInnerWrap{height:50px;}	
#header .logo img{height:38px;}
/* Header :: 사이트맵, 네비게이션 버튼 */
.nav-open-btn{top:10px; margin-top:0; height: 30px;}
.nav-open-btn .line{width:20px; height:1px; margin: 5px auto;}
.nav-open-btn.active .line:nth-child(1){ -webkit-transform: translateY(6px) rotate(45deg);-ms-transform: translateY(6px) rotate(45deg);-o-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg);}
.nav-open-btn.active .line:nth-child(3){-webkit-transform: translateY(-6px) rotate(-45deg); -ms-transform: translateY(-6px) rotate(-45deg); -o-transform: translateY(-6px) rotate(-45deg);transform: translateY(-6px) rotate(-45deg);}
.nav-open-btn.active {top: 10.5px;}
/* Header :: GNB(Mobile) */
.gnb-navigation-wrapper{padding-top:60px} /* padding-top : Header 높이값 */
.gnb-style-full .header-util-menu-box + .gnb-navigation-wrapper{top:60px; }
.gnb-style-full-member .gnb-navigation-wrapper{bottom:60px;}
.navigation > li > a{font-size:15px; font-weight:500; padding-left:20px}
.navigation > li .gnb-2dep > li > a{font-size:13px; padding-left:20px}
.navigation > li .gnb-icon{ right:30px}
.navigation > li .gnb-2dep > li > a span{padding-left:12px}

/* -------- FOOTER :: 상단 -------- */
.foot-menu li:before {margin: -3px 10px 0 10px;}
.footer-address p a{ display:block;}
.footer-address p.footer-caution-txt br{display:none}
.footer-address p span .m_only{ display:block;}

}