.banner{
    width: 100%;
    height: 6.64rem;
}
.banner .pagination {
    position: absolute;
    z-index: 20;
    bottom: 30px;
    width: 100%;
    text-align: center;
}
.banner .swiper-pagination-switch {
    display: inline-block;
    width: 66px;
    height: 4px;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
}
.banner .swiper-active-switch {
    background-color: #1d50a2 !important;
}

.box{
    padding: 40px 0;
}
.box .top{
    margin: 0 auto;
    width: 14rem;
    text-align: center;
    position: relative;
}
.box .top .title{
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #262626;
    position: relative;
}
.box .top .title:after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -23px;
    width: 52px;
    height: 4px;
    background-color: #1d50a2;
}
.box .top .subTitle{
    padding-top: 0.34rem;
    font-family: Arial;
    color: #b2b2b2;
    font-size: 16px;
    line-height: 16px;
}
.box .top .more{
    position: absolute;
    top: 42px;
    font-size: 16px;
    right: 0;
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.box .top .more img{
    margin-right: 10px;
}
.box .top .more:hover{
    opacity: 1;
}

/* ===========实验室动态========== */
.dynamic{
    background: #f5f7ff url("../images/bg1.png") no-repeat;
    background-size: 100%;
    background-position: bottom;
}
.dynamic .content{
    margin: 40px auto;
    width: 14rem;
}
.dynamic .content .picBox{
    width: 100%;
    height: 5.53rem;
    display: flex;
    justify-content: space-between;
       margin-top: 0.6rem;
}
.dynamic .content .dynamicSwiper{
    flex: 1;
}
.dynamic .content .dynamicSwiper .swiper-slide{
    width: 100%;
}
.dynamic .content .dynamicSwiper .hot{
    position: absolute;
    width: 50px;
    height: 45px;
    padding:10px 0;
    top:-6px;
    right: 40px;
    text-align:center;
    border-top-left-radius:3px;
    background-color: #b60d2c;
    z-index: 10;
    color: #fff;
    font-size: 0.12rem;
}
.dynamic .content .dynamicSwiper .hot:before {
    height:0;
    width:0;
    border-bottom:6px solid #b60d2c;
    border-left:6px solid transparent;
    left:-5px;
    top:0;
}
.dynamic .content .dynamicSwiper .hot:before,.dynamic .content .dynamicSwiper .hot:after {
    content:"";
    position:absolute;
}
.dynamic .content .dynamicSwiper .hot:after {
    height:0;
    width:0;
    border-left: 25px solid #b60d2c;
    border-right:25px solid #b60d2c;
    border-bottom:25px solid transparent;
    bottom:-24px;
    left:0;
}
.dynamic .content .dynamicSwiper .tip{
    position: absolute;
    width: 100%;
    padding: 0 0.46rem;
    height: 0.73rem;
    line-height: 0.73rem;
    left: 0;
    bottom: 0;
    font-size: 0.17rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.62);
    z-index: 8;
}
.dynamic .dynamicSwiper .dynamiPagination {
    position: absolute;
    padding-right: 40px;
    z-index: 20;
    bottom: 0.3rem;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
    font-size: 14px;
}
.dynamic .dynamicSwiper .swiper-pagination-switch {
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
}
.dynamic .dynamicSwiper .swiper-active-switch {
    background: #1d50a2;
}
.dynamic .dynamicSwiper .dynamicSwiper .tip{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 73px;
    padding: 0 40px;
    background-color: rgba(0, 0, 0, 0.62);
    z-index: 8;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
}
.dynamic .dynamicSwiper .dynamicSwiper .tip p{
    width: 80%;
    /*这里要显示的设置宽度*/
    overflow:hidden;
    white-space:nowrap;
    /*文字超出宽度则显示ellipsis省略号*/
    text-overflow:ellipsis;;
}
.dynamic .content .items{
    margin-left: 26px;
    width: 3.65rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.dynamic .content .item {
    width: 100%;
    height: calc(50% - 15px);
    font-size: 0;
    position: relative;
  margin: 0px 0px 5px 0px;
    /* padding: 5px 0px; */
    background: #fff;
}
.dynamic .content .item img{
    width: 100%;
    height: 82%;
}
.dynamic .content .item .news {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0px 20px 5px 20px;
    font-size: 16px;
    color: #4c4c4c;
    background-color: #fff;
    line-height: 22px;
    box-sizing: border-box;
}
.dynamic .content .item .time{
    position: absolute;
    right: 15px;
    top: 0;
    width: 68px;
    height: 56px;
    background-color: rgba(2, 53, 134, 0.77);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dynamic .content .item .time span{
    font-size: 24px;
    font-family: Georgia;
}
.dynamic .content .item .time p{
    margin-top: 0.1rem;
    font-size: 14px;
    font-family: Arial;
}
.dynamic .content .list{
    margin-top: 30px;
    display: flex;
    align-items: center;
}
.dynamic .content .list li{
    padding: 0 0.3rem 0 1.2rem;
    flex: 1;
    height: 1rem;
    position: relative;
    line-height: 0.24rem;
    font-size: 16px;
    color: #5c5c5c;
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
}
.dynamic .content .list li p{
    width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.dynamic .content .list li .time{
    position: absolute;
    width: 0.66rem;
    height: 0.7rem;
    top:-5px;
    left: 0.4rem;
    text-align:center;
    border-top-left-radius:3px;
    background-color: #1d50a2;
    z-index: 10;
    color: #fff;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dynamic .content .list li .time span{
    font-size: 0.24rem;
    line-height: 0.34rem;
    font-family: Georgia;
}
.dynamic .content .list li .time p{
    font-size: 0.14rem;
    font-family: Arial;
}
.dynamic .content .list li .time:before {
    height:0;
    width:0;
    border-bottom: 8px solid #1d50a2;
    border-left: 8px solid transparent;
    left: -7px;
    top:0;
}
.dynamic .content .list li .time:before,.dynamic .content .list li .time:after {
    content:"";
    position:absolute;
}
.dynamic .content .list li:hover, .dynamic .content .item:hover .news {
    color: #1d50a2;
    cursor: pointer;
}
/* ===========研究方向========== */
.direction .content{
    margin: 30px auto;
    width: 14rem;
    position: relative;
    overflow: visible;
}
.direction .content .directionSwiper{
   
    box-sizing: border-box;
height:auto;
}
.direction .content .directionSwiper .swiper-wrapper{ height:auto!important;}
.direction .content .directionSwiper .swiper-slide{height:auto!important;} 
.direction .content .directionSwiper .swiper-slide a{
display:block;
}
.direction .content .directionSwiper .swiper-slide a .pic{position: relative;
    overflow: hidden;
    padding-top: 55%;}
.direction .content .directionSwiper .swiper-slide img{
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
}
.direction .content .directionSwiper .swiper-slide .news{
    width: 3.2rem;
}
.direction .content .directionSwiper .swiper-slide .news .title{
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #4c4c4c;
    line-height: 24px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: left;
}
.direction .content .directionSwiper .swiper-slide .news .desc{
  position: relative;
    color: #b2b2b2;
    line-height: 20px;
height:40px;
    padding-right: 30px;
    overflow: hidden;

 
    font-size:14px;
    text-align: left;
}
.direction .content .directionSwiper .swiper-slide .news .desc:after{
    content: '+详细';
    position: absolute;
    font-size: 12px;
    right: 0;
    bottom: 0;
    color: #4070bc;
}
.direction .content .directionSwiper .swiper-slide{
    display: flex;
    flex-direction: column;
    transition: all .2s ease-in-out;
}
.direction .content .directionSwiper .swiper-slide:hover{
    cursor: pointer;
}
.direction .content .directionSwiper .swiper-slide:hover .news .title{
    color: #1d50a2;
}
.direction .content .swiper-button-next{
    position: absolute;
    right: -20px;
    top: 40%;
    width: 0;
    height: 0;
    border-top: 42px solid transparent;
    border-left: 22px solid #e0e8f3;
    border-bottom: 42px solid transparent;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.direction .content .swiper-button-prev{
    position: absolute;
    top: 40%;
    left: -20px;
    width: 0;
    height: 0;
    border-top: 42px solid transparent;
    border-right: 22px solid #e0e8f3;
    border-bottom: 42px solid transparent;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.direction .content .swiper-button-prev:hover {
    border-right: 22px solid #1d50a2;
    box-shadow: 3px 0 0px #ccc;
}
.direction .content .swiper-button-next:hover {
    border-left: 22px solid #1d50a2;
    box-shadow: -3px 0 0px #ccc;
}
/*====== 新闻==========*/
.newsList{
    padding: 0px 0;
    box-sizing: border-box;
    background: url("../images/bg2.png") no-repeat;
    background-size: 130%;
}
.newsList .tabs {
    display:flex;
    flex-wrap:wrap;
    margin: 0 auto;
    width: 14rem;
    justify-content: center;
    position: relative;
}
.newsList .tabs label {
    order:1;
    display: block;
    cursor:pointer;
    margin: 0 30px;
    font-size: 28px;
    font-weight: 700;
    color: #4c4c4c;
    transition:background ease 0.2s;
}
.newsList .tabs .tab {
    order:99;
    flex-grow:1;
    width:100%;
    display:none;
   padding: 0.2rem 0px 0px 0px;
}
.newsList .tabs input[type="radio"] {
    position:absolute;
    opacity:0;
}
.newsList .tabs input[type="radio"]:checked + label {
    color: #4070bc;
    position: relative;
}
.newsList .tabs input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid #4070bc;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
.newsList .tabs input[type="radio"]:checked + label + .tab {
    display:block;
}
.newsList .tabs label:hover{
    color: #4070bc;
}
/*@media (max-width:45em) {*/
    /*.newsList .tabs .tab,.newsList .tabs label {*/
        /*order:initial;*/
    /*}*/
    /*.newsList .tabs label {*/
        /*width:100%;*/
        /*margin-right:0;*/
        /*margin-top:0.2rem;*/
    /*}*/
/*}*/
.newsList .more{
    position: absolute;
    top: 25px;
    right: 0;
    opacity: 0.5;
    font-size: 16px;
    cursor: pointer;
}
.newsList .more img{
    margin-right: 10px;
}
.newsList .more:hover{
    opacity: 1;
}
.newsList .content{
    margin: 100px auto 0;
    display: flex;
    justify-content: space-between;
}
.newsList .content li{
    width: calc((100% - 90px) / 4);
    padding: 80px 25px 20px;
    background-color: #fff;
    box-shadow: 0 0 13px 4px rgba(226, 226, 226, 0.3);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
}
.newsList .content li .time{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -38px;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 4px solid #1d50a2;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.newsList .content li .time:after{
    content: '';
    position: absolute;
    top: 54%;
    left: calc(50% - 12px);
    width: 24px;
    height: 0.02rem;
    background-color: #e2e2e2;
}
.newsList .content li .time span{
    display: inline-block;
    margin-bottom: 4px;
    font-size: 26px;
    font-family: Georgia;
    color: #4070bc;
    position: relative;
}
.newsList .content li .time p{
    margin-top: 10px;
    font-size: 18px;
    color: #6b6b6b;
    transform: scale(0.9);
}
.newsList .content li .text .mainTitle{
    padding-bottom: 10px;
    font-size: 16px;
    color: #4c4c4c;
    line-height: 0.3rem;
    border-bottom: 1px solid #e2e2e2;
}
.newsList .content li .text .count{
    padding-top: 0.2rem;
    color: #b2b2b2;
    font-size: 16px;
    line-height: 0.16rem;
}
.newsList .content li:hover{
    transform: translateY(-30px);
    box-shadow: 0 0 13px 4px rgba(29, 80, 162, 0.7);
}
.newsList .content li:hover .text span,
.newsList .content li:hover .text p a, .newsList .content li:hover .text p{
    color: #1d50a2;
}
.newsList .content li:hover .text p{
    font-weight: bold;
    border-bottom-color: #1d50a2;
}
.newsList .content.info li{
    border-radius: 20px;
    border: 3px solid #a8c6f4;
}
.newsList .content.info li:hover{
    border-color: #1d50a2;
}

.newsList .content.info li:hover .text span,
.newsList .content.info li:hover .text p a, .newsList .content.info li:hover .text p{
    color: #4c4c4c;
}
.newsList .content.info li .time {
    width: 0.88rem;
    height: 0.88rem;
    border-radius: 0.1rem;
    background-color: #2253a0;
    left: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.newsList .content.info li .time span{
    margin-bottom: 0;
    color: #fff;
    font-family: Arial;
    font-size: 18px;
}
.newsList .content.info li .time:after{
    width: 0.3rem;
    top: 52%;
    left: calc(50% - 0.15rem);
}
.newsList .content.info li .time p{
    margin-top: 0.18rem;
    color: #fff;
}
/*=========快捷========*/
.quick{
    margin-bottom: 0.4rem;
}
.quick .content{
    margin: 50px auto 0;
    width: 14rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quick .content li{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.quick .content li a{
   
    display: flex;
 justify-content: center;
    align-items: center;
    
}
.quick .content li div{
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 100%;
    border: 1px solid #1d50a2;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in-out;
}
.quick .content li img{
    width: auto;
    height: 75px;
}
.quick .content li span{
    margin-left: 28px;
    font-size: 16px;
    color: #333;
}
.quick .content li:hover div{
    background-color: #3f6fbb;
}
.quick .content li:hover span{
    color: #1d50a2;
    font-weight: 700;
}
.quick .content li:hover img{
    filter: brightness(50);
}









/*==========index.css --开始  -或没有修改index.css，可将以下代码复制至index.css对应位置替换=========*/
.banner {
    height: auto;
}
.banner .pagination {
    position: absolute;
    z-index: 20;
    bottom: 0.3rem;
    width: 100%;
    text-align: center;
}

.banner .swiper-pagination-switch {
    display: inline-block;
    width: 0.66rem;
    height: 0.04rem;
    background-color: #fff;
    margin: 0 0.05rem;
    cursor: pointer;
}

.box {
    padding: 0.4rem 0;
}

.box .top {
    margin: 0 auto;
    width: 94%;
    text-align: center;
    position: relative;
}
.box .top .title{
    margin-bottom: 0.2rem;
    font-size: 0.3rem;
    line-height: 0.3rem;
    font-weight: 700;
    color: #262626;
    position: relative;
}
.box .top .title:after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.23rem;
    width: 0.52rem;
    height: 0.04rem;
    background-color: #1d50a2;
}
.box .top .subTitle{
    padding-top: 0.34rem;
    font-family: Arial;
    color: #b2b2b2;
    font-size: 16px;
    line-height: 0.16rem;
}
.dynamic .content {
    margin:0.4rem auto 0px auto;
    width: 94%;
}

.dynamic .content .picBox {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dynamic .content .items {
    margin-left: 0.26rem;
    width: 26%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.direction .content {
    margin: 0.7rem auto 0px auto;
    width: 94%;
    position: relative;
    overflow: visible;
}
.direction .content .swiper-button-next{
    position: absolute;
    right: -0.16rem;
    top: 24%;
    width: 0;
    height: 0;
    border-top: 0.42rem solid transparent;
    border-left: 0.22rem solid #e0e8f3;
    border-bottom: 0.42rem solid transparent;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.direction .content .swiper-button-prev{
    position: absolute;
    top: 24%;
    left: -0.16rem;
    width: 0;
    height: 0;
    border-top: 0.42rem solid transparent;
    border-right: 0.22rem solid #e0e8f3;
    border-bottom: 0.42rem solid transparent;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.direction .content .swiper-button-prev:hover {
    border-right: 0.22rem solid #1d50a2;
    box-shadow: 0.03rem 0 0 #ccc;
}
.direction .content .swiper-button-next:hover {
    border-left: 0.22rem solid #1d50a2;
    box-shadow: -0.03rem 0 0 #ccc;
}
.newsList .tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 94%;
    justify-content: center;
    position: relative;
}
.newsList{
    padding: 0px 0;
    box-sizing: border-box;
    background: url("../images/bg2.png") no-repeat;
    background-size: 120%;
    background-position: top;
}
.newsList .tabs label{
    order: 1;
    display: block;
    cursor: pointer;
    margin: 0 0.3rem;
    font-size: 0.28rem;
    font-weight: 700;
    color: #4c4c4c;
    transition: background ease 0.2s;
}
.newsList .more {
    position: absolute;
    top: 0.5rem;
    right: 0;
    opacity: 0.5;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.newsList .content{
    margin: 0.7rem auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.newsList .content li{
    
    border: 3px solid #ffffff;
    width: calc((100% - 90px) / 4);
    padding: 0.8rem 0.25rem 0.2rem;
    background-color: #fff;
    box-shadow:0 0 13px 4px rgba(168,198,244, 0.7);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
}
.quick .content {
    margin: 0.7rem auto 0;
    width: 94%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.quick .content li{
    display: flex;
    align-items: center;
    cursor: pointer;
    /*flex: 1;*/
}
.box .top,
.dynamic .content,
.direction .content,
.newsList .tabs,
.quick .content{
    width: 94%;
    max-width: 14rem;
}
@media screen and (max-width: 1800px){
.dynamic .content .item a{height:210px; overflow:hidden;}
.dynamic .content .item a img{height:82%}
}
@media screen and (max-width: 1700px){
.newsList{padding: 0px 0;min-height: 420px;}
}
@media screen and (max-width: 1500px){.direction .content .directionSwiper .swiper-slide .news{width:2.6rem;margin-left: auto;
    margin-right: auto;}}
@media screen and (max-width: 1250px) {

    .dynamic .content .dynamicSwiper,
    .dynamic .content .items{
        width: 100%;
    }
    .dynamic .content .dynamicSwiper .tip{
        padding-right: 30%;
    }
    .dynamic .content .items {
        margin-top: 0.4rem;
        margin-left: 0.01rem;
        margin-right: 0.01rem;
    }
    .dynamic .content .list{
        display: block;
    }
    .dynamic .content .list li{
        margin-top: 0.2rem;
        width: 100%;
        background-color: #fff;
    }
    .newsList .content li{
        width: calc(50% - 0.4rem);
        margin: 0.3rem 0.2rem;
    }
   .direction .content .directionSwiper .swiper-slide .news {
    width: 100%;
   }
.direction .content .directionSwiper .swiper-slide .news .title{
font-size: 18px;
}
.direction .content .directionSwiper .swiper-slide .news .desc{
font-size: 14px;
}
}

@media screen and (max-width: 1279px) {
    .banner{
      /*  margin-top: 0.4rem;*/
    }
}

@media screen and (max-width: 1200px) {

    .newsList .content li{
        width: 100%;
    }
    .newsList .content li+li{
        margin-top: 0.3rem;
    }
    .quick .content{
        /*display: unset;*/
    }
    .quick .content li{
        margin-bottom: 0.2rem;
        width: 50%;
        justify-content: center;
    }
    .quick .content li span{
        display: inline-block;
        width: 1.5rem;
    }
}

@media screen and (max-width: 640px) {
    .newsList .content li{
        width: 100%;
    }
    .newsList .content li+li{
        margin-top: 0.3rem;
    }
    .quick .content{
        display: unset;
    }
    .quick .content li{
        width: 100%;
        justify-content: center;
    }
    .quick .content li +li{
        margin-top: 0.3rem;
    }
    .quick .content li span{
        display: inline-block;
        width: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    .box .top .more {
        top: 110%;
    }

    .box .top + .content {
        margin-top: 0.6rem;
    }

}
/*==========index.css --结束=========*/