/* RWD */
@media screen and (max-device-width: 400px){

}
:root {
    --title-color:#aefcff;
    --icon-color-1: #00a3b3;
    --icon-color-2: #99b0ab;
    --text-color: #d9d4e4;
    --text-color-hover: #ffffff;
    --box-border-color-original: #344142;
    --box-border-color-hover: #00a4b4;
    --input-border-color-original: #00a4b4;
    --input-border-color-hover: #7594a0;
    --input-border-color-focus: #9cc2cb;
    --option-background-color-original: #252d2f;
    --table-tr-td-border-color: #004248;
}
/* Common */
html,body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #3E6175;
    z-index: -2;
}
input:-webkit-autofill{
    font-family: 'Maven Pro';
    font-size: 14px;
    -webkit-text-fill-color: #d6cfbd;
    transition: background-color 0s ease-in-out 86400s;
}
::placeholder{
    font-family: 'Maven Pro';
    color: #99b0ab88;
}
::-ms-input-placeholder{
    font-family: 'Maven Pro';
    color: #99b0ab88;
}
canvas{
    position: absolute;
    /* filter: blur(1px) drop-shadow(0px 0px 3px white); */
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    mix-blend-mode: screen;

    animation: canvas 1s ease-in-out forwards;
}
@keyframes canvas{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.input_sty{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 100;
    font-family: 'Maven Pro';
    color: rgb(255, 255, 255);
    cursor: default;
}
.login_inp{
    font-family: 'Maven Pro';
    font-weight: 100;
    font-size: 13px;
    height: 28px;
    width: 190px;
    padding: 5px 9px;
    margin: 3px;
    color: #d6cfbd;
    border: 2px solid var(--input-border-color-original);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition: .25s;
    outline: none;
    z-index: 4;
    transition: .1325s cubic-bezier(0.2, 1.01, 1, 1);
}
.login_inp:hover{
    border-color: var(--input-border-color-hover);
}
.login_inp:focus{
    color: white;
    border-color: var(--input-border-color-focus);
    background: rgba(0, 0, 0, 0.325);
}
#use-ani{
    transform: translate(-50px, 0px);
    opacity: 0;

    animation: use-ani .5s ease-in-out .75s forwards;
}
@keyframes use-ani{
    0%{
        transform: translate(-50px, 0px);
        opacity: 0;
    }100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
#pwd-ani{
    transform: translate(-50px, 0px);
    opacity: 0;

    animation: pwd-ani .5s ease-in-out .85s forwards;
}
@keyframes pwd-ani{
    0%{
        transform: translate(-50px, 0px);
        opacity: 0;
    }100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.login_btn{
    width: 245px;
    height: 50px;
    font-family: 'Canterpids Sans';
    font-size: 20px;
    font-weight: 600;
    color: rgb(3, 13, 14);
    box-shadow: inset 0 0 3px 1px #637b9e;
    background: #47636d;
    border-radius: 7px;
    border: 2px solid #2e4c50;
    letter-spacing: 2.5px;
    outline: none;
    cursor: pointer;
    transition: .125s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.login_btn:hover{
    color: rgb(255, 255, 255);
    background: #3f5a64;
    text-shadow:
        .0vw 0vw .25vw rgb(216, 255, 253), .0vw 0vw .25vw rgb(216, 255, 253),
        .0vw 0vw   0vw rgb(87, 242, 229), .0vw 0vw   0vw rgb(87, 242, 229),
        .0vw 0vw   5vw rgb(11, 124, 229), .0vw 0vw  10vw rgb(11, 124, 229);
    border-color: rgb(127, 208, 228);
}
.login_btn:active{
    color: rgba(106, 144, 153, 0.6);
    text-shadow: 0 0 0 rgb(82, 206, 255);
    box-shadow:  0 0 0 0 transparent;
    background: rgb(32, 58, 68);
    border-color: rgba(176, 239, 255, 0.2);
    transform: translate(0px, 3px);
    transition: .05s ease-in-out;
}
.login_btn:active .login_p{
    transform: translate(1px, 3px);
}
.login_p{
    margin: 0 auto;
    transform: translate(1px, 2px);
}
.fas{
    font-size: 19px;
    z-index: 3;
}
.fa-key{
    color: #00a4b4;
}

/* Logo */
.wrapper-fat{
    display: grid;
    grid-template-columns: 20% 500px 20%;
    grid-template-rows: 0px 200px 300px 52px;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.ti_wrapper{
    transform: translate(0px, -50px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
    z-index: 3;
    opacity: 1;
}
.logo-graphics{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: fill 1s linear, transform 1.25s ease-in-out;
    -webkit-transition: fill 1s linear, transform 1.25s ease-in-out;
}
.company_logo{
    transform: translate(0px, 40px) !important;
    width: 92px;

    animation: company_logo 3s cubic-bezier(0.54, -0.26, 0.33, 1.39) forwards;
}
@keyframes company_logo{
    0%{
        filter: brightness(1) drop-shadow(0px 0px 0px rgb(70, 255, 246));
        opacity: 0;
    }3.5%{
        opacity: 0;
    }40%{
        filter: brightness(3) drop-shadow(0px 0px 20px rgba(164, 255, 250, 0.65));
        opacity: 1;
    }60%{
        filter: brightness(3) drop-shadow(0px 0px 20px rgba(164, 255, 250, 0.65));
        opacity: 1;
    }90%{
        filter: brightness(1) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
        opacity: 1;
    }100%{
        filter: brightness(1) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
        opacity: 1;
    }
}
.company_logo_path{
    fill: #00A5B5;
    transform-origin: 50% 50%;
    transition: .5s ease-in-out;
}
.cl_p-1{
    animation: cl_p-1 1s cubic-bezier(0.48, 0.01, 0.52, 1.36) forwards;
}
@keyframes cl_p-1{
    0%{
        transform: rotate(270deg) scale(2);
    }100%{
        transform: rotate(0deg) scale(1);
    }
}
.cl_p-2{
    animation: cl_p-2 1s cubic-bezier(0.48, 0.01, 0.52, 1.36) forwards;
}
@keyframes cl_p-2{
    0%{
        transform: rotate(270deg) scale(2);
    }100%{
        transform: rotate(0deg) scale(1);
    }
}
.cl_p-3{
    animation: cl_p-3 1s cubic-bezier(0.48, 0.01, 0.52, 1.36) forwards;
}
@keyframes cl_p-3{
    0%{
        transform: rotate(270deg) scale(2);
    }100%{
        transform: rotate(0deg) scale(1);
    }
}
.company_logo_path_color_1{
    fill: #00A5B5;
}
.company_logo_path_color_2{
    fill: #FABE00;
}
.company_logo_obj_1-1{
    transform-origin: 50% 50%;

    animation: company_logo_obj_1-1 1s cubic-bezier(0.42, 0, 0.32, 1.35) forwards;
}
@keyframes company_logo_obj_1-1{
    0%{
        transform: rotate(180deg);
        opacity: 0;
    }25%{
        opacity: 0;
    }100%{
        transform: rotate(0deg);
        opacity: 1;
    }
}
.company_logo_obj_1-2{
    transform-origin: 50% 50%;

    animation: company_logo_obj_1-2 5s cubic-bezier(0.54, -0.26, 0.33, 1.39) forwards;
}
@keyframes company_logo_obj_1-2{
    0%{
        transform: rotate(0deg);
    }20%{
        transform: rotate(75deg);
    }40%{
        transform: rotate(75deg);
    }50%{
        transform: rotate(-180deg);
    }60%{
        transform: rotate(-180deg);
    }75%{
        transform: rotate(25deg);
    }85%{
        transform: rotate(25deg);
    }100%{
        transform: rotate(0deg);
    }
}
.company_logo_obj_2{
    transform-origin: 50% 50%;

    animation: company_logo_obj_2 1s ease-in-out forwards;
}
@keyframes company_logo_obj_2{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.company_logo_obj_3{
    transform-origin: 50% 50%;

    animation: company_logo_obj_3 1s ease-in-out forwards;
}
@keyframes company_logo_obj_3{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.company_logo_obj_4{
    transform-origin: 50% 50%;

    animation: company_logo_obj_4 1.15s ease-in-out forwards;
}
@keyframes company_logo_obj_4{
    0%{
        transform: scale(.5);
        opacity: 0;
    }75%{
        transform: scale(1.5);
    }100%{
        transform: scale(1);
        opacity: 1;
    }
}
.company_logo_wrap_1{
    transform-origin: 50% 50%;

    animation: company_logo_wrap_1 .85s ease-in-out forwards;
}
@keyframes company_logo_wrap_1{
    0%{
        transform: rotate(-360deg);
        opacity: 0;
    }100%{
        transform: rotate(0deg);
        opacity: 1;
    }
}
.company_logo_wrap_2{
    transform-origin: 50% 50%;

    animation: company_logo_wrap_2 1s ease-in-out forwards;
}
@keyframes company_logo_wrap_2{
    0%{
        transform: rotate(360deg);
        opacity: 0;
    }100%{
        transform: rotate(0deg);
        opacity: 1;
    }
}
.company_logo_obj_5{

}
.company_logo_obj_6{
}
/* .company_logo_shine_effect{
    width: 82px;
    transform: scale(1) translate(0px, 40px) !important;
    opacity: 1;

    animation: company_logo_shine_effect 2.5s ease-in-out forwards;
}
@keyframes company_logo_shine_effect{
    0%{
        filter: contrast(1) brightness(6) drop-shadow(0px 0px 15px rgb(116, 255, 248));
    }40%{
        filter: contrast(1) brightness(6) drop-shadow(0px 0px 15px rgb(116, 255, 248));
    }75%{
        filter: contrast(1) brightness(1) drop-shadow(0px 0px 300px rgb(255, 255, 255));
    }100%{
        filter: contrast(1) brightness(1) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    }
} */
.company_logo_text_path,
.company_logo_text_rect,
.company_logo_text_polygon{
    fill: #00A5B5;
}
.company_logo_text_wrap{
    /* filter: url(#filter_wavy_effect); */
}
.company_logo_text{
    font-family: 'Syntha Nova';
    font-weight: 100;
    font-size: 30px;
    color: white;
    margin: 0 auto;
    opacity: 0;

    animation: company_logo_text 1s cubic-bezier(0.57, -0.29, 0.24, 1.49) forwards;
}
@keyframes company_logo_text{
    0%{
        transform: scale(2) translate(0px, 80px);
        opacity: 0;
    }25%{
        opacity: 0;
    }100%{
        transform: scale(1) translate(0px, 55px);
        opacity: 1;
    }
}
#company_text_2{
    opacity: 0;

    animation: company_text_2 1s ease-in-out forwards;
}
@keyframes company_text_2{
    0%{
        transform: translate(0px, 50px);
        opacity: 0;
    }100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.cls-1{
    fill: rgb(104, 238, 255);
    transform-origin: 50% 50%;

    animation: cls-1 6s ease-in-out 1s infinite;
}
@keyframes cls-1{
    0%{
        fill: rgb(104, 238, 255);
    }33%{
        fill: rgb(174, 252, 255);
    }66%{
        fill: rgb(206, 249, 255);
    }100%{
        fill: rgb(104, 238, 255);
    }
}
.cls-2{
    fill: rgb(206, 249, 255);
    transform-origin: 50% 50%;

    animation: cls-2 6s ease-in-out 1s infinite;
}
@keyframes cls-2{
    0%{
        fill: rgb(206, 249, 255);
    }33%{
        fill: rgb(104, 238, 255);
    }66%{
        fill: rgb(174, 252, 255);
    }100%{
        fill: rgb(206, 249, 255);
    }
}
.cls-3{
    fill: rgb(174, 252, 255);
    transform-origin: 50% 50%;

    animation: cls-3 6s ease-in-out 1s infinite;
}
@keyframes cls-3{
    0%{
        fill: rgb(174, 252, 255);
    }33%{
        fill: rgb(206, 249, 255);
    }66%{
        fill: rgb(104, 238, 255);
    }100%{
        fill: rgb(174, 252, 255);
    }
}
.logo-text{
    color: white;
    font-size: 48px;
    font-weight: bold;
    cursor: default;
}
@keyframes logo-text{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.light_line_effect{
    position: absolute;
    transform: translate(-180px, -105px);
    width: 10px;
    height: 2px;
    background: #a2ffeb;
    box-shadow: 0 0 20px 5px #38fff2;
    border-radius: 30px;
    opacity: 0;
    z-index: 3;

    animation: light_line_effect .325s linear forwards;
}
@keyframes light_line_effect{
    0%{
        width: 10px;
        transform: translate(-180px, -125px);
        filter: blur(3px);
        opacity: 0;
    }75%{
        width: 100px;
        filter: blur(0px);
        opacity: 1;
    }100%{
        width: 10px;
        transform: translate(180px, -125px);
        filter: blur(3px);
        opacity: 0;
    }
}
.logo-text-ani{
    position: relative;
    left: 0;
    opacity: 1;
}

/* Login */
.wrapper_chi_login{
    width: 100%;
    height: 100%;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 3;
}
.feedback_effect{
    display: none;
}
.feedback_effect_obj_1{
    position: absolute;
    width: 4px;
    height: 2px;
    background: #575758;
    border-radius: 2px;
    transform: translate(7px, -20px) rotate(90deg);

    animation: feedback_effect_obj_1 .2s ease-in-out forwards;
}
@keyframes feedback_effect_obj_1{
    0%{
        opacity: 1;
    }80%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}
.feedback_effect_obj_2{
    position: absolute;
    width: 4px;
    height: 2px;
    background: #575758;
    border-radius: 2px;
    transform: translate(0px, -17px) rotate(45deg);

    animation: feedback_effect_obj_2 .2s ease-in-out forwards;
}
@keyframes feedback_effect_obj_2{
    0%{
        opacity: 1;
    }80%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}
.feedback_effect_obj_3{
    position: absolute;
    width: 4px;
    height: 2px;
    background: #575758;
    border-radius: 2px;
    transform: translate(-2px, -10px) rotate(0deg);

    animation: feedback_effect_obj_3 .2s ease-in-out forwards;
}
@keyframes feedback_effect_obj_3{
    0%{
        opacity: 1;
    }80%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}
.index-user-icon,
.index-look-icon{
    width: 29px;
    fill: #F0F0F0;
    transition: .5s ease-out;
}
.log-pos-log-btn{
    opacity: 0;

    animation: log-pos-log-btn .5s ease-in-out 1s forwards;
}
@keyframes log-pos-log-btn{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.login-wrap{
    transform: translate(0px, 67px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
    z-index: 4;
}
.login-bg{
    position: absolute;
    top: 0%;
    transform: translate(-320px, 0px);
    width: 200px;
    height: 50px;
    background: linear-gradient(90deg, transparent,#00ffff33, #00ffff33, transparent);
}
.login_btn:hover .login-bg{
    animation: login_btn_hover .45s ease-in-out forwards;
}
@keyframes login_btn_hover{
    0%{
        transform: translate(-320px, 0px);
    }100%{
        transform: translate(320px, 0px);
    }
}
.fa-eye,
.fa-eye-slash{
    position: absolute;
    right: -16%;
    color: #F0F0F0;
    white-space: nowrap;
    cursor: pointer;
    padding: 7px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid #2e3b42;
    border-radius: 8px;
    opacity: 1;
}
.fa-eye-slash{
    transform: translate(3px, 0px);
}
.fa-eye:hover,
.fa-eye-slash:hover{
    border-color: #00a4b4;
    color: rgba(170, 255, 175, 1);
    transition: .15s;
}
.fa-eye:active,
.fa-eye-slash:active{
    margin-top: 2px;
    border-color: #1b373a;
    color: rgb(112, 112, 112);
    transition: .01s;
}
.login_Box{
    transform: translate(0px, -35px);
    opacity: 1;

    animation: login_Box .5s ease-in-out .75s forwards;
}
@keyframes login_Box{
    0%{

    }100%{

    }
}
.login_Box p{
    display: inline;
    margin: 0 auto;
}
.message-rap{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;
    z-index: 1;
}
.message{
    font-family: 'Maven Pro';
    font-size: 14px;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    color: rgb(255, 112, 143);
    cursor: default;
    transition: .5s;
    opacity: 0;

    animation: message .2s ease-in-out forwards;
}
@keyframes message{
    0%{
        filter: blur(5px);
        opacity: 0;
    }100%{
        filter: blur(0px);
        opacity: 1;
    }
}
.forget_password{
    font-family: 'Maven Pro';
    transform: translate(83px, -10px);
    font-size: 13px;
    color: #96ada9;
    cursor: pointer;
    opacity: 0;
    transition: .1s ease-in-out;

    animation: forget_password .5s ease-in-out 1.125s forwards;
}
@keyframes forget_password{
    0%{
        transform: translate(83px, -10px);
        opacity: 0;
    }50%{
        opacity: 0;
    }100%{
        transform: translate(83px, -32px);
        opacity: 1;
    }
}
.forget_password:hover{
    color: #a8fdae;
}
.forget_password:active{
    color: #5b6d6b;
}
.login_bg{
    width: 100%;
    height: 99%;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    border: 1px solid;
    border-color: var(--box-border-color-original);
    border-radius: 10px;
    background: linear-gradient(90deg, #00000038, #00000038, #00000038);
    backdrop-filter: blur(5px);

    animation: login_bg 1.5s cubic-bezier(0.42, 0, 0, 1.01) .125s forwards;
}
@keyframes login_bg{
    0%{
        border-color: var(--box-border-color-original);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        opacity: 0;
    }50%{
        border-color: var(--box-border-color-original);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }75%{
        opacity: 1;
    }100%{
        border-color: var(--box-border-color-hover);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        opacity: 1;
    }
}
/* QRcode scanning */
.wrapper_chi_QRcodescanning{
    width: 100%;
    height: 100%;
    text-align: center;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
    z-index: 2;
}
.QRcode_Box{
    font-family: 'Noto Sans TC', sans-serif;
    margin: 5.75% auto;
    z-index: 3;
}
.QRcode_Box p{
    font-family: 'Maven Pro';
    font-size: 14px;
    color: rgb(255, 255, 255);
    opacity: 0;

    animation: QRcode_Box_p 1s ease-in 1s forwards;
}
@keyframes QRcode_Box_p{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.wrapper-mask{
    animation: wrapper-mask 10s ease-in-out infinite;
}
@keyframes wrapper-mask{
    0%{
        filter: hue-rotate(0deg);
    }45%{
        filter: hue-rotate(45deg);
    }55%{
        filter: hue-rotate(45deg);
    }100%{
        filter: hue-rotate(0deg);
    }
}
.wrapper-qrcode{
    padding: 6px 24px 2px 25px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(255, 255, 255);
    box-shadow:
        0 0 0.02vw  0.09vw rgba(216, 255, 253, .9),
        0 0 0.08vw  0.06vw rgb(87, 242, 229),
        0 0  0.8vw  0.12vw rgba(11, 124, 229, .7),
        inset 0 0 0.3vw  0.1vw rgba(11, 124, 229, .725),
        inset 0 0 0.08vw  0.04vw rgb(87, 242, 229),
        inset 0 0 0.1vw  0.04vw rgba(181, 213, 211, 0);
    border-radius: 15px;
    opacity: 0;

    animation: wrapper-qrcode .5s ease-in forwards;
}
@keyframes wrapper-qrcode{
    0%{
        width: 0%;
        opacity: 0;
    }50%{
        opacity: 0;
    }75%{
        opacity: .25;
    }100%{
        width: 20%;
        opacity: 1;
    }
}
.qrcode{
    opacity: 0;
    animation: qrcode .5s ease-in .75s forwards;
}
@keyframes qrcode{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}

/* Authenticator */
.wrapper_chi_authenticator{
    display: grid;
    text-align: center;
    grid-column-start: 3;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    opacity: 0;
    z-index: 3;

    animation: wrapper_chi_authenticator .75s ease-out .45s forwards;
}
@keyframes wrapper_chi_authenticator{
    0%{
        transform: translate(0px, 10px);
        opacity: 0;
    }100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.authenticator_Box p{
    display: inline;
    font-weight: 900;
    color: #d9d4e4;
    margin: 0 10px;
}
.second-ef{
    position: absolute;
    margin: -25px 0 0 42px;
    z-index: -1;
    animation: second-ef 1s ease-in 1.5s forwards;
}
@keyframes second-ef{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
#check{
    position: absolute;
    top: -4%;
    left: 81%;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 50px;
    color: rgb(220, 254, 255);
    cursor: default;
    z-index: 6;

    animation: check .001s ease-in 21s 1 forwards;
}
@keyframes check{
    0%{
        opacity: 0;
        left: 81%;
    }90%{
        opacity: 0;
    }100%{
        opacity: 1;
        left: 82%;
    }
}
.raindrop{
    position: absolute;
    width: 100px;
    height: 100px;
    top: -27.5%;
    left: -21.5%;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-sizing: border-box;
    transform: scale(0);
    z-index: 2;
}
.ra-1{
    border: 100px solid rgba(53, 231, 255, 0.75);
}
.ra-2{
    border: 110px solid rgba(84, 164, 201, 0.65);
}
.ra-3{
    border: 120px solid rgba(116, 152, 230, 0.6);
}
.aut-inp{
    height: 28px;
    width: 190px;
}
.aut-pos-log-btn{
    position: absolute;
    top: -66px;
    padding: 10px 15px;
    opacity: 0;

    animation: aut-pos-log-btn .75s ease-in-out .75s forwards;
}
@keyframes aut-pos-log-btn{
    0%{
        left: -20px;
        opacity: 0;
    }100%{
        left: -10px;
        opacity: 1;
    }
}
.pos-resertaut-btn{
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 14px;
    padding: 9px 10px 7px 10px;
}

/* Bg */
.bg_wrapper{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: -1;

    animation: bg_wrapper .5s ease-in-out forwards;
}
@keyframes bg_wrapper{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.bg_mask{
    width: 100%;
    height: 100%;
    background: radial-gradient(rgb(0, 70, 110),rgba(0, 3, 5, 0));
    mix-blend-mode: darken;
    /* mix-blend-mode: screen; */

    animation: bg_mask 15s ease-in-out infinite;
}
@keyframes bg_mask{
    0%{
        filter: hue-rotate(15deg);
    }50%{
        filter: hue-rotate(-15deg);
    }100%{
        filter: hue-rotate(15deg);
    }
}

/* swal */
.swal2-popup{
    width: 600px !important;
    height: 340px !important;
    border: 1px solid #00a4b4 !important;
    border-radius: 8px !important;
    background: linear-gradient(-45deg, #00000080, #00000080, #00000080) !important;
    backdrop-filter: blur(5px);
}

/* .wait_unlock, */
#foreven_lock,
#wait_unlock{
    display: grid;
    flex-direction: row;
    grid-template-columns: 30% 70%;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    align-items: center;
    padding-right: 30px;
    width: 400px;
    height: 200px;
    margin: 0 0 0 37px;
    font-family: 'Maven Pro';
    font-size: 14px;
    color: rgb(255, 135, 150);
    border: 2px solid rgb(255, 67, 89);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 35px;
    outline: none;
    z-index: 0;
    transition: ease-in .25s;
}
.foreven_lock,
.wait_unlock{
    opacity: 0;

    animation: foreven_lock_and_wait_unlock 2s ease-in-out forwards;
}
@keyframes foreven_lock_and_wait_unlock{
    0%{
        height: 0px;
        opacity: 0;
        border-color: rgba(255, 67, 89, 0);
        box-shadow: rgba(255, 77, 116, 0) 0 0 0 0;

    }50%{
        height: 200px;
        opacity: 1;
        border-color: rgba(255, 67, 89, 0.75);
        box-shadow: rgb(255, 77, 116) 0 0 0 0;
    }100%{
        height: 200px;
        opacity: 1;
        border-color: rgb(255, 67, 89);
        box-shadow: rgb(255, 77, 116) 0 0 30px 0;
    }
}
.foreven_lock_effect,
.wait_unlock_effect{
    width: 400px;

    animation: foreven_lock_effect_and_wait_unlock_effect 5s ease-in-out infinite;
}
@keyframes foreven_lock_effect_and_wait_unlock_effect{
    0%{
        box-shadow: rgb(255, 77, 116) 0 0 30px 0;
    }40%{
        box-shadow: rgba(255, 77, 116, 0.75) 0 0 100px 0;
    }60%{
        box-shadow: rgba(255, 77, 116, 0.75) 0 0 100px 0;
    }100%{
        box-shadow: rgb(255, 77, 116) 0 0 30px 0;
    }
}
.foreven_lock_icon_wrap,
.wait_unlock_icon_wrap{
    text-align: center;
}
.foreven_lock_icon,
.wait_unlock_icon{
    width: 52px;
    opacity: 0;

    animation: foreven_lock_icon_and_wait_unlock_icon .5s ease-in-out 1s forwards;
}
@keyframes foreven_lock_icon_and_wait_unlock_icon{
    0%{
        transform: translate(0px, 3px);
        opacity: 0;
    }100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.foreven_lock_icon_path_1,
.wait_unlock_icon_path_1,
.wait_unlock_icon_path_2{
    fill: #47454e;
}
.foreven_lock_icon_path_2,
.foreven_lock_icon_path_3,
.wait_unlock_icon_path_3{
    animation: foreven_lock_icon_path_and_wait_unlock_icon_path 2s ease-in-out infinite;
}
@keyframes foreven_lock_icon_path_and_wait_unlock_icon_path{
    0%{
        fill: #ff9aa6;
    }50%{
        fill: #815c62;
    }100%{
        fill: #ff9aa6;
    }
}
.wait_unlock_icon{
    width: 52px;
}
.foreven_lock-content,
.wait_unlock-content{
    opacity: 0;

    animation: foreven_lock-content_and_wait_unlock-content .5s ease-in-out 1s forwards;
}
@keyframes foreven_lock-content_and_wait_unlock-content{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.wait_unlock-content{
    transform: translate(0px, 5px);
}
.wait_unlock-content_p_wrap{
    display: flex;
    justify-content: end;
    align-items: center;
}
.wait_unlock-content_p{
    font-weight: 600;
    color: #d9d4e4;
}
.swal2-styled.swal2-confirm {
    font-size: 1.0625em !important;
    font-weight: 600 !important;
    height: 50px;
    color: rgb(3, 13, 14) !important;
    box-shadow: inset 0 0 3px 1px #637b9e !important;
    background: #47636d !important;
    border-radius: 7px !important;
    border: 2px solid #2e4c50 !important;
    outline: none;
    cursor: pointer;
    transition: .125s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.swal2-styled.swal2-confirm:hover{
    color: rgb(255, 255, 255) !important;
    border-color: rgb(127, 208, 228) !important;
    box-shadow: 0 0 0 1em transparent !important;
    background: #3f5a64;
    text-shadow:
        .0vw 0vw .25vw rgb(216, 255, 253), .0vw 0vw .25vw rgb(216, 255, 253),
        .0vw 0vw   0vw rgb(87, 242, 229), .0vw 0vw  0vw rgb(87, 242, 229),
        .0vw 0vw   5vw rgb(11, 124, 229), .0vw 0vw  10vw rgb(11, 124, 229);
}
.swal2-styled.swal2-confirm:active{
    color: rgba(106, 144, 153, 0.6) !important;
    box-shadow:  0 0 0 0 transparent !important;
    background: rgb(32, 58, 68) !important;
    border-color:rgba(176, 239, 255, 0.2) !important;
    text-shadow: 0 0 0 rgb(82, 206, 255);
    transition: ease-in .05s !important;
}
.swal2-icon.swal2-warning{
    color: #ffd3ae !important;
    border: 2px solid;
    border-color: #ff983f !important;
    background: #352718;
    opacity: 0;

    animation: swal2-icon_swal2-warning 0.35s cubic-bezier(0.42, 0, 0.07, 1.93) forwards;
}
@keyframes swal2-icon_swal2-warning{
    0%{
        transform: scale(0);
        opacity: 0;
    }100%{
        transform: scale(1);
        opacity: 1;
    }
}
.swal2-icon.swal2-warning::before {
    transform: scale(0.75);
    opacity: 0;

    animation: swal2-icon_swal2-warning_before 0.25s cubic-bezier(0.47, -0.08, 0.22, 2.22) .325s forwards;
}
@keyframes swal2-icon_swal2-warning_before{
    0%{
        transform: scale(0.75) rotate(60deg);
        opacity: 0;
    }100%{
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.container{
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.text{
    font-weight: 100;
    font-size: 28px;
    color: #fafafa;
}
.img_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1;
    z-index: -1;

    /* animation: img_bg 120s linear infinite; */
}
@keyframes img_bg{
    0%{
        transform: rotate(0deg) scale(1);
    }50%{
        transform: rotate(30deg) scale(2);
    }100%{
        transform: rotate(0deg) scale(1);
    }
}