/*!
 * @Build Date :: 2024-11-26 11:15:28
 * @Project :: account-login
 * @Author :: ncsoft
 */
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: sans-serif
}

body {
    margin: 0
}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
    display: block
}

audio,canvas,progress,video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

[hidden],template {
    display: none
}

a {
    background-color: transparent
}

a:active,a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline
}

b,strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

code,kbd,pre,samp {
    font-family: monospace;
    font-size: 1em
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,input,select,textarea {
    font: inherit
}

optgroup {
    font-weight: 700
}

button,input,select {
    margin: 0;
    overflow: visible
}

textarea {
    margin: 0;
    overflow: auto
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    cursor: pointer
}

[disabled] {
    cursor: default
}

[type=reset],[type=submit],button,html [type=button] {
    -webkit-appearance: button
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

button:-moz-focusring,input:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

[type=checkbox],[type=radio],legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield
}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a,blockquote,body,dd,div,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,img,legend,li,ol,p,pre,textarea,ul {
    border: 0;
    margin: 0;
    padding: 0
}

button,input,textarea {
    outline: 0
}

[class*=" is-show"] {
    display: block
}

button {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0
}

:root {
    --ui-input-height: 56px;
    --ui-button-height: 56px;
    --ui-input-radius: 0;
    --ui-font-size: 1.5rem;
    --ui-button-font-size: 1.6rem;
    --ui-button-in-input-height: 35px;
    --ui-button-in-input-font-size: 1.5rem
}

[data-user-client=NGPClient] {
    --ui-input-height: 40px;
    --ui-button-height: 40px;
    --ui-input-radius: 4px;
    --ui-font-size: 1.4rem;
    --ui-button-font-size: 1.4rem;
    --ui-button-in-input-height: 30px;
    --ui-button-in-input-font-size: 1.3rem
}

:root {
    --base: #fff;
    --text-primary: #535768;
    --text-secondary: #535768;
    --text-q: #9398aa;
    --text-ins: #535768;
    --text-sub: #9398aa;
    --text-sub-2: #b2bacc;
    --text-info: #9398aa;
    --text-copy: #b1b4c1;
    --text-disabled: #b8b8b8;
    --text-em: #007fff;
    --text-em-sub: #007fff;
    --text-link: #0095ff;
    --text-warning: #ff6c11;
    --text-normal: #04bbb4;
    --text-success: #03a1e0;
    --text-danger: #da3f34;
    --table-text-normal: #535768;
    --text-footer: rgba(0,0,0,.6);
    --text-footer-copy: rgba(0,0,0,.38);
    --button-default: #b7b7b7;
    --button-default-hover: #aaa;
    --button-primary: #004c98;
    --button-hover: #336fac;
    --button-active: #003569;
    --button-primary-disabled: #003c79;
    --button-disabled: #c6cfd8;
    --button-light-hover: #003569;
    --button-light-border: #ced4df;
    --button-secondary: #454858;
    --button-text-normal: #fff;
    --button-text-disabled: #fff;
    --button-round-border: #d5d9e2;
    --button-round-border-hover: #535768;
    --button-round-border-disabled: #d5d9e2;
    --button-arrow-icon: #9398aa;
    --border-thin-normal: #eaecf0;
    --border-normal: #c6cfd8;
    --border-active: #7985a2;
    --border-disabled: #d5d9e2;
    --border-danger: #da3f34;
    --textfield-normal: #fff;
    --textfield-active: #fff;
    --textfield-disabled: #edf0f3;
    --textfield-border-normal: #c6cfd8;
    --textfield-border-active: #7985a2;
    --textfield-border-disabled: #d5d9e2;
    --textfield-text-normal: #535768;
    --textfield-text-active: #535768;
    --textfield-text-disabled: #b8b8b8;
    --dropdown-bg: #fff;
    --dropdown-selected: #efeff4;
    --dropdown-border: #7985a2;
    --dropdown-line: #c6cfd8;
    --dropdown-textfield: #edf0f3;
    --dropdown-bg-disabled: #fafbfd;
    --dropdown-select-text-disabled: #babcc3;
    --dropdown-select-border-disabled: #e8ecef;
    --dropdown-select-bg-disabled: #fff;
    --select-lang-text: rgba(0,0,0,.68);
    --select-lang-bg: #fff;
    --select-lang-border: rgba(34,34,34,.08);
    --arrow-normal: #d5d9e2;
    --tab-bg: #f7f7fa;
    --tab-border: #e4e6ec;
    --tab-border-on: #535768;
    --img-bg: #535767;
    --content-header-bg: #1f3263;
    --content-header-pc-bg: #fff;
    --content-header-line: #535768;
    --content-line: #535768;
    --header-bg: #fff;
    --header-line: #d5d9e2;
    --bg-default: #fff;
    --bg-grey: #edf0f3;
    --bg-grey-2: #f5f5f5;
    --bg-info: #9398aa;
    --bg-disabled: #edf0f3;
    --body-main-bg: #efeff4;
    --body-bg: #fff;
    --body-pc-bg: #fff;
    --shape-bg: #fff;
    --card-image: linear-gradient(180deg,#004c99,#003569);
    --card-bg: #fff;
    --card-border: #c6cfd8;
    --card-content-border: #eaecf0;
    --loader: #4998f1;
    --footer-line: #e3e3e3;
    --icon-bg: #6b7ea5;
    --list-item-bg: #b2bacc;
    --list-item-hover: #eaecf0;
    --login-bg: #fff;
    --login-box: #c6cfd8;
    --login-keyboard-bg: #e0e0e9;
    --login-line: #535768;
    --login-textfield: #fff;
    --login-textfield-pc: #fff;
    --login-3rdparty: #c6cfd8;
    --login-3rdparty-active: #7985a2;
    --login-footer-bg: #f6f6f6;
    --login-switch-bg: #e60012;
    --login-steam-bg: #3c628d;
    --bi-plaync: url(../../img/common/bi-plaync.svg);
    --bi-plaync-s: url(../../img/common/bi-plaync-s.svg);
    --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='19'%3E%3Cpath fill='%231E3263' fill-rule='evenodd' d='M26.141 6.034h9.422a.434.434 0 0 0 .437-.43V.43a.434.434 0 0 0-.437-.43H23.239a.704.704 0 0 0-.506.214l-3.44 3.559-3.44-3.56A.704.704 0 0 0 15.346 0H3.944a.704.704 0 0 0-.507.214L.192 3.583A.683.683 0 0 0 0 4.056V18.57c0 .238.196.431.437.431h5.254a.434.434 0 0 0 .437-.43V6.827c0-.393.323-.71.722-.71h5.596c.399 0 .722.317.722.71v11.741c0 .238.196.431.437.431h5.253a.434.434 0 0 0 .438-.43v-3.335l3.437 3.552a.704.704 0 0 0 .506.213h12.324a.434.434 0 0 0 .437-.43v-5.173a.434.434 0 0 0-.437-.431H26.14a.716.716 0 0 1-.721-.71V6.744c0-.393.323-.71.721-.71'/%3E%3C/svg%3E");
    --icon-chain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cg fill='%23ADB0BE' fill-rule='evenodd'%3E%3Cpath d='M5.352 8.258C3.568 8.258 2.116 6.796 2.116 5s1.452-3.258 3.236-3.258a3.21 3.21 0 0 1 2.31.985h1.859a4.734 4.734 0 0 0-4.17-2.5C2.735.227.612 2.364.612 5c0 2.636 2.123 4.773 4.74 4.773a4.733 4.733 0 0 0 4.17-2.5h-1.86a3.21 3.21 0 0 1-2.31.985M14.357.227c-1.8 0-3.367 1.01-4.169 2.5h1.859a3.21 3.21 0 0 1 2.31-.985c1.784 0 3.236 1.462 3.236 3.258s-1.452 3.258-3.236 3.258a3.21 3.21 0 0 1-2.31-.985h-1.859a4.734 4.734 0 0 0 4.17 2.5c2.617 0 4.74-2.137 4.74-4.773 0-2.636-2.123-4.773-4.74-4.773'/%3E%3Cpath d='M13.127 3.927H6.581c-.602 0-1.09.48-1.09 1.072a1.08 1.08 0 0 0 1.09 1.071h6.547c.602 0 1.09-.48 1.09-1.071 0-.592-.488-1.072-1.09-1.072'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-nc: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23003569' d='M-.002 19.998h20v-20h-20z'/%3E%3Cpath fill='%23FFF' d='M13.053 8.769h3.533c.09 0 .164-.069.164-.153V6.778c0-.085-.073-.153-.164-.153h-4.621a.27.27 0 0 0-.19.076l-1.29 1.264-1.29-1.264a.27.27 0 0 0-.19-.076H4.729a.275.275 0 0 0-.19.076L3.322 7.898a.235.235 0 0 0-.072.168v5.156c0 .085.073.153.164.153h1.97c.09 0 .164-.068.164-.153V9.051c0-.14.121-.253.27-.253h2.1c.149 0 .27.113.27.253v4.171c0 .085.073.153.164.153h1.97c.09 0 .164-.068.164-.153v-1.184l1.289 1.261a.27.27 0 0 0 .19.076h4.621c.09 0 .164-.068.164-.153v-1.838c0-.084-.073-.153-.164-.153h-3.533c-.15 0-.27-.113-.27-.252V9.02c0-.14.12-.252.27-.252'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-plaync: url(../../img/common/icon-plaync.svg);
    --icon-bi-global-nc: url(../../img/icons/icon-bi-global-nc.svg);
    --icon-bi-google: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%234285F4' d='M19.8 11.208c0-.65-.059-1.275-.167-1.875H11v3.546h4.933a4.216 4.216 0 0 1-1.83 2.767v2.3h2.963C18.8 16.35 19.8 14 19.8 11.208z'/%3E%3Cpath fill='%2334A853' d='M11 20.166c2.475 0 4.55-.82 6.066-2.22l-2.962-2.3c-.821.55-1.871.874-3.104.874-2.388 0-4.409-1.612-5.13-3.779H2.808v2.375A9.162 9.162 0 0 0 11 20.166z'/%3E%3Cpath fill='%23FBBC05' d='M5.87 12.741A5.516 5.516 0 0 1 5.583 11c0-.604.104-1.192.287-1.742V6.883H2.808a9.174 9.174 0 0 0 0 8.233l3.062-2.375z'/%3E%3Cpath fill='%23EA4335' d='M11 5.479c1.345 0 2.554.462 3.504 1.37l2.629-2.627C15.545 2.741 13.47 1.833 11 1.833a9.162 9.162 0 0 0-8.192 5.05L5.87 9.258c.721-2.167 2.742-3.78 5.13-3.78z'/%3E%3Cpath d='M1.833 1.833h18.333v18.333H1.833z'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-facebook: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-580-60H500v810H-580z'/%3E%3Cpath d='M.917.917h20.167v20.167H.917z'/%3E%3Crect width='20.167' height='20.167' x='.917' y='.917' fill='%23FFF' rx='10.083'/%3E%3Cpath fill='%231D7AEF' d='M20.625 11.059c0-5.348-4.31-9.684-9.625-9.684-5.316 0-9.625 4.336-9.625 9.684 0 4.833 3.52 8.84 8.121 9.566v-6.767H7.052v-2.8h2.444V8.926c0-2.427 1.437-3.767 3.636-3.767 1.053 0 2.154.189 2.154.189V7.73h-1.214c-1.195 0-1.568.746-1.568 1.512v1.817h2.67l-.427 2.8h-2.243v6.766c4.601-.726 8.121-4.733 8.121-9.566'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-apple: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-336-60H744v810H-336z'/%3E%3Cpath d='M.917 0h20.167v20.167H.917z'/%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M14.709 4.65c-1.535 0-2.774.881-3.574.881-.838 0-1.96-.832-3.29-.832-2.528 0-5.095 1.983-5.095 5.728 0 2.325.955 4.785 2.129 6.375l.347.464c.86 1.127 1.685 1.984 2.8 1.984 1.252 0 1.806-.795 3.367-.795 1.574 0 1.936.77 3.316.77s2.296-1.199 3.16-2.374c.955-1.346 1.368-2.667 1.381-2.729l-.106-.043c-.505-.22-2.603-1.302-2.603-3.848 0-2.472 2.064-3.586 2.18-3.672C17.366 4.7 15.29 4.65 14.71 4.65zm-.71-1.578c-.683.783-1.844 1.37-2.76 1.37a1.56 1.56 0 0 1-.271-.024l-.024-.135a1.629 1.629 0 0 1-.015-.208c0-1.003.542-1.982 1.11-2.606.735-.82 1.973-1.432 2.98-1.469.025.11.038.245.038.38 0 .99-.438 1.982-1.058 2.692z'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-twitter: url(../../img/login/icon-s-twitter.svg);
    --icon-bi-x: url(../../img/login/icon-s-x.svg);
    --icon-bi-line: url(../../img/login/icon-s-line.svg);
    --icon-bi-vk: url(../../img/login/icon-s-vk.svg);
    --icon-bi-psn: url(../../img/login/icon-s-psn.svg);
    --icon-bi-xbox: url(../../img/login/icon-s-xbox.svg);
    --icon-bi-steam: url(../../img/login/icon-steam.svg);
    --icon-bi-switch: url(../../img/login/icon-switch.svg);
    --icon-bi-twitch: url(../../img/common/icon-twitch.svg);
    --icon-bi-qr: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.9'%3E%3Cpath d='M0 0h18v18H0z'/%3E%3Cpath d='M2.25 8.25h6v-6h-6v6zm1.5-4.5h3v3h-3v-3zm-1.5 12h6v-6h-6v6zm1.5-4.5h3v3h-3v-3zm6-9v6h6v-6h-6zm4.5 4.5h-3v-3h3v3zm0 7.5h1.5v1.5h-1.5zm-1.5-4.5h1.5v1.5h-1.5zm-1.5 1.5h1.5v1.5h-1.5zm1.5 1.5h1.5v1.5h-1.5zm1.5-1.5h1.5v1.5h-1.5zm-3 3h1.5v1.5h-1.5zm-1.5-1.5h1.5v1.5h-1.5zm4.5 0h1.5v1.5h-1.5zm-4.5-1.5h1.5v1.5h-1.5zm0-1.5h1.5v1.5h-1.5z' fill='%23535768' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-phone: url(../../img/icons/icon-bi-phone.svg);
    --icon-ex-mark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%234998F1'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.204 11.114V4.796h-1.56v6.318h1.56zm-.78 2.964c.286 0 .53-.1.735-.299a.965.965 0 0 0 .305-.715.915.915 0 0 0-.312-.702 1.043 1.043 0 0 0-.728-.286c-.286 0-.53.1-.734.299a.965.965 0 0 0-.306.715.967.967 0 0 0 .312.702c.095.087.206.156.332.208.125.052.257.078.396.078z'/%3E%3C/g%3E%3C/svg%3E");
    --icon-ex-mark-2: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 0C14.747 0 19 4.253 19 9.5S14.747 19 9.5 19 0 14.747 0 9.5 4.253 0 9.5 0zm-.076 12.076c-.286 0-.53.1-.734.299a.966.966 0 0 0 .006 1.417c.095.087.206.156.332.208.125.052.257.078.396.078.286 0 .53-.1.735-.299a.97.97 0 0 0 .305-.715.916.916 0 0 0-.312-.702 1.045 1.045 0 0 0-.728-.286zm.78-7.28h-1.56v6.318h1.56V4.796z' fill='%239398AA' fill-rule='evenodd'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23C6CFD8' cx='11' cy='11' r='10.5'/%3E%3Cpath d='m9.032 15.415-3.699-3.7.778-.777 2.921 2.92 6.574-6.572.777.778-7.35 7.35z' fill='%23C6CFD8'/%3E%3C/g%3E%3C/svg%3E");
    --icon-check-on: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23004C98'/%3E%3Cpath stroke='%23FFF' stroke-linecap='square' stroke-width='1.818' d='m8.875 12.642 5.312-5.311M5.556 10.65l2.655 2.656'/%3E%3C/g%3E%3C/svg%3E");
    --icon-dropdown: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%23535768' d='M11 1 6 6 1 1'/%3E%3Cpath d='M0 0h12v7H0z' opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
    --icon-question: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23007FFF'/%3E%3Ctext fill='%23FFF' font-family='Avenir-Heavy, Avenir' font-size='13' font-weight='600'%3E%3Ctspan x='6' y='14'%3E?%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
    --icon-top: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%23D5D9E2' d='M.5.5h32v32H.5z'/%3E%3Cpath fill='%239398AA' fill-rule='nonzero' d='m16.5 10 6 6h-1.414L17 11.915V25h-1V11.913L11.914 16H10.5l6-6zM23 8v1H10V8h13z'/%3E%3C/g%3E%3C/svg%3E");
    --icon-arrow-updown: url(../../img/icons/icon-arrow-updown.svg);
    --icon-selected: url(../../img/icons/icon-selected.svg);
    --icon-country: url(../../img/login/ic-country_light.svg);
    --img-success: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='110' height='110'%3E%3Cdefs%3E%3Ccircle id='a' cx='55' cy='55' r='55'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23CCCED7' xlink:href='%23a'/%3E%3Ccircle cx='55' cy='55' r='53' stroke='%23CCCED7' stroke-width='4'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M47.61 62.49 74.214 36 81 42.755 50.566 73.057 47.609 76 29 57.472l6.785-6.755L47.609 62.49z'/%3E%3Cpath fill='%23CCCED7' fill-rule='nonzero' d='M47.61 52.49 74.214 26 81 32.755 50.566 63.057 47.609 66 29 47.472l6.785-6.755L47.609 52.49z'/%3E%3C/g%3E%3C/svg%3E");
    --img-warning: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23CCCED7' d='M10.025 103c-3.263 0-6.182-1.699-7.81-4.544a9.019 9.019 0 0 1 .02-9.077L47.21 11.51C48.841 8.686 51.753 7 55 7c3.246 0 6.158 1.686 7.79 4.51l44.975 77.87a9.018 9.018 0 0 1 .02 9.076c-1.628 2.846-4.547 4.544-7.81 4.544h-89.95z'/%3E%3Ctext fill='%23FFF' font-family='Avenir-Heavy, Avenir' font-size='58.5' font-weight='600' transform='translate(1 7)'%3E%3Ctspan x='45' y='78'%3E!%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
    --img-block: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='110' height='110'%3E%3Cdefs%3E%3Ccircle id='a' cx='55' cy='55' r='55'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23CCCED7' xlink:href='%23a'/%3E%3Ccircle cx='55' cy='55' r='53' stroke='%23CCCED7' stroke-width='4'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='m37.864 34.259 38.183 38.184-4.242 4.242L33.62 38.502z'/%3E%3Cpath d='m33.62 72.443 38.184-38.184 4.243 4.243-38.184 38.183z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --image-dir: ;
    --img-footer-ncdinos: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACTUExURUdwTAA0YQAzYQA0YgAyZAA0YgA0YgA0YjpdggA0YgA0YgE0YwI1YwAzYgAxYQA3YwM2ZAM2ZP///wA0YkFoigAzYgAzYgAyYAAzYgA1YiNQeAo4aAA0YgQ3ZAAzYkhujwAzYiBMduXr8v///2iHpBpJcgA0YQA0YgU4ZRhFcfeC+SxXfW5XpjdFhFR2lcRy2pJiu1PYmu0AAAAndFJOUwBl1o8I+UfdA5r+5bN6FhIu8g1g+1THIYU2yftqv9DVPKcnG2LkcTaF3agAAAG5SURBVEjHrZXXkoIwFIZpCalAsKCsvRHs7/906yHiOCPEZfW/IWTON5yO47SIkDh2uqgzkGWjUX3GmNLx+O8AwQMLQIh5uq5SQWDOUnLuefXb54DvB0GSeF5R9HpwE8dw5pzS7wBxzFhxlxCOE0WzGWO7XZbVzn4KSMlYr5cknBdFGEaR58G7Jf8dgfHY8zB2nDTNc32TUnXo3wKSxIS2Xvf7p9PlcjwK0RLs/QsvwNQOGKXpZlOW+5uOR60RGg6ljKL2SegKTKd5Dg7t99drWWptiogQtMw3AEKUOhz6/aLQerudz5fLMIQmqfPXBPAXgFkAjPUPAOfzfL5apTdhjFCL93dAPwFrYgcImc20LivlOUnhjlLOW4v3AA7lQeSVGbECvl/lsCqW78PNaATjOZlYAf0ESBsgJZgzRmndCLAAoN1bp60GsvcArBcwV2oweB6o1pXcEciy4dC0mMXjJkChxXsgCKREyDTxsztNjR+G/wGglkamVM1yXUh4Bfh/BmAX3o6wFEHNvwzXrYwc07f/ARYLY85YcwU+ByiF+grRlFAT6CNYA/hdASEmE8safHWpM/BOHwO/Vi9Kn+hfoasAAAAASUVORK5CYII=");
    --img-footer-logo: url(../../img/common/footer-logo-nc.svg);
    --img-loading: ../../img/common/img-loading;
    --cnb-bg: #fff;
    --cnb-border: #d5d9e2;
    --cnb-border-sticky: #d5d9e2;
    --cnb-sticky-bg: #fff;
    --cnb-text: #464343;
    --cnb-menu: rgba(26,26,26,.5);
    --cnb-menu-active: #000;
    --header-desc-border: #eaecf0;
    --pin-border-color: #dbdbdb;
    --pin-bg-color: #e8e8e8;
    --pin-active-color: #004c98;
    --scroll-thumb-color: #bababd;
    --icon-camera: url(../../img/icons/home/icon-camera.svg);
    --icon-camera-hover: url(../../img/icons/home/icon-camera-hover.svg);
    --icon-edit: url(../../img/icons/home/icon-edit.svg);
    --icon-on: url(../../img/icons/home/icon-on.svg);
    --icon-off: url(../../img/icons/home/icon-off.svg);
    --icon-level-family: url(../../img/icons/home/icon-level-family.svg);
    --icon-level-silver: url(../../img/icons/home/icon-level-silver.svg);
    --icon-level-gold: url(../../img/icons/home/icon-level-gold.svg);
    --icon-level-platinum: url(../../img/icons/home/icon-level-platinum.svg);
    --icon-level-vip: url(../../img/icons/home/icon-level-vip.svg);
    --icon-coin: url(../../img/icons/home/icon-coin.svg);
    --icon-point: url(../../img/icons/home/icon-point.svg);
    --icon-coupon: url(../../img/icons/home/icon-coupon.svg);
    --icon-cart: url(../../img/icons/home/icon-cart.svg);
    --icon-album: url(../../img/icons/home/icon-album.svg);
    --icon-profile: url(../../img/icons/home/icon-profile.svg);
    --icon-platform-mobile: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' transform='matrix(-1 0 0 1 48 0)' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='%23fff' d='M0 0h48v48H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.429 12.481c0-.752.609-1.36 1.36-1.36H31.21c.752 0 1.361.608 1.361 1.36V35.52c0 .752-.609 1.361-1.36 1.361H16.79c-.752 0-1.361-.61-1.361-1.36V12.48Zm6.857 21.42a1.5 1.5 0 0 1 1.5-1.5h.428a1.5 1.5 0 0 1 1.5 1.5v.36a1.5 1.5 0 0 1-1.5 1.5h-.428a1.5 1.5 0 0 1-1.5-1.5v-.36Zm8.143-19.42H17.57v16.8H30.43v-16.8Z' fill='%232E2E2E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='matrix(-1 0 0 1 48 0)' d='M0 0h48v48H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --icon-platform-mobile-selected: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' transform='matrix(-1 0 0 1 48 0)' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='%23007EFF' d='M0 0h48v48H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.428 12.481c0-.752.61-1.36 1.361-1.36H31.21c.752 0 1.361.608 1.361 1.36V35.52c0 .752-.609 1.361-1.36 1.361H16.79c-.752 0-1.361-.61-1.361-1.36V12.48Zm6.858 21.42a1.5 1.5 0 0 1 1.5-1.5h.428a1.5 1.5 0 0 1 1.5 1.5v.36a1.5 1.5 0 0 1-1.5 1.5h-.428a1.5 1.5 0 0 1-1.5-1.5v-.36Zm8.142-19.42H17.572v16.8h12.857v-16.8Z' fill='%232E2E2E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='matrix(-1 0 0 1 48 0)' d='M0 0h48v48H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --icon-platform-steam: url("data:image/svg+xml;charset=utf-8,%3Csvg width='46' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='46' height='44'%3E%3Cpath d='M45.43.25H.25v43.32h45.18V.25Z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15 5.995A21.668 21.668 0 0 1 21.835.25v.03c4.035 0 7.995 1.125 11.415 3.24a21.747 21.747 0 0 1 7.995 8.76 21.62 21.62 0 0 1 2.175 11.655 21.634 21.634 0 0 1-4.29 11.055 21.748 21.748 0 0 1-9.465 7.14 21.576 21.576 0 0 1-11.805 1.08A21.63 21.63 0 0 1 1.03 27.82l8.31 3.435a6.14 6.14 0 0 0 6.615 4.875 6.133 6.133 0 0 0 5.52-6.09v-.285l7.365-5.25h.165a8.18 8.18 0 0 0 4.545-1.38 8.254 8.254 0 0 0 3.015-3.66c.615-1.5.78-3.135.465-4.725a8.16 8.16 0 0 0-6.42-6.42 8.217 8.217 0 0 0-4.725.465 8 8 0 0 0-3.66 3.015 8.18 8.18 0 0 0-1.38 4.545v.09l-5.16 7.485h-.345a6.16 6.16 0 0 0-3.45 1.065L.25 20.17a21.605 21.605 0 0 1 6.9-14.175Zm6.675 27.12-2.67-1.095a4.633 4.633 0 0 0 1.77 1.95c.765.465 1.65.69 2.535.66.9-.03 1.755-.315 2.49-.825a4.577 4.577 0 0 0 1.635-2.055c.33-.825.42-1.74.24-2.61a4.68 4.68 0 0 0-1.23-2.325A4.601 4.601 0 0 0 16.3 25.54a4.617 4.617 0 0 0-2.625.195l2.745 1.14c.81.36 1.44 1.02 1.77 1.845.33.825.315 1.74-.015 2.55-.345.81-.99 1.47-1.8 1.815s-1.725.36-2.55.045v-.015Zm19.68-19.8c.6.9.915 1.95.915 3.03 0 1.44-.585 2.82-1.605 3.84a5.448 5.448 0 0 1-6.87.675c-.9-.6-1.59-1.455-2.01-2.445a5.51 5.51 0 0 1-.315-3.15 5.568 5.568 0 0 1 1.485-2.79 5.396 5.396 0 0 1 2.79-1.485 5.41 5.41 0 0 1 3.15.315c.99.42 1.845 1.11 2.445 2.01h.015Zm-7.92.75c-.45.675-.69 1.47-.69 2.28 0 1.08.435 2.13 1.2 2.895.765.765 1.8 1.2 2.895 1.2.81 0 1.605-.24 2.28-.69a4.053 4.053 0 0 0 1.5-1.83c.315-.75.39-1.575.225-2.37a4.233 4.233 0 0 0-1.125-2.1 4.17 4.17 0 0 0-2.1-1.125 4.136 4.136 0 0 0-2.37.24c-.75.315-1.38.84-1.83 1.515l.015-.015Z' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(.25 .25)' d='M0 0h45.195v43.35H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --icon-platform-steam-selected: url("data:image/svg+xml;charset=utf-8,%3Csvg width='46' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='46' height='44'%3E%3Cpath d='M45.43.25H.25v43.32h45.18V.25Z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15 5.995A21.668 21.668 0 0 1 21.835.25v.03c4.035 0 7.995 1.125 11.415 3.24a21.747 21.747 0 0 1 7.995 8.76 21.62 21.62 0 0 1 2.175 11.655 21.634 21.634 0 0 1-4.29 11.055 21.748 21.748 0 0 1-9.465 7.14 21.576 21.576 0 0 1-11.805 1.08A21.63 21.63 0 0 1 1.03 27.82l8.31 3.435a6.14 6.14 0 0 0 6.615 4.875 6.133 6.133 0 0 0 5.52-6.09v-.285l7.365-5.25h.165a8.18 8.18 0 0 0 4.545-1.38 8.254 8.254 0 0 0 3.015-3.66c.615-1.5.78-3.135.465-4.725a8.16 8.16 0 0 0-6.42-6.42 8.217 8.217 0 0 0-4.725.465 8 8 0 0 0-3.66 3.015 8.18 8.18 0 0 0-1.38 4.545v.09l-5.16 7.485h-.345a6.16 6.16 0 0 0-3.45 1.065L.25 20.17a21.605 21.605 0 0 1 6.9-14.175Zm6.675 27.12-2.67-1.095a4.633 4.633 0 0 0 1.77 1.95c.765.465 1.65.69 2.535.66.9-.03 1.755-.315 2.49-.825a4.577 4.577 0 0 0 1.635-2.055c.33-.825.42-1.74.24-2.61a4.68 4.68 0 0 0-1.23-2.325A4.601 4.601 0 0 0 16.3 25.54a4.617 4.617 0 0 0-2.625.195l2.745 1.14c.81.36 1.44 1.02 1.77 1.845.33.825.315 1.74-.015 2.55-.345.81-.99 1.47-1.8 1.815s-1.725.36-2.55.045v-.015Zm19.68-19.8c.6.9.915 1.95.915 3.03 0 1.44-.585 2.82-1.605 3.84a5.448 5.448 0 0 1-6.87.675c-.9-.6-1.59-1.455-2.01-2.445a5.51 5.51 0 0 1-.315-3.15 5.568 5.568 0 0 1 1.485-2.79 5.396 5.396 0 0 1 2.79-1.485 5.41 5.41 0 0 1 3.15.315c.99.42 1.845 1.11 2.445 2.01h.015Zm-7.92.75c-.45.675-.69 1.47-.69 2.28 0 1.08.435 2.13 1.2 2.895.765.765 1.8 1.2 2.895 1.2.81 0 1.605-.24 2.28-.69a4.053 4.053 0 0 0 1.5-1.83c.315-.75.39-1.575.225-2.37a4.233 4.233 0 0 0-1.125-2.1 4.17 4.17 0 0 0-2.1-1.125 4.136 4.136 0 0 0-2.37.24c-.75.315-1.38.84-1.83 1.515l.015-.015Z' fill='%23007EFF'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(.25 .25)' d='M0 0h45.195v43.35H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
}

:root body[data-market=NCV] {
    --img-footer-logo: url(../../img/common/bi-vng.svg);
    --icon-bi-global-nc: url(../../img/icons/icon-bi-ncv.svg)
}

html.dark-mode {
    --base: #171717;
    --text-primary: #fff;
    --text-secondary: hsla(0,0%,100%,.83);
    --text-q: hsla(0,0%,100%,.83);
    --text-ins: hsla(0,0%,100%,.6);
    --text-sub: hsla(0,0%,100%,.6);
    --text-sub-2: hsla(0,0%,100%,.6);
    --text-info: hsla(0,0%,100%,.38);
    --text-copy: hsla(0,0%,100%,.38);
    --text-disabled: hsla(0,0%,100%,.04);
    --text-em: #007fff;
    --text-em-sub: hsla(0,0%,100%,.83);
    --text-link: #0095ff;
    --text-warning: #ff914d;
    --text-normal: #0eb9b3;
    --text-success: #2e79ea;
    --text-danger: #da3f34;
    --table-text-normal: hsla(0,0%,100%,.6);
    --text-footer: hsla(0,0%,100%,.6);
    --text-footer-copy: hsla(0,0%,100%,.38);
    --button-default: #5c5c5c;
    --button-default-hover: #4f4f4f;
    --button-primary: #004c99;
    --button-hover: #003569;
    --button-active: #003569;
    --button-primary-disabled: #00254b;
    --button-disabled: hsla(0,0%,100%,.3);
    --button-light-hover: hsla(0,0%,100%,.83);
    --button-light-border: hsla(0,0%,100%,.38);
    --button-secondary: #171717;
    --button-text-normal: #fff;
    --button-text-disabled: hsla(0,0%,100%,.38);
    --button-round-border: hsla(0,0%,100%,.38);
    --button-round-border-hover: hsla(0,0%,100%,.83);
    --button-round-border-disabled: hsla(0,0%,100%,.18);
    --button-arrow-icon: #fff;
    --border-thin-normal: hsla(0,0%,100%,.08);
    --border-normal: #474747;
    --border-active: hsla(0,0%,100%,.38);
    --border-disabled: hsla(0,0%,100%,.04);
    --border-danger: #da3f34;
    --textfield-normal: #474747;
    --textfield-active: #474747;
    --textfield-disabled: #202020;
    --textfield-border-normal: #474747;
    --textfield-border-active: hsla(0,0%,100%,.38);
    --textfield-border-disabled: hsla(0,0%,100%,0);
    --textfield-text-normal: hsla(0,0%,100%,.83);
    --textfield-text-active: hsla(0,0%,100%,.83);
    --textfield-text-disabled: hsla(0,0%,100%,.2);
    --dropdown-bg: hsla(0,0%,100%,.12);
    --dropdown-selected: #686868;
    --dropdown-border: hsla(0,0%,100%,.38);
    --dropdown-line: hsla(0,0%,100%,.12);
    --dropdown-textfield: #202020;
    --dropdown-bg-disabled: #202020;
    --dropdown-select-text-disabled: hsla(0,0%,100%,.2);
    --dropdown-select-border-disabled: hsla(0,0%,100%,0);
    --dropdown-select-bg-disabled: hsla(0,0%,100%,.06);
    --select-lang-text: hsla(0,0%,100%,.6);
    --select-lang-bg: #282828;
    --select-lang-border: hsla(0,0%,100%,.08);
    --arrow-normal: hsla(0,0%,100%,.38);
    --tab-bg: hsla(0,0%,100%,.06);
    --tab-border: #595959;
    --tab-border-on: #ababab;
    --img-bg: hsla(0,0%,100%,.04);
    --content-header-bg: #202020;
    --content-header-pc-bg: #2d2d2d;
    --content-header-line: hsla(0,0%,100%,.12);
    --content-line: hsla(0,0%,100%,.38);
    --header-bg: #202020;
    --header-line: hsla(0,0%,100%,.08);
    --bg-default: #171717;
    --bg-grey: hsla(0,0%,100%,.38);
    --bg-grey-2: hsla(0,0%,100%,.04);
    --bg-info: hsla(0,0%,100%,.38);
    --bg-disabled: hsla(0,0%,100%,.38);
    --body-main-bg: #171717;
    --body-bg: #171717;
    --body-pc-bg: #171717;
    --shape-bg: #171717;
    --card-image: linear-gradient(180deg,#004c99,#003569);
    --card-bg: #2d2d2d;
    --card-border: #474747;
    --card-content-border: transparent;
    --loader: #4998f1;
    --footer-line: hsla(0,0%,100%,.12);
    --icon-bg: hsla(0,0%,100%,.6);
    --list-item-bg: hsla(0,0%,100%,.12);
    --list-item-hover: hsla(0,0%,100%,.12);
    --login-bg: #202020;
    --login-box: #333;
    --login-keyboard-bg: #232323;
    --login-line: hsla(0,0%,100%,.6);
    --login-textfield: #464646;
    --login-textfield-pc: #3b3b3b;
    --login-3rdparty: hsla(0,0%,100%,.2);
    --login-3rdparty-active: hsla(0,0%,100%,.6);
    --login-footer-bg: #202020;
    --login-switch-bg: #e60012;
    --login-steam-bg: #3c628d;
    --bi-plaync: url(../../img/common/bi-plaync_dark.svg);
    --bi-plaync-s: url(../../img/common/bi-plaync-s_dark.svg);
    --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='19'%3E%3Cpath d='M26.141 6.034h9.422a.434.434 0 0 0 .437-.43V.43a.434.434 0 0 0-.437-.43H23.239a.702.702 0 0 0-.506.214l-3.44 3.559-3.44-3.56A.712.712 0 0 0 15.346 0H3.944a.707.707 0 0 0-.507.214L.192 3.583A.68.68 0 0 0 0 4.056V18.57c0 .238.196.431.437.431h5.254a.434.434 0 0 0 .437-.43V6.827c0-.393.323-.71.722-.71h5.596c.399 0 .722.317.722.71v11.741c0 .238.196.431.437.431h5.253a.434.434 0 0 0 .438-.43v-3.335l3.437 3.552a.706.706 0 0 0 .506.213h12.324a.434.434 0 0 0 .437-.43v-5.173a.434.434 0 0 0-.437-.431H26.14a.716.716 0 0 1-.721-.71V6.744c0-.393.323-.71.721-.71' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
    --icon-chain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cg fill='%23FFF' fill-opacity='.38' fill-rule='evenodd'%3E%3Cpath d='M5.352 8.258C3.568 8.258 2.116 6.796 2.116 5s1.452-3.258 3.236-3.258c.906 0 1.723.38 2.31.985h1.859a4.733 4.733 0 0 0-4.17-2.5C2.735.227.612 2.364.612 5c0 2.636 2.123 4.773 4.74 4.773a4.733 4.733 0 0 0 4.17-2.5h-1.86a3.207 3.207 0 0 1-2.31.985M14.357.227c-1.8 0-3.367 1.01-4.169 2.5h1.859a3.207 3.207 0 0 1 2.31-.985c1.784 0 3.236 1.462 3.236 3.258s-1.452 3.258-3.236 3.258a3.21 3.21 0 0 1-2.31-.985h-1.859a4.733 4.733 0 0 0 4.17 2.5c2.617 0 4.74-2.137 4.74-4.773 0-2.636-2.123-4.773-4.74-4.773'/%3E%3Cpath d='M13.127 3.927H6.581c-.602 0-1.09.48-1.09 1.072a1.08 1.08 0 0 0 1.09 1.071h6.547c.602 0 1.09-.48 1.09-1.071 0-.592-.488-1.072-1.09-1.072'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-nc: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23003569' d='M-.002 19.998h20v-20h-20z'/%3E%3Cpath fill='%23FFF' d='M13.053 8.769h3.533c.09 0 .164-.069.164-.153V6.778c0-.085-.073-.153-.164-.153h-4.621a.27.27 0 0 0-.19.076l-1.29 1.264-1.29-1.264a.27.27 0 0 0-.19-.076H4.729a.275.275 0 0 0-.19.076L3.322 7.898a.235.235 0 0 0-.072.168v5.156c0 .085.073.153.164.153h1.97c.09 0 .164-.068.164-.153V9.051c0-.14.121-.253.27-.253h2.1c.149 0 .27.113.27.253v4.171c0 .085.073.153.164.153h1.97c.09 0 .164-.068.164-.153v-1.184l1.289 1.261a.27.27 0 0 0 .19.076h4.621c.09 0 .164-.068.164-.153v-1.838c0-.084-.073-.153-.164-.153h-3.533c-.15 0-.27-.113-.27-.252V9.02c0-.14.12-.252.27-.252'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-plaync: url(../../img/common/icon-plaync_dark.svg);
    --icon-bi-global-nc: url(../../img/icons/icon-bi-global-nc_dark.svg);
    --icon-bi-google: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20'%3E%3Cdefs%3E%3Cpath id='a' d='M6.72 1.715c0 2.131-.764 3.926-2.087 5.145H2.37V5.103a3.215 3.215 0 0 0 1.397-2.112H0V.283h6.593c.082.458.127.935.127 1.432z'/%3E%3Cpath id='c' d='M7 6.222A6.995 6.995 0 0 1 .745 2.366V.552h2.338C3.633 2.207 5.177 3.438 7 3.438c.942 0 1.744-.248 2.37-.668l2.263 1.756C10.475 5.596 8.89 6.222 7 6.222z'/%3E%3Cpath id='e' d='M3.083 5.219.745 7.033A6.989 6.989 0 0 1 0 3.889C0 2.759.27 1.69.745.745h2.338V2.56c-.14.42-.22.869-.22 1.33 0 .461.08.91.22 1.33z'/%3E%3Cpath id='g' d='M7 2.784c-1.823 0-3.366 1.231-3.917 2.886L.745 3.856A6.999 6.999 0 0 1 7 0c1.887 0 3.471.694 4.684 1.823L9.676 3.831C8.95 3.137 8.028 2.784 7 2.784z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(10 8.444)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%234285F4' d='M-3.889 10.749h14.498V-3.606H-3.889z' mask='url(%23b)'/%3E%3C/g%3E%3Cg transform='translate(3 10.778)'%3E%3Cmask id='d' fill='%23fff'%3E%3Cuse xlink:href='%23c'/%3E%3C/mask%3E%3Cpath fill='%2334A853' d='M-3.144 6.288h18.666v-9.625H-3.144z' mask='url(%23d)'/%3E%3C/g%3E%3Cg transform='translate(3 6.111)'%3E%3Cmask id='f' fill='%23fff'%3E%3Cuse xlink:href='%23e'/%3E%3C/mask%3E%3Cpath fill='%23FBBC05' d='M-3.889 10.921H6.972V-3.144H-3.889z' mask='url(%23f)'/%3E%3C/g%3E%3Cg transform='translate(3 3)'%3E%3Cmask id='h' fill='%23fff'%3E%3Cuse xlink:href='%23g'/%3E%3C/mask%3E%3Cpath fill='%23EA4335' d='M-3.144 9.559h18.717V-3.889H-3.144z' mask='url(%23h)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-facebook: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20'%3E%3Cdefs%3E%3Cpath id='a' d='M.001.001H14v13.914H.001z'/%3E%3C/defs%3E%3Cg transform='translate(3 3)' fill='none' fill-rule='evenodd'%3E%3Crect width='14' height='14' rx='6.364'/%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%231877F2' d='M4.129 9.023h1.777v4.892A7.002 7.002 0 0 1 7 0a7 7 0 0 1 1.094 13.915V9.023h1.63L10.036 7H8.094V5.687c0-.554.27-1.093 1.14-1.093h.883V2.87s-.8-.137-1.567-.137c-1.599 0-2.644.97-2.644 2.724V7H4.13v2.023z' mask='url(%23b)'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-apple: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10.663 5.23c.61 0 1.375-.426 1.83-.996.413-.516.714-1.237.714-1.958 0-.098-.009-.196-.026-.276-.679.027-1.495.472-1.985 1.068-.387.454-.739 1.166-.739 1.896 0 .107.017.213.026.249a.946.946 0 0 0 .18.018zM8.515 16c.833 0 1.203-.579 2.243-.579 1.057 0 1.289.561 2.217.561.91 0 1.521-.872 2.097-1.726.644-.98.91-1.94.928-1.985-.06-.018-1.805-.757-1.805-2.83 0-1.798 1.375-2.608 1.453-2.67-.911-1.353-2.295-1.389-2.673-1.389-1.023 0-1.856.64-2.38.64-.568 0-1.315-.604-2.2-.604C6.71 5.418 5 6.86 5 9.583c0 1.691.636 3.48 1.418 4.637.67.979 1.255 1.78 2.097 1.78z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
    --icon-bi-twitter: url(../../img/login/icon-s-twitter.svg);
    --icon-bi-x: url(../../img/login/icon-s-x_dark.svg);
    --icon-bi-line: url(../../img/login/icon-s-line.svg);
    --icon-bi-vk: url(../../img/login/icon-s-vk.svg);
    --icon-bi-psn: url(../../img/login/icon-s-psn.svg);
    --icon-bi-xbox: url(../../img/login/icon-s-xbox.svg);
    --icon-bi-steam: url(../../img/login/icon-steam_dark.svg);
    --icon-bi-qr: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.9'%3E%3Cpath d='M0 0h18v18H0z'/%3E%3Cpath d='M2.25 8.25h6v-6h-6v6zm1.5-4.5h3v3h-3v-3zm-1.5 12h6v-6h-6v6zm1.5-4.5h3v3h-3v-3zm6-9v6h6v-6h-6zm4.5 4.5h-3v-3h3v3zm0 7.5h1.5v1.5h-1.5zm-1.5-4.5h1.5v1.5h-1.5zm-1.5 1.5h1.5v1.5h-1.5zm1.5 1.5h1.5v1.5h-1.5zm1.5-1.5h1.5v1.5h-1.5zm-3 3h1.5v1.5h-1.5zm-1.5-1.5h1.5v1.5h-1.5zm4.5 0h1.5v1.5h-1.5zm-4.5-1.5h1.5v1.5h-1.5zm0-1.5h1.5v1.5h-1.5z' fill='%23535768' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
    --icon-bi-phone: url(../../img/icons/icon-bi-phone_dark.svg);
    --icon-ex-mark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cpath d='M10.5 1c5.247 0 9.5 4.253 9.5 9.5S15.747 20 10.5 20 1 15.747 1 10.5 5.253 1 10.5 1zm-.076 12.076c-.286 0-.53.1-.734.299a.966.966 0 0 0 .006 1.417c.095.087.206.156.332.208.125.052.257.078.396.078.286 0 .53-.1.735-.299a.97.97 0 0 0 .305-.715.916.916 0 0 0-.312-.702 1.045 1.045 0 0 0-.728-.286zm.78-7.28h-1.56v6.318h1.56V5.796z' fill='%23007FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
    --icon-ex-mark-2: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 0C14.747 0 19 4.253 19 9.5S14.747 19 9.5 19 0 14.747 0 9.5 4.253 0 9.5 0zm-.076 12.076c-.286 0-.53.1-.734.299a.966.966 0 0 0 .006 1.417c.095.087.206.156.332.208.125.052.257.078.396.078.286 0 .53-.1.735-.299a.97.97 0 0 0 .305-.715.916.916 0 0 0-.312-.702 1.045 1.045 0 0 0-.728-.286zm.78-7.28h-1.56v6.318h1.56V4.796z' fill='%23FFF' fill-rule='evenodd' opacity='.6'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.38'%3E%3Ccircle stroke='%23FFF' cx='11' cy='11' r='10.5'/%3E%3Cpath d='m9.032 15.415-3.699-3.7.778-.777 2.921 2.92 6.574-6.572.777.778-7.35 7.35z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
    --icon-check-on: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23004C98'/%3E%3Cpath stroke='%23FFF' stroke-linecap='square' stroke-width='1.818' d='m8.875 12.642 5.312-5.311M5.556 10.65l2.655 2.656'/%3E%3C/g%3E%3C/svg%3E");
    --icon-dropdown: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%23FFF' d='M11 1 6 6 1 1' opacity='.83'/%3E%3Cpath d='M0 0h12v7H0z' opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
    --icon-question: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cpath d='M10.5 1c5.247 0 9.5 4.253 9.5 9.5S15.747 20 10.5 20 1 15.747 1 10.5 5.253 1 10.5 1zm.01 12.076c-.429 0-.429 0-.735.299-.305.299-.305.299-.305.715 0 .208 0 .208.085.39.084.182.084.182.227.312.143.13.143.13.332.208.188.078.188.078.396.078.429 0 .429 0 .735-.299.305-.299.305-.299.305-.715s0-.416-.312-.702-.312-.286-.728-.286zm.143-7.514c-.624 0-.624 0-1.144.175-.52.176-.52.176-.917.514-.396.338-.396.338-.643.825-.198.39-.198.39-.287.868l-.038.244 1.664.13c.052-.533.052-.533.403-.903.351-.371.351-.371.897-.371.507 0 .507 0 .839.319.331.318.331.318.331.825 0 .446 0 .446-.239.748l-.086.097-1.001 1.014c-.195.208-.195.208-.332.357-.136.15-.136.15-.22.313-.085.162-.085.162-.118.364-.021.134-.021.134-.028.306l-.004.181v.715h1.56v-.494c0-.247 0-.247.039-.422.039-.176.039-.176.123-.313.085-.136.085-.136.215-.266s.13-.13.312-.299c.286-.273.286-.273.54-.52.253-.247.253-.247.448-.52s.195-.273.312-.598c.117-.325.117-.325.117-.754 0-.611 0-.611-.208-1.086-.208-.474-.208-.474-.579-.793-.37-.318-.37-.318-.87-.487-.501-.169-.501-.169-1.086-.169z' fill='%23FFF' fill-rule='evenodd' opacity='.6'/%3E%3C/svg%3E");
    --icon-top: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%23FFF' d='M.5.5h32v32H.5z' opacity='.12'/%3E%3Cpath d='m16.5 10 6 6h-1.414L17 11.915V25h-1V11.913L11.914 16H10.5l6-6zM23 8v1H10V8h13z' fill='%23FFF' fill-rule='nonzero' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
    --icon-arrow-updown: url(../../img/icons/icon-arrow-updown_dark.svg);
    --icon-selected: url(../../img/icons/icon-selected_dark.svg);
    --icon-country: url(../../img/login/ic-country_dark.svg);
    --img-success: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cpath d='M55 0c30.376 0 55 24.624 55 55s-24.624 55-55 55S0 85.376 0 55 24.624 0 55 0zm20.978 37.756L54.394 59.245 47.61 66 34.022 52.471l-5.022 5L47.61 76l6.784-6.755L81 42.755l-5.022-4.999z' fill='%23FFF' fill-rule='evenodd' opacity='.38'/%3E%3C/svg%3E");
    --img-warning: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cpath d='M55 7c3.246 0 6.158 1.686 7.79 4.51l44.975 77.87c1.64 2.838 1.647 6.23.02 9.076-1.628 2.846-4.547 4.544-7.81 4.544H10.026c-3.263 0-6.182-1.699-7.81-4.544a9.02 9.02 0 0 1 .02-9.077L47.21 11.51C48.841 8.686 51.753 7 55 7zm-.342 69.342c-1.287 0-2.389.448-3.305 1.346-.917.897-1.375 1.969-1.375 3.217 0 .624.127 1.209.38 1.755a4.358 4.358 0 0 0 1.024 1.404c.429.39.926.702 1.492.936.565.234 1.16.351 1.784.351 1.287 0 2.389-.448 3.305-1.346.917-.896 1.375-1.969 1.375-3.217s-.468-2.301-1.404-3.159c-.936-.858-2.028-1.287-3.276-1.287zm3.51-32.76h-7.02v28.431h7.02V43.582z' fill='%23FFF' fill-rule='evenodd' opacity='.38'/%3E%3C/svg%3E");
    --img-block: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cpath d='M55 0c30.376 0 55 24.624 55 55s-24.624 55-55 55S0 85.376 0 55 24.624 0 55 0zm16.804 34.26-16.97 16.97-16.97-16.97-4.243 4.242 16.97 16.97-16.97 16.971 4.242 4.243 16.97-16.972 16.971 16.972 4.243-4.243-16.971-16.97 16.971-16.971-4.243-4.243z' fill='%23FFF' opacity='.38' fill-rule='evenodd'/%3E%3C/svg%3E");
    --image-dir: dark/;
    --img-footer-ncdinos: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACrUExURUdwTP////////////////////////////////////39/f39/f////////////////7+/gAAAPr6+v////7+/v////////////////////v7+8DAwP////////////z8/P///wAAALKysv///////9/f39XV1dnZ2eXl5b+/vxoaGpeXl66uruXl5fPo/f///9PT0+3s7eLi4sqR/+XI/4sN/6A7/4QA/7lt/z/TPf4AAAAvdFJOUwBmewaZ1PfdAvyyLhYSYUnkCvyRQwmNxzie7P1UiCC/bhb6VSKn1sq72Cdi0uT9DOOscwAAAd1JREFUSMel1GdbgzAQAGA2SdgByiqVDlcdsbZV//8vk/TEx8FR0PtS4Mmb5i6XKAoShHieMiUmg8WirrvnICiKPJ8A5kOAEPj1fV6mKTxrWhiaZveGANUv+Ugwm6Wp45imEL4vv7iufA5DwxgJvGHgeeIzGIP5KW2azaZb7BggBoCmUer7jhOGQtg2zN8ujaD1RwAWeW6aQaAoUXR9LbgMKgaG/wCtKM8Bx4HUlsuqOhxeXvZ7xggZ+ocPsB0LIKLo7u7x8Xh8fd3v2yxolmma644GVguaIXBxcXW1Wh0Ox+Pb227HOWyiZcmWQUH1C1AMEFKWT09VJYv68HB7e3lp27JJuvr9HwQB5xKsVvf32+1yGUVJYlmpjqaMgBQ90abJ+W733MbNTRTJb0VRlujmTQZxLGhbQ055lsUxtLs8nmqDgFksa86FbAcA9Qk0KnJ4YJOKomsEz4N2R08bAKNwF2eBrscx9Mx8/vVAoVfyB6DfgYOBzSbLYP4kGXW5TwK6rmmWBel+XU5f49v2X0Bdd1cjbFV/qKoc8TcgL0V40fW+gadBpzCMb8AcB/K8W1B/QX+BZCowjLYfKGPrNZboZ7IA4qmAsaZpu5/g5fyxJMbUZuii7SnrcPwbvAOH4la/trplTQAAAABJRU5ErkJggg==");
    --img-footer-logo: url(../../img/common/footer-logo-nc_dark.svg);
    --img-loading: ../../img/common/img-loading_dark;
    --cnb-bg: #202020;
    --cnb-border: hsla(0,0%,100%,.1);
    --cnb-border-sticky: hsla(0,0%,100%,.12);
    --cnb-sticky-bg: hsla(0,0%,9%,.9);
    --cnb-text: #fff;
    --cnb-menu: hsla(0,0%,100%,.3);
    --cnb-menu-active: #fff;
    --header-desc-border: #2d2d2d;
    --pin-border-color: #424242;
    --pin-bg-color: #313131;
    --pin-active-color: #004c98;
    --scroll-thumb-color: hsla(0,0%,100%,.2);
    --icon-camera: url(../../img/icons/home/dark/icon-camera.svg);
    --icon-camera-hover: url(../../img/icons/home/dark/icon-camera-hover.svg);
    --icon-edit: url(../../img/icons/home/icon-edit.svg);
    --icon-on: url(../../img/icons/home/dark/icon-on.svg);
    --icon-off: url(../../img/icons/home/dark/icon-off.svg);
    --icon-level-family: url(../../img/icons/home/icon-level-family.svg);
    --icon-level-silver: url(../../img/icons/home/icon-level-silver.svg);
    --icon-level-gold: url(../../img/icons/home/icon-level-gold.svg);
    --icon-level-platinum: url(../../img/icons/home/icon-level-platinum.svg);
    --icon-level-vip: url(../../img/icons/home/icon-level-vip.svg);
    --icon-coin: url(../../img/icons/home/icon-coin.svg);
    --icon-point: url(../../img/icons/home/icon-point.svg);
    --icon-coupon: url(../../img/icons/home/icon-coupon.svg);
    --icon-cart: url(../../img/icons/home/icon-cart.svg);
    --icon-album: url(../../img/icons/home/dark/icon-album.svg);
    --icon-profile: url(../../img/icons/home/dark/icon-profile.svg);
    --icon-platform-mobile: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' transform='matrix(-1 0 0 1 48 0)' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='%23fff' d='M0 0h48v48H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.429 12.481c0-.752.609-1.36 1.36-1.36H31.21c.752 0 1.361.608 1.361 1.36V35.52c0 .752-.609 1.361-1.36 1.361H16.79c-.752 0-1.361-.61-1.361-1.36V12.48Zm6.857 21.42a1.5 1.5 0 0 1 1.5-1.5h.428a1.5 1.5 0 0 1 1.5 1.5v.36a1.5 1.5 0 0 1-1.5 1.5h-.428a1.5 1.5 0 0 1-1.5-1.5v-.36Zm8.143-19.42H17.57v16.8H30.43v-16.8Z' fill='%232E2E2E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='matrix(-1 0 0 1 48 0)' d='M0 0h48v48H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --icon-platform-mobile-selected: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' transform='matrix(-1 0 0 1 48 0)' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='%23007EFF' d='M0 0h48v48H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.428 12.481c0-.752.61-1.36 1.361-1.36H31.21c.752 0 1.361.608 1.361 1.36V35.52c0 .752-.609 1.361-1.36 1.361H16.79c-.752 0-1.361-.61-1.361-1.36V12.48Zm6.858 21.42a1.5 1.5 0 0 1 1.5-1.5h.428a1.5 1.5 0 0 1 1.5 1.5v.36a1.5 1.5 0 0 1-1.5 1.5h-.428a1.5 1.5 0 0 1-1.5-1.5v-.36Zm8.142-19.42H17.572v16.8h12.857v-16.8Z' fill='%232E2E2E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='matrix(-1 0 0 1 48 0)' d='M0 0h48v48H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --icon-platform-steam: url("data:image/svg+xml;charset=utf-8,%3Csvg width='46' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='46' height='44'%3E%3Cpath d='M45.43.25H.25v43.32h45.18V.25Z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15 5.995A21.668 21.668 0 0 1 21.835.25v.03c4.035 0 7.995 1.125 11.415 3.24a21.747 21.747 0 0 1 7.995 8.76 21.62 21.62 0 0 1 2.175 11.655 21.634 21.634 0 0 1-4.29 11.055 21.748 21.748 0 0 1-9.465 7.14 21.576 21.576 0 0 1-11.805 1.08A21.63 21.63 0 0 1 1.03 27.82l8.31 3.435a6.14 6.14 0 0 0 6.615 4.875 6.133 6.133 0 0 0 5.52-6.09v-.285l7.365-5.25h.165a8.18 8.18 0 0 0 4.545-1.38 8.254 8.254 0 0 0 3.015-3.66c.615-1.5.78-3.135.465-4.725a8.16 8.16 0 0 0-6.42-6.42 8.217 8.217 0 0 0-4.725.465 8 8 0 0 0-3.66 3.015 8.18 8.18 0 0 0-1.38 4.545v.09l-5.16 7.485h-.345a6.16 6.16 0 0 0-3.45 1.065L.25 20.17a21.605 21.605 0 0 1 6.9-14.175Zm6.675 27.12-2.67-1.095a4.633 4.633 0 0 0 1.77 1.95c.765.465 1.65.69 2.535.66.9-.03 1.755-.315 2.49-.825a4.577 4.577 0 0 0 1.635-2.055c.33-.825.42-1.74.24-2.61a4.68 4.68 0 0 0-1.23-2.325A4.601 4.601 0 0 0 16.3 25.54a4.617 4.617 0 0 0-2.625.195l2.745 1.14c.81.36 1.44 1.02 1.77 1.845.33.825.315 1.74-.015 2.55-.345.81-.99 1.47-1.8 1.815s-1.725.36-2.55.045v-.015Zm19.68-19.8c.6.9.915 1.95.915 3.03 0 1.44-.585 2.82-1.605 3.84a5.448 5.448 0 0 1-6.87.675c-.9-.6-1.59-1.455-2.01-2.445a5.51 5.51 0 0 1-.315-3.15 5.568 5.568 0 0 1 1.485-2.79 5.396 5.396 0 0 1 2.79-1.485 5.41 5.41 0 0 1 3.15.315c.99.42 1.845 1.11 2.445 2.01h.015Zm-7.92.75c-.45.675-.69 1.47-.69 2.28 0 1.08.435 2.13 1.2 2.895.765.765 1.8 1.2 2.895 1.2.81 0 1.605-.24 2.28-.69a4.053 4.053 0 0 0 1.5-1.83c.315-.75.39-1.575.225-2.37a4.233 4.233 0 0 0-1.125-2.1 4.17 4.17 0 0 0-2.1-1.125 4.136 4.136 0 0 0-2.37.24c-.75.315-1.38.84-1.83 1.515l.015-.015Z' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(.25 .25)' d='M0 0h45.195v43.35H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --icon-platform-steam-selected: url("data:image/svg+xml;charset=utf-8,%3Csvg width='46' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='46' height='44'%3E%3Cpath d='M45.43.25H.25v43.32h45.18V.25Z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15 5.995A21.668 21.668 0 0 1 21.835.25v.03c4.035 0 7.995 1.125 11.415 3.24a21.747 21.747 0 0 1 7.995 8.76 21.62 21.62 0 0 1 2.175 11.655 21.634 21.634 0 0 1-4.29 11.055 21.748 21.748 0 0 1-9.465 7.14 21.576 21.576 0 0 1-11.805 1.08A21.63 21.63 0 0 1 1.03 27.82l8.31 3.435a6.14 6.14 0 0 0 6.615 4.875 6.133 6.133 0 0 0 5.52-6.09v-.285l7.365-5.25h.165a8.18 8.18 0 0 0 4.545-1.38 8.254 8.254 0 0 0 3.015-3.66c.615-1.5.78-3.135.465-4.725a8.16 8.16 0 0 0-6.42-6.42 8.217 8.217 0 0 0-4.725.465 8 8 0 0 0-3.66 3.015 8.18 8.18 0 0 0-1.38 4.545v.09l-5.16 7.485h-.345a6.16 6.16 0 0 0-3.45 1.065L.25 20.17a21.605 21.605 0 0 1 6.9-14.175Zm6.675 27.12-2.67-1.095a4.633 4.633 0 0 0 1.77 1.95c.765.465 1.65.69 2.535.66.9-.03 1.755-.315 2.49-.825a4.577 4.577 0 0 0 1.635-2.055c.33-.825.42-1.74.24-2.61a4.68 4.68 0 0 0-1.23-2.325A4.601 4.601 0 0 0 16.3 25.54a4.617 4.617 0 0 0-2.625.195l2.745 1.14c.81.36 1.44 1.02 1.77 1.845.33.825.315 1.74-.015 2.55-.345.81-.99 1.47-1.8 1.815s-1.725.36-2.55.045v-.015Zm19.68-19.8c.6.9.915 1.95.915 3.03 0 1.44-.585 2.82-1.605 3.84a5.448 5.448 0 0 1-6.87.675c-.9-.6-1.59-1.455-2.01-2.445a5.51 5.51 0 0 1-.315-3.15 5.568 5.568 0 0 1 1.485-2.79 5.396 5.396 0 0 1 2.79-1.485 5.41 5.41 0 0 1 3.15.315c.99.42 1.845 1.11 2.445 2.01h.015Zm-7.92.75c-.45.675-.69 1.47-.69 2.28 0 1.08.435 2.13 1.2 2.895.765.765 1.8 1.2 2.895 1.2.81 0 1.605-.24 2.28-.69a4.053 4.053 0 0 0 1.5-1.83c.315-.75.39-1.575.225-2.37a4.233 4.233 0 0 0-1.125-2.1 4.17 4.17 0 0 0-2.1-1.125 4.136 4.136 0 0 0-2.37.24c-.75.315-1.38.84-1.83 1.515l.015-.015Z' fill='%23007EFF'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(.25 .25)' d='M0 0h45.195v43.35H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
}

html.dark-mode body[data-market=NCV] {
    --img-footer-logo: url(../../img/common/bi-vng_dark.svg);
    --icon-bi-global-nc: url(../../img/icons/icon-bi-ncv_dark.svg)
}

html[data-user-client=NGPClient] {
    --base: #141419;
    --body-bg: #141419;
    --login-bg: #141419;
    --loader: #862cfb;
    --text-primary: hsla(0,0%,100%,.94);
    --text-secondary: hsla(0,0%,100%,.5);
    --text-info: hsla(0,0%,100%,.28);
    --text-copy: hsla(0,0%,100%,.28);
    --text-disabled: hsla(0,0%,100%,.28);
    --text-em: #862cfb;
    --text-link: hsla(0,0%,100%,.94);
    --text-success: #862cfb;
    --button-primary: #862cfb;
    --button-hover: #9445fb;
    --button-active: #7813fb;
    --button-disabled: #313135;
    --button-primary-disabled: #313135;
    --login-line: hsla(0,0%,100%,.94);
    --login-textfield: #26272a;
    --login-textfield-pc: #26272a;
    --textfield-normal: #26272a;
    --textfield-active: #26272a;
    --textfield-disabled: #1a1b1d;
    --textfield-border-normal: #26272a;
    --textfield-border-active: #862cfb;
    --textfield-text-normal: hsla(0,0%,100%,.94);
    --textfield-text-active: hsla(0,0%,100%,.94);
    --textfield-bg: #26272a;
    --border-normal: #26272a;
    --border-active: #862cfb;
    --dropdown-border: #2b2c2f;
    --dropdown-bg: #1e1f21;
    --dropdown-selected: hsla(0,0%,100%,.04);
    --icon-dropdown: url(../../img/login/purple/icon_arrow_down.svg);
    --icon-ex-mark: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z'/%3E%3C/svg%3E");
    --icon-check-on: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='13' fill='%23862cfb' stroke='%23862cfb'/%3E%3Cpath d='m7 14 4 4L21 8' stroke='%23fff' stroke-width='2' fill='none' style='opacity:1'/%3E%3C/svg%3E");
    --pin-active-color: #862cfb;
    --button-light-border: hsla(0,0%,100%,.28);
    --button-light-hover: hsla(0,0%,100%,.94);
    --card-bg: #2d2d2d;
    --login-3rdparty: hsla(0,0%,100%,.2);
    --login-3rdparty-active: hsla(0,0%,100%,.6)
}

:root {
    --login-bi: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='44'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23004C98'/%3E%3Cstop offset='100%25' stop-color='%23003569'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' fill-rule='evenodd' d='M77.855 14.703a.92.92 0 0 0 .933-.906V2.907A.92.92 0 0 0 77.855 2h-26.28a1.51 1.51 0 0 0-1.078.45L43.16 9.942 35.825 2.45a1.511 1.511 0 0 0-1.08-.45H10.432c-.41 0-.8.163-1.081.451L2.43 9.542c-.263.27-.41.626-.41.997v30.554a.92.92 0 0 0 .933.907h11.202a.92.92 0 0 0 .933-.907v-24.72c0-.825.689-1.495 1.538-1.495h11.935c.85 0 1.538.67 1.538 1.496v24.72c0 .5.418.906.933.906h11.202a.92.92 0 0 0 .933-.907v-7.018l7.33 7.476a1.51 1.51 0 0 0 1.078.449h26.28a.92.92 0 0 0 .933-.907v-10.89a.92.92 0 0 0-.933-.906h-20.09c-.85 0-1.539-.67-1.539-1.496V16.199c0-.826.69-1.496 1.539-1.496h20.09z'/%3E%3C/svg%3E");
    --login-bi-height: 44px;
    --header-pad: 50px 0 25px 0;
    --header-tablet-pad: 24px 0 5px 0;
    --btn-login-font-size: 1.7rem;
    --account-info-padding: 30px 0 30px 0
}

:root body[data-market=NCV] {
    --login-bi: url(../../img/common/bi-vng.svg)
}

html.dark-mode:not([data-user-client=NGPClient]) {
    --login-bi: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='19'%3E%3Cpath d='M26.141 6.034h9.422a.434.434 0 0 0 .437-.43V.43a.434.434 0 0 0-.437-.43H23.239a.702.702 0 0 0-.506.214l-3.44 3.559-3.44-3.56A.712.712 0 0 0 15.346 0H3.944a.707.707 0 0 0-.507.214L.192 3.583A.68.68 0 0 0 0 4.056V18.57c0 .238.196.431.437.431h5.254a.434.434 0 0 0 .437-.43V6.827c0-.393.323-.71.722-.71h5.596c.399 0 .722.317.722.71v11.741c0 .238.196.431.437.431h5.253a.434.434 0 0 0 .438-.43v-3.335l3.437 3.552a.706.706 0 0 0 .506.213h12.324a.434.434 0 0 0 .437-.43v-5.173a.434.434 0 0 0-.437-.431H26.14a.716.716 0 0 1-.721-.71V6.744c0-.393.323-.71.721-.71' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E")
}

html.dark-mode:not([data-user-client=NGPClient]) body[data-market=NCV] {
    --login-bi: url(../../img/common/bi-vng_dark.svg)
}

html[data-user-client=NGPClient] {
    --login-bi: none;
    --login-bi-height: 80px;
    --header-pad: 40px 0 60px 0;
    --header-tablet-pad: 40px 0 60px 0;
    --btn-login-font-size: 1.4rem;
    --account-info-padding: 0px 0 30px 0
}

html[data-user-client=NGPClient] .desc {
    --text-info: hsla(0,0%,100%,.5)
}

html[data-user-client=NGPClient] .dropdown {
    --text-secondary: hsla(0,0%,100%,.94)
}

html[data-user-client=NGPClient] .account-info {
    --text-primary: hsla(0,0%,100%,.5)
}

html[data-user-client=NGPClient] .ncv-login-contents {
    --header-pad: 40px 0;
    --account-info-padding: 30px 0
}

[data-user-platform=steam] {
    --gradient1: #751cff;
    --gradient2: #b142fe
}

.result-section .info-help ul.list li,.saved-account__list {
    list-style: none
}

.console-scroll-bar::-webkit-scrollbar-track {
    background-color: transparent
}

.console-scroll-bar::-webkit-scrollbar {
    height: 1.8rem;
    width: 1.4rem
}

.console-scroll-bar::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #bababd;
    background-color: var(--scroll-thumb-color);
    border: .3rem solid transparent;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: inset -1px -1px 0 rgba(0,0,0,.05),inset 1px 1px 0 rgba(0,0,0,.05);
    height: .6rem
}

.console-scroll-bar::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0
}

.console-scroll-bar::-webkit-scrollbar-corner {
    background-color: transparent
}

.login-contents .select_country .dropdown .select-box .list::-webkit-scrollbar-track,.modals .modal .content::-webkit-scrollbar-track,.web-scroll-bar::-webkit-scrollbar-track {
    background-color: hsla(0,0%,100%,.122)
}

.login-contents .select_country .dropdown .select-box .list::-webkit-scrollbar,.modals .modal .content::-webkit-scrollbar,.web-scroll-bar::-webkit-scrollbar {
    height: 18px;
    width: 14px
}

.login-contents .select_country .dropdown .select-box .list::-webkit-scrollbar-thumb,.modals .modal .content::-webkit-scrollbar-thumb,.web-scroll-bar::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #d5d9e2;
    background-color: var(--arrow-normal);
    border: 4px solid transparent;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: inset -1px -1px 0 rgba(0,0,0,.05),inset 1px 1px 0 rgba(0,0,0,.05);
    height: 6px
}

.login-contents .select_country .dropdown .select-box .list::-webkit-scrollbar-button,.modals .modal .content::-webkit-scrollbar-button,.web-scroll-bar::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0
}

.login-contents .select_country .dropdown .select-box .list::-webkit-scrollbar-corner,.modals .modal .content::-webkit-scrollbar-corner,.web-scroll-bar::-webkit-scrollbar-corner {
    background-color: transparent
}

.spinner {
    -webkit-animation: ani-rotate 1.3s ease-out infinite;
    animation: ani-rotate 1.3s ease-out infinite
}

.spinner i {
    -webkit-animation: ani-rotate-dot 1.3s ease-out infinite;
    animation: ani-rotate-dot 1.3s ease-out infinite
}

@-webkit-keyframes ani-rotate {
    0%,50% {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@keyframes ani-rotate {
    0%,50% {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@-webkit-keyframes ani-rotate-dot {
    0%,50% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes ani-rotate-dot {
    0%,50% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.fade-enter-active,.fade-leave-active {
    overflow: hidden;
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
    -webkit-transition-property: height,opacity;
    transition-property: height,opacity;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease
}

.fade-enter,.fade-leave-active {
    opacity: 0
}

.slide-left-enter-active,.slide-left-leave-active,.slide-right-enter-active,.slide-right-leave-active {
    overflow: hidden;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: height,opacity,-webkit-transform;
    transition-property: height,opacity,-webkit-transform;
    transition-property: height,opacity,transform;
    transition-property: height,opacity,transform,-webkit-transform;
    -webkit-transition-timing-function: cubic-bezier(.55,0,.1,1);
    transition-timing-function: cubic-bezier(.55,0,.1,1)
}

.slide-left-enter,.slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(2em);
    transform: translate(2em)
}

.slide-left-leave-active,.slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-2em);
    transform: translate(-2em)
}

.zoom-enter-active,.zoom-leave-active {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoom;
    animation-name: zoom
}

.zoom-leave-active {
    animation-direction: reverse
}

@-webkit-keyframes zoom {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    to {
        opacity: 1
    }
}

@keyframes zoom {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    to {
        opacity: 1
    }
}

.slide-fade-enter-active {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.slide-fade-enter,.slide-fade-leave-to {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
}

@-webkit-keyframes loader-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes loader-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.connecting-page-wrap {
    height: 100%;
    left: 0;
    max-height: 800px;
    min-height: 400px;
    position: fixed;
    top: 0;
    width: 100%
}

.connecting-page-wrap,.connecting-page-wrap .spin-dot {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center
}

.connecting-page-wrap .spin-dot {
    line-height: 1;
    position: relative
}

.connecting-page-wrap .spin-dot>i {
    -webkit-animation: loader-scale .8s ease infinite alternate;
    animation: loader-scale .8s ease infinite alternate;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-appearance: none;
    background-color: #004c98;
    border-radius: 50%;
    display: inline-block;
    font-style: normal;
    height: 13px;
    margin: 0 9px;
    vertical-align: top;
    width: 13px
}

.connecting-page-wrap .spin-dot>i:first-child {
    -webkit-animation-delay: .16s;
    animation-delay: .16s
}

.connecting-page-wrap .spin-dot>i:nth-child(2) {
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

.connecting-page-wrap .spin-dot>i:nth-child(3) {
    -webkit-animation-delay: .48s;
    animation-delay: .48s
}

input[placeholder] {
    text-overflow: ellipsis
}

.wrap_captcha {
    font-size: 0;
    line-height: 0;
    text-align: center
}

.wrap_captcha .hide-badge {
    font-size: medium;
    line-height: 1.4
}

.wrap_captcha .hide-badge .grecaptcha-badge {
    visibility: hidden
}

.wrap_captcha>div {
    display: inline-block;
    vertical-align: top
}

.wrap_captcha .input-captcha {
    padding: 2px 0
}

.wrap_captcha .input-captcha .msg.invalid {
    text-align: center
}

#grecaptcha-brand {
    display: none;
    padding-top: 20px;
    text-align: center
}

#grecaptcha-brand .recaptcha-policies {
    color: #b1b4c1;
    color: var(--text-copy);
    display: block;
    font-size: 12px
}

#grecaptcha-brand .recaptcha-policies a {
    color: currentColor
}

body {
    height: 100%
}

@media screen and (max-height: 480px) {
    body>div:last-child[style*=visibility]>div:last-child {
        height:100vh!important;
        overflow-y: auto!important
    }
}

.input-captcha.text-captcha {
    min-width: 320px;
    padding-bottom: 5px;
    position: relative
}

@media(min-width: 960px) {
    .input-captcha.text-captcha {
        width:100%
    }
}

.input-captcha.text-captcha .wrap-text-captcha {
    background-color: #fafafa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 15px;
    width: 100%
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-img {
    height: 69px;
    width: 134px
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-img img {
    height: 69px;
    width: 124px
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text label {
    display: none
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    background: var(--textfield-normal);
    border: 1px solid #c6cfd8;
    border: 1px solid var(--textfield-border-normal);
    border-radius: 0;
    color: var(--textfield-text-normal);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    justify-content: center;
    outline: none;
    padding: 0 15px;
    vertical-align: middle;
    width: 100%
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input ::-webkit-validation-bubble-message {
    display: none
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-clear,.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-reveal {
    display: none
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:focus {
    outline: none
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-webkit-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-moz-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-ms-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:focus {
    background-color: #fff;
    background-color: var(--textfield-active);
    border: 1px solid #7985a2;
    border: 1px solid var(--textfield-border-active);
    color: #535768;
    color: var(--textfield-text-active)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input.invalid {
    border: 1px solid #da3f34;
    border: 1px solid var(--border-danger)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:disabled {
    -webkit-text-fill-color: inherit;
    background-color: #edf0f3;
    background-color: var(--textfield-disabled);
    border: 1px solid #d5d9e2;
    border: 1px solid var(--textfield-border-disabled);
    color: #b8b8b8;
    color: var(--textfield-text-disabled);
    opacity: 1
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:disabled::-webkit-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:disabled::-moz-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:disabled:-ms-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:disabled::-ms-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:disabled::placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-webkit-input-placeholder {
    color: var(--text-info)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-moz-placeholder {
    color: var(--text-info)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-input-placeholder {
    color: var(--text-info)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::placeholder {
    color: var(--text-info)
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-ms-input-placeholder {
    color: var(--text-info)
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-webkit-input-placeholder {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-moz-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-ms-input-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-input-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::placeholder {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:active,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:hover,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text select:-webkit-autofill,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text select:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text select:-webkit-autofill:hover,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text textarea:-webkit-autofill,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text textarea:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #535768!important;
    -webkit-text-fill-color: var(--textfield-text-normal)!important;
    -webkit-box-shadow: inset 0 0 0 30px #fff!important;
    -webkit-box-shadow: 0 0 0 30px var(--textfield-normal) inset!important
}

html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:active:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-webkit-autofill:hover:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text select:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text select:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text select:-webkit-autofill:hover:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text textarea:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text textarea:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text textarea:-webkit-autofill:hover:disabled {
    -webkit-text-fill-color: #b8b8b8!important;
    -webkit-text-fill-color: var(--textfield-text-disabled)!important;
    -webkit-box-shadow: inset 0 0 0 30px #edf0f3!important;
    -webkit-box-shadow: 0 0 0 30px var(--textfield-disabled) inset!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input[type=number]::-webkit-inner-spin-button,.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input[type=number] {
    -moz-appearance: textfield
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input {
    ime-mode: active!important;
    color: #535768;
    font-size: 14px!important;
    height: 38px!important;
    padding: 0 10px!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-webkit-input-placeholder {
    font-size: 14px!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-moz-placeholder {
    font-size: 14px!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-input-placeholder {
    font-size: 14px!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::placeholder {
    font-size: 14px!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-webkit-input-placeholder {
    color: #9398aa
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-moz-placeholder {
    color: #9398aa
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::-ms-input-placeholder {
    color: #9398aa
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input::placeholder {
    color: #9398aa
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-ms-input-placeholder {
    font-size: 14px!important
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .input-text input:-ms-input-placeholder {
    color: #9398aa
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .reload {
    color: #535768;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    margin-top: 10px;
    text-decoration: underline
}

.input-captcha.text-captcha .wrap-text-captcha .captcha-text .reload:before {
    background-image: url(../../img/icons/icon-refresh.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    content: "";
    display: inline-block;
    height: 19px;
    margin-left: 0;
    margin-right: 3px;
    margin-top: 0;
    vertical-align: middle;
    width: 18px
}

[dir=rtl] .input-captcha.text-captcha .wrap-text-captcha .captcha-text .reload:before {
    margin-left: 3px;
    margin-right: 0
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    .input-captcha.text-captcha .wrap-text-captcha .captcha-text .reload:before {
        background-image:url(../../img/icons/icon-refresh@2x.png)
    }
}

.vn-fade-enter-active,.vn-fade-leave-active,.vn-fade-move {
    -webkit-transition: all .5s;
    transition: all .5s
}

.vn-fade-enter,.vn-fade-leave-to {
    opacity: 0
}

.vue-toast-group {
    display: block;
    left: 0;
    position: fixed;
    right: auto;
    width: 100%;
    z-index: 9999999
}

[dir=rtl] .vue-toast-group {
    left: auto;
    right: 0
}

.vue-toast-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    overflow: hidden;
    padding: 0 10px;
    width: 100%
}

.vue-toast-template {
    background-color: #404040;
    border-radius: 20px;
    margin: 0 auto 16px;
    max-width: 560px;
    padding: 12px 20px;
    text-align: center
}

.vue-toast-template .toast-content {
    color: hsla(0,0%,100%,.8);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.36
}

.notifications {
    word-wrap: break-word;
    width: 100%;
    word-break: break-all
}

.notifications .notification-content {
    padding-top: 8px
}

.notifications .notification-content>p {
    opacity: .8
}

.timer {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    height: var(--ui-input-height);
    left: auto;
    position: absolute;
    right: 15px;
    top: 0
}

[dir=rtl] .timer {
    left: 15px;
    right: auto
}

.timer>p {
    font-size: 14px;
    line-height: 1.5
}

.timer>p.title {
    margin-left: 0;
    margin-right: 3px
}

[dir=rtl] .timer>p.title {
    margin-left: 3px;
    margin-right: 0
}

.timer>p:not(.title) {
    color: #03a1e0!important;
    color: var(--text-success)!important
}

.timer.lack>p:not(.title) {
    color: #da3f34!important;
    color: var(--text-danger)!important
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

body,button,input,select,table,textarea {
    -webkit-font-smoothing: subpixel-antialiased
}

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    background-color: var(--body-bg);
    font-size: 62.5%;
    min-width: 320px
}

@media(min-width: 960px) {
    html {
        background-color:#fff;
        background-color: var(--body-pc-bg)
    }
}

body {
    font-family: Noto Sans,Noto Sans JP,Noto Sans KR,Noto Sans Thai,Noto Sans Arabic,-apple-system,BlinkMacSystemFont,Roboto,Arial,Microsoft YaHei,Microsoft JhengHei,sans-serif;
    font-size: 14px;
    letter-spacing: -.42px;
    line-height: 1.5
}

body * {
    font-family: Noto Sans,Noto Sans JP,Noto Sans KR,Noto Sans Thai,Noto Sans Arabic,-apple-system,BlinkMacSystemFont,Roboto,Arial,Microsoft YaHei,Microsoft JhengHei,sans-serif;
    letter-spacing: 0!important
}

body[data-market=NCT] {
    font-family: Open Sans,Noto Sans TC
}

body,body #container,body #container .wrap-contents {
    background-color: #fff;
    background-color: var(--body-bg);
    color: #9398aa;
    color: var(--text-info)
}

@media(min-width: 960px) {
    body,body #container,body #container .wrap-contents {
        background-color:#fff;
        background-color: var(--body-pc-bg);
        letter-spacing: -.7px
    }
}

body #container .wrap-contents.main {
    background-color: #efeff4;
    background-color: var(--body-main-bg)
}

@media(min-width: 960px) {
    body #container .wrap-contents.main {
        background-color:#fff;
        background-color: var(--body-pc-bg)
    }
}

#dimmed {
    z-index: 99999999
}

.v--modal-overlay {
    background: rgba(0,0,0,.65)!important;
    z-index: 9999999!important
}

#modals-container .v--modal {
    background-color: transparent;
    border-radius: 5px;
    left: 0!important;
    margin: 0 auto
}

#modals-container .v--modal-scrolling {
    left: 0!important;
    margin: 0 auto;
    padding: 20px 40px
}

#modals-container .v--modal-scrolling .modals.scrolling {
    background-color: #fff;
    background-color: var(--base);
    border-radius: 5px;
    height: 100%!important;
    min-height: 200px
}

#modals-container .v--modal-scrolling .modals.scrolling .content {
    height: calc(100% - 120px);
    left: 0;
    margin: 20px 60px;
    padding: 0;
    position: absolute!important;
    right: auto;
    top: 80px;
    width: calc(100% - 120px)
}

[dir=rtl] #modals-container .v--modal-scrolling .modals.scrolling .content {
    left: auto;
    right: 0
}

#modals-container .v--modal-scrolling .modals.scrolling .content .view-body {
    margin-bottom: 20px;
    overflow-y: scroll
}

#modals-container .v--modal-scrolling .modals.scrolling .content .view-body::-webkit-scrollbar-track {
    background-color: #fff;
    background-color: var(--base)
}

#modals-container .v--modal-scrolling .modals.scrolling .content .view-body::-webkit-scrollbar {
    background-color: #fff;
    background-color: var(--base);
    height: 3px;
    width: 3px
}

#modals-container .v--modal-scrolling .modals.scrolling .content .view-body::-webkit-scrollbar-thumb {
    background-color: #d5d9e2;
    background-color: var(--arrow-normal);
    border-radius: 3px
}

#modals-container .v--modal-scrolling .modals.scrolling .content .view-body .MsoNormal {
    font-size: inherit!important
}

#modals-container .v--modal-scrolling .modals.scrolling .content .view-body .MsoNormal a {
    color: #007fff!important
}

#modals-container .v--modal-scrolling .modals.scrolling .content .loader-wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%
}

.modals .dimmer {
    background-color: rgba(0,0,0,.65);
    height: 100%;
    left: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 100%
}

[dir=rtl] .modals .dimmer {
    left: auto;
    right: 0
}

.modals .modal {
    background-color: transparent;
    overflow: hidden;
    -webkit-transition: all .4s cubic-bezier(.25,.46,.45,.94);
    transition: all .4s cubic-bezier(.25,.46,.45,.94)
}

.modals .modal .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: #fff;
    background-color: var(--card-bg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: calc(100vh - 70px);
    min-height: 140px;
    overflow: auto;
    padding: 30px 20px;
    position: relative;
    text-align: center
}

.modals .modal .content .text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-weight: 300;
    text-align: center;
    word-break: keep-all
}

.modals .modal .content .text>div {
    width: 100%
}

.modals .modal .content .text small {
    white-space: normal;
    word-break: break-all
}

.modals .modal .content.v-align-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.modals .modal .content.v-align-center .text {
    -webkit-box-flex: initial;
    -ms-flex-positive: initial;
    flex-grow: 0
}

.modals .modal .content.h-align-center .text {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.modals .modal .content.no-msg .title {
    margin: 0
}

.modals .modal .content h2 {
    color: #535768;
    color: var(--text-primary)
}

.modals .modal .content h2.title {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    margin-bottom: 10px
}

.modals .modal .content h2.title em {
    font-style: normal
}

.modals .modal .content input[type=text] {
    font-size: 16px;
    line-height: 1.44;
    margin-top: 15px;
    padding: 14px 15px;
    width: 100%
}

.modals .modal .content p {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.modals .modal .content p em {
    font-style: normal
}

.modals .modal .content p a,.modals .modal .content p em {
    color: #007fff;
    color: var(--text-em)
}

.modals .modal .content .desc {
    font-size: 14px
}

.modals .modal .content .info {
    line-height: 1.47;
    text-align: left
}

[dir=rtl] .modals .modal .content .info {
    text-align: right
}

.modals .modal .content b {
    font-weight: 400
}

.modals .modal .content .link {
    color: #007fff;
    color: var(--text-em);
    font-weight: 700
}

.modals .modal .content input[type=text] {
    background-color: #fff;
    background-color: var(--textfield-normal);
    border: 1px solid #c6cfd8;
    border: 1px solid var(--textfield-border-normal);
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal .content input[type=text]::-webkit-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal .content input[type=text]::-moz-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal .content input[type=text]:-ms-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal .content input[type=text]:-moz-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal .content input[type=text]:focus {
    border: 1px solid #007fff;
    border: 1px solid var(--text-em);
    color: #535768;
    color: var(--text-secondary)
}

.modals .modal .content p {
    color: #535768;
    color: var(--text-primary)
}

.modals .modal .content .desc {
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal .content .info {
    color: #535768;
    color: var(--text-primary)
}

.modals .modal .content b {
    color: #007fff;
    color: var(--text-em)
}

.modals .modal .content strong {
    color: #da3f34;
    color: var(--text-danger);
    font-weight: 400
}

.modals .modal.agree {
    width: 365px
}

.modals .modal.agree p {
    font-weight: 400
}

.modals .modal.agree .content {
    padding: 30px 20px
}

.modals .modal.agree .content .title {
    font-weight: 400
}

.modals .modal.agree .more {
    display: block;
    font-size: 14px;
    letter-spacing: -.5px;
    padding: 7px 0 0;
    position: relative;
    text-align: left
}

[dir=rtl] .modals .modal.agree .more {
    text-align: right
}

.modals .modal.agree .more em {
    font-style: normal;
    font-weight: 600
}

.modals .modal.agree .more a {
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    margin-left: 5px;
    margin-right: 0;
    padding-left: 0;
    padding-right: 12px;
    position: relative;
    white-space: nowrap
}

[dir=rtl] .modals .modal.agree .more a {
    margin-left: 0;
    margin-right: 5px;
    padding-left: 12px;
    padding-right: 0
}

.modals .modal.agree .more a .icon {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #378ff1;
    display: inline-block;
    height: 0;
    margin: 1px 0 5px 5px;
    vertical-align: middle;
    vertical-align: top;
    width: 0
}

.modals .modal.agree .more a.on .icon {
    margin-top: -2px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.modals .modal.agree .desc {
    display: block;
    font-size: 13px;
    letter-spacing: normal;
    line-height: 1.54;
    margin-top: 10px;
    padding: 10px 15px;
    text-align: left
}

[dir=rtl] .modals .modal.agree .desc {
    text-align: right
}

.modals .modal.agree .desc b {
    color: currentColor!important;
    font-weight: 700
}

.modals .modal.agree .more {
    color: #9398aa;
    color: var(--text-sub)
}

.modals .modal.agree .more a {
    color: #007fff;
    color: var(--text-em)
}

.modals .modal.agree .desc {
    background-color: #f5f5f5;
    background-color: var(--bg-grey-2);
    color: #9398aa;
    color: var(--text-info)
}

.modals .modal.extend-text-box .content>p {
    margin: 0 -9px
}

.modals.scrolling header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    background-color: var(--base);
    border-bottom: 1px solid #c6cfd8;
    border-bottom: 1px solid var(--border-normal);
    border-radius: 5px 5px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 60px;
    padding: 0 40px 0 20px;
    position: absolute;
    top: 20px;
    width: calc(100% - 80px);
    z-index: 10
}

[dir=rtl] .modals.scrolling header {
    padding: 0 20px 0 10px
}

.modals.scrolling header h1 {
    color: #535768;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    vertical-align: middle
}

.modals.scrolling .content {
    background-color: #fff;
    background-color: var(--base);
    color: #9398aa;
    color: var(--text-info);
    font-size: 13px
}

.modals.scrolling .content .view-body {
    font-size: 13px;
    padding: 0 10px 0 0;
    text-align: left
}

[dir=rtl] .modals.scrolling .content .view-body {
    padding: 0 0 0 10px;
    text-align: right
}

.modals.scrolling .content .view-body p {
    font-size: 13px
}

.modals.scrolling .content .view-body .sub-title {
    color: #535768!important;
    color: var(--text-primary)!important
}

.modals.scrolling .content .view-body img {
    max-width: 100%
}

.modals.scrolling .content .view-body p,.modals.scrolling .content .view-body span {
    font-family: Noto Sans,Noto Sans JP,Noto Sans KR,Noto Sans Thai,Noto Sans Arabic,-apple-system,BlinkMacSystemFont,Roboto,Arial,Microsoft YaHei,Microsoft JhengHei,sans-serif!important
}

.modals.scrolling .content .view-body b {
    color: inherit!important
}

.modals.scrolling .content .view-body p {
    word-break: normal!important
}

.modals.scrolling .content .view-body {
    color: #9398aa;
    color: var(--text-info)
}

.modals.scrolling .content .view-body table {
    background-color: transparent!important
}

.modals.scrolling .content .view-body p,.modals.scrolling .content .view-body span {
    color: #9398aa!important;
    color: var(--text-info)!important
}

.modals.scrolling .content .view-body h1,.modals.scrolling .content .view-body h2 {
    color: #535768;
    color: var(--text-primary)
}

.modals .icon {
    left: auto;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[dir=rtl] .modals .icon {
    left: 0;
    right: auto
}

.modals .icon.picture {
    background-image: url(../../img/icons/home/icon-album.svg);
    background-image: var(--icon-album);
    height: 22px;
    width: 26px
}

.modals .icon.default-image,.modals .icon.picture {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block
}

.modals .icon.default-image {
    background-image: url(../../img/icons/home/icon-profile.svg);
    background-image: var(--icon-profile);
    height: 28px;
    width: 28px
}

.modals .icon.close {
    background-color: transparent;
    border: 0;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 sans-serif;
    height: 30px;
    left: auto;
    position: relative;
    position: absolute;
    right: 10px;
    text-shadow: none;
    width: 30px
}

.modals .icon.close:hover:after,.modals .icon.close:hover:before {
    background: #6b7ea5;
    background: var(--icon-bg)
}

.modals .icon.close:after,.modals .icon.close:before {
    background: #b9bcc6;
    content: "";
    height: 1px;
    left: 5px;
    margin-top: -1px;
    position: absolute;
    right: auto;
    top: 15px;
    width: 64%
}

[dir=rtl] .modals .icon.close:after,[dir=rtl] .modals .icon.close:before {
    left: auto;
    right: 5px
}

.modals .icon.close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.modals .icon.close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

[dir=rtl] .modals .icon.close {
    left: 10px;
    right: auto
}

.modals .icon.close:after,.modals .icon.close:before {
    background-color: #6b7ea5;
    background-color: var(--icon-bg);
    height: 2px
}

.modals .list {
    list-style: none
}

.modals .list li {
    position: relative
}

.modals .list li:first-child a:after {
    background-color: #b2bacc;
    background-color: var(--list-item-bg);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    opacity: .25;
    position: absolute;
    right: 0
}

[dir=rtl] .modals .list li:first-child a:after {
    left: 0;
    right: 0
}

.modals .list li .icon {
    left: auto;
    right: 20px
}

[dir=rtl] .modals .list li .icon {
    left: 20px;
    right: auto
}

.modals .list a,.modals .list label {
    color: #535768;
    color: var(--text-primary);
    cursor: pointer;
    display: block;
    font-size: 16px;
    padding: 23px 20px;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.modals .list a:hover,.modals .list label:hover {
    background-color: #eaecf0;
    background-color: var(--list-item-hover)
}

.modals .file-list input[type=file] {
    clip: rect(0,0,0,0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.modals .file-list a,.modals .file-list label {
    text-align: left
}

[dir=rtl] .modals .file-list a,[dir=rtl] .modals .file-list label {
    text-align: right
}

.modals .actions:after {
    clear: both;
    content: "";
    display: table
}

html.dark-mode .modals .actions {
    background-color: #2d2d2d
}

.modals .actions button {
    color: #fff;
    color: var(--button-text-normal);
    float: left;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 50px;
    text-align: center;
    -webkit-transition: background-color .4s ease;
    transition: background-color .4s ease;
    width: 100%
}

[dir=rtl] .modals .actions button {
    float: right
}

.modals .actions button.cancel {
    background-color: #b7b7b7;
    background-color: var(--button-default)
}

.modals .actions button.cancel:hover {
    background-color: #aaa;
    background-color: var(--button-default-hover)
}

.modals .actions button.submit {
    background-color: #004c98;
    background-color: var(--button-primary)
}

.modals .actions button.submit:hover {
    background-color: #003569;
    background-color: var(--button-active)
}

.modals .actions button.submit:disabled {
    background-color: #edf0f3;
    background-color: var(--bg-disabled)
}

.modals .actions button.submit:disabled span {
    opacity: .5
}

.modals .actions.multiple button {
    width: 50%
}

.hidden {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto
}

[dir=rtl] .hidden {
    left: 10000px
}

.loader-wrap.cover {
    position: fixed
}

.loader-wrap.cover,.loader-wrap.cover:before {
    height: 100%;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    z-index: 99
}

[dir=rtl] .loader-wrap.cover,[dir=rtl] .loader-wrap.cover:before {
    left: auto;
    right: 0
}

@media(min-width: 960px) {
    .loader-wrap.cover {
        position:absolute
    }
}

.loader-wrap.cover:before {
    background-color: #fff;
    background-color: var(--base);
    content: "";
    display: block;
    opacity: .8;
    position: absolute
}

.loader-wrap.cover>div {
    left: 50%;
    margin: -30px 0 0 -30px;
    position: absolute;
    right: auto;
    top: 50%
}

[dir=rtl] .loader-wrap.cover>div {
    left: auto;
    margin: -30px -30px 0 0;
    right: 50%
}

.loader-wrap.mini,.loader-wrap.mini:before {
    position: absolute!important
}

.loader-wrap.mini:before {
    height: 100%!important
}

.loader-wrap.mini>div {
    margin: -15px 0 0 -15px
}

[dir=rtl] .loader-wrap.mini>div {
    margin: -15px -15px 0 0
}

.loader-wrap.mini>div .loader {
    border-width: 4px!important;
    height: 30px!important;
    width: 30px!important
}

.loader-wrap.fixed {
    position: fixed
}

.loader-wrap:not(.img)>div {
    display: inline-block
}

.loader-wrap:not(.img)>div .loader {
    border: 8px solid color-mix(in srgb,#4998f1 20%,transparent);
    border-left-color: #4998f1;
    border: 8px solid color-mix(in srgb,var(--loader) 20%,transparent);
    border-left-color: var(--loader);
    border-radius: 50%;
    font-size: 1px;
    margin: 0 auto;
    text-indent: -9999em
}

.loader-wrap.img .loader,.loader-wrap:not(.img)>div .loader {
    -webkit-animation: spin 1.1s linear infinite;
    animation: spin 1.1s linear infinite;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60px;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 60px;
    z-index: 999
}

.loader-wrap.img .loader {
    background-image: url("var(--img-loading).webp");
    background-image: -webkit-image-set(url("var(--img-loading).webp") 1x,url("var(--img-loading)@2x.webp") 2x)
}

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution:192dpi) {
    .loader-wrap.img .loader {
        background-image:url("var(--img-loading)@2x.webp")
    }
}

.wrapper.inapp .loader-wrap.cover {
    position: fixed
}

header.header+#container.wrapper {
    padding-top: 50px
}

body.noscroll {
    overflow: hidden
}

#container {
    height: 100vh;
    position: relative
}

#container.wrapper.inapp {
    height: auto;
    padding-top: 0!important
}

#container.wrapper.inapp .wrap-contents {
    overflow: visible;
    overflow: initial
}

#container.wrapper.inapp .wrap-contents:after {
    content: none!important
}

@media(min-width: 960px) {
    #container.wrapper.inapp .wrap-contents {
        margin-top:0!important
    }
}

#container.wrapper.footer--small .wrap-contents {
    margin-bottom: -90px
}

#container.wrapper.footer--small .wrap-contents:after,#container.wrapper.footer--small .wrap-footer {
    height: 90px
}

#container .wrap-contents {
    margin-bottom: -110px;
    min-height: 100%;
    overflow: hidden;
    padding: 0 20px
}

#container .wrap-contents:after {
    content: "";
    display: block;
    height: 110px
}

@media(min-width: 960px) {
    #container .wrap-contents {
        background-color:inherit;
        margin-bottom: -180px
    }

    #container .wrap-contents:after {
        height: 180px
    }
}

#container .wrap-footer {
    height: 110px
}

@media(min-width: 960px) {
    #container .wrap-footer {
        height:180px
    }
}

.contents {
    margin: 0 auto;
    max-width: 450px;
    min-height: 300px;
    padding-bottom: 60px;
    padding-top: 60px;
    position: relative
}

.contents>main.contents {
    padding: 0
}

@media(min-width: 960px) {
    .contents.full {
        max-width:510px
    }
}

body[data-market^=NCS] #container .wrap-contents {
    margin-bottom: -295px
}

body[data-market^=NCS] #container .wrap-contents:after {
    height: 295px
}

@media(min-width: 960px) {
    body[data-market^=NCS] #container .wrap-contents {
        margin-bottom:-370px
    }

    body[data-market^=NCS] #container .wrap-contents:after {
        height: 370px
    }
}

body[data-market^=NCS] #container .wrap-footer {
    height: 295px
}

@media(min-width: 960px) {
    body[data-market^=NCS] #container .wrap-footer {
        height:370px
    }
}

html[lang^=en] body[data-market^=NCS] #container .wrap-contents,html[lang^=id] body[data-market^=NCS] #container .wrap-contents,html[lang^=ru] body[data-market^=NCS] #container .wrap-contents {
    margin-bottom: -365px
}

html[lang^=en] body[data-market^=NCS] #container .wrap-contents:after,html[lang^=id] body[data-market^=NCS] #container .wrap-contents:after,html[lang^=ru] body[data-market^=NCS] #container .wrap-contents:after {
    height: 365px
}

