@charset 'utf-8';
/* common */
:root {
	--bodyC : #000;
    --baseFont: 'Pretendard', 'Malgun Gothic', 'verdana', sans-serif;
	--pre: 'Pretendard', sans-serif;
	--poppin: "Poppins", sans-serif;
	--ibm: "IBM Plex Sans KR", sans-serif;
	--mainC: #008868;
	--subC: #176FC0;
	--bgG: linear-gradient(123deg, #050505 0%, #222 100%); 
	--Gra : linear-gradient(90deg, #008868 0%, #176FC0 100%);
	--borderW : 2px;
}

.w1760{ max-width:1760px; margin: 0 auto; }
.w1600{ max-width:1600px; margin: 0 auto;}

.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;}

#scrollBox{ position: absolute; transform:translateX(-50%); bottom: 0; left: 50%; color:#fff; font-weight: 500; }
#scrollBox .bar{ position: relative; width: 1px; height: 45px; background: rgba(255,255,255,0.1); margin: 15px auto 0;}
#scrollBox .bar span{ position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #fff; transition:all 0.5s;  animation: scrollBar 2s ease infinite; }

.bLine:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 20px; background-image: var(--bgG), linear-gradient(140deg, rgba(3, 188, 142, 1), rgba(0, 0, 0, 0), rgba(3, 188, 142, 1)); border: 2px solid transparent; background-origin: border-box; background-clip: content-box, border-box; opacity: 0;
transition:all 0.5s; }

.mainC{ color:var(--mainC)}
.subC{ color:var(--subC); }

#dimmed{ position: fixed; top: 0; left: 0; display:block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1001; display:none; }

#linkBox{ position: relative; width: 100%; height: auto; border-radius: 40px 0 40px 40px; background: var(--bgG); overflow: hidden;}
#linkBox a{ display:block; width: 100%; height: 100%; }
#linkBox .txtBox{ position: absolute; bottom: 60px; left: 60px; z-index: 1;}
#linkBox:before{ content:''; position: absolute; top: 0; left: 0; width: calc(100% - 4px); height: calc(100% - 4px); border-radius:40px; background-image: var(--bgG), linear-gradient(20deg, rgba(3, 188, 142, 1), rgba(0, 0, 0, 0) 1%, rgba(3, 188, 142, 1), rgba(0, 0, 0, 0) 85%); border: 2px solid transparent; background-origin: border-box; background-clip: content-box, border-box; z-index: 0; pointer-events:none; opacity: 0; transition:all 0.4s; } 
#linkBox .cover{ position: relative; position: absolute; top: -2px; right: -2px; z-index: 2; width: 102px; height: 102px; background: var(--bodyC); border-radius: 0 0 0 40px;  border: 2px solid #000; background-origin: border-box; background-clip: content-box, border-box; background-image:linear-gradient(#000, #000), linear-gradient(100deg, rgba(0, 0, 0, 0), rgba(3, 188, 142, 0.5), rgba(3, 188, 142, 0.5));  transition: all 0.4s; }
#linkBox .cover:after,
#linkBox .cover:before{ content:''; position: relative; position: absolute; top: 0; right: 100%; display:block; width: 40px; height: 40px; background:var(--bodyC); overflow: hidden; -webkit-mask-image: url("/img/common/bgSide.png"); mask-image: url("/img/common/bgSide.png");}
#linkBox .cover:before,
#linkBox .cover span.btm{ bottom: -40px; right: 0; top: auto;}
#linkBox .cover span{ position: relative; position: absolute; top: 0; right: 100%; width: 40%; height: 40px; overflow: hidden;}
#linkBox .cover span:after{ content:''; position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px solid transparent; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(3, 188, 142, 0.1), rgba(3, 188, 142, 0.5));  box-sizing: border-box;  top: -1px; right: -1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  -webkit-mask-composite: destination-out; opacity: 0; transition:all 0.4s;  }
#linkBox .cover span.top:after{ background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 100%, rgba(3, 188, 142, 0.1), rgba(3, 188, 142, 0.5));}
#linkBox:hover .cover{ border: 2px solid transparent;}
#linkBox:hover:before,
#linkBox:hover .cover span:after{ opacity: 1;}

