@charset "utf-8";
@import "./variables.css";

/* 폰트 */
@font-face {
	font-family: NEXONLv1Gothic;
	font-weight: 400;
	src: url('../../font/NEXON Lv1 Gothic OTF.woff') format('woff');
}
@font-face {
	font-family: NEXONLv1Gothic;
	font-weight: 700;
	src: url('../../font/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
}
@font-face {
	font-family: NotoSansKR;
	font-weight: 700;
	src:
	url('../../font/NotoSans/NotoSansKR-Bold.woff') format('woff'),
	url('../../font/NotoSans/NotoSansKR-Bold.woff2') format('woff2'),
	url('../../font/NotoSans/NotoSansKR-Bold.otf') format('opentype');
}
@font-face {
	font-family: NotoSansKR;
	font-weight: 500;
	src:
	url('../../font/NotoSans/NotoSansKR-Medium.woff') format('woff'),
	url('../../font/NotoSans/NotoSansKR-Medium.woff2') format('woff2'),
	url('../../font/NotoSans/NotoSansKR-Medium.otf') format('opentype');
}
@font-face {
	font-family: NotoSansKR;
	font-weight: 400;
	src:
	url('../../font/NotoSans/NotoSansKR-Regular.woff') format('woff'),
	url('../../font/NotoSans/NotoSansKR-Regular.woff2') format('woff2'),
	url('../../font/NotoSans/NotoSansKR-Regular.otf') format('opentype');
}
#IndexPage {
    position: relative;
    height: 100%;
    font-family: 'Noto Sans KR', Noto Sans KR, NotoSansKR, 'NotoSansKR', NEXONLv1Gothic, 'NEXONLv1Gothic', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    width: 1200px;
    margin: 0 auto;
}
.index__wrapper .index {
	display: grid;
}
.banner_container {
    padding: 52px 30px;
    width: 100%;
    max-height: 360px;
    min-width: 1200px;
    background: var(--grey03);
    box-sizing: border-box;
}
.banner_container.isPrimeUser {
	background: var(--grey14);
}
.banner_container .cs__display {
	display: flex;
	flex-direction: column;
	align-items: center;
    width: 1200px;
    margin: 0 auto;
}

.banner_container .head__text {
	font-family: NEXONLv1Gothic, 'NEXONLv1Gothic', sans-serif;
	font-style: normal;
	font-weight: 400;
	/*font-size: 28px;*/
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
	word-break: break-word;
	word-wrap: break-word;
}
.banner_container .head__text .key_name .icon__prime {
	display: none;
}
.banner_container .head__text > span {
	display: block;
}

.head__text + * {
	margin-top: 28px;
}

.recent__list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
.recent__list .cs__box {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	width: 322px;
	height: 140px;
	padding: 18px 20px;
	background: var(--grey00);
	border-radius: 4px;
	cursor: pointer;
	transition: box-shadow 0.2s;
}
.recent__list .cs__box:hover {
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);;
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);;
	-moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);
}

.banner_container.isPrimeUser .recent__list .cs__box:hover {
	box-shadow: 2px -2px 8px -2px rgba(0,0,0,0.46);
	-webkit-box-shadow: 2px -2px 8px -2px rgba(0,0,0,0.46);
	-moz-box-shadow: 2px -2px 8px -2px rgba(0,0,0,0.46);
}

	/* todo: 이후 제거 */
.recent__list .list-item .cs__box > * {
	user-select: none;
	pointer-events: none;
}
/* todo: 이후 제거 */



.recent__list .cs__box .context__img {
	width: 88px;
	height: 88px;
	flex: none;
	border-radius: 44px;
	overflow: hidden;
    background-color: #fff;
	border: 1px solid var(--grey13);
	align-self: end;
}
.recent__list .cs__box .context__title {
	font-family: NEXONLv1Gothic, 'NEXONLv1Gothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: -0.48px;
	color: var(--text_primary);
}
.tag__list + .context__title {
	margin-top: 8px;
}
.recent__list .cs__box .tag__list {
	display: flex;
	flex-direction: row;
	gap: 4px;
}
.tag__list .tag {
	font-family: NotoSansKR, 'NotoSansKR', Noto Sans KR, 'Noto Sans KR', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: -0.26px;
	padding: 0 6px;
	height: 16px;
	border-radius: 8px;
	color: var(--text_secondary);
	background-color: var(--grey02);
}
.tag__list .tag._active {
	color: var(--grey00);
	background-color: var(--primary02);
}
.key_name, .bolder {
	font-weight: 700;
}
.banner_container .head__text .key_name:after {
	content: '님';
	font-family: NEXONLv1Gothic, 'NEXONLv1Gothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
	word-break: break-word;
	word-wrap: break-word;
	color: var(--text_primary);
}
.banner_container.isPrimeUser .head__text > span {
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
/* prime user */
.banner_container.isPrimeUser {
	background: var(--grey14);
}
.banner_container.isPrimeUser .head__text .key_name .icon__prime {
	display: block;
}
.banner_container.isPrimeUser .head__text .key_name:after {
	content: '님';
	color: var(--grey00);
}
.banner_container.isPrimeUser .head__text {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	color: var(--grey00);
}
.banner_container.isPrimeUser .head__text > span {
	display: flex;
	justify-content: flex-start;
}
.banner_container.isPrimeUser .recent__list .cs__box {
	background: var(--grey15);
	transition: background-color 0.3s;
}
.banner_container.isPrimeUser .recent__list .cs__box:hover {
	background: var(--grey16);
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25);
}
.banner_container.isPrimeUser .recent__list .cs__box .context__title {
	color: var(--grey00);
}
.banner_container.isPrimeUser .tag__list .tag {
	background-color: #393939;
	color: rgba(255,255,255,0.5);
}
.banner_container.isPrimeUser .tag__list .tag._active {
	color: var(--grey00);
	background-color: var(--primeColor);
}
.banner_container.isPrimeUser .key_name {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	color: var(--primeColor);
}

.cs__game-area {
	position: relative;
	height: 100%;
	width: 990px;
	margin: 0 auto;
}
.cs__game-area .btn__show-all {
	position: absolute;
	top: 29px;
	right: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	transition: all 0.3s;
}
.cs__game-area .btn__show-all:hover {
	color: var(--primary01);
}
.cs__game-area .btn__show-all:hover .icon__new-window {
	background: url("../../Images/common/icon__newWindow2@2x.png");
	background-size: contain;
}
.__disabled .icon__new-window {
    background: url("../../Images/common/icon__newWindow3@2x.png");
    background-size: contain;
}

.__disabled {
	color: var(--disabledColor2) !important;
	user-select: none;
	pointer-events: none;
}
.cs_game--list {
	width: 100%;
	display: flex;
	justify-content:flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 71px;
}
.cs_game--list .game__box {
	display: flex;
	flex-direction: column;
	width: 138px;
	max-height: 191px;
	border: 1px solid var(--grey01);
	cursor: pointer;
	transition: box-shadow 0.3s;
}

.cs_game--list .game__box:hover {
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);
}
.game__box .game-image {
	width: 138px;
}
.game__box .game-title {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.57;
	letter-spacing: -0.48px;
	color: var(--text_primary);
	border-top: 1px solid var(--grey01);
}