@media(min-width: 960px) {
    html[lang^=en] body[data-market^=NCS] #container .wrap-contents,html[lang^=id] body[data-market^=NCS] #container .wrap-contents,html[lang^=ru] body[data-market^=NCS] #container .wrap-contents {
        margin-bottom:-410px
    }

    html[lang^=en] body[data-market^=NCS] #container .wrap-contents:after,html[lang^=id] body[data-market^=NCS] #container .wrap-contents:after,html[lang^=ru] body[data-market^=NCS] #container .wrap-contents:after {
        height: 410px
    }
}

html[lang^=en] body[data-market^=NCS] #container .wrap-footer,html[lang^=id] body[data-market^=NCS] #container .wrap-footer,html[lang^=ru] body[data-market^=NCS] #container .wrap-footer {
    height: 365px
}

@media(min-width: 960px) {
    html[lang^=en] body[data-market^=NCS] #container .wrap-footer,html[lang^=id] body[data-market^=NCS] #container .wrap-footer,html[lang^=ru] body[data-market^=NCS] #container .wrap-footer {
        height:410px
    }
}

body>.header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: #fff;
    background-color: var(--header-bg);
    border-bottom: 1px solid #d5d9e2;
    border-bottom: 1px solid var(--header-line);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: auto;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10
}

