@charset 'utf-8';
/* common */
:root {
    --baseFont: 'Pretendard', "Geologica", 'verdana', sans-serif;
	--geo: "Geologica", sans-serif;
	--mainC: #009E9D;
	--subC: #;
}

.w1700{ max-width:1700px; margin: 0 auto; width: 100%; }
.w1600{ max-width:1600px; margin: 0 auto; width: 100%; }

.flexBox{ display:flex;}
.flexBox.center{ display:flex; justify-content:center; align-items:center; }

figure.fitBox{ position: relative; width: 100%; height: 100%; overflow: hidden;}
figure.fitBox img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width: 100%; min-height:100%; object-fit: cover;}

.raw{ font-weight: 500 !important; line-height: 1;}

/* intro */
#introBox{ position: relative; position: fixed; top: 0; left: 0; width: 100vw; height: 100%; overflow: hidden; background: #fff; opacity: 1; z-index: 10000000; transition:all 0.5s; }
#introBox figure{ position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 241px; height: 340px;}
#introBox img{ animation: intro 3s infinite cubic-bezier(.39,0,.12,.99); max-width:auto;  }
#introBox.introHide{ opacity: 0; visibility: hidden; }

#topBtn{ position: fixed; bottom: 30px; right: 40px; width: 70px; height: 70px; border:1px solid #bbb; border-radius:50%; background: rgba(255, 255, 255, 0.05); display:flex; justify-content:center; align-items:center; z-index: 1000; transition:all 0.5s; opacity: 1; pointer-events:inherit; }
#topBtn.hide{ pointer-events:none; opacity: 0;}
#topBtn.up{ bottom: 315px; }

