@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");



/* [tag reset] ___________________________________________________________________________________________________ */

html, body { margin:0; padding:0; font-size:1vw; line-height:1.5; color: #fff; word-break: keep-all; }
article, aside, details, figcaption, div, footer, header, hgroup, main, nav, section, summary { display:block; }
section, nav, header, aside, footer, menu { display:block; }
input, textarea, select, td { font-size:3.5rem; }

* { -webkit-text-size-adjust: none; }

dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, menu, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-spacing:0; border-collapse:collapse; width:100%; }
address, caption, cite, code, dfn, th, var { font-style:normal; }
th { font-weight:normal; }

ol, ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
hr, legend, caption { display:none; }
img, input, select, textarea { vertical-align:top; }
img, fieldset { border:none; }
a { text-decoration:none; }
* { webkit-text-size-adjust:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.mobile_view { display:none; }






/* common ___________________________________________________________________________________________________ */
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}
.ellipsis_2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ellipsis_3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.txt_ac { text-align:center; }
.txt_ar { text-align:right; }

.gra_txt { background: linear-gradient(to right, #DA022E, #E86933); color: transparent; -webkit-background-clip: text; position: relative; }
.gra_btn { display: block; padding:0 1rem; line-height:14rem; color: #fff; border-radius: 2rem; background: linear-gradient(to right, #DA022E, #E86933); text-align: center; }
.gra_btn2 { display: block; padding:0 1rem; line-height:14rem; color: #fff; border-radius: 2rem; background: linear-gradient(to right, #325BDA, #6033E8); text-align: center; }

.flex { display: flex; justify-content: space-between; align-items: center; gap:3rem; }
.flex .each { width:100%; }

.dot_list { margin:5rem 1rem; }
.dot_list li { padding-left:2.3rem; text-indent:-2.3rem; font-size:3rem; color:#888; }

body {
    font-family:"Pretendard Variable", Pretendard, 'Noto Sans KR', sans-serif, Arial, "Malgun Gothic";
    background:#000;
    margin: 0;
	color:#fff;
	font-size:3.5rem;
} 


section { padding:10rem 5rem; }
.top_area { position:relative; border-radius:0 0 8rem 8rem; background:#1e1e1e; z-index:0; overflow:hidden; }
.top_area2 { border-radius:0; }
.top_area:before { display:block; position:absolute; top:-10rem; left:-10rem; content:""; width:10rem; height:10rem; background:rgba(156,57,64,0.3); box-shadow:0 0 50rem 50rem rgba(156,57,64,0.3); border-radius:100rem; z-index:-1; }
.top_area:after { display:block; position:absolute; bottom:-2rem; right:-12rem; content:""; width:10rem; height:10rem; background:rgba(156,57,64,0.3); box-shadow:0 0 30rem 30rem rgba(156,57,64,0.3); border-radius:100rem; z-index:-1; }
.top_area2:before { background:rgba(189,190,206,0.3); box-shadow:0 0 30rem 30rem rgba(189,190,206,0.3);  }
.top_area2:after { display:none; }
.top_area .tit { line-height:1; margin-bottom:1rem; }
.top_area .tit span { font-size:4.5rem; font-weight:700; }
.top_area2 .tit span { font-size:4rem; }
.top_area .tit strong { display:inline-block; font-size:3rem; vertical-align:top; line-height:4.5rem; font-weight:700; }
.top_area .txt_01 { font-size:8rem; font-weight:700; padding:2.5rem 0; }
.top_area2 .txt_01 { font-size:5rem; margin-bottom:7rem; }
.top_area .txt_02 { font-size:4.5rem; }
.top_area2 .txt_02 { padding:1.5rem 0; font-weight:600; }
.top_area .icon_list { margin-top:6rem; }
.top_area .icon_list li { padding-left:9rem; line-height:7rem; margin-top:2rem; }
.top_area .icon_list li.icon_1 { background:url('/images/benefits/list_icon_1.svg') left center no-repeat; }
.top_area .icon_list li.icon_2 { background:url('/images/benefits/list_icon_2.svg') left center no-repeat; }
.top_area .icon_list li.icon_3 { background:url('/images/benefits/list_icon_3.svg') left center no-repeat; }
.top_area .icon_list li:first-child { margin-top:0; }
.top_area .icon_box { margin-top:4rem; }
.top_area .icon_box .box { margin-top:2rem; padding:3rem 5rem 3rem 22rem; border-radius:2rem; text-align:left; }
.top_area .icon_box .box span { display:block; color:#b0b0b0; }
.top_area .icon_box .box strong { display:block; font-size:4rem; }
.top_area .icon_box .box em { display:block; font-style:normal; font-size:3rem; color:#6b6b6b; }
.top_area .icon_box .box_1 { background:#2B2B2B url('/images/benefits/benefit_1.svg') 5rem center no-repeat; background-size:12rem auto; }
.top_area .icon_box .box_2 { background:#2B2B2B url('/images/benefits/benefit_2.svg') 5rem center no-repeat; background-size:12rem auto; }
.top_area .icon_box .box_3 { background:#2B2B2B url('/images/benefits/benefit_3.svg') 3.6rem center no-repeat; background-size:13rem auto; }
.top_area .caution { text-align:left; }


.type_area { margin-top:2rem; padding-bottom:24rem; border-radius:8rem 8rem 0 0; background:#1e1e1e; }
.type_area .pay_type.month { margin-top:6rem; padding-top:6rem; border-top:1px solid #3a3a3a; }
.type_area .pay_type .tit { font-size:4rem; font-weight:600; }

.type_area .pay_type .radio_btn { margin-top:3rem; position:relative; }
.type_area .pay_type .radio_btn.has_tag { margin-top:5.5rem; }
.type_area .pay_type .radio_btn .tag { position:absolute; top:-2.75rem; right:4rem; line-height:5.5rem; padding:0 1.5rem; font-size:3rem; }
.type_area .pay_type .radio_btn input[type="radio"] { display:none; }
.type_area .pay_type .radio_btn label { display:block; border-radius:2rem; border:1px solid #3a3a3a; cursor:pointer; overflow:hidden; }
.type_area .pay_type .radio_btn .box { padding:4rem 4rem 4rem 14rem; background:#3a3a3a url('/images/benefits/radio_off.svg') 4rem center no-repeat; }
.type_area .pay_type .radio_btn input[type="radio"]:checked+label { 
	border: 1px solid transparent;
	background:
		linear-gradient(#1a1a1a, #1a1a1a) padding-box,
		linear-gradient(250deg, #E86933,  #DA022E) border-box;
}
.type_area .pay_type .radio_btn input[type="radio"]:checked+label .box { background:#3a3a3a url('/images/benefits/radio_on.svg') 4rem center no-repeat; }
.type_area .pay_type .radio_btn .box.pc_box { padding-left:4rem; border-radius:2rem; background-image:none; }
.type_area .pay_type .radio_btn .box.pc_box .each.pc { padding-left:8rem; background:#3a3a3a url('/images/benefits/icon_pc.svg') left top no-repeat; }
.type_area .pay_type .radio_btn .flex .each { font-size:4.5rem; font-weight:700; }
.type_area .pay_type .radio_btn .desc { color:#b0b0b0; }
.type_area .pay_type .radio_btn .pc_box .desc { font-weight:normal; font-size:3.5rem; }
.type_area .pay_type .radio_btn .pc_box .desc strong { font-weight:normal; color:#4589FF; }
.type_area .pay_type .radio_btn .pc_box .flex .each.btn { text-align:right; width:55%; }
.type_area .pay_type .radio_btn .pc_box .flex .each a { display:block; line-height:9.5rem; color:#fff; background:#4589FF; border-radius:2rem; text-align:center; }
.type_area .agree { margin-bottom:4rem; }
.type_area .agree.pc_agree { margin-top:5rem; padding:3.5rem; border-radius:2rem; background:#2b2b2b; }
.type_area .agree .tit span { display:inline-block; padding-right:5rem; background:url('/images/benefits/arrow_r.svg') right center no-repeat; }
.type_area .agree p { font-size:3rem; color:#b0b0b0; }
.type_area .agree p a { color:#d1d1d1; text-decoration:underline; }

.caution { margin-top:5rem; }
.caution .toggle_btn { display:inline-block; position:relative; padding:0 5.5rem 0 5rem; color:#fff; font-weight:700; background:url('/images/benefits/icon_caution.svg') left center no-repeat; background-size:3.5rem auto; }
.caution .toggle_btn:after { position:absolute; top:0; right:0; display:block; content:""; width:2.5rem; height:100%; background:url('/images/benefits/toggle_arrow.svg') right center no-repeat; background-size:100% auto; }
.caution .toggle_btn.on:after { transform:rotate(180deg); }
.caution .toggle_box { display:none; }
.caution .dot_list { margin:2rem 1rem; }

.quick_menu { position:relative; height:14.5rem; }
.quick_menu .inner { position:absolute; top:0; left:0; width:100%; }
.quick_menu.fix .inner { position:fixed; z-index:99; }
.quick_menu .inner ul { padding:0 5rem; background:#1e1e1e; border-radius:0 0 4rem 4rem; }
.quick_menu li { font-size:4rem; text-align:center; cursor:pointer; }
.quick_menu li span { display:inline-block; padding:0 1.5rem; line-height:14rem; border-bottom:0.8rem solid #1e1e1e; color:#b0b0b0; }
.quick_menu li.on span { color:#fff; border-bottom:0.8rem solid #DE2E3A; font-weight:700; }

.reward_item { padding-top:7rem; padding-bottom:24rem; }
.reward_item_list { position:relative; }
.reward_item_list:after { display:block; content:""; width:1.6rem; height:1.6rem; background:#4a4a4a; position:absolute; bottom:0; left:3.8rem; border-radius:2rem; }
.reward_item_list .each { margin-bottom:3rem; }
.reward_item_list .each .item_outer { margin-left:4.5rem; padding:0 0 4rem 7rem; border-left:1px solid #4a4a4a; position:relative; }
.reward_item_list .each .item_outer:before { display:block; content:""; width:10rem; height:3rem; background:#0b0b0b; position:absolute; top:0; left:-5rem; }
.reward_item_list .each .item_outer:after { display:block; content:""; width:1.6rem; height:1.6rem; background:#FF3007; position:absolute; top:0; left:-0.8rem; border-radius:2rem; }
.reward_item_list .each .month  { padding-bottom:2rem; font-size:4rem; color:#fff; font-weight:600; }
.reward_item_list .each .item { position:relative; margin-bottom:4rem; }
.reward_item_list .each .item .cate { position:absolute; top:2.5rem; left:2.5rem; }
.reward_item_list .each .item .cate img { height:6rem; }
.reward_item_list .each .item .thumb img { width:100%; border-radius:2rem 2rem 0 0; }
.reward_item_list .each .item .thumb img.over,
.reward_item_list .each .item .thumb:hover img.out { display:none; }
.reward_item_list .each .item .thumb:hover img.over { display:block; }
.reward_item_list .each.coming .item .thumb img { border-radius:2rem; }
.reward_item_list .each .item .info { padding:5rem; border-radius:0 0 2rem 2rem; background:#2b2b2b; }
.reward_item_list .each .item .info .machine { margin-bottom:1.5rem; }
.reward_item_list .each .item .info .machine span { display:inline-block; line-height:4.5rem; border-radius:0.5rem; font-size:2.75rem; padding:0 2rem; }
.reward_item_list .each .item .info .machine span.vss { background:#541B1D; }
.reward_item_list .each .item .info .machine span.vsx { background:#DE2E3A; }
.reward_item_list .each .item .info .machine span.max { background:#0b0b0b; }
.reward_item_list .each .item .info .name { color:#e8e8e8; font-weight:700; }




.bottom_fix_btn { position:fixed; bottom:0; left:0; width:100%; }
.bottom_fix_btn .inner{ padding:5rem; background:rgba(11,11,11,0.72); backdrop-filter: blur(8px); }
.bottom_fix_btn a { font-size:4.5rem; font-weight:700; }
.bottom_fix_btn a.disabled { background:#4a4a4a !important; color:#b0b0b0 !important; }



/* pc only css */
@media all and (min-width:769px) {
	html { font-size:4px; }
    #wrap,
	.bottom_fix_btn .inner,
	.quick_menu.fix .inner ul { width:475px; margin:0 auto; }
}