[dir=rtl] body>.header {
    left: auto;
    right: 0
}

body>.header .logo {
    line-height: 0;
    margin: 12px 0;
    padding: 0
}

body>.header .logo a {
    display: block
}

body>.header .logo span {
    background-color: transparent;
    background-image: url(../../img/common/footer-logo-nc.svg);
    background-image: var(--img-footer-logo);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    color: transparent;
    display: inline-block;
    font: 0/0 sans-serif;
    height: 25px;
    text-shadow: none;
    vertical-align: top;
    width: 47px
}

body[data-market^=NCV] .header .logo span {
    height: 30px;
    width: 140px
}

.wrap-contents {
    position: relative
}

.nc-phone-auth-signin .footer-area,.nc-phone-auth-signin .wrap-footer,.nc-signin .footer-area,.nc-signin .wrap-footer {
    background-color: #f6f6f6;
    background-color: var(--login-footer-bg)
}

.footer-area {
    padding-top: 30px
}

@media(min-width: 960px) {
    .footer-area {
        padding-top:60px
    }
}

.select-language {
    height: 44px;
    margin: 0 auto;
    text-align: center;
    width: 150px
}

.select-language .current {
    background-color: #fff;
    background-color: var(--select-lang-bg);
    border: 1px solid rgba(34,34,34,.08);
    border: 1px solid var(--select-lang-border);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    text-align: left;
    width: 150px
}

[dir=rtl] .select-language .current {
    text-align: right
}

.select-language .current span {
    color: rgba(0,0,0,.68);
    color: var(--select-lang-text);
    display: inline-block;
    font-size: 14px;
    overflow: hidden;
    padding-left: 0;
    padding-right: 20px;
    padding-top: 12px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: 125px
}

[dir=rtl] .select-language .current span {
    padding-left: 20px;
    padding-right: 0
}

.select-language .current:after {
    background-image: url(../../img/icons/icon-arrow-updown.svg);
    background-image: var(--icon-arrow-updown);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    content: "";
    display: block;
    height: 16px;
    left: auto;
    position: absolute;
    right: 15px;
    top: calc(50% - 8px);
    vertical-align: middle;
    width: 16px
}

[dir=rtl] .select-language .current:after {
    left: 15px;
    right: auto
}

.select-language .list {
    background-color: #fff;
    background-color: var(--select-lang-bg);
    border: 1px solid rgba(34,34,34,.08);
    border: 1px solid var(--select-lang-border);
    border-radius: 4px;
    padding: 10px 0;
    position: relative;
    text-align: center;
    -webkit-transform: translateY(calc(-100% - 48px));
    transform: translateY(calc(-100% - 48px));
    width: 150px;
    z-index: 9999
}

.select-language .list,.select-language ul {
    display: block;
    margin: 0 auto
}

.select-language li {
    color: rgba(0,0,0,.68);
    color: var(--select-lang-text);
    display: block;
    list-style: none;
    text-align: left;
    vertical-align: top
}

[dir=rtl] .select-language li {
    text-align: right
}

.select-language li span {
    cursor: pointer;
    display: block;
    font-size: 13px;
    padding: 6px 16px
}

.select-language li span:hover {
    text-decoration: underline
}

.select-language li[selected] {
    background-image: url(../../img/icons/icon-selected.svg);
    background-image: var(--icon-selected);
    background-position: 16px;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    font-weight: 700;
    padding-left: 14px;
    padding-right: 0
}

[dir=rtl] .select-language li[selected] {
    background-position: right 16px center;
    padding-left: 0;
    padding-right: 14px
}

.select-language+.footer:after {
    clear: both;
    content: "";
    display: table
}

.wrap-footer {
    position: relative;
    text-align: center
}

.wrap-footer .footer {
    position: absolute;
    width: 100%
}

@media(min-width: 960px) {
    .wrap-footer .footer {
        left:calc(50% - 450px);
        position: absolute;
        right: auto;
        width: 880px
    }

    [dir=rtl] .wrap-footer .footer {
        left: auto;
        right: calc(50% - 450px)
    }
}

.wrapper.footer--small .footer {
    font-size: 13px;
    padding: 0!important
}

.footer {
    color: #9398aa;
    color: var(--text-sub);
    margin: 0 auto;
    padding: 0
}

.footer .footer-links {
    border-bottom: 1px solid #e3e3e3;
    border-bottom: 1px solid var(--footer-line);
    border-top: 1px solid #e3e3e3;
    border-top: 1px solid var(--footer-line);
    display: none;
    margin: 30px 0 22px;
    padding: 18px 0
}

.footer .footer-links-list {
    -ms-flex-line-pack: start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-content: flex-start;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 24px;
    margin: 0 20px;
    overflow: auto;
    padding: 0 30px
}

