@charset "utf-8";


:root {
  --color-bg1: rgb(0, 6, 67);
  --color-bg2: rgb(25, 2, 51);
  --color1: 1, 1, 249;
  --color2: 0, 0, 191;
  --color3: 77, 1, 255;
  --color4: 0, 49, 245;
  --color5: 221, 0, 255;
  --circle-size: 80%;
  --blending: hard-light;
}
@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}
.bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
	z-index: -1;
}
.bg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
}
.bg .svgBlur {
	display: none;
}
.bg .noiseBg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	mix-blend-mode: soft-light;
	opacity: 0.3;
}
.bg .gradients_box {
	filter: url(#goo) blur(40px);
	width: 100%;
	height: 100%;
}
.bg .g1 {
	position: absolute;
	background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
	mix-blend-mode: var(--blending);
	width: var(--circle-size);
	height: var(--circle-size);
	top: calc(50% - var(--circle-size) / 2);
	left: calc(50% - var(--circle-size) / 2);
	transform-origin: center center;
	animation: moveVertical 25s ease infinite;
	opacity: 1;
}
.bg .g2 {
	position: absolute;
	background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
	mix-blend-mode: var(--blending);
	width: var(--circle-size);
	height: var(--circle-size);
	top: calc(50% - var(--circle-size) / 2);
	left: calc(50% - var(--circle-size) / 2);
	transform-origin: calc(50% - 400px);
	animation: moveInCircle 15s reverse infinite;
	opacity: 1;
}
.bg .g3 {
	position: absolute;
	background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
	mix-blend-mode: var(--blending);
	width: var(--circle-size);
	height: var(--circle-size);
	top: calc(50% - var(--circle-size) / 2 + 200px);
	left: calc(50% - var(--circle-size) / 2 - 500px);
	transform-origin: calc(50% + 400px);
	animation: moveInCircle 35s linear infinite;
	opacity: 1;
}
.bg .g4 {
	position: absolute;
	background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
	mix-blend-mode: var(--blending);
	width: var(--circle-size);
	height: var(--circle-size);
	top: calc(50% - var(--circle-size) / 2);
	left: calc(50% - var(--circle-size) / 2);
	transform-origin: calc(50% - 200px);
	animation: moveHorizontal 35s ease infinite;
	opacity: 0.7;
}
.bg .g5 {
	position: absolute;
	background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
	mix-blend-mode: var(--blending);
	width: calc(var(--circle-size) * 2);
	height: calc(var(--circle-size) * 2);
	top: calc(50% - var(--circle-size));
	left: calc(80% - var(--circle-size));
	transform-origin: calc(50% - 800px) calc(50% + 200px);
	animation: moveInCircle 20s ease infinite;
	opacity: 1;
}



.inner {
	position: relative;
	width: 100%;
	max-width: 1640px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(7.5px);
	transition: background .3s;
	z-index: 25;
}
#header .inner {
	max-width: 1740px;
	height: 118px;
}
#header .logo img {
	vertical-align: middle;
}
#header .gnb .swiper-wrapper {
	justify-content: center;
}
#header .gnb .swiper-slide {
	width: auto;
}
#header .gnb .swiper-slide a {
	font-size: 18px;
	opacity: .6;
	text-transform: capitalize;
	transition: opacity .3s;
}
/* __nv_gnb_active_css_v1 : 현재 페이지 메뉴 표시 (글자 폭만큼 밑줄) */
/* __nv_gnb_line_fix_v1 : a 가 inline 이면 position:relative 가 안 먹고,
   swiper 가 overflow:hidden 이라 아래로 삐져나간 선은 잘린다.
   inline-block 으로 바꾸고 선을 슬라이드 안쪽에 둔다. */
#header .gnb .swiper-slide.active a {
        opacity: 1;
        position: relative;
        display: inline-block;
        font-weight: 500;
        padding-bottom: 5px;
}
#header .gnb .swiper-slide.active a:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--green);
}
/* __nv_gnb_auth_v1 : 로그인 회원에게만 보이는 헤더 메뉴.
   기본 숨김 -> 로그인 확인되면 html.nv-auth-on 으로 노출 (깜빡임 방지) */
