@charset "utf-8";

* {
    margin         : 0;
    padding        : 0;
    text-decoration: none;
    list-style     : none;
}

@keyframes key-ani {
    0% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }

    10% {
        -webkit-transform: translatey(-50%);
        transform        : translatey(-50%);
    }

    20% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }

    30% {
        -webkit-transform: translatey(-25%);
        transform        : translatey(-25%);
    }

    40% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }

    50% {
        -webkit-transform: translatey(-10%);
        transform        : translatey(-10%);
    }

    60% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }

    70% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }

    80% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }

    100% {
        -webkit-transform: translatey(0);
        transform        : translatey(0);
    }
}

.numberkey {
    --fontsize67        : calc(67 / 1920 * 100 * 1vw);
    --fontsize21        : calc(21 / 1920 * 100 * 1vw);
    --fontsize20        : calc(20 / 1920 * 100 * 1vw);
    --fontsize25        : calc(25 / 1920 * 100 * 1vw);
    --fontsize30        : calc(30 / 1920 * 100 * 1vw);
    --fontsize33        : calc(33 / 1920 * 100 * 1vw);
    --fontsize34        : calc(34 / 1920 * 100 * 1vw);
    --fontsize17        : calc(17 / 1920 * 100 * 1vw);
    --fontsize19        : calc(19 / 1920 * 100 * 1vw);
    --fontsize15        : calc(15 / 1920 * 100 * 1vw);
    --fontsize13        : calc(13 / 1920 * 100 * 1vw);
    --fontfamily-lighter: "hyundaisansheadcn-lighter";
    --fontfamily-medium : "hyundaisansheadcn-medium";
    --fontfamily-regular: "hyundaisansheadcn";
    font-size           : var(--fontsize20);
    font-family         : var(--fontfamily-regular);
    letter-spacing      : 0.15em;
}

.numberkey .font-medium {
    font-family: var(--fontfamily-medium);
}

.numberkey .font-lighter {
    font-family: var(--fontfamily-lighter);
}

.numberkey .pointer {
    cursor: pointer;
}

.numberkey .close-wrap {
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 100%;
    background     : #fff;
    position       : relative;
    z-index        : 2;
    top            : 50%;
    right          : 0;
    cursor         : pointer;
    width          : 2.2em;
    height         : 2.2em;
    padding        : 0.7em;
    margin-left    : 2em;
}

.numberkey .close-wrap img {
    filter: invert(1);
    width : 100%;
}

.numberkey .blue {
    color: rgb(43, 128, 187);
    color: #2b80bb;
}

.numberkey img {
    display  : block;
    max-width: 100%;
}

.numberkey .safe-area {
    width : 90vw;
    width : 83vw;
    margin: 0 auto;
}

.numberkey .tip {
    font-family: var(--fontfamily-lighter);
}

.numberkey .tip.signed {
    display: flex;
}

.numberkey .tip.signed:before {
    content     : "※";
    display     : block;
    margin-right: 0.5em;
}

.th {
    padding-top: 2em;
}

.numberkey .icon-item {
    font-size  : var(--fontsize20);
    font-family: var(--fontfamily-lighter);
    width      : 100%;
}

.numberkey .icon-item li {
    margin-bottom: 0.8em;
    margin-bottom: 1em;
    display      : flex;
    text-align   : justify;
}

.numberkey .icon-item li::before {
    display          : block;
    content          : "";
    background       :  center;
    width            : 1.2em;
    height           : 1.2em;
    background-size  : contain;
    background-repeat: no-repeat;
    margin-right     : 0.7em;
    margin-top       : 0.1em;
    flex-shrink      : 0;
}

.numberkey .icon-item.double {
    display        : flex;
    justify-content: space-between;
    flex-wrap      : wrap;
}

.numberkey .icon-item.double li {
    width: 48%;
}

.numberkey .img-none {
    display: none;
}

.numberkey .reversal {
    flex-direction: row-reverse;
}

.numberkey .kv .kvimg {
    width   : 100%;
    position: relative;
}

.numberkey .kv .kvimg .kvtext {
    position: absolute;
    top     : 40%;
    left    : 6.5687vw;
    color   : #fff;
}

.numberkey .kv .kvimg .kvtext h1 {
    font-size    : 2.881158vw;
    font-size    : var(--fontsize67);
    margin-bottom: 1vw;
}

.numberkey .kv .kvimg .kvtext .desc {
    color    : rgba(255, 255, 255, 0.8);
    font-size: var(--fontsize25);
}

.numberkey .kv .kvimg .kvicon {
    position      : absolute;
    bottom        : 5%;
    left          : 50%;
    transform     : translate(-50%, 0);
    border-bottom : 1px solid #fff;
    padding-bottom: 0.5%;
    width         : 26px;
    cursor        : pointer;
}