/* header */
header{ position: relative; position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; transition:all 0.5s; transform: translateY(0); }
header .logo path{ transition:all 0.5s 0.5s; }
header .gnbBg{ position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: #fff; transition:all 0.7s 0.3s; }
header .headerBox{ position: relative; }
header .headerBox:after{ content:''; display:block; width: 100%; height: 1px; background: #eee; position: absolute; bottom: 0; left: 0; transition:all 0.5s; }
header .headerBox > div{ position: relative; display:flex; justify-content:space-between; align-items:center; height: 100px; }
header .headerBox nav{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; height: 100%; z-index: 5;}
header .headerBox nav #gnb{ display:flex; height: 100%;}
header .headerBox nav #gnb > li{ position: relative; height: 100%; text-align: center; }
header .headerBox nav #gnb > li:after{ content:''; display:block; width: 0; height: 2px; background: var(--mainC); position: absolute; bottom: -1px; transform:translateX(-50%); left: 50%; transition:all 0.5s; }
header .headerBox nav #gnb > li > a{  font-size:17px; padding: 0 35px; height: 100%; display:flex; justify-content:center; align-items:center; color:#333; transition:all 0.5s 0.5s; white-space:nowrap; }
header .headerBox nav #gnb > li  > div{ height: var(--navH); pointer-events: none; }
header .headerBox nav #gnb > li .depth2{ width: 100%; /* height: 330px; */ padding: 30px 0; pointer-events:none; }
header .headerBox nav #gnb > li .depth2 li{ overflow: hidden;}
header .headerBox nav #gnb > li .depth2 li.mobile{ display:none; }
header .headerBox nav #gnb > li .depth2 li:not(:last-child){ margin-bottom: 15px; }
header .headerBox nav #gnb > li .depth2 li > a{ position: relative; transform: translateY(100%); display:block; color:#555; font-size:18px; transition:transform 0.3s 0s, color 0.2s, font-weight 0.2s 0.1s; }
header .headerBox nav #gnb > li .depth2 li:hover > a{ color:var(--mainC); font-weight: 500;}

header .headerBox #menuBtn{ position: relative; width: 30px; height: 20px; cursor:pointer; display:flex; justify-content:center; align-items:center; }
header .headerBox #menuBtn span{ position: absolute; left: 0; display:block; width: 100%; height: 2px; background: #000; transition:all 0.3s, background 0.3s 0.5s;}
header .headerBox #menuBtn span.move{ position: absolute; top: 0; }
header .headerBox #menuBtn span.btm{ top: auto; bottom: 0;}

header .headerBox #menuBtn.on .center{ width: 0;}
header .headerBox #menuBtn.on .move{ transform: translate(-50%, -50%) rotate(45deg); top: 50%; left: 50%;}
header .headerBox #menuBtn.on .btm{ transform: translate(-50%, -50%) rotate(-45deg);}

header.white .logo path{ fill:#fff;}
header.white .gnbBg{ background: transparent;}
header.white .headerBox:after{ background: rgba(255,255,255,0.2);}
header.white .headerBox nav #gnb > li > a{ color:#fff; }
header.white .headerBox #menuBtn span{ background: #fff; }

header.on .gnbBg{ height: calc(100px + var(--navH)); background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);  transition-delay:0s;}
header.on .logo path,
header.all .logo path{ fill:var(--mainC); transition-delay:0s; }
header.all .headerBox:after,
header.on .headerBox:after{ background: #eee; opacity: 1; }
header.on .headerBox nav #gnb > li  > div{ pointer-events: auto; }
header.on .headerBox nav #gnb > li .depth2{ pointer-events:inherit; }
header.on .headerBox #menuBtn span{ background: #000; transition-delay:0s; }

header.on .headerBox #menuBtn span,
header .headerBox #menuBtn.on span{ background: #333; transition-delay:0s;}

header.all .headerBox nav{ display:none; }

header .headerBox nav:hover #gnb > li > a{ padding: 0 50px; color:#111; transition-delay:0s;}
header .headerBox nav:hover #gnb > li:hover > a{ color:#222; }
header .headerBox nav:hover #gnb > li .depth2 li > a{ transform: translateY(0);  transition:transform 0.3s 0.4s, color 0.5s; }
header .headerBox nav #gnb > li:hover:after{ width: 150px; }

header.last{ opacity: 0; visibility: hidden; }

#allMenu{ position: relative; position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; z-index: 1001; background: #fff; display:flex; align-items:center; padding-left: 310px;
transition:all 1s;  }
#allMenu .bg{ position: absolute; right: 50px; bottom: 10px;}
#allMenu #allGnb{ position: relative; z-index: 5;}
#allMenu #allGnb #gnb > li{ display:flex; align-items:center; }
#allMenu #allGnb #gnb > li:not(:last-child){ margin-bottom: 60px; }
#allMenu #allGnb #gnb > li > a{ font-size:40px; font-weight: 600; color:#222; transition:all 0.3s; min-width:260px; margin-right: 90px; }
#allMenu #allGnb #gnb .depth2{ display:flex; align-items:center; }
#allMenu #allGnb #gnb .depth2 li.mobile{ display:none; }
#allMenu #allGnb #gnb .depth2 li:not(:last-child){ margin-right: 60px; }
#allMenu #allGnb #gnb .depth2 li a{ font-size: 18px; color:#555; transition:color 0.3s; }
#allMenu #allGnb #gnb > li:hover > a{ color:var(--mainC); }
#allMenu #allGnb #gnb .depth2 li:hover a{  color:#111; font-weight: 500; transition-delay:0s; }

#allMenu header{ position: absolute;}
#allMenu.on{ top: 0; }

/* footer */
.footer_in{ background: #222; padding: 70px 0 60px;}
.footer_in > div{ display:flex; justify-content:space-between; }
.footer_in .txtBox{ display:flex; }
.footer_in .txtBox .logo{ margin-right: 75px; flex-shrink:0; }
.footer_in .txtBox .ctnBox .infoBox{ color: #888; margin-bottom: 50px;}
.footer_in .txtBox .ctnBox .infoBox p:not(last-child){ margin-bottom: 10px;}
.footer_in .txtBox .ctnBox .infoBox p span{ display:inline-block; margin-right: 15px; }
.footer_in .txtBox .ctnBox .snsBox,
.footer_in .txtBox .ctnBox .snsBox a{ display:flex; align-items:center; }
.footer_in .txtBox .ctnBox .snsBox a:not(:last-child){ margin-right: 20px;}
.footer_in .txtBox .ctnBox .snsBox span{ display:block; margin-left: 10px; color:#ddd; }
.footer_in .linkBox > div{ display:flex; margin-bottom: 75px;}
.footer_in .linkBox dl{ width: 160px; text-align: center; }
.footer_in .linkBox dl dt{ color:#fff; text-transform: uppercase; font-weight: 500; margin-bottom: 15px;}
.footer_in .linkBox dl dd a{ color: rgba(255, 255, 255, 0.50); font-weight: 300; }
.footer_in .linkBox .copy{ color:#555; text-align: right; }
.footer_in .brand-box { margin:-5% 0 20px; }
.footer_in .brand-box a { display:flex; align-items:center; }
.footer_in .brand-box a span{ display:block; margin-left: 10px; color:#ddd; }

/* privacy */
.privacy { color:#333; font-size:18px; }
.privacy > div > p{ margin-bottom: 15px;}
.privacy dl:not(:last-child){ margin-bottom: 40px;}
.privacy dl dt{ margin-bottom: 10px; font-weight: bold; font-size:20px; color: #111; }
.privacy dl p:not(:last-child){ margin-bottom: 5px;}
.privacy dl dd > ul{ margin-left: 20px;}
.privacy dl dd > ul:not(last-of-type){ margin-bottom: 25px;}

/* paging */
.paging{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging .arr{display:flex;}
.paging .arr a.last,
.paging .arr a.first{letter-spacing:-10px;}
.paging .arr a.last i,
.paging .arr a.first i{-webkit-transform:translateX(-5px);transform:translateX(-5px);}
.paging a{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging ul{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 5px;}
.paging .arr a:not(:last-child),.paging ul li:not(:last-child){margin-right:5px;}
.paging a{ width:30px; height:30px; color: #333; line-height: 30px; font-weight: 600; font-size:16px; border-radius:50%; border:none;}
.paging ul li.on a { color:#fff; background: var(--mainC); border-color: var(--mainC); }
.paging .arr a{border:none; color: #666;}
.paging .arr a.first i{transform:translateX(-6px);}
.paging .arr a.last i{transform:translateX(-4px);}
.paging .arr a.first i:first-of-type{transform:translateX(-5px);}
.paging .arr a.last i:last-of-type{transform:translateX(-5px);}

/* animation */
@keyframes intro{
	0%{
		transform: translateY(-20px); 		
	}
	50%{
		transform: translateY(0); 	
	}
	100%{
		transform: translateY(-20px); 		
	}
}

@keyframes pagiBtn{
	from{
		width: 0;
	}
	to{
		width: 100%;
	}
}

@keyframes scrollBox{
	0%{
		transform: translateY(-15px); 		
	}
	50%{
		transform: translateY(0); 	
	}
	100%{
		transform: translateY(-15px); 		
	}
}