#header .gnb .swiper-slide.nv-auth-only {
        display: none;
}
html.nv-auth-on #header .gnb .swiper-slide.nv-auth-only {
        display: flex;
}
/* __nv_side_noline_v1 : 햄버거는 기존 배경 강조로 충분하므로 밑줄을 넣지 않는다.
   (헤더 메뉴에만 밑줄 적용) */
#header .gnb .swiper-slide a:hover {
	opacity: 1;
}
#header .h_util a {
	height: 36px;
	line-height: 36px;
	padding: 0 20px;
	border-radius: 50px;
	box-sizing: border-box;
}
.lang {
	width: 122px;
}
.lang .gt_switcher_wrapper {
	position: static!important;
}
.lang .gt_container--hich1m .gt_switcher {
	width: 100%;
}
.lang .gt_container--hich1m .gt_switcher .gt_selected {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50px;
}
.lang .gt_container--hich1m .gt_switcher .gt_selected a {
	width: 100%;
	font-size: 16px;
	color: var(--white);
	padding: 0 13px;
	border: 0;
}
.lang .gt_container--hich1m .gt_switcher .gt_selected a:hover {
	background: transparent;
}
.lang .gt_container--hich1m .gt_switcher .gt_selected a:after {
	top: 3px;
	background-image: url("../images/arrow_down_white.svg");
}
.lang .gt_container--hich1m .gt_switcher .gt_option {
	position: absolute !important;
    width: 122px;
    background: rgba(255, 255, 255, 0.15);
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
	padding: 10px 0;
	overflow: hidden;
    box-sizing: border-box;
}
.lang .gt_container--hich1m .gt_switcher .gt_option a {
    font-size: 16px;
    color: var(--white);
    line-height: 1.2;
    height: auto;
    padding: 10px 20px;
}
.lang .gt_container--hich1m .gt_switcher .gt_option a:hover {
	background: transparent;
}
.lang .gt_container--hich1m .gt_switcher a img {
	display: none;
}
#header .menu {
	position: relative;
	display: none;
}
#header .menu a {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
#header .menu a span {
	position: absolute;
	left: 6px;
	display: block;
	width: 20px;
	height: 2px;
	background: var(--white);
	transition: all .3s;
}
#header .menu a span:nth-child(1) {
	top: 7px;
	width: 17px;
}
#header .menu a span:nth-child(2) {
	top: 15px;
}
#header .menu a span:nth-child(3) {
	top: 23px;
	left: 9px;
	width: 17px;
}


.side_wrap {
	position: fixed; 
	right: -100%;
	width: 100%;
	height: 100vh;
	transition: all .2s;
	z-index: 48;
	background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(7.5px);
}
.side_wrap.on {
	right: 0;
}
.side_wrap .scroll_func {
    overflow-y: auto;
    max-height: calc(100vh - 68px);
    flex-wrap: nowrap;
    padding: 40px 20px;
    gap: 10px;
    box-sizing: border-box;
}
.side_wrap .top {
	position: sticky;
	top: 0;
	backdrop-filter: blur(30px);
	padding: 30px 20px;
	z-index: 1;
	box-sizing: border-box;
}
.side_wrap .top .lang .gt_container--hich1m .gt_switcher .gt_selected a {
	padding: 20px 13px;
}
.side_wrap .top .lang .gt_container--hich1m .gt_switcher .gt_option {
    background: rgba(0, 0, 0, 0.9);
}
.side_wrap .member_box a {
	height: 36px;
	line-height: 36px;
	padding: 0 20px;
	border-radius: 50px;
	box-sizing: border-box;
}
.side_wrap .profit {
	padding: 0 16px;
	box-sizing: border-box;
}
.side_wrap .profit .name {
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
}
.side_wrap .profit a {
	font-size: 14px;
	opacity: .8;
}
.side_wrap .depth {
	gap: 10px;
}
.side_wrap .depth01 {
	position: relative;
	border-radius: 15px;
	background: rgba(5, 0, 28, 0.15);
	backdrop-filter: blur(30px);
	padding: 20px 20px 10px;
	gap: 10px;
	box-sizing: border-box;
}
.side_wrap .depth02 {
	gap: 0px;
}
.side_wrap .depth02 li a {
	display: block;
	padding: 4px 10px;
	text-transform: capitalize;
	box-sizing: border-box;
}


