@charset "utf-8";
/**
 * Created by sunJia on 2026/07/02.
 * @Description: Index Style
 */
.wrapbanner{ margin: 0 auto; width: 100%; position: relative; z-index: 1;}

.banner{ position: relative; overflow: hidden; z-index: 2;}
.banner a{display:block;position:relative;overflow: hidden; font-size: 0;}
.banner a::before{ content: '';display: block;width: 100%; height: 1.7rem;
    background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(3,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(3,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(3,0,0,0) 100%);
    opacity: 0.5; position: absolute; left: 0;bottom: 0;z-index: 1;}
.banner .gp-img{padding-bottom: 44.65%; padding-bottom: 0; height: 100vh; background-size: cover;background-position: center;}
.banner .gp-img video,.banner .gp-img img{width:100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.banner .gp-img video{min-width:100%;min-height: 100%;max-height: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%) scale(1.2);}
.banner .gp-img-responsive{ padding-bottom: 47.91%; padding-bottom: 100vh;}
.banner .gp-img-responsive img{ transition: all .3s ease;}
.banner .gp-img-responsive img:hover{ transform: scale(1);}
/* .banner .swiper-slide-active .gp-img-responsive img{ animation: bannerAnimate 5s ease-in-out forwards;} */
@keyframes bannerAnimate {
    0%{ transform: scale(1);}
    100%{ transform: scale(1.1);}
}

.wrapbanner .arrows{ position: absolute; bottom: .3rem; right: 50%; transform: translateX(50%);z-index: 10;}
.wrapbanner .arrows > *{ cursor: pointer; width: .6rem;}
.wrapbanner .arrows .next{ transform: rotateY(180deg);}
.wrapbanner .arrows .control{ margin: 0 .3rem;}
.wrapbanner .arrows .control img:first-child{ display: block;}
.wrapbanner .arrows .control img:last-child{ display: none;}
.wrapbanner .arrows .control.stop img:first-child{ display: none;}
.wrapbanner .arrows .control.stop img:last-child{ display: block;}

/* modeTil */
.tilBox{ align-items: flex-start;}
.tilBox.flex-column{ align-items: center;}
.modeTil{ color: #073231; line-height: 1;}
.white .modeTil{ color: #fff;}
.modeMore{ color: #005e3c;margin-top: .3rem;}
.white .modeMore{ color: #00c24e;}
.white .modeMore i{ background: #00c24e; color: #006c45;}
.tilBox.flex-column .modeMore{ justify-content: center;}
.tilBox .moreBox{ width: 47.85%;}
.tilBox .text{ line-height: 1.44;}
.leftIsArrow{ display: flex; display: -ms-flexbox; align-items: center;}
.leftIsArrow i{ display: inline-block; width: .46rem; height: .46rem;line-height: .46rem; border-radius: 50%;
    background: #005e3c; color: #fff;text-align: center; margin-right: .17rem; overflow: hidden;}
.tilBox:hover i::before,
.leftIsArrow:hover i::before{ display: block; animation: moreAnimate 1.2s linear;}

/* wrap_mode01 */
.wrap_mode01{position: relative;z-index: 5; padding: .7rem 0 .87rem; font-size: 0;
    background: #ecf8f8 url(../images/row01-bg.png) no-repeat left top/31.98% auto;}
.mode01{ position: relative;}
.mode01 .modeCon{ margin-top: .4rem;}
.mode01 ul{
    margin: 0 -.3rem;
}
.mode01 li a{
    display: block;
    margin: 0 .3rem;
    transition: all .3s ease;
}
.mode01 li a:hover{
    transform: translateY(-.06rem);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.mode01 .info{
    padding: .24rem .25rem .5rem .4rem;
    background: #fff;
}
.mode01 .info .title{
    color: #073231;
    line-height: 1.28;
    height: 3.84em;
}
.mode01 .info .summary{
    line-height: 1.625;
    height: 4.875em;
    color: #526666;
    margin-top: .28rem;
    font-family: 'Microsoft YaHei';
}
.mode01 .info .more{
    margin-top: .5rem;
}
.mode01 li a:hover i::before{
    display: block;
    animation: moreAnimate 1.2s linear;
}


/* wrap_mode02 */
.wrap_mode02{ position: relative;font-size: 0;z-index: 1;overflow: clip;
    background: url(../images/research-bg.jpg) no-repeat right bottom/cover;}
.wrap_mode02 .leftImg{ height: 100%; position: absolute; right: 50%; top: 0;}
.wrap_mode02 .leftImg img{ height: 100%; max-width: unset;}
.mode02{ padding: .9rem 0 1.6rem; }
.mode02 .modeCon{ max-width: 43.71%; margin-left: auto; margin-right: 0;}
.mode02 .tilBox{ flex-direction: column;}
.mode02 .tilBox .moreBox{ width: 100%;}
.mode02 .tilBox .text{ margin-top: .4rem;}
.mode02 .modeMore{ margin-top: .4rem;}
.mode02 ul{
    margin-top: .6rem;
}
.mode02 ul li{
    position: relative;
    margin-bottom: 2.6vw;
}
.mode02 ul li:last-child{
    margin-bottom: 0;
}
.mode02 li::before{
    content: '';
    display: block;
    width: .08rem;
    height: .08rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: -.23rem;
    top: .1rem;
}
.mode02 ul a{
    line-height: 1.27;
    color: #ecf8f8;
    transition: all .3s ease;
}
.mode02 ul a:hover{
    transform: translateX(.06rem);
}


/* wrap_mode03 */
.wrap_mode03{padding: 2.1rem 0 0; position: relative;z-index: 5;margin-top: -.77rem;
    background: url(../images/study-bg.png) no-repeat top center/100% auto;}
.mode03{ text-align: center; font-size: 0;}
.wrap_mode03 ul{ flex-wrap: nowrap;}
.wrap_mode03 li{ width: 33.33%;}
.wrap_mode03 li a{ display: block; font-size: 0;}
.mode03 .tilBox .text{
    margin-top: .23rem;
}
.wrap_mode03 ul{
    margin-top: .58rem;
}
.wrap_mode03 li{}
.wrap_mode03 li a{
    position: relative;
    display: block;
    overflow: hidden;
}
.wrap_mode03 .gp-img-responsive{
    position: relative;
    padding-bottom: 87.5%;
    transition: all .5s ease;
    transform-origin: center;
}
.wrap_mode03 a:hover .gp-img-responsive{
    transform: scale(1.05);
}
.wrap_mode03 .gp-img-responsive::before{
    content: '';
    display: block;
    width:  100%;
    height: 1.8rem;
    background: -moz-linear-gradient(to bottom, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(to bottom, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}
.wrap_mode03 .info{
    position: absolute;
    left: 0;
    bottom: .4rem;
    width: 100%;
    z-index: 2;
    padding: 0 .3rem;
    box-sizing: border-box;
    line-height: 1.3;
}
.wrap_mode03 .title{
    color: #fff;
    transition: all .3s ease;
}
/* .wrap_mode03 a:hover .title{
    font-weight: bold;
} */
.wrap_mode03 .summary{
    color: rgba(255,255,255,0.9);
    margin-top: .1rem;
}


/* wrap_mode04 */
.wrap_mode04{position: relative; overflow: hidden; padding: 1.36rem 0 3.05rem;
    background: #ecf8f8 url(../images/international-bg.png) no-repeat center bottom/101% auto;}
.mode04 .tilBox{
    flex-direction: column;
    text-align: left;
}
.mode04 .tilBox .text{
    margin-top: .35rem;
}
.mode04 .modeCon{ 
    margin-top: .2rem;
}
.mode04 .circle{
    position: relative;
    z-index: 1;
    width: 41.43%;
    margin-left: 32vw;
}
.mode04 .circle::before,
.mode04 .circle::after{
    content: '';
    display: block;
    position: absolute;
    top: -.9rem;
    left: -.9rem;
    bottom: -.9rem;
    right: -.9rem;
    z-index: -1;
    background: url(../images/international-mask.png) no-repeat center/100%;
    border-radius: 50%;
    animation: enlarge 1.5s linear infinite alternate;
}
.mode04 .circle::after{
    top: -.5rem;
    left: -.5rem;
    bottom: -.5rem;
    right: -.5rem;
    background: none;
    border: 1px dashed rgba(7, 50, 49, .5);
    animation: rotate720 12s linear infinite;
}
@keyframes enlarge {
    0%{ transform: scale(1);}
    100%{ transform: scale(1.1);}
}
@keyframes rotate720 {
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(-720deg);}
}
.mode04 .circle .item{
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 2;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
}
.mode04 .circle .item1{
    width: 2.4rem;
    height: 2.4rem;
    background: #0c6c32;
    right: -22%;
    top: -22%;
}
.mode04 .circle .item2{
    width: 2.1rem;
    height: 2.1rem;
    background: #00c24e;
    right: -32%;
    top: 64%;
}
.mode04 .circle .item3{
    width: 1.26rem;
    height: 1.26rem;
    background: #fcca47;
    right: 100%;
    top: 12%;
}
.mode04 .circle .item::before{
    content: '';
    display: block;
    position: absolute;
    top: .15rem;
    left: .15rem;
    bottom: .15rem;
    right: .15rem;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.6);
}
.mode04 .circle .item span{
    line-height: 1.05;
}





/* wrap_mode05 */
.wrap_mode05{position: relative;background: #f6f6f6;
    padding: 10.98vh 0 0; height: 100vh; text-align: center;}
.mode05{ margin: 0 -4.42vw;}


/* wrap_mode06 */






/* Responsive style */
@media screen and (max-width:1600px){
    
}

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

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

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

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

@media screen and (max-width:996px){
    .banner .gp-img-responsive,
    .banner .gp-img{ padding-bottom: 47.91%; height: 0 !important;}
    .mode01 ul{
        margin: 0 -.1rem;
    }
    .mode01 li a{
        margin: 0 .1rem;
    }
    .mode01 .info{
        padding: .2rem;
    }
    .mode01 .info .summary{
        margin-top: .2rem;
    }
    .mode01 .info .more{
        margin-top: .2rem;
    }
    .mode02{
        padding: .5rem 0 1rem;
    }
    .mode02 .modeMore,
    .mode02 .tilBox .text{
        margin-top: .2rem;
    }
    .mode02 ul{
        margin-top: .3rem;
    }
    .mode02 ul li{
        margin-bottom: .15rem;
    }
    .mode02 .modeCon{
        max-width: 45%;
    }
    .wrap_mode03{
        padding: 1.5rem 0 0;
    }
    .wrap_mode03 .info{
        bottom: .2rem;
        padding: 0 .2rem;
    }
    .wrap_mode04{
        padding: .8rem 0 1.3rem;
    }
    .mode04 .circle .item1{
        width: 2rem;
        height: 2rem;
    }
    .mode04 .circle .item2{
        width: 1.9rem;
        height: 1.9rem;
    }
    .mode04 .circle::before{
        top: -.6rem;
        left: -.6rem;
        bottom: -.6rem;
        right: -.6rem;
    }
    .mode04 .circle::after{
        top: -.35rem;
        left: -.35rem;
        bottom: -.35rem;
        right: -.35rem;
    }
    
}

@media screen and (max-width:768px){
    .wrapbanner .arrows{
        bottom: .15rem;
    }
    .wrapbanner .arrows > *{
        width: .45rem;
    }
    .wrapbanner .arrows .control{
        margin: 0 .15rem;
    }
    .wrap_mode01{
        padding: .3rem 0;
    }
    .tilBox{
        flex-direction: column;
    }
    .tilBox .text,
    .leftIsArrow{
        margin-top: .1rem;
    }
    .tilBox .moreBox{
        width: 100%;
    }
    .leftIsArrow i{
        flex-shrink: 0;
        width: .35rem;
        height: .35rem;
        line-height: .35rem;
        margin-right: .1rem;
    }
    .mode01 .modeCon{
        margin-top: .2rem;
    }
    .mode01 ul{
        flex-wrap: wrap;
    }
    .mode01 li{
        width: 100%;
        margin-bottom: .2rem;
    }
    .mode01 li:last-child{
        margin-bottom: 0;
    }
    .mode01 .info .title{
        height: auto;
    }
    .wrap_mode02 .leftImg{
        display: none;
    }
    .mode02{
        padding: .3rem 0 1rem;
    }
    .mode02 .modeCon{
        max-width: 100%;
    }
    .mode02 .modeMore, .mode02 .tilBox .text{
        margin-top: .1rem;
    }
    .wrap_mode03{
        padding: 1.2rem 0 0;
        margin-top: -8vw;
    }
    .mode03 .tilBox .text{
        margin: .1rem;
    }
    .wrap_mode03 ul{
        flex-wrap: wrap;
    }
    .wrap_mode03 li{
        width: 100%;
        margin-bottom: .2rem;
    }
    .wrap_mode03 li:last-child{
        margin-bottom: 0;
    }
    .mode04 .circle::after{
        animation-duration: 10s;
    }
    .mode04 .circle{
        width: 3.2rem;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    .mode04 .modeCon{
        margin-top: .7rem;
    }

}

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

@media screen and (max-width:491px){
    .wrapbanner .arrows .control{
        display: none;
    }
    .wrapbanner .arrows{
        bottom: calc(50% - .3rem);
        width: 96%;
    }
    .wrapbanner .arrows > *{
        width: .35rem;
    }
    .banner a::before{
        height: 1.2rem;
        display: none;
        pointer-events: none;
    }
    .banner .gp-img-responsive, .banner .gp-img{
        padding-bottom: 0;
        height: 240px !important;
    }
    .banner .gp-img video,
    .banner .gp-img-responsive img{
        height: 100% !important;
        object-fit: cover;
    }
    .mode02 ul{
        margin-top: .15rem;
    }
    .mode04 .circle .item{
        transform: scale(.7);
        padding: .1rem;
    }
    .mode04 .circle .item2{
        right: 58%;
    }
    .mode04 .circle .item3{
        display: none;
    }
}

@media screen and (max-width:414px){
    .banner .gp-img-responsive, .banner .gp-img{
        height: 200px !important;
    }
    .mode02{
        padding: .3rem 0 .5rem;
    }
    .wrap_mode03{
        padding: .6rem 0 0;
    }
    .wrap_mode03 ul{
        margin-top: .3rem;
    }
    .wrap_mode04{
        padding: .3rem 0 .8rem;
    }
    .mode04 .circle .item{
        transform: scale(.65);
    }
    .mode04 .circle .item1{
        right: -2%;
        top: -30%;
    }
    .mode04 .circle .item2{
        right: 50%;
        top: 73%;
    }
    .mode04 .circle{
        width: 3rem;
    }
    .mode04 .circle .item span{
        font-size: .22rem;
    }
    
}

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