@charset "utf-8";

.banner_box{padding: 0px;position: relative;z-index: 3;overflow: hidden;}
.banner{ overflow: hidden; }
.banner:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);z-index: 1;height: 23vh;opacity: .6;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; transform: scale(1);}
.banner .imgBox .img{ transition: 0s; transform: scale(1) !important;  padding-bottom:36%;}
.banner .imgBox .img video{ opacity: 1;}

.banner .dots{position: absolute;right: 0;left: 0;bottom: .4rem;z-index: 2;justify-content: center;align-items: center;}
.banner .dots span{width: .12rem;height: .12rem;background: none;font-size: .16rem;color: #fff;opacity: .4;margin: 0 .12rem !important;position: relative;z-index: 1;background: #fff;}

.banner .dots span.active{ opacity: 1}

.tit1{ align-items: flex-end; margin-bottom: .6rem;}
.tit1 .ll{padding: 0 0 .08rem;}
.tit1 .ll h6{ font-size: .3rem; color: #0056A8; font-family: 'Alibaba PuHuiTi 3.0 Regular';}
.tit1 .ll h6 font{ color: #D12712}
.tit1 .ll h3{font-size: .34rem;color: #333;line-height: 1;margin: .08rem 0 0;}
.tit1 .ll h3 img{ width: .36rem; margin: 0 0 0 .08rem;}
.tit1 .cc{flex: 1;margin: 0 0 .2rem -1.1rem;height: 1px;border-bottom: 1px dashed rgba(0,86,168,.3);}
.tit1 .hd{align-items: center;position: relative;}

.pad1{ padding: 1rem 0; overflow: hidden;}

.lt1{ margin: 0 5vw 0 0;}
.lt1 li{ margin: 0 .3rem 0 0;}
.lt1 .a{ display: flex; width: 1.22rem; height: .4rem; align-items: center; justify-content: center; border: 1px solid rgba(0,86,168,.5); border-radius: 50vw; font-size: .2rem; color: #0056A8; transition: .5s;}
.lt1 li.on .a{ border: 1px solid #FDA700; background: #FDA700; color: #fff;}

.more1{ font-size: .18rem; color: #0056A8; transition: .5s;}
.more1 img{ width: .25rem; margin: 0 .1rem 0 0;}

.slides .more1{ display: none;}
.slides .more1.on{ display: block;}

.index1{ background: rgba(0,86,168,.1) url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/index1_b.jpg") center no-repeat; background-size: cover;}
.index1 .content{ align-items: flex-start}
.index1 .content .left{ width: 8.2rem; position: relative; z-index: 2;}
.index1 .content .left::before{content: "";position: absolute;right: 0;bottom: 0;left: calc((100vw - 16rem)/2*-1);height: 5.68rem;background: url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/list1_b1.jpg") center no-repeat;background-size: cover;pointer-events: none;box-shadow: 0px 6px 15px 0px rgba(0, 86, 168, 0.3288);}

.index1 .content .right{ width: calc(100% - 8.2rem);}

.list1Box{width: calc(100% + .48rem);}
.list1 .a{display: block;padding: .2rem 0 0;position: relative;}
.list1 .imgBox .img{ padding-bottom: 58.76%;}
.list1 .time{position: absolute;top: 0;left: .32rem;width: .9rem;height: 1.02rem;background: #E26B1D;display: flex;flex-direction: column;z-index: 1;justify-content: center;align-items: center;}
.list1 .time h3{font-size: .4rem;color: #fff;font-weight: normal;font-family: Impact;}
.list1 .time h6{font-size: .14rem;color: #fff;margin: .02rem 0 0;}
.list1 .txt{height: 1.4rem;align-items: center;padding: 0 .9rem 0 0;}
.list1 h4{font-size: .2rem;color: #fff !important;}
.list1 .txt .ll{ width: calc(100% - 1.4rem)}
.list1 p{color: rgba(255,255,255,.7);margin: .12rem 0 0;}
.list1 .txt .arrow2{width: 1rem;}

.index2{ background: url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/index2_b.jpg") center no-repeat; background-size: cover;}

.arrow2{justify-content: space-between;align-items: center;}
.arrow2 .arrow{font-family: 'lib';font-size: .3rem;color: #fff;cursor: pointer;}

.list2{margin: 0;}
.list2 .a{display: flex;flex-direction: column;padding: 0 0 0 1.24rem;position: relative;z-index: 1;justify-content: center;height: 0.7rem;/* transition: .36s; */}
.list2 .a::before{content: "";position: absolute;top: 50%;right: calc((100vw - 16rem)/2*-1);height: 0;left: 0;background: #0056A8;background-size: cover;z-index: -1;pointer-events: none;/* transition: .5s; */box-shadow: 0px 6px 15px 0px rgba(0, 86, 168, 0.3288);transform: translateY(-50%);opacity: 0;}
.list2 h4{ transition: 0s}
.list2 p{ display: none; transition: 0s}
.list2 li{padding-bottom: .15rem;}
.list2 li h6{justify-content: space-between;align-items: center;margin: .12rem 0 0; transition: 0s}
.list2 li h6 hr{flex: 1;border-top: 1px dashed rgba(0, 0, 0, 0.1);background: none;margin: 0 .3rem 0 0;}

.list2 li:last-child{margin-bottom: 0;padding-bottom: 0 !important;}

.lt3 ul{ margin: 0 -.26rem;}
.lt3 li{ width: 33.33%; padding: 0 .26rem; margin-bottom: .6rem;}
.lt3 .a{height: 1.26rem;align-items: center;position: relative;z-index: 1;padding: 0 .28rem;}
.lt3 .a::before{content: "";position: absolute;top: 0;right: .08rem;bottom: 0;left: 0;background: #0056A8;z-index: -1;transform: translate(.08rem, .08rem);transition: .5s;}
.lt3 .a::after{content: "";position: absolute;top: 0;right: .08rem;bottom: 0;left: 0;border: 1px solid rgba(0, 86, 168, 0.2589);z-index: -1;background: #fff;transition: .5s;}
.lt3 .time{text-align: center;margin: 0 .4rem 0 0;position: relative;}
.lt3 .time:before{content: "";position: absolute;width: 1px;height: .6rem;background: #0056A8;opacity: .2;right: -.2rem;top: 50%;transform: translateY(-50%);}
.lt3 .time h3{font-size: .32rem;color: #0056A8;font-weight: normal;line-height: 1;}
.lt3 .time h6{font-size: .14rem;color: #0056A8;font-weight: normal;margin: .07rem 0 0;}
.lt3 .txt{ flex: 1; overflow: hidden}

.lt3Box .dots{justify-content: center;align-items: center; margin: .2rem 0 0;}
.lt3Box .dots span{width: .12rem;height: .12rem;background: none;font-size: .16rem;color: #fff;opacity: 1;margin: 0 .075rem !important;position: relative;z-index: 1;background: rgba(0,86,168,.45);}

.lt3Box .dots span.active{ background: #FDA700;}

.index3 .fl1{ padding-top: .15rem; background: url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/index3_b.png") center top no-repeat; background-size: 100% auto !important; height: 10rem;}
.index3 .tit1{margin-bottom: .4rem;}

.slides2 .hd{width: calc(100% - 8.95rem);position: relative;z-index: 2;margin-bottom: -.5rem;}
.slides2 .hd ul li .a{ display: block; padding: 0 .4rem; position: relative; font-size: .26rem; color: rgba(255, 255, 255, 0.6);}
.slides2 .hd ul li .a::before{ content: ""; position: absolute; top: 50%; width: 0; height: 1px; background: #fff; left: 0; transition: .5s;}
.slides2 .hd ul li .a::after{ content: ""; position: absolute; top: 50%; width: 0; height: 1px; background: #fff; right: 0; transition: .5s;}

.slides2 .hd ul li.on .a{ color: #fff;}
.slides2 .hd ul li.on .a::before, .slides2 .hd ul li.on .a::after{ width: .2rem;}

.index3 .fl1li{ padding: .62rem 0 .75rem;}

.lt4 .left{ width: calc(100% - 8.95rem - .2rem);}
.lt4 .right{width: 8.95rem;position: relative;z-index: 1; margin: 0 .2rem .2rem 0;}
.lt4 .right:after{content:"";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: rgba(255,255,255,.3);z-index: -1;transform: translate(.2rem, .2rem);}
.lt4 .right:before{content:"";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: rgba(255,255,255,.5);z-index: -1;transform: translate(.1rem, .1rem);}
.lt4 .a{ align-items: center;}
.lt4 .a .left{height: 3.78rem;background: #FDA700;margin: .5rem 0 0;position: relative;z-index: 1;display: flex;align-items: center;padding: 0 .2rem 0 .3rem;}
.lt4 .a .left:before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/index3.jpg") center no-repeat;background-size: cover;z-index: -1;transform: translate(.1rem, -.1rem);}
.lt4 .a .left .txt{padding: 0 .7rem;position: relative;width: 100%;}
.lt4 p{margin: .18rem 0 .35rem;}
.lt4 h6{ color: #0056A8;}

.dots2{justify-content: center;align-items: center;margin: .6rem 0 0;display: flex;}
.dots2 span{width: .12rem;height: .06rem;background: none;font-size: .16rem;color: #fff;opacity: 1;margin: 0 .05rem !important;position: relative;z-index: 1;background: rgba(173,173,173,45%);border-radius: 50vw;}
.dots .active{ background: #0056A8; width: .32rem}

.lt5{ margin: .56rem -.18rem 0;}
.lt5 li{ width: 25%; padding: 0 .18rem;}
.lt5 .imgBox .img{ padding-bottom: 58.87%;}
.lt5 h4{ margin: .25rem 0 0; text-align: center;}

.index4{ padding-top: 0; }
.index4 .content{align-items: flex-start;}
.index4 .left{width: 1.9rem;margin: 0;position: relative;padding: .2rem 0;}
.index4 .right{width: calc(100% - 1.9rem - .2rem);overflow: hidden;padding: .3rem 0 0 .3rem;position: relative;}
.index4 .right::before{content: "";position: absolute;background: #0056A8;width: 1.76rem;height: .1rem;transform: skewX(60deg);transform-origin: right bottom;top: 0;left: 0;}
.index4 .right::after{content: "";position: absolute;background: #0056A8;width: .1rem;height: .8rem;transform: skewY(45deg);transform-origin: left top;top: 0;left: 0;}

.lt6W{overflow: hidden;padding-right: .5rem;margin-right: -.5rem;}
.lt6Box{height: 6rem;padding: .2rem 0;margin: -.2rem 0;padding-right: .88rem;margin-right: -.88rem;}
.lt6 li{ display: flex; justify-content: center; align-items: center;}
.lt6 .a{ display: block; position: relative; width: 1.24rem; z-index: 1;}
.lt6 .a:before{content: "";position: absolute;top: 50%;left: 100%;width: 0;height: 1px;background: #0056A8;opacity: .5;transition: .5s;}
.circle{ transition: .5s; opacity: 0;}
.circle span{width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 50vw;border: #0056A8 1px solid;transform: scale(1);animation: circleScale 3s linear infinite;-webkit-transition: all 0.5s;transition: all 0.5s;z-index: -1;}
.circle span:nth-of-type(2) {
    animation-delay: 1s;
}
.circle span:nth-of-type(3) {
    animation-delay: 2s;
}
@keyframes circleScale {
    0% {
        opacity: .5;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5, 1.5);
    }
}
.lt6 .imgBox{ border-radius: 50vw;}
.lt6 .imgBox .img{ padding-bottom: 100%; background: #0056A8;}
.lt6 .txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: .5s;}
.lt6 h4{ font-size: .3rem; color: #fff !important;}

.lt6 .swiper-slide-thumb-active .imgBox .img img{ opacity: .3;}
.lt6 .swiper-slide-thumb-active .txt{ opacity: 1;}
.lt6 .swiper-slide-thumb-active .circle{ transition: .5s; opacity: 1;}
.lt6 .swiper-slide-thumb-active .a:before{ width: .88rem}

.lt7 .a{ align-items: center;}
.lt7 .imgBox{ width: 4.35rem;}
.lt7 .txt{width: calc(100% - 4.35rem);background: #0056A8 url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/logos.png") 116% -39% no-repeat;background-size: 5rem;padding: .25rem .7rem;flex-direction: column;justify-content: center;align-items: center;min-height: 4.1rem;margin-bottom: .1rem;}
.lt7 .imgBox .img{ padding-bottom: 126.43%;}
.lt7 dl{ width: 100%;}
.lt7 h4{ margin-bottom: .25rem;}
.lt7 h4 big{ font-size: .36rem; color: #fff; border-bottom: #FDA700 .03rem solid; display: inline-block; padding-bottom: .25rem; line-height: 1.25;}
.lt7 h4 small{ font-size: .24rem; color: #fff; margin: 0 0 0 .4rem;}
.lt7 dl dd{ font-size: .2rem; color: #fff; position: relative; padding: 0 0 0 .2rem; display: block; margin: .1rem 0;}
.lt7 dl dd::before{ content: ""; position: absolute; width: .07rem; height: .07rem; background: #fff; border-radius: 50vw; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}

.arrow1{position: absolute; left: 50%;transform: translateX(-50%);z-index: 10;cursor: pointer;}
.arrow1 svg{width: .33rem;height: .13rem;fill: #0056A8;opacity: .5;cursor: pointer;transition: .5s;}
.arrow1.prev{ top: 0}
.arrow1.next{ bottom: 0}

.index3-4{ background: url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/index4.jpg") center bottom no-repeat; background-size: 100% auto;}

.index5{ background: rgba(217,217,217,.35);}
.index5 .left{ width: calc(100% - 9.6rem - .88rem);}
.index5 .right{ width: 9.6rem;}

.lt8 li{ position: relative; z-index: 1; margin-bottom: .35rem;}
.lt8 li::before{content: "";position: absolute;top: 0;right: .2rem;bottom: 0;left: .2rem;border: 1px solid rgba(0,86,168,.3);z-index: -1;transform: skewX(25deg); transition: .5s;}
.lt8 li::after{content: "";position: absolute;top: 0;right: .2rem;bottom: 0;left: .2rem;border: 1px solid rgba(0,86,168,.3);z-index: -1;transform: skewX(-25deg); transition: .5s;}
.lt8 .a{ height: .66rem; align-items: center; justify-content: space-between; padding: 0 .65rem;}
.lt8 h4{ flex: 1;}
.lt8 i{margin: 0 0 0 .3rem;font-size: .28rem;color: #666666;opacity: .4;font-family: 'lib';transition: .5s;}

.lt8 li:last-child{ margin-bottom: 0 !important;}

.lt9Box .imgBox::after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);z-index: 1;height: 23vh;opacity: .6;}
.lt9Box .imgBox .img{ padding-bottom: 59.58333333333333%;}

.lt9Box{ position: relative; z-index: 1;}
.lt9Box .dots{position: absolute;right: 0;left: 0;bottom: .4rem;z-index: 2;justify-content: center;align-items: center;}
.lt9Box .dots span{width: .12rem;height: .12rem;background: none;font-size: .16rem;color: #fff;opacity: .4;margin: 0 .12rem !important;position: relative;z-index: 1;background: #fff;}

.lt9Box .dots span.active{ opacity: 1}

.index6 .content{ background: #fff url("https://www.metalnegro.com/__xh__/osa.swjtu.edu.cn/images/index6.jpg") right bottom no-repeat; background-size: cover; align-items: center; box-shadow: 0px 11px 17px 0px rgba(153, 153, 153, 0.3117); margin: -1.47rem 5.2vw 0; position: relative; z-index: 1;}
.index6 .content .imgBox{ width: 5.28rem;}
.index6 .content .imgBox .img{ padding-bottom: 55.76%;}
.index6 .content .txt{ flex: 1; overflow: hidden; padding: 0 .78rem;}
.index6 h3{ font-size: .28rem; color: #0056A8; margin-bottom: .3rem;}
.index6 .p p{ font-size: .2rem; color: #333; line-height: 1.5; padding: .03rem 0;} 

.arrow3{width: .26rem;height: .26rem;border: 1px solid rgba(0,86,168,.3);border-radius: 50vw;font-size: .2rem;color: rgba(0,86,168,.3);font-family: 'lib';transition: .5s;position: absolute;z-index: 10;top: 50%;transform: translateY(-50%);}
.arrow3.prev1{left: .3rem;}
.arrow3.next1{right: .3rem;}

@media(min-width: 1920px){
    .index3{ background-size: 100% 8.28rem !important;}
}
@media(max-width: 1600px){
    .banner .imgBox .img{ padding-bottom: 30%}
}
@media(min-width: 1024px){
    .list2 li.on{padding-bottom: .38rem;}
    .list2 li.on .a::before{height: 100%;opacity: 1;}
    .list2 li.on .a{height: 1.38rem;}
    .list2 li.on h4{color: #fff;}
    .list2 li.on p{display: block;color: rgba(255, 255, 255, 0.7);line-height: .22rem;max-height: .44rem\0;margin: .1rem 0;}
    .list2 li.on h6{/* order: -1; */margin: 0;color: #fff;}
    .list2 li.on h6 hr{border-top: 1px dashed rgba(255, 255, 255, 0.1);}

    .lt3 .a:hover::after{ border: 1px solid rgba(253, 167, 0, 0.4224);}
    .lt3 .a:hover::before{ background: #FDA700;box-shadow: 0px 5px 15px 0px rgba(253, 167, 0, 0.4723);}

    .lt8 li:hover::before{ background: rgba(253,167,0,.3); border: rgba(253,167,0,.3) 1px solid;}
    .lt8 li:hover::after{ background: rgba(253,167,0,1); border: rgba(253,167,0,1) 1px solid;}
    .lt8 li:hover *{ color: #fff !important;}

    .arrow3:hover{ background: #FDA700; border: #FDA700 1px solid; color: #fff;}

    .more1:hover{ color: #FDA700;}

    .toplink ul li .a:hover{ color: #fff;}
}

@media(max-width: 1024px){
    .banner .imgBox .img{ padding-bottom: 30%;}
}
@media(max-width: 800px){
}
@media(max-width: 769px){
    
    .banner .dots{ bottom: .2rem;}
    .banner .dots span{ width: .1rem; height: .1rem; margin: 0 .05rem !important;}

    .tit1 .ll h6{font-size: .16rem;}
    .tit1 .ll h3{ font-size: .26rem}

    .lt1{margin: .15rem -7px 0;}
    .lt1 li{width: 33.33%;margin: 0 0 .15rem;padding: 0 7px;}
    .lt1 .a{width: 100%;font-size: .18rem;}

    .more1 img{ width: .16rem; }
    .more1{font-size: .16rem;padding-bottom: .1rem;}

    .pad1{ padding: .4rem 0;}

    .index1 .content .left{ width: 100%;}
    .index1 .content .left::before{left: 0;height: auto;top: 0;right: 0;}
    .index1 .content .right{width: 100%;padding: .3rem 0 0;}
    .list1Box{ width: 100%;}

    .tit1{margin-bottom: .25rem !important;}

    .list1 .txt{padding: 0 .2rem 0 .2rem;height: 1.1rem;}

    .list1 .txt .arrow2{ width: .6rem}
    .list1 .txt .ll{width: calc(100% - .8rem);}
    .arrow2 .arrow{ font-size: .2rem}
    .list1 p{ margin: .05rem 0 0}
    .list2 .a{padding: 0 0;height: auto; flex-direction: row}
    .list2 li h4{ flex: 1}
    .list2 li h6 hr{ display: none}
    .list2 li h6{font-size: .15rem;margin: 0;width: 1rem;text-align: right;justify-content: flex-end;}

    .lt3 ul{ margin: 0 -7px}
    .lt3 li{width: 100%;margin-bottom: .25rem;padding: 0 7px;}

    .tit1 .cc{margin: 0 0 .2rem 0;}

    .tit1 .hd .more{position: absolute;bottom: .2rem;right: 0}
    .list1 .a{padding: 0;}
    .lt3 .a{ height: 1rem}

    .index3{ padding-top: .2rem}

    .slides2 .hd{width: 100%;margin-bottom: 0;}
    .lt4 .a .left{width: 100%;margin: .3rem 0 0;height: 2.6rem;padding: 0 .1rem 0 .2rem;}
    .lt4 .a .right{width: 100%;margin: .2rem 0 0;}

    .index3 .fl1li{ padding: .4rem 0}
    .slides2 .hd ul li .a{ font-size: .22rem}

    .dots2{ margin: .25rem 0 0}

    .lt4 .a .left .txt{ padding: 0 .4rem}

    .arrow3.prev1{ left: .2rem}
    .arrow3.next1{ right: .2rem}

    .lt4 p{ margin: .1rem 0 .25rem}

    .lt5{ margin: .3rem -7px 0}
    .lt5 li{ width: 50%; padding: 0 7px; margin-bottom: .25rem}
    .lt5 h4{ margin: .1rem 0 0}

    .index4 .left{ display: none}
    .index4 .right{width: 100%;padding: .25rem 0 0;background: #0056a8;}
    .lt7 .txt{width: 100%;padding: .25rem .25rem;min-height: 3.6rem;}
    .lt7 .imgBox{width: 2rem;margin: 0 auto;}

    .lt7 h4 big{font-size: .22rem;padding-bottom: .15rem;}
    .lt7 h4 small{font-size: .18rem;margin: 0 0 0 .2rem;}
    .lt7 dl dd{ font-size: .16rem}

    .index5 .left{ width: 100%}
    .index5 .right{ width: 100%; padding: .4rem 0 0}

    .lt8 li{ margin-bottom: .15rem}
    .lt8 .a{padding: 0 .45rem;height: .5rem;}

    .lt9Box .dots{ bottom: .2rem;}
    .lt9Box .dots span{ width: .1rem; height: .1rem; margin: 0 .05rem !important;}
    .lt9Box .imgBox::after{ height: 1rem;}
    .index6 .content{margin: 0;background-size: 100% auto;}
    .index6 .content .txt{ padding: .25rem;}

    .index6 h3{font-size: .22rem;margin-bottom: .15rem;}
    .index6 .p p{font-size: .16rem;}
} 
@media(max-width: 560px){
}