@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2019-09-03
******************************************************** */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
@font-face { font-family: 'YES24'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/YES24.woff') format('woff'); font-weight: normal; font-style: normal; }

/* ****************** LAYOUT ********************** */

body, table, th, td, button, select, input, textarea {
	font-family:'Montserrat','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
	word-break: keep-all;
}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }
.area{ max-width:1200px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:1600px; margin:0px auto; }

.font-open{font-family: 'Open Sans','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-noto{font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-yes{font-family:'YES24','Montserrat','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-serif{font-family: 'Noto Serif', serif;}
.font-mont{font-family: 'Montserrat', sans-serif;}

/* ****************** HEADER ********************** */
#header{
	position:relative; /* position:absolute; */ height:100px; top:0; left:0; width:100%; z-index:9999; 
	-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 배경삭제 */
#header.last{border-bottom:1px solid #ddd}
.fullpage-wrapper #header{
	position:fixed;
}
#headerInnerWrap{
	position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:9999; background-color:#fff; 
	-webkit-transition:background-color 0.3s;
	-moz-transition:background-color 0.3s;
	-o-transition:background-color 0.3s;
	-ms-transition:background-color 0.3s;
	transition:background-color 0.3s
}
#headerInner{
	position:relative; height:100%; margin:0px auto; padding:0 100px;  
	-webkit-transition:padding 0.3s;
	-moz-transition:padding 0.3s;
	-o-transition:padding 0.3s;
	-ms-transition:padding 0.3s;
	transition:padding 0.3s
}
#header .logo{position:relative; z-index:100; float:left; padding:30px 0; }		/* padding값 적절히 바꿔주세요 */
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:absolute; top:50%; right:100px; margin-top:-20px; z-index:100;}
.header-util-menu-box{display:none}
/* Header :: 언어선택 */
.header-lang {position:relative; float:left; width:100px; height:40px; background-color:#f1f1f1; z-index:100; border-radius:20px;}
/* .header-lang {position:relative; float:left; width:124px; height:40px; background-color:#f1f1f1; z-index:100; border-radius:20px;} */
.header-lang .lang-open-btn {overflow:hidden; position:relative; display:block; height:100%; padding:0 14px; font-size:15px; line-height: 40px; color:rgba(0,0,0,0.5); letter-spacing:-0.5px}
.header-lang .lang-open-btn i {display:inline-block; margin-right: 5px; vertical-align: middle; font-size:18px; margin-top:-2px; font-weight:600}
.header-lang .lang-open-btn .arrow{position:absolute; top:0px; right:0px;}
.header-lang .lang-open-btn .arrow i{font-size:18px;}
.header-lang .lang-open-btn strong{font-weight:400}
.header-lang > ul {display:none; position:absolute; top:40px; left:-1px; z-index:10; width:100%;}
.header-lang > ul > li {padding-top:6px}
.header-lang > ul > li > a{display:block; padding-left:35px; font-size:15px; line-height: 40px;  color:rgba(0,0,0,0.5); letter-spacing:-0.5px;  border:1px solid #cfcfcf; background-color:#fff; border-radius:20px; transition:all 0.2s}
.header-lang > ul > li > a:hover{background-color:#333; border-color:#333; color:#fff;}
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px;}


/* -------- 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:center;*/text-align:right; top:0; left:0px; width:100%; z-index:99;}
#gnb > ul{display:inline-block; margin-right:240px; *display:inline;*zoom:1;}
#gnb > ul > li{position:relative; float:left; word-break:keep-all;}
#gnb > ul > li > a{
	position:relative; z-index:100; display:flex; align-items:center; justify-content:center; height:100px; line-height:1.5; /* line-height:100px; */ padding:0 33px; text-align:center; color:#333; font-size:18px; letter-spacing:-0.55px; font-weight:500; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;
}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color:#38b4bc; /*font-weight:500*/}
#gnb > ul > li.active > a{color:#38b4bc}
/* GNB :: 2차 전체메뉴 */
#gnbBg{
	overflow:hidden; position:absolute; left:0; top:0px; width:100%; height:0; background:#fff; z-index:98;
	-webkit-transition:height 0.3s ease-in-out;
	-moz-transition:height 0.3s ease-in-out;
	-ms-transition:height 0.3s ease-in-out;
	-o-transition:height 0.3s ease-in-out;
	transition:height 0.3s ease-in-out
}
#gnbBg:after{position:absolute; top:100px; width:100%; left:0; height:1px; background-color:#ddd; content:"";}
#gnb.total-menu > ul > li .gnb-2dep{
	position:absolute; 
	top:100px; 
	left:0px; 
	z-index:99;
	width:100%; 
	text-align:left; 
	opacity:0;filter:Alpha(opacity=0);
	height:0;
	-webkit-transition: all 0.3s 0s;
    -moz-transition: all 0.3s 0s;
    -ms-transition: all 0.3s 0s;
    -o-transition: all 0.3s 0s;
    transition: all 0.3s 0s;
	visibility:hidden;
}
#gnb.total-menu > ul > li .gnb-2dep:before {
	content:""; position:absolute; /* left:0; */ top:-2px; width:0; left:50%; height:3px; background-color:#38b4bc; transform:translateX(-50%);
	-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s; z-index:10;
}
#gnb.total-menu > ul > li:hover .gnb-2dep:before {width:95%; /* left:50%; */ }
#gnb.total-menu > ul > li .gnb-2dep ul{padding:13px 0px; text-align:center}
#gnb.total-menu > ul > li .gnb-2dep ul li{position:relative;}
#gnb.total-menu > ul > li .gnb-2dep ul li a{ display:block;  padding:6.5px 0; color:#777; font-size:15px; letter-spacing:-0.5px; font-weight:400; line-height:1.3; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
#gnb.total-menu > ul > li .gnb-2dep ul li a span{position:relative; display:inline-block; padding:7px 0; white-space:nowrap}
#gnb.total-menu > ul > li .gnb-2dep ul li a span:after{position:absolute; display:inline-block; content:""; width:calc(100% + 12px); height:100%; background-color:#38b4bc; top:0; left:-6px; opacity:0; z-index:-1; transition:all 0.4s}
#gnb.total-menu > ul > li.gnb2 .gnb-2dep > ul >  li:first-child a{/*padding:5px 0 0.5px;*/ margin-bottom:-3.2px}
#gnb.total-menu > ul > li .gnb-2dep ul li a:hover span{color:#fff;}
#gnb.total-menu > ul > li .gnb-2dep ul li a:hover span:after{opacity:1}

