@charset 'utf-8';
/* common */
:root {
    --baseFont: 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--one :  'ONE-Mobile-POP';
	--man :  "Manrope", sans-serif;
	--inter :  "Inter", sans-serif;
	--inter :  "Inter", sans-serif;
	--bgC :#151515; 
	--bgC2 :#252525; 
	--mainC: #0075DF;
	--subC: #;
}

.w1560{ max-width:1560px; margin: 0 auto; width: 100%; }	
.w1800{ max-width:1800px; margin: 0 auto; width: 100%; }

.p140{ padding: 140px 0;}
.p160{ padding: 160px 0;}

.mobile{ display:none; }
 
.flex-box{ display:flex;}
.flex-box.center{ display:flex; justify-content:center; align-items:center; }

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

body.scrollN{ height: 100vh; overflow: hidden; -ms-overflow-style:none scrollbar-width:none }
body.scrollN::-webkit-scrollbar { display: none; }

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

#link a{ width: 400px; min-height:80px; background: #fff; color:#333; border-radius:20px; display:flex; justify-content:center; align-items:center;font-weight: 500; letter-spacing: -0.44px; transition:all 0.3s; }
#link a img{ margin-left: 10px; transition:all 0.5s; }
#link:hover a{ background: var(--mainC); color:#fff; }
#link:hover a img{ filter: invert(1) brightness(10); -webkit-filter: invert(1) brightness(10); }

#visual{ position: relative; width: 100%; height: 100vh; overflow: hidden;}
/*#visual:before{ content:''; display:block; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 1;}*/
#visual video{ position:absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
#visual iframe{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: 0; pointer-events:none;}
#visual > div{ position: relative; width: 100%; height: 100%; z-index: 10; text-align: center; display:flex; justify-content:center; align-items:center; color:#fff; }
#visual > div .title{ font-family: 'S-CoreDream-7ExtraBold'; font-weight: bold;  line-height: 2; letter-spacing:30px; filter:blur(5px); transition:all 1s; white-space:nowrap; }
#visual > div .sns-box{ position: absolute; transform: translateY(-50%); top: 50%; right: 0; }
#visual > div .sns-box li{ opacity: 0.3; transition:all 0.5s; }
#visual > div .sns-box li:not(:last-child){ margin-bottom: 20px; }
#visual > div .sns-box li:hover{ opacity: 1; }
#visual > div .title.aos-animate{ line-height: 1.4; letter-spacing: -0.5px; filter:blur(0px); }
#visual > div .title.on span{ position: relative; display:inline-block; transform:translateY(0); animation: bounce .5s ease alternate; }
#visual .scrolldown{ position: relative; position: absolute; transform:translateX(-50%); left: 50%; bottom: 90px; }
#visual .scrolldown img{ animation: scrolldown 1.2s ease infinite;}

#mobile{ display:none; }
 
@keyframes scrolldown {
	0%{ transform:translateY(10px); }
	50% { transform:translateY(-10px);}
	100% { transform:translateY(10px); }
} 

/* header */
header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 100000; padding: 0 60px;}
header .header-box{ position: relative; display:flex; justify-content:space-between; align-items:center; height: 120px; }
header .header-box nav{ position: absolute; transform:translateX(-50%); top: 0; left: 50%; height: 100%; }
header .header-box nav #gnb{ display:flex; align-items:center; height: 100%; }
header .header-box nav #gnb > li{ position: relative; padding: 0 35px; height: 100%; display:flex; justify-content:center; align-items:center; }
header .header-box nav #gnb > li > a{ display:block; font-family: var(--man); font-size:18px; color:#fff; letter-spacing: -0.72px; font-weight: 700; white-space:nowrap; }
header .header-box nav #gnb > li .depth2{ position: relative; position: absolute; top: calc(100% - 18px); transform:translateX(-50%); left: 50%; text-align: center; display:flex; padding: 15px 30px; border-radius:50px; background: #fff; opacity: 0; pointer-events:none; transition:all 0.4s; }
header .header-box nav #gnb > li .depth2 li{ display:flex; align-items:center; overflow: hidden; }
header .header-box nav #gnb > li .depth2 li:not(:last-child):after{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: #bbb; margin: 0 30px; opacity: 0; 
transition:all 0.4s 0.2s; }
header .header-box nav #gnb > li .depth2 li a{ display:block; white-space:nowrap; color: rgba(21, 21, 21, 0.50); font-size:18px; font-weight: 600; transform:translateY(-30px); transition:all 0.4s; }
header .header-box nav #gnb > li .depth2 li:hover a{ color:#151515; }

header .header-box nav #gnb > li:hover .depth2{ opacity: 1; pointer-events:auto; }
header .header-box nav #gnb > li:hover .depth2 li a{ transform:translateY(0); }
header .header-box nav #gnb > li:hover .depth2 li:not(:last-child):after{ opacity: 1; }