.black_bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(3px);
	z-index: 34;
}
.not_scroll {
	overflow: hidden;
}


#container {
	position: relative;
}

#content {
	position: relative;
	width: 100%;
	max-width: 700px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 160px 40px;
	background: rgba(0, 0, 0, 0.05);
	box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.3), inset 0 0 2px rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(7.5px);
	box-sizing: border-box;
}
#content > * {
	gap: 80px;
}


#footer {
	position: relative;
}


.modal {
	position: relative;
	display: none;
}
.modal .black_bg {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999; /* 20260707 */
}
.modal .modal_cont {
    width: 90%;
    max-width: 1000px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-height: 95vh;
    overflow: hidden;
	z-index: 999999; /* 20260707 */
	background: rgba(255, 255, 255, 0.80);
	border-radius: 30px;
	box-sizing: border-box;
}
.modal .modal_cont .scroll {
	position: relative;
	max-height: 95vh;
    overflow-x: hidden;
    overflow-y: visible;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
	padding: 30px;
	box-sizing: border-box;
}
.modal .modal_cont .scroll::-webkit-scrollbar {
    display: none;
}
.modal .bar {
	gap: 10px;
	background: var(--black);
	color: var(--white);
	padding: 16px 30px;
	border-radius: 50px;
	gap: 10px;
	margin-bottom: 40px;
	box-sizing: border-box;
}
.modal .bar h3 {
	flex: 1;
	width: 100%;
	font-size: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.modal .bar .close {
	width: 15px;
	height: 15px;
	background: url("../images/ic_close_white.svg")no-repeat 50% 50%;
}
.modal .btn_area {
	gap: 10px;
	margin-top: 40px;
	justify-content: center;
}
.modal .btn_area > * {
	padding: 16px 60px;
	border-radius: 50px;
	font-size: 20px;
	text-align: center;
	box-sizing: border-box;
}



#agree_pop {
	z-index: 999;
}
#agree_pop .modal_cont {
	max-width: 350px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(255, 255, 255, 0.80);
	backdrop-filter: blur(30px);
}
#agree_pop .close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 42px;
	height: 42px;
	background: var(--white);
	border-radius: 50%;
	justify-content: center;
	z-index: 1;
}
#agree_pop .box {
	padding: 10px 0;
	box-sizing: border-box;
}
#agree_pop .box:first-child {
	margin-bottom: 40px;
}
#agree_pop .box > strong {
	display: block;
	color: var(--black);
	font-weight: 700;
	letter-spacing: 0.4px;
	margin-bottom: 14px;
}
#agree_pop .cont {
    line-height: 1.2;
    overflow-y: auto;
	min-height: 100px;
    max-height: calc(100vh - 350px);
	white-space: pre-line;
	color: var(--black);
}


#invest_pop .modal_cont {
	max-width: 700px;
	background: rgba(255, 255, 255, 0.80);
}
#invest_pop .scroll {
	padding: 50px 40px;
}
#invest_pop h3 {
	font-size: 40px;
	line-height: 1.2;
	margin-bottom: 20px;
}
#invest_pop .txt {
	font-size: 18px;
	line-height: 1.4;
	color: var(--black);
	margin-bottom: 40px;
}
#invest_pop .agree {
	position: relative;
	margin-bottom: 40px;
}
#invest_pop .agree input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	z-index: -1;
}
#invest_pop .agree input + label {
	position: relative;
	display: inline-block;
	padding: 2px 0 2px 34px;
	color: var(--black);
	box-sizing: border-box;
}
#invest_pop .agree input + label:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	border: 1px solid var(--black);
	box-sizing: border-box;
}
#invest_pop .agree input:checked + label:before {
	border: 1px solid var(--key-color);
	background: var(--key-color) url("../images/check.svg")no-repeat 50% 50% / 14px;
}
#invest_pop .agree button {
	color: var(--black);
	font-weight: 500;
}
#invest_pop .btn_area {
	gap: 20px;
}
#invest_pop .btn_area .g_btn {
	height: 76px;
	border-radius: 20px;
}
#invest_pop .btn_area .close {
	font-size: 18px;
	padding: 0;
	color: var(--black);
}