.numberkey .kv .kvimg .kvicon img {
    width    : 100%;
    animation: key-ani 2s linear infinite;
}

.numberkey .kv .kvimg img {
    width     : 100%;
    max-height: 100vh;
    object-fit: cover;
}

.numberkey .nav {
    width           : 100%;
    background-color: #abcae6;
}

.numberkey .nav .nav-box {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    white-space    : nowrap;
}

.numberkey .nav .nav-box .title {
    font-size  : var(--fontsize25);
    font-family: var(--fontfamily-medium);
}

.numberkey .nav .nav-box .content {
    font-size: var(--fontsize21);
}

.numberkey .nav .content {
    display    : flex;
    align-items: center;
    font-family: var(--fontfamily-medium);
}

.numberkey .nav .content .item {
    padding: 1.5em 0;
    opacity: 0.7;
    cursor : pointer;
}

.numberkey .nav .content .item.act {
    opacity: 1;
}

.numberkey .nav .content .item .item {
    margin-left: 2.5em;
}

.numberkey .nav.fixed {
    position: fixed;
    top     : 0;
    z-index : 2;
    left    : 0;
}

.numberkey .public_title {
    font-size     : var(--fontsize33);
    padding-top   : 2em;
    padding-bottom: 1.5em;
    border-top    : 1px solid #2b80bb;
}

.numberkey .public_title:first-child {
    border: none;
}

.numberkey .public_title h2 {
    font-family: var(--fontfamily-medium);
}

.numberkey .public_title .title_desc {
    font-size : var(--fontsize30);
    margin-top: 0.5em;
}

.numberkey .step-wrap {
    display       : flex;
    flex-direction: column;
    border-left   : 1px solid #ababab;
    padding-left  : var(--fontsize20);
}

.numberkey .step-wrap li {
    position: relative;
    cursor  : pointer;
    opacity : 0.57;
}

.numberkey .step-wrap li .sub-tit {
    font-size: var(--fontsize20);
}

.numberkey .step-wrap li .desc {
    font-size     : var(--fontsize20);
    padding-top   : 1.2em;
    padding-bottom: 1em;
    height        : 0;
    overflow      : hidden;
    padding       : 0;
    transition    : all 0.3s;
    text-align    : justify;
}

.numberkey .step-wrap li .desc .iosandthree {
    display: flex;
}

.numberkey .step-wrap li .desc .iosandthree span {
    display: block;
}

.numberkey .step-wrap li .desc .iosandthree span:first-child {
    width: 12em;
}

.numberkey .step-wrap li.act {
    opacity: 1;
}

.numberkey .step-wrap li.act .sub-tit {
    font-size: var(--fontsize33);
}

.numberkey .step-wrap li.act .desc {
    padding-top   : 1.2em;
    padding-bottom: 1em;
    height        : auto;
}

.numberkey .step-wrap li.act::after {
    content         : "";
    width           : 2px;
    height          : 100%;
    display         : block;
    background-color: #000;
    position        : absolute;
    top             : 0;
    left            : calc(-1 * var(--fontsize20) - 1px);
}

.numberkey .step-wrap li li {
    margin-top: calc(2 * var(--fontsize20));
}

.numberkey .step-wrap .icon-item {
    margin-top: 3em;
}

.numberkey .container .flex-wrap {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 5%;
    font-family    : var(--fontfamily-regular);
}

.numberkey .container .flex-wrap.single .img-wrap {
    width: 58%;
}

.numberkey .container .flex-wrap.single .img-wrap-first {
    width: 39%;
}

.numberkey .container .flex-wrap.single .text-wrap {
    width: 37%;
}

.numberkey .container .flex-wrap.single .text-wrap-first {
    width: 58%;
}

.numberkey .container .flex-wrap[data-type=swiper] .img-group .swiper-container {
    visibility: initial;
    opacity   : 1;
}

.numberkey .container .flex-wrap[data-type=swiper] .img-group .img {
    display: none;
}

.numberkey .container .flex-wrap[data-type=img] .img-group {
    position: relative;
    overflow: hidden;
}

.numberkey .container .flex-wrap[data-type=img] .img-group .swiper-container {
    visibility: hidden;
    position  : absolute;
    opacity   : 0;
    top       : 0;
    left      : 0;
    width     : 100%;
}

.numberkey .container .flex-wrap[data-type=img] .img-group .img {
    display: block;
}

.numberkey .container .flex-wrap[data-type=img] .img-group .img-none {
    display: none;
}

.numberkey .container .flex-wrap .img-wrap {
    width: 45%;
}

.numberkey .container .flex-wrap .img-group .pc-pad,
.numberkey .container .flex-wrap .img-group .tip,
.numberkey .container .flex-wrap img .tip,
.numberkey .container .flex-wrap .tiptwo {
    margin-top: 1em;
}

