@charset "utf-8";
@import url('fonts.css');

/* === CSS reset === */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main, summary,
time, mark, audio, video{ margin:0; padding:0; border:0; outline:0; background: transparent; box-sizing: border-box; }
html{ -webkit-font-smoothing: subpixel-antialiased; -webkit-tap-highlight-color: transparent; }
body{ -webkit-text-size-adjust: none; height:auto; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main{display:block;}
ul,ol,li{list-style:none;}
a{ margin:0; padding:0; border:0; outline:0; text-decoration:none !important; }
table{ border-collapse:collapse; border-spacing:0; width: 100%;}
hr{ display:block; height:1px; border:0; border-top:1px solid #fff; margin:1rem 0; padding:0; }
img{border:0; vertical-align:middle;}
em{font-style:normal;}
input, textarea, button, select{ border-radius:0; border:0;}
button{ border:none; outline:none; background:none; cursor:pointer; }
input, select{vertical-align:middle;}
input:required, input:invalid{ outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow: none; }
address, cite, dfn, em, var{font-style: normal;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content: none;}
sup{vertical-align: text-top;}
sub{vertical-align: text-bottom;}
embed{ /*for the damn thouder plugin*/ display:none; }

/* === form CSS reset cross browsing === */

select::-ms-expand {display:none}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{display:none;}
input:-moz-submit-invalid{box-shadow: none;}
input:-moz-ui-invalid{box-shadow:none;}

:root {
	--color-main :		#32FF7E;
	--color-sub :		#18DCFF;
	--color-em :		#FC427B;
	--color-gray-100 :	#DADEE1;
	--color-gray-200 :	#768390;
	--color-gray-300 :	#2B3035;
	--color-gold :		#AE7C2B;
	--color-silver :	#777575;
	--color-bronze :	#AE492B;
	--color-rose :		#B07676;
	--color-champagne :	#C2AD9A;

	--color-trans-wh7 : rgba(255,255,255,0.7);
	--color-trans-wh5 : rgba(255,255,255,0.5);
	--color-trans-wh2 : rgba(255,255,255,0.25);
	--color-trans-bk7 : rgba(0,0,0,0.7);
	--color-trans-bk5 : rgba(0,0,0,0.5);
	--color-trans-bk2 : rgba(0,0,0,0.25);

	--font-title :	'Montserrat', 'SUIT', 'Pretendard', 'MS PGothic', Osaka, Meiryo, Tahoma, 'Noto Sans KR', '굴림', Gulim, SimSun, Verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-text :	'Pretendard', 'MS PGothic', Osaka, Meiryo, Tahoma, 'Noto Sans KR', '굴림', Gulim, SimSun, Verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-icon :	'fontawesome', 'xeicon', 'Pretendard', 'MS PGothic', Osaka, Meiryo, Tahoma, 'Noto Sans KR', '굴림', Gulim, SimSun, Verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--transition-slow : all .3s ease-in-out;
	--transition-fast : all .1s ease-in-out;

	--space-header : 290px; 
	--space-70 :	70px;
	--space-50 :	50px;
	--space-30 :	30px;
	--space-20 :	20px;
	--space-15 :	15px;
	--space-10 :	10px;
	--space-5 :		5px;
}

body { font-size:15px; word-break:keep-all; }
body, input, button, textarea, select { font-family: var(--font-text); }
img { max-width:100%; }
.inner_1200 { max-width:1200px; margin-left:auto; margin-right:auto; }
.inner_600 { max-width:600px; margin-left:auto; margin-right:auto; }
.hidden { display:none; }
.ta-mo-only,
.mo-only { display:none; }
@media all and (max-width:1000px) {
	body { font-size:14px; }
	.pc-only { display:none; }	
	.ta-mo-only { display:block; }
}
@media all and (max-width:770px) {
	.ta-only { display:none; }
	.mo-only { display:block; }
}

/* === component === */

/* trigger */
.menu-trigger, 
.menu-trigger span { display: inline-block; transition: all .4s, background-color .15s ease-in-out; box-sizing: border-box; }
.menu-trigger { position: relative; width: 25px; height: 20px; }
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color:var(--color-trans-wh7); border-radius: 0; }
.menu-trigger span:nth-of-type(1) {	top: 0; }
.menu-trigger span:nth-of-type(2) { top: 9px; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
/* 중앙 라인이 고정된 자리에서 투명하게 사라지며 상하라인 회전하며 엑스자 만들기 */
.menu-trigger:hover span { background-color:#fff; }
.menu-trigger.active span { background-color:#fff; }
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(9px) rotate(-45deg);
	transform: translateY(9px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(45deg);
	transform: translateY(-9px) rotate(45deg); }

/* button */
.btn, a.btn, button.btn { display:inline-block; width:auto; margin:var(--space-5) 0; position:relative; cursor: auto;
	background-color:var(--color-gray-300); color:var(--color-trans-wh7); border-color:transparent; font-weight:500; border-radius:3px; 
	font-family:var(--font-title); font-size:14px; text-align:center; white-space: nowrap; transition: var(--transition-fast); }
a.btn, button.btn { cursor: pointer; }
.btn:focus { color: #fff; }
.btn:hover { box-shadow: 2px 4px 10px rgba(0,0,0,0.1); color: #fff; }
.btn.xs { height:28px; line-height:27px; font-size:13px; padding:0 var(--space-10); }
.btn.sm { height:32px; line-height:32px; font-size:14px; padding:0 var(--space-10); }
.btn.md { height:36px; line-height:35px; font-size:16px; padding:0 var(--space-15); }
.btn.lg { height:40px; line-height:39px; font-size:18px; padding:0 var(--space-15); }
.btn.md i { font-size: 20px; vertical-align: -1px; }
.btn.lg i { font-size: 24px; vertical-align: -3px; }
.btn.round { border-radius: var(--space-20); }
.btn.borders { background:transparent; border:1px solid var(--color-trans-wh2); color: var(--color-trans-wh7); transition: var(--transition-fast); }
.btn.borders:focus,
.btn.borders:hover { border:1px solid var(--color-trans-wh7); color:#fff; }
.btn.white { background-color:#fff; color:var(--color-trans-bk7); }
.btn.white:focus,
.btn.white:hover { box-shadow:none; color: #000; }
.btn.color { background-size: 200% 100%; background-position: right center; color:var(--color-gray-300); font-weight:600; 
	background-image: linear-gradient(60deg, var(--color-main) 0%, #7efff5 25%, var(--color-sub) 50%, #7efff5 75%, var(--color-main) 100%); transition: var(--transition-slow); }
.btn.color:focus,
.btn.color:hover { background-position: left center; }

/* link */
a.link { font-weight:500; color: var(--color-sub) !important; transition: var(--transition-fast); }
a.link:hover { color: var(--color-main) !important; }

/* modal */
.modal.fade.show { padding-right:0 !important; }
.modal-title { font-family:var(--font-title); }

/* custom-select */
.custom-select { position:relative; }
.custom-select select,
.custom-select:after { display: none; /*hide original SELECT element: */ }
/* style the items (options), including the selected item: */
.select-items div,
.select-selected { font-family:var(--font-title); font-weight:600; color:var(--color-trans-wh7); padding: 2px 15px 0; padding-right:30px; line-height: 28px; cursor: pointer;
	border: 1px solid; border-color: transparent transparent var(--color-trans-bk2) transparent; }
.select-selected { color:#fff; border: 1px solid var(--color-trans-wh2); border-radius: 3px; }
.select-selected.select-arrow-active { border-color:var(--color-trans-wh7); }
/* Style the arrow inside the select element: */
.select-selected:after { content: ""; position: absolute; top: 14px; right: 12px; width: 0; height: 0;
	border: 6px solid transparent; border-color: var(--color-trans-wh7) transparent transparent transparent; }
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; }
/* Style items (options): */
.select-items { position: absolute; background-color:#000; top: 100%; left: 0; right: 0; z-index: 99; max-height:calc((32px * 10) + 20px); overflow-y:auto;
	border: 1px solid; border-color: transparent var(--color-trans-wh2) var(--color-trans-wh2) var(--color-trans-wh2); border-radius: 0 0 3px 3px; }
.select-items::-webkit-scrollbar { width: 6px;  /* 스크롤바의 너비 */ }
.select-items::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background:var(--color-gray-100); /* 스크롤바의 색상 */ border-radius:6px; }
.select-items::-webkit-scrollbar-track { background:var(--color-gray-200); /*스크롤바 뒷 배경 색상*/ }
/* Hide the items when the select box is closed: */
.select-hide { display: none; }
.select-items div:hover { background-color:var(--color-gray-300); color:#fff; }
.same-as-selected {	background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color:var(--color-gray-300) !important; font-weight:600; }

/* select */
.select-button,
.select-color { margin-bottom:-5px; }
.select-button li,
.select-color li {display:inline-block; margin:0 5px 5px 0;}
.select-button .radio,
.select-button .check { position: relative; }
.select-button .radio label,
.select-button .check label { display: block; width: auto; font-size:14px; cursor: pointer; border: 1px solid #ddd; background:#fff; color:#aaa; border-radius: 3px; padding:0 .5em; padding-left:1.75em; }
.select-button .radio label:before,
.select-button .check label:before { font-family: xeicon; font-size:16px; position: absolute; left: .4em; top: 50%; transform: translate(0,-50%); }
.select-button .radio label:before { content:'\e9c6'; }
.select-button .check label:before { content:'\ea0e'; }
.select-color .radio { position: relative; width:30px; overflow: hidden; }
.select-color .radio label { display: block; width: inherit; cursor: pointer; border: 1px solid #ddd; border-radius: 3px; }
.select-color .radio label span { display: block; position:relative; width:100%; height:100%; border: 3px solid #fff; border-radius: 3px; }
.select-color .radio label[for="color-wh"] span { background-color:var(--color-bg); }
.select-color .radio label[for="color-pkgd"] span { background-color:#E3D2CF; }
.select-color .radio label[for="color-gr"] span { background-color:#587876; }
.select-color .radio label[for="color-bk"] span { background-color:black; }
.select-button .radio input[type="radio"],
.select-button .check input[type="checkbox"],
.select-color .radio input[type="radio"] { position: absolute; top: 0; left: -9999em; }
.select-button .radio input[type="radio"]:hover + label,
.select-button .check input[type="checkbox"]:hover + label { color:#888; }
.select-button .radio input[type="radio"]:checked + label,
.select-button .check input[type="checkbox"]:checked + label,
.select-color .radio input[type="radio"]:checked + label { border-color:#888; color:#222; }
.select-button .radio input[type="radio"]:checked + label:before { content:'\e9c7'; }
.select-button .check input[type="checkbox"]:checked + label:before { content:'\e92d'; }
.select-button .radio input[type="radio"]:disabled + label,
.select-button .check input[type="checkbox"]:disabled + label,
.select-color .radio input[type="radio"]:disabled + label { background-color:#22262a; border-color:var(--color-gray-300); color:var(--color-gray-200); cursor: default; }
.select-button .radio input[type="radio"]:disabled + label:before,
.select-button .check input[type="checkbox"]:disabled + label:before,
.select-color .radio input[type="radio"]:disabled + label:before { content:'\e925'; }
.select-box { position:relative; }
.select-box:after { content:'\e936'; color:#222; font-family: xeicon; position: absolute; right: .25em; top: 50%; transform: translate(0,-50%); font-size:1.25em; }
.select-box select { width:100%; font-size:14px; border: 1px solid #888; background:#fff; color:#222; border-radius: 3px; padding:0 .5em; padding-right:1.75em; }

.dropdown-menu { font-size:14px; /*font-family:var(--font-title);*/ }
.dropdown-menu-dark { background-color:var(--color-gray-300); }
.dropdown-menu-dark .dropdown-item { color:var(--color-trans-wh7); }
.dropdown-menu-dark .dropdown-item:hover { color:#fff; }
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active { background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color:var(--color-gray-300) !important; font-weight:600; }

/* check, radio */
.checkbox-color { display: inline-block; margin:var(--space-5) 0; }
.checkbox-color label { display: inline-block; cursor: pointer; position: relative; padding-left: 12px; line-height: 20px; color:var(--color-trans-wh7); }
.checkbox-color label::before { content: ""; display: inline-block; position: absolute; top: 0; width: 20px; height: 20px; left: 0; right: 0; box-sizing:border-box;
	margin-left: -15px; border: 1px solid var(--color-trans-wh7); border-radius:3px; text-align: center; background-color: transparent; transition: var(--transition-fast); }
.checkbox-color label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0px; top: 0;
	margin-left: -14px; padding-left: 3px; padding-top: 0px; font-size: 12px; color: #fff; }
.checkbox-color input[type="checkbox"] { opacity: 0; }
.checkbox-color input[type="checkbox"]:focus + label::before { outline: none; }
.checkbox-color input[type="checkbox"]:checked + label::after { font-family: 'xeicon'; content: "\e928";
	color:var(--color-gray-300); font-weight:bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.checkbox-color input[type="checkbox"] + label::before { border-color: var(--color-trans-wh7); }
.checkbox-color input[type="checkbox"]:checked + label { color:#fff; }
.checkbox-color input[type="checkbox"]:checked + label::before { border-color: #fff; background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); }

.radio-color { display: inline-block; cursor: pointer; margin-right:var(--space-20); margin:var(--space-5) 0; }
.radio-color label { display: block; cursor: pointer; position: relative; padding-left: 24px; text-align: left; line-height:20px; color:var(--color-gray-300); }
.radio-color input { width: auto; opacity: 0; position: absolute; left: 0; padding: 0; cursor: pointer; }
.radio-color .helper { position: absolute; top: calc(50% - 10px); left: 0; display: block;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--color-gray-300); }
.radio-color .helper::after { transform: scale(0); }
.radio-color .helper::before,
.radio-color .helper::after { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px;
	box-sizing: border-box; border-radius: 50%; transition: var(--transition-fast); }
.radio-color .helper::before { border: 1px solid var(--color-trans-wh7); }
.radio-color .helper::after { background-color: var(--color-gray-300); border: 1px solid var(--color-gray-300); }
.radio-color label:hover .helper { color: var(--color-gray-300); }
.radio-color input:checked ~ .helper::after { transform: scale(0.5); background-color: var(--color-sub); border: 1px solid var(--color-sub); }
.radio-color input:checked ~ .helper::before { border-color: var(--color-sub); }

/* form */
/*
.form-control { display: inline-block; width:auto; height: 32px; line-height: 30px; padding:0 var(--space-10); margin:var(--space-5) 0;
	background: transparent; border-radius: 3px; color:#fff; border: 1px solid var(--color-trans-wh2);
	-webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box;
	transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out; }
.form-control:required { border-color: var(--color-trans-wh7); }
.form-control:invalid { border-color: var(--color-em); }
.form-control:hover,
.form-control:focus { border-color:#fff; color:#fff; outline:none; background: transparent; }
textarea.form-control { padding: .5em; margin-bottom:10px; }
*/
.form_custom p { margin-bottom: var(--space-5); }
.form_custom .input_box { height: 36px; line-height: 35px; margin-bottom: var(--space-15); position:relative; }
.form_custom .input_box label { display:block; float:left; color: var(--color-trans-wh7); width: 30px; height:100%; font-size:24px;
	-webkit-transition: var(--transition-fast); transition: var(--transition-fast); }
.form_custom .input_box:hover label,
.form_custom .input_box:focus label { color:#fff; }
.form_custom .input_box input { display:block; width:calc(100% - 30px); height: 36px; line-height: 34px; padding:var(--space-10) 1em var(--space-10) 0.5em;
	background: transparent; color: #fff; border:none; border-bottom: 1px solid var(--color-trans-wh5); outline: none; position:relative;
	-webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; transition: border-color .1s ease-in-out; }
.form_custom .input_box:hover input,
.form_custom .input_box:focus input { border:none !important; border-bottom: 1px solid #fff !important; outline: none; box-shadow:none; }
.form_custom .input_box input:-webkit-autofill,
.form_custom .input_box input:-webkit-autofill:focus { transition: background-color 0s 600000s, color 0s 600000s; }
.form_custom .text_box { margin-top: var(--space-30); margin-bottom: var(--space-15); position:relative; }
.form_custom .text_box textarea { display:block; width:100%; min-height:10em; padding:var(--space-10) 0.5em;
	background: transparent; color: #fff; border:none; border: 1px solid var(--color-trans-wh5); outline: none; position:relative; }
.form_custom .text_box:hover textarea,
.form_custom .text_box:focus textarea { border: 1px solid #fff !important; outline: none; box-shadow:none; }
.form_custom .input_box .check { position:absolute; top:0; right:0; width: 30px; height:100%; z-index:1;
	color: var(--color-trans-wh7); font-size:18px; text-align:right; }
.form_custom .input_box:hover input ~ .check,
.form_custom .input_box:focus input ~ .check { color:#fff; }
.form_custom .input_box input:valid ~ .check { color:var(--color-main); }
/*.form_custom .input_box input:invalid ~ .check { color:var(--color-em); }*/
.form_custom .btn { margin: var(--space-15) 0; width:100%; }

/* table */
.table { width: 100%; max-width: 100%; background-color: transparent; }
.table th,
.table td { padding:var(--space-15) 0; vertical-align: middle; }
.table tbody th { }
.table tbody td { }
.table tbody tr { transition: background .1s ease-in-out; }
.table tbody tr:hover,
.table tbody tr:focus { background:var(--color-gray-300); }
.table strong { font-weight:600; color:#fff; }
.table small { font-weight:400; color:var(--color-gray-200); }

/* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */
@media all and (max-width:770px) {
	/* Force table to not be like tables anymore */
	.table_respon, .table_respon thead, .table_respon tbody, .table_respon tfoot, .table_respon th, .table_respon td, .table_respon tr { display: block; }
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table_respon thead { border-bottom:none; }
	.table_respon thead tr { position: absolute; top: -9999px; left: -9999px; }
	.tbl_head03 table.table_respon,
	.table_respon tr,
	.table_respon th,
	.table_respon td { border:none; border-bottom:none; }
	.table_respon tr:first-of-type { border-top: 2px solid var(--color-gray-200); }
	.table_respon tr { border-bottom: 1px solid var(--color-gray-200); }
	.table_respon th { border-bottom: 1px solid var(--color-gray-200); background:transparent; }
	.table_respon td { /* Behave  like a "row" */ border-bottom: 1px solid var(--color-gray-300); position: relative; padding: 6px !important; width:100% !important; }
	.tbl_head01 table.table_respon td { height:auto; text-align:left !important; }
	.table_respon td:before { /* Label the data */ content: attr(data-label); /* Now like a table header */ position: absolute;
	/* Top/left values mimic padding */ top: 0; left: 0; height:100%; padding: 6px; background:var(--color-gray-300);
	color:var(--color-gray-200); font-family:var(--font-title); font-weight:500; text-align:left !important; }

	.order_inquiry .table_respon td { padding-left:calc(6em + 6px) !important; }
	.order_inquiry .table_respon td:before { width:6em; }
	.board_list .table_respon td,
	.od_prd_list .table_respon td { padding-left:calc(4em + 6px) !important; }
	.board_list .table_respon td:before,
	.od_prd_list .table_respon td:before { width:4em; }
	
	.table_respon .center,
	.table_respon .right { text-align:left; }
}

/* tabs */
.tabs .tab-title { display:flex; flex-wrap:wrap; align-items:center; }
.tabs .tab-title.lg { margin-bottom:var(--space-50); justify-content:center; gap:0; }
.tabs .tab-title.sm { display:inline-flex; margin-bottom:var(--space-20); border: 1px solid var(--color-trans-wh2); border-radius: 3px; padding:3px; gap:3px; width:auto; }
.tabs .tab-title .tab-nav { cursor:pointer; }
.tabs .tab-title.lg .tab-nav { border-top: 1px solid var(--color-trans-wh2); border-bottom: 1px solid var(--color-trans-wh2); line-height:24px; }
.tabs .tab-title.lg .tab-nav:first-child { border-left: 1px solid var(--color-trans-wh2); border-top-left-radius: var(--space-50); border-bottom-left-radius: var(--space-50); }
.tabs .tab-title.lg .tab-nav:last-child { border-right: 1px solid var(--color-trans-wh2); border-top-right-radius: var(--space-50); border-bottom-right-radius: var(--space-50); }
.tabs .tab-title .tab-nav .tab-key { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family: var(--font-title); }
.tabs .tab-title.lg .tab-nav .tab-key { padding:1em 1.5em; border-radius: var(--space-50); font-size:1.125em; }
.tabs .tab-title.sm .tab-nav .tab-key { padding:3px 0.5em; }
.tabs .tab-title.lg .tab-nav .tab-key .sale { font-size:14px; color:#fff; background:var(--color-trans-bk7); padding:0 1em; margin-left:0.75em; border-radius: var(--space-20); }
.tabs .tab-title.lg .tab-nav .tab-key .sale i { color: var(--color-em); }
.tabs .tab-title.lg .tab-nav.current .tab-key { color: var(--color-gray-300); font-weight: 600; background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); }
.tabs .tab-title.sm .tab-nav.current .tab-key { background:var(--color-trans-wh2); border-radius:3px; }
.tabs .tab-panel { width: 100%; position: relative; }
.tabs .tab-panel .tab-cont { display:none; width: 100%; }
.tabs .tab-panel .tab-cont.current { display:block; }
@media all and (max-width:1000px) {
	.tabs .tab-title { gap:0.5em; }
	.tabs .tab-title.lg { margin-bottom:var(--space-30); gap:3px; }
	.tabs .tab-title.lg .tab-nav:first-child,
	.tabs .tab-title.lg .tab-nav:last-child,
	.tabs .tab-title.lg .tab-nav { border: 1px solid var(--color-trans-wh2); border-radius: var(--space-50); }
	.tabs .tab-title.lg .tab-nav .tab-key { padding:0.4em 0.8em; font-size:14px; }
	.tabs .tab-title.lg .tab-nav .tab-key .sale { font-size:14px; }
}

/* tooltip */
.tooltip { font-family:var(--font-text); font-size:12px; }
.tooltip-inner { text-align:left; }

/* flex_box */
.flex_wrap { display:flex; flex-wrap:wrap; gap:var(--space-50); width:100%; padding:0; }
.flex_wrap > .flex_box.full { width:100% !important; }
.flex_wrap.col2 > .flex_box { width: calc( (100% - 50px) / 2); }
.flex_wrap.col3 > .flex_box { width: calc( (100% - 100px) / 3); }
.flex_wrap.col4 > .flex_box { width: calc( (100% - 150px) / 4); }
.flex_wrap.col5 > .flex_box { width: calc( (100% - 200px) / 5); }
.flex_wrap.col6 > .flex_box { width: calc( (100% - 250px) / 6); }
@media all and (max-width:1600px) {
	.flex_wrap.col4 .flex_box { width: calc( (100% - 50px) / 2); }
	.flex_wrap.col6 > .flex_box { width: calc( (100% - 100px) / 3); }
}
@media all and (max-width:1200px) {
	.flex_wrap { gap:var(--space-30); }
	.flex_wrap.col2 > .flex_box { width: calc( (100% - 30px) / 2); }
	.flex_wrap.col3 > .flex_box { width: calc( (100% - 60px) / 3); }
	.flex_wrap.col4 > .flex_box { width: calc( (100% - 30px) / 2); }
	.flex_wrap.col5 > .flex_box { width: calc( (100% - 30px) / 2); }
	.flex_wrap.col6 > .flex_box { width: calc( (100% - 60px) / 3); }
}
@media all and (max-width:1000px) {
	.flex_wrap.col2,
	.flex_wrap.col3 { flex-direction:column; }
	.flex_wrap.col2 > .flex_box,
	.flex_wrap.col3 > .flex_box { width:100%; }	
}
@media all and (max-width:770px) {
	.flex_wrap { gap:var(--space-20); }	
	.flex_wrap.col4 > .flex_box { width: calc( (100% - 20px) / 2); }
	.flex_wrap.col5 > .flex_box { width: calc( (100% - 20px) / 2); }
	.flex_wrap.col6 > .flex_box { width: calc( (100% - 20px) / 2); }
}
@media all and (max-width:540px) {
	.flex_wrap.col2,
	.flex_wrap.col3,
	.flex_wrap.col4,
	.flex_wrap.col5,
	.flex_wrap.col6 { flex-direction:column; }	
	.flex_wrap.col2 > .flex_box,
	.flex_wrap.col3 > .flex_box,
	.flex_wrap.col4 > .flex_box,
	.flex_wrap.col5 > .flex_box,
	.flex_wrap.col6 > .flex_box { width:100%; }
}

/* round_box */
.round_box { border-radius:var(--space-20); /*overflow:hidden;*/ border: 1px solid var(--color-trans-wh2); box-shadow: 0 0 20px var(--color-trans-bk2);
	background:var(--color-trans-bk5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: var(--transition-fast); }
.round_box.sm { border-radius:var(--space-10); }
.round_box.padding { padding:var(--space-30); }
.round_box.padding.sm { padding:var(--space-20); }
.round_box .img,
.round_box .icon { max-width:auto; aspect-ratio:auto; border-radius:0; border:0 !important; background:transparent; }
.round_box .img + .txt { margin-top: var(--space-30); }
.round_box .icon + .txt { margin-top: var(--space-20); }
.round_box .tit { font-size:2em; font-weight:700; margin-bottom:var(--space-20); }
.round_box .txt p { font-size:18px; }
@media all and (max-width:1200px) {
	.round_box.padding { padding:var(--space-30) var(--space-20); }
}
@media all and (max-width:1000px) {
	.round_box .txt p { font-size:16px; }
}
@media all and (max-width:540px) {
	.round_box .img + .txt { margin-top: var(--space-20); }
	.round_box .icon + .txt { margin-top: var(--space-10); }
	.round_box .tit { font-size:1.5em; margin-bottom:var(--space-10); }
	.round_box .txt p { font-size:14px; }	
}

/* === layout === */

.container_wrap { height:100%; }
.container_wrap h1, .container_wrap h2, .container_wrap h3, 
.container_wrap h4, .container_wrap h5, .container_wrap h6 { font-family:var(--font-title); word-break:keep-all; }
.container_wrap p { word-break:keep-all; }
.dark_mode { color: var(--color-gray-100); }
.dark_mode a { color: var(--color-gray-100); }
.inner { width:100%; margin:0 auto; padding:0 var(--space-50); position:relative; }
@media all and (max-width:770px) {
	.inner { padding:0 var(--space-30); }
}

/* header */
#header { position:fixed; top:0; left:0; z-index:100; width:var(--space-header); height:100%; background:var(--color-trans-bk7); box-shadow: 0 0 20px var(--color-trans-bk2);
	-webkit-backdrop-filter: blur(5px) brightness(102%); backdrop-filter: blur(5px) brightness(102%); }
#header .inner { height:100%; padding:var(--space-30) 0; display:flex; flex-direction:column; gap:var(--space-20); }
#header .btn_menu { display:none; margin-left:auto; z-index:101; transition: var(--transition-fast); }
h1.logo a { display:flex; align-items:center; justify-content:center; height:35px; }
@media all and (max-width:1000px) {
	#header { top:0; left:0; right:0; width:100%; height:auto; background:var(--color-trans-bk7); transition: var(--transition-slow); }
	#header.opened { background:rgba(0,0,0,0.9); height:100%; }
	#header .inner { height:var(--space-50); flex-direction:row; align-items:center; justify-content:space-between; padding:0 var(--space-30); }
	#header .btn_menu { display: inline-block; }	
}

/* nav */
#nav-gnb { display:flex; flex-direction:column; gap:var(--space-20); overflow-y:auto; height:100%; }
#nav-gnb::-webkit-scrollbar { width: 6px;  /* 스크롤바의 너비 */ }
#nav-gnb::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background:var(--color-gray-100); /* 스크롤바의 색상 */ border-radius:6px; }
#nav-gnb::-webkit-scrollbar-track { background:var(--color-gray-300); /*스크롤바 뒷 배경 색상*/ }
#nav-gnb hr { margin:0; background-color: #fff;	border-top: 1px solid transparent; }
#nav-gnb .lang_box { padding: 0 var(--space-30); }
#nav-gnb .lang_box .dropdown-toggle { width:100%; text-align:left; }
#nav-gnb .lang_box .dropdown-toggle::after { position:absolute; top:50%; right:.75rem; transform:translateY(-50%); }
#nav-gnb .lang_box .dropdown-toggle i {  }
#nav-gnb .lang_box .dropdown-menu { width:100%; }
#nav-gnb .desc { text-align:center; margin-bottom: var(--space-15); font-size:16px; }
#nav-gnb .button_box,
#nav-gnb .login_box { padding: 0 var(--space-30); }
#nav-gnb .button_box li .btn { width:100%; display:flex; }
#nav-gnb .button_box li .btn .icon { display: inline-flex; align-self: center; width:20px; }
#nav-gnb .or { position:relative; margin:var(--space-15) 0; border-top:1px dotted var(--color-trans-wh2); }
#nav-gnb .or:before { content:'or'; position:absolute; top:50%; left:50%; width:30px; height:30px; line-height:28px; transform:translate(-50%, -50%);
	display:flex; align-items:center; justify-content:center; background:#000; border:1px solid var(--color-trans-wh2); border-radius:50%; color: var(--color-trans-wh7); font-size:12px; }
#nav-gnb .login_box .btn { width:100%; }
#nav-gnb .policy_box { margin-top:auto; display:flex; justify-content:space-evenly; color:var(--color-trans-wh2); padding: 0 var(--space-30); }
#nav-gnb .policy_box a { font-size:0.8em; color:var(--color-trans-wh7); transition: var(--transition-fast); }
#nav-gnb .policy_box a:hover { color:#fff; } 
#nav-gnb .user_box strong { font-family:var(--font-title); font-weight:700; color:#fff; }
#nav-gnb .user_box b { font-family:var(--font-title); font-weight:800; }
#nav-gnb .user_profile { display:flex; align-items:center; gap:var(--space-15); padding:0 var(--space-30); margin-bottom:var(--space-15); }
#nav-gnb .user_profile .user_img { width:60px; height:60px; background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); overflow:hidden;
	background-color: #fff; border: 2px solid transparent; border-radius: 50%; }
#nav-gnb .user_plan { display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin:var(--space-15) var(--space-30);
	padding:0 var(--space-5) 0 .75rem;; border:1px solid var(--color-trans-wh2); border-radius:var(--space-20); }
#nav-gnb .user_plan .user_coin { flex:auto; display:flex; align-items:center; }
#nav-gnb .menu li + li { border-top:1px solid var(--color-trans-bk7); }
#nav-gnb .menu li a { display:inline-block; width:100%; padding:0.5em var(--space-30); font-family:var(--font-title); color:var(--color-trans-wh7); transition: var(--transition-fast); }
#nav-gnb .menu li a i { font-size:20px; vertical-align:-3px; }
#nav-gnb .menu li a:hover { background:var(--color-gray-300); color:#fff; }
#nav-gnb .nav-menu li a.active { background:var(--color-gray-300); color:#fff; font-weight:500; }
#nav-gnb .nav-menu li a.active i { background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color: transparent; -webkit-background-clip: text; }
@media all and (max-width:1000px) {
	#nav-gnb { width:100%; height:calc(100% - 50px); min-height:calc(100vh - 50px); position:fixed; top:var(--space-50); right:-100%; z-index:101; 
		gap:var(--space-15); padding:0 0 var(--space-30); opacity:0; }
	#header.opened #nav-gnb { right:0; opacity:1; transition: var(--transition-slow); }
	#nav-gnb .button_box ul { display:flex; gap:var(--space-5); }
	#nav-gnb .button_box ul li { flex:1; }
}
@media all and (max-width:540px) {
	#nav-gnb .button_box li .btn { text-align:center; justify-content:center; }
	#nav-gnb .button_box li .btn span { display:none; }
}

#nav-lnb { position:fixed; top:var(--space-30); left:var(--space-header); width:calc(100% - var(--space-header)); z-index:10; }
#nav-lnb .inner { display:flex; align-items:center; justify-content:center; }
#nav-lnb .menu { display:flex; align-items:center; justify-content:center; gap:2px; padding:2px var(--space-15); border-radius:var(--space-20); 
	background-color:var(--color-trans-bk7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
#nav-lnb .menu li a { display:inline-block; padding:2px var(--space-30); font-family:var(--font-title); font-size:18px; font-weight:700; color:var(--color-trans-wh7);
	border-radius:var(--space-20); transition: var(--transition-fast); }
#nav-lnb .menu li a:hover { background:var(--color-gray-300); color:#fff; }
#nav-lnb .nav-menu li a.active { background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color: var(--color-gray-300); }

/* front */
.container_wrap { min-height:100vh; background-color:#1e1e1e; }

.section.front { height:100%; /*background: url("../img/front/back_login_blur.jpg") no-repeat 50% 50% / cover;*/ background-color:#1e1e1e;
	padding:90px 0 100px; padding-left:var(--space-header); }
.section.visual { height:90px; background: url(../img/front/back_login.jpg) no-repeat 50% 50% / cover; }
@media all and (max-width:1000px) {
	.section.front { padding:var(--space-70) 0 100px; }
	.section.visual { height:150px; }
}
.sec-main { position:relative; }
.sec-main + .sec-main { margin-top:var(--space-50); padding-top:var(--space-50); }
.sec-main hgroup { margin:var(--space-50) 0; text-align:center; }
.sec-main .title { font-size:5em; font-weight:800; letter-spacing:-0.025em; }
.sec-main .desc { font-size:1.4em; }
.sec-main hgroup .desc { margin-top:var(--space-30); }
.sec-main mark { color:#fff; font-weight:600;
    background-image: linear-gradient(60deg, rgba(24, 220, 255, 0.5) 0%, rgba(50, 255, 126, 0.5) 100%);
    background-repeat: no-repeat;
    background-size: 100% 30%;
    background-position: 0 95%;
    padding: 0 0.1em; }
.sec-main .btn_box { display:flex; justify-content:center; }
.sec-main .btn_box a { color: var(--color-trans-wh7); transition: var(--transition-fast); }
.sec-main .btn_box a:hover { color:#fff; }
.sec-main.main { margin:-90px -50px 0; padding:120px 0; background: no-repeat 50% 50% / cover; /*background-attachment: fixed;*/ }
.sec-main.main .inner { padding:0 10%; }
.sec-main.main hgroup { /*text-align:left;*/ }
.sec-main.main hgroup .title { font-size:7em; text-shadow: 0 0 20px var(--color-trans-bk5); }
.sec-main.main .btn_box { gap: var(--space-30); /*justify-content:flex-start;*/ }
.sec-main.main .img.back { display: flex; justify-content: center; position:relative; margin-top:-2em; }
.sec-main.main .img.back img { max-width:80%; margin:0 auto; }
.sec-main.main .img.back .btn_box { position:absolute; top:2em; left:50%; transform:translateX(-50%); }
.sec-main.main .btn_box .round_box { min-width:210px; }
.sec-main.main .btn_box .round_box:hover { border-color:var(--color-trans-wh7); }
.sec-main.main .btn_box .tit { font-size:1.5em; margin-bottom:var(--space-5); display:flex; }
.sec-main.main .btn_box .tit i { margin-left:auto; }
.sec-main.feature .round_box .icon i { font-size: 6em; }
/*.sec-main.feature .round_box .tit { text-align:center; }*/
.sec-main.chart .round_box { display:flex; flex-direction:column; }
/*.sec-main.chart .round_box .txt { display:flex; gap:var(--space-15); margin-bottom:auto; }*/
.sec-main.chart .round_box .txt .btn.borders { margin-top:0; margin-left:auto; }
.sec-main.partner .img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.sec-main.partner .img img { width:100%; max-width:200px; }
.sec-main.help .round_box { color: var(--color-gray-100); display: flex; flex-direction: column; height:100%; }
.sec-main.help .round_box .icon i { font-size: 2em; }
.sec-main.help .round_box .info { margin-top:auto; padding-top:var(--space-10); color:var(--color-gray-200); font-weight:500; }
.sec-main.help .round_box .info b { color: var(--color-sub); font-size:16px; }
.sec-main.help .round_box:hover { color: #fff; border-color:var(--color-trans-wh7); }
.sec-main.help .round_box:hover .info b { color: var(--color-main); }
.sec-main.form .desc { font-size:1.125em; }
.sec-main.form .form_custom { max-width:600px; margin:0 auto; }
.sec-main.form .form-control { font-size:1em; }
.sec-main.form textarea.form-control { height:7em; }
.sec-main.plan .round_box .icon span { font-size: 3em; }
.sec-main.plan .round_box .txt .tit { display:none; }
.sec-main.benefit .round_box { background: #1e1e1e no-repeat 50% 50% / cover; /*background-attachment: fixed;*/ }
.sec-main.benefit .round_box .flex_wrap { align-items:center; }
.sec-main.benefit .round_box .txt { padding:var(--space-50); padding-left:0; }
.sec-main.device { aspect-ratio:5 / 3; display:flex; align-items:center; background: no-repeat center right / auto 100%; }
.sec-main.device hgroup { width:100%; text-align:left; padding-left:5%; padding-right:35%; }
@media all and (max-width:1600px) {
	.sec-main.benefit .round_box { max-width: 600px; margin:0 auto; }
	.sec-main.benefit .round_box .flex_wrap { flex-direction:column-reverse; }
	.sec-main.benefit .round_box .txt { padding:var(--space-30); padding-bottom:0; margin-top:0; }
	.sec-main.device hgroup { padding-left:3%; }
}
@media all and (max-width:1200px) {
	.sec-main .title { font-size:4em; }
	.sec-main .desc { font-size:1.25em; }	
	.sec-main.main hgroup .title { font-size:6em; }
	.sec-main.device hgroup { padding-left:0%; }
}
@media all and (max-width:1000px) {
	.sec-main.main .inner { padding:0 var(--space-30); }
	.sec-main.main .img.back img { max-width:100%; }
	.sec-main.main .img.back { margin-top:0; }
	.sec-main.main .btn_box { top:0; }
}
@media all and (max-width:770px) {
	.sec-main.main { margin:-90px -30px 0; }
	.sec-main hgroup { margin:var(--space-30) 0; }
	.sec-main.device { aspect-ratio: auto; background: no-repeat bottom center / contain; }
	.sec-main.device hgroup { text-align:center; padding:0; padding-bottom:65%; }
}
@media all and (max-width:540px) {
	.sec-main .title { font-size:3em; }
	.sec-main .desc { font-size:16px; }
	.sec-main.main hgroup { text-align:center; }
	.sec-main.main hgroup .title { font-size:5em; }
	.sec-main.main .img.back { display:block; }
	.sec-main.main .btn_box { flex-direction:column; justify-content:center; position:static; transform:translateX(0); }	
	.sec-main.partner .flex_wrap.col5 { flex-direction: row; }
	.sec-main.partner .flex_wrap.col5 > .flex_box { width: calc((100% - 20px) / 2); } 
}

.sec-main.indicator .scroll_wrap { position:relative; display:flex; gap:var(--space-50); width:100%; height:auto; }
.sec-main.indicator .cate_wrap { position:sticky; top:90px; width:calc(33.3333% - 25px); height:100%; text-align:left;  }
.sec-main.indicator .cate_wrap .cate { position:relative; font-family:var(--font-title); font-size:16px; font-weight:700; transition:var(--transition-slow); }
.sec-main.indicator .cate_wrap .cate.on { padding-left:28px; transition:var(--transition-slow);
	background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color: transparent; -webkit-background-clip: text; }
.sec-main.indicator .cate_wrap .cate.on:after { font-family:var(--font-title);
	background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color: transparent; -webkit-background-clip: text; }
.sec-main.indicator .cate_wrap .cate + .cate { margin-top:var(--space-20); }
.sec-main.indicator .cate_wrap .cate.chart01.on:after{content:"01. ";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
.sec-main.indicator .cate_wrap .cate.chart02.on:after{content:"02. ";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
.sec-main.indicator .cate_wrap .cate.chart03.on:after{content:"03. ";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
.sec-main.indicator .cate_wrap .cate.chart04.on:after{content:"04. ";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
.sec-main.indicator .cate_wrap .cate.chart05.on:after{content:"05. ";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
.sec-main.indicator .cate_wrap .cate.chart06.on:after{content:"06. ";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
.sec-main.indicator .cont_wrap { width:calc(66.6666% - 25px); }
.sec-main.indicator .cont_wrap .cont + .cont { margin-top:var(--space-50); }
.sec-main.indicator .cont_wrap .cont .tit { margin-bottom:var(--space-20); }
.sec-main.indicator .cont_wrap .cont .img { margin-bottom:var(--space-20); }
.sec-main.indicator .cont_wrap .cont .txt { font-size:18px; }
.sec-main.indicator .cont_wrap .cont .list_ul.check { margin:var(--space-5) 0; }
@media all and (max-width:1600px) {
	.sec-main.indicator .scroll_wrap { gap:var(--space-30); }
	.sec-main.indicator .cate_wrap .cate { font-size:14px; }
	.sec-main.indicator .cate_wrap .cate.on { padding-left:24px; }
	.sec-main.indicator .cate_wrap .cate + .cate { margin-top:var(--space-10); }
	.sec-main.indicator .cate_wrap { width:calc(33.3333% - 15px); }
	.sec-main.indicator .cont_wrap { width:calc(66.6666% - 15px); } 
}
@media all and (max-width:1200px) {
	.sec-main.indicator .scroll_wrap { display:block; }
	.sec-main.indicator .cate_wrap,
	.sec-main.indicator .cont_wrap { width:100%; }
	.sec-main.indicator .cate_wrap { display:none; }
}
@media all and (max-width:1000px) {
	.sec-main.indicator .cont_wrap .cont .txt { font-size:16px; }
}
@media all and (max-width:540px) {
	.sec-main.indicator .cont_wrap .cont .txt { font-size:14px; }
}

.list_plan .plan_head { min-height:170px; display:flex; flex-direction:column; gap:var(--space-10); }
.list_plan .plan_head .tit { text-align:center; font-weight:600; margin-bottom:0; }
.list_plan .plan_head .price { text-align:center; }
.list_plan .plan_head .price del { font-size:1.5em; font-family:var(--font-title); }
.list_plan .plan_head .price strong { font-size:3em; font-family:var(--font-title); font-weight:800; }
.list_plan .plan_head .price b { font-size:1.25em; font-family:var(--font-title); }
.list_plan .plan_head .price span { color:var(--color-gray-200); }
.list_plan .plan_head .btn.lg { width:100%; }
.list_plan .plan_body dl { display:flex; font-size:16px; }
.list_plan .plan_body dl + dl { margin-top:var(--space-5); }
.list_plan .plan_body dl dt { width:2em; }
.list_plan .plan_body dl dd { flex:1; text-align:left; }
.list_plan .plan_body dl dd strong { font-family:var(--font-title); font-weight:600; color: #fff; }
.box_plan .plan_head .tit,
.box_plan .plan_head .title { text-align:left; }
.box_plan .plan_body dl { font-size:20px; }
.box_plan .plan_body dl + dl { margin-top:var(--space-10); }
/* .box_plan .plan_body dl dt span { font-size:1.25em; } */
.box_plan .btn { width:100%; margin-top:var(--space-20); }
.list_grade > li { position:relative; }
.list_grade > li:not(:first-child):before { content:'\e916'; font-family:var(--font-icon); display:inline-block; position:absolute; top:50%; transform:translate(-50%, -50%); left:-25px; font-size:32px; }
.list_grade .plan_head { display:flex; flex-direction:column; gap:var(--space-10); }
.list_grade .plan_head .tit { text-align:center; font-weight:600; margin-bottom:0; }
.list_grade .plan_head .price { text-align:center; }
.list_grade .plan_head .price strong { font-size:3em; font-family:var(--font-title); font-weight:800; }
.list_grade .plan_head .price b { font-size:1.25em; font-family:var(--font-title); }
.list_grade .plan_head .price span { color:var(--color-gray-200); }
.list_grade .plan_body dl + dl { margin-top:var(--space-15); }
.list_grade .plan_body dl dt { font-size:20px; font-weight:700; margin-bottom:3px; }
.list_grade .plan_body dl dt i { display:inline-block; margin-right:0.25em; }
.list_grade .plan_body dl dt i.material-symbols-rounded { vertical-align:-0.15em; }
.list_grade .plan_body dl dd { font-size:16px; }
.list_grade .plan_body dl dd strong { font-family:var(--font-title); font-weight:600; color: #fff; }
@media all and (max-width:1600px) {
	.list_grade { display:block !important; }
	.list_plan { flex-direction:column; }
	.list_plan.box_plan { flex-direction:column; }
	.list_plan.box_plan .flex_box { width:100%; }
	.box_plan .plan_head .tit,
	.box_plan .plan_head .title { text-align:center; }
	.list_plan > li,
	.list_grade > li { width:100% !important; max-width:600px; margin:0 auto; }
	.list_grade > li + li { margin-top:var(--space-50);}
	.list_grade > li:not(:first-child):before { top:-25px; left:50%; }
}
@media all and (max-width:1200px) {	
	.box_plan .plan_body dl { font-size:18px; }
	.list_grade > li + li { margin-top:var(--space-30);} 
	.list_grade > li:not(:first-child):before { top:-15px; font-size:24px; }	
}
@media all and (max-width:770px) {
	/*
	.list_grade > li + li { margin-top:var(--space-20);} 
	.list_grade > li:not(:first-child):before { top:-10px; font-size:24px; }
	*/
}
@media all and (max-width:540px) {
	.list_plan .plan_head { min-height:auto; }
	.list_plan .plan_body dl { font-size:14px; }
	.box_plan .plan_body dl { font-size:16px; }
	.list_grade .plan_body dl dt { font-size:18px; }
	.list_grade .plan_body dl dd { font-size:14px; }
	.list_grade .plan_body dl dt i { margin-right:0.15em; }
}

.txt-gradient	{ background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color: transparent; -webkit-background-clip: text; }
.txt-gold		{ background-image: linear-gradient(60deg, var(--color-gold) 20%, #F2DE7A 40%, var(--color-gold) 70%); color: transparent; -webkit-background-clip: text; }
.txt-silver		{ background-image: linear-gradient(60deg, var(--color-silver) 20%, #FFFFFF 40%, var(--color-silver) 70%); color: transparent; -webkit-background-clip: text; }
.txt-bronze		{ background-image: linear-gradient(60deg, var(--color-bronze) 20%, #F2BA7A 40%, var(--color-bronze) 70%); color: transparent; -webkit-background-clip: text; }
.txt-rose		{ background-image: linear-gradient(60deg, var(--color-rose) 20%, #FDD5CF 40%, var(--color-rose) 70%); color: transparent; -webkit-background-clip: text; }
.txt-champagne	{ background-image: linear-gradient(60deg, var(--color-champagne) 20%, #FDEFE2 40%, var(--color-champagne) 70%); color: transparent; -webkit-background-clip: text; }
.bd-gradient	{ border-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); border-image-slice: 1; border-width: 1px; }
.bd-gold		{ border-image: linear-gradient(60deg, var(--color-gold) 20%, #F2DE7A 40%, var(--color-gold) 70%); border-image-slice: 1; border-width: 1px; opacity:0.5; }
.bd-silver		{ border-image: linear-gradient(60deg, var(--color-silver) 20%, #FFFFFF 40%, var(--color-silver) 70%); border-image-slice: 1; border-width: 1px; opacity:0.5; }
.bd-bronze		{ border-image: linear-gradient(60deg, var(--color-bronze) 20%, #F2BA7A 40%, var(--color-bronze) 70%); border-image-slice: 1; border-width: 1px; opacity:0.5; }
.bd-rose		{ border-image: linear-gradient(60deg, var(--color-rose) 20%, #FDD5CF 40%, var(--color-rose) 70%); border-image-slice: 1; border-width: 1px; opacity:0.5; }
.bd-champagne	{ border-image: linear-gradient(60deg, var(--color-champagne) 20%, #FDEFE2 40%, var(--color-champagne) 70%); border-image-slice: 1; border-width: 1px; opacity:0.5; }
.border-gradient{ border-image-source: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); }
.border-gold	{ border-image-source: linear-gradient(60deg, var(--color-gold) 20%, #F2DE7A 40%, var(--color-gold) 70%); }
.border-silver	{ border-image-source: linear-gradient(60deg, var(--color-silver) 20%, #FFFFFF 40%, var(--color-silver) 70%); }
.border-bronze	{ border-image-source: linear-gradient(60deg, var(--color-bronze) 20%, #F2BA7A 40%, var(--color-bronze) 70%); }
.border-rose	{ border-image-source: linear-gradient(60deg, var(--color-rose) 20%, #FDD5CF 40%, var(--color-rose) 70%); }
.border-champagne{ border-image-source: linear-gradient(60deg, var(--color-champagne) 20%, #FDEFE2 40%, var(--color-champagne) 70%); }
.bg-shine		{ padding:1px !important; background-size: 400% 400% !important; animation: bg-shine 3s linear infinite; }
.bg-shine > *	{ height:100%; }
.bg-shine .bg-shine-inner { height:100%; border-radius: var(--space-20); background:#000; padding:var(--space-30); }
.bg-gradient	{ background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%) !important; }
.bg-gold		{ background-image: linear-gradient(60deg, var(--color-gold) 20%, #F2DE7A 40%, var(--color-gold) 70%) !important; }
.bg-silver		{ background-image: linear-gradient(60deg, var(--color-silver) 20%, #FFFFFF 40%, var(--color-silver) 70%) !important; }
.bg-bronze		{ background-image: linear-gradient(60deg, var(--color-bronze) 20%, #F2BA7A 40%, var(--color-bronze) 70%) !important; }
.bg-rose		{ background-image: linear-gradient(60deg, var(--color-rose) 20%, #FDD5CF 40%, var(--color-rose) 70%) !important; }
.bg-champagne	{ background-image: linear-gradient(60deg, var(--color-champagne) 20%, #FDEFE2 40%, var(--color-champagne) 70%) !important; }
@keyframes bg-shine {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@media all and (max-width:1200px) {
	.bg-shine > div { padding: var(--space-30) var(--space-20); }
}

.list_ul li { position:relative; text-align:left; word-break:keep-all; margin-left:1em; font-size:16px;  }
.list_ul li:before { content:''; position:absolute; left:-1em; top:0.75em; width:0.4em; height:1px; background:#fff; }
.list_ul li em { color: var(--color-pink); font-style: normal; }
.list_ul.check li { margin-left:1.5em; }
.list_ul.check li + li { margin-top: var(--space-5); }
.list_ul.check li:before { content:'\e928'; font-family:var(--font-icon); top:0; left:-1.5em; width:1em; height:1em; background:none;
    background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); color: transparent; -webkit-background-clip: text; }
.round_box p + .list_ul.check { margin-top:var(--space-10); }
@media all and (max-width:1000px) {
	.list_ul li { font-size:14px; }
}

/* login */
.section.login { height:100%; padding:var(--space-70);
	display:flex; align-items:center; background: url("../img/front/back_login_blur.jpg") no-repeat 50% 50% / cover; }
.section.login .inner.full { width:100%; height:100%; padding:0; min-height:calc(100vh - 140px); overflow:hidden;
	display:flex; box-shadow: 0 0 20px var(--color-trans-bk2); border-radius:var(--space-20); }
.section.login .bg_box { width:calc(100% - 24rem); background:url("../img/front/back_main_temp2.png") no-repeat 50% 50% / cover; }
.section.login .text_box { width:24rem; background:var(--color-trans-bk7); padding:var(--space-30) var(--space-50);
	display:flex; flex-direction:column; gap:var(--space-30); -webkit-backdrop-filter: blur(5px) brightness(102%); backdrop-filter: blur(5px) brightness(102%); }
.section.login .text_box .desc { text-align:center; margin-bottom: var(--space-15); font-size:16px; }
.section.login .button_box li .btn { width:100%; display:flex; }
.section.login .button_box li .btn .icon { display: inline-flex; align-self: center; width:20px; }
.section.login .or { position:relative; margin:var(--space-15) 0; border-top:1px dotted var(--color-trans-wh2); }
.section.login .or:before { content:'or'; position:absolute; top:50%; left:50%; width:30px; height:30px; line-height:28px; transform:translate(-50%, -50%);
	display:flex; align-items:center; justify-content:center; background:#000; border:1px solid var(--color-trans-wh2); border-radius:50%; color: var(--color-trans-wh7); font-size:12px; }
.section.login .login_box .btn { width:100%; }
.section.login .policy_box { margin-top:auto; display:flex; justify-content:space-evenly; color:var(--color-trans-wh2); }
.section.login .policy_box a { font-size:0.8em; color:var(--color-trans-wh7); transition: var(--transition-fast); }
.section.login .policy_box a:hover { color:#fff; }

@media all and (max-width:770px) {
	.section.login { min-height:100vh; padding:var(--space-30); display:block; }
	.section.login .inner.full { display:block; min-height:auto; }
	.section.login .bg_box { display:none; }
	.section.login .text_box { width:100%; padding:var(--space-30); gap: var(--space-20); }	
}

/* footer */
#footer {}

/* board */
.btn_bo_user { display:flex; gap:5px; }
.btn_bo_user li { background:transparent; margin:0; }
.btn_bo_user li .btn { width:100%; }
.btn_bo_user li .btn_b01 { background:var(--color-gray-300); }
.bo_v_nb li:hover { background:transparent; }
#bo_cate a { border-color:var(--color-gray-200); color:var(--color-gray-100); transition:var(--transition-fast); }
#bo_cate a:focus,
#bo_cate a:hover,
#bo_cate a:active { background:var(--color-gray-200); color:#fff; }
#bo_cate #bo_cate_on { background-image: linear-gradient(60deg, var(--color-sub) 10%, #7efff5 50%, var(--color-main) 90%); border-color:transparent; color:var(--color-gray-300); box-shadow:none; }
#bo_v,
#bo_v_top ul,
#bo_v header,
#bo_v_info,
#bo_v_atc { background:transparent; }
#bo_v header,
#bo_v_info,
#bo_v_atc,
#bo_list .td_chk { border-color:var(--color-gray-200); }
#bo_v_info,
#bo_v_info .sv_member { color:var(--color-gray-100); }
#bo_list_total { color:var(--color-gray-200); }
#bo_v_title .bo_v_tit { font-size:1.5em; }
#bo_v_ans,
#bo_v_ans #ans_datetime { background:var(--color-gray-300); border-color:var(--color-gray-200); }
#bo_list tbody tr { border-left:none; }
#bo_list tbody tr:hover { border-left:none; background:#000; }
#bo_list tbody .even td { background:transparent; }
.more_opt li { background:#fff; }
.sv_member { color:inherit; }
.sv_member,
.more_opt li a,
.cmt_btn { border-color:var(--color-gray-200); }
.cmt_btn { background:transparent; }
.cmt_btn b { color:var(--color-gray-100); }
.cmt_btn span.total { color:var(--color-sub); }
.cmt_btn span.total:after { background:var(--color-sub); }

/* table */
.tbl_wrap table,
.tbl_head01 td,
.tbl_head03 td { background:transparent; }
.tbl_wrap table,
.tbl_head01 thead th,
.tbl_head01 td,
.tbl_head03 thead th,
.tbl_head03 td { border-color:var(--color-gray-200); }
.tbl_head01 tbody tr:hover td { background:#000; }
.tbl_head01 thead th,
.tbl_head01 thead th a,
.tbl_head03 thead th { color:var(--color-gray-200); font-weight:600; font-family: var(--font-title); }
.tbl_head03 thead th { background:var(--color-gray-300); font-size:17px; letter-spacing:inherit; }
.tbl_head01 td { color:var(--color-gray-100); }

/* order */
#sod_frm .flex_wrap.od { gap:20px; }
#sod_frm .flex_wrap.od .sod_left { margin-right:0; width:calc(100% - 340px - 20px); }
#sod_frm section h2 { background:var(--color-gray-300); border-color:var(--color-gray-200); }
#sod_frm_orderer,
#sod_frm_taker { background:transparent; border-color:var(--color-gray-200); }
#sod_frm #sod_frm_pay h2 { background:transparent; }
#sod_frm #sod_bsk_tot li,
#sod_frm_pay .pay_tbl th,
#sod_frm_pay .pay_tbl td,
.sod_right .pay_tbl { background:transparent; border-color:var(--color-gray-200); }
#sod_frm #sod_bsk_tot li span { color:var(--color-gray-200); }
#sod_frm #sod_bsk_tot .sod_bsk_dvr:before,
#sod_frm #sod_bsk_tot .sod_bsk_coupon:before,
#sod_frm #sod_bsk_tot .sod_bsk_cnt strong { color:var(--color-em); }
#sod_frm #sod_bsk_tot .sod_bsk_sell,
#sod_frm #sod_bsk_tot .sod_bsk_coupon { border-color:var(--color-gray-200); }
#sod_frm #sod_bsk_tot .sod_bsk_dvr:before,
#sod_frm #sod_bsk_tot .sod_bsk_coupon:before { line-height:17px; background:var(--color-gray-300); border-color:var(--color-gray-200); }
#sod_frm_pay .pay_tbl th { color:var(--color-gray-200); }
.sod_right #od_tot_price { background:var(--color-gray-300); border-color:var(--color-gray-200); }
#od_tot_price strong { color:var(--color-em); }
.od_prd_list .total_prc { color:var(--color-em); }
.sod_opt li { color:var(--color-gray-200); }
#forderform .sod_right #sod_bsk_tot { background:transparent; border-color:var(--color-gray-200); }
#forderform .od_pay_buttons_el,
#display_pay_button { background:var(--color-gray-300); border-color:var(--color-gray-200); margin-top: var(--space-10); }
#display_pay_button { background:transparent; border:none; padding:0; display: flex; flex-wrap: wrap; gap: var(--space-10); }
#display_pay_button .btn_submit { border-color:transparent; border-radius:3px; background-size: 200% 100%; background-position: right center;
	font-family:var(--font-title); color:var(--color-gray-300); font-weight:600; transition: var(--transition-slow); 
	background-image: linear-gradient(60deg, var(--color-main) 0%, #7efff5 25%, var(--color-sub) 50%, #7efff5 75%, var(--color-main) 100%); }
#display_pay_button .btn_submit:focus,
#display_pay_button .btn_submit:hover { background-position: left center; }
#display_pay_button .btn01 { background-color:var(--color-gray-300); border-color:transparent; border-radius:3px; margin:0;  
	font-family:var(--font-title); color:var(--color-trans-wh7); font-weight:500; line-height:36px; transition: var(--transition-fast); }
#display_pay_button .btn01:focus { color: #fff; }
#display_pay_button .btn01:hover { box-shadow: 2px 4px 10px rgba(0,0,0,0.1); color: #fff; }
#sod_frm #sod_frm_pt_alert { color:var(--color-sub); }
#od_pay_sl .lb_icon { color:var(--color-gray-200); }
input#od_settle_paypal ~ .lb_icon { padding:0 15px 0 0; display:flex; align-items:center; justify-content:center; }
input#od_settle_paypal ~ .lb_icon .icon { display: inline-flex; align-self: center; height: 20px; }
#od_pay_sl input[type="radio"]:checked+.lb_icon { border: 3px solid var(--color-sub); }
.btn.status_01 { background:#edfbde; color:#8cc152; }
.btn.status_02 { background:#84c93a; color:#ffffff; }
.btn.status_03 { background:#e2f6f2; color:#16b494; }
.btn.status_04 { background:#e2eaf6; color:#3a8afd; }
.btn.status_05 { background:#3a8afd; color:#ffffff; }
.btn.status_06 { /*background:#ffffff;*/ color:var(--color-em); }
#sod_fin::after { display: block; content: ''; clear: both; }
#sod_fin .flex_wrap { gap:20px; }
#sod_fin .flex_wrap .sod_left { margin-right:0; width:calc(100% - 340px - 20px); }
#sod_fin td.td_imgsmall { width:100px; }
#sod_fin .sod_left th { background:transparent; border-color:var(--color-gray-200); color:var(--color-gray-200); }
#sod_fin .sod_left td { background:transparent; border-color:var(--color-gray-200); }
#sod_fin .sod_left h3,
#sod_fin #sod_bsk_tot li { background:var(--color-gray-300); border-color:var(--color-gray-200); }
#sod_fin #sod_bsk_tot li span { color:var(--color-gray-200); }
#sod_fin #sod_bsk_tot .sod_bsk_cnt strong { color:var(--color-em); }
.sod_right #sod_bsk_tot { border-color:var(--color-gray-200); }
#sod_fin_no { background:var(--color-sub); border-color:var(--color-sub); color:var(--color-gray-300); }
#sod_fin_tot li { background:var(--color-sub); border-color:var(--color-gray-200); color:var(--color-gray-300); }
#sod_fin_legend { background:var(--color-gray-300); border-color:var(--color-gray-200); color:var(--color-gray-100); }
@media all and (max-width:1200px) {
	#sod_frm .flex_wrap .sod_left,
	#sod_frm .flex_wrap .sod_right,
	#sod_fin .flex_wrap .sod_left,
	#sod_fin .flex_wrap .sod_right { width:100%; }
}

/* order mobile */
.sod_frm_mobile .sod_list .li_op_wr { min-height:100px; }
.sod_frm_mobile #sod_frm_taker h2,
.sod_frm_mobile #sod_frm_orderer h2 { background-color:transparent; border-color:var(--color-gray-100); padding:0 0 20px 0; }
.sod_frm_mobile #m_sod_bsk_tot { display:flex; flex-wrap:wrap; }
.sod_frm_mobile #m_sod_bsk_tot dt,
.sod_frm_mobile #m_sod_bsk_tot dd { float:none; }
.sod_frm_mobile .sod_list .li_prqty_sp:nth-child(3),
.sod_frm_mobile .sod_list .li_prqty_sp:nth-child(4),
.sod_frm_mobile #m_sod_bsk_tot .sod_bsk_dvr,
.sod_frm_mobile #m_sod_bsk_tot .sod_bsk_point,
.sod_frm_mobile#sod_frm #sod_frm_pt_alert { display:none; }
.sod_frm_mobile #sod_frm_pay .paypal { background:#fff; border: 1px solid #eceff4; border-top:none; padding:10px; }
.sod_frm_mobile #sod_frm_pay .paypal .lb_icon { display: inline-flex; }
.sod_frm_mobile #sod_frm_pay .paypal .lb_icon .icon { display: inline-flex; align-self: center; height: 20px; }
.sod_frm_mobile .btn_cancel,
.sod_frm_mobile .btn01 { background-color:var(--color-gray-300); border-color:transparent; border-radius:3px; margin:0;  
	font-family:var(--font-title); color:var(--color-trans-wh7); font-weight:500; transition: var(--transition-fast); }
#display_pay_button #show_req_btn { width:100%; }

/* order ccdesign 구독결제 */
.order_form_wrap { display:flex; flex-direction:column; gap:var(--space-30); }
.order_form_wrap .order_form_sec h3 { font-size:28px; font-weight:400; margin-bottom: var(--space-20); }
.order_form_wrap .order_form_sec.product .img { border:1px solid var(--color-trans-wh2) !important; border-radius:3px; overflow:hidden; }
.order_form_wrap .order_form_sec.product .text { flex:1; }
.order_form_wrap .order_form_sec.product .text .tit { font-size:24px; }
.order_form_wrap .order_form_sec.product .text .option { display:inline-block; }
.order_form_wrap .order_form_sec small,
.order_form_wrap .order_form_sec del { color:var(--color-gray-200); }
.order_form_wrap .order_form_sec.amount td { text-align:right; }
.order_form_wrap .order_form_sec .select-button { gap:var(--space-10); }
.order_form_wrap .order_form_sec .select-button li { flex:1; margin:0; }
.order_form_wrap .order_form_sec .select-button li label { padding: .5em .5em .5em 2em; border:2px solid transparent; }
.order_form_wrap .order_form_sec .select-button li input[type="radio"]:disabled + label,
.order_form_wrap .order_form_sec .select-button li input[type="checkbox"]:disabled + label { border-color:transparent; }
.order_form_wrap .order_form_sec .select-button li input[type="radio"]:checked + label,
.order_form_wrap .order_form_sec .select-button li input[type="checkbox"]:checked + label { border-color:var(--color-sub); }
.order_form_wrap .order_form_sec .select-button li input[type="radio"]:checked + label:before,
.order_form_wrap .order_form_sec .select-button li input[type="checkbox"]:checked + label:before { color:var(--color-sub); }
.order_form_wrap .order_form_sec .select-button li label.icon_svg { display:flex; align-items:center; padding-top:10px; padding-bottom:10px; }
.order_form_wrap .order_form_sec .select-button li label.icon_svg .icon { display: inline-flex; align-self: center; height: 20.25px; }
.order_form_wrap .order_form_sec strong.price { font-size:24px; }
.order_form_wrap .order_form_sec strong.price.em { color: var(--color-em); }
.order_form_wrap .order_form_sec strong.price.main { color: var(--color-main); }
.order_form_wrap .order_form_sec tbody tr { border-bottom:1px dotted var(--color-trans-wh2); }
.order_form_wrap .order_form_sec label .tit { font-size:1.25em; }
.order_form_wrap .btn_box { gap: var(--space-15); }
.order_form_wrap .btn_box li { flex:1; }
.order_form_wrap .btn_box li .btn { width:100%; }
@media all and (max-width:770px) {
	.order_form_wrap { gap:var(--space-20); }
	.order_form_wrap .order_form_sec h3 { font-size:1.5em; }
	.order_form_wrap .order_form_sec.product .text .tit,
	.order_form_wrap .order_form_sec strong.price { font-size:18px; }
}

/* mypage */
#smb_my_ov { margin-top:40px; }
#smb_my_ov .cou_pt dd a { color:var(--color-em); }
#smb_my_ov .my_ov_name { background:var(--color-gray-300); border-color:var(--color-gray-200); }
#smb_my_ov .cou_pt { display:flex; align-items:center; width:30em; }
#smb_my_ov .cou_pt dt { float:none; width:5.5em; }
#smb_my_ov .cou_pt dd { float:none; width:calc(50% - 5.5em); }
#smb_my_ov .op_area { background:transparent; border-color:var(--color-gray-200); color:var(--color-gray-100); display:flex; flex-wrap:wrap; }
#smb_my_ov .op_area dt { float:none; width:6.5em; }
#smb_my_ov .op_area dd { float:none; width:calc(50% - 6.5em); }
#smb_my_ovaddd { width:calc(100% - 6.5em) !important; }
#smb_my_act li a { color:var(--color-gray-300); }
#smb_my_wish h2 { border-color:var(--color-gray-200); }
#smb_my_wish li { background:transparent; border-color:var(--color-gray-200); }
#smb_my_wish .smb_my_date { color:var(--color-gray-200); }
#sod_ws li .info_link { margin-bottom:0; color:var(--color-gray-100); }
#sod_ws li .info_date { color:var(--color-gray-200); }
.sod_ws_img { width:100%; }
@media all and (max-width:770px) {
	#smb_my_ov .cou_pt { position:static; width:100%; flex-wrap:wrap; padding: 10px 15px; border:1px solid var(--color-gray-200); border-top:none; }
	#smb_my_ov .cou_pt dt { width:6.5em; line-height: 18px; margin: 3px 0; }
	#smb_my_ov .cou_pt dd { width:calc(50% - 6.5em); text-align:left; line-height: 18px; margin: 3px 0; }
}
@media all and (max-width:540px) {
	#smb_my_ov .cou_pt dd,
	#smb_my_ov .op_area dd { width:calc(100% - 6.5em); }
}

/* shop */
#sct_location { position:static; }
.sct_10 .sct_txt { border-color:var(--color-gray-200); }
#sit_ov_wrap { width:100%; max-width:1200px; gap:50px; }
#sit_ov { width:calc(100% - 585px - 50px); }
#sit_info { width:100%; display:flex; margin-left:auto; margin-right:auto; }
#sit_tab { width:calc(100% - 270px); }
@media all and (max-width:1600px) {
	#sit_ov_wrap { flex-direction:column; align-items:center; }
	#sit_pvi,
	#sit_ov { width:100%; }
	#sit_pvi { max-width:585px; }
}
@media all and (max-width:1200px) {
	#sit_info { flex-direction:column; align-items:center; }
	#sit_tab,
	#sit_buy { width:100%; }
	.sit_sel_option { height:auto; }
}

/* faq */
#faq_sch { background:var(--color-gray-300); }
#faq_wrap li { background:transparent; }
#faq_wrap li,
#faq_wrap li:first-child { border-color:var(--color-gray-200); }
#faq_wrap li h3 .tit_btn { background-color:#1e1e1e; font-size:24px;}
#faq_wrap li h3 .tit_bg { color:#fff; font-size:1em; }
#faq_wrap li h3:hover a,
#faq_wrap li h3:hover .tit_bg,
#faq_wrap li h3:hover .tit_btn { color:var(--color-sub); transition:var(--transition-fast); }
#faq_wrap li h3.faq_li_open a,
#faq_wrap li h3.faq_li_open .tit_bg,
#faq_con .con_inner .closer_btn { color:var(--color-main); }
#faq_con .con_inner .closer_btn { background-color:#1e1e1e; font-size:24px;}

/* register */
.register.dark_mode { max-width:1200px; }
.register_form_inner { background:transparent; border-color:var(--color-gray-200); }
#fregister section { border-color:var(--color-gray-200); }
#fregister h2,
#register_form h2 { background:var(--color-gray-300); border-color:var(--color-gray-200); }
#fregister p { background:var(--color-sub); }
#fregister p:before { background:var(--color-sub); }
#fregister_private table th	{ border-color:var(--color-gray-200); background:var(--color-gray-300); color:var(--color-gray-200); }
#fregister_private table td	{ border-color:var(--color-gray-200); }
#fregister_private div,
#register_form,
#find_info .new_win_con { background:transparent; border-color:var(--color-gray-200); }
.tooltip_icon { color:var(--color-sub); transition:var(--transition-fast); }
.tooltip_icon:hover { color:var(--color-main); }
.ranking-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 모달 관련 간단 예시 CSS */
.modal_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal_container { position: relative; width: 90%; max-width: 600px; margin: 50px auto; border: 2px solid #fff; background: #111; padding: 20px; border-radius: 8px; }
.modal_close_btn { position: absolute; top: 10px; right: 10px; cursor: pointer; color: #fff; font-weight: bold; }
.img_container { margin: 20px 0; }