.link a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: max-content;
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.05);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	font-size: 18px;
	text-transform: uppercase;
	padding: 16px 24px;
	gap: 10px;
	transition: all .3s;
	box-sizing: border-box;
}
.link a:after {
	content: '';
	position: relative;
	right: 0;
	width: 20px;
	height: 13px;
	background: url("../images/arriw-right-long.svg")no-repeat 50% 50% / 100%;
	transition: all .3s;
}
.link a:hover {
	background: var(--key-color);
}
.link a:hover:after {
	right: -10px;
}


.tit_box {
	position: relative;
	gap: 16px;
	text-transform: capitalize;
}
.tit_box h3.tit {
	font-size: 40px;
	line-height: 1.2;
}
.tit_box p {
	font-size: 18px;
	line-height: 1.4;
}
.tit_box p.desc {
	margin-top: 4px;
}
.tit_box a {
	position: absolute;
    bottom: 2px;
    right: 0;
	width: max-content;
	padding-right: 26px;
	font-size: 18px;
	background: url("../images/arriw-right-long.svg")no-repeat 100% 50% / 20px;
	box-sizing: border-box;
}
.sub_tit_box h3.tit {
	font-size: 24px;
}


.bg_line {
	padding-bottom: 80px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}


#fix_bottom {
	position: fixed;
	bottom: 70px;
	left: 50%;
	transform: translate(-50%);
	width: max-content;
	max-width: 90%;
	z-index: 5;
}
#fix_bottom .bg-effect {
	position: absolute;
	z-index: -3;
	inset: 0;
	backdrop-filter: blur(3px);
	filter: url(#glass-distortion);
	overflow: hidden;
	border-radius: 50px;
	isolation: isolate;
}
#fix_bottom .bg-tint {
	z-index: -2;
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 34, 0.55);
	border-radius: 50px;
} /*__nv_fixbottom_bg_v1*/
#fix_bottom .bg-shine {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	border-radius: 50px;
}
#fix_bottom ul {
	padding: 20px;
	border-radius: 50px;
	gap: 16px;
	box-sizing: border-box;
}
#fix_bottom ul li a {
	display: block;
	min-width: 118px;
	font-size: 18px;
	font-weight: 500;
}
#fix_bottom ul li a .icon {
	display: none;
}
#fix_bottom ul li.ft05 {
	display: none;
}
#fix_bottom ul li a span {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
#fix_bottom ul li a span:before {
	content: '';
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    background: var(--point);
    border-radius: 50%;
	opacity: 0;
	z-index: -1;
}
#fix_bottom ul li.active a span,
#fix_bottom ul li:hover a span {
	padding-left: 10px;
    box-sizing: border-box;
    transition: all .5s;
}
#fix_bottom ul li.active a span:before,
#fix_bottom ul li:hover a span:before {
    opacity: 1;
	left: -5px;
	transition: all .3s;
}



@media screen and (max-width: 1750px) {
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1280px) {
	#header .gnb ul {
		gap: 30px;
	}
}
/* __nv_hdr1400_v1 : 헤더 메뉴가 10개로 늘어 1024~1400 구간에서도
   로그인/마이페이지 버튼이 두 번째 줄로 밀린다.
   헤더 전환(메뉴 접기 + 햄버거 노출)을 1400px 부터 적용한다.
   #fix_bottom(하단 고정바)은 기존 1024 기준 유지 -> 아래에서 블록을 분리 */