.numberkey .container .flex-wrap .tip {
    line-height: 1.5;
    font-size  : var(--fontsize17);
}

.numberkey .container .flex-wrap .text-wrap {
    width: 51%;
}

.numberkey .container .flex-wrap .text-wrap .tit {
    margin-bottom: 1.5em;
    font-size    : var(--fontsize30);
    font-size    : var(--fontsize34);
}

.numberkey .container .flex-wrap .text-wrap .tit.top-tip {
    font-family: var(--fontfamily-lighter);
    font-size  : var(--fontsize20);
}

.numberkey .container .flex-wrap .text-wrap .tit.top-tip strong {
    font-family: var(--fontfamily-regular);
}

.numberkey .container .flex-wrap .text-wrap .tip {
    font-size: var(--fontsize19);
}

.numberkey .container .flex-wrap .text-wrap .signed {
    position: relative;
}

.numberkey .container .flex-wrap .text-wrap .signed:before {
    position : absolute;
    transform: translatex(-180%);
}

.numberkey #swiper3 {
    margin-bottom: 2%;
}

.numberkey #swiper3 .icon-item {
    margin-bottom: 5%;
}

.numberkey .text-container .linkpostion {
    position: relative;
}

.numberkey .text-container .linkpostion a {
    position: absolute;
    width   : 16%;
    height  : 22px;
    top     : 67%;
    left    : 16%;
}

.numberkey .c-button {
    display   : inline-block;
    min-width : 180px;
    text-align: left;
}

.numberkey .c-button>div,
.numberkey .c-button a {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    padding          : 19px 35px 17px;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    background       : #012c5f;
    color            : #fff;
    line-height      : 1;
    font-family      : hyundaisansheadcn-medium, hyundaisanshead-medium, hansans, microsoft yahei, pingfang sc, open sans, arial, hiragino sans gb, simsun, sans-serif;
}

.numberkey .c-button.line-white>div,
.numberkey .c-button.line-white a {
    padding-top   : 15px;
    padding-bottom: 14px;
    color         : #fff;
    border        : 1px solid #fff;
    background    : none;
    border-radius : 0;
}

.numberkey .c-button.line-white>div:hover,
.numberkey .c-button.line-white a:hover {
    color     : #000;
    background: #fff;
    border    : 1px solid #fff;
}

.numberkey .c-button.red-color>div:hover,
.numberkey .c-button.red-color a:hover {
    color     : #fff;
    background: #aacae6;
}

.numberkey .c-button.red-bg>div,
.numberkey .c-button.red-bg a {
    padding-top   : 15px;
    padding-bottom: 15px;
    padding-right : 30px;
    color         : #fff;
    background    : #aacae6;
}

.numberkey .c-button.red-bg>div:hover,
.numberkey .c-button.red-bg a:hover {
    color     : #fff;
    background: #aacae6;
}

.numberkey .btn-link-wrap {
    text-align: center;
}

.numberkey .btn-link-wrap .h3-sp-top {
    padding-top: 60px;
}

.numberkey .btn-link-wrap .h4-sp-bottom {
    padding-bottom: 30px;
}

