@charset "utf-8";
#app{opacity: 0;visibility: hidden;transition: 1s;overflow: hidden;}
.vidoes{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; transition: 1s;}
.vidoes video{ width: 100%; height: 100%; object-fit: cover;}

.vidoes.hide{ opacity: 0; visibility: hidden;}
#app.show{ opacity: 1; visibility: visible;}

.loadings{position: relative;top: 0;right: 0;bottom: 0;left: 0;width: 100vw;height: 100vh;z-index: 10;}
.loadings .bg0{width: 50vw;height: 50vw;position: absolute;top: -35vw;left: -41vw;opacity: .9;}
.loadings .bg0[data-aos=fade-up-left] { transform: translate3d(25vw, 25vw, 0);}
.loadings .bg0[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}
.loadings .bg0 .bg{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #e2efec;border-radius: 40%;animation: roted 15s linear infinite;}
.loadings .bg1{position: absolute;left: 50%;bottom: -4vh;transform: translateX(-50%);margin-left: -41vw; width: 1.59rem; max-width: 8.28125vw;}
.loadings .bg2{position: absolute;left: 50%;bottom: -4vh;transform: translateX(-50%);margin-left: -34vw; width: .7rem; max-width: 3.65vw;}
.loadings .bg3{position: absolute;left: 50%;bottom: -4vh;transform: translateX(-50%);margin-left: -28.5vw; width: 1.35rem; max-width: 7.03125vw;}
.loadings .bg4{position: absolute;left: 50%;bottom: -4vh;transform: translateX(-50%);margin-left: -13.5vw; width: 4.18rem; max-width: 21.8%;}

.loadings .bg1-2-3-4 div:nth-child(2n){ animation: animateShow 10s ease-in-out infinite;opacity: 1}
.loadings .bg1-2-3-4 div:nth-child(odd){ animation: animateShow2 10s ease-in-out infinite;opacity: .3}

@keyframes animateShow {
    25% {
        opacity: .3
    }

    75% {
        opacity: .3
    }

    50%,to {
        opacity: 1
    }
}

@keyframes animateShow2 {
    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    50%,to {
        opacity: .3
    }
}

.loadings .bg5{width: 100%;height: 100vh;position: absolute;right: 0;bottom: 0;}
.loadings .bg5 img{object-fit: cover;position: absolute;top: 0;left: 46%;height: 120%;max-height: inherit;}
.loadings .bg5 img.i2{ opacity: 0}
.loadings .bg6{width: 100%;height: 100vh;background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/flower1ss.png) right bottom no-repeat; background-size: auto 100%;position: absolute;right: 0;bottom: 0; }
.loadings .bg6 img{position: absolute;right: 18vh;top: 24.5vh;height: 28vh;}
.loadings .bg7{width: 100%;height: 100vh;background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/flower2ss.png) right bottom no-repeat;background-size: auto 100%;position: absolute;right: 0;bottom: 0;}
.loadings .bg7 img{position: absolute;right: 81vh;top: 52.5vh;height: 29vh;}

.balloon1{animation: balloon1 5s ease-in-out infinite;transform-origin: right top;}
.balloon2{animation: balloon2 5s ease-in-out infinite;transform-origin: right 90%;}

@keyframes balloon1{
    0%,100%{
        -webkit-transform:rotate(-3deg)
    }
    50%{
        -webkit-transform: rotate(3deg)
    }
}

@keyframes balloon2{
    0%,100%{
        -webkit-transform:rotate(-3deg)
    }
    50%{
        -webkit-transform: rotate(3deg)
    }
}

.loadings .bg8{width: 100%;height: 100vh;background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/dongmen.png) right bottom no-repeat; background-size: auto 100%;position: absolute;right: 0;bottom: 0; }
.loadings .bg9{width: 100%;height: 100vh;background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/load_line1.png) left bottom no-repeat;background-size: 100% auto;position: absolute;left: 0;bottom: 0;}
.loadings .bg10{width: 100%;height: 100vh;background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/load_line2.png) right bottom no-repeat; background-size: 100% auto;position: absolute;right: 0;bottom: 0; }

.loadings .content{position: absolute;left: 0;top: 0;width: 100vw;height: 100vh;align-items: center;padding: 0 5.2vw;justify-content: flex-start;}
.loadings .content .box{/* width: 100%; */align-items: center;margin: 0 0 4vw;flex-wrap: nowrap;}
.loadings .content .box .left{ width: 1.16rem; max-width: 6.042vw; margin: 0 2.5vw 0 0;}
.loadings .content .box .left .i2{ display: none;}
.loadings .content .box .right .ico{width: 4.86rem;max-width: 25.3125vw;opacity: 0;visibility: hidden;transition: 1s;margin: 0 auto;}
.loadings .content .box .right .ico.on{ opacity: 1; visibility: visible;}
.loadings .content .box .right .ico svg{ width: 100%}

