@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@100..900&family=Nanum+Gothic:wght@400;700;800&family=Noto+Serif+KR:wght@200..900&family=Song+Myung&display=swap');





:root {
	--html-wrap-width: 1280px;

	--html-font-god: "Nanum Gothic", sans-serif; /* 400, 700, 800 */
	--html-font-som: "Song Myung", serif; /* 400 */
	--html-font-hah: "Hahmlet", serif; /* 100 ~ 900 */
	--html-font-nts: "Noto Serif KR", serif; /* 200 ~ 900 */

	--html-publisher-height: 0;

	--px-size-1: 5px;
	--px-size-2: 10px;
	--px-size-3: 15px;
	--px-size-4: 20px;
	--px-size-5: 25px;
	--px-size-6: 30px;
	--px-size-7: 40px;
	--px-size-8: 50px;
	--px-size-9: 70px;
	--px-size-10: 100px;
}


html {
	font-size: 12px;
	overflow-y: scroll;
}


body {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, div, p, label, span, a {
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

input, select, textarea {
	box-sizing: border-box;
}

input, select {
	outline: none;
	font-size: 1.2rem;
}

a {
	text-decoration: none;
	font-family: var(--html-font-god);
}
a { color: #606060; }
a:hover:active:visited { color: #606060; }







/********************************************************************************************************
 *                                                                                                      *
 *  공동 영역                                                                                           *
 *                                                                                                      *
 ********************************************************************************************************/

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

.text-red { color: #CE2A2C !important; }
.text-darkred { color: #CC2A28 !important; }
.text-blue { color: blue !important; }
.text-darkblue { }
.text-orange { color: #ff7112 !important; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.fs-1  { font-size: 1.2rem; }
.fs-2  { font-size: 1.3rem; }
.fs-3  { font-size: 1.4rem; }
.fs-4  { font-size: 1.5rem; }
.fs-5  { font-size: 1.6rem; }
.fs-6  { font-size: 1.8rem; }
.fs-7  { font-size: 2.0rem; }
.fs-8  { font-size: 2.2rem; }
.fs-9  { font-size: 2.4rem; }
.fs-10 { font-size: 3rem; }

.fw-1 { font-weight: 100; }
.fw-2 { font-weight: 200; }
.fw-4 { font-weight: 400; }
.fw-7 { font-weight: 700; }
.fw-9 { font-weight: 900; }

.p-0 { padding: 0 !important; }

.pv-1  { padding-top: var(--px-size-1) !important;  padding-bottom: var(--px-size-1) !important; }
.pv-2  { padding-top: var(--px-size-2) !important;  padding-bottom: var(--px-size-2) !important; }
.pv-3  { padding-top: var(--px-size-3) !important;  padding-bottom: var(--px-size-3) !important; }
.pv-4  { padding-top: var(--px-size-4) !important;  padding-bottom: var(--px-size-4) !important; }
.pv-5  { padding-top: var(--px-size-5) !important;  padding-bottom: var(--px-size-5) !important; }
.pv-6  { padding-top: var(--px-size-6) !important;  padding-bottom: var(--px-size-6) !important; }
.pv-7  { padding-top: var(--px-size-7) !important;  padding-bottom: var(--px-size-7) !important; }
.pv-8  { padding-top: var(--px-size-8) !important;  padding-bottom: var(--px-size-8) !important; }
.pv-9  { padding-top: var(--px-size-9) !important;  padding-bottom: var(--px-size-9) !important; }
.pv-10 { padding-top: var(--px-size-10) !important; padding-bottom: var(--px-size-10) !important; }

.ph-1  { padding-left: var(--px-size-1) !important;  padding-right: var(--px-size-1) !important; }
.ph-2  { padding-left: var(--px-size-2) !important;  padding-right: var(--px-size-2) !important; }
.ph-3  { padding-left: var(--px-size-3) !important;  padding-right: var(--px-size-3) !important; }
.ph-4  { padding-left: var(--px-size-4) !important;  padding-right: var(--px-size-4) !important; }
.ph-5  { padding-left: var(--px-size-5) !important;  padding-right: var(--px-size-5) !important; }
.ph-6  { padding-left: var(--px-size-6) !important;  padding-right: var(--px-size-6) !important; }
.ph-7  { padding-left: var(--px-size-7) !important;  padding-right: var(--px-size-7) !important; }
.ph-8  { padding-left: var(--px-size-8) !important;  padding-right: var(--px-size-8) !important; }
.ph-9  { padding-left: var(--px-size-9) !important;  padding-right: var(--px-size-9) !important; }
.ph-10 { padding-left: var(--px-size-10) !important; padding-right: var(--px-size-10) !important; }

.pt-1  { padding-top: var(--px-size-1) !important; }
.pt-2  { padding-top: var(--px-size-2) !important; }
.pt-3  { padding-top: var(--px-size-3) !important; }
.pt-4  { padding-top: var(--px-size-4) !important; }
.pt-5  { padding-top: var(--px-size-5) !important; }
.pt-6  { padding-top: var(--px-size-6) !important; }
.pt-7  { padding-top: var(--px-size-7) !important; }
.pt-8  { padding-top: var(--px-size-8) !important; }
.pt-9  { padding-top: var(--px-size-9) !important; }
.pt-10 { padding-top: var(--px-size-10) !important; }

.pb-1  { padding-bottom: var(--px-size-1) !important; }
.pb-2  { padding-bottom: var(--px-size-2) !important; }
.pb-3  { padding-bottom: var(--px-size-3) !important; }
.pb-4  { padding-bottom: var(--px-size-4) !important; }
.pb-5  { padding-bottom: var(--px-size-5) !important; }
.pb-6  { padding-bottom: var(--px-size-6) !important; }
.pb-7  { padding-bottom: var(--px-size-7) !important; }
.pb-8  { padding-bottom: var(--px-size-8) !important; }
.pb-9  { padding-bottom: var(--px-size-9) !important; }
.pb-10 { padding-bottom: var(--px-size-10) !important; }


.m-0 { margin: 0 !important; }

.mh-1  { margin-left: var(--px-size-1) !important;  margin-right: var(--px-size-1) !important; }
.mh-2  { margin-left: var(--px-size-2) !important;  margin-right: var(--px-size-2) !important; }
.mh-3  { margin-left: var(--px-size-3) !important;  margin-right: var(--px-size-3) !important; }
.mh-4  { margin-left: var(--px-size-4) !important;  margin-right: var(--px-size-4) !important; }
.mh-5  { margin-left: var(--px-size-5) !important;  margin-right: var(--px-size-5) !important; }
.mh-6  { margin-left: var(--px-size-6) !important;  margin-right: var(--px-size-6) !important; }
.mh-7  { margin-left: var(--px-size-7) !important;  margin-right: var(--px-size-7) !important; }
.mh-8  { margin-left: var(--px-size-8) !important;  margin-right: var(--px-size-8) !important; }
.mh-9  { margin-left: var(--px-size-9) !important;  margin-right: var(--px-size-9) !important; }
.mh-10 { margin-left: var(--px-size-10) !important; margin-right: var(--px-size-10) !important; }

.ml-1  { margin-left: var(--px-size-1) !important; }
.ml-2  { margin-left: var(--px-size-2) !important; }
.ml-3  { margin-left: var(--px-size-3) !important; }
.ml-4  { margin-left: var(--px-size-4) !important; }
.ml-5  { margin-left: var(--px-size-5) !important; }
.ml-6  { margin-left: var(--px-size-6) !important; }
.ml-7  { margin-left: var(--px-size-7) !important; }
.ml-8  { margin-left: var(--px-size-8) !important; }
.ml-9  { margin-left: var(--px-size-9) !important; }
.ml-10 { margin-left: var(--px-size-10) !important; }

.mr-1  { margin-right: var(--px-size-1) !important; }
.mr-2  { margin-right: var(--px-size-2) !important; }
.mr-3  { margin-right: var(--px-size-3) !important; }
.mr-4  { margin-right: var(--px-size-4) !important; }
.mr-5  { margin-right: var(--px-size-5) !important; }
.mr-6  { margin-right: var(--px-size-6) !important; }
.mr-7  { margin-right: var(--px-size-7) !important; }
.mr-8  { margin-right: var(--px-size-8) !important; }
.mr-9  { margin-right: var(--px-size-9) !important; }
.mr-10 { margin-right: var(--px-size-10) !important; }

.mt-1  { margin-top: var(--px-size-1) !important; }
.mt-2  { margin-top: var(--px-size-2) !important; }
.mt-3  { margin-top: var(--px-size-3) !important; }
.mt-4  { margin-top: var(--px-size-4) !important; }
.mt-5  { margin-top: var(--px-size-5) !important; }
.mt-6  { margin-top: var(--px-size-6) !important; }
.mt-7  { margin-top: var(--px-size-7) !important; }
.mt-8  { margin-top: var(--px-size-8) !important; }
.mt-9  { margin-top: var(--px-size-9) !important; }
.mt-10 { margin-top: var(--px-size-10) !important; }

.mb-1  { margin-bottom: var(--px-size-1) !important; }
.mb-2  { margin-bottom: var(--px-size-2) !important; }
.mb-3  { margin-bottom: var(--px-size-3) !important; }
.mb-4  { margin-bottom: var(--px-size-4) !important; }
.mb-5  { margin-bottom: var(--px-size-5) !important; }
.mb-6  { margin-bottom: var(--px-size-6) !important; }
.mb-7  { margin-bottom: var(--px-size-7) !important; }
.mb-8  { margin-bottom: var(--px-size-8) !important; }
.mb-9  { margin-bottom: var(--px-size-9) !important; }
.mb-10 { margin-bottom: var(--px-size-10) !important; }


.w100 { width: 100px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w350 { width: 350px; }
.w400 { width: 400px; }
.w450 { width: 450px; }
.w500 { width: 500px; }

.wp100 { width: 100%; display: inline-block; }


.link-chain a+a:before {
	content: '|';
	padding: 0 5px;
}


.flex { display: flex; flex-direction: row; }
.flex.center { justify-content: center; }
.flex > div { flex-grow: 1; }
.flex > .left { display: flex; justify-content: start; }
.flex > .right { display: flex; justify-content: end; }
.flex > .center { display: flex; justify-content: center; align-items: center; }

.flex-grow-full { flex-grow: 1 !important; flex-basis: 100% !important; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.csr-p, [data-link] { cursor: pointer; }

[data-link]:hover {
	background-color: #FAFAFA;
}




/********************************************************************************************************
 *                                                                                                      *
 *  layout 정의                                                                                         *
 *                                                                                                      *
 ********************************************************************************************************/

.wrap {
	position: relative;
	width: auto;
	max-width: var(--html-wrap-width);
	min-height: 100px;
	margin: 0 auto;
}
.wrap-f {
	position: relative;
	width: 100%;
	min-height: 100px;
	margin: 0 auto;
}

.grid {
	position: relative;
	display: grid;
	width: auto;
	max-width: var(--html-wrap-width);
	min-height: 100px;
	margin: 0 auto;
}







/********************************************************************************************************
 *                                                                                                      *
 *  헤더 정의                                                                                           *
 *                                                                                                      *
 ********************************************************************************************************/

header {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: start;
	overflow: hidden;
	z-index: 1;
}

header::before {
	content: '';
	position: absolute;
	width: 100%;
	min-height: 224px;
	background-image: url('/images/gnb_bg_top.png');
	background-size: auto 180px;
	background-position: top center;
	background-repeat: repeat-x;
	z-index: 1;
}

header::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 80px;
	background-image: url('/images/gnb_bg_bot.png');
	z-index: 1;
}

header .logo {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 250px;
	background-image: url('/images/logo.png');
	background-size: cover;
	background-position: center;
	z-index: 3;
	cursor: pointer;
}

header nav {
	position: absolute;
	width: 100%;
	height: 50px;
	overflow: hidden;
	background: rgba(0,0,0,0);
	transition: height 0s, background 0s;
	z-index: 2;
}
header nav:hover {
	height: 250px;
	background: linear-gradient(to bottom, rgba(17,17,17,0.5) 0%, rgba(17,17,17,0.25) 80%, rgba(17,17,17,0.01) 100%);
	transition: height 0.2s, background 0.1s;
}



header nav > div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
	color: white;
	font-family: var(--html-font-som) !important;
	font-weight: 400;
	font-size: 2rem;
	text-align: center;
}

header nav > div a {
	color: white;
	text-shadow: 0px 0px 3px black;
	font-family: var(--html-font-som);

}
header nav > div a:hover { color: rgba(255,255,255,0.7); }
header nav > div a:visited { color: white; }

header nav ul {
	position: relative;
	flex-basis: auto;
	cursor: pointer;
	margin-top: 10px;
}

header nav ul:nth-child(4) {
	flex-basis: 300px;
}

header nav ul > li {
	font-size: 1.5rem;
	margin-top: 10px;
}

header nav ul > li:first-child {
	margin-top: 22px;
}







/********************************************************************************************************
 *                                                                                                      *
 *  푸터 정의                                                                                           *
 *                                                                                                      *
 ********************************************************************************************************/

footer {
	position: relative;
	width: 100%;
	display: flex;
	min-height: 100px;
	justify-content: center;
	border-top: 2px solid #C0C0C0;
	padding: 30px 0 30px;
}

footer > .grid {
	position: relative;
	display: grid;
	grid-template-areas:
		'logo menu menu menu menu menu menu grade grade grade grade grade'
		'logo corp corp corp corp corp corp grade grade grade grade grade'
		'logo copy copy copy copy copy copy grade grade grade grade grade';
	grid-template-columns: repeat(12, calc(var(--html-wrap-width)/12));
}


footer > .grid > .logo  {
	grid-area: logo;
}
footer > .grid > .logo > img {
	display: block;
	margin: 0 0 20px;
	width: 92px;
}

footer > .grid > .menu  {
	grid-area: menu;
	display: flex;
	align-items: start;
}

footer > .grid > .corp  {
	grid-area: corp;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: start;
}

footer > .grid > .copy  {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: start;
}

footer > .grid > .grade {
	grid-area: grade;
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: start;
	gap: 1px;
}
footer > .grid > .grade img {
	height: 70px;
}

footer > .grid a+a:before {
	content: ' | ';
	padding: 0 10px;
	color: #606060;
	font-weight: normal;
}







/********************************************************************************************************
 *                                                                                                      *
 *  헤더 정의                                                                                           *
 *                                                                                                      *
 ********************************************************************************************************/

publisher {
	position: relative;
	display: block;
	width: 100%;
	min-height: 12px;
	background-color: black;
	text-align: center;
}







/********************************************************************************************************
 *                                                                                                      *
 *  컨텐츠 영역                                                                                         *
 *                                                                                                      *
 ********************************************************************************************************/

.container {
	position: relative;
	width: 100%;
	margin: 0 auto 30px;
}

.container.start-bg {
	background-image: url('/images/btn_start_bg.png');
	background-repeat: no-repeat;
	background-position-x: calc(50% + 490px);
	background-position-y: top;
}

@media screen and (max-width: 1300px) {
	.container.start-bg {
		background-position-x: 930px;
	}
}

.header-banner {
	position: relative;
	height: 590px;
	min-width: 100%;
	background-color: rgba(17,17,17,1);
}

.header-banner > li {
	width: 100%;
	height: 100%;
	background-size: 100% contain;
	background-position: top center;
	background-repeat: no-repeat;
}


.grid.main {
	grid-template-columns: 300px 580px 300px;
	column-gap: 50px;
}

.grid.twin {
	grid-template-columns: 930px 300px;
	column-gap: 50px;
}
.grid.twin > * {
	overflow: hidden;
}

.article {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.article > h3 {
	position: relative;
	border-bottom: 2px solid rgba(17,17,17,0.9);
	font-family: var(--html-font-som);
	font-size: 1.8rem;
	padding: 50px 0 10px 36px;
	font-weight: 400;
}


.article .tab {
	position: relative;
	height: 60px;
	background-size: contain;
	background-repeat: no-repeat;
}

.article .tab.news			{ background-image: url('/images/article_news.png'); }
.article .tab.board			{ background-image: url('/images/article_board.png'); }
.article .tab.knowhow		{ background-image: url('/images/article_knowhow.png'); }
.article .tab.qna			{ background-image: url('/images/article_qna.png'); }
.article .tab.rank			{ background-image: url('/images/article_rank.png'); }
.article .tab.shop			{ background-image: url('/images/article_shop.png'); }

.article .more {
	position: absolute;
	bottom: 6px;
	right: 10px;
	width: 54px;
	height: 23px;
}

.article .more-white		{ background-image: url('/images/more_white.png'); }
.article .more-black		{ background-image: url('/images/more_black.png'); }


.article > ul {
	list-style: none;
	padding: 12px 0 15px;
}

.article > ul.list {
	padding-left: 10px;
	padding-right: 10px;
}

.article > ul > li {
	line-height: 2.4;
	font-family: var(--html-font-god);
	font-size: 1.1rem;
}
.article > ul > li .date {
	float: right;
}

.article .msg-box {
	margin-top: 10px;
	line-height: 5;
	font-weight: 700;
	color: white;
	font-size: 1.3rem;
	text-align: center;
	background-color: #3A3C55;
}

.article hr {
	margin: 10px 0 0;
	padding: 0;
	border-bottom: 1px solid rgba(17,17,17,0.9);
}

.article .summary {
	padding: 15px 0;
	text-align: center;
	line-height: 1.2;
}

.article .scroll-box,
.scroll-box {
	margin: 5px 0 10px;
	padding: 10px;

	min-height: 100px;

	text-align: left;
	white-space: pre-wrap;

	border: 1px solid #828282;
	border-radius: 2px;
	background-color: #F2F2F2;

	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-color: #828282 transparent;
	scrollbar-width: thin;
	scrollbar-gutter: stable both-edges;
}


.start-box {
	height: 205px;
	margin-top: 10px;
	margin-bottom: 0 !important;
	cursor: pointer;
	z-index: 1;
}
.start-box:after {
	content: '';
	background-image: url('/images/btn_start.png');
	background-repeat: no-repeat;
	background-position: top center;
	position: absolute;
	width: 300px;
	height: 200px;
	z-index: 0;
	transition: background-image 0.2s;
}

.start-box:hover:after {
	background-image: url('/images/btn_start_over.png');
	transition: background-image 0.2s;
}
/*.start-box:before,*/
/*.start-box:after {*/
/*	content: '';*/
/*	background-image: url('/images/btn_start.png');*/
/*	background-repeat: no-repeat;*/
/*	position: absolute;*/
/*	top: 0;*/
/*	width: 50px;*/
/*	height: 200px;*/
/*}*/
/*.start-box:before {*/
/*	background-position: top left;*/
/*	left: -50px;*/
/*}*/
/*.start-box:after {*/
/*	background-position: top right;*/
/*	right: -50px;*/
/*}*/
/**/
/*@media screen and (max-width: 1397px) {*/
/**/
/*	.start-box:before,*/
/*	.start-box:after {*/
/*		display: none;*/
/*	}*/
/**/
/**/
/*}*/
/**/
/*.start-box img {*/
/*	position: relative;*/
/*	margin-left: -50px;*/
/*	width: 400px;*/
/*	height: 230px;*/
/*}*/


.login-box {
	position: relative;
	background-color: #3A3C55;
	box-shadow: 0 0 6px white inset;
	padding: 10px 24px;
	display: grid;
	grid-template-areas:
		'title title title'
		'id id submit'
		'pw pw submit'
		'join join join';
	grid-template-columns: repeat(3, 78px);
	grid-template-rows: 20px 28px 28px 20px;
	color: white;
	gap: 10px;
}

.login-box a {
	color: white;
}

.login-box h4 {
	grid-area: title;
	font-size: 1.1rem;
}

.login-box input[type] {
	border: 1px solid #79797B;
	background-color: #f1f1f1;
	border-radius: 2px;
	padding: 0 5px;
}

.login-box input[type]:focus {
	color: #fff;
	background-color: rgba(255,255,255,0.1);
}

.login-box [type="submit"]:hover,
.login-box [type="submit"]:focus {
	color: #FFF880;
	box-shadow: 0 0 5px rgba(0,0,0,0.5) inset;
}

.login-box [type="text"] { grid-area: id; }
.login-box [type="password"] { grid-area: pw; }
.login-box [type="submit"] { grid-area: submit; }
.login-box p { grid-area: join; }

.login-box a+a:before {
	content: '|';
	padding: 0 5px;
}

.myinfo-box {
	position: relative;
	background-color: #3A3C55;
	box-shadow: 0 0 6px white inset;
	padding: 16px 20px;
	display: grid;
	grid-template-areas:
		'myinfo myinfo logout'
		'cash cash cash'
		'mypage mypage charge';
	grid-template-columns: 28% 28% 36%;
	grid-template-rows: 30px 44px 30px;
	color: white;
	gap: 5px 10px;
}
.myinfo-box-empty {
	position: relative;
	background-color: #3A3C55;
	box-shadow: 0 0 6px white inset;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	min-height: 124px;
}

.myinfo-box .myinfo {
	grid-area: myinfo;
	margin-top: 3px;
	font-size: 1rem;
}
.myinfo-box .myinfo b {
	font-size: 1.2rem;
}
.myinfo-box .myinfo .cancel {
	color: yellow !important;
}

.myinfo-box .logout {
	grid-area: logout;
}

.myinfo-box .cash {
	grid-area: cash;
	padding-top: 5px;
}

.myinfo-box .mypage {
	grid-area: mypage;
}
.myinfo-box .charge {
	grid-area: charge;
}





.rank-srv {
	padding: 3px 15px 4px 50px;
	background-color: #ccc;
}

.rank-srv b {
	font-size: 1.1rem;
}

.rank-srv span {
	float: right;
}

select {
	border: 1px solid #707070;
	padding: 1px 0 1px 2px;
	font-size: 1.2rem;
	border-radius: 2px;
}
select:focus {
	border-color: #606060;
}



.rank-lst {
	padding-top: 2px !important;
}

.rank-lst li {
	position: relative;
	clear: both;
	padding: 8px 20px 8px 70px;
	border-bottom: 1px dotted rgba(17,17,17,0.5);
	text-align: right;
	line-height: unset !important;
}
/*.rank-lst li:nth-child(n+4) {*/
/*	padding: 4px 20px 4px 70px;*/
/*}*/
.rank-lst li:last-child {
	border-bottom: none;
}
.rank-lst li::before {
	content: '';
	position: absolute;
	left: 0;
	width: 70px;
	height: 25px;
	text-align: center;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: center center;
}

.rank-lst li:nth-child(1)::before  { background-image: url('/images/rank_1.png'); background-repeat: no-repeat; margin-top: -5px; }
.rank-lst li:nth-child(2)::before  { background-image: url('/images/rank_2.png'); background-repeat: no-repeat; margin-top: -5px; }
.rank-lst li:nth-child(3)::before  { background-image: url('/images/rank_3.png'); background-repeat: no-repeat; margin-top: -5px; }
.rank-lst li:nth-child(4)::before  { content: '4'; }
.rank-lst li:nth-child(5)::before  { content: '5'; }
.rank-lst li:nth-child(6)::before  { content: '6'; }
.rank-lst li:nth-child(7)::before  { content: '7'; }
.rank-lst li:nth-child(8)::before  { content: '8'; }
.rank-lst li:nth-child(9)::before  { content: '9'; }
.rank-lst li:nth-child(10)::before { content: '10'; }

.rank-lst li > b {
	float: left;
}





/**		PAGE LAYOUT			**/
.page {
	margin: 50px auto 30px;
}

.page h1 {
	padding: 0 0 10px 50px;
	font-family: var(--html-font-som);
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: 0.2rem;
	text-align: left;
	border-bottom: 3px solid #606060;
}


.page > .prefix {
	display: flex;
	flex-direction: row;
	justify-content: start;
	gap: 10px;
	margin: 30px 0 16px;
}

.page > .prefix > a,
.page > .prefix > div {
	min-width: 120px;
	padding: 7px 20px;
	border: 1px solid #AAA;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 400;
}

.page > .prefix > .active {
	color: white;
	background-color: #3A3C55;
}


.page .columns {

}
.page .columns > h2 {
	display: block;
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid #AAA;
	box-sizing: border-box;

	background-color: rgba(58,60,86,1);
	background-image: linear-gradient(rgba(77,107,153,1) 5%, rgba(58,60,86,1) 12%, rgba(58,60,86,1) 92%, rgba(77,107,153,1) 95%);

	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	color: white;
}
.page .columns pre {
	white-space: pre-wrap;
	word-break: break-word;
	padding: 20px 20px 30px;
	line-height: 1.6;
}

.page .columns pre > h2 {
	font-weight: 700;
}

.page .columns pre > h3 {
	margin-top: 20px;
}

.page .columns pre > h4 {
	margin-top: 15px;
}

.page .columns > ul {
	display: flex;
	flex-direction: column;
	min-width: 500px;
	max-width: 900px;
	width: 100%;
	justify-content: center;
	margin: 10px auto 0;
}

.page .columns > ul > li {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 12px 15px;
	border-bottom: 1px dotted #E3E3E3;
}
.page .columns > ul > li > label {
	flex-basis: 220px;
	box-sizing: border-box;
	margin-left: 100px;
}
.page .columns > ul > li > div {
	flex-grow: 1;
}


.page .columns > ul > li > label span {
	position: relative;
}
.page .columns > ul > li > label span:before {
	content: '';
	position: absolute;
	background-color: #506B9A;
	margin-left: -20px;
	left: 0;
	margin-top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
}
.page .columns input,
.page .columns input {
	width: 100%;
	max-width: 400px;
	line-height: 1.2;
	padding: 5px;
	border: 1px solid #9B9B9B;
}
}

.page .columns input:required:invalid {
	border: 1px solid red !important;
}

.page .columns input:required:valid {
	border: 1px solid #9B9B9B !important;
}

.page > .terms > h1 {
	display: block;
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid #AAA;
	box-sizing: border-box;

	background-color: rgba(58,60,86,1);
	background-image: linear-gradient(rgba(77,107,153,1) 5%, rgba(58,60,86,1) 12%, rgba(58,60,86,1) 92%, rgba(77,107,153,1) 95%);

	font-family: var(--html-font-god);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	color: white;
}
.page > .terms pre {
	white-space: pre-wrap;
	word-break: break-word;
	padding: 20px 20px 30px;
	line-height: 1.6;
}

.page > .terms h2 {
	font-weight: 700;
}

.page > .terms h3 {
	margin-top: 20px;
}

.page > .terms h4 {
	margin-top: 15px;
}













/** FORM LAYOUT **/

form input[type],
form textarea,
form select {
	line-height: 1.2;
	padding: 5px;
	border: 1px solid #9B9B9B;
}

form input[type]:focus,
form input[type]:hover,
form textarea:focus,
form textarea:hover,
form select:focus,
form select:hover {
	border: 1px solid #303030;
}

form textarea.noresize {
	resize: none;
}

form label {
	margin-top: 5px;
	font-weight: 700;
}

form small {
	display: block;
	line-height: 2;
	font-size: 0.9rem;
	color: #606060;
}
form alert {
	display: block;
	line-height: 2;
	font-size: 0.9rem;
	color: red;
}

form input[readonly] {
	background-color: #F2F2F2;
}
form input[readonly]:focus,
form input[readonly]:hover {
	border: 1px solid #9B9B9B;
}


input[type="checkbox"] {
	padding-top: 5px;
}

input[type="checkbox"] + label {
	position: relative;
	top: -2px;
	padding-left: 7px;
	user-select: none;
	cursor: help;
}





/** BUTTON LAYOUT **/

.btn {
	display: inline-block;
	border: 1px solid #AAA;
	line-height: 1.2;
	padding: 7px 16px;
	cursor: pointer;
	border-radius: 1px;
	text-align: center;
	margin: 0;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,0.5) inset;
	user-select: none;
}
.btn:hover {
	box-shadow: 0 0 2px rgba(0,0,0,0.2) inset;
	text-decoration: none !important;
	color: yellow !important;
}

.btn.btn-blue {
	background-color: #4C6B99;
	color: white;
	border: 1px solid #4C6B99;
}

.btn.btn-darkblue {
	background-color: #4F506F;
	color: white;
	border: 1px solid #4F506F;
}

.btn.btn-red {
	background-color: #B60001;
	color: white;
	border: 1px solid #B60001;
}

.btn.btn-out-red {
	background-color: white;
	color: #B60001;
	border: 1px solid #B60001;
}
.btn.btn-out-red:hover {
	color: #C84040 !important;
}

.btn.btn-darkred {
	background-color: #9E191A;
	color: white;
	border: 1px solid #9E191A;
}

.btn.btn-light {
	background-color: #EFEFEF;
	color: #606060;
	border: 1px solid #AAA;
}
.btn.btn-light:hover {
	color: #101010 !important;
}

.btn.btn-image {
	padding: 0 !important;
}
.btn.btn-tranparent {
	border: 0 !important;
	background-color: transparent !important;
	box-shadow: unset;
}
.btn.btn-tranparent:hover {
	box-shadow: unset;
}

.btn-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}
.btn-group > div {
	flex-grow: 1;
}
.btn-group > div.left {
	text-align: left;
}
.btn-group > div.right {
	text-align: right;
}

.btn-group.btn-gap button + button {
	margin-left: 5px;
}



/** CASH LAYOUT **/

.cash-info {
	position: relative;
	display: block;
	width: 100%;
	background-color: #212332;
	border-radius: 16px;
	line-height: 2.5;
	text-align: right;
	padding-right: 50px;
	color: yellow;
	font-weight: 700;
	font-size: 1.1rem;
}
.cash-info:before,
.cash-info:after {
	position: absolute;
	font-weight: normal;
	color: white;
}
.cash-info:before {
	content: 'Available Cash: ';
	left: 16px;
}
.cash-info:after {
	content: 'Cash';
	right: 16px;
}





.style-find {
	flex-grow: 0 !important;
	width: 100%;
	max-width: 400px;
}

.style-find > h3 {
	padding-left: 10px;
	border-left: 3px solid #C20000;
	line-height: 1.4;
	font-weight: 900;
	font-size: 1.5rem;
}

.style-find > div {
	display: flex;
	flex-direction: column;
	margin: 10px 100px 10px 30px;
}

.style-find label {
	line-height: 2;
	font-weight: 400;
	font-size: 1.5rem;
}

.style-find input[type] {
	width: 100%;
	max-width: 400px;
	line-height: 1.2;
	padding: 5px;
	border: 1px solid #9B9B9B;
}







/**	TOOLTIP	STYLE	**/
.tooltip {
	position: relative;
	padding: 15px 25px;
	border-radius: 10px;
	background-color: #E6E6E6;
	text-align: left;
}
.tooltip > p {
	line-height: 1.5;
}


/**	BULLET LIST STYLE	**/
ul.listup {
	list-style: none;
}
ul.listup > li {
	position: relative;
	margin-left: 10px;
	line-height: 2;
	font-size: 1.1rem;
}
ul.listup > li::before {
	content: '●';
	position: relative;
	color: #5B75A3;
	font-size: 0.6rem;
	top: -3px;
	left: -5px;
}



/**	SHOP STYLE **/
ul.shop {
	list-style: none;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
}

ul.shop li {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
	box-sizing: border-box;
	padding: 10px;
}

ul.shop .item {
	background-color: #333657;
	border-radius: 10px;
	padding: 20px 12px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
}

ul.shop .item .info {
	display: flex;
	flex-flow: column nowrap;
	align-items: end;
	height: 90px;
	background-repeat: no-repeat;
	background-size: contain;
}

ul.shop .item .info.Q0100,
ul.shop .item .info.GQ0100,
ul.shop .item .info.OQ0100,
ul.shop .item .info.HQ0100 { background-image: url('/images/shop/shop_item_01.png'); background-position-x: 15px; }

ul.shop .item .info.Q0300,
ul.shop .item .info.GQ0300,
ul.shop .item .info.OQ0300,
ul.shop .item .info.HQ0300 { background-image: url('/images/shop/shop_item_02.png'); background-position-x: 5px; }

ul.shop .item .info.Q0500,
ul.shop .item .info.GQ0500,
ul.shop .item .info.OQ0500,
ul.shop .item .info.HQ0500 { background-image: url('/images/shop/shop_item_03.png'); }

ul.shop .item .info.Q1000,
ul.shop .item .info.GQ1000,
ul.shop .item .info.OQ1000,
ul.shop .item .info.HQ1000 { background-image: url('/images/shop/shop_item_04.png'); background-position-x: 15px; }

ul.shop .item .info.Q2000,
ul.shop .item .info.GQ2000,
ul.shop .item .info.OQ2000,
ul.shop .item .info.HQ2000 { background-image: url('/images/shop/shop_item_05.png'); background-position-x: 15px; }

ul.shop .item .info.Q5000,
ul.shop .item .info.GQ5000,
ul.shop .item .info.OQ5000,
ul.shop .item .info.HQ5000 { background-image: url('/images/shop/shop_item_06.png'); background-position-x: 15px; }


ul.shop .item .info p {
	display: block;
	width: 50%;
	text-align: right;
	margin-top: 5px;
}

ul.shop .item .info p:first-child {
	color: #A6C1FF;
	font-size: 1.5rem;
	font-weight: 700;
	padding: 5px 10px;
}
ul.shop .item .info p:last-child {
	color: #F3C133;
	font-size: 1.3rem;
	font-weight: 700;
	background-color: #212332;
	border-radius: 5px;
	padding: 5px 10px;
}







/**	MODAL STYLE	**/
.modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.modal .modal-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	max-width: 90%;
	min-width: 360px;

	max-height: 90%;
	min-height: 400px;

	background-color: #FAFAFA;
	border: 1px solid #363636;
	border-radius: 10px;

	box-shadow: 0 0 12px 0 rgba(0,0,0,0.5);

	overflow: hidden;
}

.modal .modal-header {
	line-height: 2.2;
	background: #606060;
	font-size: 1.5rem;
	color: white;
	padding-left: 9%;
	user-select: none;
}

.modal .modal-footer {
	line-height: 2;
	margin: 20px auto;
}

.modal .modal-body {
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
}


.modal .modal-body ul.items {
	list-style: none;
	margin: 0 30px 20px;
}

.modal .modal-body ul.items li {
	line-height: 2.6;
	font-weight: 400;
	font-size: 1.2rem;
	border-bottom: 1px dotted #aaa;
}
.modal .modal-body ul.items li label {
	display: inline-block;
	min-width: 40%;
	box-sizing: border-box;
	text-align: center;
}

.modal .modal-body ul.items li label::before {
	content: '●';
	position: absolute;
	top: 3px;
	left: 0;
	font-size: 1rem;
	border-radius: 5px;
	color: #393D56;
	padding: 0 15px 0 30px;
}

.modal .modal-body small {
	position: relative;
	display: inline-block;
	left: 15px;
	font-size: 1rem;
	line-height: 1.5;
}
.modal .modal-body small::before {
	content: '※';
	position: absolute;
	left: -15px;
}


.modal.shop .modal-header {
	background: linear-gradient(to right, #3B3D56 0%, #4C6B99 100%) !important;
}

.modal table {
	border-collapse: collapse;
	margin-bottom: 20px;
}
.modal table tbody th,
.modal table tbody td {
	line-height: 2.2;
	font-size: 1.1rem;
	padding: 0 10px;
}

.modal table tbody th {
	background-color: #999999;
	color: #fafafa;
	border-bottom: 1px dotted #EEE;
	text-align: center;
}
.modal table tbody td {
	background-color: #CCCCCC;
	color: #303030;
	border-bottom: 1px dotted #999;
}





.table-list {
	width: 100%;
	margin: 30px 0 50px;
}

.table-list > .prefix {
	display: flex;
	flex-direction: row;
	border-top: 1px solid #909090;
	border-bottom: 1px solid #909090;
	background-color: #fafafa;

	font-size: 1.2rem;
	list-style: none;
	margin-bottom: 30px;
}

.table-list > .prefix > a {
	position: relative;
	flex-grow: 1;
	text-align: center;
	line-height: 3;
	font-weight: 700;
	color: #9F9F9F;
}

.table-list > .prefix > a+a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	width: 1px;
	height: 20px;
	background-color: #bbb;
}

.table-list > .prefix a.active {
	font-weight: 900;
	color: #505050 !important;
}

.table-list > table {
	width: 100%;
	margin-bottom: 30px;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.table-list > table tbody {
	margin-top: 10px;
	border-top: 2px solid #909090;
	border-bottom: 2px solid #909090;
}

.table-list > table tr > td {
	padding-top: 15px;
	vertical-align: top;
}

.table-list > table tr > td img {
	border-radius: 10px;
}


.table-list > table tr:last-child > td {
	padding-bottom: 15px;
}






.list-table {
	border-collapse: collapse;
	border: 1px solid #909090;
}

.list-table thead th {
	padding: 5px 10px;
	background-color: #EFEFEF;
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

.list-table tbody td {
	padding: 5px 7px;
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	text-align: center;
}

.list-table tbody td:nth-child(-n+2) {
	text-align: left;
}


.list-table.list-rate {
	width: 100%;
}

.list-table.list-rate th,
.list-table.list-rate td {
	text-align: center !important;
	padding: 10px 7px !important;
	font-size: 1.1rem;
}

.list-table [align="center"] th,
.list-table [align="center"] td {
	text-align: center !important;
}

.list-table-sm th,
.list-table-sm td {
	padding: .12rem .4rem !important;
	font-size: 12px !important;
}


.style-notice {
	position: relative;
	display: block;
	width: 930px;
	margin: 30px 0 50px;
	padding: 160px 0 190px !important;
	background-image: url('https://cdn.3kingdoms.co.kr/assets/boards/images/notice_bg_m.png');
	background-repeat: repeat-y;
	background-size: contain;
}

.style-notice::before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	background-color: white;
	background-image: url('https://cdn.3kingdoms.co.kr/assets/boards/images/notice_bg_t.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.style-notice::after {
	content: '';
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 190px;
	background-color: white;
	background-image: url('https://cdn.3kingdoms.co.kr/assets/boards/images/notice_bg_b.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.style-notice table td {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	background-color: white;
}

.style-notice .list-table thead th {
	padding: 5px 10px;
	background-color: rgba(231,194,97,1);
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

.style-notice .list-table tbody td {
	padding: 5px 7px;
	background-color: rgba(247,236,225,1);
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	text-align: center;
}

.style-notice ul {
	list-style: disc;
}
.style-notice ul li {
	margin-left: 35px;
	padding: unset;
}



.agree-form {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 20px;
}

.agree-form > div {
	text-align: center;
	flex-grow: 1;
}






/** HAMGAME HACK **/

#hangame_gnb_nav_service,
#hangame_gnb_nav_service .hangame_gnb_game_online {
	box-sizing: content-box !important;
}

#hangame_gnb_nav_service div,
#hangame_gnb_nav_service ul,
#hangame_gnb_nav_service li,
#hangame_gnb_nav_service a {
	box-sizing: content-box !important;
}