.footer .footer-links-items {
    list-style-type: none;
    padding: 0 4px
}

.footer .footer-links-items>a {
    color: rgba(0,0,0,.6);
    color: var(--text-footer);
    line-height: 1;
    text-decoration: none
}

.footer .footer-links-items.privacy>a,.footer .footer-links-items.youth>a {
    font-weight: 700
}

.footer .footer-copyright {
    color: rgba(0,0,0,.38);
    color: var(--text-footer-copy);
    font-size: 12px;
    line-height: 1.5;
    padding-bottom: 25px;
    position: relative
}

.footer .footer-copyright a {
    color: currentColor;
    text-decoration: none
}

.footer .footer-info,.footer .footer-logo {
    display: none
}

.footer .copyright-company .reserved {
    display: block
}

.footer .footer-info a,.footer .footer-links-items a {
    -webkit-transition: all .33s ease;
    transition: all .33s ease
}

.footer .footer-info a:hover,.footer .footer-links-items a:hover {
    color: #535768;
    color: var(--text-primary)
}

@media(min-width: 960px) {
    .footer .footer-links {
        display:block
    }

    .footer .footer-links-list {
        border-width: 0;
        margin: 0!important
    }

    .footer .footer-links-items {
        font-size: 14px;
        padding: 0 15px;
        position: relative
    }

    .footer .footer-links-items.ncsoft {
        display: inline-block
    }

    .footer .footer-links-items:first-child:before {
        content: none
    }

    .footer .footer-links-items:before {
        background-color: #9398aa;
        background-color: var(--text-info);
        bottom: 6px;
        content: "";
        display: block;
        left: 0;
        opacity: .3;
        position: absolute;
        right: auto;
        top: 6px;
        width: 1px
    }

    [dir=rtl] .footer .footer-links-items:before {
        left: auto;
        right: 0
    }

    .footer .donotsell {
        font-size: 14px
    }

    .footer .footer-info,.footer .footer-logo {
        display: block
    }

    .footer .footer-logo {
        background-color: transparent;
        background-image: url(../../img/common/footer-logo-nc.svg);
        background-image: var(--img-footer-logo);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: contain;
        border: 0;
        color: transparent;
        display: inline-block;
        font: 0/0 sans-serif;
        height: 25px;
        text-shadow: none;
        vertical-align: middle;
        width: 47px
    }

    .footer .footer-logo.ncdinos {
        background: none!important;
        background-color: transparent;
        border: 0;
        color: transparent;
        display: inline-block;
        font: 0/0 sans-serif;
        height: 25px;
        margin-left: 16px;
        margin-right: 0;
        text-shadow: none;
        vertical-align: middle;
        width: 48px
    }

    [dir=rtl] .footer .footer-logo.ncdinos {
        margin-left: 0;
        margin-right: 16px
    }

    .footer .footer-logo.ncdinos:before {
        background-color: #e3e3e3;
        background-color: var(--footer-line);
        content: "";
        display: inline-block;
        height: 25px;
        margin-left: 0;
        margin-right: 16px;
        width: 1px
    }

    [dir=rtl] .footer .footer-logo.ncdinos:before {
        margin-left: 20px;
        margin-right: 0
    }

    .footer .footer-logo.ncdinos:after {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACTUExURUdwTAA0YQAzYQA0YgAyZAA0YgA0YgA0YjpdggA0YgA0YgE0YwI1YwAzYgAxYQA3YwM2ZAM2ZP///wA0YkFoigAzYgAzYgAyYAAzYgA1YiNQeAo4aAA0YgQ3ZAAzYkhujwAzYiBMduXr8v///2iHpBpJcgA0YQA0YgU4ZRhFcfeC+SxXfW5XpjdFhFR2lcRy2pJiu1PYmu0AAAAndFJOUwBl1o8I+UfdA5r+5bN6FhIu8g1g+1THIYU2yftqv9DVPKcnG2LkcTaF3agAAAG5SURBVEjHrZXXkoIwFIZpCalAsKCsvRHs7/906yHiOCPEZfW/IWTON5yO47SIkDh2uqgzkGWjUX3GmNLx+O8AwQMLQIh5uq5SQWDOUnLuefXb54DvB0GSeF5R9HpwE8dw5pzS7wBxzFhxlxCOE0WzGWO7XZbVzn4KSMlYr5cknBdFGEaR58G7Jf8dgfHY8zB2nDTNc32TUnXo3wKSxIS2Xvf7p9PlcjwK0RLs/QsvwNQOGKXpZlOW+5uOR60RGg6ljKL2SegKTKd5Dg7t99drWWptiogQtMw3AEKUOhz6/aLQerudz5fLMIQmqfPXBPAXgFkAjPUPAOfzfL5apTdhjFCL93dAPwFrYgcImc20LivlOUnhjlLOW4v3AA7lQeSVGbECvl/lsCqW78PNaATjOZlYAf0ESBsgJZgzRmndCLAAoN1bp60GsvcArBcwV2oweB6o1pXcEciy4dC0mMXjJkChxXsgCKREyDTxsztNjR+G/wGglkamVM1yXUh4Bfh/BmAX3o6wFEHNvwzXrYwc07f/ARYLY85YcwU+ByiF+grRlFAT6CNYA/hdASEmE8safHWpM/BOHwO/Vi9Kn+hfoasAAAAASUVORK5CYII=") 0/contain no-repeat;
        background: var(--img-footer-ncdinos) 0/contain no-repeat;
        content: "";
        display: inline-block;
        height: 25px;
        width: 25px
    }

    .footer .copyright-company .reserved {
        display: inline
    }
}

body[data-market^=NCS] .footer .footer-links {
    display: block
}

@media(min-width: 960px) {
    body[data-market^=NCS] .footer .footer-links .footer-links-list {
        border-bottom-width:1px;
        border-top-width: 1px
    }

    body[data-market^=NCS] .footer .footer-links .footer-links-items {
        padding: 0 10px
    }

    body[data-market^=NCS] .footer .footer-links .footer-links-items:before {
        content: none
    }
}

body[data-market^=NCT] .wrap-footer {
    background-color: transparent!important
}

body[data-market^=NCT] .footer {
    position: static!important
}

body[data-market^=NCT] .footer .footer-logo {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='77' height='21'%3E%3Cdefs%3E%3Cpath id='a' d='M0 .165h34.794v18.649H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23003568' d='M40.749 19.898c-.066 0-.11-.043-.11-.11l-.006-6.124c0-.044-.022-.066-.066-.066l-1.954.002c-.066 0-.11-.044-.11-.11v-.943c0-.066.043-.11.109-.11l5.335-.006c.065 0 .11.044.11.11v.944c0 .066-.043.11-.11.11l-1.953.002c-.044 0-.066.022-.066.066l.006 6.125c0 .065-.044.11-.11.11H40.75zm7.285-2.718-.99-2.897h-.033l-.996 2.9 2.019-.003zm-1.64-4.641c.022-.066.066-.11.143-.11l1.01-.001c.076 0 .12.044.142.11l2.532 7.241c.022.066 0 .11-.077.11l-1.075.001c-.077 0-.121-.032-.143-.11l-.495-1.448-2.81.003-.493 1.45c-.022.076-.066.11-.143.11h-1.064c-.077 0-.1-.044-.078-.11l2.55-7.246zm4.84-.005c0-.066.044-.11.11-.11l1.076-.001c.065 0 .11.044.11.11l.007 7.244c0 .066-.044.11-.11.11l-1.076.001a.104.104 0 0 1-.11-.11l-.007-7.244zm8.679 7.346c-.066 0-.11-.044-.132-.11l-1.432-5.103h-.022l-1.433 5.106c-.022.066-.066.11-.132.11h-.823c-.066 0-.11-.043-.132-.11l-1.84-7.242c-.01-.066.011-.11.088-.11h1.032c.076 0 .12.043.131.11l1.19 5.025h.023l1.39-5.029c.02-.066.065-.11.13-.11h.769c.076 0 .11.044.132.11l1.432 5.025h.021l1.148-5.028c.011-.077.066-.11.132-.11l1.02-.001c.077 0 .1.044.089.11l-1.816 7.246a.129.129 0 0 1-.131.11h-.834zm6.912-2.718-.991-2.897H65.8l-.996 2.898 2.02-.001zm-1.64-4.642c.021-.066.065-.11.142-.11h1.01c.077-.001.12.043.143.109l2.531 7.242c.022.065 0 .11-.076.11h-1.076c-.077 0-.12-.032-.143-.109l-.495-1.448-2.81.002-.493 1.45c-.021.077-.065.11-.142.11H62.71c-.077 0-.099-.043-.077-.109l2.55-7.247zm4.84-.005c0-.065.044-.11.11-.11h1.01c.087 0 .142.032.186.109l3.046 5.145h.044l-.006-5.148c0-.066.044-.11.11-.11l.955-.001c.066 0 .11.044.11.11l.007 7.244c0 .066-.044.11-.11.11l-.998.001c-.088 0-.143-.033-.187-.11l-3.057-5.134h-.044l.006 5.138c0 .065-.044.11-.11.11h-.955c-.066 0-.11-.043-.11-.11l-.007-7.244z'/%3E%3Cg transform='translate(1 1.112)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23003568' d='M25.266 6.088h9.105c.234 0 .423-.19.423-.423V.588a.423.423 0 0 0-.423-.423h-11.91a.678.678 0 0 0-.49.21l-3.325 3.493L15.322.375a.678.678 0 0 0-.49-.21H3.812a.678.678 0 0 0-.49.21L.186 3.681A.673.673 0 0 0 0 4.146v14.246c0 .233.19.422.423.422H5.5c.234 0 .423-.19.423-.422V6.866c0-.385.312-.697.697-.697h5.41c.385 0 .697.312.697.697v11.526c0 .233.189.422.422.422h5.078a.422.422 0 0 0 .422-.422v-3.273l3.323 3.486c.127.133.304.21.488.21h11.911c.234 0 .423-.19.423-.423v-5.078a.424.424 0 0 0-.423-.423h-9.105a.697.697 0 0 1-.698-.697V6.785c0-.385.312-.697.698-.697' mask='url(%23b)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    height: 21px;
    width: 77px
}

body[data-market^=NCV] .wrap-footer {
    background-color: transparent!important
}

.login-footer {
    margin-top: auto;
    padding: 25px 0;
    position: relative;
    text-align: center
}

.login-footer p {
    color: #b1b4c1;
    color: var(--text-copy);
    font-size: 11px;
    text-align: center;
    width: 100%
}

.login-footer p>span {
    display: block
}

@media(min-width: 960px) {
    .login-footer p {
        font-size:12px
    }

    .login-footer p>span {
        display: inline;
        display: initial
    }
}

body[data-market^=NCT] .wrap-footer .footer,body[data-market^=NCV] .wrap-footer .footer {
    padding-top: 40px
}

@media(min-width: 960px) {
    body[data-market^=NCT] .wrap-footer .footer,body[data-market^=NCV] .wrap-footer .footer {
        padding-top:0
    }
}

.contents,.phone-auth-contents {
    text-align: center
}

.contents h1,.phone-auth-contents h1 {
    color: #535768;
    color: var(--text-primary)
}

.contents h1.title,.phone-auth-contents h1.title {
    font-size: 28px
}

.contents h1.title+.desc,.phone-auth-contents h1.title+.desc {
    margin-top: 15px
}

.contents p,.phone-auth-contents p {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.contents p em,.phone-auth-contents p em {
    font-size: 18px;
    font-style: normal;
    font-weight: 700
}

.contents a,.phone-auth-contents a {
    color: currentColor
}

.contents a.btn-link,.phone-auth-contents a.btn-link {
    color: #0095ff;
    color: var(--text-link);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    line-height: 21px
}

.contents a.btn-link:after,.phone-auth-contents a.btn-link:after {
    clear: both;
    content: "";
    display: table
}

.contents a.btn-link .icon,.phone-auth-contents a.btn-link .icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    float: left;
    height: 21px;
    margin-left: 0;
    margin-right: 3px;
    vertical-align: middle;
    width: 21px
}

[dir=rtl] .contents a.btn-link .icon,[dir=rtl] .phone-auth-contents a.btn-link .icon {
    float: right;
    margin-left: 3px;
    margin-right: 0
}

.contents a.btn-link .icon.mark,.phone-auth-contents a.btn-link .icon.mark {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%234998F1'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.204 11.114V4.796h-1.56v6.318h1.56zm-.78 2.964c.286 0 .53-.1.735-.299a.965.965 0 0 0 .305-.715.915.915 0 0 0-.312-.702 1.043 1.043 0 0 0-.728-.286c-.286 0-.53.1-.734.299a.965.965 0 0 0-.306.715.967.967 0 0 0 .312.702c.095.087.206.156.332.208.125.052.257.078.396.078z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-ex-mark)
}

.contents a.btn-link .icon.mark2,.phone-auth-contents a.btn-link .icon.mark2 {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 0C14.747 0 19 4.253 19 9.5S14.747 19 9.5 19 0 14.747 0 9.5 4.253 0 9.5 0zm-.076 12.076c-.286 0-.53.1-.734.299a.966.966 0 0 0 .006 1.417c.095.087.206.156.332.208.125.052.257.078.396.078.286 0 .53-.1.735-.299a.97.97 0 0 0 .305-.715.916.916 0 0 0-.312-.702 1.045 1.045 0 0 0-.728-.286zm.78-7.28h-1.56v6.318h1.56V4.796z' fill='%239398AA' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-image: var(--icon-ex-mark-2);
    height: 19px;
    margin: 1px 6px 0 0;
    width: 19px
}

[dir=rtl] .contents a.btn-link .icon.mark2,[dir=rtl] .phone-auth-contents a.btn-link .icon.mark2 {
    margin: 1px 0 0 6px
}

.contents p,.phone-auth-contents p {
    color: #9398aa;
    color: var(--text-info)
}

.contents p em,.phone-auth-contents p em {
    color: #007fff;
    color: var(--text-em)
}

.contents a.link,.phone-auth-contents a.link {
    color: #0095ff;
    color: var(--text-link)
}

.contents .content-header,.phone-auth-contents .content-header {
    margin-bottom: 40px
}

.contents .content-info,.phone-auth-contents .content-info {
    margin-bottom: 10px;
    text-align: left
}

[dir=rtl] .contents .content-info,[dir=rtl] .phone-auth-contents .content-info {
    text-align: right
}

.contents .account-list .account-box,.phone-auth-contents .account-list .account-box {
    border: 1px solid #535768;
    border: 1px solid var(--content-line);
    margin-top: 8px;
    min-height: 56px;
    min-height: var(--ui-button-height);
    padding: 10px 10px 10px 15px;
    position: relative;
    text-align: left;
    -webkit-transition: border-color .3s ease;
    transition: border-color .3s ease;
    width: 100%
}

[dir=rtl] .contents .account-list .account-box,[dir=rtl] .phone-auth-contents .account-list .account-box {
    padding: 10px 15px 10px 10px;
    text-align: right
}

.contents .account-list .account-box input[type=radio],.phone-auth-contents .account-list .account-box input[type=radio] {
    display: none
}

.contents .account-list .account-box input[type=radio]+label,.phone-auth-contents .account-list .account-box input[type=radio]+label {
    background-color: #f7f7fa;
    background-color: var(--tab-bg);
    border: 1px solid #c6cfd8;
    border: 1px solid var(--border-normal);
    border-radius: 50%;
    display: block;
    height: 20px;
    padding: 4px;
    width: 20px
}

.contents .account-list .account-box input[type=radio]+label:before,.phone-auth-contents .account-list .account-box input[type=radio]+label:before {
    background-color: #007fff;
    background-color: var(--text-em);
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    width: 100%
}

.contents .account-list .account-box input[type=radio]:checked+label:before,.phone-auth-contents .account-list .account-box input[type=radio]:checked+label:before {
    opacity: 1
}

.contents .account-list .account-box.selected,.phone-auth-contents .account-list .account-box.selected {
    border: 1px solid #535768;
    border: 1px solid var(--content-header-line)
}

.contents .account-list .account-box:first-child,.phone-auth-contents .account-list .account-box:first-child {
    margin-top: 0
}

.contents .account-list .account-box .box-wrap,.phone-auth-contents .account-list .account-box .box-wrap {
    position: relative
}

.contents .account-list .account-box .account-info,.phone-auth-contents .account-list .account-box .account-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    line-height: 1;
    text-align: left;
    width: 100%
}

[dir=rtl] .contents .account-list .account-box .account-info,[dir=rtl] .phone-auth-contents .account-list .account-box .account-info {
    text-align: right
}

.contents .account-list .account-box .login-name,.phone-auth-contents .account-list .account-box .login-name {
    color: #535768;
    color: var(--text-primary);
    line-height: 1.4;
    vertical-align: top;
    word-break: break-word
}

.contents .account-list .account-box .account-info-content,.phone-auth-contents .account-list .account-box .account-info-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 0;
    position: relative;
    vertical-align: top;
    width: 100%
}

.contents .account-list .account-box .account-info-content .radio,.phone-auth-contents .account-list .account-box .account-info-content .radio {
    margin: 9px 10px 9px 0
}

[dir=rtl] .contents .account-list .account-box .account-info-content .radio,[dir=rtl] .phone-auth-contents .account-list .account-box .account-info-content .radio {
    margin: 9px 0 9px 10px
}

.contents .account-list .account-box .account-info-content .login-name,.contents .account-list .account-box .account-info-content h4,.phone-auth-contents .account-list .account-box .account-info-content .login-name,.phone-auth-contents .account-list .account-box .account-info-content h4 {
    margin: 8px 0
}

.contents .account-list .account-box .account-info-content h4,.phone-auth-contents .account-list .account-box .account-info-content h4 {
    color: #9398aa;
    color: var(--text-sub);
    font-weight: 400;
    line-height: 1.4;
    margin-left: 0;
    margin-right: 10px;
    min-width: 55px;
    vertical-align: top;
    white-space: nowrap
}

[dir=rtl] .contents .account-list .account-box .account-info-content h4,[dir=rtl] .phone-auth-contents .account-list .account-box .account-info-content h4 {
    margin-left: 10px;
    margin-right: 0
}

.contents .account-list .account-box .account-info-content .login-name,.phone-auth-contents .account-list .account-box .account-info-content .login-name {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.contents .account-list .account-box .account-info-content .login-name i,.phone-auth-contents .account-list .account-box .account-info-content .login-name i {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.contents .account-list .account-box .account-info-content em,.phone-auth-contents .account-list .account-box .account-info-content em {
    -webkit-box-flex: 0;
    color: #535768;
    color: var(--text-secondary);
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-style: normal;
    margin: 12px 0 12px auto;
    vertical-align: top
}

.contents .account-list .account-box .account-items,.phone-auth-contents .account-list .account-box .account-items {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 10px
}

[dir=rtl] .contents .account-list .account-box .account-items,[dir=rtl] .phone-auth-contents .account-list .account-box .account-items {
    padding-left: 10px;
    padding-right: 0
}

.contents .account-list .account-box .btn-wrap,.phone-auth-contents .account-list .account-box .btn-wrap {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 0 0 10px;
    vertical-align: top
}

[dir=rtl] .contents .account-list .account-box .btn-wrap,[dir=rtl] .phone-auth-contents .account-list .account-box .btn-wrap {
    margin: 0 10px 0 0
}

.contents .account-list .account-box .btn-wrap>button,.phone-auth-contents .account-list .account-box .btn-wrap>button {
    letter-spacing: -.5px
}

.contents .account-list .account-box .btn-wrap>button.btn-light,.phone-auth-contents .account-list .account-box .btn-wrap>button.btn-light {
    line-height: 1.3;
    min-height: 34px
}

.contents .account-list .account-box ul.account-connected,.phone-auth-contents .account-list .account-box ul.account-connected {
    list-style: none;
    margin-bottom: 8px;
    margin-top: 10px;
    text-align: left
}

[dir=rtl] .contents .account-list .account-box ul.account-connected,[dir=rtl] .phone-auth-contents .account-list .account-box ul.account-connected {
    text-align: right
}

.contents .account-list .account-box ul.account-connected li,.phone-auth-contents .account-list .account-box ul.account-connected li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    line-height: 1.4;
    margin-top: 10px;
    position: relative;
    white-space: normal
}

.contents .account-list .account-box ul.account-connected li:first-child,.phone-auth-contents .account-list .account-box ul.account-connected li:first-child {
    margin-top: 0
}

.contents .account-list .account-box ul.account-connected li>i,.phone-auth-contents .account-list .account-box ul.account-connected li>i {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.contents .account-list .account-box ul.account-connected li i.chain,.phone-auth-contents .account-list .account-box ul.account-connected li i.chain {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cg fill='%23ADB0BE' fill-rule='evenodd'%3E%3Cpath d='M5.352 8.258C3.568 8.258 2.116 6.796 2.116 5s1.452-3.258 3.236-3.258a3.21 3.21 0 0 1 2.31.985h1.859a4.734 4.734 0 0 0-4.17-2.5C2.735.227.612 2.364.612 5c0 2.636 2.123 4.773 4.74 4.773a4.733 4.733 0 0 0 4.17-2.5h-1.86a3.21 3.21 0 0 1-2.31.985M14.357.227c-1.8 0-3.367 1.01-4.169 2.5h1.859a3.21 3.21 0 0 1 2.31-.985c1.784 0 3.236 1.462 3.236 3.258s-1.452 3.258-3.236 3.258a3.21 3.21 0 0 1-2.31-.985h-1.859a4.734 4.734 0 0 0 4.17 2.5c2.617 0 4.74-2.137 4.74-4.773 0-2.636-2.123-4.773-4.74-4.773'/%3E%3Cpath d='M13.127 3.927H6.581c-.602 0-1.09.48-1.09 1.072a1.08 1.08 0 0 0 1.09 1.071h6.547c.602 0 1.09-.48 1.09-1.071 0-.592-.488-1.072-1.09-1.072'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-chain);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 20px auto;
    display: block;
    height: 22px;
    margin-left: 0;
    margin-right: 10px;
    width: 50px
}

[dir=rtl] .contents .account-list .account-box ul.account-connected li i.chain,[dir=rtl] .phone-auth-contents .account-list .account-box ul.account-connected li i.chain {
    margin-left: 10px;
    margin-right: 0
}

.contents .account-list .account-box ul.account-connected li span,.phone-auth-contents .account-list .account-box ul.account-connected li span {
    word-break: break-word
}

.contents .account-list .account-box i.icon,.phone-auth-contents .account-list .account-box i.icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    height: 20px;
    margin-left: 0;
    margin-right: 5px;
    vertical-align: top;
    width: 20px
}

[dir=rtl] .contents .account-list .account-box i.icon,[dir=rtl] .phone-auth-contents .account-list .account-box i.icon {
    margin-left: 5px;
    margin-right: 0
}

.contents .account-list .account-box i.icon.phone,.phone-auth-contents .account-list .account-box i.icon.phone {
    background-image: url(../../img/icons/icon-bi-phone.svg);
    background-image: var(--icon-bi-phone)
}

.contents .account-list .account-box i.icon.google,.phone-auth-contents .account-list .account-box i.icon.google {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%234285F4' d='M19.8 11.208c0-.65-.059-1.275-.167-1.875H11v3.546h4.933a4.216 4.216 0 0 1-1.83 2.767v2.3h2.963C18.8 16.35 19.8 14 19.8 11.208z'/%3E%3Cpath fill='%2334A853' d='M11 20.166c2.475 0 4.55-.82 6.066-2.22l-2.962-2.3c-.821.55-1.871.874-3.104.874-2.388 0-4.409-1.612-5.13-3.779H2.808v2.375A9.162 9.162 0 0 0 11 20.166z'/%3E%3Cpath fill='%23FBBC05' d='M5.87 12.741A5.516 5.516 0 0 1 5.583 11c0-.604.104-1.192.287-1.742V6.883H2.808a9.174 9.174 0 0 0 0 8.233l3.062-2.375z'/%3E%3Cpath fill='%23EA4335' d='M11 5.479c1.345 0 2.554.462 3.504 1.37l2.629-2.627C15.545 2.741 13.47 1.833 11 1.833a9.162 9.162 0 0 0-8.192 5.05L5.87 9.258c.721-2.167 2.742-3.78 5.13-3.78z'/%3E%3Cpath d='M1.833 1.833h18.333v18.333H1.833z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-google)
}

.contents .account-list .account-box i.icon.facebook,.phone-auth-contents .account-list .account-box i.icon.facebook {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-580-60H500v810H-580z'/%3E%3Cpath d='M.917.917h20.167v20.167H.917z'/%3E%3Crect width='20.167' height='20.167' x='.917' y='.917' fill='%23FFF' rx='10.083'/%3E%3Cpath fill='%231D7AEF' d='M20.625 11.059c0-5.348-4.31-9.684-9.625-9.684-5.316 0-9.625 4.336-9.625 9.684 0 4.833 3.52 8.84 8.121 9.566v-6.767H7.052v-2.8h2.444V8.926c0-2.427 1.437-3.767 3.636-3.767 1.053 0 2.154.189 2.154.189V7.73h-1.214c-1.195 0-1.568.746-1.568 1.512v1.817h2.67l-.427 2.8h-2.243v6.766c4.601-.726 8.121-4.733 8.121-9.566'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-facebook)
}

.contents .account-list .account-box i.icon.apple,.phone-auth-contents .account-list .account-box i.icon.apple {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-336-60H744v810H-336z'/%3E%3Cpath d='M.917 0h20.167v20.167H.917z'/%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M14.709 4.65c-1.535 0-2.774.881-3.574.881-.838 0-1.96-.832-3.29-.832-2.528 0-5.095 1.983-5.095 5.728 0 2.325.955 4.785 2.129 6.375l.347.464c.86 1.127 1.685 1.984 2.8 1.984 1.252 0 1.806-.795 3.367-.795 1.574 0 1.936.77 3.316.77s2.296-1.199 3.16-2.374c.955-1.346 1.368-2.667 1.381-2.729l-.106-.043c-.505-.22-2.603-1.302-2.603-3.848 0-2.472 2.064-3.586 2.18-3.672C17.366 4.7 15.29 4.65 14.71 4.65zm-.71-1.578c-.683.783-1.844 1.37-2.76 1.37a1.56 1.56 0 0 1-.271-.024l-.024-.135a1.629 1.629 0 0 1-.015-.208c0-1.003.542-1.982 1.11-2.606.735-.82 1.973-1.432 2.98-1.469.025.11.038.245.038.38 0 .99-.438 1.982-1.058 2.692z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-apple)
}

.contents .account-list .account-box i.icon.twitter,.phone-auth-contents .account-list .account-box i.icon.twitter {
    background-image: url(../../img/login/icon-s-twitter.svg);
    background-image: var(--icon-bi-twitter)
}

.contents .account-list .account-box i.icon.x,.phone-auth-contents .account-list .account-box i.icon.x {
    background-image: url(../../img/login/icon-s-x.svg);
    background-image: var(--icon-bi-x)
}

.contents .account-list .account-box i.icon.line,.phone-auth-contents .account-list .account-box i.icon.line {
    background-image: url(../../img/login/icon-s-line.svg);
    background-image: var(--icon-bi-line)
}

.contents .account-list .account-box i.icon.vk,.phone-auth-contents .account-list .account-box i.icon.vk {
    background-image: url(../../img/login/icon-s-vk.svg);
    background-image: var(--icon-bi-vk)
}

.contents .account-list .account-box i.icon.psn,.phone-auth-contents .account-list .account-box i.icon.psn {
    background-image: url(../../img/login/icon-s-psn.svg);
    background-image: var(--icon-bi-psn)
}

.contents .account-list .account-box i.icon.xbox,.phone-auth-contents .account-list .account-box i.icon.xbox {
    background-image: url(../../img/login/icon-s-xbox.svg);
    background-image: var(--icon-bi-xbox)
}

.contents .account-list .account-box i.icon.steam,.phone-auth-contents .account-list .account-box i.icon.steam {
    background-image: url(../../img/login/icon-steam.svg);
    background-image: var(--icon-bi-steam)
}

.contents .account-list .account-box i.icon.switch,.phone-auth-contents .account-list .account-box i.icon.switch {
    background-image: url(../../img/login/icon-switch.svg);
    background-image: var(--icon-bi-switch)
}

.contents .account-list .account-box i.icon.twitch,.phone-auth-contents .account-list .account-box i.icon.twitch {
    background-image: url(../../img/common/icon-twitch.svg);
    background-image: var(--icon-bi-twitch)
}

.contents .account-list .account-box i.icon.np,.phone-auth-contents .account-list .account-box i.icon.np {
    background-image: url(../../img/icons/icon-bi-global-nc.svg);
    background-image: var(--icon-bi-global-nc)
}

.contents .account-list .account-box i.icon.fb,.phone-auth-contents .account-list .account-box i.icon.fb {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-580-60H500v810H-580z'/%3E%3Cpath d='M.917.917h20.167v20.167H.917z'/%3E%3Crect width='20.167' height='20.167' x='.917' y='.917' fill='%23FFF' rx='10.083'/%3E%3Cpath fill='%231D7AEF' d='M20.625 11.059c0-5.348-4.31-9.684-9.625-9.684-5.316 0-9.625 4.336-9.625 9.684 0 4.833 3.52 8.84 8.121 9.566v-6.767H7.052v-2.8h2.444V8.926c0-2.427 1.437-3.767 3.636-3.767 1.053 0 2.154.189 2.154.189V7.73h-1.214c-1.195 0-1.568.746-1.568 1.512v1.817h2.67l-.427 2.8h-2.243v6.766c4.601-.726 8.121-4.733 8.121-9.566'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-facebook)
}

.contents .account-list .account-box i.icon.apple-jid,.contents .account-list .account-box i.icon.apple-sid,.contents .account-list .account-box i.icon.apple-tid,.contents .account-list .account-box i.icon.appleid,.phone-auth-contents .account-list .account-box i.icon.apple-jid,.phone-auth-contents .account-list .account-box i.icon.apple-sid,.phone-auth-contents .account-list .account-box i.icon.apple-tid,.phone-auth-contents .account-list .account-box i.icon.appleid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-336-60H744v810H-336z'/%3E%3Cpath d='M.917 0h20.167v20.167H.917z'/%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M14.709 4.65c-1.535 0-2.774.881-3.574.881-.838 0-1.96-.832-3.29-.832-2.528 0-5.095 1.983-5.095 5.728 0 2.325.955 4.785 2.129 6.375l.347.464c.86 1.127 1.685 1.984 2.8 1.984 1.252 0 1.806-.795 3.367-.795 1.574 0 1.936.77 3.316.77s2.296-1.199 3.16-2.374c.955-1.346 1.368-2.667 1.381-2.729l-.106-.043c-.505-.22-2.603-1.302-2.603-3.848 0-2.472 2.064-3.586 2.18-3.672C17.366 4.7 15.29 4.65 14.71 4.65zm-.71-1.578c-.683.783-1.844 1.37-2.76 1.37a1.56 1.56 0 0 1-.271-.024l-.024-.135a1.629 1.629 0 0 1-.015-.208c0-1.003.542-1.982 1.11-2.606.735-.82 1.973-1.432 2.98-1.469.025.11.038.245.038.38 0 .99-.438 1.982-1.058 2.692z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-apple)
}

.contents .account-list .account-box i.icon.switch,.phone-auth-contents .account-list .account-box i.icon.switch {
    background-color: #e60012;
    background-color: var(--login-switch-bg)
}

.contents .account-list .account-box i.icon.twitter,.phone-auth-contents .account-list .account-box i.icon.twitter {
    background-image: url(../../img/login/icon-s-x.svg)!important;
    background-image: var(--icon-bi-x)!important
}

.contents ul.info,.phone-auth-contents ul.info {
    list-style: none;
    margin-top: 20px;
    text-align: left
}

[dir=rtl] .contents ul.info,[dir=rtl] .phone-auth-contents ul.info {
    text-align: right
}

.contents ul.info.mt-25,.phone-auth-contents ul.info.mt-25 {
    margin-top: 25px
}

.contents ul.info li,.phone-auth-contents ul.info li {
    padding-left: 7px;
    padding-right: 0;
    position: relative
}

[dir=rtl] .contents ul.info li,[dir=rtl] .phone-auth-contents ul.info li {
    padding-left: 0;
    padding-right: 7px
}

.contents ul.info li:before,.phone-auth-contents ul.info li:before {
    background-color: #9398aa;
    background-color: var(--bg-info);
    border-radius: 50%;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    right: auto;
    top: 9px;
    width: 3px
}

[dir=rtl] .contents ul.info li:before,[dir=rtl] .phone-auth-contents ul.info li:before {
    left: auto;
    right: 0
}

.contents ul.info p,.phone-auth-contents ul.info p {
    font-size: 13px
}

.contents .signup-complete .content-header .desc,.phone-auth-contents .signup-complete .content-header .desc {
    background-color: transparent!important;
    color: #535768;
    color: var(--text-secondary);
    margin-top: 30px
}

.contents .signup-complete .content-header .desc .number,.phone-auth-contents .signup-complete .content-header .desc .number {
    display: block;
    font-weight: 700;
    margin-top: 15px
}

.contents .signup-complete .content-header .desc strong,.phone-auth-contents .signup-complete .content-header .desc strong {
    color: #007fff
}

.contents .signup-complete article .content-info,.phone-auth-contents .signup-complete article .content-info {
    font-size: 13px
}

.contents .signup-complete article .content-info a,.phone-auth-contents .signup-complete article .content-info a {
    border-bottom: 1px solid #007fff!important;
    text-decoration: none;
    vertical-align: baseline;
    vertical-align: initial
}

.contents .signup-complete article .content-info strong,.phone-auth-contents .signup-complete article .content-info strong {
    color: #007fff
}

.contents .btn-wrap a,.contents .btn-wrap button {
    vertical-align: middle
}

