@charset "UTF-8";
/* CSS Document */
/* ====================================================================
frames
==================================================================== */
body {
    -webkit-text-size-adjust: 100%;
}

/* ====================================================================
header
==================================================================== */
header {
    position: relative;
    z-index: 100;
    border-bottom: solid 1px #e2e3e6;
}

    header h1 {
        position: relative;
        height: 0;
        margin: 0 auto;
        background: url(https://static.nexon.co.jp/nexon/ver2017/common/logo_nexon.svg) no-repeat center center/contain;
        overflow: hidden;
    }

        header h1 a {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            white-space: nowrap;
            text-indent: 110%;
            overflow: hidden;
        }

/* ====================================================================
	container
==================================================================== */
.main {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 0;
}

    .main.index .container {
        background-color: #f0f3f6;
    }

.container {
    display: block;
}

/* ====================================================================
contents
==================================================================== */
article {
    line-height: 1.3;
    color: #1e1e1e;
}

    article h2.ttl {
        text-align: center;
        color: #333;
    }

    article > p.lead {
        text-align: center;
        font-weight: bold;
    }

        article > p.lead strong {
            color: #e9520a;
        }

        article > p.lead.important {
            color: #0aa0d2;
        }

    article .infotxt {
        box-sizing: border-box;
        background-color: #f5f6f7;
    }

        article .infotxt p {
            word-break: break-all;
            text-align: center;
        }

            article .infotxt p span {
                font-weight: bold;
                color: #09aded;
            }

    article .infotxt__link {
        margin-top: 10px;
        font-size: 14px;
    }

    article .registered dl {
        border: solid 1px #d0d0d0;
    }

        article .registered dl dt {
            text-align: center;
            font-weight: bold;
            color: #888;
        }

            article .registered dl dt:nth-of-type(2) {
                display: none;
            }

        article .registered dl dd:nth-of-type(1) {
            text-align: center;
            font-weight: bold;
            color: #09aded;
        }

        article .registered dl dd:nth-of-type(2) {
            border-top: solid 1px #d0d0d0;
            display: flex;
            justify-content: center;
            color: #333;
        }

    article .registered .authenticated {
        display: block;
        border-radius: 2px;
        background-color: #888;
        font-weight: bold;
        color: #fff;
    }

    article .link-txt {
        text-align: center;
    }

        article .link-txt a {
            color: #666;
            text-decoration: underline;
        }

            article .link-txt a:hover {
                text-decoration: none;
            }

br.sp {
    display: inline;
}

br.pc {
    display: none;
}

.contents {
    background-color: #fff;
}

    .contents p {
        text-align: center;
        font-weight: bold;
    }

        .contents p strong {
            color: #e9520a;
        }

    .contents .error {
        color: #e9520a;
    }

.txt {
    line-height: 1.6;
    text-align: center;
}

.formlist {
    color: #333;
}

.formlist__list {
    display: flex;
    flex-wrap: wrap;
}

.formlist__title {
    display: flex;
    align-items: flex-start;
    font-weight: bold;
}

.formlist__detail {
    position: relative;
}

    .formlist__detail .alternative input {
        padding: 0;
        vertical-align: middle;
    }

    .formlist__detail .password-safety {
        display: flex;
    }

        .formlist__detail .password-safety dt {
            color: #1e1e1e;
        }

        .formlist__detail .password-safety dd {
            display: flex;
            align-items: center;
        }

            .formlist__detail .password-safety dd > span {
                display: block;
                font-weight: bold;
            }

            .formlist__detail .password-safety dd .level {
                display: flex;
                padding: 1px;
                border: solid 1px #cacbcc;
            }

                .formlist__detail .password-safety dd .level span {
                    display: block;
                    height: 0;
                }

            .formlist__detail .password-safety dd.safety-rank-00 > span {
                color: #1e1e1e;
            }

            .formlist__detail .password-safety dd.safety-rank-01 > span {
                color: #eb4500;
            }

            .formlist__detail .password-safety dd.safety-rank-01 .level span:nth-of-type(-n+1) {
                background-color: #eb4500;
            }

            .formlist__detail .password-safety dd.safety-rank-02 > span {
                color: #ffc800;
            }

            .formlist__detail .password-safety dd.safety-rank-02 .level span:nth-of-type(-n+2) {
                background-color: #ffc800;
            }

            .formlist__detail .password-safety dd.safety-rank-03 > span {
                color: #009df0;
            }

            .formlist__detail .password-safety dd.safety-rank-03 .level span:nth-of-type(-n+3) {
                background-color: #009df0;
            }

            .formlist__detail .password-safety dd.safety-rank-04 > span {
                color: #a4d700;
            }

            .formlist__detail .password-safety dd.safety-rank-04 .level span:nth-of-type(-n+4) {
                background-color: #a4d700;
            }

.formlist__input {
    box-sizing: border-box;
    width: 100%;
    -webkit-appearance: none;
    border-radius: 0;
    outline: none;
    border: solid 1px #95989a;
}

    .formlist__input:focus {
        border: solid 1px #09aded;
        outline: solid 1px #09aded;
    }

.formlist__input--disp {
    position: absolute;
    top: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    cursor: pointer;
}

.formlist__input[type="password"] + .formlist__input--disp {
    background: url(https://static.nexon.co.jp/nexon/ver2017/regist/icn_pass_visible.svg) no-repeat center center/contain;
}

.formlist__input[type="text"] + .formlist__input--disp {
    background: url(https://static.nexon.co.jp/nexon/ver2017/regist/icn_pass_invisible.svg) no-repeat center center/contain;
}

.agreement {
    color: #333;
}

.agreement__text {
    text-align: center;
    color: #888;
}

.agreement__checkbox {
    display: inline-block;
    vertical-align: middle;
    height: 0;
    background: url(https://static.nexon.co.jp/nexon/ver2017/regist/img_checkbox_default_pc.svg) no-repeat center center/contain;
}

.agreement input[type="checkbox"] {
    display: none;
}

    .agreement input[type="checkbox"]:checked + .agreement__checkbox {
        background: url(https://static.nexon.co.jp/nexon/ver2017/regist/img_checkbox_active_pc.svg) no-repeat center center/contain;
    }

.agreement__all {
    font-weight: bold;
}

    .agreement__all label {
        display: block;
    }

.agreement__policy {
    position: relative;
    margin: 0;
}

.agreement__policy--switch {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 0;
    cursor: pointer;
}

    .agreement__policy--switch::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        height: 0;
        background: url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_next_b.svg) no-repeat center top/contain;
    }

    .agreement__policy--switch.close::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .agreement__policy--switch.open::after {
        transform: translate(-50%, -50%) rotate(-90deg);
    }

.agreement__necessary {
    color: #09aded;
}

.agreement__border {
    background-color: #f5f6f7;
}

.agreement__area {
    overflow: hidden;
    transition: all .3s ease 0s;
}

    .agreement__area.open {
        height: 34.5em;
    }

    .agreement__area.close {
        height: 0;
    }

    .agreement__area h3 {
        text-align: center;
    }

        .agreement__area h3:nth-of-type(2) {
            border-top: solid 2px #a3a6a8;
        }

.agreement__area--wrap {
    border: solid 1px #95989a;
}

.agreement__area--scroll {
    box-sizing: border-box;
    height: 14em;
    margin: 0 auto;
    border: solid 1px #95989a;
    overflow-y: scroll;
}

.agreement__area--inner {
    box-sizing: border-box;
    width: 100%;
}

    .agreement__area--inner pre {
        word-break: break-all;
        white-space: pre-wrap;
        line-height: 1.6;
    }

.oath__form {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.oath__input {
    box-sizing: border-box;
    padding: 0;
    border: solid 1px #95989a;
    outline: none;
    text-align: center;
    -webkit-appearance: none;
    border-radius: 0;
    color: #333;
}

    .oath__input:focus {
        border: solid 1px #09aded;
        outline: solid 1px #09aded;
    }

.oath__error {
    margin: 0 auto;
}

.oath__info {
    display: flex;
    justify-content: center;
}

.oath__time {
    display: flex;
    justify-content: center;
    font-weight: bold;
}

    .oath__time dt {
        color: #333;
    }

    .oath__time dd {
        color: #09aded;
    }

.otpform {
    color: #333;
}

    .otpform > dl {
        display: flex;
        flex-wrap: wrap;
    }

.otpform__title {
    display: flex;
    align-items: flex-start;
    font-weight: bold;
}

.otpform__detail {
    position: relative;
}

    .otpform__detail:nth-of-type(2) {
        margin-top: 0;
    }

.otpform .otp__form {
    display: flex;
    justify-content: space-between;
}

.otpform .otp__input {
    box-sizing: border-box;
    border: solid 1px #95989a;
    outline: none;
    text-align: center;
    -webkit-appearance: none;
    border-radius: 0;
    color: #333;
}

    .otpform .otp__input:focus {
        border: solid 1px #09aded;
        outline: solid 1px #09aded;
    }

.errorarea {
    display: flex;
    justify-content: center;
}

    .errorarea .t-error {
        width: auto;
    }

.centering {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

    .centering .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .centering .inner h2.ttl {
            margin: 0;
        }

.centering__txt {
    text-align: center;
}

.t-error {
    display: flex;
    width: 100%;
    align-items: flex-start;
    color: #d93025;
}

.t-error__center {
    align-items: flex-start;
    justify-content: center;
}

.t-error::before {
    content: "";
    display: block;
    height: 0;
    background: url(https://static.nexon.co.jp/nexon/ver2017/regist/icn_exclamation.svg) no-repeat center center/contain;
}

.t-caution {
    display: flex;
    width: 100%;
    align-items: flex-start;
    font-weight: bold;
    color: #f59f00;
}

.t-caution__center {
    align-items: flex-start;
    justify-content: center;
}

div.id-type {
    display: flex;
    align-items: center;
}

    div.id-type img {
        max-height: none;
    }

/* ====================================================================
nexon id
==================================================================== */
/*
span.nexonid{
width:100%;
height:0;
overflow:hidden;
display:inline-block;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/nexonid_bold.svg) no-repeat;
background-size:contain;
}
*/
span.nexonid-info {
    position: relative;
    display: block;
    height: 0;
    background: url(https://static.nexon.co.jp/nexon/ver2017/regist/icn_nexonid_info.svg) no-repeat center center/contain;
}

    span.nexonid-info::after {
        content: "メールアドレスやゲームIDではログインできません";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        opacity: 0;
        transform: translateY(0.4vw) translateX(0);
        overflow: hidden;
        background: url(https://static.nexon.co.jp/nexon/ver2017/toylogin/img_tips_nexonid.png) no-repeat center center/contain;
        transition: all .2s ease 0s;
        pointer-events: none;
    }

    span.nexonid-info:hover::after, span.nexonid-info.hover::after {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }

span.nexonid-unchangeable {
    position: relative;
    display: block;
    height: 0;
    background: url(https://static.nexon.co.jp/nexon/ver2017/regist/icn_nexonid_info.svg) no-repeat center center/contain;
}

    span.nexonid-unchangeable::after {
        content: "メールアドレスやゲームIDではログインできません";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        opacity: 0;
        transform: translateY(0.4vw) translateX(0);
        overflow: hidden;
        background: url(https://static.nexon.co.jp/nexon/ver2017/toylogin/img_tips_unchangeable.png) no-repeat center center/contain;
        transition: all .2s ease 0s;
        pointer-events: none;
    }

    span.nexonid-unchangeable:hover::after, span.nexonid-unchangeable.hover::after {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }

.common-b span.nexonid {
    background: url(https://static.nexon.co.jp/nexon/ver2017/common/nexonid_white.svg) no-repeat;
}

/* ====================================================================
btn
==================================================================== */
.btn-area {
    display: flex;
    justify-content: center;
}

.btn {
    width: 100%;
    margin: 0 auto;
}

    .btn a {
        display: block;
        box-sizing: border-box;
        text-decoration: none;
    }

    .btn.login a {
        width: 100%;
    }

    .btn.login a {
        background: #0aa0d2 url(https://static.nexon.co.jp/nexon/ver2017/login/btn_login.svg) no-repeat center center;
        text-indent: 110%;
        white-space: nowrap;
        overflow: hidden;
    }

        .btn.login a:hover {
            background-color: #14aae5;
        }

    .btn.reset {
        border: solid 1px #95989a;
    }

        .btn.reset a {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

            .btn.reset a::before {
                content: "";
                display: block;
                background: url(https://static.nexon.co.jp/nexon/ver2017/regist/icn_reload.svg) no-repeat center center;
                background-size: 100% 100%;
            }

    .btn.common-b a, .btn.common-g a {
        position: relative;
        height: auto;
        background-color: #09aded;
        font-weight: bold;
        color: #fff;
    }

        .btn.common-b a::after, .btn.common-g a::after {
            content: "";
            position: absolute;
            display: block;
            height: 0;
            background: url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_next.svg) no-repeat center center/contain;
        }

    .btn.common-b a {
        background-color: #09aded;
    }

        .btn.common-b a::after {
            top: 50%;
            right: 0;
        }

        .btn.common-b a:hover {
            background-color: #14aae5;
        }

    .btn.common-g a {
        background-color: #6e6e70;
        text-align: right;
    }

        .btn.common-g a::after {
            top: 21px;
            left: 22px;
            transform: rotateZ(180deg);
        }

        .btn.common-g a:hover {
            background-color: #87878a;
        }

    .btn.tc {
        text-align: center;
    }

@media (orientation: portrait) {
    header {
        padding: 2.1794871795vw 0;
    }

        header h1 {
            width: 12.3076923077vw;
            padding-top: 3.8461538462vw;
        }

    /* ====================================================================
  	container
  ==================================================================== */
    .main {
        padding: 0 0 7.6923076923vw;
    }

    .container > article {
        padding: 5.1282051282vw 0vw 6.4102564103vw 0vw;
    }

    /* ====================================================================
  contents
  ==================================================================== */
    article h2.ttl {
        margin: 3.8461538462vw 0 0;
        font-size: 4.8717948718vw;
    }

    article .infotxt {
        width: 92.3076923077vw;
        margin: 3.0769230769vw auto 0;
        padding: 3.2051282051vw 2.5641025641vw 2.8205128205vw;
        font-size: 2.8205128205vw;
    }

        article .infotxt p {
            word-break: break-all;
            text-align: center;
        }

            article .infotxt p span {
                font-weight: bold;
                color: #09aded;
            }

    article .infotxt__link {
        margin-top: 2.8205128205vw;
        font-size: 2.8205128205vw;
    }

    article .registered {
        width: 92.3076923077vw;
        margin: 3.0769230769vw auto 0;
    }

        article .registered dl dt {
            padding-top: 3.2051282051vw;
            font-size: 2.3076923077vw;
        }

        article .registered dl dd:nth-of-type(1) {
            padding: 0.641025641vw 3.8461538462vw 2.5641025641vw;
            font-size: 4.8717948718vw;
        }

        article .registered dl dd:nth-of-type(2) {
            padding: 1.2820512821vw 0;
            font-size: 2.8205128205vw;
        }

        article .registered .authenticated {
            margin-right: 0.641025641vw;
            padding: 0.641025641vw 1.0256410256vw 0;
            font-size: 1.7948717949vw;
        }

    article .link-txt {
        margin-top: 4.6153846154vw;
    }

        article .link-txt a {
            font-size: 2.5641025641vw;
        }

    .contents {
        margin: 2.5641025641vw 3.8461538462vw 0vw 3.8461538462vw;
        padding: 5.1282051282vw 2.5641025641vw 5.1282051282vw 2.5641025641vw;
    }

        .contents p {
            font-size: 3.0769230769vw;
        }

            .contents p.lead {
                font-size: 3.0769230769vw;
            }

                .contents p.lead span {
                    font-size: 2.3076923077vw;
                }

            .contents p.txt {
                margin: 3.8461538462vw 0vw 0vw 0vw;
                font-size: 3.0769230769vw;
            }

                .contents p.txt + .error {
                    margin: 3.8461538462vw 0vw 0vw 0vw;
                }

    h2 + .contents {
        margin: 5.1282051282% 3.8461538462% 0% 3.8461538462%;
    }

    .formlist {
        width: 92.3076923077vw;
        margin: 3.8461538462vw auto 0;
    }

    .formlist__title {
        width: 32.0512820513vw;
        font-size: 3.5897435897vw;
        margin-top: 2.5641025641vw;
        margin-bottom: 2.0512820513vw;
    }

    .formlist__detail {
        width: 60.2564102564vw;
        font-size: 2.5641025641vw;
    }

        .formlist__detail:first-of-type {
            padding-bottom: 3.0769230769vw;
        }

        .formlist__detail.error {
            padding-bottom: 0.7692307692vw;
        }

        .formlist__detail .alternative {
            margin-top: 2.3076923077vw;
            font-size: 3.0769230769vw;
        }

            .formlist__detail .alternative li + li {
                margin-top: 2.3076923077vw;
            }

            .formlist__detail .alternative input {
                width: 3.8461538462vw;
                margin-right: 0.641025641vw;
            }

        .formlist__detail .password-safety {
            margin-top: 2.5641025641vw;
            font-size: 2.3076923077vw;
        }

            .formlist__detail .password-safety dd > span {
                width: 5.7692307692vw;
            }

            .formlist__detail .password-safety dd .level span {
                width: 1.7948717949vw;
                padding-top: 1.7948717949vw;
            }

                .formlist__detail .password-safety dd .level span + span {
                    margin-left: 0.2564102564vw;
                }

    .formlist__input {
        padding: 2.3076923077vw 2.5641025641vw;
        font-size: 2.5641025641vw;
    }

        .formlist__input:focus {
            padding: 2.3076923077vw 2.5641025641vw;
        }

    .formlist__input--disp {
        width: 6.0256410256vw;
        padding-top: 4.1025641026vw;
        margin: 2.3076923077vw 2.5641025641vw 0 0;
    }

    .agreement {
        width: 92.3076923077vw;
        margin: 5.8974358974vw auto 0;
        font-size: 3.0769230769vw;
    }

    .agreement__text {
        font-size: 2.8205128205vw;
    }

    .agreement__checkbox {
        width: 6.1538461538vw;
        padding-top: 6.1538461538vw;
        margin-right: 3.0769230769vw;
    }

    .agreement__all {
        padding: 2.3076923077vw 2.5641025641vw;
        font-size: 3.8461538462vw !important;
    }

    .agreement__policy {
        padding: 2.3076923077vw 2.5641025641vw;
    }

    .agreement__policy--switch {
        width: 6.1538461538vw;
        padding-top: 6.1538461538vw;
        margin: 2.3076923077vw 0 0;
    }

        .agreement__policy--switch::after {
            width: 1.2820512821vw;
            padding-top: 2.0512820513vw;
        }

    .agreement__info {
        padding: 2.3076923077vw 2.5641025641vw 0;
    }

    .agreement__border {
        margin-top: 1.2820512821vw;
        padding: 1.9230769231vw 2.5641025641vw;
        font-size: 3.0769230769vw;
    }

        .agreement__border .agreement__checkbox {
            width: 6.9230769231vw;
            padding-top: 6.9230769231vw;
        }

    .agreement__area h3 {
        font-size: 3.0769230769vw;
        padding: 2.3076923077vw 0 0;
        margin: 0 0 0.7692307692vw;
    }

        .agreement__area h3:nth-of-type(2) {
            width: 87.6923076923vw;
            margin: 2.3076923077vw auto 0.7692307692vw;
        }

    .agreement__area--wrap {
        padding: 0 0 2.3076923077vw;
    }

    .agreement__area--scroll {
        width: 87.6923076923vw;
    }

    .agreement__area--inner {
        padding: 2.3076923077vw;
    }

        .agreement__area--inner pre {
            font-size: 2.3076923077vw;
        }

    .oath {
        margin-top: 7.6923076923vw;
    }

    .oath__form {
        width: 58.9743589744vw;
    }

    .oath__input {
        width: 8.7179487179vw;
        font-size: 7.6923076923vw;
    }

        .oath__input:nth-of-type(3) {
            margin-right: 2.5641025641vw;
        }

    .oath__error {
        width: 58.9743589744vw;
    }

    .oath__info {
        margin-top: 2.5641025641vw;
        font-size: 3.0769230769vw;
    }

    .oath__time dd {
        margin-left: 1.2820512821vw;
    }

    .oath__resend {
        margin-left: 3.8461538462vw;
    }

    .otpform {
        width: 92.3076923077vw;
        margin: 1.9230769231vw auto 0;
    }

    .otpform__title {
        width: 38.4615384615vw;
        font-size: 3.5897435897vw;
        margin-top: 3.5897435897vw;
    }

        .otpform__title:nth-of-type(2) {
            padding-top: 4.2307692308vw;
        }

    .otpform__detail {
        width: 53.8461538462vw;
        font-size: 2.5641025641vw;
        margin-top: 3.5897435897vw;
    }

        .otpform__detail:first-of-type {
            padding-bottom: 3.0769230769vw;
        }

        .otpform__detail.error {
            padding-bottom: 0.7692307692vw;
        }

        .otpform__detail:nth-of-type(2) {
            padding-top: 4.2307692308vw;
        }

    .otpform .otp__input {
        width: 7.9487179487vw;
        font-size: 6.6666666667vw;
    }

        .otpform .otp__input:nth-of-type(3) {
            margin-right: 1.2820512821vw;
        }

    .errorarea {
        margin: 1.9230769231vw 0 -1.2820512821vw;
    }

    .centering__txt {
        margin-top: 2.8205128205vw;
    }

    .t-error {
        margin-top: 1.2820512821vw;
        font-size: 2.5641025641vw;
    }

        .t-error::before {
            width: 2.8205128205vw;
            padding-top: 2.8205128205vw;
            margin: 0 1.2820512821vw 0 0;
        }

    .t-caution {
        margin-top: 1.2820512821vw;
        font-size: 2.5641025641vw;
    }

    div.id-type img {
        max-width: 2.6923076923vw;
        margin-right: 1.2820512821vw;
    }

    .txt {
        margin: 3.8461538462vw 3.8461538462vw 0vw 3.8461538462vw;
        font-size: 3.0769230769vw;
    }

    /* ====================================================================
  nexon id
  ==================================================================== */
    /*
  span.nexonid{
  @include paddingVw($baseWidthPortrait, 21,0,0,0);
  }
  */
    span.nexonid-info {
        width: 3.5897435897vw;
        padding-top: 3.5897435897vw;
        margin-left: 1.5384615385vw;
    }

        span.nexonid-info::after {
            width: 61.9230769231vw;
            padding-top: 8.4615384615vw;
            margin: -9.6153846154vw 0 0 -21.1538461538vw;
        }

    span.nexonid-unchangeable {
        width: 3.5897435897vw;
        padding-top: 3.5897435897vw;
        margin-left: 1.5384615385vw;
    }

        span.nexonid-unchangeable::after {
            width: 12.8205128205vw;
            padding-top: 7.8205128205vw;
            margin: -9.6153846154vw 0 0 -4.6153846154vw;
        }

    .common-b span.nexonid {
        width: 17.9487179487vw;
    }

    /* ====================================================================
  btn
  ==================================================================== */
    .btn-area {
        margin: 0% 0% 0% 0%;
        padding: 0vw 2.5641025641vw 0vw 2.5641025641vw;
    }

        .btn-area .btn {
            padding: 0vw 1.2820512821vw 0vw 1.2820512821vw;
        }

    .btn.login, .btn.login-openid, .btn.regist-id, .btn.oldotp-cancel, .btn.grade-change {
        margin: 5.1282051282% auto 0% auto;
    }

        .btn.login a {
            height: 12.8205128205vw;
            background-size: 16.7948717949vw 4.6153846154vw;
        }

        .btn.regist-id a {
            height: 12.8205128205vw;
            background-size: 34.358974359vw 4.358974359vw;
        }

    .btn.reset {
        width: 28.2051282051vw;
        margin: 3.8461538462% auto 0% auto;
    }

        .btn.reset a {
            padding: 0.7692307692vw 1.9230769231vw 0.7692307692vw 1.9230769231vw;
            font-size: 2.3076923077vw;
        }

            .btn.reset a::before {
                margin: 0vw 1.9230769231vw 0vw 0vw;
                width: 2.0512820513vw;
                height: 0;
                padding: 2.0512820513vw 0vw 0vw 0vw;
            }

        .btn.reset + .error {
            margin: 1.7772511848vw 0vw 0vw 0vw;
        }

    .btn.common-b, .btn.common-g {
        margin: 5.1282051282% auto 0% auto;
        width: 51.2820512821vw;
    }

        .btn.common-b a, .btn.common-g a {
            padding: 2.5641025641vw 0;
            font-size: 3.0769230769vw;
        }

            .btn.common-b a::after, .btn.common-g a::after {
                width: 1.7948717949vw;
                padding-top: 2.6923076923vw;
            }

            .btn.common-b a::after {
                transform: translate(-2.3076923077vw, -50%);
            }

    /* ====================================================================
  	android 4.x
  ==================================================================== */
    .a4 {
        /* ====================================================================
    	container
    ==================================================================== */
        /* ====================================================================
    contents
    ==================================================================== */
        /* ====================================================================
    nexon id
    ==================================================================== */
        /*
    	span.nexonid{
    	@include paddingPer($baseWidthPortrait, 21,0,0,0);
    	}
    */
        /* ====================================================================
    btn
    ==================================================================== */
    }

        .a4 header {
            padding: 2.1794871795% 0;
        }

            .a4 header h1 {
                width: 12.3076923077%;
                padding-top: 3.8461538462%;
            }

        .a4 .container > article {
            padding: 5.1282051282% 0% 6.4102564103% 0%;
        }

        .a4 article h2.ttl {
            margin: 3.8461538462% 0 0;
            font-size: 4.8717948718%;
        }

        .a4 article .infotxt {
            width: 92.3076923077%;
            margin: 3.0769230769% auto 0;
            padding: 3.2051282051% 2.5641025641% 2.8205128205%;
            font-size: 2.8205128205%;
        }

            .a4 article .infotxt p {
                word-break: break-all;
                text-align: center;
            }

                .a4 article .infotxt p span {
                    font-weight: bold;
                    color: #09aded;
                }

        .a4 article .infotxt__link {
            margin-top: 2.8205128205%;
            font-size: 2.8205128205vw;
        }

        .a4 article .registered {
            width: 92.3076923077%;
            margin: 3.0769230769% auto 0;
        }

            .a4 article .registered dl dt {
                padding-top: 3.2051282051%;
                font-size: 2.3076923077vw;
            }

            .a4 article .registered dl dd:nth-of-type(1) {
                padding: 0.641025641% 3.8461538462% 2.5641025641%;
                font-size: 4.8717948718vw;
            }

            .a4 article .registered dl dd:nth-of-type(2) {
                padding: 1.2820512821% 0;
                font-size: 2.8205128205vw;
            }

            .a4 article .registered .authenticated {
                margin-right: 0.641025641%;
                padding: 0.641025641% 1.0256410256% 0;
                font-size: 1.7948717949vw;
            }

        .a4 article .link-txt {
            margin-top: 4.6153846154%;
        }

            .a4 article .link-txt a {
                font-size: 2.5641025641vw;
            }

        .a4 .contents {
            margin: 5.1282051282% 3.8461538462% 0% 3.8461538462%;
            padding: 5.1282051282% 2.5641025641% 5.1282051282% 2.5641025641%;
        }

            .a4 .contents p {
                font-size: 3.0769230769%;
            }

                .a4 .contents p.lead {
                    font-size: 3.0769230769%;
                }

                    .a4 .contents p.lead span {
                        font-size: 2.3076923077%;
                    }

                .a4 .contents p.txt {
                    margin: 3.8461538462% 0% 0% 0%;
                    font-size: 3.0769230769%;
                }

                    .a4 .contents p.txt + .error {
                        margin: 3.8461538462% 0% 0% 0%;
                    }

        .a4 h2 + .contents {
            margin: 5.1282051282% 3.8461538462% 0% 3.8461538462%;
        }

        .a4 .txt {
            margin: 5.1282051282% 3.8461538462% 0% 3.8461538462%;
            font-size: 3.0769230769%;
        }

        .a4 span.nexonid-info {
            width: 3.5897435897%;
            padding-top: 3.5897435897%;
            margin-left: 1.5384615385%;
        }

            .a4 span.nexonid-info::after {
                width: 61.9230769231%;
                padding-top: 8.4615384615%;
                margin: -9.6153846154% 0 0 -21.1538461538%;
            }

        .a4 span.nexonid-unchangeable {
            width: 3.5897435897%;
            padding-top: 3.5897435897%;
            margin-left: 1.5384615385%;
        }

            .a4 span.nexonid-unchangeable::after {
                width: 12.8205128205%;
                padding-top: 7.8205128205%;
                margin: -9.6153846154% 0 0 -4.6153846154%;
            }

        .a4 .common-b span.nexonid {
            width: 17.9487179487%;
        }

        .a4 .link span.nexonid {
            width: 17.9487179487%;
            font-size: 3.0769230769%;
        }

        .a4 .btn-area {
            margin: 0% 0% 0% 0%;
            padding: 0% 2.5641025641% 0% 2.5641025641%;
        }

            .a4 .btn-area .btn {
                padding: 0% 1.2820512821% 0% 1.2820512821%;
            }

        .a4 .btn.login, .a4 .btn.login-openid, .a4 .btn.regist-id, .a4 .btn.oldotp-cancel, .a4 .btn.grade-change {
            margin: 5.1282051282% auto 0% auto;
        }

            .a4 .btn.login a {
                height: 12.8205128205%;
                padding: 3.8461538462% 0% 5.1282051282% 0%;
                background-size: 16.7948717949vw 4.6153846154vw;
            }

            .a4 .btn.regist-id a {
                height: 12.8205128205%;
                background-size: 34.358974359vw 4.358974359vw;
            }

        .a4 .btn.reset {
            width: 28.2051282051vw;
            margin: 2.5641025641% auto 0% auto;
        }

            .a4 .btn.reset a {
                padding: 0.7692307692vw 1.9230769231vw 0.7692307692vw 1.9230769231vw;
                font-size: 2.3076923077vw;
            }

                .a4 .btn.reset a::before {
                    margin: 0vw 1.9230769231vw 0vw 0vw;
                    width: 2.0512820513vw;
                    height: 0;
                    padding: 2.0512820513vw 0vw 0vw 0vw;
                }

        .a4 .btn.common-b, .a4 .btn.common-g {
            margin: 5.1282051282% auto 0% auto;
            width: 64.1025641026%;
        }

            .a4 .btn.common-b a, .a4 .btn.common-g a {
                padding: 3.8461538462% 3.2051282051% 3.8461538462% 3.2051282051%;
                font-size: 3.5897435897%;
            }

                .a4 .btn.common-b a::after, .a4 .btn.common-g a::after {
                    width: 1.5384615385%;
                    height: 2.4358974359%;
                }

                .a4 .btn.common-b a::after {
                    transform: translate(-2.3076923077%, -50%);
                }
}

@media (orientation: landscape) {
    header {
        padding: 1.0071090047vw 0;
    }

        header h1 {
            width: 5.6872037915vw;
            padding-top: 1.7772511848vw;
        }

    /* ====================================================================
  	container
  ==================================================================== */
    .main {
        padding: 0 0 3.5545023697vw;
    }

    .container > article {
        padding: 0.8886255924vw 0vw 2.9620853081vw 0vw;
    }

    /* ====================================================================
  contents
  ==================================================================== */
    article h2.ttl {
        margin: 1.7772511848vw 0 0;
        font-size: 2.2511848341vw;
    }

    article .infotxt {
        width: 42.654028436vw;
        margin: 1.4218009479vw auto 0;
        padding: 1.481042654vw 1.1848341232vw 1.3033175355vw;
        font-size: 1.3033175355vw;
    }

        article .infotxt p {
            word-break: break-all;
            text-align: center;
        }

            article .infotxt p span {
                font-weight: bold;
                color: #09aded;
            }

    article .infotxt__link {
        margin-top: 1.3033175355vw;
        font-size: 1.3033175355vw;
    }

    article .registered {
        width: 42.654028436vw;
        margin: 1.4218009479vw auto 0;
    }

        article .registered dl dt {
            padding-top: 1.481042654vw;
            font-size: 1.0663507109vw;
        }

        article .registered dl dd:nth-of-type(1) {
            padding: 0.2962085308vw 1.7772511848vw 1.1848341232vw;
            font-size: 2.2511848341vw;
        }

        article .registered dl dd:nth-of-type(2) {
            padding: 0.5924170616vw 0;
            font-size: 1.3033175355vw;
        }

        article .registered .authenticated {
            margin-right: 0.2962085308vw;
            padding: 0.2962085308vw 0.4739336493vw 0;
            font-size: 0.8293838863vw;
        }

    article .link-txt {
        margin-top: 2.1327014218vw;
    }

        article .link-txt a {
            font-size: 1.1848341232vw;
        }

    .contents {
        margin: 1.1848341232vw 4.7393364929vw 0vw 4.7393364929vw;
        padding: 2.3696682464vw 2.3696682464vw 2.3696682464vw 2.3696682464vw;
    }

        .contents.error {
            padding: 2.3696682464vw 4.7393364929vw 2.3696682464vw 4.7393364929vw;
        }

        .contents p {
            font-size: 1.4218009479vw;
        }

            .contents p.lead {
                font-size: 1.4218009479vw;
            }

                .contents p.lead span {
                    font-size: 1.0663507109vw;
                }

            .contents p.txt {
                margin: 1.7772511848vw 0vw 0vw 0vw;
                font-size: 1.4218009479vw;
                text-align: center;
            }

                .contents p.txt + .error {
                    margin: 1.7772511848vw 0vw 0vw 0vw;
                }

    h2 + .contents {
        margin: 1.1848341232% 4.7393364929% 0% 4.7393364929%;
    }

    .formlist {
        width: 42.654028436vw;
        margin: 1.7772511848vw auto 0;
    }

    .formlist__title {
        width: 14.8104265403vw;
        font-size: 1.6587677725vw;
        margin-top: 1.1848341232vw;
        margin-bottom: 0.9478672986vw;
    }

    .formlist__detail {
        width: 27.8436018957vw;
        font-size: 1.1848341232vw;
    }

        .formlist__detail:first-of-type {
            padding-bottom: 1.4218009479vw;
        }

        .formlist__detail.error {
            padding-bottom: 0.355450237vw;
        }

        .formlist__detail .alternative {
            margin-top: 1.0663507109vw;
            font-size: 1.4218009479vw;
        }

            .formlist__detail .alternative li + li {
                margin-top: 1.0663507109vw;
            }

            .formlist__detail .alternative input {
                width: 1.7772511848vw;
                margin-right: 0.2962085308vw;
            }

        .formlist__detail .password-safety {
            margin-top: 1.1848341232vw;
            font-size: 1.0663507109vw;
        }

            .formlist__detail .password-safety dd > span {
                width: 2.6658767773vw;
            }

            .formlist__detail .password-safety dd .level span {
                width: 0.8293838863vw;
                padding-top: 0.8293838863vw;
            }

                .formlist__detail .password-safety dd .level span + span {
                    margin-left: 0.1184834123vw;
                }

    .formlist__input {
        padding: 1.0663507109vw 1.1848341232vw;
        font-size: 1.1848341232vw;
    }

        .formlist__input:focus {
            padding: 1.0663507109vw 1.1848341232vw;
        }

    .formlist__input--disp {
        width: 2.7843601896vw;
        padding-top: 1.8957345972vw;
        margin: 1.0663507109vw 1.1848341232vw 0 0;
    }

    .agreement {
        width: 42.654028436vw;
        margin: 2.7251184834vw auto 0;
        font-size: 1.4218009479vw;
    }

    .agreement__text {
        font-size: 1.3033175355vw;
    }

    .agreement__checkbox {
        width: 2.8436018957vw;
        padding-top: 2.8436018957vw;
        margin-right: 1.4218009479vw;
    }

    .agreement__all {
        padding: 1.0663507109vw 1.1848341232vw;
        font-size: 1.7772511848vw !important;
    }

    .agreement__policy {
        padding: 1.0663507109vw 1.1848341232vw;
    }

    .agreement__policy--switch {
        width: 2.8436018957vw;
        padding-top: 2.8436018957vw;
        margin: 1.0663507109vw 0 0;
    }

        .agreement__policy--switch::after {
            width: 0.5924170616vw;
            padding-top: 0.9478672986vw;
        }

    .agreement__info {
        padding: 1.0663507109vw 1.1848341232vw 0;
    }

    .agreement__border {
        margin-top: 0.5924170616vw;
        padding: 0.8886255924vw 1.1848341232vw;
        font-size: 1.4218009479vw;
    }

        .agreement__border .agreement__checkbox {
            width: 3.1990521327vw;
            padding-top: 3.1990521327vw;
        }

    .agreement__area h3 {
        font-size: 1.4218009479vw;
        padding: 1.0663507109vw 0 0;
        margin: 0 0 0.355450237vw;
    }

        .agreement__area h3:nth-of-type(2) {
            width: 40.5213270142vw;
            margin: 1.0663507109vw auto 0.355450237vw;
        }

    .agreement__area--wrap {
        padding: 0 0 1.0663507109vw;
    }

    .agreement__area--scroll {
        width: 40.5213270142vw;
    }

    .agreement__area--inner {
        padding: 1.0663507109vw;
    }

        .agreement__area--inner pre {
            font-size: 1.0663507109vw;
        }

    .oath {
        margin-top: 3.5545023697vw;
    }

    .oath__form {
        width: 27.2511848341vw;
    }

    .oath__input {
        width: 4.028436019vw;
        font-size: 3.5545023697vw;
    }

        .oath__input:nth-of-type(3) {
            margin-right: 1.1848341232vw;
        }

    .oath__error {
        width: 27.2511848341vw;
    }

    .oath__info {
        margin-top: 1.1848341232vw;
        font-size: 1.4218009479vw;
    }

    .oath__time dd {
        margin-left: 0.5924170616vw;
    }

    .oath__resend {
        margin-left: 1.7772511848vw;
    }

    .otpform {
        width: 42.654028436vw;
        margin: 0.8886255924vw auto 0;
    }

    .otpform__title {
        width: 17.7725118483vw;
        font-size: 1.6587677725vw;
        margin-top: 1.6587677725vw;
    }

        .otpform__title:nth-of-type(2) {
            padding-top: 1.9549763033vw;
        }

    .otpform__detail {
        width: 24.8815165877vw;
        font-size: 1.1848341232vw;
        margin-top: 1.6587677725vw;
    }

        .otpform__detail:first-of-type {
            padding-bottom: 1.4218009479vw;
        }

        .otpform__detail.error {
            padding-bottom: 0.355450237vw;
        }

        .otpform__detail:nth-of-type(2) {
            padding-top: 1.9549763033vw;
        }

    .otpform .otp__input {
        width: 3.672985782vw;
        font-size: 3.0805687204vw;
    }

        .otpform .otp__input:nth-of-type(3) {
            margin-right: 0.5924170616vw;
        }

    .errorarea {
        margin: 0.8886255924vw 0 -0.5924170616vw;
    }

    .centering__txt {
        margin-top: 1.3033175355vw;
    }

    .t-error {
        margin-top: 0.5924170616vw;
        font-size: 1.1848341232vw;
    }

        .t-error::before {
            width: 1.3033175355vw;
            padding-top: 1.3033175355vw;
            margin: 0 0.5924170616vw 0 0;
        }

    .t-caution {
        margin-top: 0.5924170616vw;
        font-size: 1.1848341232vw;
    }

    div.id-type img {
        max-width: 1.2440758294vw;
        margin-right: 0.5924170616vw;
    }

    .txt {
        margin: 1.1848341232vw 4.7393364929vw 0vw 4.7393364929vw;
        font-size: 1.4218009479vw;
    }

    /* ====================================================================
  nexon id
  ==================================================================== */
    /*
  span.nexonid{
  @include paddingVw($baseWidthLandscape, 21,0,0,0);
  }
  */
    span.nexonid-info {
        width: 1.6587677725vw;
        padding-top: 1.6587677725vw;
        margin-left: 0.7109004739vw;
    }

        span.nexonid-info::after {
            width: 28.6137440758vw;
            padding-top: 3.9099526066vw;
            margin: -4.4431279621vw 0 0 -9.7748815166vw;
        }

    span.nexonid-unchangeable {
        width: 1.6587677725vw;
        padding-top: 1.6587677725vw;
        margin-left: 0.7109004739vw;
    }

        span.nexonid-unchangeable::after {
            width: 5.9241706161vw;
            padding-top: 3.6137440758vw;
            margin: -4.4431279621vw 0 0 -2.1327014218vw;
        }

    .common-b span.nexonid {
        width: 8.2938388626vw;
    }

    .link span.nexonid {
        width: 8.2938388626vw;
        font-size: 1.4218009479vw;
    }

    /* ====================================================================
  btn
  ==================================================================== */
    .btn-area {
        margin: 0% 0% 0% 0%;
        padding: 0vw 1.1848341232vw 0vw 1.1848341232vw;
    }

        .btn-area .btn {
            padding: 0vw 0.5924170616vw 0vw 0.5924170616vw;
        }

    .btn.login, .btn.login-openid, .btn.regist-id, .btn.oldotp-cancel, .btn.grade-change {
        width: 40.2843601896vw;
        margin: 2.3696682464% auto 0% auto;
    }

        .btn.login a {
            height: 5.9241706161vw;
            background-size: 7.7606635071vw 2.1327014218vw;
        }

        .btn.regist-id a {
            height: 5.9241706161vw;
            background-size: 15.8767772512vw 2.0142180095vw;
        }

    .btn.reset {
        width: 13.6255924171vw;
        margin: 0.8886255924% auto 0% auto;
    }

        .btn.reset a {
            padding: 0.355450237vw 0.8886255924vw 0.355450237vw 0.8886255924vw;
            font-size: 1.0663507109vw;
        }

            .btn.reset a::before {
                margin: 0vw 0.8886255924vw 0vw 0vw;
                width: 0.9478672986vw;
                height: 0;
                padding: 0.9478672986vw 0vw 0vw 0vw;
            }

        .btn.reset + .error {
            margin: 0.8886255924vw 0vw 0vw 0vw;
        }

    .btn.common-b, .btn.common-g {
        margin: 2.3696682464% auto 0% auto;
        width: 23.6966824645vw;
    }

        .btn.common-b.complete, .btn.common-g.complete {
            width: 22.5118483412vw;
        }

        .btn.common-b a, .btn.common-g a {
            padding: 1.1848341232vw 0;
            font-size: 1.4218009479vw;
        }

            .btn.common-b a::after, .btn.common-g a::after {
                width: 0.8293838863vw;
                padding-top: 1.2440758294vw;
            }

            .btn.common-b a::after {
                transform: translate(-1.0663507109vw, -50%);
            }

    /* ====================================================================
  	android 4.x
  ==================================================================== */
    .a4 {
        /* ====================================================================
    	container
    ==================================================================== */
        /* ====================================================================
    contents
    ==================================================================== */
        /* ====================================================================
    nexon id
    ==================================================================== */
        /*
    	span.nexonid{
    		//@include paddingPer($baseWidthLandscape, 21,0,0,0);
    		padding:12px 0 0 0;
    	}
    */
        /* ====================================================================
    btn
    ==================================================================== */
    }

        .a4 header {
            padding: 1.0071090047% 0;
        }

            .a4 header h1 {
                width: 5.6872037915%;
                padding-top: 1.7772511848%;
            }

        .a4 .container > article {
            padding: 2.3696682464% 0% 2.9620853081% 0%;
        }

        .a4 article h2.ttl {
            margin: 1.7772511848% 0 0;
            font-size: 2.2511848341%;
        }

        .a4 article .infotxt {
            width: 42.654028436%;
            margin: 1.4218009479% auto 0;
            padding: 1.481042654% 1.1848341232% 1.3033175355%;
            font-size: 1.3033175355%;
        }

            .a4 article .infotxt p {
                word-break: break-all;
                text-align: center;
            }

                .a4 article .infotxt p span {
                    font-weight: bold;
                    color: #09aded;
                }

        .a4 article .infotxt__link {
            margin-top: 1.3033175355%;
            font-size: 1.3033175355%;
        }

        .a4 article .registered {
            width: 42.654028436%;
            margin: 1.4218009479% auto 0;
        }

            .a4 article .registered dl dt {
                padding-top: 1.481042654%;
                font-size: 1.0663507109%;
            }

            .a4 article .registered dl dd:nth-of-type(1) {
                padding: 0.2962085308% 1.7772511848% 1.1848341232%;
                font-size: 2.2511848341%;
            }

            .a4 article .registered dl dd:nth-of-type(2) {
                padding: 0.5924170616% 0;
                font-size: 1.3033175355%;
            }

            .a4 article .registered .authenticated {
                margin-right: 0.2962085308%;
                padding: 0.2962085308% 0.4739336493% 0;
                font-size: 0.8293838863%;
            }

        .a4 article .link-txt {
            margin-top: 2.1327014218%;
        }

            .a4 article .link-txt a {
                font-size: 1.1848341232%;
            }

        .a4 .contents {
            margin: 2.3696682464% 1.7772511848% 0% 1.7772511848%;
            padding: 2.3696682464% 13.0331753555% 2.3696682464% 13.0331753555%;
        }

            .a4 .contents p {
                font-size: 1.4218009479%;
            }

                .a4 .contents p.lead {
                    font-size: 1.4218009479%;
                }

                    .a4 .contents p.lead span {
                        font-size: 1.0663507109%;
                    }

                .a4 .contents p.txt {
                    margin: 1.7772511848% 0% 0% 0%;
                    font-size: 1.4218009479%;
                }

                    .a4 .contents p.txt + .error {
                        margin: 1.7772511848% 0% 0% 0%;
                    }

        .a4 h2 + .contents {
            margin: 2.3696682464% 1.7772511848% 0% 1.7772511848%;
        }

        .a4 .txt {
            margin: 2.3696682464% 1.7772511848% 0% 1.7772511848%;
            font-size: 1.4218009479%;
        }

        .a4 span.nexonid-info {
            width: 1.6587677725%;
            padding-top: 1.6587677725%;
            margin-left: 0.7109004739%;
        }

            .a4 span.nexonid-info::after {
                width: 28.6137440758%;
                padding-top: 3.9099526066%;
                margin: -4.4431279621% 0 0 -9.7748815166%;
            }

        .a4 span.nexonid-unchangeable {
            width: 1.6587677725%;
            padding-top: 1.6587677725%;
            margin-left: 0.7109004739%;
        }

            .a4 span.nexonid-unchangeable::after {
                width: 5.9241706161%;
                padding-top: 3.6137440758%;
                margin: -4.4431279621% 0 0 -2.1327014218%;
            }

        .a4 .common-b span.nexonid {
            width: 8.2938388626%;
        }

        .a4 .link span.nexonid {
            width: 8.2938388626%;
            font-size: 1.4218009479%;
        }

        .a4 .btn-area {
            margin: 0% 0% 0% 0%;
            padding: 0% 1.1848341232% 0% 1.1848341232%;
        }

            .a4 .btn-area .btn {
                padding: 0% 0.5924170616% 0% 0.5924170616%;
            }

        .a4 .btn.login, .a4 .btn.login-openid, .a4 .btn.regist-id, .a4 .btn.oldotp-cancel, .a4 .btn.grade-change {
            margin: 2.3696682464% auto 0% auto;
        }

            .a4 .btn.login a {
                height: 5.9241706161%;
                padding: 1.7772511848% 0% 2.3696682464% 0%;
                background-size: 7.7606635071vw 2.1327014218vw;
            }

            .a4 .btn.regist-id a {
                height: 5.9241706161%;
                background-size: 15.8767772512vw 2.0142180095vw;
            }

        .a4 .btn.common-b, .a4 .btn.common-g {
            margin: 2.3696682464% auto 0% auto;
            width: 18.9573459716%;
        }

            .a4 .btn.common-b.complete, .a4 .btn.common-g.complete {
                width: 22.5118483412%;
            }

            .a4 .btn.common-b a, .a4 .btn.common-g a {
                padding: 1.7772511848% 1.481042654% 1.7772511848% 1.481042654%;
                font-size: 1.6587677725%;
            }

                .a4 .btn.common-b a::after, .a4 .btn.common-g a::after {
                    width: 0.7109004739%;
                    height: 1.1255924171%;
                }

                .a4 .btn.common-b a::after {
                    transform: translate(-1.0663507109%, -50%);
                }
}