@charset 'utf-8';
/* common */
:root {
    --baseFont: 'Pretendard', 'Malgun Gothic', 'verdana', sans-serif;
	--Red : "Red Hat Display", sans-serif; 
	--mainC: #1EB6B7;
}

body.login{ height:100%; min-height:100%; overflow:hidden !important; touch-action:none; }

.w1820{ max-width:1820px; margin: 0 auto; }
.w1550{ max-width:1550px; margin: 0 auto; }
.redH{ font-family:var(--Red); }
.bLine{ background-image: linear-gradient(#141414, #141414), linear-gradient(125deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent; background-origin: border-box; background-clip: content-box, border-box;}

.mainC{ color: #1EB6B7; }

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

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

#mobile{ display:none; }

#viewBtn{ position: relative; color:#fff; display:inline-flex; }
#viewBtn span{ position: relative; position: absolute; transform:translateY(-50%); top: 50%; left: 100%; margin-left: 10px;}
#viewBtn span:before{ content:''; display:block; width:0; height: 1px; background: rgba(255,255,255,0.43); opacity: 0; transition:all 0.5s;}
#viewBtn span:after{ content:''; display:block; width: 5px; height: 5px; border-radius:50%; background: #fff; position: absolute; transform:translateY(-50%); top: 50%;
left: 0; transition:all 0.5s; }
#viewBtn:hover span:before{ opacity: 1; width: 27px;}
#viewBtn:hover span:after{ left: 100%; }

#arrowBox{ display:flex; }
#arrowBox figure{ width: 50px; height: 50px; border-radius:50%; border:1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.03); display:flex; justify-content:center; align-items:center; cursor:pointer; transition:all 0.5s; }
#arrowBox figure.prev{ margin-right: 12px; }
#arrowBox figure:hover{ background: var(--mainC);}

/* header */
header{ position: relative; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition:all 0.5s; opacity: 1; transform: translateY(0); }
header .headerBox{ position: relative; padding: 0 50px; height: 90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid transparent; }
header .headerBox:before{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background: #fff; height: 520px; opacity: 0; transition:all 0.5s; 
z-index: -1; visibility: hidden;}
header .headerBox .logo a{display: flex; justify-content: center; align-items: center; }
header .headerBox .logo .topTxt path{ transition:all 0.5s; }
header .headerBox nav{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; }
header .headerBox nav,
header .headerBox nav #gnb{ height: 100%; display:flex; }
header .headerBox nav #gnb > li{ position: relative; }
header .headerBox nav #gnb > li > a{ position: relative; font-size:18px; color:#fff; font-weight: 500; z-index: 5; transition:all 0.5s; display:flex; justify-content:center; align-items:center; height: 100%; padding: 0 35px; }
header .headerBox nav #gnb > li > a:after{ content:''; display:block; width: 6px; height: 6px; border-radius:50%; background: var(--mainC); position: absolute; transform:translateX(-50%); left: 50%;
bottom: -3px; opacity: 0; transition:all 0.5s; }
header .headerBox nav #gnb > li .depth2{ position:relative; height: inherit; z-index: 1; position: absolute; transform:translateX(-50%); top: 100%; left: 50%; display:none; padding-top: 35px;
min-width:1500px; justify-content:center;  } 
header .headerBox nav #gnb > li .depth2 li a{ font-size:16px; color:#666; transition:all 0.5s; display: inline-block; white-space: nowrap;}
header .headerBox nav #gnb > li .depth2 > li:not(:last-child){ margin-right: 0; transition:all 0.5s; }
header .headerBox nav #gnb > li .depth2 > li > a{ margin-bottom: 18px; color:#111; font-weight: bold; font-size:18px; }
header .headerBox nav #gnb > li .depth3 li a{ font-size:16px; color:#666; margin-bottom: 15px; transition:all 0.2s; letter-spacing: -0.32px;}
header .headerBox #sideBox,
header .headerBox #sideBox .wrapBox{ display:flex; align-items:center; }
header .headerBox #sideBox .loginBtn{ display:flex; align-items:center; }
header .headerBox #sideBox .loginBtn a{ color:#fff; font-weight: 500; transition:all 0.5s; }
header .headerBox #sideBox .loginBtn .svg{ margin-right: 10px; }
header .headerBox #sideBox .loginBtn .svg path{ transition:all 0.5s; }
header .headerBox #sideBox .loginOff .loginBtn:hover a{ color:var(--mainC); }
header .headerBox #sideBox .loginOff .loginBtn:hover .svg path{ fill:var(--mainC); }
header .headerBox #sideBox .loginOn{ position: relative; }
header .headerBox #sideBox .loginOn ul{ padding: 20px; width: auto; }
header .headerBox #sideBox .loginOn ul li:not(:last-child){ margin-bottom: 7px;  }
header .headerBox #sideBox .loginOn ul li a{ justify-content:center; transition:all 0.5s; font-family: var(--baseFont); font-size:16px; word-break: keep-all;}
header .headerBox #sideBox .loginOn ul li:hover a{ color:var(--mainC); }
header .headerBox #sideBox .listBox{ position: relative; }
header .headerBox #sideBox .listBox img{ transition:all 0.5s; }
header .headerBox #sideBox .txt{ color:#fff; font-weight: 500; font-family:var(--Red); cursor:pointer; transition:all 0.5s; }
header .headerBox #sideBox .txt img{ margin-left: 10px; transition:all 0.5s; }
header .headerBox #sideBox ul{ position: absolute; transform:translateX(-50%); left: 50%; top: calc(100% + 10px) ;width: 100%; font-family:var(--Red); border-radius:8px; background: #fff; display:none; }
header .headerBox #sideBox ul li a{ display:flex; align-items:center;  color:#111; font-weight: 500; font-size:14px; font-family: var(--Red);}
header .headerBox #sideBox .snsBox{ margin: 0 25px; }
header .headerBox #sideBox .snsBox ul{ padding: 10px; width: 110px; }
header .headerBox #sideBox .snsBox ul li:not(:last-child){ margin-bottom: 5px; }
header .headerBox #sideBox .snsBox ul li a img{ margin-right: 5px; }
/*header .headerBox #sideBox .langBox ul{ padding: 8px 10px; width: 80px;}*/
/*header .headerBox #sideBox .langBox ul li:not(:last-child){ margin-bottom: 3px;}*/
/* 250820 수정 */
header .headerBox #sideBox .langBox ul{ padding: 12px 10px; width: 71px;}
header .headerBox #sideBox .langBox ul li:not(:last-child){ margin-bottom: 11px;}
header .headerBox #sideBox ul li a { justify-content:center; }