.contents .btn-wrap a.btn-primary,.contents .btn-wrap button.btn-primary {
    text-wrap: balance;
    background-color: #004c98;
    background-color: var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.contents .btn-wrap a.btn-primary.min-105,.contents .btn-wrap button.btn-primary.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-primary span,.contents .btn-wrap button.btn-primary span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.contents .btn-wrap a.btn-primary.disabled,.contents .btn-wrap a.btn-primary:disabled,.contents .btn-wrap button.btn-primary.disabled,.contents .btn-wrap button.btn-primary:disabled {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #fff;
    color: var(--button-text-disabled);
    cursor: default
}

.contents .btn-wrap a.btn-primary.disabled:active,.contents .btn-wrap a.btn-primary.disabled:hover,.contents .btn-wrap a.btn-primary:disabled:active,.contents .btn-wrap a.btn-primary:disabled:hover,.contents .btn-wrap button.btn-primary.disabled:active,.contents .btn-wrap button.btn-primary.disabled:hover,.contents .btn-wrap button.btn-primary:disabled:active,.contents .btn-wrap button.btn-primary:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.contents .btn-wrap a.btn-primary:hover,.contents .btn-wrap button.btn-primary:hover {
    background: #336fac;
    background: var(--button-hover);
    border-color: #336fac;
    border-color: var(--button-hover)
}

.contents .btn-wrap a.btn-primary:active,.contents .btn-wrap button.btn-primary:active {
    background: #003569;
    background: var(--button-active);
    border-color: #003569;
    border-color: var(--button-active)
}

.contents .btn-wrap a.btn-primary-v2,.contents .btn-wrap button.btn-primary-v2 {
    text-wrap: balance;
    background-color: #004c98;
    background-color: var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.contents .btn-wrap a.btn-primary-v2.min-105,.contents .btn-wrap button.btn-primary-v2.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-primary-v2 span,.contents .btn-wrap button.btn-primary-v2 span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.contents .btn-wrap a.btn-primary-v2.disabled,.contents .btn-wrap a.btn-primary-v2:disabled,.contents .btn-wrap button.btn-primary-v2.disabled,.contents .btn-wrap button.btn-primary-v2:disabled {
    background-color: #003c79;
    background-color: var(--button-primary-disabled);
    border-color: #003c79;
    border-color: var(--button-primary-disabled);
    color: hsla(0,0%,100%,.4);
    cursor: default
}

.contents .btn-wrap a.btn-primary-v2.disabled:active,.contents .btn-wrap a.btn-primary-v2.disabled:hover,.contents .btn-wrap a.btn-primary-v2:disabled:active,.contents .btn-wrap a.btn-primary-v2:disabled:hover,.contents .btn-wrap button.btn-primary-v2.disabled:active,.contents .btn-wrap button.btn-primary-v2.disabled:hover,.contents .btn-wrap button.btn-primary-v2:disabled:active,.contents .btn-wrap button.btn-primary-v2:disabled:hover {
    background-color: #003c79;
    background-color: var(--button-primary-disabled);
    border-color: #003c79;
    border-color: var(--button-primary-disabled)
}

.contents .btn-wrap a.btn-primary-v2:hover,.contents .btn-wrap button.btn-primary-v2:hover {
    background: #336fac;
    background: var(--button-hover);
    border-color: #336fac;
    border-color: var(--button-hover)
}

.contents .btn-wrap a.btn-primary-v2:active,.contents .btn-wrap button.btn-primary-v2:active {
    background: #003569;
    background: var(--button-active);
    border-color: #003569;
    border-color: var(--button-active)
}

.contents .btn-wrap a.btn-default,.contents .btn-wrap button.btn-default {
    text-wrap: balance;
    background-color: #b7b7b7;
    background-color: var(--button-default);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.contents .btn-wrap a.btn-default.min-105,.contents .btn-wrap button.btn-default.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-default span,.contents .btn-wrap button.btn-default span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.contents .btn-wrap a.btn-default.disabled,.contents .btn-wrap a.btn-default:disabled,.contents .btn-wrap button.btn-default.disabled,.contents .btn-wrap button.btn-default:disabled {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #fff;
    color: var(--button-text-normal);
    cursor: default
}

.contents .btn-wrap a.btn-default.disabled:active,.contents .btn-wrap a.btn-default.disabled:hover,.contents .btn-wrap a.btn-default:disabled:active,.contents .btn-wrap a.btn-default:disabled:hover,.contents .btn-wrap button.btn-default.disabled:active,.contents .btn-wrap button.btn-default.disabled:hover,.contents .btn-wrap button.btn-default:disabled:active,.contents .btn-wrap button.btn-default:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.contents .btn-wrap a.btn-default:active,.contents .btn-wrap a.btn-default:hover,.contents .btn-wrap button.btn-default:active,.contents .btn-wrap button.btn-default:hover {
    background: #b7b7b7;
    background: var(--button-default);
    border-color: #b7b7b7;
    border-color: var(--button-default)
}

.contents .btn-wrap a.btn-secondary,.contents .btn-wrap button.btn-secondary {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #007fff;
    border: 1px solid var(--text-em);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #007fff;
    color: var(--text-em);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.contents .btn-wrap a.btn-secondary.min-105,.contents .btn-wrap button.btn-secondary.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-secondary span,.contents .btn-wrap button.btn-secondary span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.contents .btn-wrap a.btn-secondary.disabled,.contents .btn-wrap a.btn-secondary:disabled,.contents .btn-wrap button.btn-secondary.disabled,.contents .btn-wrap button.btn-secondary:disabled {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #fff;
    color: var(--button-text-disabled);
    cursor: default
}

.contents .btn-wrap a.btn-secondary.disabled:active,.contents .btn-wrap a.btn-secondary.disabled:hover,.contents .btn-wrap a.btn-secondary:disabled:active,.contents .btn-wrap a.btn-secondary:disabled:hover,.contents .btn-wrap button.btn-secondary.disabled:active,.contents .btn-wrap button.btn-secondary.disabled:hover,.contents .btn-wrap button.btn-secondary:disabled:active,.contents .btn-wrap button.btn-secondary:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.contents .btn-wrap a.btn-secondary:active,.contents .btn-wrap a.btn-secondary:hover,.contents .btn-wrap button.btn-secondary:active,.contents .btn-wrap button.btn-secondary:hover {
    background: transparent;
    border-color: #007fff;
    border-color: var(--text-em)
}

.contents .btn-wrap a.btn-primary-inverse,.contents .btn-wrap button.btn-primary-inverse {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #004c98;
    border: 1px solid var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #004c98;
    color: var(--button-primary);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.contents .btn-wrap a.btn-primary-inverse.min-105,.contents .btn-wrap button.btn-primary-inverse.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-primary-inverse span,.contents .btn-wrap button.btn-primary-inverse span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.contents .btn-wrap a.btn-primary-inverse.disabled,.contents .btn-wrap a.btn-primary-inverse:disabled,.contents .btn-wrap button.btn-primary-inverse.disabled,.contents .btn-wrap button.btn-primary-inverse:disabled {
    background-color: transparent;
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #c6cfd8;
    color: var(--button-disabled);
    cursor: default
}

.contents .btn-wrap a.btn-primary-inverse.disabled:active,.contents .btn-wrap a.btn-primary-inverse.disabled:hover,.contents .btn-wrap a.btn-primary-inverse:disabled:active,.contents .btn-wrap a.btn-primary-inverse:disabled:hover,.contents .btn-wrap button.btn-primary-inverse.disabled:active,.contents .btn-wrap button.btn-primary-inverse.disabled:hover,.contents .btn-wrap button.btn-primary-inverse:disabled:active,.contents .btn-wrap button.btn-primary-inverse:disabled:hover {
    background-color: transparent;
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.contents .btn-wrap a.btn-primary-inverse:hover,.contents .btn-wrap button.btn-primary-inverse:hover {
    background: transparent;
    border-color: #336fac;
    border-color: var(--button-hover)
}

.contents .btn-wrap a.btn-primary-inverse:active,.contents .btn-wrap button.btn-primary-inverse:active {
    background: transparent;
    border-color: #003569;
    border-color: var(--button-active);
    color: #003569;
    color: var(--button-active)
}

.contents .btn-wrap a.btn-primary-inverse.disabled:active,.contents .btn-wrap a.btn-primary-inverse:disabled:active,.contents .btn-wrap button.btn-primary-inverse.disabled:active,.contents .btn-wrap button.btn-primary-inverse:disabled:active {
    color: #c6cfd8;
    color: var(--button-disabled)
}

.contents .btn-wrap a.btn-round,.contents .btn-wrap button.btn-round {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #d5d9e2;
    border: 1px solid var(--button-round-border);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #535768;
    color: var(--text-secondary);
    cursor: pointer;
    display: block;
    display: inline-block;
    font-size: 13px;
    margin: 0 auto;
    min-height: inherit;
    overflow: hidden;
    padding: 6px 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: inherit;
    word-break: break-word
}

.contents .btn-wrap a.btn-round.min-105,.contents .btn-wrap button.btn-round.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-round span,.contents .btn-wrap button.btn-round span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.contents .btn-wrap a.btn-round.disabled,.contents .btn-wrap a.btn-round:disabled,.contents .btn-wrap button.btn-round.disabled,.contents .btn-wrap button.btn-round:disabled {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled);
    color: #d5d9e2;
    color: var(--button-round-border-disabled);
    cursor: default
}

.contents .btn-wrap a.btn-round.disabled:active,.contents .btn-wrap a.btn-round.disabled:hover,.contents .btn-wrap a.btn-round:disabled:active,.contents .btn-wrap a.btn-round:disabled:hover,.contents .btn-wrap button.btn-round.disabled:active,.contents .btn-wrap button.btn-round.disabled:hover,.contents .btn-wrap button.btn-round:disabled:active,.contents .btn-wrap button.btn-round:disabled:hover {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled)
}

.contents .btn-wrap a.btn-round:active,.contents .btn-wrap a.btn-round:hover,.contents .btn-wrap button.btn-round:active,.contents .btn-wrap button.btn-round:hover {
    background: transparent;
    border-color: #535768;
    border-color: var(--button-round-border-hover)
}

.contents .btn-wrap a.btn-underline,.contents .btn-wrap button.btn-underline {
    text-wrap: balance;
    background-color: transparent;
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    font-size: 15px;
    line-height: inherit;
    margin: 20px auto;
    min-height: inherit;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: inherit;
    word-break: break-word
}

.contents .btn-wrap a.btn-underline.min-105,.contents .btn-wrap button.btn-underline.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-underline span,.contents .btn-wrap button.btn-underline span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.contents .btn-wrap a.btn-underline.disabled,.contents .btn-wrap a.btn-underline:disabled,.contents .btn-wrap button.btn-underline.disabled,.contents .btn-wrap button.btn-underline:disabled {
    background-color: transparent;
    border-color: transparent;
    color: #9398aa;
    color: var(--text-info);
    cursor: default
}

.contents .btn-wrap a.btn-underline.disabled:active,.contents .btn-wrap a.btn-underline.disabled:hover,.contents .btn-wrap a.btn-underline:disabled:active,.contents .btn-wrap a.btn-underline:disabled:hover,.contents .btn-wrap button.btn-underline.disabled:active,.contents .btn-wrap button.btn-underline.disabled:hover,.contents .btn-wrap button.btn-underline:disabled:active,.contents .btn-wrap button.btn-underline:disabled:hover {
    background-color: transparent;
    border-color: transparent
}

.contents .btn-wrap a.btn-underline:active,.contents .btn-wrap a.btn-underline:hover,.contents .btn-wrap button.btn-underline:active,.contents .btn-wrap button.btn-underline:hover {
    background: transparent;
    border-color: transparent
}

.contents .btn-wrap a.btn-underline span,.contents .btn-wrap button.btn-underline span {
    border-bottom: 1px solid #9398aa;
    border-bottom: 1px solid var(--text-info);
    display: inline-block
}

.contents .btn-wrap a.btn-underline.disabled,.contents .btn-wrap a.btn-underline:disabled,.contents .btn-wrap button.btn-underline.disabled,.contents .btn-wrap button.btn-underline:disabled {
    opacity: .5
}

.contents .btn-wrap a.btn-cancel,.contents .btn-wrap button.btn-cancel {
    text-wrap: balance;
    background-color: transparent;
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 10px auto;
    min-height: auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: inherit;
    word-break: break-word
}

.contents .btn-wrap a.btn-cancel.min-105,.contents .btn-wrap button.btn-cancel.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-cancel span,.contents .btn-wrap button.btn-cancel span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.contents .btn-wrap a.btn-cancel.disabled,.contents .btn-wrap a.btn-cancel:disabled,.contents .btn-wrap button.btn-cancel.disabled,.contents .btn-wrap button.btn-cancel:disabled {
    background-color: transparent;
    border-color: transparent;
    color: #9398aa;
    color: var(--text-info);
    cursor: default
}

.contents .btn-wrap a.btn-cancel.disabled:active,.contents .btn-wrap a.btn-cancel.disabled:hover,.contents .btn-wrap a.btn-cancel:disabled:active,.contents .btn-wrap a.btn-cancel:disabled:hover,.contents .btn-wrap button.btn-cancel.disabled:active,.contents .btn-wrap button.btn-cancel.disabled:hover,.contents .btn-wrap button.btn-cancel:disabled:active,.contents .btn-wrap button.btn-cancel:disabled:hover {
    background-color: transparent;
    border-color: transparent
}

.contents .btn-wrap a.btn-cancel:active,.contents .btn-wrap a.btn-cancel:hover,.contents .btn-wrap button.btn-cancel:active,.contents .btn-wrap button.btn-cancel:hover {
    background: transparent;
    border-color: transparent
}

.contents .btn-wrap a.btn-cancel span,.contents .btn-wrap button.btn-cancel span {
    border-bottom: 1px solid #9398aa;
    border-bottom: 1px solid var(--text-info);
    display: inline-block
}

.contents .btn-wrap a.btn-cancel.disabled,.contents .btn-wrap a.btn-cancel:disabled,.contents .btn-wrap button.btn-cancel.disabled,.contents .btn-wrap button.btn-cancel:disabled {
    opacity: .5
}

.contents .btn-wrap a.btn-light,.contents .btn-wrap button.btn-light {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #ced4df;
    border: 1px solid var(--button-light-border);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    font-size: 13px;
    margin: 0 auto;
    min-height: 100%;
    overflow: hidden;
    padding: 7px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    vertical-align: middle;
    width: auto;
    word-break: break-word
}

.contents .btn-wrap a.btn-light.min-105,.contents .btn-wrap button.btn-light.min-105 {
    min-width: 105px
}

.contents .btn-wrap a.btn-light span,.contents .btn-wrap button.btn-light span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.contents .btn-wrap a.btn-light.disabled,.contents .btn-wrap a.btn-light:disabled,.contents .btn-wrap button.btn-light.disabled,.contents .btn-wrap button.btn-light:disabled {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled);
    color: #d5d9e2;
    color: var(--button-round-border-disabled);
    cursor: default
}

.contents .btn-wrap a.btn-light.disabled:active,.contents .btn-wrap a.btn-light.disabled:hover,.contents .btn-wrap a.btn-light:disabled:active,.contents .btn-wrap a.btn-light:disabled:hover,.contents .btn-wrap button.btn-light.disabled:active,.contents .btn-wrap button.btn-light.disabled:hover,.contents .btn-wrap button.btn-light:disabled:active,.contents .btn-wrap button.btn-light:disabled:hover {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled)
}

.contents .btn-wrap a.btn-light:active,.contents .btn-wrap a.btn-light:hover,.contents .btn-wrap button.btn-light:active,.contents .btn-wrap button.btn-light:hover {
    background: transparent;
    border-color: #ced4df;
    border-color: var(--button-light-border)
}

.contents .btn-wrap a.btn-light:active:not(.disabled),.contents .btn-wrap a.btn-light:hover:not(.disabled),.contents .btn-wrap button.btn-light:active:not(.disabled),.contents .btn-wrap button.btn-light:hover:not(.disabled) {
    color: #003569;
    color: var(--button-light-hover)
}

.contents .input-group {
    padding-bottom: 8px;
    position: relative;
    text-align: left
}

.contents .input-group label {
    display: none
}

.contents .input-group input {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    background: var(--textfield-normal);
    border: 1px solid #c6cfd8;
    border: 1px solid var(--textfield-border-normal);
    color: #535768;
    color: var(--textfield-text-normal);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    justify-content: center;
    outline: none;
    padding: 0 15px;
    vertical-align: middle;
    width: 100%
}

.contents .input-group input ::-webkit-validation-bubble-message {
    display: none
}

.contents .input-group input::-ms-clear,.contents .input-group input::-ms-reveal {
    display: none
}

.contents .input-group input:focus {
    outline: none
}

.contents .input-group input::-webkit-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.contents .input-group input::-moz-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.contents .input-group input::-ms-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.contents .input-group input::placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.contents .input-group input:-ms-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.contents .input-group input:focus {
    background-color: #fff;
    background-color: var(--textfield-active);
    border: 1px solid #7985a2;
    border: 1px solid var(--textfield-border-active);
    color: #535768;
    color: var(--textfield-text-active)
}

.contents .input-group input.invalid {
    border: 1px solid #da3f34;
    border: 1px solid var(--border-danger)
}

.contents .input-group input:disabled {
    -webkit-text-fill-color: inherit;
    background-color: #edf0f3;
    background-color: var(--textfield-disabled);
    border: 1px solid #d5d9e2;
    border: 1px solid var(--textfield-border-disabled);
    color: #b8b8b8;
    color: var(--textfield-text-disabled);
    opacity: 1
}

.contents .input-group input:disabled::-webkit-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.contents .input-group input:disabled::-moz-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.contents .input-group input:disabled:-ms-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.contents .input-group input:disabled::-ms-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.contents .input-group input:disabled::placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.contents .input-group input::-webkit-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.contents .input-group input::-moz-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.contents .input-group input::-ms-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.contents .input-group input::placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.contents .input-group input:-ms-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

html:not([data-user-client=NCMop]) .contents .input-group input::-webkit-input-placeholder {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .contents .input-group input::-moz-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .contents .input-group input:-ms-input-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .contents .input-group input::-ms-input-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .contents .input-group input::placeholder {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill,html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:active,html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:hover,html:not([data-user-client=NCMop]) .contents .input-group select:-webkit-autofill,html:not([data-user-client=NCMop]) .contents .input-group select:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .contents .input-group select:-webkit-autofill:hover,html:not([data-user-client=NCMop]) .contents .input-group textarea:-webkit-autofill,html:not([data-user-client=NCMop]) .contents .input-group textarea:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .contents .input-group textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #535768!important;
    -webkit-text-fill-color: var(--textfield-text-normal)!important;
    -webkit-box-shadow: inset 0 0 0 30px #fff!important;
    -webkit-box-shadow: 0 0 0 30px var(--textfield-normal) inset!important
}

html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:active:disabled,html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .contents .input-group input:-webkit-autofill:hover:disabled,html:not([data-user-client=NCMop]) .contents .input-group select:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .contents .input-group select:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .contents .input-group select:-webkit-autofill:hover:disabled,html:not([data-user-client=NCMop]) .contents .input-group textarea:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .contents .input-group textarea:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .contents .input-group textarea:-webkit-autofill:hover:disabled {
    -webkit-text-fill-color: #b8b8b8!important;
    -webkit-text-fill-color: var(--textfield-text-disabled)!important;
    -webkit-box-shadow: inset 0 0 0 30px #edf0f3!important;
    -webkit-box-shadow: 0 0 0 30px var(--textfield-disabled) inset!important
}

.contents .input-group input[type=number]::-webkit-inner-spin-button,.contents .input-group input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.contents .input-group input[type=number] {
    -moz-appearance: textfield
}

.contents .input-group:after {
    clear: both;
    content: "";
    display: table
}

[dir=rtl] .contents .input-group {
    text-align: right
}

.contents .input-group .pwd-strength-meter {
    left: auto;
    line-height: 56px;
    line-height: var(--ui-input-height);
    position: absolute;
    right: 15px;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[dir=rtl] .contents .input-group .pwd-strength-meter {
    left: 15px;
    right: auto
}

.contents .input-group .pwd-strength-meter .grade {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-weight: 700
}

.contents .input-group .pwd-strength-meter[data-meter="0"] .grade {
    color: #da3f34;
    color: var(--text-danger)
}

.contents .input-group .pwd-strength-meter[data-meter="1"] .grade {
    color: #ff6c11;
    color: var(--text-warning)
}

.contents .input-group .pwd-strength-meter[data-meter="2"] .grade {
    color: #04bbb4;
    color: var(--text-normal)
}

.contents .input-group .pwd-strength-meter[data-meter="3"] .grade,.contents .input-group .pwd-strength-meter[data-meter="4"] .grade {
    color: #03a1e0;
    color: var(--text-success)
}

.contents .input-group .input-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.contents .input-group .input-field.password input {
    padding: 0 60px 0 16px
}

[dir=rtl] .contents .input-group .input-field.password input {
    padding: 0 16px 0 60px
}

.contents .input-group .input-field>.input-wrap {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.contents .input-group .borderline {
    position: relative
}

html:not([data-user-client=NGPClient]) .contents .input-group .borderline {
    border: 1px solid #c6cfd8;
    border: 1px solid var(--border-normal)
}

html:not([data-user-client=NGPClient]) .contents .input-group .borderline input {
    border: 0!important;
    padding-left: 15px;
    padding-right: 30px
}

html[dir=rtl]:not([data-user-client=NGPClient]) .contents .input-group .borderline input {
    padding-left: 30px;
    padding-right: 15px
}

html:not([data-user-client=NGPClient]) .contents .input-group .borderline.focus {
    border-color: #7985a2;
    border-color: var(--border-active)
}

html:not([data-user-client=NGPClient]) .contents .input-group .borderline.invalid {
    border-color: #da3f34;
    border-color: var(--border-danger)
}

html:not([data-user-client=NGPClient]) .contents .input-group .borderline .input-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

[data-user-client=NGPClient] .contents .input-group .borderline.btn-in-input {
    border: 1px solid #c6cfd8;
    border: 1px solid var(--border-normal);
    border-radius: 0;
    border-radius: var(--ui-input-radius)
}

[data-user-client=NGPClient] .contents .input-group .borderline.btn-in-input input {
    border: 0!important;
    padding-left: 15px;
    padding-right: 30px
}

[dir=rtl] [data-user-client=NGPClient] .contents .input-group .borderline.btn-in-input input {
    padding-left: 30px;
    padding-right: 15px
}

[data-user-client=NGPClient] .contents .input-group .borderline.btn-in-input.focus {
    border-color: #7985a2;
    border-color: var(--border-active)
}

[data-user-client=NGPClient] .contents .input-group .borderline.btn-in-input.invalid {
    border-color: #da3f34;
    border-color: var(--border-danger)
}

.contents .input-group .btn-in-input {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.contents .input-group .btn-in-input .btn-wrap {
    height: 35px;
    height: var(--ui-button-in-input-height);
    margin: 0 11px 0 0
}

[dir=rtl] .contents .input-group .btn-in-input .btn-wrap {
    margin: 0 0 0 11px
}

.contents .input-group .btn-wrap.float {
    left: auto;
    position: absolute;
    right: 10px;
    top: 10px
}

[dir=rtl] .contents .input-group .btn-wrap.float {
    left: 10px;
    right: auto
}

.contents .input-group.field-button .input-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.contents .input-group.field-button .input-field.invalid {
    border: 0!important
}

.contents .input-group.field-button .input-field.invalid input {
    border-color: #da3f34;
    border-color: var(--border-danger)
}

.contents .input-group.field-button .input-wrap input {
    height: 100%
}

.contents .input-group.field-button .input-wrap+.btn-wrap {
    left: auto;
    margin-left: 8px;
    margin-right: 0;
    position: relative;
    right: 0;
    top: 0
}

[dir=rtl] .contents .input-group.field-button .input-wrap+.btn-wrap {
    left: 0;
    margin-left: 0;
    margin-right: 8px;
    right: auto
}

.contents .input-group.field-button .btn-primary {
    font-size: 14px!important;
    line-height: 1.2;
    max-width: 120px;
    min-width: 90px
}

@media(min-width: 640px) {
    .contents .input-group.field-button .btn-primary {
        max-width:155px
    }
}

html[lang^=ru] .contents .input-group.field-button .btn-primary {
    font-size: 12px!important;
    max-width: 134px!important;
    padding: 0 6px
}

.contents .input-group.field-button+div .invalid {
    padding-top: 10px
}

.contents .input-group.field-button+div .input-field.invalid,.contents .input-group.field-button+div input.invalid {
    padding-top: 0
}

.contents .input-group.check-box {
    padding-bottom: 0;
    width: 100%
}

.contents .input-group.error .msg {
    display: inline-block;
    padding-top: 10px
}

.contents .input-group.error input {
    border: 1px solid #da3f34;
    border: 1px solid var(--border-danger)
}

.contents .input-group.error .msg {
    color: #da3f34;
    color: var(--text-danger)
}

.contents .input-group input {
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    height: 56px;
    height: var(--ui-input-height);
    min-height: 56px;
    min-height: var(--ui-input-height)
}

.contents .input-group input[type=text][data-mode=eng] {
    -webkit-ime-mode: disabled;
    -moz-ime-mode: disabled;
    -ms-ime-mode: disabled;
    ime-mode: disabled
}

.contents .input-group .icon-confirm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    height: var(--ui-button-height);
    justify-content: center;
    left: auto;
    position: absolute;
    right: 15px;
    width: 15px;
    z-index: 999
}

[dir=rtl] .contents .input-group .icon-confirm {
    left: 15px;
    right: auto
}

.contents .input-group .icon-confirm:after {
    border: 3px solid #378ff1;
    border-width: 0 3px 3px 0;
    content: "";
    display: block;
    height: 13px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 7px
}

.contents .input-group .icon-confirm span {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 sans-serif;
    text-shadow: none
}

.contents .input-group .btn-reset {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    height: var(--ui-button-height);
    justify-content: center;
    left: auto;
    position: absolute;
    right: 10px;
    top: 0;
    width: 30px;
    z-index: 999
}

[dir=rtl] .contents .input-group .btn-reset {
    left: 10px;
    right: auto
}

.contents .input-group .btn-reset button {
    background-color: transparent;
    border: 0;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 sans-serif;
    height: 30px;
    position: relative;
    text-shadow: none;
    width: 30px
}

.contents .input-group .btn-reset button:hover:after,.contents .input-group .btn-reset button:hover:before {
    background: #6b7ea5;
    background: var(--icon-bg)
}

.contents .input-group .btn-reset button:after,.contents .input-group .btn-reset button:before {
    background: #b9bcc6;
    content: "";
    height: 1px;
    left: 5px;
    margin-top: -1px;
    position: absolute;
    right: auto;
    top: 15px;
    width: 64%
}

[dir=rtl] .contents .input-group .btn-reset button:after,[dir=rtl] .contents .input-group .btn-reset button:before {
    left: auto;
    right: 5px
}

.contents .input-group .btn-reset button:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.contents .input-group .btn-reset button:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.contents .input-group .btn-reset button span {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 sans-serif;
    text-shadow: none
}

[data-user-client=NGPClient] .contents .input-group .btn-reset button {
    padding-left: 10px
}

[data-user-client=NGPClient] .contents .input-group .btn-reset button:before {
    content: none
}

[data-user-client=NGPClient] .contents .input-group .btn-reset button:after {
    background-color: transparent;
    background-image: url(../../img/login/purple/icon_clear.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    left: 0;
    margin: 0;
    position: static;
    top: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 16px
}

.contents .input-group .msg {
    display: inline-block;
    font-size: 14px;
    padding-bottom: 7px;
    padding-top: 8px;
    width: 100%
}

.contents .input-group .msg:after {
    clear: both;
    content: "";
    display: table
}

.contents .input-group .msg.warning {
    left: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: -32px;
    width: auto
}

[dir=rtl] .contents .input-group .msg.warning {
    left: 0;
    right: auto
}

.contents .input-group .msg.invalid+.msg {
    padding-top: 0
}

.contents .input-group .msg.warning {
    color: #007fff;
    color: var(--text-em)
}

.contents .input-group .msg.invalid {
    color: #da3f34;
    color: var(--text-danger)
}

.contents .input-group.g-recaptcha-invisible {
    padding: 0!important
}

.contents .input-group.g-recaptcha-invisible .grecaptcha-badge {
    z-index: 1
}

.contents .input-group input {
    min-height: 56px!important;
    min-height: var(--ui-input-height)!important
}

.contents .input-group .btn-wrap {
    margin: 0 0 0 8px;
    width: auto
}

[dir=rtl] .contents .input-group .btn-wrap {
    margin: 0 8px 0 0
}

.contents .input-group .btn-wrap button {
    font-size: 1.5rem;
    font-size: var(--ui-button-in-input-font-size);
    font-weight: 400;
    padding: 0 15px
}

[data-user-client=NGPClient] .contents .input-group .btn-wrap button {
    padding: 0 10px
}

.contents .input-group .btn-wrap .btn-primary {
    width: inherit!important
}

.contents .input-group .time {
    left: auto;
    position: absolute;
    right: 15px;
    top: 14px
}

[dir=rtl] .contents .input-group .time {
    left: 15px;
    right: auto
}

.contents .input-group .time.expire,.contents .input-group .time.less10 {
    color: #da3f34;
    color: var(--text-danger)
}

.contents .btn-wrap {
    margin-top: 30px;
    vertical-align: middle
}

@media(min-width: 960px) {
    .contents .btn-wrap a,.contents .btn-wrap button {
        display:inline-block
    }
}

.wrap-contents .dropdown {
    left: 0;
    position: absolute;
    right: auto;
    top: 0
}

[dir=rtl] .wrap-contents .dropdown {
    left: auto;
    right: 0
}

.wrap-contents .dropdown:after {
    background-color: #c6cfd8;
    background-color: var(--dropdown-line);
    bottom: 11px;
    content: "";
    display: block;
    left: auto;
    position: absolute;
    right: 0;
    top: 11px;
    width: 1px
}

[dir=rtl] .wrap-contents .dropdown:after {
    left: 0;
    right: auto
}

.wrap-contents .dropdown label {
    display: none
}

.wrap-contents .dropdown .select,.wrap-contents .dropdown select {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-appearance: none;
    background-color: #fff;
    background-color: var(--dropdown-bg);
    border: 0;
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    color: #535768;
    color: var(--text-secondary);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 56px;
    height: var(--ui-input-height);
    outline: none;
    padding: 0 32px 0 16px;
    position: relative;
    vertical-align: top;
    width: 100%
}

[dir=rtl] .wrap-contents .dropdown .select,[dir=rtl] .wrap-contents .dropdown select {
    padding: 0 16px 0 32px
}

.wrap-contents .dropdown select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%23535768' d='M11 1 6 6 1 1'/%3E%3Cpath d='M0 0h12v7H0z' opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-dropdown);
    background-position: top 50% right 16px;
    background-repeat: no-repeat;
    background-size: 12px 7px
}

[dir=rtl] .wrap-contents .dropdown select {
    background-position: top 50% left 16px
}

.wrap-contents .dropdown select option:disabled {
    pointer-events: none
}

.wrap-contents .dropdown .select-box:focus {
    outline: none
}

.wrap-contents .dropdown .select-box .select {
    min-width: 100px
}

.wrap-contents .dropdown .select-box .select:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%23535768' d='M11 1 6 6 1 1'/%3E%3Cpath d='M0 0h12v7H0z' opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-dropdown);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 7px;
    left: auto;
    position: absolute;
    right: 16px;
    top: calc(50% - 3px);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease;
    width: 12px
}

[data-user-client=NGPClient] .wrap-contents .dropdown .select-box .select:after {
    height: 12px;
    top: calc(50% - 6px)
}

[dir=rtl] .wrap-contents .dropdown .select-box .select:after {
    background-position: 100% 0;
    left: 16px;
    right: auto
}

.wrap-contents .dropdown .select-box .list {
    background-color: #fff;
    background-color: var(--base);
    border: 1px solid #7985a2;
    border: 1px solid var(--dropdown-border);
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 55px;
    top: calc(var(--ui-input-height) - 1px);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    visibility: hidden;
    width: 100%;
    z-index: 10
}

.wrap-contents .dropdown .select-box .list li {
    height: 35px;
    list-style-type: none;
    padding: 0
}

.wrap-contents .dropdown .select-box .list li.option {
    background-color: #fff;
    background-color: var(--dropdown-bg);
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    height: 100%;
    padding: 6px 15px;
    text-decoration: none
}

.wrap-contents .dropdown .select-box .list li.option.disabled {
    cursor: default;
    pointer-events: none
}

.wrap-contents .dropdown .select-box .list li.option.active,.wrap-contents .dropdown .select-box .list li.option:focus,.wrap-contents .dropdown .select-box .list li.option:hover {
    background-color: #efeff4;
    background-color: var(--dropdown-selected);
    color: #535768;
    color: var(--text-secondary);
    font-weight: 700
}

.wrap-contents .dropdown .select-box .list li.option.selected {
    color: #535768;
    color: var(--text-secondary);
    font-weight: 700
}

[data-user-client=NGPClient] .wrap-contents .dropdown .select-box .list {
    background-color: #fff;
    background-color: var(--dropdown-bg);
    border-bottom-left-radius: 0;
    border-bottom-left-radius: var(--ui-input-radius);
    border-bottom-right-radius: 0;
    border-bottom-right-radius: var(--ui-input-radius);
    padding: 6px
}

[data-user-client=NGPClient] .wrap-contents .dropdown .select-box .list li {
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    padding: 8px
}

.wrap-contents .dropdown .select-box.open .select:after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.wrap-contents .dropdown .select-box.open .list {
    display: block;
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    visibility: visible
}

.wrap-contents .dropdown.is-disabled .select-box .select {
    background-color: #fff;
    background-color: var(--dropdown-select-bg-disabled);
    color: #babcc3;
    color: var(--dropdown-select-text-disabled);
    cursor: default;
    pointer-events: none
}

.wrap-contents .dropdown.is-disabled .select-box .select:after {
    content: none
}

.wrap-contents .dropdown+input[type=text] {
    height: 56px;
    height: var(--ui-input-height);
    padding-left: 115px;
    padding-right: 0
}

[dir=rtl] .wrap-contents .dropdown+input[type=text] {
    padding-left: 0;
    padding-right: 115px
}

.wrap-contents .borderline .dropdown .select,.wrap-contents .borderline .dropdown select {
    word-wrap: break-word;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    line-height: 1.15
}

html:not([data-user-client=NGPClient]) .wrap-contents .borderline .dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    position: relative
}

html:not([data-user-client=NGPClient]) .wrap-contents .borderline .dropdown .select,html:not([data-user-client=NGPClient]) .wrap-contents .borderline .dropdown select {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 170px;
    min-width: 110px
}

html:not([data-user-client=NGPClient]) .wrap-contents .borderline .dropdown .select-box .list {
    left: -1px;
    right: auto
}

html[dir=rtl]:not([data-user-client=NGPClient]) .wrap-contents .borderline .dropdown .select-box .list {
    left: auto;
    right: -1px
}

[data-user-client=NGPClient] .wrap-contents .borderline .dropdown {
    top: -48px;
    width: 100%
}

[data-user-client=NGPClient] .wrap-contents .borderline .dropdown:after {
    content: none
}

.result-section {
    text-align: center
}

.result-section h2.title {
    border-bottom: 0!important;
    color: #535768;
    color: var(--text-primary);
    padding-bottom: 15px
}

.result-section h2.title i,.result-section h2.title>span {
    color: #535768;
    color: var(--text-primary);
    display: block;
    font-size: 20px;
    font-weight: 400
}

.result-section h2.title i:before,.result-section h2.title>span:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    display: block;
    height: 110px;
    margin: 35px auto 30px;
    width: 110px
}

.result-section h2.title i.complete:before,.result-section h2.title>span.complete:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='110' height='110'%3E%3Cdefs%3E%3Ccircle id='a' cx='55' cy='55' r='55'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23CCCED7' xlink:href='%23a'/%3E%3Ccircle cx='55' cy='55' r='53' stroke='%23CCCED7' stroke-width='4'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M47.61 62.49 74.214 36 81 42.755 50.566 73.057 47.609 76 29 57.472l6.785-6.755L47.609 62.49z'/%3E%3Cpath fill='%23CCCED7' fill-rule='nonzero' d='M47.61 52.49 74.214 26 81 32.755 50.566 63.057 47.609 66 29 47.472l6.785-6.755L47.609 52.49z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--img-success)
}

.result-section h2.title i.secede:before,.result-section h2.title i.warning:before,.result-section h2.title>span.secede:before,.result-section h2.title>span.warning:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23CCCED7' d='M10.025 103c-3.263 0-6.182-1.699-7.81-4.544a9.019 9.019 0 0 1 .02-9.077L47.21 11.51C48.841 8.686 51.753 7 55 7c3.246 0 6.158 1.686 7.79 4.51l44.975 77.87a9.018 9.018 0 0 1 .02 9.076c-1.628 2.846-4.547 4.544-7.81 4.544h-89.95z'/%3E%3Ctext fill='%23FFF' font-family='Avenir-Heavy, Avenir' font-size='58.5' font-weight='600' transform='translate(1 7)'%3E%3Ctspan x='45' y='78'%3E!%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--img-warning)
}

