@charset "utf-8";
@import url("https://use.typekit.net/zdq7ttr.css");

*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var,
b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section, details, summary {display: block;}
html {-webkit-text-size-adjust: none; text-size-adjust: none; width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #FFFFFF; font-weight: 400; line-height: 1; text-align: center; font-family: var(--ff); background-color: #000000; -webkit-font-smoothing: antialiased;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
img, picture, video, canvas, svg {display: block; max-width: 100%; line-height: inherit;}
h1, h2, h3, h4, h5, h6 {color: #FFFFFF; font-weight: 400; font-family: var(--ff); text-wrap: balance;}
a {color: #FFFFFF; font-weight: 400; text-decoration: none; font-family: var(--ff); display: inline-block; outline: none; cursor: pointer; transition: color 250ms ease-out, background-color 250ms ease-out, opacity 250ms ease-out, transform 250ms ease-out;}
a:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
input, button, textarea, select {font: inherit; outline:none;}
p {overflow-wrap: break-word;}
button {background-color:rgba(255, 255, 255, 0); cursor:pointer;}

:root {
  /* Typography - Font Family */
  --ff: 'nubb', sans-serif;
  --apo: 'apotek-extended', sans-serif;
  --rbt: 'roboto', sans-serif;

  /* Spacing (1.2rem grid) */
  --s-1: 1.2rem;
  --s-2: 2.4rem;
  --s-3: 3.6rem;
  --s-4: 4.8rem;
  --s-5: 6rem;
  --s-6: 7.2rem;
}


.mobile {display:none;}
.s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

.inner {max-width: 1116px; padding-left: 3rem; padding-right: 3rem; margin-left: auto; margin-right: auto;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.cha {position:absolute; opacity:0;}
.cha img {width:100%;}
.cha01 {left:7.4%; top:2.4rem; animation:fil 0.5s 0.1s forwards;}
.cha01:before {content:''; display:block; position:absolute; left:26%; bottom:14%; width: 103.334%; height: 35.36%; background:url('/images/common/event/redeem_code/cha01_eft.png') 0 0 no-repeat; background-size:100% auto; transform:scale(0); animation: burstLoop 1s 0.5s ease-out forwards;}
.cha02 {right:-3.2%; top:-15rem; animation:fir 0.5s 0.3s forwards}

/* ── Page Layout ── */
.page {position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; background:url('/images/common/event/redeem_code/bg.jpg') center center no-repeat; background-size:cover;}

/* ── Header ── */
.page-header {position: relative; z-index: 1; padding:14.4rem 3rem 0;}

/* ── Main ── */
.page__main {position: relative; z-index: 1; flex: 1; padding-bottom:22.8rem;}
.page__title {margin:5rem 0 10.6rem; position:relative; transform: scale(0); animation: burstLoop 1.5s ease-out forwards;}
.page__title:before {content:''; display:block; position:absolute; left:50%; bottom:-4.5rem; width:12.1rem; height:2.4rem; transform:translate(-50% , 0); background:url('/images/common/event/redeem_code/bar.png') 0 0 no-repeat; background-size:100% auto;}
.page__title img {margin-left: auto; margin-right: auto;}

/* ── Redeem Form ── */
.redeem-form {position:relative; z-index:1; background:#111 url('/images/common/event/redeem_code/ptn_texture.png') center bottom repeat; padding:10.8rem 11.4rem 4.8rem 8.4rem; margin-bottom:8.4rem; box-shadow:0 4rem 6rem rgba(0, 0, 0, 0.5);}
.redeem-form:before, .redeem-form:after {z-index:-1; content:''; display:block; position:absolute; top:-1.2rem; bottom:-1.2rem; width:calc(50% + 1.2rem);}
.redeem-form:before {left:-1.2rem; background:url('/images/common/event/redeem_code/frame_lt.png') 0 0 no-repeat, url('/images/common/event/redeem_code/frame_lb.png') 0 bottom no-repeat, url('/images/common/event/redeem_code/frame_lm.png') 0 center no-repeat, url('/images/common/event/redeem_code/frame_lr.png') 0 center repeat-y;}
.redeem-form:after {right:-1.2rem; background:url('/images/common/event/redeem_code/frame_rt.png') right 0 no-repeat , url('/images/common/event/redeem_code/frame_rb.png') right bottom no-repeat , url('/images/common/event/redeem_code/frame_rm.png') right center no-repeat, url('/images/common/event/redeem_code/frame_rr.png') right center repeat-y;}
.redeem-form h3 {text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000; position:absolute; left:50%; top:0; height:48px; transform:translate(-50% , 0); text-transform:uppercase; display:flex; align-items:center; justify-content:center; font-size:22px; color:#eebb77; letter-spacing:0.02em;}
.redeem-form__body {display: grid; grid-template-columns: max-content 1fr; align-items: center; text-align:left; gap:1.2rem;}
.form-field {display: contents;}
.form-field .form-field__label {position:relative; min-width:31.2rem; font-size:23px; color:#ffffff; text-transform:uppercase; letter-spacing:0.02em; padding-left:2rem;}
.form-field .form-field__label:before {position:absolute; content:''; display:block; width:0.6rem; height:1.8rem; background:#ffcc44; box-shadow:inset 0 0 0 1px #ff9933; top:50%; margin-top:-0.9rem; left:0;}
.form-field .form-field__label span {background:linear-gradient(to bottom, #cccccc , #999999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #000);}
.btn--primary {position:relative; text-transform:uppercase; font-size:35px; font-weight:700; font-family:var( --apo); margin:0 auto; cursor:pointer; width:48rem; height:12rem; display:flex; align-items:center; justify-content:center; background-position:0 0; background-color:rgba(0, 0, 0, 0); background-size:100% auto; background-image:url('/images/common/event/redeem_code/btn_redeem.png'); background-repeat:no-repeat;}
.btn--primary span {background:linear-gradient(to bottom, #442211 , #000); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 102, 0.5));}
.btn--primary:hover {background-position:0 100%;}
.btn--primary:hover span {background:#000;}
.btn--primary.is-disabled {background-image:url('/images/common/event/redeem_code/btn_redeem_off.png'); cursor: default;}
.btn--primary.is-disabled span {background:#220000; filter:drop-shadow(0 0 1rem rgba(255, 153, 153, 0.2));}
.btn--primary.is-disabled:hover {background-position:0 0;}
.btn--primary.is-disabled:hover span {background:#220000;}

.redeem-form__notice {margin-top:-1.2rem; text-align:left; position:relative; font-size:16px;  color:#ccc; letter-spacing:0.01rem; line-height:1.5; background:rgba(102, 0, 0, 0.5); border:0.2rem solid #ee3333; padding:1.6rem 2.4rem 1.6rem 5.4rem; border-radius:1.2rem; margin-bottom:3.6rem;}
.redeem-form__notice:before {content:''; display:block; position:absolute; top:1.8rem; left:2.2rem; width:20px; height:20px; background:url('/images/common/event/redeem_code/icon_info.png') 0 0 no-repeat; }
.redeem-form__notice span {color:#ff7777;}
.redeem-form__status {margin-top:3.2rem; font-size:14px; color:#999; letter-spacing:0.02em;}
.redeem-form__status font {color:#88dd66;}
.redeem-form__status .state {margin:7px; border-radius:12px; font-size:11px; font-weight:500; letter-spacing:0.02em; text-transform:uppercase; display:inline-flex; height:24px; padding:0 12px; border:1px solid #88dd66; color:#88dd66; background:rgba(136, 221, 102, 0.1); align-items: center; justify-content: center;}
.redeem-form__status.over font {color:#ff7777;}
.redeem-form__status.over .state {color:#ff7777; background:rgba(255, 119, 119, 0.1); border-color:#ff7777;}

.form-field__control {position:relative;}
.form-field__box {position:relative; height:6rem; border-radius:1.2rem;}
.form-field__box input {height:100%; width:100%; background:#151515; padding:0 3.4rem; font-size:23px; color:#ffffff; letter-spacing:-0.01em; border-radius:1.2rem; border:0.2rem solid #333333;}
.form-field__box input#player-id {padding-right:6rem;}
.form-field__box input:focus {color:#eebb77; border-color:#eebb77; background:#000;}
.form-field__box input:not(:placeholder-shown):not(:disabled):not([readonly]) {background:#000; border-color:#666;}
.form-field__box input:-webkit-autofill, .form-field__box input:-webkit-autofill:hover, .form-field__box input:-webkit-autofill:focus, .form-field__box input:-webkit-autofill:active {-webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #000 inset; caret-color:#fff; transition: background-color 5000s ease-in-out 0s;}
.form-field__box .btn_box_login {transition: all ease-in-out 0.2s; left:0; display:flex; align-items:center; width:100%; height:100%; padding:0 3.4rem; font-size:23px; border-radius: 1.2rem; color:#ff7777; border:0.2rem solid #ee5555; box-shadow:inset 0 0 10rem rgba(255, 0, 0, 0.4); background-color:#000000;}
.form-field__box .btn_box_login:before {right:2.2rem; top:50%; margin-top:-1.2rem; transition:none; content:''; display:block; position:absolute; width:6rem; height:2.4rem; background-repeat: no-repeat; background-position: 0 0; background-size:100% auto; background-image:url('/images/common/event/redeem_code/img_arr.png')}
.form-field__box .btn_box_login:hover {border-color:#eebb77; box-shadow:inset 0 0 10rem rgba(238, 187, 119, 0.4); color:#eebb77;}
.form-field__box .btn_box_login:hover:before {background-position:0 100%;}
.form-field--active .form-field__input {display:none;}
.form-field--active.form-field--logged .btn_box_login {display:none;}
.form-field--active.form-field--logged .form-field__input {display:block;}
.form-field__box input[readonly] {color:#999; -webkit-text-fill-color:#999; background:rgba(51, 51, 51, 0.8); border:none;}
.form-field__box input[readonly]#player-id {background:rgba(51, 51, 51, 0.8) url('/images/common/event/redeem_code/img_lock.png') right 2.4rem top 50% no-repeat;}
.form-field__box .timer {position:absolute; left:3.4rem; top:50%; transform:translate(0 , -50%); font-size:23px; color:#999999;}
.form-field__box .timer font {color:#eebb77;}
.form-field--verify .form-field__control {display:flex;}
.form-field--verify .form-field__box {width:calc((100% - 1.2rem) / 2); margin-right:1.2rem;}
.form-field--verify .form-field__box input {text-align:center;}
.form-field--verify .verify {word-break: break-all; text-align: center; font-size:23px; color:#bb4444; letter-spacing:-0.01em; display:flex; align-items:center; justify-content:center; width:calc((100% - 1.2rem) / 2); height:6rem; background:url('/images/common/event/redeem_code/ptn.png') 0 0 repeat , #220000; overflow:hidden; border-radius:1.2rem; border:0.2rem solid #bb4444; box-shadow:inset 0 0 4rem rgba(255, 0, 0, 0.2);}

.form-field__box input[disabled]#redemption-code {padding-right:6rem; background:#151515 url('/images/common/event/redeem_code/img_lock.png') right 2.4rem top 50% no-repeat;}

.btn_help {font-size:0; color:transparent; width:36px; height:36px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/redeem_code/btn_help.png'); border-radius:50%;}
.btn_help:hover {background-position:0 100%;}

.btn_refresh {font-size:0; color:transparent; width:34px; height:34px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/redeem_code/btn_refresh.png'); border-radius:50%;}
.btn_refresh:hover {background-position:0 100%;}

.form-field__control .btn_help {position:absolute; top:50%; right:0; margin-top:-18px;}
.form-field__control .btn_refresh {position:absolute; top:50%; right:0; margin-top:-17px;}

/* ── Site Footer ── */
footer {width: 100%; padding: 9.6rem 2.4rem 9rem; font-family: 'Roboto'; z-index: 2; background:#000;}
footer > img {margin:0 auto 2.4rem;}
footer .footer {font-size: 14px; color: #cccccc; position: relative; letter-spacing: 0.02em;}
footer .footer .cs > a {color: #ee2222; font-family: 'Roboto'; text-decoration: underline;}
footer .footer .cs > a:hover {text-decoration: none;}
footer .footer .copy {margin-top: 1rem; font-size: 14px; color: #777777;}
footer .footer .age {margin-bottom: 2rem;}
footer .footer .age img {max-width: 6rem; margin:0 auto;}
footer .geo_credit {font-size:11px; color:#b7b7b7; letter-spacing:0.01em; font-family: 'Roboto';  text-transform: uppercase; margin-top:2.4rem;}
footer .geo_credit a {color:#fff; text-decoration: underline;}
footer .geo_credit a:hover {text-decoration: none;}

/* popup */
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background:rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 90; display:none;}

.pop_up {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; display: none;}
.pop_up .pop_layout {width:600px; left:50%; top:50%; transform:translate(-50% , -50%); z-index: 99; position: relative; position:relative; }
.pop_up .pop_con {position:relative; background:#111 url('/images/common/event/redeem_code/ptn_texture.png') center bottom repeat; z-index:1; padding: 22px 16px 7.2rem;}
.pop_up .pop_con:before, .pop_up .pop_con:after {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; width:50%;}
.pop_up .pop_con:before {left:0; background:url('/images/common/event/redeem_code/pop_lt.png') 0 0 no-repeat, url('/images/common/event/redeem_code/pop_lb.png') 0 bottom no-repeat, url('/images/common/event/redeem_code/pop_lm.png') 0 0 repeat-y;}
.pop_up .pop_con:after {right:0; background:url('/images/common/event/redeem_code/pop_rt.png') right 0 no-repeat , url('/images/common/event/redeem_code/pop_rb.png') right bottom no-repeat , url('/images/common/event/redeem_code/pop_rm.png') right 0 repeat-y;}
.pop_up .pop_close {z-index:2; right:-5.9rem; top:6rem; position:absolute; cursor:pointer; width:6rem; height: 7.2rem; font-size: 0; text-indent: -99999px; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/redeem_code/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 100%;}
.pop_up .txt {font-size:23px; color:#cccccc; line-height:1.73; text-transform:uppercase; padding:3.6rem; word-break: break-word;}
.pop_up .txt span {color:#eebb77;}
.pop_up .btns {font-size:0;}
.pop_up .btns > button {font-size:20px; color:#999999; font-weight:300; letter-spacing:0.02em; text-transform:uppercase; margin:0 1.2rem; display:inline-flex; align-items:center; justify-content:center; vertical-align:top; width:168px; height:60px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_up .btns .btn_cancel {background-image:url('/images/common/event/redeem_code/btn_cancel.png');}
.pop_up .btns .btn_ok {background-image:url('/images/common/event/redeem_code/btn_ok.png');}
.pop_up .btns > button:hover {color:#ffdd99; background-position:0 100%;}

.pop_help .pop_con {padding-top:11px; padding-bottom:22px;}
.pop_help .pop_layout {width:840px;}
.pop_help .explan img {margin:0 auto;}
.pop_help h3 {font-size:23px; color:#cccccc; text-transform:uppercase; letter-spacing:0.02em; display:flex; height:62px; align-items:center; justify-content:center; gap:1.2rem; border-bottom:0.2rem solid #999999; position:relative;}
.pop_help h3:before {content:''; display:block; position:absolute; left:0; bottom:-0.2rem; right:0; background:url('/images/common/event/redeem_code/tit_bar_l.png') 0 0 no-repeat , url('/images/common/event/redeem_code/tit_bar_r.png') right 0 no-repeat; height:1.2rem;}
.pop_help h3 span {color:#eebb77;}
.pop_help .explan {padding:3.6rem 1rem 3.6rem 3.2rem; text-align:left; font-size:15px; letter-spacing:0.02em; line-height:1.87;}
.pop_help .explan .scroll {max-height:47rem; overflow-y:auto; padding-right:1.4rem;}
.pop_help .explan .scroll::-webkit-scrollbar {width:8px;}
.pop_help .explan .scroll::-webkit-scrollbar-track {background:none;}
.pop_help .explan .scroll::-webkit-scrollbar-thumb {border-radius: 4px; background: rgba(255, 204, 68, 0.8); box-shadow:inset 0 0 0 1px #ff9933;}
.pop_help .explan .info {background:#222222; border-radius:1.2rem; padding:2.4rem 3rem;}
.pop_help .explan .num {padding-left: 24px; text-indent: -24px; color:#eebb77; margin-bottom:2rem;}
.pop_help .explan .num span {text-indent:0; margin-right:0.4rem; position:relative; top:-1px; font-size:11px; color:#000000; font-weight:700; letter-spacing:0; width:16px; height:16px; border-radius:0.4rem; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; background:#ffcc44; border:1px solid #ff9933;}
.pop_help .explan li {margin-top:2.4rem;}
.pop_help .explan .img {background:#050505; border-radius:1.2rem; border:0.2rem solid #333333; padding:2.2rem; position:relative;}
.pop_help .explan .img:before {content:''; display:block; position:absolute; top:0.2rem; bottom:0.2rem; left:0.2rem; right:0.2rem; border-radius:0.8rem; border:0.2rem solid #333333;}

.pop_login .login_form {padding:3.6rem 4.4rem 0;}
.pop_login .login_form .field {margin-bottom:1.8rem;}
.pop_login .login_form .field:last-of-type {margin-bottom:2.4rem;}
.pop_login .login_form .field label {font-weight: 500; font-size:12px;text-transform:uppercase; letter-spacing:0.04em; position:relative; display:block; text-align:left; margin-bottom:10px; background: linear-gradient(to bottom, #cccccc, #999999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #000);}
.pop_login .form-field__box input {padding:0 2.4rem;}
.pop_login .btns {margin-top:2rem;}
.pop_login .btns >.btn_login {width:100%; margin:0 auto; padding-top:0;}
.pop_login .btn_login:before, .pop_login .btn_login:after {flex-shrink:0; content:''; display:block; width:6rem; height:6rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/redeem_code/btn_o_l.png');}
.pop_login .btn_login:after {transform:scaleX(-1);}
.pop_login .btn_login span {flex:1; background:url('/images/common/event/redeem_code/btn_o_c.png') 0 0 repeat-x; background-size:auto 200%; display:flex; align-items: center; justify-content: center; height:100%; color:#eecc55; letter-spacing: 0.03em;}
.pop_login .btn_login:hover:before, .pop_login .btn_login:hover:after {background-position:0 100%;}
.pop_login .btn_login:hover span {background-position:0 100%; color:#ffdd99;}
.pop_login .links {margin-top:2.4rem; font-size:14px; letter-spacing:0.01em; display:flex; align-items:center; justify-content:space-between; gap:2.4rem;}
.pop_login .links a {transition: all ease-in-out 0.2s;}
.pop_login .links .forgot {position:relative; color:#cccccc; text-decoration:underline;}
.pop_login .links .forgot:hover {color:#eebb77;}
.pop_login .links .go_join {font-size:11px; color:#eebb77; font-weight:500; text-transform: uppercase; border-radius: 6px; background: #000000; border:1px solid #eebb77; padding:0 1.2rem; height:24px; display:inline-flex; align-items: center; justify-content: center;}
.pop_login .links .go_join:hover {box-shadow:inset 0 0 10rem rgba(238, 187, 119, 0.2);}

/* loading */
.loading {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); position:fixed; z-index:9999; top:0;}
.loading .load {top:50%; transform:translate(0 , -100%); width:60px; height:60px; margin:0 auto;  position: relative; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;}
.loader {position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; width: 100px; height: 100px;}
.loader span { border: 10px solid transparent; background-image: linear-gradient(#000, #000),  linear-gradient(to right, rgba(255, 555, 255, 0.4) 65%,  #fff 100%); background-origin: border-box; background-clip: content-box, border-box;  border-radius: 50%; display: inline-block; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}
.loader span+ font {position: relative; font-size:10px; line-height:100px; font-family:'Roboto'; font-weight:700; display:block;  text-align:center; color:#fff; text-transform:uppercase;}



.captcha > div {text-align:left;}
.captcha > div > div {position: relative; left: 50%; transform: translate(-50% , 0); display: inline-block;}
/* ── Responsive ── */

@media (max-width: 2200px) {
.cha01 {left:0;}
.cha02 {right:-12%;}
}

@media (max-width: 1800px) {
.page-header {padding-top:8.4rem;} 
.page__main {padding-bottom:8.4rem;}
.cha02 {max-width:700px; top:auto; bottom:0;}
}

@media (max-width: 1500px) {
.cha01 {left:-3%; width:500px; top:auto; bottom:-10%;}
.cha02 {width:610px; right:-8%;}
}

@media (max-width: 1280px) {
.form-field .form-field__label {min-width:0;} 
.page__title {padding:0 5rem;}
.redeem-form {padding-left:6rem; padding-right:6rem;}
.page__main {padding-bottom:20%;}
.cha01 {width:23%; left:2%; bottom:-15%;}
.cha02 {width:27%; right:1%; bottom:-8%;}
.cha01:before {bottom:30%;}
}

@media (max-width: 1023px) {
.redeem-form__body {display:block;} 
.form-field .form-field__label {display:block; margin-bottom:1.2rem;}
.form-field {display:block; margin-bottom:3.6rem;}
.form-field:last-child {margin-bottom:0;}
.form-field__control {padding-right:0;}
.form-field--verify {padding-right:48px;}
.form-field__control .btn_refresh {right:-48px;}
.form-field__control .btn_help {right:1.2rem;}
.form-field--active .form-field__box input {padding-right:54px;}

.pop_up .pop_layout {left:3rem; right:2rem; transform:translate(0 , -50%); width:calc(100% - 11rem);}
}

@media (max-width: 768px) {
html {font-size: 32%;}
body {font-size:2.3rem;}
.mobile {display:block;}

.bi img {max-width:24rem;}
.redeem-form:before, .redeem-form:after {background-size:72.4rem auto, 72.4rem auto, 5.2rem auto, 5.2rem auto;}

.redeem-form h3 {font-size:2.7rem; height:26px;}
.form-field .form-field__label:before {margin-top:-1.2rem;}
.redeem-form__notice {padding-left:40px; font-size:2.5rem; line-height:2.3;}
.redeem-form__status {font-size:2.3rem;}
.redeem-form__status .state {height:20px;}

.form-field .form-field__label {font-size:3.2rem;}
.form-field__box {height:40px;}
.form-field__box input {font-size:3.2rem; padding:0 2.4rem;}
.form-field__box .btn_box_login {font-size:3.2rem; padding:0 2.4rem;}
.form-field__box .timer {font-size:3.2rem; left:2.4rem;}
.form-field--verify .verify {font-size:3.2rem; height:40px;}
.btn--primary {font-size:4.4rem;}
.form-field__control .btn_help {width:30px; height:30px; margin-top:-15px;}
.form-field--verify {padding-right:40px;}
.form-field__control .btn_refresh {width:30px; height:30px; margin-top:-15px; right:-40px;}
.form-field--active .form-field__box input {padding-right:40px;}
.captcha > div > div {transform: translate(-50%, 0) scale(0.9);}


footer > img {width: 100px;}
footer .footer {font-size: 2.3rem;}
footer .footer .copy {font-size: 2.3rem;}
footer .geo_credit {font-size:1.9rem;}


.pop_up .txt {font-size:3.2rem; line-height:1.4;}
.pop_help h3 {font-size:3.2rem; height:48px;}
.pop_help .explan {font-size:2.3rem; line-height:1.4;}
.pop_help .explan .num span {top:0;}
.pop_up .btns > button {font-size:2.9rem; width:112px; height:40px; padding-top: 3px;}
.pop_login .links {font-size:2.3rem;}
.pop_login .login_form .field label {font-size:2.5rem;}
.pop_login .btn_login:before, .pop_login .btn_login:after {width:40px; height:40px;}
.pop_login .links .go_join {font-size:2.1rem;}

.cha01 {bottom:-3%;}
.cha01:before {bottom:15%;}
.cha02 {bottom:0;}

}

@media (max-width: 560px) {
.form-field--verify .form-field__control {display:block;}
.form-field--verify .form-field__box {margin-right:-40px; width:auto;}
.form-field--verify .verify {width:100%; margin-top:1.2rem;}
.form-field__control .btn_refresh {top:auto; bottom:0.6rem;}

.pop_help h3:before {background-size:5.4rem auto;}
.pop_up .pop_con:before, .pop_up .pop_con:after {background-size:49.4rem auto, 49.4rem auto, 1.6rem auto;}
.pop_up .pop_con {padding:2.2rem 1.6rem 7.2rem;}
.pop_help .pop_con {padding-top:1.1rem; padding-bottom:2.2rem;}

.pop_up .txt span {display:block;}
.pop_up .txt br {display:none;}
}  


@keyframes fil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fir {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes burstLoop {
  0%   { transform: scale(0); opacity: 1; filter: brightness(2); }
  20%  { transform: scale(1.15); opacity: 1; filter: brightness(1.4); }
  45%  { transform: scale(0.95); opacity: 1; filter: brightness(1); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}