header .headerBox #sideBox .langBox ul li a img{ margin-right: 3px;}
header .headerBox #menuBar{ position: relative; cursor: pointer; width: 45px; height: 10px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; margin-left: 55px;}
header .headerBox #menuBar span{ position: absolute; transform:translateX(-50%); left: 50%; width: 100%; height: 1px; background: #fff; display:block; transition:all 0.5s;}
header .headerBox #menuBar .bar1{ top: 0;}
header .headerBox #menuBar .bar2{ bottom: 0;}

/* 20250617 */
header.on .headerBox .logo .bottomTxt path{ fill:#B4B4B4; }

header.on .headerBox{ border-bottom:1px solid #E4E4E4;}
header.on .headerBox:before{ opacity: 1; visibility: visible;}
header.on .headerBox nav #gnb > li .depth2 > li:not(:last-child){ margin-right: 100px;}
header.on .headerBox nav #gnb > li > a,
header.on .headerBox #sideBox .loginBtn a,
header.on .headerBox #sideBox .txt{ color:#111; }
header.on .headerBox #sideBox img{ filter:invert(1); }
header.on .headerBox #sideBox .loginBtn .svg path{ filter:invert(1); }
header.on .headerBox #menuBar span{ background: var(--mainC);}

header .headerBox nav #gnb > li.on > a:after{ opacity: 1;}
header .headerBox nav #gnb > li .depth3 li:hover a{ color:var(--mainC); }

header .headerBox #sideBox .listBox.on .txt img{ transform:rotate(180deg); }

header.all .headerBox .logo .topTxt path{ fill:#fff; }
header.all .headerBox #menuBar span{ position: absolute;  transform: translate(-50%, -50%) rotate(30deg); top: 50%; left: 50%;}
header.all .headerBox #menuBar .bar2{ transform: translate(-50%, -50%) rotate(-30deg);}

header.bg{ background: rgba(0,0,0,0.5);}
header.bg.all{ background: transparent;}

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

body.login header.down{ transform: translateY(0);}

/* allMenu */
#allMenu{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0E0E0E; display:none; z-index: 999;}
#allMenu .wrapBox{ display:flex;width: 100%; height: 100%; }
#allMenu .leftBox{ background: var(--mainC); padding: 35px 50px; display:flex; flex-direction:column; justify-content:flex-end; flex-shrink:0; max-width: 390px; }
#allMenu .leftBox .snsBox{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-right: 50px; }
#allMenu .leftBox .snsBox li{ width: 48px; height: 48px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); }
#allMenu .leftBox .snsBox li a{ display:flex; justify-content:center; align-items:center; width: 100%; height: 100%;}
#allMenu .leftBox .infoBox{ margin: 40px 0 65px;}
#allMenu .leftBox .infoBox li:not(:last-child){ margin-bottom: 30px;}
#allMenu .leftBox .infoBox li span{ display:block; font-weight: bold; font-family:var(--Red); color:#fff; margin-bottom: 15px;}
#allMenu .leftBox .infoBox li p{ color:rgba(255,255,255,0.9); }
#allMenu .leftBox .infoBox li p:not(:last-child){ margin-bottom: 7px; }
#allMenu .leftBox .copy{ font-family:var(--Red); color:rgba(255,255,255,0.5);}
#allMenu .allGnb{ padding: 115px 85px; width: 100%; display:flex; align-items:center; }
#allMenu .allGnb #gnb{ position: relative; }
#allMenu .allGnb #gnb > li:not(:last-child){ margin-bottom: 60px; }
#allMenu .allGnb #gnb > li > a{ color: rgba(255, 255, 255, 0.15); font-size: 60px; font-weight: 700; letter-spacing: -1.2px; min-width:270px; padding-right: 60px; transition:all 0.5s; }
#allMenu .allGnb #gnb > li .depth2{ position: absolute; transform: translateY(-50%);  top: 50%; left: 100%; display: flex; flex-wrap: wrap; min-width:1020px; height: calc(100vh - 220px); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.06); display:none; }
#allMenu .allGnb #gnb > li .depth2 > li{ width: calc(100% / 3); border-right:1px solid rgba(255,255,255,0.06); padding-left: 35px; padding: 35px;}
#allMenu .allGnb #gnb > li .depth2 > li:nth-child(3n){ border-right:none; }
#allMenu .allGnb #gnb > li .depth2 li a{ font-size:16px; color:rgba(255,255,255,0.7); transition:all 0.5s; display: inline-block; white-space: nowrap;}
#allMenu .allGnb #gnb > li .depth2 > li > a{ color:#fff; font-weight: bold; margin-bottom: 18px;}
#allMenu .allGnb #gnb > li .depth3 li:not(:last-child){ margin-bottom: 15px; }
#allMenu .allGnb #gnb > li .depth3 li a{ transition:all 0.5s; }
#allMenu .allGnb #gnb > li:hover > a,
#allMenu .allGnb #gnb > li .depth3 li:hover a,
#allMenu .allGnb #gnb > li.on > a,
#allMenu .allGnb #gnb > li .depth2 > li.on > a{ color:var(--mainC); }

/* sideBar */
#sideBar{ position: fixed; transform:translateY(-50%); top: 50%; right: -140px; display:flex; align-items:center; transition:all 0.5s; z-index: 1000;}
#sideBar > *{border-radius: 10px 0px 0px 10px; background: var(--mainC); backdrop-filter: blur(2px);}
#sideBar button{ width: 30px; height: 80px; }
#sideBar button img{ transition:all 0.5s; }
#sideBar ul{ padding: 25px 15px; width: 140px;}
#sideBar ul li:not(:last-child){ margin-bottom: 8px; }
#sideBar ul li a{ display:flex; align-items:center; color:#fff; }
#sideBar ul li a img{ margin-right: 9px;}
#sideBar.on{ right: 0; }
#sideBar.on button img{  transform: scaleX(-1);}

/* cursor */
#cursor{ position: relative; position: absolute; transform-origin: center center; z-index: 50; pointer-events: none;  overflow: hidden; animation: cursorR 0.5s ease forwards; display: flex; align-items: center; gap: 10px; user-select: none; opacity: 0;}
#cursor .txt{ width: 88px; height: 88px; border-radius:50%; background: rgba(30, 182, 183, 0.60); backdrop-filter: blur(3px); border:1px solid var(--mainC); color:#fff; font-family:var(--Red); 
font-weight: bold; display:flex; justify-content:center; align-items:center; }
#cursor.fade{ animation: cursorS 1s ease forwards; opacity: 1;}

/* footer */
footer{ position: relative; padding-top: 105px;}
footer .w1820 > div{ display:flex; justify-content:space-between; }
footer .topBox{ margin-bottom: 290px;}
footer .topBox .title{ color:#fff; font-family:var(--Red); font-weight: bold; line-height: 85px;}
footer .topBox .footerGnb{ margin-top: 20px;}
footer .topBox .footerGnb #gnb{ display:flex; gap:55px }
footer .topBox .footerGnb #gnb > li > a{ color:#fff; font-size: 20px; font-weight: bold; margin-bottom: 15px; display:block; }
footer .topBox .footerGnb #gnb .depth2 li:not(:last-child){ margin-bottom: 8px; }
footer .topBox .footerGnb #gnb .depth2 li a{ color:rgba(255,255,255,0.8); font-size:17px; font-family:var(--Red); }
footer .btmBox{ align-items:flex-end; margin-bottom: 60px;}
footer .btmBox .infoBox{ display:flex; }
footer .btmBox .infoBox .title{ color:#fff; margin-bottom: 15px; font-family:var(--Red); font-weight: bold;} 
footer .btmBox .infoBox > div:not(:last-child){ margin-right: 80px;}
footer .btmBox .infoBox ul li{ color:rgba(255,255,255,0.9); display:flex; align-items:center; font-weight: 300; }
footer .btmBox .infoBox ul li:not(:last-child){ margin-bottom: 10px;}
footer .btmBox .infoBox ul li span{ width: 24px; height: 24px; display:flex; justity-content:center; align-items:center; margin-right: 7px;}
footer .btmBox .faBtn{ width: 195px; border-radius:10px; border:1px solid rgba(255,255,255,0.25); cursor:pointer; background: transparent; transition:all 0.5s; }
footer .btmBox .faBtn p,
footer .btmBox .faBtn li button{ width: 100%; height: 60px; display:flex; justify-content:space-between; align-items:center; padding: 0 15px; color:#fff; font-family:var(--Red); transition:all 0.5s; }
footer .btmBox .faBtn li button{ height: 0; overflow: hidden; opacity: 0; color:#111; }
footer .btmBox .faBtn p img{ transition:all 0.5s; }
footer .btmBox .faBtn.on{ background: #fff; }
footer .btmBox .faBtn.on p{ color:#111; }
footer .btmBox .faBtn.on p img{ transform:rotate(180deg); filter:invert(1); }
footer .btmBox .faBtn.on li button{ height: 60px; opacity: 1;}
footer .copyBox{ border-top:1px solid rgba(255,255,255,0.12); padding: 25px 0;}
footer .copyBox .w1820{ display:flex; justify-content:space-between; }
footer .copyBox .copy{ color:rgba(255,255,255,0.5); font-family:var(--Red); }
footer .copyBox .link a{ color:#fff; }
footer #topBtn{ position: absolute; right: 10px; bottom: 88px; cursor:pointer; }

/* 20251022 */
footer .topBox { margin-bottom: 40px; }
footer .btmBox { margin-bottom: 80px; }
footer .copyBox { position: relative; padding: 0; border-top: none; }
footer .copyBox::before{ content:""; display: block; width: 100%; height: clamp(200px,41.67vw,800px); background: url("/img/common/footer_bg.jpg") no-repeat center center/cover; }
footer .copyBox .w1820 { position: absolute; left: 50%; bottom: 0; width: 100%; padding: 25px 0; transform:translateX(-50%); }
footer .copyBox .copy, footer .copyBox .link a { font-weight: 500; color: #fff; }

/* privacy */
.privacy { color:rgba(255,255,255,0.9); width: 100%; overflow: hidden; box-sizing:border-box; font-size:18px; line-height: 1.65; 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:not(:first-child),
.privacy > dl { margin-bottom: 30px;}
.privacy > dl > dt{ color: var(--mainC);font-weight:700; margin-bottom: 5px;}
.privacy > dl > dd > p{ margin-bottom: 5px;}
.privacy > dl > dd ul li{ margin-top: 10px; word-break: keep-all; text-indent: -20px; margin-left: 20px;}
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy ul.innerList{ padding:0 10px; }

/* popup */
#popBox{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20000; display:flex; flex-direction:column; justify-content:center; }
#popBox #dimBox{ display:block; width: 100vw; height: 100vh; z-index: 0;}
#popBox .w1550{ width: 100%; display:flex; align-items:center; justify-content:space-between; overflow: hidden; gap: 40px; margin-bottom: 65px;}
#popBox .w1550 .slideBox{ max-width:1340px; }
#popBox .w1550 .slideBox .slick-list{ margin-right: -40px; }
#popBox .w1550 .slideBox .slick-slide{ margin-right: 40px; border-radius:15px; overflow: hidden; }
#popBox .w1550 .slideBox .slick-slide a{ width: 420px; height: 500px; display: block; position: relative; border-radius:10px; overflow: hidden; margin: 0 auto;}
#popBox .w1550 .slideBox .slick-slide a img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
#popBox .w1550 .arrow{ width: 65px; height: 65px; border-radius:50%; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(80px); display:flex; justify-content:center; align-items:center; cursor:pointer; flex-shrink:0; }
#popBox .txtBox{ position: relative; display:flex; justify-content:center; }
#popBox .txtBox .chkBox:first-child{ margin-right: 40px;}
#popBox .txtBox .chkBox input{ display:none; }
#popBox .txtBox .chkBox label{ display:flex; align-items:center; cursor: pointer; margin-top: 12px;}
#popBox .txtBox .chkBox label span{ position: relative; display: inline-block; width: 16px; height: 16px; border:1px solid #fff; border-radius:50%; }
#popBox .txtBox .chkBox label span:after{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 8px; height: 8px; 
background: var(--mainC); border-radius:50%; opacity: 0; }
#popBox .txtBox .chkBox label p{ margin-left: 10px; color:#fff; }
#popBox .txtBox .chkBox input:checked + label span:after{ opacity: 1; }

/* loginBtn */
.loginPopup{ max-width: 800px; text-align: center; width: 90%; background: #fff; position: fixed; top: 50%; left: 50%; z-index: 20; transform: translate(-50%, -50%); z-index: 20000; display:none;background-image: linear-gradient(#111, #111), linear-gradient(150deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent; background-origin: border-box; background-clip: content-box, border-box; border-radius:40px; }
.loginPopup .inner{ padding: 110px 30px 95px; }
.loginPopup .closeBtn{ width: 25px; height: 25px;  position: absolute; top: 30px; right: 30px;}
.loginPopup .closeBtn::before, 
.loginPopup .closeBtn::after{ content: ""; display: inline-block; width: 100%; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; border-radius:50px; }
.loginPopup .closeBtn::before{ transform: translate(-50%, -50%) rotate(45deg); }
.loginPopup .closeBtn::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.loginPopup h5{ font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.loginPopup p{ font-weight: 300; color: #fff; line-height: 1.5; margin:15px 0 45px;}
.loginPopup a{ width: 320px; height: 60px; display: flex; justify-content: center; align-items: center; background: var(--mainC); -webkit-border-radius: 10px; font-weight: 500;  color: #fff; letter-spacing: -0.02em; text-align: center; margin: 0 auto; border-radius:50px; }

/* dimBox */
#dimBox{ position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(14, 14, 14, 0.83); z-index: 19999; display:none; }


/* animation */
@keyframes cursorS{
	0%{ transform: scale(0); }
	100%{ transform: scale(1); }
}

@keyframes cursorR{
	0%{ transform: scale(1); }
	100%{ transform: scale(0); }
}

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

@keyframes circle2{
	0%{ opacity: 0; }
	50%{ opacity: 0.5; }
	100%{ opacity: 0; }
}

@keyframes circle3{
	0%{ opacity: 0; }
	50%{ opacity: 0.8; }
	100%{ opacity: 0; }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes reverse-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* 20250820, 20251022 */
.headerLink { display: flex; align-items:center; gap:12px; margin-right: 29px; }
header.on .headerBox #sideBox .headerLink img{ filter:none; }

#allMenu .headerLink { display: none; }
header .headerBox #sideBox .loginBtn a { font-size: 14px; }

@media screen and (max-width: 1820px) { 
	footer .copyBox .w1820 { padding: 25px 20px; }
}

@media screen and (max-width: 1800px) {
	.headerLink { gap:5px; margin-right: 15px; }
	.headerLink > a { width: 30px; }

	header .headerBox nav {
		left: 45%;
	}
}
@media screen and (max-width: 1600px) {
	header .headerBox nav {
		left: 40%;
	}
}
@media screen and (max-width: 1200px) { 
	footer .btmBox { margin-bottom: 60px; }
}

@media screen and (max-width: 960px) {
	header .headerBox #sideBox .langBox ul li:not(:last-child) {
		margin-bottom: 7px;
	}
}

@media screen and (max-width: 768px) {
	header .headerLink { display: none; }
	#allMenu .leftBox { position: relative; }
	#allMenu .headerLink { display: flex; gap:10px; position: absolute; right: 20px; top: -20px; margin-right: 0; transform:translateY(-100%); }
	#allMenu .headerLink > a { width: 40px; }
}