.result-section h2.title i.restrict:before,.result-section h2.title>span.restrict:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='110' height='110'%3E%3Cdefs%3E%3Ccircle id='a' cx='55' cy='55' r='55'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23CCCED7' xlink:href='%23a'/%3E%3Ccircle cx='55' cy='55' r='53' stroke='%23CCCED7' stroke-width='4'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='m37.864 34.259 38.183 38.184-4.242 4.242L33.62 38.502z'/%3E%3Cpath d='m33.62 72.443 38.184-38.184 4.243 4.243-38.184 38.183z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--img-block)
}

.result-section h2.title+.btn-wrap {
    padding-top: 30px
}

.result-section strong {
    font-weight: 700
}

.result-section strong em {
    display: block;
    font-style: normal
}

.result-section em {
    color: #007fff;
    color: var(--text-em);
    font-style: normal
}

.result-section a {
    color: #0095ff;
    color: var(--text-link)
}

.result-section a.link {
    display: inline-block;
    margin-top: 20px
}

.result-section .message {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    padding-bottom: 30px
}

.result-section .message p {
    color: #9398aa;
    color: var(--text-sub)
}

.result-section .message p em {
    font-size: inherit
}

.result-section .message p em.big {
    font-size: 18px
}

.result-section .more-info {
    font-size: 14px;
    line-height: 1.7rem;
    padding-top: 15px
}

.result-section .info-help {
    background-color: rgba(0,0,0,.05);
    font-size: 14px;
    margin: 0 auto 20px;
    padding: 20px;
    text-align: left
}

html.dark-mode .result-section .info-help {
    background-color: hsla(0,0%,100%,.1)
}

@media(min-width: 960px) {
    .result-section .info-help {
        width:335px
    }
}

.result-section .info-help a {
    color: #007fff;
    color: var(--text-em)
}

.result-section .info-help p {
    color: #535768;
    color: var(--text-primary);
    font-size: 14px
}

.result-section .info-help p+ul.list {
    padding-top: 15px
}

.result-section .info-help ul.list li {
    color: #535768;
    color: var(--text-primary)
}

.result-section .info-help ul.list li:before {
    background-color: #535768;
    background-color: var(--text-primary);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 3px;
    margin-left: 0;
    margin-right: 5px;
    margin-top: -4px;
    vertical-align: middle;
    width: 3px
}

[dir=rtl] .result-section .info-help ul.list li:before {
    margin-left: 5px;
    margin-right: 0
}

.result-section .info-text {
    margin: 40px auto 0;
    text-align: left
}

@media(min-width: 960px) {
    .result-section .info-text {
        width:335px
    }
}

.result-section .info-text h4 {
    font-size: 14px
}

.result-section .info-text ul {
    list-style: none;
    margin-top: 5px;
    padding: 0 4px
}

.result-section .info-text li {
    counter-increment: step-counter;
    font-size: 14px;
    margin: 4px 0;
    padding-left: 15px;
    position: relative
}

.result-section .info-text li:before {
    content: counter(step-counter) ".";
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0
}

#container .content-section .result-section .btn-wrap a,#container .content-section .result-section .btn-wrap button {
    margin-top: 8px
}

#container .content-section .result-section .btn-wrap a:first-child,#container .content-section .result-section .btn-wrap button:first-child {
    margin-top: 0
}

@media(min-width: 960px) {
    #container .content-section .result-section .btn-wrap a,#container .content-section .result-section .btn-wrap button {
        display:block!important;
        width: 335px!important
    }
}

#container .content-section .result-section.fit-content .btn-wrap,#container .content-section .result-section.fit-content .result-info {
    margin-left: auto;
    margin-right: auto;
    max-width: 335px
}

html[data-user-client=NGPClient] body::-webkit-scrollbar-track {
    background-color: transparent
}

html[data-user-client=NGPClient] body::-webkit-scrollbar {
    height: 1.8rem;
    width: 1.4rem
}

html[data-user-client=NGPClient] body::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #bababd;
    background-color: var(--scroll-thumb-color);
    border: .3rem solid transparent;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: inset -1px -1px 0 rgba(0,0,0,.05),inset 1px 1px 0 rgba(0,0,0,.05);
    height: .6rem
}

html[data-user-client=NGPClient] body::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0
}

html[data-user-client=NGPClient] body::-webkit-scrollbar-corner {
    background-color: transparent
}

html[\:has\(\.nc-signin\)] {
    background-color: #fff;
    background-color: var(--login-bg)
}

html:has(.nc-signin) {
    background-color: #fff;
    background-color: var(--login-bg)
}

body.nc-signin,body.nc-signin #container .wrap-contents {
    background-color: #fff;
    background-color: var(--login-bg)
}

#container .login-contents .inner-box {
    margin: 0 auto
}

.inner-box {
    max-width: 440px
}

.inner-box .login-wrap {
    margin: 0 auto;
    position: relative;
    width: 100%
}

.modalPopup .button .btn:hover {
    background-color: #216fea
}

.modalPopup .button .primary {
    border-bottom-left-radius: 0;
    float: left;
    width: 50%
}

.modalPopup .button .secondary {
    background-color: #b2bacc;
    border-bottom-right-radius: 0;
    float: left;
    width: 50%
}

.modalPopup .button .secondary:hover {
    background-color: #97a1b8
}

@media(min-width: 960px) {
    body.nc-signin {
        height:auto
    }

    body.nc-signin,body.nc-signin #container .wrap-contents {
        background-color: #fff;
        background-color: var(--bg-default);
        overflow: visible
    }

    body.nc-signin[data-market^=NCS] .wrap-contents main,body.nc-signin[data-market^=NCV] .wrap-contents main {
        padding-top: 60px
    }

    body.nc-signin[data-market^=NCT] .wrap-contents main {
        padding-top: 40px
    }

    body.nc-signin main {
        padding-bottom: 80px
    }

    body.nc-signin #container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        height: inherit;
        justify-content: center;
        min-height: 100vh
    }

    body.nc-signin #container .wrap-contents {
        margin-bottom: auto!important
    }

    body.nc-signin #container .wrap-contents:after {
        content: none
    }

    body.nc-signin #container .wrap-contents,body.nc-signin #container .wrap-contents+.wrap-footer {
        margin-top: auto!important;
        width: 100%
    }

    body main {
        min-height: 150px
    }

    .toast-wrap {
        margin: 0
    }

    .toast-wrap .error {
        line-height: 2rem;
        margin: 0 auto;
        max-width: 450px
    }

    .toast-wrap .keypad {
        display: none
    }

    .inner-box {
        background-color: #fff;
        background-color: var(--login-bg);
        border: 1px solid #c6cfd8;
        border: 1px solid var(--login-box);
        margin-top: 112px;
        min-height: 550px;
        min-width: 450px!important;
        padding: 0 20px 20px
    }

    .inner-box.auto-height {
        min-height: auto
    }

    .inner-box .login-wrap {
        max-width: 365px
    }

    .inner-box .login-wrap .keypad-btn {
        display: none
    }

    #loginTypeInfo {
        position: fixed!important;
        top: 360px
    }

    #loginTypeInfo .message {
        padding: 40px 20px
    }
}

.login-header {
    padding: 50px 0 25px;
    padding: var(--header-pad);
    text-align: center
}

.login-header .title {
    display: none
}

@media(min-width: 640px) {
    .login-header {
        padding:24px 0 5px;
        padding: var(--header-tablet-pad)
    }
}

@media(min-width: 960px) {
    .login-header {
        padding:50px 0 25px;
        padding: var(--header-pad)
    }
}

.login-header .logo {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 sans-serif;
    height: 44px;
    height: var(--login-bi-height);
    margin: 0 auto;
    text-shadow: none;
    -webkit-transition: all .15s ease;
    transition: all .15s ease
}

.login-header .logo span,.login-header .logo span:before,.login-header .logo>a,.login-header .logo>a:before {
    display: inline-block;
    height: 44px;
    height: var(--login-bi-height);
    width: 80px
}

.login-header .logo span:before,.login-header .logo>a:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='44'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23004C98'/%3E%3Cstop offset='100%25' stop-color='%23003569'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' fill-rule='evenodd' d='M77.855 14.703a.92.92 0 0 0 .933-.906V2.907A.92.92 0 0 0 77.855 2h-26.28a1.51 1.51 0 0 0-1.078.45L43.16 9.942 35.825 2.45a1.511 1.511 0 0 0-1.08-.45H10.432c-.41 0-.8.163-1.081.451L2.43 9.542c-.263.27-.41.626-.41.997v30.554a.92.92 0 0 0 .933.907h11.202a.92.92 0 0 0 .933-.907v-24.72c0-.825.689-1.495 1.538-1.495h11.935c.85 0 1.538.67 1.538 1.496v24.72c0 .5.418.906.933.906h11.202a.92.92 0 0 0 .933-.907v-7.018l7.33 7.476a1.51 1.51 0 0 0 1.078.449h26.28a.92.92 0 0 0 .933-.907v-10.89a.92.92 0 0 0-.933-.906h-20.09c-.85 0-1.539-.67-1.539-1.496V16.199c0-.826.69-1.496 1.539-1.496h20.09z'/%3E%3C/svg%3E");
    background-image: var(--login-bi);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    vertical-align: top
}

[data-user-client=NGPClient] .login-header .logo span:before {
    background-image: url(../../img/login/purple/pubbie_logo.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    [data-user-client=NGPClient] .login-header .logo span:before {
        background-image:url(../../img/login/purple/pubbie_logo@2x.png)
    }
}

[data-user-client=NCMop] .login-header .logo {
    display: none!important
}

body[data-market^=NCV] .login-header .logo span,body[data-market^=NCV] .login-header .logo span:before,body[data-market^=NCV] .login-header .logo>a,body[data-market^=NCV] .login-header .logo>a:before {
    width: 180px
}

.login-header .ci {
    height: 37px;
    margin: 0 auto 18px
}

.login-header .ci span {
    background-color: transparent;
    background-image: url(../../img/common/ci-global.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 192px 37px;
    border: 0;
    color: transparent;
    display: inline-block;
    font: 0/0 sans-serif;
    height: 37px;
    text-shadow: none;
    width: 192px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    .login-header .ci span {
        background-image:url(../../img/common/ci-global@2x.png)
    }
}

.login-actions .plaync-login-btn,.select-method .login-3rd-party .plaync-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .plaync-login-btn:active,.login-actions .plaync-login-btn:hover,.select-method .login-3rd-party .plaync-login-btn:active,.select-method .login-3rd-party .plaync-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .plaync-login-btn>span,.select-method .login-3rd-party .plaync-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .plaync-login-btn>span,.select-method .login-3rd-party .plaync-login-btn>span {
        padding:0 45px
    }
}

.login-actions .plaync-login-btn>span i,.select-method .login-3rd-party .plaync-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .plaync-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .plaync-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .plaync-login-btn>span i:before,.select-method .login-3rd-party .plaync-login-btn>span i:before {
    background-image: url(../../img/common/icon-plaync.svg);
    background-image: var(--icon-bi-plaync);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .plaync-login-btn>span em,.select-method .login-3rd-party .plaync-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .plaync-login-btn,.select-method .login-3rd-party .plaync-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .qr-login-btn,.select-method .login-3rd-party .qr-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .qr-login-btn:active,.login-actions .qr-login-btn:hover,.select-method .login-3rd-party .qr-login-btn:active,.select-method .login-3rd-party .qr-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .qr-login-btn>span,.select-method .login-3rd-party .qr-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .qr-login-btn>span,.select-method .login-3rd-party .qr-login-btn>span {
        padding:0 45px
    }
}

.login-actions .qr-login-btn>span i,.select-method .login-3rd-party .qr-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .qr-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .qr-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .qr-login-btn>span i:before,.select-method .login-3rd-party .qr-login-btn>span i:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.9'%3E%3Cpath d='M0 0h18v18H0z'/%3E%3Cpath d='M2.25 8.25h6v-6h-6v6zm1.5-4.5h3v3h-3v-3zm-1.5 12h6v-6h-6v6zm1.5-4.5h3v3h-3v-3zm6-9v6h6v-6h-6zm4.5 4.5h-3v-3h3v3zm0 7.5h1.5v1.5h-1.5zm-1.5-4.5h1.5v1.5h-1.5zm-1.5 1.5h1.5v1.5h-1.5zm1.5 1.5h1.5v1.5h-1.5zm1.5-1.5h1.5v1.5h-1.5zm-3 3h1.5v1.5h-1.5zm-1.5-1.5h1.5v1.5h-1.5zm4.5 0h1.5v1.5h-1.5zm-4.5-1.5h1.5v1.5h-1.5zm0-1.5h1.5v1.5h-1.5z' fill='%23535768' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-qr);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .qr-login-btn>span em,.select-method .login-3rd-party .qr-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .qr-login-btn,.select-method .login-3rd-party .qr-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .phone-login-btn,.select-method .login-3rd-party .phone-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .phone-login-btn:active,.login-actions .phone-login-btn:hover,.select-method .login-3rd-party .phone-login-btn:active,.select-method .login-3rd-party .phone-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .phone-login-btn>span,.select-method .login-3rd-party .phone-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .phone-login-btn>span,.select-method .login-3rd-party .phone-login-btn>span {
        padding:0 45px
    }
}

.login-actions .phone-login-btn>span i,.select-method .login-3rd-party .phone-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .phone-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .phone-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .phone-login-btn>span i:before,.select-method .login-3rd-party .phone-login-btn>span i:before {
    background-image: url(../../img/icons/icon-bi-phone.svg);
    background-image: var(--icon-bi-phone);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .phone-login-btn>span em,.select-method .login-3rd-party .phone-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .phone-login-btn,.select-method .login-3rd-party .phone-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .global-nc-login-btn,.select-method .login-3rd-party .global-nc-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .global-nc-login-btn:active,.login-actions .global-nc-login-btn:hover,.select-method .login-3rd-party .global-nc-login-btn:active,.select-method .login-3rd-party .global-nc-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .global-nc-login-btn>span,.select-method .login-3rd-party .global-nc-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .global-nc-login-btn>span,.select-method .login-3rd-party .global-nc-login-btn>span {
        padding:0 45px
    }
}

.login-actions .global-nc-login-btn>span i,.select-method .login-3rd-party .global-nc-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .global-nc-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .global-nc-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .global-nc-login-btn>span i:before,.select-method .login-3rd-party .global-nc-login-btn>span i:before {
    background-image: url(../../img/icons/icon-bi-global-nc.svg);
    background-image: var(--icon-bi-global-nc);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .global-nc-login-btn>span em,.select-method .login-3rd-party .global-nc-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .global-nc-login-btn,.select-method .login-3rd-party .global-nc-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .google-login-btn,.select-method .login-3rd-party .google-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .google-login-btn:active,.login-actions .google-login-btn:hover,.select-method .login-3rd-party .google-login-btn:active,.select-method .login-3rd-party .google-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .google-login-btn>span,.select-method .login-3rd-party .google-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .google-login-btn>span,.select-method .login-3rd-party .google-login-btn>span {
        padding:0 45px
    }
}

.login-actions .google-login-btn>span i,.select-method .login-3rd-party .google-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .google-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .google-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .google-login-btn>span i:before,.select-method .login-3rd-party .google-login-btn>span i:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%234285F4' d='M19.8 11.208c0-.65-.059-1.275-.167-1.875H11v3.546h4.933a4.216 4.216 0 0 1-1.83 2.767v2.3h2.963C18.8 16.35 19.8 14 19.8 11.208z'/%3E%3Cpath fill='%2334A853' d='M11 20.166c2.475 0 4.55-.82 6.066-2.22l-2.962-2.3c-.821.55-1.871.874-3.104.874-2.388 0-4.409-1.612-5.13-3.779H2.808v2.375A9.162 9.162 0 0 0 11 20.166z'/%3E%3Cpath fill='%23FBBC05' d='M5.87 12.741A5.516 5.516 0 0 1 5.583 11c0-.604.104-1.192.287-1.742V6.883H2.808a9.174 9.174 0 0 0 0 8.233l3.062-2.375z'/%3E%3Cpath fill='%23EA4335' d='M11 5.479c1.345 0 2.554.462 3.504 1.37l2.629-2.627C15.545 2.741 13.47 1.833 11 1.833a9.162 9.162 0 0 0-8.192 5.05L5.87 9.258c.721-2.167 2.742-3.78 5.13-3.78z'/%3E%3Cpath d='M1.833 1.833h18.333v18.333H1.833z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-google);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .google-login-btn>span em,.select-method .login-3rd-party .google-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .google-login-btn,.select-method .login-3rd-party .google-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .apple-login-btn,.select-method .login-3rd-party .apple-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .apple-login-btn:active,.login-actions .apple-login-btn:hover,.select-method .login-3rd-party .apple-login-btn:active,.select-method .login-3rd-party .apple-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .apple-login-btn>span,.select-method .login-3rd-party .apple-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .apple-login-btn>span,.select-method .login-3rd-party .apple-login-btn>span {
        padding:0 45px
    }
}

.login-actions .apple-login-btn>span i,.select-method .login-3rd-party .apple-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .apple-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .apple-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .apple-login-btn>span i:before,.select-method .login-3rd-party .apple-login-btn>span i:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-336-60H744v810H-336z'/%3E%3Cpath d='M.917 0h20.167v20.167H.917z'/%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M14.709 4.65c-1.535 0-2.774.881-3.574.881-.838 0-1.96-.832-3.29-.832-2.528 0-5.095 1.983-5.095 5.728 0 2.325.955 4.785 2.129 6.375l.347.464c.86 1.127 1.685 1.984 2.8 1.984 1.252 0 1.806-.795 3.367-.795 1.574 0 1.936.77 3.316.77s2.296-1.199 3.16-2.374c.955-1.346 1.368-2.667 1.381-2.729l-.106-.043c-.505-.22-2.603-1.302-2.603-3.848 0-2.472 2.064-3.586 2.18-3.672C17.366 4.7 15.29 4.65 14.71 4.65zm-.71-1.578c-.683.783-1.844 1.37-2.76 1.37a1.56 1.56 0 0 1-.271-.024l-.024-.135a1.629 1.629 0 0 1-.015-.208c0-1.003.542-1.982 1.11-2.606.735-.82 1.973-1.432 2.98-1.469.025.11.038.245.038.38 0 .99-.438 1.982-1.058 2.692z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-apple);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .apple-login-btn>span em,.select-method .login-3rd-party .apple-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .apple-login-btn,.select-method .login-3rd-party .apple-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .line-login-btn,.select-method .login-3rd-party .line-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .line-login-btn:active,.login-actions .line-login-btn:hover,.select-method .login-3rd-party .line-login-btn:active,.select-method .login-3rd-party .line-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .line-login-btn>span,.select-method .login-3rd-party .line-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .line-login-btn>span,.select-method .login-3rd-party .line-login-btn>span {
        padding:0 45px
    }
}

.login-actions .line-login-btn>span i,.select-method .login-3rd-party .line-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .line-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .line-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .line-login-btn>span i:before,.select-method .login-3rd-party .line-login-btn>span i:before {
    background-image: url(../../img/login/icon-s-line.svg);
    background-image: var(--icon-bi-line);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .line-login-btn>span em,.select-method .login-3rd-party .line-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .line-login-btn,.select-method .login-3rd-party .line-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .facebook-login-btn,.select-method .login-3rd-party .facebook-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .facebook-login-btn:active,.login-actions .facebook-login-btn:hover,.select-method .login-3rd-party .facebook-login-btn:active,.select-method .login-3rd-party .facebook-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .facebook-login-btn>span,.select-method .login-3rd-party .facebook-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .facebook-login-btn>span,.select-method .login-3rd-party .facebook-login-btn>span {
        padding:0 45px
    }
}

.login-actions .facebook-login-btn>span i,.select-method .login-3rd-party .facebook-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .facebook-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .facebook-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .facebook-login-btn>span i:before,.select-method .login-3rd-party .facebook-login-btn>span i:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-580-60H500v810H-580z'/%3E%3Cpath d='M.917.917h20.167v20.167H.917z'/%3E%3Crect width='20.167' height='20.167' x='.917' y='.917' fill='%23FFF' rx='10.083'/%3E%3Cpath fill='%231D7AEF' d='M20.625 11.059c0-5.348-4.31-9.684-9.625-9.684-5.316 0-9.625 4.336-9.625 9.684 0 4.833 3.52 8.84 8.121 9.566v-6.767H7.052v-2.8h2.444V8.926c0-2.427 1.437-3.767 3.636-3.767 1.053 0 2.154.189 2.154.189V7.73h-1.214c-1.195 0-1.568.746-1.568 1.512v1.817h2.67l-.427 2.8h-2.243v6.766c4.601-.726 8.121-4.733 8.121-9.566'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-bi-facebook);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .facebook-login-btn>span em,.select-method .login-3rd-party .facebook-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .facebook-login-btn,.select-method .login-3rd-party .facebook-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .vk-login-btn,.select-method .login-3rd-party .vk-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .vk-login-btn:active,.login-actions .vk-login-btn:hover,.select-method .login-3rd-party .vk-login-btn:active,.select-method .login-3rd-party .vk-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .vk-login-btn>span,.select-method .login-3rd-party .vk-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .vk-login-btn>span,.select-method .login-3rd-party .vk-login-btn>span {
        padding:0 45px
    }
}

.login-actions .vk-login-btn>span i,.select-method .login-3rd-party .vk-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .vk-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .vk-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .vk-login-btn>span i:before,.select-method .login-3rd-party .vk-login-btn>span i:before {
    background-image: url(../../img/login/icon-s-vk.svg);
    background-image: var(--icon-bi-vk);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .vk-login-btn>span em,.select-method .login-3rd-party .vk-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .vk-login-btn,.select-method .login-3rd-party .vk-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .twitter-login-btn,.select-method .login-3rd-party .twitter-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .twitter-login-btn:active,.login-actions .twitter-login-btn:hover,.select-method .login-3rd-party .twitter-login-btn:active,.select-method .login-3rd-party .twitter-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .twitter-login-btn>span,.select-method .login-3rd-party .twitter-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .twitter-login-btn>span,.select-method .login-3rd-party .twitter-login-btn>span {
        padding:0 45px
    }
}

.login-actions .twitter-login-btn>span i,.select-method .login-3rd-party .twitter-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .twitter-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .twitter-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .twitter-login-btn>span i:before,.select-method .login-3rd-party .twitter-login-btn>span i:before {
    background-image: url(../../img/login/icon-s-x.svg);
    background-image: var(--icon-bi-x);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .twitter-login-btn>span em,.select-method .login-3rd-party .twitter-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .twitter-login-btn,.select-method .login-3rd-party .twitter-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .steam-login-btn,.select-method .login-3rd-party .steam-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .steam-login-btn:active,.login-actions .steam-login-btn:hover,.select-method .login-3rd-party .steam-login-btn:active,.select-method .login-3rd-party .steam-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .steam-login-btn>span,.select-method .login-3rd-party .steam-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .steam-login-btn>span,.select-method .login-3rd-party .steam-login-btn>span {
        padding:0 45px
    }
}

.login-actions .steam-login-btn>span i,.select-method .login-3rd-party .steam-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .steam-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .steam-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .steam-login-btn>span i:before,.select-method .login-3rd-party .steam-login-btn>span i:before {
    background-image: url(../../img/login/icon-steam.svg);
    background-image: var(--icon-bi-steam);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .steam-login-btn>span em,.select-method .login-3rd-party .steam-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .steam-login-btn,.select-method .login-3rd-party .steam-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .switch-login-btn,.select-method .login-3rd-party .switch-login-btn {
    background-color: transparent;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.login-actions .switch-login-btn:active,.login-actions .switch-login-btn:hover,.select-method .login-3rd-party .switch-login-btn:active,.select-method .login-3rd-party .switch-login-btn:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.login-actions .switch-login-btn>span,.select-method .login-3rd-party .switch-login-btn>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 100%;
    justify-content: center;
    line-height: 1.13;
    padding: 0 50px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .login-actions .switch-login-btn>span,.select-method .login-3rd-party .switch-login-btn>span {
        padding:0 45px
    }
}

.login-actions .switch-login-btn>span i,.select-method .login-3rd-party .switch-login-btn>span i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: normal;
    height: 100%;
    left: 20px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 20px
}

[dir=rtl] .login-actions .switch-login-btn>span i,[dir=rtl] .select-method .login-3rd-party .switch-login-btn>span i {
    left: auto;
    right: 20px
}