@media screen and (max-width: 1400px) {
	#header {
		padding-bottom: 45px;
	}
	#header .inner {
		height: 64px;
		gap: 7px;
	}
	#header .logo {
		flex: 1;
		width: 100%;
	}
	#header .gnb {
        position: fixed;
        top: 70px;
        left: 0;
    }
	#header .gnb .swiper {
		padding: 0 20px;
		box-sizing: border-box;
	}
	#header .gnb .swiper-wrapper {
		justify-content: start;
	}
	#header .gnb .swiper-slide a {
		font-size: 15px;
	}
	#header .h_util > a {
		display: none;
	}
	body #header {
		overflow: visible !important;
		z-index: 99999 !important;
		isolation: isolate !important;
	}
	#header .lang {
		display: block;
		width: 100px;
	}
	#header .lang .gt_switcher_wrapper {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		z-index: auto !important;
	}
	#header .h_util {
		position: relative;
		z-index: 30;
	}
	#header .lang .gt_container--hich1m .gt_switcher {
		position: relative;
	}
	#header .lang .gt_container--hich1m .gt_switcher .gt_selected a {
		font-size: 14px;
		padding: 0 10px;
	}
	#header .lang .gt_container--hich1m .gt_switcher .gt_option {
		width: 120px;
		right: 0;
		left: auto;
	}
	html body #header .lang .gt_container--hich1m .gt_switcher.nv-open .gt_option {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		width: 150px !important;
		height: auto !important;
		max-height: 400px !important;
		margin-top: 8px !important;
		overflow: visible !important;
		background: #1a1420 !important;
		border: 1px solid rgba(255,255,255,.15) !important;
		border-radius: 10px !important;
		padding: 8px 0 !important;
		z-index: 100000 !important;
		pointer-events: auto !important;
		transition: none !important;
	}
	html body #header .lang .gt_container--hich1m .gt_switcher.nv-open .gt_option a {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		height: auto !important;
		padding: 9px 16px !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
		color: #fff !important;
		white-space: nowrap !important;
		opacity: 1 !important;
	}
	#header .menu {
		display: block;
		position: relative;
		z-index: 40;
	}
}

/* __nv_hdr1400_v1 : 여기부터는 기존 1024 기준 유지 */
@media screen and (max-width: 1024px) {
	#fix_bottom {
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		border-top: 1px solid var(--white);
		border-radius: 0;
		backdrop-filter: blur(7.5px);
	}
	#fix_bottom .bg-effect,
	#fix_bottom .bg-tint,
	#fix_bottom .bg-shine {
		display: none;
	}
	#fix_bottom ul {
		width: 100%;
		justify-content: center;
		padding: 0 20px 24px;
		gap: 4px;
	}
	#fix_bottom ul li {
		position: relative;
		flex: 1;
	}
	#fix_bottom ul li a {
		width: auto;
		min-width: auto;
		font-size: 14px;
		font-weight: 300;
		letter-spacing: -0.3px;
		opacity: .8;
	}
	#fix_bottom ul li.active a {
		opacity: 1;
	}
	#fix_bottom ul li.active a:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		display: block;
		width: 80%;
		height: 3px;
		border-radius: 100px;
		background: var(--white);
	}
	#fix_bottom ul li.active a span {
		padding-left: 0;
	}
	#fix_bottom ul li.active a span:before {
		display: none;
	}
	#fix_bottom ul li a .icon {
		display: block;
		padding: 18px 0 12px;
	}
	#fix_bottom ul li.ft05 {
		display: block;
	}
	

	#invest_pop .scroll {
		padding: 40px 30px;
	}
	#invest_pop h3 {
    	font-size: 30px;
	}
	#invest_pop .txt {
		font-size: 16px;
	}
	#invest_pop .btn_area .g_btn {
		height: 62px;
		font-size: 16px;
		border-radius: 10px;
	}
	#invest_pop .btn_area .close {
		font-size: 16px;
	}


	.link a {
		font-size: 14px;
		padding: 12px 24px;
	}


	.tit_box {
		gap: 8px;
	}
	.tit_box h3.tit {
		font-size: 30px;
	}
	.tit_box p {
		font-size: 14px;
	}
}
@media screen and (max-width: 700px) {
	#content {
		padding: 140px 20px;
	}
	#content > * {
		gap: 60px;
	}
	.bg_line {
		padding-bottom: 60px;
	}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 380px) {
	#fix_bottom ul {
		padding: 0 5px 24px;
		gap: 0;
	}
	#fix_bottom ul li a {
		font-size: 13px;
	}
}