#gnb.total-menu > ul > li.gnb2 .gnb-2dep > ul > li:nth-child(2) a{/*padding:11px 0 5.5px*/}

/* GNB :: 2차메뉴 Over (높이변경) */
#gnb.open #gnbBg{height:325px}
#gnb.open > ul > li .gnb-2dep{
	height:185px; opacity:1.0;filter:Alpha(opacity=100);
	visibility:visible;
	-webkit-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
    -moz-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
    -ms-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
    -o-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
}

/* GNB :: gnb bg 배너 */
.gnb-bg-inner{position:absolute; top:130px; left:100px; background:url("../images/common/gng_bg_img.png") no-repeat 58% 0; background-size:cover; /*width:631px; */height:120px; display:table; text-align:left; width:34.3%; border-radius:10px}
.gnb-bg-inner .gnb-bg-txt{display:table-cell; vertical-align:middle; font-weight:300; font-size:19px; letter-spacing:-0.4px; color:#333; line-height:1.4; word-break:keep-all; padding:0 26% 0 7.5%}
.gnb-bg-inner .gnb-bg-txt b{font-weight:600}

/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

/* ****************** FOOTER ********************** */
/* -------- FOOTER :: 레이아웃 -------- */
#footer{background-color:#f0f0f0; text-align:center}
#footerInner{position:relative; }


/* -------- FOOTER :: 하단 -------- */
#footerWrap{ padding:30px 0 }
/* Footer :: 왼쪽정보 */
.footer-address{margin-bottom:15px; letter-spacing:-0.5px;}
.footer-address .footer-address-txt{color:rgba(0,0,0,0.4); font-size:14px; line-height:1.7; margin:0 -8px; font-weight:400}
.footer-address p{display:inline-block; vertical-align:middle; position:relative; margin:0 8px;}
.footer-address p:before{position:absolute; top:50%; left:-8px; width:1px; height:10px; margin-top:-5px; background-color:#ccc; content:"";}
.footer-address p:first-child:before{display:none;}
.footer-address a{color:inherit}
/* Footer :: Copyright */
.footer-copyright{font-weight:300; font-size:13px; letter-spacing:-0.5px; color:rgba(0,0,0,0.3); line-height:1.5}
.footer-copyright b{color:#f57f20}
/* Footer :: 개인정보처리방침 */
.privacy-btn{display:inline-block; border:1px solid #a1a1a1; width:130px; height:40px; line-height:40px; font-size:14px; letter-spacing:-0.5; color:rgba(37,37,37,0.6);}
.privacy-btn b{font-weight:300;}
.privacy-btn.cm-button-effect01{position:relative; margin-top:20px; z-index:1; transition:color 0.2s}
.privacy-btn.cm-button-effect01:before{border-bottom-color:#a1a1a1; z-index:-1}
.privacy-btn.cm-button-effect01:hover {color: #fff;}


/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{position:relative; overflow:hidden; width:100%; height:400px; }
#visual:after{position:absolute; display:inline-block; content:""; width:100px; height:100%; background-color:#fff; left:0; top:0 }
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:100px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
#visual .visual-txt-con{position:relative; z-index:1; text-align:center; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#fff;}
#visual .visual-txt-container{position:relative; width:100%; margin-top:35px}
#visual .visual-tit,
#visual .visual-sub-txt,
#visual .location{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-30px); 
    -o-transform: translateY(-30px); 
    -moz-transform: translateY(-30px);
    -webkit-transform: translateY(-30px); 
     transform: translateY(-30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#visual .visual-tit{
	font-weight:600; 
	font-size:46px; 
	letter-spacing:-1.5px;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
#visual .visual-sub-txt{
	font-size:18px; 
	font-weight:400; 
	padding-top:15px;
	-webkit-transition-delay:0.5s;
	-moz-transition-delay:0.5s;
	-o-transition-delay:0.5s;
	-ms-transition-delay:0.5s;
	transition-delay:0.5s;
	letter-spacing:-0.25px; color:rgba(255,255,255,0.5)
}
/*#visual .visual-sub-txt em{font-style:italic}*/
#visual .location{
	-webkit-transition-delay:0.5s;
	-moz-transition-delay:0.5s;
	-o-transition-delay:0.5s;
	-ms-transition-delay:0.5s;
	transition-delay:0.5s;
}

/* SUB LAYOUT :: 상단효과 active */
#visual.active .visual-img-con{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
#visual.active .visual-tit,
#visual.active .visual-sub-txt,
#visual.active .location{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
     transform: translateY(0px);
}



/*  SUB LAYOUT :: 서브메뉴(스타일1) */
#topMenu01{position:relative; width:100%;height:80px; }
#topMenu01 .side-menu-inner{text-align:center; width:100%; height:79px; border-bottom:1px solid #ddd; background-color: #fff;}
#topMenu01 .side-menu-inner ul{display:inline-block; *display:inline;*zoom:1;}
#topMenu01 .side-menu-inner ul li{float:left; max-width:500px;}
#topMenu01 .side-menu-inner ul li > a{
	display:block; 
	display:table; 
	position:relative;
	width:100%;
	height:79px; 
	line-height:1.2; 
	color:#333; 
	font-size:17px; 
	letter-spacing:-0.5px; 
	font-weight:400; 
	word-break:keep-all;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
}
#topMenu01 .side-menu-inner ul li > a:before{
	position:absolute;
	bottom:-1px;
	left:50%;
	width:0;
	height:2px;
	background-color:#38b4bc;
	content:"";
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
}
#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 30px; }
#topMenu01 .side-menu-inner ul li > a:hover, 
#topMenu01 .side-menu-inner ul li.on > a{color:#38b4bc;}
#topMenu01 .side-menu-inner ul li > a:hover:before, 
#topMenu01 .side-menu-inner ul li.on > a:before{width:88%; margin-left:-43%;}


/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */
@media all and (min-width:1221px){
	.fixed-sub-menu.fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;}
}

/* SUB LAYOUT :: 모바일메뉴(공통)  */
#topMenuM01,
#topMenuM02{display:none;}

/*  SUB LAYOUT :: 상단정보 (공통) */
#contentInfoCon{position:relative; margin:0 auto 60px; }
#contentInfoCon .content-tit{color:#333; font-size:40px; font-weight:700; letter-spacing:-0.6px; word-break:keep-all; line-height:1.3}
#contentInfoCon .content-tit b{color:#39b4bb}
/*  SUB LAYOUT :: 상단정보(스타일01) */
#contentInfoCon.content-info-style01{text-align:center; }

/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content{padding:110px 0}

/* ****************** 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; }
.footer-modal-content h1{font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0 50px 20px; color:#fff;}
.modal-close-btn{position:absolute; top:-6px; right:-6px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; background-color:#fff; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }


#gnb.total-menu > ul > li .gnb-2dep ul li .dep3-con{padding:0; margin-top:-6px}
#gnb.total-menu > ul > li .gnb-2dep ul li .dep3-con li a{font-size:12.6px; padding:3px 0 !important}
#gnb.total-menu > ul > li .gnb-2dep ul li .dep3-con li a span{/*padding:4px 0 3px 9px;*/ padding:4px 0 3px 0; opacity:0.9}
/*#gnb.total-menu > ul > li .gnb-2dep ul li .dep3-con li a span:before{position:absolute; display:inline-block; content:""; width:3px; height:3px; background-color:#777; border-radius:50%; left:-9px; top:10px}*/
#gnb.total-menu > ul > li .gnb-2dep ul li .dep3-con li a:hover span:before{background-color:#fff}
/*#gnb.total-menu > ul > li .gnb-2dep ul li .dep3-con li a span:after{width:calc(100% + 20px); left:-13px}*/

#topMenu01 .side-menu-inner ul.dep3-con{display:none}


/* 헤더 service 로고 이미지 2022-09-06 MJ */
.header-service-img{position: relative; top:-2px;}
.header-service-img.on{display: none;}

#gnb > ul > li > a:hover .header-service-img, #gnb > ul > li.on > a .header-service-img{display: none;}
#gnb > ul > li.active > a .header-service-img{display: none;}
#gnb > ul > li > a:hover .header-service-img.on, #gnb > ul > li.on > a .header-service-img.on{display: inline;}
#gnb > ul > li.active > a .header-service-img.on{display: inline;}