.login-actions .switch-login-btn>span i:before,.select-method .login-3rd-party .switch-login-btn>span i:before {
    background-color: #e60012;
    background-color: var(--login-switch-bg);
    background-image: url(../../img/login/icon-switch.svg);
    background-image: var(--icon-bi-switch);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.login-actions .switch-login-btn>span em,.select-method .login-3rd-party .switch-login-btn>span em {
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 960px) {
    .login-actions .switch-login-btn,.select-method .login-3rd-party .switch-login-btn {
        height:56px;
        height: var(--ui-button-height);
        margin-left: auto;
        margin-right: auto;
        width: 365px
    }
}

.login-actions .phone-login-btn i:before,.select-method .login-3rd-party .phone-login-btn i:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

[dir=rtl] .login-actions .phone-login-btn i:before,[dir=rtl] .select-method .login-3rd-party .phone-login-btn i:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

body[data-market=NCV] .login-actions .global-nc-login-btn span>i,body[data-market=NCV] .select-method .login-3rd-party .global-nc-login-btn span>i {
    width: 32px
}

body[data-market=NCV] .login-actions .global-nc-login-btn span>i:before,body[data-market=NCV] .select-method .login-3rd-party .global-nc-login-btn span>i:before {
    background-position: 0 0;
    background-size: contain;
    height: 30px;
    width: 100%
}

p.signin-with {
    color: #9398aa;
    color: var(--text-info);
    font-size: 14px;
    padding: 10px 0;
    text-align: center
}

.login-wrap .login-3rd-party {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    max-width: 240px;
    text-align: center
}

.login-wrap .login-3rd-party .google-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .google-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .google-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-google.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .apple-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .apple-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .apple-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-apple.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .line-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .line-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .line-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-line.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .facebook-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .facebook-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .facebook-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-facebook.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .vk-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .vk-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .vk-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-vk.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .twitter-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .twitter-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .twitter-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-x.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .nc-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .nc-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .nc-login-btn>span i {
    background-color: #fff;
    background-image: url(../../img/login/icon-nc.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .steam-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .steam-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .steam-login-btn>span i {
    background-color: #fff;
    background-color: #3c628d;
    background-color: var(--login-steam-bg);
    background-image: url(../../img/login/icon-steam_dark.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party .switch-login-btn {
    position: relative;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.login-wrap .login-3rd-party .switch-login-btn>span {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1
}

.login-wrap .login-3rd-party .switch-login-btn>span i {
    background-color: #fff;
    background-color: #e60012;
    background-color: var(--login-switch-bg);
    background-image: url(../../img/login/icon-switch.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-size: cover;
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    display: block;
    height: 60px;
    margin-bottom: 4px;
    width: 60px
}

.login-wrap .login-3rd-party p {
    padding: 10px
}

@media(min-width: 640px) {
    .login-wrap .login-3rd-party {
        max-width:288px
    }

    .login-wrap .login-3rd-party p {
        padding: 10px 18px
    }
}

body[data-market=NCT] .login-wrap.sdk-login-form .login-3rd-party .steam-login-btn i {
    background-color: transparent;
    background-image: url(../../img/login/icon-steam.svg)
}

.login-actions {
    margin-top: 8px
}

[data-user-client=NGPClient] .login-actions {
    margin-top: 30px
}

.login-actions>button {
    margin-top: 8px;
}

.login-actions>button:first-child {
    /* margin-top:0; */
}

html.dark-mode .login-3rd-party button span:before {
    background-size: auto auto!important
}

.account-form legend {
    display: none
}

.account-form .input-group {
    padding-bottom: 8px;
    position: relative;
    text-align: left
}

.account-form .input-group label {
    display: none
}

.account-form .input-group input {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    background: var(--textfield-normal);
    border: 1px solid #c6cfd8;
    border: 1px solid var(--textfield-border-normal);
    color: #535768;
    color: var(--textfield-text-normal);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    justify-content: center;
    outline: none;
    padding: 0 15px;
    vertical-align: middle;
    width: 100%
}

.account-form .input-group input ::-webkit-validation-bubble-message {
    display: none
}

.account-form .input-group input::-ms-clear,.account-form .input-group input::-ms-reveal {
    display: none
}

.account-form .input-group input:focus {
    outline: none
}

.account-form .input-group input::-webkit-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.account-form .input-group input::-moz-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.account-form .input-group input::-ms-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.account-form .input-group input::placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.account-form .input-group input:-ms-input-placeholder {
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.account-form .input-group input:focus {
    background-color: var(--textfield-active);
    border: 1px solid #7985a2;
    border: 1px solid var(--textfield-border-active);
    color: #535768;
    color: var(--textfield-text-active)
}

.account-form .input-group input.invalid {
    border: 1px solid #da3f34;
    border: 1px solid var(--border-danger)
}

.account-form .input-group input:disabled {
    -webkit-text-fill-color: inherit;
    background-color: #edf0f3;
    background-color: var(--textfield-disabled);
    border: 1px solid #d5d9e2;
    border: 1px solid var(--textfield-border-disabled);
    color: #b8b8b8;
    color: var(--textfield-text-disabled);
    opacity: 1
}

.account-form .input-group input:disabled::-webkit-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.account-form .input-group input:disabled::-moz-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.account-form .input-group input:disabled:-ms-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.account-form .input-group input:disabled::-ms-input-placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.account-form .input-group input:disabled::placeholder {
    color: #b8b8b8;
    color: var(--textfield-text-disabled)
}

.account-form .input-group input::-webkit-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.account-form .input-group input::-moz-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.account-form .input-group input::-ms-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.account-form .input-group input::placeholder {
    color: #9398aa;
    color: var(--text-info)
}

.account-form .input-group input:-ms-input-placeholder {
    color: #9398aa;
    color: var(--text-info)
}

html:not([data-user-client=NCMop]) .account-form .input-group input::-webkit-input-placeholder {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .account-form .input-group input::-moz-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .account-form .input-group input:-ms-input-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .account-form .input-group input::-ms-input-placeholder {
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .account-form .input-group input::placeholder {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill,html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:active,html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:hover,html:not([data-user-client=NCMop]) .account-form .input-group select:-webkit-autofill,html:not([data-user-client=NCMop]) .account-form .input-group select:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .account-form .input-group select:-webkit-autofill:hover,html:not([data-user-client=NCMop]) .account-form .input-group textarea:-webkit-autofill,html:not([data-user-client=NCMop]) .account-form .input-group textarea:-webkit-autofill:focus,html:not([data-user-client=NCMop]) .account-form .input-group textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #535768!important;
    -webkit-text-fill-color: var(--textfield-text-normal)!important;
    -webkit-box-shadow: inset 0 0 0 30px #fff!important;
    -webkit-box-shadow: 0 0 0 30px var(--textfield-normal) inset!important
}

html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:active:disabled,html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .account-form .input-group input:-webkit-autofill:hover:disabled,html:not([data-user-client=NCMop]) .account-form .input-group select:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .account-form .input-group select:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .account-form .input-group select:-webkit-autofill:hover:disabled,html:not([data-user-client=NCMop]) .account-form .input-group textarea:-webkit-autofill:disabled,html:not([data-user-client=NCMop]) .account-form .input-group textarea:-webkit-autofill:focus:disabled,html:not([data-user-client=NCMop]) .account-form .input-group textarea:-webkit-autofill:hover:disabled {
    -webkit-text-fill-color: #b8b8b8!important;
    -webkit-text-fill-color: var(--textfield-text-disabled)!important;
    -webkit-box-shadow: inset 0 0 0 30px #edf0f3!important;
    -webkit-box-shadow: 0 0 0 30px var(--textfield-disabled) inset!important
}

.account-form .input-group input[type=number]::-webkit-inner-spin-button,.account-form .input-group input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.account-form .input-group input[type=number] {
    -moz-appearance: textfield
}

.account-form .input-group:after {
    clear: both;
    content: "";
    display: table
}

[dir=rtl] .account-form .input-group {
    text-align: right
}

.account-form .input-group .pwd-strength-meter {
    left: auto;
    line-height: 56px;
    line-height: var(--ui-input-height);
    position: absolute;
    right: 15px;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[dir=rtl] .account-form .input-group .pwd-strength-meter {
    left: 15px;
    right: auto
}

.account-form .input-group .pwd-strength-meter .grade {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-weight: 700
}

.account-form .input-group .pwd-strength-meter[data-meter="0"] .grade {
    color: #da3f34;
    color: var(--text-danger)
}

.account-form .input-group .pwd-strength-meter[data-meter="1"] .grade {
    color: #ff6c11;
    color: var(--text-warning)
}

.account-form .input-group .pwd-strength-meter[data-meter="2"] .grade {
    color: #04bbb4;
    color: var(--text-normal)
}

.account-form .input-group .pwd-strength-meter[data-meter="3"] .grade,.account-form .input-group .pwd-strength-meter[data-meter="4"] .grade {
    color: #03a1e0;
    color: var(--text-success)
}

.account-form .input-group .input-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.account-form .input-group .input-field.password input {
    padding: 0 60px 0 16px
}

[dir=rtl] .account-form .input-group .input-field.password input {
    padding: 0 16px 0 60px
}

.account-form .input-group .input-field>.input-wrap {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.account-form .input-group .borderline {
    position: relative
}

html:not([data-user-client=NGPClient]) .account-form .input-group .borderline {
    border: 1px solid #c6cfd8;
    border: 1px solid var(--border-normal)
}

html:not([data-user-client=NGPClient]) .account-form .input-group .borderline input {
    border: 0!important;
    padding-left: 15px;
    padding-right: 30px
}

html[dir=rtl]:not([data-user-client=NGPClient]) .account-form .input-group .borderline input {
    padding-left: 30px;
    padding-right: 15px
}

html:not([data-user-client=NGPClient]) .account-form .input-group .borderline.focus {
    border-color: #7985a2;
    border-color: var(--border-active)
}

html:not([data-user-client=NGPClient]) .account-form .input-group .borderline.invalid {
    border-color: #da3f34;
    border-color: var(--border-danger)
}

html:not([data-user-client=NGPClient]) .account-form .input-group .borderline .input-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

[data-user-client=NGPClient] .account-form .input-group .borderline.btn-in-input {
    border: 1px solid #c6cfd8;
    border: 1px solid var(--border-normal);
    border-radius: 0;
    border-radius: var(--ui-input-radius)
}

[data-user-client=NGPClient] .account-form .input-group .borderline.btn-in-input input {
    border: 0!important;
    padding-left: 15px;
    padding-right: 30px
}

[dir=rtl] [data-user-client=NGPClient] .account-form .input-group .borderline.btn-in-input input {
    padding-left: 30px;
    padding-right: 15px
}

[data-user-client=NGPClient] .account-form .input-group .borderline.btn-in-input.focus {
    border-color: #7985a2;
    border-color: var(--border-active)
}

[data-user-client=NGPClient] .account-form .input-group .borderline.btn-in-input.invalid {
    border-color: #da3f34;
    border-color: var(--border-danger)
}

.account-form .input-group .btn-in-input {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.account-form .input-group .btn-in-input .btn-wrap {
    height: 35px;
    height: var(--ui-button-in-input-height);
    margin: 0 11px 0 0
}

[dir=rtl] .account-form .input-group .btn-in-input .btn-wrap {
    margin: 0 0 0 11px
}

.account-form .input-group .btn-wrap.float {
    left: auto;
    position: absolute;
    right: 10px;
    top: 10px
}

[dir=rtl] .account-form .input-group .btn-wrap.float {
    left: 10px;
    right: auto
}

.account-form .input-group.field-button .input-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.account-form .input-group.field-button .input-field.invalid {
    border: 0!important
}

.account-form .input-group.field-button .input-field.invalid input {
    border-color: #da3f34;
    border-color: var(--border-danger)
}

.account-form .input-group.field-button .input-wrap input {
    height: 100%
}

.account-form .input-group.field-button .input-wrap+.btn-wrap {
    left: auto;
    margin-left: 8px;
    margin-right: 0;
    position: relative;
    right: 0;
    top: 0
}

[dir=rtl] .account-form .input-group.field-button .input-wrap+.btn-wrap {
    left: 0;
    margin-left: 0;
    margin-right: 8px;
    right: auto
}

.account-form .input-group.field-button .btn-primary {
    font-size: 14px!important;
    line-height: 1.2;
    max-width: 120px;
    min-width: 90px
}

@media(min-width: 640px) {
    .account-form .input-group.field-button .btn-primary {
        max-width:155px
    }
}

html[lang^=ru] .account-form .input-group.field-button .btn-primary {
    font-size: 12px!important;
    max-width: 134px!important;
    padding: 0 6px
}

.account-form .input-group.field-button+div .invalid {
    padding-top: 10px
}

.account-form .input-group.field-button+div .input-field.invalid,.account-form .input-group.field-button+div input.invalid {
    padding-top: 0
}

.account-form .input-group.check-box {
    padding-bottom: 0;
    width: 100%
}

.account-form .input-group.error .msg {
    display: inline-block;
    padding-top: 10px
}

.account-form .input-group.error input {
    border: 1px solid #da3f34;
    border: 1px solid var(--border-danger)
}

.account-form .input-group.error .msg {
    color: #da3f34;
    color: var(--text-danger)
}

.account-form .input-group input {
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    min-height: 56px;
    min-height: var(--ui-input-height)
}

.account-form .input-group input[type=text][data-mode=eng] {
    -webkit-ime-mode: disabled;
    -moz-ime-mode: disabled;
    -ms-ime-mode: disabled;
    ime-mode: disabled
}

.account-form .input-group .icon-confirm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    height: var(--ui-button-height);
    justify-content: center;
    left: auto;
    position: absolute;
    right: 15px;
    width: 15px;
    z-index: 999
}

[dir=rtl] .account-form .input-group .icon-confirm {
    left: 15px;
    right: auto
}

.account-form .input-group .icon-confirm:after {
    border: 3px solid #378ff1;
    border-width: 0 3px 3px 0;
    content: "";
    display: block;
    height: 13px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 7px
}

.account-form .input-group .icon-confirm span {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 sans-serif;
    text-shadow: none
}

.account-form .input-group .btn-reset {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    height: var(--ui-button-height);
    justify-content: center;
    left: auto;
    position: absolute;
    right: 10px;
    top: 0;
    width: 30px;
    z-index: 999
}

[dir=rtl] .account-form .input-group .btn-reset {
    left: 10px;
    right: auto
}

.account-form .input-group .btn-reset button {
    background-color: transparent;
    border: 0;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 sans-serif;
    height: 30px;
    position: relative;
    text-shadow: none;
    width: 30px
}

.account-form .input-group .btn-reset button:hover:after,.account-form .input-group .btn-reset button:hover:before {
    background: #6b7ea5;
    background: var(--icon-bg)
}

.account-form .input-group .btn-reset button:after,.account-form .input-group .btn-reset button:before {
    background: #b9bcc6;
    content: "";
    height: 1px;
    left: 5px;
    margin-top: -1px;
    position: absolute;
    right: auto;
    top: 15px;
    width: 64%
}

[dir=rtl] .account-form .input-group .btn-reset button:after,[dir=rtl] .account-form .input-group .btn-reset button:before {
    left: auto;
    right: 5px
}

.account-form .input-group .btn-reset button:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.account-form .input-group .btn-reset button:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.account-form .input-group .btn-reset button span {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 sans-serif;
    text-shadow: none
}

[data-user-client=NGPClient] .account-form .input-group .btn-reset button {
    padding-left: 10px
}

[data-user-client=NGPClient] .account-form .input-group .btn-reset button:before {
    content: none
}

[data-user-client=NGPClient] .account-form .input-group .btn-reset button:after {
    background-color: transparent;
    background-image: url(../../img/login/purple/icon_clear.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    left: 0;
    margin: 0;
    position: static;
    top: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 16px
}

.account-form .input-group .msg {
    display: inline-block;
    font-size: 14px;
    padding-bottom: 7px;
    padding-top: 8px;
    width: 100%
}

.account-form .input-group .msg:after {
    clear: both;
    content: "";
    display: table
}

.account-form .input-group .msg.warning {
    left: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: -32px;
    width: auto
}

[dir=rtl] .account-form .input-group .msg.warning {
    left: 0;
    right: auto
}

.account-form .input-group .msg.invalid+.msg {
    padding-top: 0
}

.account-form .input-group .msg.warning {
    color: #007fff;
    color: var(--text-em)
}

.account-form .input-group .msg.invalid {
    color: #da3f34;
    color: var(--text-danger)
}

.account-form .input-group.g-recaptcha-invisible {
    padding: 0!important
}

.account-form .input-group.g-recaptcha-invisible .grecaptcha-badge {
    z-index: 1
}

.account-form .input-group input {
    height: 56px;
    height: var(--ui-input-height);
    padding-right: 32px
}

.account-form .input-group input,.account-form .input-group input:focus {
    background-color: #fff;
    background-color: var(--login-textfield)
}

.account-form .input-group input:-webkit-autofill,.account-form .input-group input:-webkit-autofill:focus,.account-form .input-group input:-webkit-autofill:hover {
    -webkit-text-fill-color: #535768;
    -webkit-text-fill-color: var(--textfield-text-normal);
    -webkit-box-shadow: inset 0 0 0 9999px #fff!important;
    -webkit-box-shadow: inset 0 0 0 9999px var(--login-textfield)!important
}

.account-form .input-group .borderline .dropdown .select,.account-form .input-group .borderline .dropdown select,html:not([data-user-client=NGPClient]) .account-form .input-group .borderline .dropdown .list>li {
    background-color: #fff;
    background-color: var(--login-textfield)
}

@media(min-width: 960px) {
    .account-form .input-group input,.account-form .input-group input:focus {
        background-color:#fff;
        background-color: var(--login-textfield-pc)
    }

    .account-form .input-group input:-webkit-autofill,.account-form .input-group input:-webkit-autofill:focus,.account-form .input-group input:-webkit-autofill:hover {
        -webkit-text-fill-color: #535768;
        -webkit-text-fill-color: var(--textfield-text-normal);
        -webkit-box-shadow: inset 0 0 0 9999px #fff!important;
        -webkit-box-shadow: inset 0 0 0 9999px var(--login-textfield-pc)!important
    }

    .account-form .input-group .dropdown .select,.account-form .input-group .dropdown select,html:not([data-user-client=NGPClient]) .account-form .input-group .dropdown .list>li {
        background-color: #fff!important;
        background-color: var(--login-textfield-pc)!important
    }
}

.account-form .input-group .input-flex.invalid {
    border: 1px solid #da3f34
}

.account-form .input-group .btn-wrap {
    margin: 0 0 0 8px;
    width: auto
}

[dir=rtl] .account-form .input-group .btn-wrap {
    margin: 0 8px 0 0
}

.account-form .input-group .btn-wrap button {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-weight: 400;
    padding: 0 15px
}

.account-form .input-group .btn-wrap .btn-primary {
    width: inherit!important
}

.account-form .btn-delete {
    background-color: transparent;
    border: 0;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 sans-serif;
    height: 30px;
    left: auto;
    position: relative;
    position: absolute;
    right: 8px;
    text-shadow: none;
    top: 14px;
    width: 30px;
    z-index: 9
}

.account-form .btn-delete:hover:after,.account-form .btn-delete:hover:before {
    background: #6b7ea5;
    background: var(--icon-bg)
}

.account-form .btn-delete:after,.account-form .btn-delete:before {
    background: #b9bcc6;
    content: "";
    height: 1px;
    left: 5px;
    margin-top: -1px;
    position: absolute;
    right: auto;
    top: 15px;
    width: 64%
}

[dir=rtl] .account-form .btn-delete:after,[dir=rtl] .account-form .btn-delete:before {
    left: auto;
    right: 5px
}

.account-form .btn-delete:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.account-form .btn-delete:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

[dir=rtl] .account-form .btn-delete {
    left: 8px;
    right: auto
}

[data-user-client=NGPClient] .account-form .btn-delete {
    height: auto;
    padding: 10px;
    right: 2px;
    top: calc(50% - 18px);
    width: auto
}

[data-user-client=NGPClient] .account-form .btn-delete:before {
    content: none
}

[data-user-client=NGPClient] .account-form .btn-delete:after {
    background-color: transparent;
    background-image: url(../../img/login/purple/icon_clear.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    left: 0;
    margin: 0;
    position: static;
    top: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 16px
}

.account-form .msg {
    display: block;
    letter-spacing: -.5px;
    line-height: 1.8rem
}

.account-form .msg.invalid {
    color: #da3f34;
    font-size: 1.4rem;
    padding-top: 10px
}

.account-form .login-util:after {
    clear: both;
    content: "";
    display: table
}

.account-form .login-util+.btn-wrap {
    padding-top: 5px
}

.account-form .save-account {
    float: left;
    position: relative;
    white-space: nowrap
}

.account-form .save-account:after {
    clear: both;
    content: "";
    display: table
}

[dir=rtl] .account-form .save-account {
    float: right
}

.account-form .save-account .check-box {
    background: none!important;
    border: 0!important;
    float: left;
    height: auto;
    min-height: auto!important;
    min-width: auto!important;
    opacity: 0;
    position: absolute;
    vertical-align: middle
}

.account-form .save-account .check-box+label {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    line-height: 1.2;
    padding: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.account-form .save-account .check-box+label>em {
    margin-right: 2px
}

.account-form .save-account .check-box+label>span {
    margin-left: 6px;
    margin-right: 0
}

[dir=rtl] .account-form .save-account .check-box+label>span {
    margin-left: 0;
    margin-right: 6px
}

.account-form .save-account .check-box+label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23C6CFD8' cx='11' cy='11' r='10.5'/%3E%3Cpath d='m9.032 15.415-3.699-3.7.778-.777 2.921 2.92 6.574-6.572.777.778-7.35 7.35z' fill='%23C6CFD8'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-check);
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    display: inline-block;
    height: 22px;
    margin: 0;
    min-width: 22px;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    vertical-align: top;
    width: 22px
}

[dir=rtl] .account-form .save-account .check-box+label:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.account-form .save-account .check-box:checked+label {
    font-weight: 700
}

.account-form .save-account .check-box:checked+label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23004C98'/%3E%3Cpath stroke='%23FFF' stroke-linecap='square' stroke-width='1.818' d='m8.875 12.642 5.312-5.311M5.556 10.65l2.655 2.656'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-check-on)
}

.account-form .save-account .check-box:disabled+label {
    color: #b8b8b8;
    color: var(--text-disabled);
    cursor: auto
}

.account-form .save-account .check-box:disabled+label:before {
    background-color: #edf0f3;
    background-color: var(--bg-disabled)
}

[dir=rtl] .account-form .save-account .check-box {
    float: right
}

.account-form .save-account .check-box label {
    white-space: nowrap
}

@media(min-width: 960px) {
    .account-form .save-account .check-box label {
        margin-top:-1px
    }
}

.account-form .save-account .tooltip {
    float: left
}

.account-form .save-account .tooltip .icon {
    background-image: url(../../img/icons/info-off.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 16px 15px;
    cursor: pointer;
    height: 15px;
    margin: 4px 0 5px;
    text-align: center;
    width: 16px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    .account-form .save-account .tooltip .icon {
        background-image:url(../../img/icons/info-off@2x.png)
    }
}

.account-form .save-account .tooltip .icon.show {
    background-image: url(../../img/icons/info-on.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 16px 15px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    .account-form .save-account .tooltip .icon.show {
        background-image:url(../../img/icons/info-on@2x.png)
    }
}

.account-form .save-account .tooltip .icon.show+.message {
    opacity: 1;
    visibility: visible
}

.account-form .save-account .tooltip .icon p {
    display: none
}

.account-form .save-account .tooltip .message {
    background-color: #fffad4;
    border: 1px solid #dbcbb0;
    left: 0;
    margin-top: 8px;
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: auto;
    top: -77px;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    visibility: hidden;
    z-index: 100
}

[dir=rtl] .account-form .save-account .tooltip .message {
    left: auto;
    right: 0
}

.account-form .save-account .tooltip .message:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #dbcbb0;
    content: "";
    height: 0;
    left: 90px;
    position: absolute;
    top: 63px;
    width: 0
}

.account-form .save-account .tooltip .message:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fffad4;
    content: "";
    height: 0;
    left: 91px;
    position: absolute;
    top: 63px;
    width: 0
}

.account-form .save-account .tooltip .message ul {
    list-style: none
}

.account-form .save-account .tooltip .message li {
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 0;
    position: relative
}

[dir=rtl] .account-form .save-account .tooltip .message li {
    padding-left: 0;
    padding-right: 5px
}

.account-form .save-account .tooltip .message li:before {
    background-color: #a9a89d;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    margin-top: -1px;
    position: absolute;
    right: auto;
    top: 50%;
    width: 2px
}

[dir=rtl] .account-form .save-account .tooltip .message li:before {
    left: auto;
    right: 0
}

.account-form .save-account .tooltip .message li:first-child {
    margin-top: 0
}

.account-form .save-account .tooltip .message p {
    color: #535768;
    font-size: 1.3rem;
    white-space: nowrap
}

html[lang=ko] .keypad-btn {
    color: #a1a3ad;
    cursor: pointer;
    display: block;
    font-size: 12px;
    left: auto;
    position: absolute;
    right: 0;
    text-decoration: underline;
    top: -25px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

html[dir=rtl][lang=ko] .keypad-btn {
    left: 0;
    right: auto
}

.account-form .keypad-btn {
    display: none
}

.account-form .btn-wrap {
    padding: 0 0 20px
}

html[lang=ar] .account-form .btn-wrap .qr-login-btn span {
    font-size: 14px
}

.account-form .btn-wrap .qr-login-btn span i:before {
    height: 18px!important;
    width: 18px!important
}

@media(min-width: 640px) {
    html:not([data-user-client=NGPClient]) .account-form .btn-wrap {
        padding-bottom:10px
    }
}

@media(min-width: 960px) {
    .account-form .btn-wrap {
        padding-bottom:20px
    }
}

.account-form .btn-login {
    text-wrap: balance;
    background-color: #004c98;
    background-color: var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.7rem;
    font-size: var(--btn-login-font-size);
    margin: 0 auto;
    /* min-height:56px; */
    /* min-height:var(--ui-button-height); */
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word;
    max-height: 50px;
}

.account-form .btn-login.min-105 {
    min-width: 105px
}

.account-form .btn-login span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative;
    max-height: 10px;
}

.account-form .btn-login.disabled,.account-form .btn-login:disabled {
    color: #fff;
    color: var(--button-text-disabled);
    cursor: default
}

.account-form .btn-login.disabled,.account-form .btn-login.disabled:active,.account-form .btn-login.disabled:hover,.account-form .btn-login:disabled,.account-form .btn-login:disabled:active,.account-form .btn-login:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.account-form .btn-login:hover {
    background: #336fac;
    background: var(--button-hover);
    border-color: #336fac;
    border-color: var(--button-hover)
}

.account-form .btn-login:active {
    background: #003569;
    background: var(--button-active);
    border-color: #003569;
    border-color: var(--button-active)
}

@-webkit-keyframes btn-spin {
    0% {
        -webkit-transform: rotate(0deg) scale3d(.8,.8,.8);
        transform: rotate(0deg) scale3d(.8,.8,.8)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes btn-spin {
    0% {
        -webkit-transform: rotate(0deg) scale3d(.8,.8,.8);
        transform: rotate(0deg) scale3d(.8,.8,.8)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.wrap-contents i.icon-qr-scan {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h16v16H0z'/%3E%3Cpath fill='%239398AA' fill-rule='nonzero' d='M1.333 7.333h13.334v1.334H1.333V7.333zm13.334-2h-1.334V2.667h-2.666V1.333h4v4zm0 9.334v-4h-1.334v2.666h-2.666v1.334h4zm-13.334 0h4v-1.334H2.667v-2.666H1.333v4zm0-13.334v4h1.334V2.667h2.666V1.333h-4z'/%3E%3C/g%3E%3C/svg%3E");
    display: inline-block;
    height: 16px;
    margin: 3px 0;
    vertical-align: top;
    width: 16px
}

.wrap-contents i.icon-refresh {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.5'%3E%3Cpath stroke='%23535768' stroke-width='1.5' d='M13.29 4.42A6.484 6.484 0 0 0 1.181 7.649a6.484 6.484 0 0 0 12.064 3.305'/%3E%3Cpath stroke='%23535768' stroke-width='1.5' d='m13.29.388.03 4.047-3.935.309'/%3E%3Cpath d='M0 0h15v15H0z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 15px;
    width: 15px
}

.wrap-contents i.icon-refresh.dark,html.dark-mode .wrap-contents i.icon-refresh {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.5'%3E%3Cpath stroke='%23FFF' stroke-width='1.333' d='M14.176 4.715a6.917 6.917 0 1 0-.048 6.971'/%3E%3Cpath stroke='%23FFF' stroke-width='1.333' d='m14.176.414.032 4.317-4.197.329'/%3E%3Cpath d='M0 0h16v16H0z'/%3E%3C/g%3E%3C/svg%3E");
    height: 16px;
    width: 16px
}

.contents {
    padding-bottom: 30px
}

.contents .qr-img-wrap {
    display: inline-block
}

.contents .qr-img-wrap .img {
    background-color: #fff;
    border: 1px solid #03a1e0;
    border: 1px solid var(--text-success);
    padding: 14px
}

.contents .qr-img-wrap .code {
    min-height: 165px;
    min-width: 165px;
    position: relative
}

.contents .qr-img-wrap .code img {
    position: relative;
    vertical-align: top
}

.contents .qr-img-wrap .qr-timer {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 10px
}

.contents .qr-img-wrap .qr-timer .timer {
    height: auto;
    position: relative;
    right: 0;
    top: 0
}

.contents .qr-img-wrap .qr-timer .btn-refresh {
    margin-left: auto
}

.contents .qr-img-wrap .qr-timer .btn-refresh.active>i {
    -webkit-animation: btn-spin .6s linear;
    animation: btn-spin .6s linear
}

.contents .login-qr-code {
    margin-top: 40px
}

.contents .login-qr-code .btn-wrap .btn-cancel__qr {
    border: 1px solid #c6cfd8;
    border: 1px solid var(--login-3rdparty);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    height: 56px;
    height: var(--ui-button-height);
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
    width: 100%
}

.contents .login-qr-code .btn-wrap .btn-cancel__qr:active,.contents .login-qr-code .btn-wrap .btn-cancel__qr:hover {
    border-color: #7985a2;
    border-color: var(--login-3rdparty-active)
}

.contents .login-qr-code .btn-wrap .btn-cancel__qr>span {
    color: #535768;
    color: var(--text-primary)
}

@media(min-width: 960px) {
    .contents .login-qr-code .btn-wrap .btn-cancel__qr {
        width:365px
    }
}

.contents .qr-login-info {
    padding-top: 20px
}

.contents .qr-login-info .content-info .btn-link {
    text-underline-position: under
}

@media(min-width: 960px) {
    .contents .qr-login-info {
        margin-left:auto;
        margin-right: auto;
        max-width: 365px
    }
}

.contents .user-info td,.contents .user-info th {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    padding: 8px 0;
    text-align: left
}

.contents .user-info th {
    color: #9398aa;
    color: var(--text-info);
    padding-right: 30px
}

.contents .user-info td {
    color: #535768;
    color: var(--text-primary)
}

#modals-container .modals .view-body {
    padding: 0
}

#modals-container .modals .qr-login-guide ul {
    list-style: none
}

#modals-container .modals .qr-login-guide li {
    padding: 24px
}

#modals-container .modals .qr-login-guide li article {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

#modals-container .modals .qr-login-guide li p {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-bottom: 20px;
    min-width: 200px;
    vertical-align: top
}

#modals-container .modals .qr-login-guide li p b,#modals-container .modals .qr-login-guide li p span {
    color: #535768!important;
    color: var(--text-primary)!important
}

#modals-container .modals .qr-login-guide li p b {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    font-weight: 700;
    line-height: 1.1;
    margin-left: 0;
    margin-right: 2px
}

[dir=rtl] #modals-container .modals .qr-login-guide li p b {
    margin-left: 2px;
    margin-right: 0
}

#modals-container .modals .qr-login-guide li p span {
    font-size: 13px
}

#modals-container .modals .qr-login-guide li p .icon-qr-scan {
    margin: 1px 0
}

html[lang=ko] #modals-container .modals .qr-login-guide li:first-child .guide-img {
    background-image: url(../../img/login/qr/guide1.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    html[lang=ko] #modals-container .modals .qr-login-guide li:first-child .guide-img {
        background-image:url(../../img/login/qr/guide1@2x.png)
    }
}

html:not([lang=ko]) #modals-container .modals .qr-login-guide li:first-child .guide-img {
    background-image: url(../../img/login/qr/global/guide1.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    html:not([lang=ko]) #modals-container .modals .qr-login-guide li:first-child .guide-img {
        background-image:url(../../img/login/qr/global/guide1@2x.png)
    }
}

html[lang=ko] #modals-container .modals .qr-login-guide li:nth-child(2) .guide-img {
    background-image: url(../../img/login/qr/guide2.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    html[lang=ko] #modals-container .modals .qr-login-guide li:nth-child(2) .guide-img {
        background-image:url(../../img/login/qr/guide2@2x.png)
    }
}

html:not([lang=ko]) #modals-container .modals .qr-login-guide li:nth-child(2) .guide-img {
    background-image: url(../../img/login/qr/global/guide2.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    html:not([lang=ko]) #modals-container .modals .qr-login-guide li:nth-child(2) .guide-img {
        background-image:url(../../img/login/qr/global/guide2@2x.png)
    }
}

html[lang=ko] #modals-container .modals .qr-login-guide li:nth-child(3) .guide-img {
    background-image: url(../../img/login/qr/guide3.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    html[lang=ko] #modals-container .modals .qr-login-guide li:nth-child(3) .guide-img {
        background-image:url(../../img/login/qr/guide3@2x.png)
    }
}

html:not([lang=ko]) #modals-container .modals .qr-login-guide li:nth-child(3) .guide-img {
    background-image: url(../../img/login/qr/global/guide3.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    html:not([lang=ko]) #modals-container .modals .qr-login-guide li:nth-child(3) .guide-img {
        background-image:url(../../img/login/qr/global/guide3@2x.png)
    }
}

#modals-container .modals .qr-login-guide .guide-img {
    background-color: #eee;
    -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.15);
    height: 433px;
    width: 200px
}

@media(min-width: 840px) {
    #modals-container .modals .qr-login-guide ul {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: space-between
    }

    #modals-container .modals .qr-login-guide article {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        height: 100%;
        justify-content: space-between;
        min-height: 489px
    }

    #modals-container .modals .qr-login-guide article p {
        width: 200px
    }

    #modals-container .modals .qr-login-guide article p span {
        margin-left: 0;
        margin-right: -10px
    }

    [dir=rtl] #modals-container .modals .qr-login-guide article p span {
        margin-left: -10px;
        margin-right: 0
    }
}

.result-section .btn-wrap .btn-primary i {
    margin: 2px 0 0 8px
}

.login-contents .select-country-header {
    padding: 20px 0 40px;
    text-align: center
}

.login-contents .select-country-header h1 {
    color: #535768;
    color: var(--text-primary)
}

.login-contents .select-country-header h1.title {
    font-size: 28px
}

.login-contents .select-country-header h1.title+.desc {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    margin-top: 15px
}

@media(min-width: 960px) {
    .login-contents .select-country-header {
        padding-bottom:60px;
        padding-top: 40px
    }
}

.login-contents .select_country {
    padding-bottom: 40px;
    position: relative
}

.login-contents .select_country .dropdown {
    position: relative
}

.login-contents .select_country .dropdown:after {
    content: none
}

.login-contents .select_country .dropdown .select-box .select,.login-contents .select_country .dropdown select {
    border: 1px solid #c6cfd8;
    border: 1px solid var(--dropdown-line);
    font-size: 1.5rem;
    font-size: var(--ui-font-size)
}

.login-contents .select_country .dropdown .select-box .list {
    max-height: 530px;
    overflow-y: auto
}

.login-contents .select_country .dropdown .select-box .list li.option {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px
}

.login-contents .select_country .dropdown .select,.login-contents .select_country .dropdown .select-box .list li.option {
    padding-left: 30px;
    padding-right: 0;
    text-align: left
}

[dir=rtl] .login-contents .select_country .dropdown .select,[dir=rtl] .login-contents .select_country .dropdown .select-box .list li.option {
    padding-left: 0;
    padding-right: 30px;
    text-align: right
}

.login-contents .select_country .dropdown.is-disabled .select-box .select {
    background-color: #fff;
    background-color: var(--dropdown-select-bg-disabled);
    border-color: #e8ecef;
    border-color: var(--dropdown-select-border-disabled);
    padding: 0 16px 0 30px
}

[dir=rtl] .login-contents .select_country .dropdown.is-disabled .select-box .select {
    padding: 0 30px 0 16px
}

@media(min-width: 960px) {
    .login-contents .select_country {
        padding-bottom:30px
    }

    .login-contents .select_country+.btn-wrap {
        margin-bottom: 80px
    }
}

.login-contents .current-country {
    margin-bottom: 9px;
    min-height: 19px
}

.login-contents .current-country:after {
    clear: both;
    content: "";
    display: table
}

.current-country-button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #535768;
    color: var(--text-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: right;
    font-size: 14px;
    text-decoration: none
}

.current-country-button i.icon-country {
    background-image: url(../../img/login/ic-country_light.svg);
    background-image: var(--icon-country);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 15px;
    margin-left: 0;
    margin-right: 5px;
    width: 15px
}

[dir=rtl] .current-country-button i.icon-country {
    margin-left: 5px;
    margin-right: 0
}

.current-country-button span {
    line-height: 1.4
}

.current-country-button:after {
    border: 1px solid #9398aa;
    border-bottom: 1px solid var(--button-arrow-icon);
    border-left: 0 solid var(--button-arrow-icon);
    border-right: 1px solid var(--button-arrow-icon);
    border-top: 0 solid var(--button-arrow-icon);
    color: transparent;
    content: "";
    display: block;
    font-size: 0;
    height: 6px;
    margin-left: 1px;
    margin-right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
    vertical-align: top;
    width: 6px
}

[dir=rtl] .current-country-button:after {
    margin-left: 0;
    margin-right: 1px;
    -webkit-transform: rotate(135deg)!important;
    transform: rotate(135deg)!important
}

.current-country-button:hover span {
    text-decoration: underline
}

.login-contents.nct-global-login {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: calc(100vh - 130px)!important
}

.login-contents.nct-global-login .inner-box {
    width: 100%
}

.login-contents .app-approval-text {
    background-color: #f5f5f5;
    background-color: var(--bg-grey-2);
    margin-left: -20px;
    margin-right: -20px;
    margin-top: auto;
    padding: 30px 20px
}

.login-contents .app-approval-text p {
    color: #535768;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.43;
    margin: 0 auto;
    max-width: 440px
}

.login-contents .app-approval-text p a {
    color: #0095ff;
    color: var(--text-link)
}

@media(min-width: 960px) {
    .login-contents.nct-global-login {
        display:block;
        min-height: auto!important
    }

    .login-contents.nct-global-login .inner-box {
        border-bottom: none;
        padding-bottom: 10px
    }

    .login-contents .app-approval-text {
        border-bottom: 1px solid #c6cfd8;
        border-bottom: 1px solid var(--login-box);
        border-left: 1px solid #c6cfd8;
        border-left: 1px solid var(--login-box);
        border-right: 1px solid #c6cfd8;
        border-right: 1px solid var(--login-box);
        margin: 0 auto;
        width: 450px
    }

    .login-contents .app-approval-text p {
        max-width: 365px
    }
}

html[data-user-platform=steam],html[data-user-platform=steam] body,html[data-user-platform=steam] body #container {
    background-color: transparent!important;
    background-color: initial!important
}

html[data-user-platform=steam] body {
    background-image: radial-gradient(circle at 50% -6%,#454545,#171717 77%);
    background-repeat: no-repeat
}

html[data-user-platform=steam] body #container {
    min-height: 100vh
}

html[data-user-platform=steam] body #container .wrap-contents {
    background-color: transparent!important;
    padding-top: 0!important
}

html[data-user-platform=steam] body main {
    padding-bottom: 0
}

html[data-user-platform=steam] body .modals .modal .content {
    background-color: #2e2e2e
}

html[data-user-platform=steam] body .modals .modal .content .text,html[data-user-platform=steam] body .modals .modal .content h2.title,html[data-user-platform=steam] body .modals .modal .content p {
    color: #fff
}

html[data-user-platform=steam] body .modals .actions button.cancel {
    background-color: #747373
}

html[data-user-platform=steam] body .modals .actions button.submit {
    background: linear-gradient(104deg,var(--gradient1),var(--gradient2) 51%,var(--gradient1)) 0/200%;
    background: linear-gradient(104deg,var(--gradient1),var(--gradient2) 51%,var(--gradient1)) var(--x,0)/200%;
    -webkit-transition: background .5s ease;
    transition: background .5s ease
}

html[data-user-platform=steam] body .modals .actions button.submit.disabled,html[data-user-platform=steam] body .modals .actions button.submit:disabled {
    background: hsla(0,0%,100%,.3)
}

html[data-user-platform=steam] body .modals .actions button.submit:not(.disabled).on,html[data-user-platform=steam] body .modals .actions button.submit:not(.disabled):hover,html[data-user-platform=steam] body .modals .actions button.submit:not(:disabled).on,html[data-user-platform=steam] body .modals .actions button.submit:not(:disabled):hover {
    --x: 100%
}

html[data-user-platform=steam] body .modals .actions button.cancel:hover {
    background-color: #818080
}

html[data-user-platform=steam] body .modals .actions.multiple button:first-child {
    border-bottom-right-radius: 0
}

html[data-user-platform=steam] body .modals .actions.multiple button:last-child {
    border-bottom-left-radius: 0
}

html[data-user-platform=steam] header.login-header {
    margin-bottom: 40px;
    padding: 45px 0 40px;
    position: relative
}

html[data-user-platform=steam] header.login-header .logo {
    display: none
}

html[data-user-platform=steam] header.login-header .title {
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 400
}

html[data-user-platform=steam] header.login-header:after {
    background-image: -webkit-gradient(linear,right top,left top,from(hsla(0,0%,9%,0)),color-stop(#6f6f6f),to(hsla(0,0%,9%,0)));
    background-image: linear-gradient(270deg,hsla(0,0%,9%,0),#6f6f6f,hsla(0,0%,9%,0));
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: calc(50% - 205px);
    position: absolute;
    width: 410px
}

html[data-user-platform=steam] .wrapper .toast-wrap .error {
    max-width: none
}

html[data-user-platform=steam] .inner-box {
    background-color: transparent;
    border: 0;
    max-width: 410px;
    min-height: auto;
    min-width: auto!important;
    padding: 0
}

html[data-user-platform=steam] .inner-box .login-wrap {
    max-width: none
}

html[data-user-platform=steam] .login-wrap .current-country {
    display: none
}

html[data-user-platform=steam] .login-wrap .input-group .btn-delete {
    top: 10px
}

html[data-user-platform=steam] .login-wrap .input-group input {
    background-color: #424242!important;
    height: 46px;
    min-height: 46px
}

html[data-user-platform=steam] .login-wrap .input-group input:-webkit-autofill,html[data-user-platform=steam] .login-wrap .input-group input:-webkit-autofill:focus,html[data-user-platform=steam] .login-wrap .input-group input:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 9999px #424242!important
}

html[data-user-platform=steam] .login-wrap .input-group .dropdown .select,html[data-user-platform=steam] .login-wrap .input-group .dropdown select {
    background-color: #424242!important;
    height: 46px
}

html[data-user-platform=steam] .login-wrap .input-group .dropdown .list {
    top: 46px
}

html[data-user-platform=steam] .login-wrap .btn-wrap {
    margin-top: 12px
}

html[data-user-platform=steam] .login-wrap .btn-wrap button {
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    height: 46px;
    min-height: 46px
}

html[data-user-platform=steam] .login-wrap .btn-wrap button>span {
    min-height: auto
}

html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login {
    background: linear-gradient(104deg,var(--gradient1),var(--gradient2) 51%,var(--gradient1)) 0/200%;
    background: linear-gradient(104deg,var(--gradient1),var(--gradient2) 51%,var(--gradient1)) var(--x,0)/200%;
    -webkit-transition: background .5s ease;
    transition: background .5s ease
}

html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login.disabled,html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login:disabled {
    background: hsla(0,0%,100%,.3)
}

html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login:not(.disabled).on,html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login:not(.disabled):hover,html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login:not(:disabled).on,html[data-user-platform=steam] .login-wrap .btn-wrap button.btn-login:not(:disabled):hover {
    --x: 100%
}

html[data-user-platform=steam] .login-wrap .signin-with {
    font-size: 13px;
    padding: 0 0 12px
}

html[data-user-platform=steam] .login-wrap .login-3rd-party {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: none
}

html[data-user-platform=steam] .login-wrap .login-3rd-party>p {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    padding: 0 5px
}

html[data-user-platform=steam] .login-wrap .login-3rd-party>p button i {
    background-size: 22px 22px;
    height: 40px;
    width: 40px
}

html[data-user-platform=steam] .login-wrap .account-info {
    margin: 0 -30px
}

html[data-user-platform=steam] .login-wrap .account-info a {
    font-size: 13px;
    font-weight: 400
}

html[data-user-platform=steam] .login-wrap .account-info .account-info__list li {
    padding: 0 30px
}

html[data-user-platform=steam] .login-wrap .account-info .account-info__list a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

html[data-user-platform=steam] .login-wrap .account-info .account-info__list a:after {
    background-image: url(../../img/login/ic-externallink.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: 10px;
    margin-left: 5px;
    width: 10px
}

html[data-user-platform=steam] .login-actions .phone-login-btn {
    width: 100%
}

html[data-user-platform=steam] .login-actions .phone-login-btn i {
    display: none
}

.nc-sdk-signin #container .wrap-contents {
    margin-bottom: 0
}

.nc-sdk-signin #container .wrap-contents:after {
    content: none
}

.wrapper .sdk-login .toast-wrap .error {
    font-size: 14px;
    padding: 14px
}

.wrapper .sdk-login .login-contents {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 20px 0 10px;
    position: relative
}

.wrapper .sdk-login .login-contents .app-approval-text {
    -ms-flex-item-align: center;
    align-self: center;
    border: 0;
    margin: 0;
    max-width: 610px;
    padding: 16px;
    width: auto
}

.wrapper .sdk-login .login-contents .app-approval-text p {
    font-size: 11px;
    max-width: none
}

.sdk-login-form {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px
}

.sdk-login-form .login-3rd-party,.sdk-login-form .login-nc {
    margin: 0 5px
}

.sdk-login-form .login-nc {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 360px;
    padding: 6px;
    position: relative
}

.sdk-login-form .login-nc .account-form .input-group input {
    background-color: #464646
}

.sdk-login-form .login-nc .account-form .btn-wrap {
    padding-bottom: 10px
}

.sdk-login-form .login-3rd-party {
    -webkit-box-flex: 0;
    display: block;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-bottom: 20px
}

.sdk-login-form .login-3rd-party>p {
    -webkit-box-flex: 0;
    display: block;
    -ms-flex: none;
    flex: none;
    padding: 6px
}

.sdk-login-form .login-3rd-party .login-btn {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    max-width: 340px;
    min-height: 42px;
    min-width: 240px;
    padding: 12px
}

.sdk-login-form .login-3rd-party .login-btn>span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1;
    text-align: center
}