/* ============================================================
   __nv_modal_scroll_v1 : 약관 모달(#agree_pop) 스크롤 / 닫기 버튼
   문제1) .modal .modal_cont .scroll 이 overflow-y:visible 인데 부모 .modal_cont 는
          overflow:hidden → 넘치는 내용이 그냥 잘림. 스크롤 불가.
   문제2) #agree_pop .cont 가 각각 max-height:calc(100vh - 350px) 라 두 박스(Privacy+Terms)
          합계가 컨테이너를 초과.
   해결) 바깥 .scroll 을 유일한 스크롤 컨테이너로 만들고, 안쪽 .cont 는 높이 제한 해제.
        닫기 버튼(absolute, top:20 right:20)이 첫 줄을 가리지 않게 상단 패딩 확보.
   contact.html / join.html 의 #agree_pop 구조가 동일하므로 양쪽 모두 적용됨.
   ============================================================ */
.modal .modal_cont .scroll {
	overflow-y: auto;
}
#agree_pop .modal_cont {
	max-height: 85vh;
}
#agree_pop .modal_cont .scroll {
	max-height: 85vh;
	padding-top: 74px;   /* 닫기 버튼(20px + 42px) 아래로 내용 시작 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
#agree_pop .cont {
	max-height: none;    /* 바깥 .scroll 하나만 스크롤 */
	overflow: visible;
}
#agree_pop .box:first-child {
	margin-bottom: 28px;
}
@media screen and (max-width: 1024px) {
	#agree_pop .modal_cont,
	#agree_pop .modal_cont .scroll {
		max-height: 80vh;
	}
}


/* ============================================================
   __nv_modal_terms_v1 : 약관 모달 본문 정리 (contact.html / join.html 공통)
   1) 간격 불일치 — .cont 의 white-space:pre-line 때문에 join.html 처럼 <p> 를
      줄바꿈·들여쓰기로 정렬한 파일은 그 개행이 빈 줄로 렌더링됨.
      contact.html 은 한 줄로 붙어 있어 영향 없음 → 페이지마다 간격이 달랐음.
      => white-space:normal 로 바꾸고 문단 간격은 margin 으로 통일.
   2) 타이틀 중복 — 박스 <strong> 아래 본문 첫 줄에 <p><b>같은 제목</b></p> 이 또 있음.
      => <b> 만 든 첫 문단을 숨김. (문단 내용이 아니라 제목 역할이므로 안전)
   ============================================================ */
#agree_pop .cont {
	white-space: normal;
	line-height: 1.5;
}
#agree_pop .cont p {
	margin: 0 0 10px;
}
#agree_pop .cont p:last-child {
	margin-bottom: 0;
}
/* 중복 제목 제거 : .cont 안 각 언어 블록의 첫 문단이 <b> 하나뿐이면 숨김 */
#agree_pop .cont > div > p:first-child:has(> b:only-child) {
	display: none;
}


/* ============================================================
   __nv_side_hover_v2 : 사이드(햄버거) 메뉴 항목 선택 피드백
   .side_wrap .depth02 li a 는 padding 만 있고 hover/터치 반응이 전혀 없어
   어떤 메뉴를 눌렀는지 알 수 없었음.
   - PC   : 마우스 오버 시 은은한 배경
   - 모바일 : 누르는 순간(:active) 배경 + 살짝 눌리는 느낌
   - 현재 페이지(.active) : 좌측 포인트 바 + 강조
   ============================================================ */
.side_wrap .depth02 li {
	display: flex;          /* li 안을 a 가 꽉 채우도록 */
}
.side_wrap .depth02 li a {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;                /* li 가로 전체 */
	width: 100%;
	min-height: 24px;       /* 터치 영역 확보 (기존 padding 4px → 실질 24px 였음) */
	padding: 10px 14px;
	border-radius: 10px;
	transition: background .18s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}
.side_wrap .depth02 li a:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 2px;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--point);
	transition: height .18s ease;
}