.loadt1{width: 5.8rem;display: grid;grid-template-columns: 1fr 1fr;grid-gap: .1rem .15rem;margin: 2.5vw auto;}
.loadt1 li{ min-width: 0;}
.loadt1 .a{font-size: .24rem;color: #333;height: .6rem;border: #c5c5c5 2px solid;align-items: center;justify-content: center;border-radius: 50vw;position: relative;z-index: 1;transition: .6s cubic-bezier(.38,0,0,1);background: #fff;}
.loadt1 i{display: block;position: relative;width: .13rem;height: .23rem;margin: 0 0 0 .15rem;}
.loadt1 i:before{ content: ""; position: absolute; width: 100%; height: 100%; background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/loadt1_b1.svg) center no-repeat; background-size: cover; transition: .6s cubic-bezier(.38,0,0,1);}
.loadt1 i::after{ content: ""; position: absolute; width: 100%; height: 100%; background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/loadt1_b2.svg) center no-repeat; background-size: cover; transition: .6s cubic-bezier(.38,0,0,1); opacity: 0;}

.bg1-2-3-4{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.loadings .content .box .cls-1{fill:#bd9f68;}
.loadings .content .box .cls-2,.loadings .content .box .cls-3,.loadings .content .box .cls-4{fill:none;stroke:#c8161d;stroke-miterlimit:10;}
.loadings .content .box .cls-2,.loadings .content .box .cls-4{stroke-width:4px;}
.loadings .content .box .cls-3{stroke-width:3px;}
.loadings .content .box .cls-4{stroke-linecap:round;}
.loadings .content .box .cls-5{fill:#c8161d;}

.loadings .content .box .cls-1, .loadings .content .box .cls-5{opacity: 0;transition: opacity .75s cubic-bezier(0.4, 0, 1, 1), transform 1s ease;transition-delay: .5s;transform: translateY(.5rem);}
.loadings .content .box .ico.on .cls-1, .loadings .content .box .ico.on .cls-5{opacity: 1;transform: translateY(0);}

@media(min-width: 769px){
    .loadt1 .a:hover{ border: #c7161f 2px solid; background: #c7161f; color: #fff;}
    .loadt1 .a:hover i::before{ opacity: 0;}
    .loadt1 .a:hover i::after{ opacity: 1;}
}
@media(max-width: 1024px){
    .loadings .content{align-items: flex-start;max-width: 100%;}
    .loadings .content .box{flex-direction: column;align-items: center;margin: 5vh 0;width: 100%;}
    .loadings .content .box .left .i1{ display: none;}
    .loadings .content .box .left .i2{ display: block;}

    .loadings .bg5{/* background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/load_b3.png) right bottom no-repeat; *//* background-size: 92% auto; */}
    .loadings .bg5 img{/* display: none; */height: auto;width: 156vw;top: auto;bottom: -20vw;left: 0;max-width: inherit;}
    .loadings .bg6{background-size: 42% auto;bottom: 0;}
    .loadings .bg6 img{top: auto;right: 14vw;height: auto;width: 26vw;bottom: 42vw;}
    .loadings .bg7{background-size: 94% auto;}
    .loadings .bg7 img{top: auto;right: 74vw;height: auto;width: 20vw;bottom: 16vw;}
    .loadings .bg8{background-size: 100% auto;right: -16vw;width: 108%;}
    .loadings .bg9{background-size: auto .06rem;}
    .loadings .bg10{background: url(https://www.sjtu.edu.cn/resource/assets/img/xiaoqing/load_line2.png) 26% bottom no-repeat;background-size: auto .06rem;}

    .loadings .content .box .left{width: 30vw;max-width: inherit;margin: 0 0 8vw;}
    .loadings .content .box .right{display: flex;flex-direction: column;align-items: center;}
    .loadt1{width: 100%;grid-template-columns: repeat(1, 1fr);margin: 8.5vw auto;}
    .loadings .content .box .right .ico{width: 55vw;max-width: inherit;}
    .loadt1 .a{height: .5rem;font-size: .2rem;padding: 0 .3rem;justify-content: space-between;border: #c5c5c5 1px solid;}
    .loadt1 i{ transform: scale(.7)}

    .loadings .bg0{top: -29vw;left: -38vw;}

    .loadings .bg1{width: 14vw;max-width: inherit;bottom: 34vh;margin-left: -38vw;}
    .loadings .bg2{width: 12vw;max-width: inherit;bottom: 21vh;margin-left: -43vw;}
    .loadings .bg3{width: 14vw;max-width: inherit;bottom: 19vh;}
    .loadings .bg4{width: 70vw;max-width: inherit;bottom: 10vh;margin-left: -46vw;}

    .loadt1 li:nth-child(1) .a{ border: #c7161f 2px solid; background: #c7161f; color: #fff;}
    .loadt1 li:nth-child(1) .a i::before{ opacity: 0;}
    .loadt1 li:nth-child(1) .a i::after{ opacity: 1;}

    .loadings .bg5 img.i1{ opacity: 0}
    .loadings .bg5 img.i2{ opacity: 1}

    .vidoes{ display: none;}
    #app{ opacity: 1 !important; visibility: visible !important;}
}