.sdk-login-form .login-3rd-party .login-btn>span i {
    background-size: 18px 18px;
    border: 0;
    border-radius: 0;
    height: 18px;
    margin: 0;
    width: 18px
}

.sdk-login-form .login-3rd-party .login-btn>span b {
    -webkit-box-flex: 1;
    color: #535768!important;
    -ms-flex: 1;
    flex: 1
}

.sdk-login-form .login-3rd-party .login-btn.guest-btn {
    background-color: #ccc
}

.sdk-login-form .login-3rd-party .login-btn.guest-btn>span b {
    color: #171717!important
}

.sdk-login-form .input-group {
    padding-bottom: 12px
}

.sdk-login-form .input-group input {
    border-radius: 2px;
    height: 42px;
    min-height: 42px
}

.sdk-login-form .input-group .btn-delete {
    top: 8px
}

.sdk-login-form .login-actions button {
    border-radius: 2px;
    height: 42px;
    min-height: 42px!important
}

.sdk-login-form .login-actions button>span {
    font-size: 14px;
    min-height: 22px!important
}

.sdk-login-form .account-info {
    padding: 12px 0
}

.sdk-login-form .account-info__list li a {
    font-size: 14px
}

.sdk-login-form .current-country-button {
    float: none;
    left: 11px;
    position: absolute;
    top: -24px
}

.sdk-login-form .current-country-button span {
    text-decoration: none
}

.sdk-login-form .current-country-button:after {
    content: none
}

.sdk-login-form .current-country-button:before {
    border: 1px solid #9398aa;
    border-bottom: 1px solid var(--button-arrow-icon);
    border-left: 0 solid var(--button-arrow-icon);
    border-right: 1px solid var(--button-arrow-icon);
    border-top: 0 solid var(--button-arrow-icon);
    color: transparent;
    content: "";
    display: block;
    font-size: 0;
    height: 6px;
    margin-left: 0;
    margin-right: 2px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transform-origin: center;
    transform-origin: center;
    vertical-align: top;
    width: 6px
}

[dir=rtl] .sdk-login-form .current-country-button:before {
    margin-left: 2px;
    margin-right: 0;
    -webkit-transform: rotate(-45deg)!important;
    transform: rotate(-45deg)!important
}

.wrapper .login-contents {
    min-height: 100%
}

.wrapper .login-contents h1 {
    text-wrap: balance
}

.wrapper .login-contents .btn-wrap,.wrapper .login-contents .btn-wrap a,.wrapper .login-contents .btn-wrap button {
    /* vertical-align:middle; */
}

.wrapper .login-contents .btn-wrap a.btn-primary,.wrapper .login-contents .btn-wrap button.btn-primary {
    text-wrap: balance;
    background-color: #004c98;
    background-color: var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-primary.min-105,.wrapper .login-contents .btn-wrap button.btn-primary.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-primary span,.wrapper .login-contents .btn-wrap button.btn-primary span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-primary.disabled,.wrapper .login-contents .btn-wrap a.btn-primary:disabled,.wrapper .login-contents .btn-wrap button.btn-primary.disabled,.wrapper .login-contents .btn-wrap button.btn-primary:disabled {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #fff;
    color: var(--button-text-disabled);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-primary.disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-primary:disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-primary.disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-primary:disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-primary:hover,.wrapper .login-contents .btn-wrap button.btn-primary:hover {
    background: #336fac;
    background: var(--button-hover);
    border-color: #336fac;
    border-color: var(--button-hover)
}

.wrapper .login-contents .btn-wrap a.btn-primary:active,.wrapper .login-contents .btn-wrap button.btn-primary:active {
    background: #003569;
    background: var(--button-active);
    border-color: #003569;
    border-color: var(--button-active)
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2,.wrapper .login-contents .btn-wrap button.btn-primary-v2 {
    text-wrap: balance;
    background-color: #004c98;
    background-color: var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2.min-105,.wrapper .login-contents .btn-wrap button.btn-primary-v2.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2 span,.wrapper .login-contents .btn-wrap button.btn-primary-v2 span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2.disabled,.wrapper .login-contents .btn-wrap a.btn-primary-v2:disabled,.wrapper .login-contents .btn-wrap button.btn-primary-v2.disabled,.wrapper .login-contents .btn-wrap button.btn-primary-v2:disabled {
    background-color: #003c79;
    background-color: var(--button-primary-disabled);
    border-color: #003c79;
    border-color: var(--button-primary-disabled);
    color: hsla(0,0%,100%,.4);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2.disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary-v2.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-primary-v2:disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary-v2:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-primary-v2.disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary-v2.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-primary-v2:disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary-v2:disabled:hover {
    background-color: #003c79;
    background-color: var(--button-primary-disabled);
    border-color: #003c79;
    border-color: var(--button-primary-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2:hover,.wrapper .login-contents .btn-wrap button.btn-primary-v2:hover {
    background: #336fac;
    background: var(--button-hover);
    border-color: #336fac;
    border-color: var(--button-hover)
}

.wrapper .login-contents .btn-wrap a.btn-primary-v2:active,.wrapper .login-contents .btn-wrap button.btn-primary-v2:active {
    background: #003569;
    background: var(--button-active);
    border-color: #003569;
    border-color: var(--button-active)
}

.wrapper .login-contents .btn-wrap a.btn-default,.wrapper .login-contents .btn-wrap button.btn-default {
    text-wrap: balance;
    background-color: #b7b7b7;
    background-color: var(--button-default);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--button-text-normal);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-default.min-105,.wrapper .login-contents .btn-wrap button.btn-default.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-default span,.wrapper .login-contents .btn-wrap button.btn-default span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-default.disabled,.wrapper .login-contents .btn-wrap a.btn-default:disabled,.wrapper .login-contents .btn-wrap button.btn-default.disabled,.wrapper .login-contents .btn-wrap button.btn-default:disabled {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #fff;
    color: var(--button-text-normal);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-default.disabled:active,.wrapper .login-contents .btn-wrap a.btn-default.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-default:disabled:active,.wrapper .login-contents .btn-wrap a.btn-default:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-default.disabled:active,.wrapper .login-contents .btn-wrap button.btn-default.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-default:disabled:active,.wrapper .login-contents .btn-wrap button.btn-default:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-default:active,.wrapper .login-contents .btn-wrap a.btn-default:hover,.wrapper .login-contents .btn-wrap button.btn-default:active,.wrapper .login-contents .btn-wrap button.btn-default:hover {
    background: #b7b7b7;
    background: var(--button-default);
    border-color: #b7b7b7;
    border-color: var(--button-default)
}

.wrapper .login-contents .btn-wrap a.btn-secondary,.wrapper .login-contents .btn-wrap button.btn-secondary {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #007fff;
    border: 1px solid var(--text-em);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #007fff;
    color: var(--text-em);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-secondary.min-105,.wrapper .login-contents .btn-wrap button.btn-secondary.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-secondary span,.wrapper .login-contents .btn-wrap button.btn-secondary span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-secondary.disabled,.wrapper .login-contents .btn-wrap a.btn-secondary:disabled,.wrapper .login-contents .btn-wrap button.btn-secondary.disabled,.wrapper .login-contents .btn-wrap button.btn-secondary:disabled {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #fff;
    color: var(--button-text-disabled);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-secondary.disabled:active,.wrapper .login-contents .btn-wrap a.btn-secondary.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-secondary:disabled:active,.wrapper .login-contents .btn-wrap a.btn-secondary:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-secondary.disabled:active,.wrapper .login-contents .btn-wrap button.btn-secondary.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-secondary:disabled:active,.wrapper .login-contents .btn-wrap button.btn-secondary:disabled:hover {
    background-color: #c6cfd8;
    background-color: var(--button-disabled);
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-secondary:active,.wrapper .login-contents .btn-wrap a.btn-secondary:hover,.wrapper .login-contents .btn-wrap button.btn-secondary:active,.wrapper .login-contents .btn-wrap button.btn-secondary:hover {
    background: transparent;
    border-color: #007fff;
    border-color: var(--text-em)
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse,.wrapper .login-contents .btn-wrap button.btn-primary-inverse {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #004c98;
    border: 1px solid var(--button-primary);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #004c98;
    color: var(--button-primary);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-size: var(--ui-button-font-size);
    margin: 0 auto;
    min-height: 56px;
    min-height: var(--ui-button-height);
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: 100%;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse.min-105,.wrapper .login-contents .btn-wrap button.btn-primary-inverse.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse span,.wrapper .login-contents .btn-wrap button.btn-primary-inverse span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 36px;
    min-height: calc(var(--ui-button-height) - 20px);
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse.disabled,.wrapper .login-contents .btn-wrap a.btn-primary-inverse:disabled,.wrapper .login-contents .btn-wrap button.btn-primary-inverse.disabled,.wrapper .login-contents .btn-wrap button.btn-primary-inverse:disabled {
    background-color: transparent;
    border-color: #c6cfd8;
    border-color: var(--button-disabled);
    color: #c6cfd8;
    color: var(--button-disabled);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse.disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary-inverse.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-primary-inverse:disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary-inverse:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-primary-inverse.disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary-inverse.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-primary-inverse:disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary-inverse:disabled:hover {
    background-color: transparent;
    border-color: #c6cfd8;
    border-color: var(--button-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse:hover,.wrapper .login-contents .btn-wrap button.btn-primary-inverse:hover {
    background: transparent;
    border-color: #336fac;
    border-color: var(--button-hover)
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse:active,.wrapper .login-contents .btn-wrap button.btn-primary-inverse:active {
    background: transparent;
    border-color: #003569;
    border-color: var(--button-active);
    color: #003569;
    color: var(--button-active)
}

.wrapper .login-contents .btn-wrap a.btn-primary-inverse.disabled:active,.wrapper .login-contents .btn-wrap a.btn-primary-inverse:disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary-inverse.disabled:active,.wrapper .login-contents .btn-wrap button.btn-primary-inverse:disabled:active {
    color: #c6cfd8;
    color: var(--button-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-round,.wrapper .login-contents .btn-wrap button.btn-round {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #d5d9e2;
    border: 1px solid var(--button-round-border);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #535768;
    color: var(--text-secondary);
    cursor: pointer;
    display: block;
    display: inline-block;
    font-size: 13px;
    margin: 0 auto;
    min-height: inherit;
    overflow: hidden;
    padding: 6px 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: inherit;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-round.min-105,.wrapper .login-contents .btn-wrap button.btn-round.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-round span,.wrapper .login-contents .btn-wrap button.btn-round span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-round.disabled,.wrapper .login-contents .btn-wrap a.btn-round:disabled,.wrapper .login-contents .btn-wrap button.btn-round.disabled,.wrapper .login-contents .btn-wrap button.btn-round:disabled {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled);
    color: #d5d9e2;
    color: var(--button-round-border-disabled);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-round.disabled:active,.wrapper .login-contents .btn-wrap a.btn-round.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-round:disabled:active,.wrapper .login-contents .btn-wrap a.btn-round:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-round.disabled:active,.wrapper .login-contents .btn-wrap button.btn-round.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-round:disabled:active,.wrapper .login-contents .btn-wrap button.btn-round:disabled:hover {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-round:active,.wrapper .login-contents .btn-wrap a.btn-round:hover,.wrapper .login-contents .btn-wrap button.btn-round:active,.wrapper .login-contents .btn-wrap button.btn-round:hover {
    background: transparent;
    border-color: #535768;
    border-color: var(--button-round-border-hover)
}

.wrapper .login-contents .btn-wrap a.btn-underline,.wrapper .login-contents .btn-wrap button.btn-underline {
    text-wrap: balance;
    background-color: transparent;
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    font-size: 15px;
    line-height: inherit;
    margin: 20px auto;
    min-height: inherit;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: inherit;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-underline.min-105,.wrapper .login-contents .btn-wrap button.btn-underline.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-underline span,.wrapper .login-contents .btn-wrap button.btn-underline span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-underline.disabled,.wrapper .login-contents .btn-wrap a.btn-underline:disabled,.wrapper .login-contents .btn-wrap button.btn-underline.disabled,.wrapper .login-contents .btn-wrap button.btn-underline:disabled {
    background-color: transparent;
    border-color: transparent;
    color: #9398aa;
    color: var(--text-info);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-underline.disabled:active,.wrapper .login-contents .btn-wrap a.btn-underline.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-underline:disabled:active,.wrapper .login-contents .btn-wrap a.btn-underline:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-underline.disabled:active,.wrapper .login-contents .btn-wrap button.btn-underline.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-underline:disabled:active,.wrapper .login-contents .btn-wrap button.btn-underline:disabled:hover {
    background-color: transparent;
    border-color: transparent
}

.wrapper .login-contents .btn-wrap a.btn-underline:active,.wrapper .login-contents .btn-wrap a.btn-underline:hover,.wrapper .login-contents .btn-wrap button.btn-underline:active,.wrapper .login-contents .btn-wrap button.btn-underline:hover {
    background: transparent;
    border-color: transparent
}

.wrapper .login-contents .btn-wrap a.btn-underline span,.wrapper .login-contents .btn-wrap button.btn-underline span {
    border-bottom: 1px solid #9398aa;
    border-bottom: 1px solid var(--text-info);
    display: inline-block
}

.wrapper .login-contents .btn-wrap a.btn-underline.disabled,.wrapper .login-contents .btn-wrap a.btn-underline:disabled,.wrapper .login-contents .btn-wrap button.btn-underline.disabled,.wrapper .login-contents .btn-wrap button.btn-underline:disabled {
    opacity: .5
}

.wrapper .login-contents .btn-wrap a.btn-cancel,.wrapper .login-contents .btn-wrap button.btn-cancel {
    text-wrap: balance;
    background-color: transparent;
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 10px auto;
    min-height: auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    vertical-align: middle;
    width: inherit;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-cancel.min-105,.wrapper .login-contents .btn-wrap button.btn-cancel.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-cancel span,.wrapper .login-contents .btn-wrap button.btn-cancel span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-cancel.disabled,.wrapper .login-contents .btn-wrap a.btn-cancel:disabled,.wrapper .login-contents .btn-wrap button.btn-cancel.disabled,.wrapper .login-contents .btn-wrap button.btn-cancel:disabled {
    background-color: transparent;
    border-color: transparent;
    color: #9398aa;
    color: var(--text-info);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-cancel.disabled:active,.wrapper .login-contents .btn-wrap a.btn-cancel.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-cancel:disabled:active,.wrapper .login-contents .btn-wrap a.btn-cancel:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-cancel.disabled:active,.wrapper .login-contents .btn-wrap button.btn-cancel.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-cancel:disabled:active,.wrapper .login-contents .btn-wrap button.btn-cancel:disabled:hover {
    background-color: transparent;
    border-color: transparent
}

.wrapper .login-contents .btn-wrap a.btn-cancel:active,.wrapper .login-contents .btn-wrap a.btn-cancel:hover,.wrapper .login-contents .btn-wrap button.btn-cancel:active,.wrapper .login-contents .btn-wrap button.btn-cancel:hover {
    background: transparent;
    border-color: transparent
}

.wrapper .login-contents .btn-wrap a.btn-cancel span,.wrapper .login-contents .btn-wrap button.btn-cancel span {
    border-bottom: 1px solid #9398aa;
    border-bottom: 1px solid var(--text-info);
    display: inline-block
}

.wrapper .login-contents .btn-wrap a.btn-cancel.disabled,.wrapper .login-contents .btn-wrap a.btn-cancel:disabled,.wrapper .login-contents .btn-wrap button.btn-cancel.disabled,.wrapper .login-contents .btn-wrap button.btn-cancel:disabled {
    opacity: .5
}

.wrapper .login-contents .btn-wrap a.btn-light,.wrapper .login-contents .btn-wrap button.btn-light {
    text-wrap: balance;
    background-color: transparent;
    border: 1px solid #ced4df;
    border: 1px solid var(--button-light-border);
    border-radius: 0;
    border-radius: var(--ui-input-radius);
    -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.03);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #9398aa;
    color: var(--text-info);
    cursor: pointer;
    display: block;
    font-size: 13px;
    margin: 0 auto;
    min-height: 100%;
    overflow: hidden;
    padding: 7px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .3s ease,border .3s ease;
    transition: background-color .3s ease,border .3s ease;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    vertical-align: middle;
    width: auto;
    word-break: break-word
}

.wrapper .login-contents .btn-wrap a.btn-light.min-105,.wrapper .login-contents .btn-wrap button.btn-light.min-105 {
    min-width: 105px
}

.wrapper .login-contents .btn-wrap a.btn-light span,.wrapper .login-contents .btn-wrap button.btn-light span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative
}

.wrapper .login-contents .btn-wrap a.btn-light.disabled,.wrapper .login-contents .btn-wrap a.btn-light:disabled,.wrapper .login-contents .btn-wrap button.btn-light.disabled,.wrapper .login-contents .btn-wrap button.btn-light:disabled {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled);
    color: #d5d9e2;
    color: var(--button-round-border-disabled);
    cursor: default
}

.wrapper .login-contents .btn-wrap a.btn-light.disabled:active,.wrapper .login-contents .btn-wrap a.btn-light.disabled:hover,.wrapper .login-contents .btn-wrap a.btn-light:disabled:active,.wrapper .login-contents .btn-wrap a.btn-light:disabled:hover,.wrapper .login-contents .btn-wrap button.btn-light.disabled:active,.wrapper .login-contents .btn-wrap button.btn-light.disabled:hover,.wrapper .login-contents .btn-wrap button.btn-light:disabled:active,.wrapper .login-contents .btn-wrap button.btn-light:disabled:hover {
    background-color: transparent;
    border-color: #d5d9e2;
    border-color: var(--button-round-border-disabled)
}

.wrapper .login-contents .btn-wrap a.btn-light:active,.wrapper .login-contents .btn-wrap a.btn-light:hover,.wrapper .login-contents .btn-wrap button.btn-light:active,.wrapper .login-contents .btn-wrap button.btn-light:hover {
    background: transparent;
    border-color: #ced4df;
    border-color: var(--button-light-border)
}

.wrapper .login-contents .btn-wrap a.btn-light:active:not(.disabled),.wrapper .login-contents .btn-wrap a.btn-light:hover:not(.disabled),.wrapper .login-contents .btn-wrap button.btn-light:active:not(.disabled),.wrapper .login-contents .btn-wrap button.btn-light:hover:not(.disabled) {
    color: #003569;
    color: var(--button-light-hover)
}

.wrapper .login-contents #grecaptcha-brand {
    padding-bottom: 20px
}

.wrapper .wrap-footer {
    display: none
}

.wrapper .toast-wrap {
    margin: 0 -20px;
    overflow: hidden;
    -webkit-transition: margin .2s ease;
    transition: margin .2s ease
}

.wrapper .toast-wrap .error {
    background-color: #f6cecb;
    border-left: 5px solid #da3f34;
    border-right: 0 solid;
    border-right-color: initial;
    border-right-style: solid;
    border-right-width: 5px;
    color: #da3f34;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    padding: 20px 14px;
    text-align: center
}

[dir=rtl] .wrapper .toast-wrap .error {
    border-left: initial;
    border-right: #da3f34
}

.wrapper .toast-wrap .error a {
    color: #007fff;
    color: var(--text-em)
}

[data-user-client=NGPClient] .wrapper .toast-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    left: 0;
    margin: 0;
    padding: 20px;
    position: fixed;
    top: 0;
    width: 100%
}

[data-user-client=NGPClient] .wrapper .toast-wrap .error {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    background-color: rgba(0,0,0,.8);
    border: 0;
    border-radius: 8px;
    color: hsla(0,0%,100%,.94);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    max-width: 440px;
    text-align: left;
    width: 100%
}

[data-user-client=NGPClient] .wrapper .toast-wrap .error:before {
    background-image: url(../../img/login/purple/icon_warning.svg);
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    display: inline-block;
    height: 24px;
    margin-right: 2px;
    margin-top: -2px;
    width: 24px
}

[data-user-client=NGPClient] .wrapper .toast-wrap .error p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media(max-width: 959px) {
    .wrapper .toast-wrap .keypad {
        background-color:transparent;
        background-color: #e0e0e9;
        background-color: var(--login-keyboard-bg);
        border: 0;
        -webkit-box-shadow: 0 4px 7px 0 rgba(0,0,0,.15);
        box-shadow: 0 4px 7px 0 rgba(0,0,0,.15);
        color: transparent;
        font: 0/0 sans-serif;
        font-size: 0;
        height: 0;
        margin: 0 auto;
        opacity: 0;
        overflow: hidden;
        text-align: center;
        text-shadow: none;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        visibility: hidden;
        width: 100%;
        z-index: 10
    }

    .wrapper .toast-wrap .keypad:before {
        background-position: left 14px;
        background-repeat: no-repeat;
        background-size: 100% auto;
        content: "";
        display: block;
        height: 190px;
        margin: 0 auto;
        width: 330px
    }

    .wrapper .toast-wrap .keypad.show {
        height: 190px;
        opacity: 1;
        visibility: visible
    }

    .wrapper .toast-wrap.show-keypad {
        margin-bottom: -90px
    }
}

@media(max-width: 959px)and (min-width:640px) {
    .wrapper .toast-wrap.show-keypad {
        margin-bottom:-50px
    }
}

@media(max-width: 959px) {
    .wrapper .toast-wrap.show-keypad+.login-contents .login-header .logo {
        opacity:0
    }
}

.account-info+.btn-login,.saved-account+.btn-login,form+.btn-login {
    border-top: 2px solid #c6cfd8;
    margin: 0 0 30px;
    padding: 18px 0 0;
    position: relative
}

.account-info+.btn-login .icon,.saved-account+.btn-login .icon,form+.btn-login .icon {
    background-color: transparent;
    border: 0;
    color: transparent;
    display: inline-block;
    font: 0/0 sans-serif;
    height: 12px;
    left: 0;
    margin: 0 5px -1px 3px;
    position: relative;
    position: absolute;
    right: auto;
    text-shadow: none;
    top: calc(50% + 3px);
    width: 12px;
    z-index: 1
}

.account-info+.btn-login .icon:after,.account-info+.btn-login .icon:before,.saved-account+.btn-login .icon:after,.saved-account+.btn-login .icon:before,form+.btn-login .icon:after,form+.btn-login .icon:before {
    background-color: #a1a3ae;
    content: "";
    position: absolute;
    -webkit-transition: -webkit-transform .25s ease-out;
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out
}

.account-info+.btn-login .icon:before,.saved-account+.btn-login .icon:before,form+.btn-login .icon:before {
    height: 100%;
    left: 50%;
    margin-left: -1px;
    margin-right: 0;
    right: auto;
    top: 0;
    width: 2px
}

[dir=rtl] .account-info+.btn-login .icon:before,[dir=rtl] .saved-account+.btn-login .icon:before,[dir=rtl] form+.btn-login .icon:before {
    left: auto;
    margin-left: 0;
    margin-right: -1px;
    right: 50%
}

.account-info+.btn-login .icon:after,.saved-account+.btn-login .icon:after,form+.btn-login .icon:after {
    height: 2px;
    left: 0;
    margin-top: -1px;
    right: auto;
    top: 50%;
    width: 100%
}

[dir=rtl] .account-info+.btn-login .icon:after,[dir=rtl] .saved-account+.btn-login .icon:after,[dir=rtl] form+.btn-login .icon:after {
    left: auto;
    right: 0
}

[dir=rtl] .account-info+.btn-login .icon,[dir=rtl] .saved-account+.btn-login .icon,[dir=rtl] form+.btn-login .icon {
    left: auto;
    margin: 0 3px -1px 5px;
    right: 0
}

.account-info+.btn-login a,.saved-account+.btn-login a,form+.btn-login a {
    color: #535768;
    padding-left: 17px;
    padding-right: 0;
    position: relative;
    text-decoration: none;
    z-index: 9
}

[dir=rtl] .account-info+.btn-login a,[dir=rtl] .saved-account+.btn-login a,[dir=rtl] form+.btn-login a {
    padding-left: 0;
    padding-right: 17px
}

.account-info+.btn-login,form+.btn-login {
    margin-bottom: 20px;
    margin-top: -10px
}

.account-info {
    padding: 30px 0;
    padding: var(--account-info-padding);
    position: relative;
    text-align: center
}

@media(min-width: 960px) {
    .account-info {
        margin:0 -15px;
        padding-top: 40px
    }

    .account-info a {
        letter-spacing: -.5px!important
    }
}

.account-info .account-info__list {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    justify-content: center;
    list-style: none
}

.account-info .account-info__list,.account-info li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.account-info li {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 0 10px;
    position: relative
}

@media(min-width: 640px) {
    .account-info li {
        padding:0 15px
    }
}

.account-info li:first-child {
    padding-left: 0
}

.account-info li:last-child {
    padding-right: 0
}

html:not([data-user-client=NGPClient]) .account-info li.signup {
    font-weight: 700
}

html:not([data-user-client=NGPClient]) .account-info li:before {
    background-color: #535768;
    background-color: var(--login-line);
    content: "";
    display: block;
    height: 12px;
    left: -3px;
    opacity: .25;
    position: absolute;
    right: auto;
    top: calc(50% - 6px);
    width: 1px
}

html[dir=rtl]:not([data-user-client=NGPClient]) .account-info li:before {
    left: auto;
    right: -3px
}

html:not([data-user-client=NGPClient]) .account-info li:first-child:before {
    display: none
}

[data-user-client=NGPClient] .account-info li:after {
    background-image: url(../../img/login/purple/icon_leading.svg);
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    display: block;
    height: 12px;
    width: 12px
}

.account-info a {
    word-wrap: break-word;
    color: #535768;
    color: var(--text-primary);
    display: inline-block;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    text-decoration: none;
    vertical-align: middle;
    width: 100%;
    word-break: keep-all
}

.ncv-login-contents .select-method {
    padding: 0
}

.ncv-login-contents .account-info__list {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 10px
}

.ncv-login-contents .account-info__list li.signup:before {
    content: none
}

@media(min-width: 960px) {
    .ncv-login-contents .account-info__list {
        padding:0 30px
    }
}

.saved-account__list {
    margin-bottom: -12px
}

.saved-account__list li {
    background-color: #fff;
    border: 1px solid #c6cfd8;
    height: 56px;
    height: var(--ui-button-height);
    margin: 0 0 10px;
    padding: 16px 20px 0 15px;
    position: relative
}

.saved-account__list li:focus,.saved-account__list li:hover {
    border: 1px solid #7985a2;
    outline: none;
    -webkit-transition: border .3s ease;
    transition: border .3s ease
}

.saved-account__list li .account-type {
    color: #9398aa;
    display: inline-block;
    min-width: 52px;
    vertical-align: middle
}

@media(min-width: 960px) {
    .saved-account__list li .account-type {
        margin-top:-2px
    }
}

.saved-account__list li .account-name {
    color: #334571;
    cursor: pointer;
    display: inline-block;
    margin: 0 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: 70%
}

[dir=rtl] .saved-account__list li .account-name {
    margin: 0 8px 0 0
}

@media(min-width: 640px) {
    .saved-account__list li .account-name {
        width:85%
    }
}

@media(min-width: 960px) {
    .saved-account__list li .account-name {
        margin:-2px 0 0 8px;
        width: 75%
    }

    [dir=rtl] .saved-account__list li .account-name {
        margin: -2px 8px 0 0
    }
}

.saved-account__list li .btn-delete {
    background-color: transparent;
    border: 0;
    color: transparent;
    cursor: pointer;
    display: block;
    font: 0/0 sans-serif;
    height: 30px;
    left: auto;
    position: relative;
    position: absolute;
    right: 8px;
    text-shadow: none;
    top: calc(50% - 14px);
    width: 30px
}

.saved-account__list li .btn-delete:hover:after,.saved-account__list li .btn-delete:hover:before {
    background: #6b7ea5;
    background: var(--icon-bg)
}

.saved-account__list li .btn-delete:after,.saved-account__list li .btn-delete:before {
    background: #b9bcc6;
    content: "";
    height: 1px;
    left: 5px;
    margin-top: -1px;
    position: absolute;
    right: auto;
    top: 15px;
    width: 64%
}

[dir=rtl] .saved-account__list li .btn-delete:after,[dir=rtl] .saved-account__list li .btn-delete:before {
    left: auto;
    right: 5px
}

.saved-account__list li .btn-delete:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.saved-account__list li .btn-delete:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

[dir=rtl] .saved-account__list li .btn-delete {
    left: 8px;
    right: auto
}

.saved-account+.btn-login {
    border-top: 0
}

.saved-account-wrap {
    background-color: #e7e7ee;
    border: 1px solid #d5d9e2;
    margin-bottom: 8px;
    padding: 15px 16px 16px;
    position: relative
}

.saved-account-wrap .saved-account__type {
    color: #73798e;
    display: inline-block;
    padding-left: 0;
    padding-right: 8px;
    vertical-align: middle
}

[dir=rtl] .saved-account-wrap .saved-account__type {
    padding-left: 8px;
    padding-right: 0
}

@media(min-width: 960px) {
    .saved-account-wrap .saved-account__type {
        margin-top:-2px
    }
}

.saved-account-wrap .saved-account__name {
    color: #334571;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: 140px
}

@media(min-width: 640px) {
    .saved-account-wrap .saved-account__name {
        width:200px
    }
}

@media(min-width: 960px) {
    .saved-account-wrap .saved-account__name {
        margin-top:-2px
    }
}

.btn-list {
    background-image: url(../../img/icons/list.png);
    background-position: 0 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 20px 17px;
    display: inline-block;
    font-size: 0;
    height: 30px;
    left: auto;
    position: absolute;
    right: 9px;
    top: 12px;
    vertical-align: middle;
    width: 30px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and (min-device-pixel-ratio:1.25),only screen and (min-resolution:1.25dppx) {
    .btn-list {
        background-image:url(../../img/icons/list@2x.png)
    }
}

[dir=rtl] .btn-list {
    left: 9px;
    right: auto
}

.btn-list a {
    display: block;
    height: 30px;
    width: 30px
}

.account-info+.nca-info {
    margin-top: -10px
}

.nca-info {
    border-top: 1px solid #e3e3e3;
    border-top: 1px solid var(--footer-line);
    padding: 20px 0
}

@media(min-width: 960px) {
    .nca-info {
        margin:0 -5px
    }
}

.nca-info .content-info {
    color: #0095ff;
    color: var(--text-link);
    color: #535768;
    color: var(--text-secondary);
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    font-size: var(--ui-font-size);
    line-height: 21px;
    line-height: 1.45
}

.nca-info .content-info:after {
    clear: both;
    content: "";
    display: table
}

.nca-info .content-info .icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    float: left;
    height: 21px;
    margin-left: 0;
    margin-right: 3px;
    vertical-align: middle;
    width: 21px
}

[dir=rtl] .nca-info .content-info .icon {
    float: right;
    margin-left: 3px;
    margin-right: 0
}

.nca-info .content-info .icon.mark {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%234998F1'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.204 11.114V4.796h-1.56v6.318h1.56zm-.78 2.964c.286 0 .53-.1.735-.299a.965.965 0 0 0 .305-.715.915.915 0 0 0-.312-.702 1.043 1.043 0 0 0-.728-.286c-.286 0-.53.1-.734.299a.965.965 0 0 0-.306.715.967.967 0 0 0 .312.702c.095.087.206.156.332.208.125.052.257.078.396.078z'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--icon-ex-mark)
}

.nca-info .content-info .icon.mark2 {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 0C14.747 0 19 4.253 19 9.5S14.747 19 9.5 19 0 14.747 0 9.5 4.253 0 9.5 0zm-.076 12.076c-.286 0-.53.1-.734.299a.966.966 0 0 0 .006 1.417c.095.087.206.156.332.208.125.052.257.078.396.078.286 0 .53-.1.735-.299a.97.97 0 0 0 .305-.715.916.916 0 0 0-.312-.702 1.045 1.045 0 0 0-.728-.286zm.78-7.28h-1.56v6.318h1.56V4.796z' fill='%239398AA' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-image: var(--icon-ex-mark-2);
    height: 19px;
    margin: 1px 6px 0 0;
    width: 19px
}

[dir=rtl] .nca-info .content-info .icon.mark2 {
    margin: 1px 0 0 6px
}

.nca-info .content-info .icon {
    float: none;
    height: 20px;
    margin-top: 1px;
    width: 20px
}

.nca-info .content-info p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.nca-info .content-info a {
    color: #007fff;
    color: var(--text-em)
}

.select-method {
    padding: 0 5px
}

.select-method .login-3rd-party p {
    margin-top: 8px
}

.select-method .login-3rd-party p:first-child {
    margin-top: 0
}

.select-method .btn-wrap a {
    cursor: pointer;
    text-decoration: none
}

.select-method .btn-wrap>button {
    margin-top: 8px
}

.select-method .btn-wrap>button:first-child {
    margin-top: 0
}

.select-method .btn-wrap .or {
    color: #535768;
    color: var(--text-primary);
    font-size: 14px;
    margin: 20px 0;
    opacity: .5
}

@media(min-width: 960px) {
    .select-method .login-3rd-party .login-btn,.select-method .login-actions .login-btn {
        width:100%
    }
}