@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import "./variables.css";

/*
	0: nexon, 1: 사이퍼즈, 2: 카트라이더, 3: 던파, 4: 네이버채널링
*/

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: var(--header-height);
	padding: 0 40px;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	;
	font-weight: 400;
	color: #fff;
	background: var(--primary04);
	transition: padding 0.3s;
}

	#header.pop .ncs__logo {
		z-index: -1;
	}

	#header + * {
		padding-top: var(--header-height);
	}

.icon__quick-bug {
	background: url("../image/main/icon__quick-bug@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-report {
	background: url("../image/main/icon__quick-report@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-restore {
	background: url("../image/main/icon__quick-restore@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-suggest {
	background: url("../image/main/icon__quick-suggest@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-event {
	background: url("../image/main/icon__quick-event@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-inquiry {
	background: url("../image/main/icon__quick-inquiry@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-present {
	background: url("../image/main/icon__quick-present@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-ribbon {
	background: url("../image/main/icon__quick-ribbon@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-important {
	background: url("../image/main/icon__quick-important@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-calendar {
	background: url("../image/main/icon__quick-calendar@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-ribbon2 {
	background: url("../image/main/icon__quick-ribbon2@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-schoolzone {
	background: url("../image/main/icon__quick-schoolzone@2x.png") no-repeat;
	background-size: contain;
}

.icon__quick-cash {
	background: url("../image/main/icon__quick-cash@2x.png") no-repeat;
	background-size: contain;
}

.icon__ncs {
	width: 32px;
	height: 32px;
	background: url(../image/main/icon__ncs@2x.png) 0 0 no-repeat;
	background-size: contain;
}
/* gnb */
/* snb > quickMenu */
aside {
	position: absolute;
	top: 0;
	right: 0;
	z-index: var(--z-aside);
	transition: right 0.3s;
}

	aside .quickMenu {
		width: var(--quickWidth);
		flex-grow: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 200px;
		padding: 0;
		border-radius: 10px;
		background-color: #fff;
		transition: all 0.2s;
		overflow: hidden;
	}

		aside .quickMenu li {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 6px 12px;
			min-height: 48px;
			font-size: 12px;
			font-weight: normal;
			font-stretch: normal;
			font-style: normal;
			line-height: 1.5;
			letter-spacing: -0.5px;
			text-align: left;
			color: var(--text_primary);
			cursor: pointer;
			word-break: keep-all;
			transition: all 0.1s;
		}

			aside .quickMenu li:hover {
				background-color: var(--grey20);
			}

			aside .quickMenu li:not(:first-child) {
				border-top: 1px solid var(--secondary01);
			}

			aside .quickMenu li i[class^="icon__"] {
				flex: none;
				width: 18px;
				height: 18px;
				margin-right: 6px;
			}

			aside .quickMenu li > span,
			aside .quickMenu li > a {
				width: 100%;
				display: inline-block;
				max-height: 38px;
				word-break: keep-all;
				word-wrap: break-word;
				overflow: hidden;
			}

.ncs__logo {
	font-size: 18px;
	color: var(--grey00);
}

	.ncs__logo > a {
		font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		color: var(--grey00);
	}

		.ncs__logo > a:hover {
			color: var(--grey00);
		}

	.ncs__logo strong {
		font-weight: 700;
		font-size: 20px;
		color: var(--grey00);
		line-height: 1;
	}
	/*	add-- 20230406 */
	.ncs__logo .current_game.ellipsis {
		max-width: 165px;
		font-family: NEXONLv2Gothic, 'NEXONLv2Gothic', sans-serif;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* add---20230406 */
	.ncs__logo .current_menu {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-weight: normal;
		font-stretch: normal;
		font-style: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #fff
	}

		.ncs__logo .current_menu:before {
			content: '';
			display: inline-block;
			margin: 0 12px 0 4px;
			width: 2px;
			height: 16px;
			flex-grow: 0;
			opacity: 0.4;
			background-color: #fff;
		}

	.ncs__logo em.beta {
		display: none;
		position: absolute;
		right: -28px;
		top: -0;
		width: 24px;
		height: 10px;
		vertical-align: top;
		margin-bottom: 15px;
		font-size: 0;
		text-indent: -10000px;
		background: url("../image/main/text__beta-w.png") 0 0 no-repeat;
		background-size: contain;
	}

.snb-ncs__logo em.beta {
	display: none;
	position: absolute;
	/*left: 124px;*/
	right: -5px;
	left: auto;
	top: -8px;
	width: 29px;
	height: 24px;
	font-size: 0;
	text-indent: -10000px;
	vertical-align: top;
	color: var(--grey00);
	background: url("../image/main/text__beta@2x.png") 0 0 no-repeat;
	background-size: contain;
}

.snb-ncs__logo > a,
.snb-ncs__logo > .logo_wrap {
	position: relative;
	display: inline-block;
}

.btn__log-in_out {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 400;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.57;
	letter-spacing: -0.48px;
	text-align: center;
	color: var(--grey00);
	border-radius: 18px;
	border: solid 1px #fff;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.2s;
}

	.btn__log-in_out:hover,
	.btn__log-in_out:active {
		border: 1px solid var(--grey00);
		background-color: var(--grey00);
		color: var(--grey09);
	}

.snb__wrapper .btn__log-in_out:hover,
.snb__wrapper .btn__log-in_out:active {
	padding: 0 20px;
	border-radius: 4px;
	border: 1px solid var(--primary01);
	background-color: var(--primary01);
	color: #fff;
}

.icon__search {
	width: 20px;
	height: 20px;
	background-image: url(../image/main/icon__search.png);
	background-size: cover;
}

.icon__page {
	width: 20px;
	height: 20px;
	background-image: url(../image/main/icon__page.png);
	background-size: cover;
}

.snb > .my__report {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.cnt {
	font-weight: 700;
	font-stretch: normal;
	font-style: normal;
	margin-left: 6px;
	border-radius: 10px;
	letter-spacing: -0.48px;
	text-align: center;
}

.gnb li {
	position: relative;
}

.gnb .cnt {
	position: absolute;
	z-index: 11;
	left: 54px;
	top: 0;
	min-width: 18px;
	height: 16px;
	padding: 1px 4px;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.26px;
	vertical-align: top;
	color: var(--grey00);
	background: rgba(255,255,255,0.15);
}

.snb .cnt {
	width: 32px;
	height: 22px;
	margin-left: 6px;
	font-size: 14px;
	letter-spacing: -0.48px;
	color: var(--primary02);
	padding: 0 8px 1px;
	border-radius: 11px;
	background-color: var(--grey04);
}
/* 햄버거 메뉴 */
.btn__gnb {
	width: 32px;
	height: 32px;
	padding: 4px;
	border-radius: 4px;
	display: none;
	text-align: right;
}

	.btn__gnb:hover {
		background-color: rgba(0, 0, 0, 0.1);
	}

.icon__menu {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url("../image/main/icon__menu.png") no-repeat;
}

.gnb__wrapper,
.gnb {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.gnb__wrapper {
	gap: 36px;
}

.gnb {
	gap: 8px;
}

	.gnb li > a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 3px;
		padding: 6px 12px 6px 10px;
		font-size: 16px;
		font-weight: 500;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.5;
		border-radius: 18px;
		color: var(--grey00);
		background-color: rgba(0, 0, 0, 0);
	}

	.gnb li a:hover,
	.gnb li a:active {
		color: var(--grey00);
		border-radius: 18px;
		background-color: rgba(0, 0, 0, 0.1);
	}

.snb__wrapper {
	display: none;
}

	.snb__wrapper .btn__close {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 32px;
		height: 32px;
		padding: 4px;
	}

		.snb__wrapper .btn__close:hover {
			object-fit: contain;
			border-radius: 4px;
			background-color: var(--grey03);
		}

.icon__close {
	width: 24px;
	height: 24px;
	background: url("../image/main/icon__close.png") no-repeat;
}

/* ##  반응형 퀵메뉴 걸리는 훅 추가 */
@media screen and (max-width: 1165px) {
	:root {
		--quickWidth: 80px;
		--gradation-gap: 0;
	}

	aside .quickMenu {
		width: var(--quickWidth);
		overflow: hidden;
	}

		aside .quickMenu li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			word-break: keep-all;
			text-align: center;
			padding: 7px 0;
			min-height: 68px;
		}

			aside .quickMenu li > span,
			aside .quickMenu li > a {
				padding: 0 12px;
			}

			aside .quickMenu li i[class^="icon__"] {
				margin-right: 0;
			}
}

/* snb__wrapper 노출 */
@media screen and (max-width: 1079px) {
	#header {
		padding: 0 24px;
	}

	.gnb__wrapper,
	.gnb__wrapper > .gnb {
		display: none;
	}

	.btn__gnb {
		display: block;
	}
	/* 타블렛 사이즈부터 노출 되는 사이드바 */
	.snb__wrapper {
		display: block;
		position: absolute;
		top: 0;
		right: -320px;
		width: 320px;
		height: 100vh;
		height: var(--vh);
		padding: 112px 40px 60px;
		background: #fff;
		box-shadow: rgba(0, 0, 0, 0.15) 0 15px 25px, rgba(0, 0, 0, 0.05) 0 5px 10px;
		transition: all 0.1s ease;
	}

		.snb__wrapper.show:before {
			content: '';
			position: fixed;
			z-index: -1;
			min-height: 100vh;
			min-height: var(--vh);
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.9);
			transition: background-color 0.3s linear;
			user-select: all;
			pointer-events: all;
		}

		.snb__wrapper.show {
			right: 0;
		}

		.snb__wrapper .ncs__logo,
		.snb__wrapper .snb {
			display: block;
		}

		.snb__wrapper .snb {
			display: flex;
			flex-direction: column;
			gap: 15px;
			margin-bottom: 40px;
		}

	.snb a {
		font-size: 20px;
		font-weight: bold;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.5;
		letter-spacing: -0.7px;
		text-align: left;
		color: var(--text_primary);
	}

		.snb a:hover {
			color: var(--primary01);
		}

	.snb__wrapper .snb-ncs__logo {
		position: relative;
		font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
		font-size: 28px;
		font-weight: normal;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.29;
		letter-spacing: normal;
		text-align: left;
		color: var(--text_primary);
		word-break: break-word;
		padding-bottom: 24px;
		margin-bottom: 40px;
		border-bottom: 1px solid var(--grey10);
		transition: all 0.1s;
	}

	.snb-ncs__logo em.beta {
		display: none;
		right: -29px;
		left: auto;
	}

	.snb-ncs__logo strong {
		max-width: 222px;
		position: relative;
		display: inline-block;
		font-weight: bold;
		word-break: break-word;
	}

	.snb-ncs__logo span {
		display: block;
		font-weight: normal;
	}

	.snb__wrapper .quickMenu {
		display: flex;
		flex-direction: column;
	}

		.snb__wrapper .quickMenu li {
			display: block;
			width: 100%;
			border-top: 0;
			min-height: auto;
			padding: 0;
			padding-bottom: 14px;
		}

			.snb__wrapper .quickMenu li > a,
			.snb__wrapper .quickMenu li > span {
				display: inline-block;
				width: 100%;
				max-height: 20px;
				font-size: 14px;
				font-weight: normal;
				font-stretch: normal;
				font-style: normal;
				line-height: 1.57;
				letter-spacing: -0.48px;
				text-align: left;
				color: var(--text_primary);
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

	.bottom_area {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		position: absolute;
		bottom: 60px;
		top: 208px;
		left: 0;
		right: 0;
		padding: 0 40px;
	}
		/* 20250528 UI 리뉴얼 */
		.bottom_area .inside {
			height: 100%;
			padding-top: 38px;
			margin-top: 2px;
			margin-bottom: 2px;
		}

	.snb_scroll {
		overflow-y: auto;
	}

		.snb_scroll::-webkit-scrollbar {
			width: 5px !important;
		}

		.snb_scroll::-webkit-scrollbar-track {
			background-color: transparent !important;
		}

		.snb_scroll::-webkit-scrollbar-thumb {
			border-radius: 12px;
			background-color: transparent;
			background-clip: padding-box;
			border: 0 solid transparent;
			transition: background-color 0.3s linear;
		}

		.snb_scroll:hover::-webkit-scrollbar-thumb,
		.snb_scroll.scrolling::-webkit-scrollbar-thumb {
			background-color: #dadee6;
		}

		/*border-top: 10px solid transparent;border-bottom: 10px solid transparent;*/
		.snb_scroll::-webkit-scrollbar-button {
			width: 0;
			height: 0;
		}

	.btn-wrapper {
		position: relative;
		display: block;
		height: 48px;
	}

		.btn-wrapper:before {
			content: '';
			position: absolute;
			left: 0;
			right: 12px;
			bottom: 48px;
			z-index: 22;
			display: block;
			height: 30px;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -3.12%, rgba(255, 255, 255, 0.70) 46.88%, #FFF 76.88%, #FFF 96.87%);
		}

	.btn__log-in_out {
		width: 100%;
		height: 48px;
		padding: 8px 16px;
		border-radius: 4px;
		background-color: var(--grey10);
		box-sizing: border-box;
	}
}

@media screen and (max-width: 639px) {
	#header {
		padding: 0 16px;
		min-width: var(--minWidth);
	}

	.icon__ncs {
		width: 28px;
		height: 28px;
	}

	.ncs__logo .current_menu:before {
		height: 16px;
		margin: 0 6px;
	}

	.ncs__logo em.beta {
		right: -24px;
	}

	.ncs__logo,
	.ncs__logo strong,
	.ncs__logo > a {
		font-size: 16px;
		gap: 3px;
	}

		.ncs__logo .current_game.ellipsis {
			max-width: 145px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

	.snb__wrapper.show {
		padding: 24px;
	}

	.snb__wrapper {
		width: 240px;
	}

		.snb__wrapper .btn__close {
			right: 16px;
			top: 18px;
			z-index: 22;
		}

		.snb__wrapper .snb {
			gap: 10px;
			margin-bottom: 32px;
		}

	.snb a {
		font-size: 16px;
		font-weight: bold;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.5;
		letter-spacing: -0.48px;
	}

	.snb .cnt {
		width: 30px;
		height: 22px;
		font-size: 12px;
		line-height: 2;
	}

	.snb__wrapper .quickMenu {
		display: block;
		margin-bottom: 18px;
	}

		.snb__wrapper .quickMenu li {
			width: 100%;
			padding-bottom: 14px;
			line-height: 1;
		}

			.snb__wrapper .quickMenu li > a,
			.snb__wrapper .quickMenu li > span {
				/*font-size: 12px;*/
				font-weight: normal;
				font-stretch: normal;
				font-style: normal;
				letter-spacing: -0.5px;
				word-break: break-all;
			}

	.snb__wrapper .snb-ncs__logo {
		font-size: 20px;
		font-weight: bold;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.4;
		padding-bottom: 16px;
		margin-bottom: 20px;
	}

	.snb-ncs__logo strong {
		max-width: 164px;
	}

	.snb-ncs__logo em.beta {
		right: -29px;
		left: auto;
	}

	.btn__log-in_out {
		height: 40px;
		font-weight: bold;
	}

	.bottom_area {
		top: 98px;
		bottom: 28px;
		padding: 0 24px;
	}

	.btn-wrapper {
		height: 40px;
	}

		.btn-wrapper:before {
			bottom: 40px;
		}

	.bottom_area .inside {
		padding-top: 18px;
		margin-top: 2px;
	}
}


/* 반응형 스크린 높이가 줄어들었을 때 예외처리 */
/*@media screen and (max-height: 780px) {*/
/*	.snb__wrapper .quickMenu {*/
/*		display: block;*/
/*	}*/
/*.snb__wrapper .quickMenu li {*/
/*	font-size: 12px;*/
/*	font-weight: normal;*/
/*	font-stretch: normal;*/
/*	font-style: normal;*/
/*	line-height: 1.5;*/
/*	letter-spacing: -0.5px;*/
/*}*/
/*.bottom_area .inside {*/
/*	padding-top: 40px;*/
/*}*/
/*.snb__wrapper .snb {*/
/*	gap: 10px;*/
/*	margin-bottom: 32px;*/
/*}*/
/*}*/

/*@media screen and (max-height: 660px) {*/
/*	.btn-wrapper {*/
/*		height: 40px;*/
/*	}*/
/*	.snb__wrapper.show {*/
/*		padding: 24px 24px 28px;*/
/*	}*/

/*	.snb__wrapper {*/
/*		width: 240px;*/
/*	}*/
/*	.snb__wrapper .btn__close {*/
/*		right: 16px;*/
/*		top: 18px;*/
/*		z-index: 22;*/
/*	}*/
/*	.bottom_area .inside {*/
/*		padding-top: 20px;*/
/*	}*/
/*	.snb__wrapper .snb {*/
/*		gap: 10px;*/
/*		margin-bottom: 32px;*/
/*	}*/
/*	.snb a {*/
/*		font-size: 16px;*/
/*		font-weight: bold;*/
/*		font-stretch: normal;*/
/*		font-style: normal;*/
/*		line-height: 1.5;*/
/*		letter-spacing: -0.48px;*/
/*	}*/
/*	.snb .cnt {*/
/*		width: 30px;*/
/*		height: 22px;*/
/*		font-size: 12px;*/
/*		line-height: 2;*/
/*	}*/
/*	.snb__wrapper .quickMenu {*/
/*		display: block;*/
/*		margin-bottom: 18px;*/
/*	}*/
/*	.snb__wrapper .quickMenu li {*/
/*		display: inline-flex;*/
/*		justify-content: flex-start;*/
/*		align-items: center;*/
/*		padding-bottom: 14px;*/
/*	}*/
/*	.snb__wrapper .snb-ncs__logo  {*/
/*		font-size: 20px;*/
/*		font-weight: bold;*/
/*		font-stretch: normal;*/
/*		font-style: normal;*/
/*		line-height: 1.4;*/
/*		padding-bottom: 16px;*/
/*		margin-bottom: 20px;*/
/*	}*/
/*	.snb-ncs__logo strong {*/
/*		max-width: 125px;*/
/*	}*/
/*	.snb-ncs__logo em.beta {*/
/*		right: -29px;*/
/*		left: auto;*/
/*	}*/

/*	.bottom_area {*/
/*		top: 98px;*/
/*		bottom: 28px;*/
/*		padding: 0 24px;*/
/*	}*/
/*	.btn-wrapper:before {*/
/*		bottom: 40px;*/
/*	}*/
/*	.btn__log-in_out {*/
/*		height: 40px;*/
/*		font-weight: bold;*/
/*	}*/
/*}*/