#lang-box{ position: relative; min-width: 130px; }
#lang-box *{ position: relative; z-index: 2; font-family: var(--baseFont); }
#lang-box img{ transition:all 0.5s; }
#lang-box button{ position: relative; display:flex; align-items:center; border-radius:50px; border:1px solid #fff; padding: 10px 15px; overflow: hidden; color:#fff; transition:all 0.3s;}
#lang-box button span{ margin: 0 10px; }
#lang-box button:before{ content:''; display:block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #fff; transform:translateY(-101%); 
border-radius:50px; transition:all 0.5s; }
#lang-box ul{ position: absolute; transform:translateX(-50%); left: 50%; top: 100%; padding: 15px 0 0; width: 100%; text-align: center; }
#lang-box ul li{ overflow: hidden; }
#lang-box ul li:not(:last-child){ margin-bottom: 15px; }
#lang-box ul li a{ display:block; width: 100%; transform:translateY(-30px); opacity: 0; pointer-events:none; color:#fff; transition:all 0.5s; }

#lang-box.on ul li a{ transform:translateY(0); opacity: 1; pointer-events:auto; }
#lang-box.on button{ color:#151515; background: #fff; }
#lang-box.on button img{ filter:invert(1); }
#lang-box.on button img.arrow{ transform:rotate(180deg); }
#lang-box.on button:before{ transform:translateY(0); }

#all-btn{ display:none; cursor:pointer; width: 33px; height: 25px; margin-left: 20px; }
#all-btn span{ display:block; width: 100%; height: 3px; background: #fff; position: relative; left: 0; border-radius:5px; transition:all 0.3s; }
#all-btn:after,
#all-btn:before{ content:''; position: absolute; display:block; width: 100%; height: 3px; background: #fff; border-radius:5px; transition:all 0.3s; transition-delay:0s; }
#all-btn:before{ top: 0; left: 0; }
#all-btn:after{ top: calc(100% - 3px); left: 0; }
#all-btn.on span{ width: 0; }
#all-btn.on:before{ transform: translateY(-50%) rotate(45deg); top: 50%; transition-delay:0.5s; }
#all-btn.on:after{ transform: translateY(-50%) rotate(-45deg); top: 50%; transition-delay:0.5s; }

#allmenu{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: radial-gradient(119.27% 100% at 50% 0%, #252525 0%, #151515 65.08%); 
padding: 80px 20px 0; display:none; }
#allmenu #gnb{ margin-top: 30px;} 
#allmenu #gnb > li:not(:last-child){ margin-bottom: 30px;}
#allmenu #gnb > li > a{ display:block; font-size:23px; color:#fff; font-family: var(--man); font-weight: 600;}
#allmenu #gnb .depth2{ margin-top: 20px; background: #fff; border-radius:20px; padding: 20px 30px;}
#allmenu #gnb .depth2 li:not(:last-child){ margin-bottom: 15px;}
#allmenu #gnb .depth2 li a{ font-size:18px; color:#222; font-weight: 500;}

/* footer */
footer{ position: relative; z-index: 10000; background: radial-gradient(51.2% 71.75% at 51.2% 0%, #252525 0%, #151515 100%); padding: 80px 0 100px;}
footer .footer-inner > div{ display:flex; justify-content:space-between; }
footer .footer-inner .left-box ul{ display:flex; flex-wrap:wrap; gap:8px 20px; max-width:340px; color:rgba(255,255,255,0.7); font-weight: 300; margin: 65px 0 20px;}
footer .footer-inner .left-box .copy{ color:rgba(255,255,255,0.4); font-weight: 300; font-family: var(--man);}
footer .footer-inner .right-box{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
footer .footer-inner .right-box .sns-box{ display:flex; align-items:center; }
footer .footer-inner .right-box .sns-box li:not(:last-child){ margin-right: 40px; }
footer .footer-inner .right-box .sns-box li a{ color:rgba(255,255,255,0.5); font-weight: 500; transition:all 0.5s; }
footer .footer-inner .right-box .sns-box li:hover a{ color: #fff; }
footer .footer-inner .right-box #top-btn{ width: 80px; height: 80px; border-radius:50%; cursor:pointer; background: rgba(37, 37, 37, 1); color:#fff; font-weight: bold; display:flex; flex-direction:column; align-items:center; justify-content:center; }
footer .footer-inner .right-box #top-btn img{ margin-bottom: 5px;}

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:18px;	line-height: 1.5; word-break:break-all; }
.privacy h2 { font-weight:bold; color:#000; text-align: left; margin:0 0 80px; text-align: center; }
.privacy h3 { display:inline-block; vertical-align:bottom;}
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:18px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:18px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:17px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

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