/* PC : 마우스 오버 */
@media (hover: hover) {
	.side_wrap .depth02 li a:hover {
		background: rgba(255, 255, 255, 0.10);
	}
	.side_wrap .depth02 li a:hover:before {
		height: 60%;
	}
}

/* 모바일 : 누르는 순간 */
.side_wrap .depth02 li a:active {
	background: rgba(255, 255, 255, 0.16);
	transform: scale(0.985);
}
.side_wrap .depth02 li a:active:before {
	height: 60%;
}

/* 현재 페이지 */
.side_wrap .depth02 li.active > a,
.side_wrap .depth02 li > a.active {
	background: rgba(255, 255, 255, 0.12);
	font-weight: 700;
}
.side_wrap .depth02 li.active > a:before,
.side_wrap .depth02 li > a.active:before {
	height: 60%;
}


/* ============================================================
   __nv_side_auth_top_v1 : 사이드 메뉴의 LOGIN / MY PAGE·LOGOUT 버튼을
   닫기(✕) 버튼과 같은 줄(.top)에 배치 → 아래 메뉴 영역 높이 확보(약 60px)
   script.js 가 주입하는 스타일(.nv-side-auth-clean{...!important})보다
   선택자 특이도를 높여(3클래스) 확실히 덮는다.
   ============================================================ */
.side_wrap .top {
	position: sticky;
	padding: 18px 20px;
	padding-right: 70px;   /* ✕ 버튼 자리 확보 */
}
.side_wrap .top .nv-side-auth-clean {
	flex: 1 !important;
	min-width: 0 !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.side_wrap .top .nv-side-auth-clean a {
	flex: 1 !important;
	min-width: 0 !important;
	height: 40px !important;
	border-radius: 10px !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	letter-spacing: .02em !important;
}
.side_wrap .top .close {
	position: absolute !important;
	top: 50% !important;
	right: 20px !important;
	transform: translateY(-50%) !important;
	z-index: 50 !important;
}


/* ============================================================
   __nv_side_scrolllock_v1 : 사이드 메뉴 스크롤이 뒷 화면으로 넘어가던 문제
   .scroll_func 를 끝까지 스크롤하면 브라우저가 부모(body)로 스크롤을 넘긴다
   (scroll chaining) → contain 으로 차단.
   body 스크롤 잠금은 script.js 의 left_menu_onoff() 가 .not_scroll 로 처리.
   ============================================================ */
.side_wrap .scroll_func {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* __nv_side_auth_v1 : 햄버거 메뉴의 Assets / Account 그룹은 로그인 회원에게만 */
.depth > li.depth01.nv-auth-only {
        display: none;
}
html.nv-auth-on .depth > li.depth01.nv-auth-only {
        display: flex;
}


/* __nv_resp_nav_v1 : 반응형 정리
   480 초과~1400 이하 = 햄버거+하단메뉴+로그인버튼(상단), 480 이하 = 로그인버튼 햄버거안 */
@media screen and (max-width: 1400px) {
	#fix_bottom {
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		border-top: 1px solid var(--white);
		border-radius: 0;
		backdrop-filter: blur(7.5px);
	}
	#fix_bottom .bg-effect,
	#fix_bottom .bg-tint,
	#fix_bottom .bg-shine {
		display: none;
	}
	#fix_bottom ul {
		width: 100%;
		justify-content: center;
		padding: 0 20px 24px;
		gap: 4px;
	}
	#fix_bottom ul li {
		position: relative;
		flex: 1;
	}
	#fix_bottom ul li a {
		width: auto;
		min-width: auto;
		font-size: 14px;
		font-weight: 300;
		letter-spacing: -0.3px;
		opacity: .8;
	}
	#fix_bottom ul li.active a {
		opacity: 1;
	}
	#fix_bottom ul li.active a:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		display: block;
		width: 80%;
		height: 3px;
		border-radius: 100px;
		background: var(--white);
	}
	#fix_bottom ul li.active a span {
		padding-left: 0;
	}
	#fix_bottom ul li.active a span:before {
		display: none;
	}
	#fix_bottom ul li a .icon {
		display: block;
		padding: 18px 0 12px;
	}
	#fix_bottom ul li.ft05 {
		display: block;
	}
	/* 로그인/마이페이지/로그아웃 상단 노출 복구 (기존 1400블록의 display:none 덮어씀) */
	#header .h_util > a {
		display: flex !important;
	}
}
@media screen and (max-width: 540px) {
	/* __nv_respnav_540_v1 : 540 이하부터 로그인 버튼을 상단에서 숨김(햄버거 안 사용) */
	#header .h_util > a {
		display: none !important;
	}
}

