@charset "UTF-8";
html,
body {
    width: 100%;
    height: 100%;
}

#tenpay_txt {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 999;
    pointer-events: none;
}

#tenpay_txt .loading_box {
    background-color: #274770;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.loading_case {
    position: fixed;
    background-color: #fff;
    border-radius: 100%;
    font-family: 'BrownStd-Bold';
    width: .3rem;
    height: .3rem;
    right: 101%;
    top: 50%;
    transform: translate(50%, -50%) translateZ(0);
    animation: roundCome 2s ease 0s 1 forwards;
}

.loading_case .load_v_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    height: 50vh;
    width: 800px;
    overflow: hidden;
    opacity: 0;
    animation: vO .1s ease 1.5s 1 forwards;
}

.loading_case .loading_text {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    font-size: 0;
    text-align: center;
    animation: textOur 2s cubic-bezier(0, 0.31, 0.25, 1) 3.4s 1 forwards;
}

.loading_case .loading_text > div {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: .3rem;
    color: #274770;
}

.loading_case .loading_text > div:first-child {
    z-index: 2;
}

.loading_case .loading_text > div.load_text_box {
    animation: textCome 1s ease 2.3s 1 forwards;
    overflow: hidden;
    z-index: -1;
}

.loading_case .loading_text > div .shade_blaxk {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: #fff;
    height: 100%;
    width: .23rem;
    z-index: 2;
    animation: opCome .2s ease 2.1s 1 forwards;
}

.loading_case .loading_text .load_wz_box {
    position: absolute;
    width: 4.33rem;
    height: 100%;
    right: 0;
    top: 0;
    overflow: hidden;
    animation: textComeNei 1s ease 2.4s 1 forwards;
}

.loading_case .loading_text .load_wz {
    position: absolute;
    right: 0;
    top: 0;
    width: 4.33rem;
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
}

.loading_case .loading_text .load_wz.load_zw {
    opacity: 0;
    position: relative;
}

.loading_case .sha_case {
    position: absolute;
    width: 100%;
    left: 100%;
    top: 50%;
    transform: translate(0, -50%) translateZ(0);
    text-align: center;
    animation: logoCome 1s cubic-bezier(0, 0.3, 0.76, 1.15) 1.5s 1 forwards;
}

.loading_case .sha_case .sha_logo {
    width: 160px;
    display: block;
    font-size: 0;
    margin: 0 auto;
    margin-bottom: 10px;

}

.loading_case .sha_case .sha_logo > div {
    font-size: 0;
}

.loading_case .sha_case .sha_logo div:first-child {
    position: relative;
    margin-bottom: 5px;
}

.loading_case .sha_case .sha_logo div:first-child span {
    position: relative;
    animation: logoShake .6s cubic-bezier(0.25, 0.1, 0.88, 0.56) 2.6s 1 forwards;
}

.loading_case .sha_case .sha_logo span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    border: 6px solid #274770;
    border-radius: 100%;
    width: 30px;
    height: 30px;
}

.loading_case .sha_case .sha_name {
    font-family: 'BrownStd-Regular';
    /*font-size: .2rem;*/
    display: block;
    position: relative;
    overflow: hidden;
    width: 150px;
    text-align: center;
    margin: 0 auto;
    height: 58px;
}

.loading_case .sha_case .sha_name .sha_zw {
    opacity: 0;
    display: none;
}

.loading_case .sha_case .sha_name .kh_name {
    position: relative;
    left: 0;
    top: 0;
    height: 0;
    white-space: nowrap;
    animation: khName 1.5s ease-in-out 2s 1 forwards;
    overflow: hidden;
}

.sha_name img {
    display: block;
    width: 150px;
    max-width: none;
}

.loading_case .sha_case .sha_name .kh_name .sha_show {
    width: .3rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
    /* 标准的语法 */
    animation: opOut .1s ease-in-out 4s 1 forwards;
}

@keyframes vO {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes roundCome {
    0% {
        top: 50%;
        right: 101%;
    }
    50% {
        right: 50%;
        width: .3rem;
        height: .3rem;
    }
    100% {
        top: 50%;
        right: 50%;
        width: 150vw;
        height: 150vw;
    }
}

@keyframes opCome {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes textCome {
    0% {
        margin-left: -.23rem;
        width: 4.56rem;
    }
    100% {
        width: 2.31rem;
        padding-left: .23rem;
        margin-left: -.23rem;
    }
}

@keyframes textComeNei {
    0% {
        width: 4.33rem;
    }
    100% {
        width: 2.07rem;
    }
}

@keyframes textOur {
    0% {
        left: 50%;
        transform: translate(-50%, -50%) translateZ(0);
    }
    100% {
        left: 0;
        transform: translate(-100%, -50%) translateZ(0);
    }
}

@keyframes logoCome {
    0% {
        left: 100%;
        transform: translate(0, -50%) translateZ(0);
    }
    100% {
        left: 50%;
        transform: translate(-50%, -50%) translateZ(0);
    }
}

@keyframes logoShake {
    0% {
        transform: translate(0, 0) translateZ(0);
    }
    50% {
        transform: translate(-10px, 0px) translateZ(0);
    }
    100% {
        transform: translate(0, 0) translateZ(0);
    }
}

@keyframes khName {
    0% {
        height: 0;
        width: 0;
    }
    40% {
        height: 13px;
        width: 0;
    }
    100% {
        width: 100%;
        height: 100%;
    }
}

@keyframes opOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@media all and (max-width: 1024px) {
    @keyframes roundCome {
        10% {
            right: 90%;
        }
        11% {
            right: 88%;
            top: 45%;
        }
        12% {
            top: 50%;
            right: 86%;
        }
        20% {
            right: 75%;
            top: 50%;
        }
        50% {
            width: .3rem;
            height: .3rem;
            right: 50%;
            top: 50%;
        }
        100% {
            top: 50%;
            right: 50%;
            width: 150vh;
            height: 150vh;
        }
    }


}