@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2022-07-26
******************************************************** */

/* ========================================================
 * SETTING
======================================================== */
:root{
	--main-color: #259dc1;
	--area-box-width: 1600px;
	--area-width: 1400px;
	--area-padding: 50px;
	--header-height: 110px;
	--sub-visual-height: 40rem;
	--sub-menu-height: 69px;
	--full-height: 100vh;
	--transition-custom: all 0.3s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family1: 'Montserrat', 'Pretendard', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
/* html:not(.is-mobile) *::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}
html:not(.is-mobile) *::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}
html:not(.is-mobile) *::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
} */
::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}
html{font-size:10px;}
body, table, th, td, button, select, input, textarea {
	font-family:var(--font-family1);
	color:#666;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	text-size-adjust:none;
	word-break:keep-all;
}
body { background-color:#fff; }
table, th, td{word-break:break-word;}
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }

/* ========================================================
 * LAYOUT
======================================================== */
/* ****************** 공통클래스 ********************** */
.area{ max-width:var(--area-width); margin:0px auto;}
.area-box{ max-width:var(--area-box-width); margin:0px auto; }
.full-height{height:var(--full-height);}
/* Fullpage Layout */
.fullpage-html{overflow:hidden; height:100%;}
.fullpage-html #wrap{position:static;}
/* br tag */
.m-br{display:none;}
.display-m{display:none;}

/* ****************** HEADER ********************** */
#header{
	position: relative; height:var(--header-height); top:0; left:0; width:100%; z-index:9999; 
}
.fullpage-html #header{
	position:fixed;
}
#headerInnerWrap{position:absolute; top:0px; left:0px; width:100%; height:var(--header-height); z-index:9999; /* background-color:#fff; transition:var(--transition-custom); transition-property:background-color; */ background-color: rgba(255,255,255,0.8); backdrop-filter: blur(5px);}
#headerInner{position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); margin:0px auto; padding:0 var(--area-padding); }
#header .logo{position:relative; z-index:100; }
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:relative; z-index:100;}

/* -------- Header :: GNB(PC) -------- */
#gnb{position:absolute; text-align:center; top:0; left:0px; width:100%; z-index:99;}
#gnb > ul{position:relative; display:flex; align-items:center; justify-content:flex-end; height:var(--header-height); margin:0px auto; padding:0 var(--area-padding);}
#gnb > ul > li{position:relative; word-break:keep-all;}
#gnb > ul > li + li{margin-left: 5.5rem;}
#gnb > ul > li > a{
	position:relative; z-index:100; display:block; line-height:var(--header-height); text-align:center; color:#222; font-size:1.8rem; letter-spacing:-0.025em; font-weight:500; transition:var(--transition-custom);
}
#gnb > ul > li > a:after{
	position:absolute; bottom: 36px; left:0; right:0; 
	height:2px; 
	background-color:#222; 
	content:""; 
	transform:scaleX(0); 
	transition:var(--transition-custom);
	transition-property: transform;
	transform-origin:100% 0;
}
#gnb > ul > li:not(.on) > a:hover:after{transform:scaleX(1); transform-origin:0 0;}
#gnb > ul > li.on > a:after{transform:scaleX(1); transform-origin:0 0;}

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


/* ****************** FOOTER ********************** */
/* -------- FOOTER :: 레이아웃 -------- */
#footer{background-color:#fff;}
.footer-left-con{float:left;}
.footer-right-con{float:right;}

/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; 
	bottom: -100px; 
	right: calc(var(--area-padding) + 2rem);
	display:block; 
	width: 5rem; 
	height: 5rem; 
	background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
	text-align:center; 
	color:#666; 
	z-index:99;
	box-shadow: 0 0 1.2rem 0 rgba(133,133,133,0.2);
	box-sizing:border-box;
	opacity:0;
	transition:var(--transition-custom);
	border-radius:50%;
}
.to-top-btn.bottom-fixed{bottom: 20px; opacity:1.0;}
.to-top-btn i{display:inline-block; font-size:2rem; line-height:5rem; transition:var(--transition-custom);}
.to-top-btn:hover i{transform:translateY(-3px)}

/* -------- FOOTER :: 상단 -------- */
#footerInner{border-top:1px solid #eee; padding: 8.5rem 0 10rem;}

.foot-logo-menu-box{display: flex; flex-wrap:wrap; align-items: center;}
/* Footer :: 푸터로고 */
.foot-logo{display:block;}
/* Footer :: 푸터메뉴 */
.foot-menu{margin-left: 2rem; display: flex; flex-wrap:wrap;}
.foot-menu li{position:relative; padding-left:2rem; line-height:1.5;}
.foot-menu li:first-child{padding-left:0}
.foot-menu li a{font-size: 1.6rem; letter-spacing:-0.05; color:#888;}

/* Footer :: 정보 style02 */
.footer-address-info-box{margin-top: 3rem;}
.footer-address-list dl{margin-top: 0.5rem; display: flex; flex-wrap:wrap; font-size: 1.6rem; line-height: 1.5; letter-spacing:-0.05; color:#888; }
.footer-address-list dl:first-child{margin-top: 0;}
.footer-address-list dl dt,
.footer-address-list dl dd{width: calc(100% - 7.5rem);}
.footer-address-list dl dt{width: 7.5rem;}
.footer-address-list a{color:inherit}

/* Footer :: Copyright */
.footer-copyright{margin-top: 4rem; font-size:1.6rem; line-height: 1.5; color: #888;}

/* Footer :: 대표 전화번호 */
.foot-tel-box{width: 30rem; height: 9rem; font-size: 2.9rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: #222; background-color: #f9f9f9; border-radius: 1rem; text-align: center; display: flex; align-items: center; justify-content: center;}


/* ****************** 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.25);}
.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;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1340px; margin:20px auto; }
.footer-modal-content h1{padding-bottom: 1.5rem; font-size:2.2rem; line-height: 1.3; letter-spacing:-0.015em; font-weight: 700; color:#222; border-bottom: 2px solid #000;}
.modal-close-btn{position:absolute; top:2.5rem; right:3rem; color:#666;}
.modal-close-btn i{font-size:20px;}
.modal-close-btn i:hover {color:#666}
.footer-inner-box{padding:7rem 6rem; background-color:#fff; border-radius: 2rem; box-shadow: 0 0 1rem 0 rgba(0,0,0,0.27);}
.footer-inner-cover{padding:3.5rem 3rem;}
.footer-inner{height:54rem; /* overflow-y:auto; overflow-x:hidden; */}
.footer-inner dl{margin: 0; font-size: 1.6rem; line-height: 1.87; letter-spacing: -0.05em; color: #666;}
.footer-inner dl + dl{margin-top: 4rem;}
.footer-inner dt{margin: 0; font-weight: 700;}
.footer-inner dd{margin: 0;}
.footer-inner dd .num-txt{position: relative; padding-left: 1rem;}
.footer-inner dd .num-txt span{position: absolute; top: 0; left: 0; display: inline-block;}
.footer-inner dd .num-cir-txt{position: relative; padding-left: 1.7rem;}
.footer-inner dd .num-cir-txt span{position: absolute; top: 0; left: 0; display: inline-block;}