/* __nv_mypage_hide_v1 : 비로그인(인라인 display:none) 상태의 마이페이지 버튼은 확실히 숨김.
   layout.css 의 '#header .h_util > a{display:flex!important}' 보다 뒤에 와야 이긴다. */
.nv-mypage-btn[style*="display:none"],
.nv-mypage-btn[style*="display: none"],
#header .h_util > a.nv-mypage-btn[style*="display:none"],
#header .h_util > a.nv-mypage-btn[style*="display: none"]{
  display:none !important;
}

/* __nv_botnav_guest_v1 : 비로그인(html.nv-guest) 이면 하단메뉴 My Page(ft05) 숨김 */
html.nv-guest #fix_bottom li.ft05{ display:none !important; }

/* ============================================================
   __nv_side_narrow_v1 : 1400px 이하 햄버거 메뉴를 우측 패널 폭으로.
   - .side_wrap 폭만 축소 (right:-100% / .on{right:0} 기존 동작 유지)
   - 안쪽 .bg 는 position:fixed 라 화면 전체를 채우므로 absolute 로 바꿔
     패널 안에만 그라데이션이 그려지게 한다 (배경 유지, 숨기지 않음)
   - 본문의 다른 .bg 는 영향 없음 (.side_wrap 하위로 한정)
   ============================================================ */
@media screen and (max-width: 1400px){
  .side_wrap{
    width: min(400px, 90vw) !important;
    overflow: hidden !important;
  }
  .side_wrap .bg{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .side_wrap .scroll_func{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* __nv_narrowpad_v1 : 좁은 화면 좌우 여백 축소 (상하 값은 유지) */
@media screen and (max-width: 380px) {
        .inner {
                padding-left: 10px;
                padding-right: 10px;
        }
        #content {
                padding-left: 10px;
                padding-right: 10px;
        }
        #header .gnb .swiper {
                padding-left: 10px;
                padding-right: 10px;
        }
}


/* __nv_hdrfit_v1 : 좁은 화면 헤더 한 줄 유지 (로고 축소 + 언어는 국기만) */
@media screen and (max-width: 420px) {
        #header .logo img {
                max-width: 120px;
                height: auto;
        }
        #header .lang {
                width: auto !important;
        }
        #header .lang .gt_switcher {
                width: auto !important;
        }
        #header .lang .gt_switcher .gt_selected a {
                width: auto !important;
                height: 32px !important;
                line-height: 32px !important;
                font-size: 0 !important;
                padding: 0 11px !important;
                display: inline-block !important;
                box-sizing: border-box !important;
        }
        #header .lang .gt_switcher .gt_selected a:after {
                display: none !important;
        }
        #header .lang .gt_switcher a img {
                display: inline-block !important;
                width: 20px !important;
                height: 20px !important;
                border-radius: 50%;
                vertical-align: middle;
                margin: 0 !important;
        }
}


/* __nv_botnav_pad_v1 : 하단 고정메뉴 여백 축소 */
@media screen and (max-width: 420px) {
        #fix_bottom ul {
                padding: 0 10px 14px !important;
        }
}


/* __nv_flagready_v1 : 헤더 국기 깜빡임 방지 (교체 완료 후에만 표시) */
@media screen and (max-width: 420px) {
        #header .lang .gt_switcher a img {
                visibility: hidden !important;
        }
        html.nv-flag-ready #header .lang .gt_switcher a img {
                visibility: visible !important;
        }
}


/* __nv_fbicon_center_v1 : 하단 고정메뉴 아이콘 가운데 정렬 */
#fix_bottom ul li a .icon svg {
        display: block;
        margin-left: auto;
        margin-right: auto;
}