/* header */
header{ position: fixed; top: 0; left: 0; width: 100%;z-index: 1000; transform: translateY(0); transition:all 0.5s; }
header .headerBox{ display:flex; justify-content:space-between; align-items:center; height: 85px;padding: 0 80px; position: relative; }
header .headerBox nav{ height: 100%;}
header .headerBox nav #gnb{ display:flex; align-items:center; height: 100%;}
header .headerBox nav #gnb > li{ position: relative; height: 100%;}
header .headerBox nav #gnb > li > a{ display:flex; justify-content:center; align-items:center; height: 100%; padding: 0 42.5px; font-size:17px; font-weight: 600; font-family: var(--pre);
color:#fff; text-align: center; }
header .headerBox nav #gnb > li .depth2{ position: absolute; top: 100%; left: 50%; transform:translateX(-50%); background: rgba(0,0,0,0.7); width: 210px; border-radius: 10px; display:none; backdrop-filter: blur(10px); }
header .headerBox nav #gnb > li .depth2 li{ position: relative; }
header .headerBox nav #gnb > li .depth2 li a{ display:block; color:rgba(255,255,255,0.45); text-align: center; font-family: var(--pre); text-align: center; font-size:16px; padding: 20px 0; 
transition:all 0.3s; }
header .headerBox nav #gnb > li .depth2 li:not(:last-child):after{ content:''; display:block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.50) 50.03%, rgba(255, 255, 255, 0.00) 100%, rgba(255, 255, 255, 0.00) 100.01%); }
header .headerBox nav #gnb > li .depth2 li:hover a{ color:#fff; }
header .headerBox #sideBox{ display:flex; align-items:center; }
header .headerBox #sideBox #langBox{ display:flex; align-items:center; margin-right: 70px;}
header .headerBox #sideBox #langBox li{ display:flex; align-items:center; }
header .headerBox #sideBox #langBox li:not(:last-child):after{ content:''; display:block; width: 1px; height: 10px; background: rgba(255,255,255,0.3); margin: 0 10px;}
header .headerBox #sideBox #langBox li a{ color:rgba(255,255,255,0.3); letter-spacing: -0.15px; font-weight: 700; font-family: var(--pre);}
header .headerBox #sideBox #langBox li.on a{ color:#fff; }
header .headerBox #sideBox #menuBtn{ display:flex; cursor:pointer; }

header.bg{ backdrop-filter: blur(10px); background: rgba(0,0,0,0.7);}
header.bg .headerBox nav #gnb > li .depth2{ margin-top: 10px;}

header.down{ transform: translateY(-100%);}

#allMenu{ position: relative; position: fixed; top: 0; left: 0;width: 100%; height: 100vh; background: #000; padding: 0 250px; display:none;  z-index: 1001;}
#allMenu .close{ position: absolute; top: 40px; right: 80px; cursor:pointer; }
#allMenu #allGnb{ height: 100%; display:flex; align-items: center;}
#allMenu #allGnb #gnb{ height: 100%; display: flex; flex-direction: column;  justify-content: center; border-left:1px solid rgba(255,255,255,0.15); border-right:1px solid rgba(255,255,255,0.15); }
#allMenu #allGnb #gnb > li{ position: relative; display:block; min-width:350px; cursor:pointer;}
#allMenu #allGnb #gnb > li{ padding: 15px 0;}
#allMenu #allGnb #gnb > li > a{ font-size: 50px; font-weight: bold; font-family: var(--pre); display:inline-block; width: 100%; padding: 0 135px 0 80px; transition:all 0.5s; pointer-events:none; }
#allMenu #allGnb #gnb > li.on > a,
#allMenu #allGnb #gnb > li:hover > a{ color:#fff; }
#allMenu #allGnb #gnb .depth2{ position: absolute; transform:translateY(-50%); top: 50%; left: calc(100% + 100px); display:none;width: 100%;}
#allMenu #allGnb #gnb .depth2 li{ display:inline-block; }
#allMenu #allGnb #gnb .depth2 li:not(:last-child){ margin-right: 40px; }
#allMenu #allGnb #gnb .depth2 li a{ display:block; white-space: nowrap; font-size:22px; font-weight: 600; font-family: var(--pre); color:#fff; }
#allMenu .bg{ position: absolute; bottom: 0; right: 0; z-index: -1;}

#inquiryBtn{ position: fixed; width: 50px; height: 180px; background: #fff; border-radius:10px 0 0 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
 transform:translateY(-50%); top: 50%; right: 0;	z-index: 999; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
#inquiryBtn span{ position: relative; transform: rotate(180deg);  writing-mode: vertical-rl; font-family: var(--pre); font-weight: bold; color:#111; margin-top: 10px; }