@media (max-width: 767px) {
    .numberkey {
        --fontsize67        : calc(67 / 750 * 100 * 1vw);
        --fontsize23        : calc(23 / 750 * 100 * 1vw);
        --fontsize21        : calc(21 / 750 * 100 * 1vw);
        --fontsize20        : calc(20 / 750 * 100 * 1vw);
        --fontsize25        : calc(25 / 750 * 100 * 1vw);
        --fontsize28        : calc(28 / 750 * 100 * 1vw);
        --fontsize30        : calc(30 / 750 * 100 * 1vw);
        --fontsize33        : calc(33 / 750 * 100 * 1vw);
        --fontsize34        : calc(34 / 750 * 100 * 1vw);
        --fontsize17        : calc(17 / 750 * 100 * 1vw);
        --fontsize19        : calc(19 / 750 * 100 * 1vw);
        --fontsize15        : calc(15 / 750 * 100 * 1vw);
        --fontsize13        : calc(13 / 750 * 100 * 1vw);
        --fontfamily-lighter: "hyundaisansheadcn-lighter";
        --fontfamily-medium : "hyundaisansheadcn-medium";
        --fontfamily-regular: "hyundaisansheadcn";
        font-size           : var(--fontsize20);
        font-family         : var(--fontfamily-regular);
        letter-spacing      : 0.15em;
        letter-spacing      : 0.1em;
    }

    .numberkey .public_title:first-child {
        border    : none;
        text-align: center;
    }

    .numberkey .kv .kvimg .kvtext h1 {
        font-size    : 8.833vw;
        margin-bottom: 1vw;
    }

    .numberkey .kv .kvimg .kvtext .desc {
        color    : rgba(255, 255, 255, 0.8);
        font-size: var(--fontsize34);
    }

    .numberkey .nav .nav-box .title {
        font-size: 4.5vw;
        padding  : 5vw 0;
    }

    .numberkey .container .flex-wrap {
        flex-direction: column;
    }

    .numberkey .container .flex-wrap.single .img-wrap {
        width: 100%;
    }

    .numberkey .container .flex-wrap .img-wrap {
        width: 100%;
    }

    .numberkey .container .flex-wrap.single .text-wrap {
        width: 100%;
    }

    .numberkey .container .flex-wrap .text-wrap {
        width: 100%;
    }

    .numberkey .icon-item.double li {
        width: 100%;
    }

    .numberkey .container .flex-wrap .text-wrap .tit.top-tip {
        font-family: var(--fontfamily-lighter);
        font-size  : var(--fontsize25);
    }

    .numberkey .container .flex-wrap .text-wrap .tit {
        margin-top: 1.5em;
    }

    .numberkey .icon-item {
        font-size     : var(--fontsize25);
        padding-top   : 1em;
        margin-top    : 0em !important;
        padding-bottom: 1.5em;
        border-top    : 1px solid #2b80bb;
    }

    .numberkey .container .flex-wrap .tip {
        line-height: 1.5;
        font-size  : var(--fontsize21);
        display    : flex;
    }

    .numberkey .container .flex-wrap .tip:first-child {
        margin-top: 8em;
    }

    .numberkey .container .flex-wrap .text-wrap .tip {
        font-size: var(--fontsize21);
        display  : flow-root;
    }

    .numberkey .step-wrap li .desc {
        font-size: var(--fontsize23);
    }

    .numberkey .container .flex-wrap .text-wrap .tit {
        margin-bottom: 1.5em;
        font-size    : 4.8vw;
    }

    .numberkey .step-wrap li.act .sub-tit {
        font-size: var(--fontsize33);
    }

    .numberkey .container .flex-wrap .text-wrap .tit br {
        display: none;
    }

    #right-btn {
        width              : 5.5vw;
        height             : 5vw;
        background-image   : ;
        background-repeat  : no-repeat;
        background-size    : 100% 100%;
        background-position: center;
        cursor             : pointer;
    }

    .icon-guanbi:before {
        background-image: ;
    }

    #open-panel {
        width     : 100%;
        z-index   : 1040;
        background: #aacae6 !important;
        text-align: center;
    }

    .nav-box {
        position: relative;
        padding : 0;
    }

    .numberkey .nav .nav-box .content {
        position  : absolute;
        top       : 0;
        margin-top: 16%;
        display   : list-item;
        background: #aacae6 !important;
        width     : 100%;
        text-align: center;
    }

    #content {
        display: none;
    }

    .numberkey .nav .content .item .item {
        margin-left: 0em;
    }

    .numberkey .nav .nav-box .content {
        font-size  : var(--fontsize28);
        width      : 100vw;
        margin-left: -59.1vw;
    }

    .numberkey .safe-area {
        width: 86vw;
    }

    .numberkey .step-wrap {
        border-left  : 0;
        border-bottom: 1px solid #ababab;
        padding-left : 0;
        position     : relative;
        margin-top   : 2em;
        flex-flow    : row;
        align-items  : center;
    }

    .numberkey .step-wrap li {
        position  : static;
        display   : inline-block;
        width     : auto;
        word-break: break-all;
    }

    .numberkey .step-wrap li .desc {
        position  : absolute;
        transition: all 0s;
    }

    .numberkey .step-wrap li li {
        margin-top : 0;
        margin-left: 2.5em;
    }

    .numberkey .step-wrap li.act::after {
        width   : 100%;
        height  : 2px;
        top     : auto;
        bottom  : 0;
        position: static;
    }

    .numberkey .step-wrap li.act .desc {
        left : 0;
        width: 86vw;
    }

    .numberkey .public_title {
        border-top: none;
    }

    .tit-m {
        margin-top: 5em !important;
    }

    .numberkey .icon-item-m {
        margin-top: 5em !important;
    }

    .numberkey .icon-item1 {
        margin-top: 18em !important;
    }

    .numberkey .img-group {
        height: 79vw;
    }

    #swiper5 .icon-item.double,
    #swiper12 .icon-item.double {
        margin-top: 5em !important;
    }

    .numberkey .step-wrap li .desc .iosandthree span:first-child {
        width: 20em;
    }

    .c-button.red-bg>div,
    .c-button.red-bg a {
        font-size: 1.2em;
    }

    .numberkey .container .flex-wrap[data-type=swiper] .img-group .swiper-container {
        padding-top: 10vw;
    }
}

/*# sourcemappingurl=key.css.map */