[v-cloak] {
    display: none !important;
}

/*skeleton*/
.skeleton_1{
    background-color: #f6f6f6;
    position: fixed;
    top: 0rem;
    right: 0rem;
    bottom: 0rem;
    left: 0rem;
    display: flex;
    justify-content: space-evenly;
}

.skeleton_1 .general {
    width: 100%;
    background-color: #fff;
}

.skeleton_1 .general .image1 {
    height: 5rem;
}

.skeleton_1 .general .image2 {
    height: 10rem;
}


.skeleton_1 .general .form {
    height: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .5rem;
    border-radius: .5rem;
}

.skeleton_1 .general .form .ipt{
     height: 1rem;
     width: 90%;
     background-color: #FFF;
     margin-top: .5rem;
     border-radius: .5rem;
 }

.skeleton_1 .general .form .btn{
    height: 1rem;
    width: 80%;
    margin-top: .5rem;
    border-radius: .5rem;
    background-color: #d7dad3;
}

.skeleton_1 .general .image1,
.skeleton_1 .general .image2,
.skeleton_1 .general .form {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #ededed;
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s skeleton_1_loading ease-in-out infinite;
}

@keyframes skeleton_1_loading {
    to {
        background-position-x: -20%;
    }
}

/*loading*/
.loading_9{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000;
    z-index: 3;
    opacity: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading_9 .loadBox .loaderContentBox {
    color: white;
    font-size: .5rem;
    overflow: hidden;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    transform: translateZ(0);
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: loading_9_loadBox 1.7s infinite ease, loading_9_round 1.7s infinite ease;
}

@keyframes loading_9_loadBox {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
        -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
        -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes loading_9_round {
    0% {
        transform: rotate(0deg); /* 开始旋转 div 元素 */
    }

    100% {
        transform: rotate(360deg); /* 结束旋转 div 元素 */
    }
}


/*toast*/
.toast_6{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0);
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toast_6 .toast-container{
    max-width: 80%;
    background-color: rgba(0,0,0,.8);
    text-align: center;
    padding: 0.2rem;
    border-radius: .3rem;
}

.toast_6 .toast-container span{
    color: white;
    font-size: .5rem;
}

/*save*/
.save_7{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.save_7 .save-container,
.save_7 .rec-container{
    width: 80%;
    position: relative;
}

.save_7 .save-container img:nth-child(1){
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    top: -0.5rem;
    right: 0rem;
}

.save_7 .rec-container{
    background-color: #fff;
    padding: 0rem .2rem;
    border-radius: .1rem;
}

.save_7 .rec-container span{
    display: block;
    width: 100%;
    text-align: center;
    margin:.3rem 0rem;
    font-size: .3rem;
    font-weight: bold;
}

.save_7 .rec-container button{
    display: block;
    width: 2.5rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    margin:.2rem auto;
    font-size: .3rem;
    border-radius: .3rem;
    background-color: #ff6a00;
    color: #fff;
    font-weight: bold;
}

.save_7 .rec-container button{
    animation: save_7_btnTrans .8s infinite linear;
}

@keyframes save_7_btnTrans {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/*protocol*/
.protocol_10{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.protocol_10 .protocol-container{
    width: 6rem;
    height: 10rem;
    border-radius: 0.25rem;
    background-color: #fff;
    position: relative;
    text-align: center;
}

.protocol_10 .protocol-container .protocol-box .title-bar{
    border-radius: 0.25rem 0.25rem 0 0;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: .3rem;
}

.protocol_10 .protocol-container .protocol-box .content{
    height: 9rem;
    width: 90%;
    margin: 0 auto;
    overflow: scroll;
    text-align:left;
}

.protocol_10 .protocol-container img{
    position: absolute;
    width: .5rem;
    height: .5rem;
    margin-left: -.25rem;
    bottom:-1rem
}

.protocol-modal{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-protocol-box {
    width: 80%;
    padding-bottom: 2rem;
}

.modal-box{
    width: 100%;
    background: #fff;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #333;
    padding-bottom: 0.3rem;
}

.modal-title {
    margin-top: 0.3rem;
    font-size: 0.3rem;
    font-weight: bold;
}

.modal-content {
    width: 85%;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.25rem;
}

.modal-a {
    color: #3285ff;
}

.modal-btn {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.modal-cancel {
    width: 40%;
    padding: 0.1rem;
    border: 1px solid #ff5f42;
    color: #ff5f42;
    border-radius: 0.3rem;
    text-align: center;
}

.modal-ok {
    width: 40%;
    padding: 0.1rem;
    background: #ff5f42;
    color: #fff;
    border-radius: 0.3rem;
    text-align: center;
}

.scroll-animate{
    animation: scrollUpwards 1s ease-in-out;
}


@keyframes scrollUpwards {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

.scrool-txt {
    width: 80%;
    height: 100%;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    margin-left: 0.6rem;
    z-index: 0;
    overflow: hidden;
}

.scrool-txt-box {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: .3rem;
    color: #999;
    z-index: 0;
    overflow: hidden;
}

.form_12 .form-container .scroll-bar .scroll-bar-container span{
    width: auto !important;
}

.form-box {
    margin-bottom: 0 !important;
    padding-bottom: 0.15rem !important;
}

.protocol-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.kf-btn {
    width: 0.9rem;
    height: 0.9rem;
    position: fixed;
    right: 0.2rem;
    top: 60%;
}

.kf-modal-box {
    width: 75%;
    border-radius: 0.1rem;
    background: #fff;
    position: relative;
}

.kf-modal-box .title {}

.kf-modal-box .content {
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kf-modal-box .btn {
    width: 100%;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kf-modal-box .btn .cancel {
    font-size: 0.25rem;
    height: 100%;
    width: 50%;
    color: #333;
    border-top: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kf-modal-box .btn .ok {
    color: rgb(227, 60, 80);
    border-right: 0;
}