/* footer */
footer{ position: relative; background: #0A0A0A; padding: 100px 0 30px; z-index: 500;}
footer .footerIn{ text-align: center; }
footer .footerIn .logo{ margin-bottom: 40px;}
footer .footerIn .txtBox{ color:rgba(255,255,255,0.5); margin-bottom: 105px;}
footer .footerIn .txtBox p{ margin-bottom: 20px;}
footer .footerIn .txtBox span{ color:#fff; margin-right: 15px; font-weight: 300; }
footer .footerIn .txtBox .infoBox{ display:flex; justify-content:center; }
footer .footerIn .txtBox li{ display:flex; align-items:center; font-family: var(--pre); font-variant-numeric: lining-nums proportional-nums;}
footer .footerIn .txtBox li:not(:last-child){ margin-right: 40px;}
footer .footerIn .btmBox{ position: relative; display:flex; justify-content:space-between; align-items:center; }
footer .footerIn .btmBox .linkBox{ display:flex; }
footer .footerIn .btmBox .linkBox li:not(:last-child){ margin-right: 10px;}
footer .footerIn .btmBox .linkBox li a{ display:flex; justify-content:center; align-items:center; width: 30px; height: 30px; border-radius:50%; border:1px solid #fff; opacity: 0.5; transition:all 0.5s; }
footer .footerIn .btmBox .linkBox li:hover a{ opacity: 1; background: var(--mainC); border:1px solid var(--mainC); }
footer .footerIn .btmBox .policyBox{ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%;}
footer .footerIn .btmBox .policyBox a{ color:#fff; margin-bottom: 15px; display:block; font-weight: bold;}
footer .footerIn .btmBox .policyBox .copy{ font-family: var(--pre); font-weight: 500;}
footer .footerIn .btmBox .familyBox{ position: relative; z-index: 5; }
footer .footerIn .btmBox .familyBox ul{ position: absolute; transform:translateX(-50%); left: 50%; bottom: calc(100% - 1px);width: 100%; border:1px solid rgba(255,255,255,0.5); border-bottom:none; 
display:none; }
footer .footerIn .btmBox .familyBox ul li{ width: 100%; height: 50px; margin-bottom: -1px;}
footer .footerIn .btmBox .familyBox ul li a{ display:flex; align-items:center; width: 100%; height: 100%; padding: 0 20px; font-family: var(--pre); font-weight: 500; color:rgba(255,255,255,0.5); background: #0a0a0a; transition:all 0.5s; }
footer .footerIn .btmBox .familyBox ul li:hover a{ background: var(--mainC); color:#fff; }
footer .footerIn .btmBox .familyBox button{ width: 200px; height: 50px; border:1px solid rgba(255,255,255,0.5); padding: 0 20px; display:flex; justify-content:space-between; align-items:center; 
font-family: var(--pre); font-weight: 500; color:rgba(255,255,255,0.5); }
footer .footerIn .btmBox .familyBox button img{ transition:all 0.5s; }
footer .footerIn .btmBox .familyBox button.on img{ transform:rotate(180deg); }
#topBtn{ position: absolute; bottom: 30px; right: 10px; width: 50px; height: 50px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); display:flex; justify-content:center; align-items:center; 
transition:all 0.5s; }
#topBtn svg g{ transition:all 0.5s; }
#topBtn:hover{ background: var(--mainC); border:1px solid var(--mainC); }
#topBtn:hover svg g{ opacity: 1; }


/* privacy */
.policy .title{ font-weight:bold; color:#000; margin:0 0 80px; text-align: center; }
.privacy { color:#333; width: 100%; overflow: hidden; box-sizing:border-box; font-size:20px;	line-height: 1.5; }
.privacy h3 { display:inline-block; vertical-align:bottom;}
.privacy h2:first-child { margin-top: 0; }
.privacy p { line-height: 1.6;}
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ color:#222;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify;  line-height:140%;}
.privacy > dl > dd ul{ margin-top: 10px;}
.privacy > dl > dd ul li{ margin-top: 5px; line-height: 1.6;}
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 0 5px; line-height: 1.5; }
.privacy > dl > dd  dl{ margin: 10px 20px; }
.privacy > dl > dd > div:not(:last-child){ margin-bottom: 20px;}
.privacy table{ text-align: center; margin: 20px 0; }
.privacy table tr *{ border:1px solid #111;  padding: 10px 20px; color:#333; font-size:18px; line-height: 1.5; min-height:60px; }
.privacy table tr strong { border:none; font-weight:700; }
.privacy table tr th{ background: #ddd; font-weight:500;}
.privacy a { position: relative; }
/* .privacy a:before { content:''; display:block; position: absolute; bottom: -2px; left: 0; width:100%; height:2px; background:#333; } */

/* paging */

:root{
	/* 페이지버튼 */
	--pagingFontStyle: 'Red Hat Display', sans-serif;
	--pagingNumC : #333;
	--pagingArrowC: #666;
	--aSize : 30px;
	--pagingMarTop: 70px;
}

/* ======== 페이징 기본 ======== */

/* 기본 */
.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; margin-top: 120px; }
.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; font-size:18px; 
color:#ccc; }
.paging ul{ display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 15px; }
.paging ul li:not(:last-child),.paging .arr a:first-child{ margin-right: 15px;}
.paging ul li a{ width: 35px; height: 35px; border-radius:50%; font-family: var(--pre); font-variant-numeric: lining-nums proportional-nums; font-weight: 700; }
.paging ul li.on a { color:#fff; background: var(--mainC); border-color: var(--mainC); }


/* animation */
@keyframes scrollBar{
	0%{ height: 0; }
	100%{ height: 100%; }
}

@keyframes rollingleft {
	0% { transform: translateX(0); }
	50% { transform: translateX(-100%); }
	50.01% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}

@keyframes rollingleft2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-200%); }
}

@keyframes rollingRight {
	0% { transform: translateX(0); }
	50% { transform: translateX(100%); }
	50.01% { transform: translateX(-100%); }
	100% { transform: translateX(0); }
}

@keyframes rollingRight2 {
	0% { transform: translateX(-200%); }
	100% { transform: translateX(0); }
}

@keyframes circleFade {
	0% { opacity: 0; }
	50% { opacity: 1;}
	100% { opacity: 0;}
}