@charset "utf-8";

.banner_box{ position: relative;z-index: 1;}
.banner{padding: 0px;position: relative;z-index: 1;overflow: hidden;width: 100%;}
.banner ul li{overflow: hidden;}
.banner ul li .img {overflow: hidden;width: 100%;}
.banner ul li .img .imgLi {padding-bottom: 100vh;transition: 0s;background-size: cover !important;background-position: center!important;background-repeat: no-repeat!important;}
.banner ul li .img video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.banner .dots {position: absolute;display: flex;margin: 0px;left: auto;right: .4rem;bottom: .24rem;z-index: 10;width: auto;}
.banner .dots span {background: #fff;width: .11rem;height: .11rem;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;border-radius: 50vw;margin: 0 .05rem !important;opacity: 1 !important;}
.banner .dots span.active {width: .25rem;opacity: 1 !important;background: #f19149;}

.banner .txt{position: absolute;right: 0px;bottom: 0px;left: 0px;z-index: 1;}
.banner .txt .wp{ display: flex;align-items: center;justify-content: flex-end;}
.banner .txt h3{font-size: .6rem;color: #fff; line-height: 1.33;font-family: 'Bell MT'; max-width: 48%;margin-bottom: 10vh;width: 6.94rem; transform: translateY(.6rem); transition: 1s;}
.banner .txt h3 span{display: inline-block;opacity: 0;filter: blur(10px);-webkit-filter: blur(10px);transform: translateY(-16px);margin: 0 .5px;font-weight: bold;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}
.banner.on .top h4 span{ opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); transform: translateY(0px);}

.banner.on .swiper-slide-active .txt h3{ transform: translateY(0rem); }

.home1-2W{ width: 80%;margin: auto; position: relative; z-index: 1;}

.home1{ position: relative; z-index: 1;}
#bg1{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: url(../images/home1_b2.png) center top repeat-x; background-size: 100vw auto;}
#bg2{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: url(../images/home2_b1.jpg) center 75% no-repeat; background-size: 100vw auto;}
.home1 .wp{ justify-content: space-between;}
.home1 .left{ width: 45.66%; position: relative; z-index: 1; padding: .1rem 0 0;}
.home1 .left .bg1W{ position: absolute; top: -1.16rem; right: 0; bottom: 2.6rem; left: calc((14.4rem - 100vw)/2);overflow: hidden;z-index: -1;}
.home1 .left .bg1{position: absolute;top: -20%;right: 0;bottom: 0;left: 0;background-size: cover !important;overflow: hidden;height: 100%;}
.home1 .left .bg1:after{ content: ""; position: absolute; bottom: 0; right: 0; left: 0; background: #fdfdfd; height: 1.5rem;transform: skewY(-10deg);transform-origin: right top;}
.home1 .right{ width: 50.66%; padding: 1rem 0 0;}

.tit1{ margin-bottom: .7rem;}
.tit1 h3{font-size: .46rem; color: #000; font-family: 'Bell MT';}
.tit1 p{ font-size: .2rem; color: #adadad; line-height: .32rem; font-family: 'Poppins-Italic'; margin: .12rem 0 0;font-style: italic;}

.list4 li{ margin-bottom: .68rem;}
.list4 .img{ margin-bottom: .4rem;}
.list4 .img .imgLi{ padding-bottom: 73.5%;background-size: cover !important;background-position: center!important;background-repeat: no-repeat!important;}
.list4 .txt{ height: 1.26rem; position: relative; z-index: 1; padding: 0 0 0 .4rem;display: flex;flex-direction: column;justify-content: space-between;}
.list4 .txt h4 {font-size:.2rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}
.list4 .txt::before{ content: ""; position: absolute; top: 0; height: 100%; left: 0; width: .03rem; background: #ff6d18;}
.list4 .txt::after{ content: ""; position: absolute; top: 0; height: 0; left: 0; width: .03rem; background: #1d56c2; transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}

.list4s1 .img .imgLi{ padding-bottom: 59.125%;}

.tit1_w h3{ color: #fff;}
.tit1_c{ text-align: center;}

.home2{ padding-bottom: 0; overflow: hidden;}

.list5{ margin: 0 -.26rem;}
.list5 li{ width: 33.33%; padding: 0 .26rem;}
.list5 .a{ display: block;}
.list5 .img .imgLi{ padding-bottom: 68%;background-size: cover !important;background-position: center!important;background-repeat: no-repeat!important;}
.list5 .txt{ position: relative; top: -.38rem}
.list5 h6{ height: .39rem; position: relative; z-index: 1;line-height: .56rem;padding: 0 .1rem;}
.list5 h6:before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #fff; z-index: -1; transform: skewX(6deg);transform-origin: left bottom;}
.list5 h4{ margin: .2rem 0 .36rem; padding: 0 .1rem;font-size: .2rem;}
.list5 .ico{ padding: 0 .1rem}
.list5 .ico img{ height: .15rem; transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}

.list5 li:nth-child(1) .a{ margin-top: .3rem;}
.list5 li:nth-child(2) .a{ margin-top: .56rem;}

.home3{ padding: 1.4rem 0 0; overflow: hidden; position: relative; z-index: 3; min-height: 8rem;}
#bg3W{position: absolute;top: 0;bottom: 0;left: 0;clip-path: polygon(0 0, calc(100% - 1.45rem) 0, 100% 100%, 0 100%);overflow: hidden;width: 90%;z-index: -1;}
#bg3{background: url(../images/home3_b1.png) center;background-size: .3rem .3rem;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
#bg4W{ position: absolute; top: .5rem; bottom: 0; left: 0; clip-path: polygon(0 0, calc(100% - 1.45rem) 0, 100% 100%, 0 100%); overflow: hidden; width: 88%;}
#bg4{background: url(../images/home3_b2.jpg) center no-repeat;background-size: cover;}

.home3 .wp{ align-items: flex-end;}
.home3 .left{ width: 5.26rem;position: relative;z-index: 2;}
.home3 .right{ width: calc(100% - 5.26rem);position: relative;z-index: 1;}
.home3 .right:before{ content: ""; position: absolute; top: -.38rem; right: 0; bottom: 0; left: .52rem; border: rgba(255,255,255,.2) 1px solid;}
.home3 .right .bd{ width: calc((100vw - 14.4rem)/2 + 100%);background: #fff;}

.tit2{ margin: 0 .7rem 0 0; position: relative; z-index: 1; margin-bottom: .8rem;}
.tit2::before{ content: ""; position: absolute; top: -.15rem; background: url(../images/tit2_i1.svg) center no-repeat;width: .62rem;height: .87rem;left: -.65rem;background-size: 100% 100%;}
.tit2 p{ background: url(../images/tit2_i2.png) right bottom no-repeat; padding: 0 .5rem .2rem 0;background-size: .45rem .34rem;font-style: italic;}
.tit1_w p{ color: rgba(255,255,255,.5); }

.list6{ padding: 0 0 .3rem;}
.list6 .a{ display: block; padding: .2rem .88rem .2rem .35rem; margin: 0 -.45rem 0 -.35rem; position: relative; z-index: 1;}
.list6 .img .imgLi{ padding-bottom: 63.84%;}
.list6 h4{ color: #fff}
.list6 .a::before{ content: ""; position: absolute; width: 0; top: 0; bottom: 0; left: 0; z-index: -1; background: url(../images/list6_b1.png) center no-repeat; background-size: 100% 100%;filter: drop-shadow(0 .1rem .05rem rgba(0,0,0,.2)); transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;opacity: 0;}
.list6 .a::after{ content: ""; position: absolute; width: .03rem; height: 0; bottom: 0; left: 0; z-index: -1; background: #ff6d18; transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}

.list6 li.on .a::before{ width: 100%;opacity: 1;}
.list6 li.on .a::after{ height: 100%}
.list6 li.on h4{ color: #1d56c2}
.list6 .img .imgLi{ padding-bottom: 63.84%;}

.home4{ position: relative; z-index: 4;margin: -1px 0 0;}
.list7 .img .imgLi{ padding-bottom: 8rem;position: relative;}
.list7 .bg{ position: absolute; top: -20vh; right: 0; bottom: -20vh; left: 0; background-size: cover !important; background-position: center !important;width: 100%;/*! height: 100%; */}
.list7 .ico1{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center}
.list7 .ico1 img{ width: auto; height: auto;position: relative;width: 1.53rem;}
.home4 .top{ position: absolute; right: 0; left: 0; bottom: -2.25rem; overflow: hidden; z-index: 1}
.home4 .top .wp .box{ width: 6.24rem;position: relative;z-index: 1;padding: .5rem .5rem .9rem;margin: 0 0 0 -.5rem;max-width: 44%;}
.home4 .top .wp .box:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #f87123; opacity: .95;transform: skewY(-5deg);transform-origin: left bottom;z-index: -1;}
.home4 .tit1{ margin-right: 0;margin-bottom: .5rem;}
.home4 .tit1 h3{ font-size: .66rem;}
.home4 .tit2::before{ display: none;}

.list8 li{ font-size: .32rem; color: #fff; line-height: .7rem;transition: .5s;}
.list8 span{ display: inline-block; position: relative; z-index: 1;transition: .5s;color: #fff !important;}
.list8 span:before{ content: ""; position: absolute; background: url(../images/list8_i1.png) center no-repeat; background-size: 100% 100%; width: .24rem; height: .23rem;right: -.7rem;top: 50%;margin-top: -.12rem;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;opacity: 0;transform: rotate(45deg);}

.home5{ padding: 3.2rem 0 1rem; position: relative; z-index: 1;overflow: hidden;}
.home5 .bg1{ position: absolute; top: -20vh; right: 0; bottom: -10vh; left: 0;z-index: -1;background-size: cover !important;}
.home5 .fl1{background: #023b98;position: relative;z-index: 1;overflow: hidden;pointer-events: inherit;}
.home5 .fl1 .bg2{ position: absolute; top: 0; right: 0; bottom: -5vh; left: 0; z-index: -1; opacity: .7;background-size: cover !important;}

.home5 .fl1 .left{ width: 60%; padding: .5rem .5rem 0;/*! background: rgba(0,0,0,.1); */}
.home5 .fl1 .right{ width: 40%;}

.home5 .fl2 .left{ width: 5.48rem; padding: .3rem .5rem 0 0;/*! background: rgba(0,0,0,.1); */}
.home5 .fl2 .right{ flex: 1; overflow: hidden;}
.list8s1 li{ font-size: .32rem;  line-height: .7rem;transition: .5s;}
.list8s1 span{ display: inline-block; position: relative; z-index: 1;transition: .5s;color: #100f0f;}
.list8s1 span:before{ content: ""; position: absolute; background: url(../images/list8s1_i.png) center no-repeat; background-size: 100% 100%; width: .3rem; height: .1rem;right: -.7rem;top: 50%;margin-top: -.05rem;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;opacity: 0;transform: translateX(-.1rem);}
.home5 .tit1 p{ font-size: .26rem; line-height: 1.5;margin: .2rem 0 0;}

.tit3{ margin-bottom: .2rem;position: relative;z-index: 1;}
.tit3:before{ content: ""; position: absolute; left: -.5rem; right: -.5rem; bottom: .03rem; height: 1px; background: rgba(255,255,255,.2)}
.tit3 h3{ font-size: .3rem; color: #fff;position: relative;z-index: 1;padding: 0 0 .3rem;}
.tit3 h3::before{ content: ""; position: absolute; width: .76rem; height: .07rem; background: #f8782e; left: 0; bottom: 0;}

.list9{ margin: 0; position: relative;z-index: 1; border-left: #fff .04rem solid}
.list9 li{ width: 50%; padding: 0 0; margin-bottom: 0}
.list9 .a{ flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.3); height: 2.34rem;text-align: center;padding: 0 .2rem;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}
.list9:before{ content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: .04rem; margin: -.02rem 0 0; background: #fff}
.list9:after{ content: ""; position: absolute; top: 0; left: 50%; height: 100%; width: .04rem; margin: 0 0 0 -.02rem; background: #fff}

.home5 .fl1 .left .ar_article p{ color: #fff; font-family: 'Poppins-Italic';}
.home5 .fl1 .left .ico{ margin: .4rem 0 0;}
.home5 .fl1 .left .ico img{ height: .22rem; transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}

.list9 .ico{ width: .76rem; height: .76rem;position: relative;z-index: 1;}
.list9 .ico img{ width: 100%; height: 100%}
.list9 .ico::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border: rgba(255,255,255,.1) 2px solid; border-radius: 50%;background: rgba(230,230,230,.1);} 
.list9 h4{ font-size: .26rem; color: #fff !important; line-height: .3rem;height: .6rem;margin-bottom: -.3rem; margin-top: .15rem}

.list10{ padding: 1rem 0 0; }
.list10 li{ width: 25%; text-align: center;}
.list10 .bg{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}
.list10 .bg::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #e7eefa;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transform: scale(.8);border-radius: 50vw;opacity: 0;} 
.list10 .bg::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: #164aa6 2px dashed; border-radius: 50%;-webkit-animation: play 25s linear infinite;-moz-animation: play 25s linear infinite;animation: play 25s linear infinite;} 
.list10 .ico{ margin: 0 auto; width: 1.4rem; height: 1.4rem;position: relative;z-index: 1;}
.list10 .ico img{ width: 100%; height: 100%;}
.list10 h4{ font-size: .26rem; color: #000; margin-top: .2rem}


@media(min-width: 1024px){
    .list4 .a:hover .txt::after{ height: 100%;}

    .list5 .a:hover .ico img{ transform: rotate(-45deg);}
    
    .list8 .a:hover span:before{ transform: rotate(0deg); opacity: 1; transform-origin: bottom left}
    .list8s1 .a:hover span{ color: #f8782e}
    .list8s1 .a:hover span:before{ transform: translateX(0); opacity: 1; transform-origin: bottom left}
    .list9 .a:hover{ background: rgba(0,0,0,0)}

    .home5 .fl1 .left .a1:hover .ico img{ transform: rotate(45deg);}
    
    .list10 .a:hover .bg{ transform: scale(1.3)}
    .list10 .a:hover .bg:before{ opacity: 1}
    .list10 .a:hover h4{ transform: translateY(.2rem);}
    
    .list11 .a:hover::before{ transform: scale(1);}
}
@media(max-width: 1600px){
	
}
@media(max-width: 1024px){
    .banner ul li .img .imgLi{ padding-bottom: 50%;}
    .home1 .left .bg1W{ left: -.7rem;top: 0rem;}
    .banner .txt h3{ max-width: 62%}
    .tit1{ margin-bottom: .25rem;margin-top: 0.15rem;}
    .tit1 h3{ font-size: .26rem;}
    .tit1 p, .home5 .tit1 p{ font-size: .16rem;/*! padding: 0 0 .5rem; */margin: .06rem 0 0;/*! padding: 0 0 .4rem; */}
    .home3 .tit2 p{ padding: 0 0 .5rem;margin-bottom: .2rem;}
    .home3 .tit2{ padding: 0 0 0 .5rem;margin: 0;}
    .tit2::before{ left: 0;transform: scale(.5);transform-origin: left center;top: -.3rem;}
    .home3{ padding: 1rem 0 0}
    
    .home1 .right{ padding: .5rem 0 0}

    .home3 .left{ width: 100%;}
    .home3 .right{ width: 100%;margin: 0 0 .5rem;}

    .parallax-content{ top: 0; height: 100%;}
    #bg4W{ width: 100%;clip-path: none;}
    .home3 .right .bd{ width: 100%;}
    .home3 .right::before{ right: -.15rem;top: .15rem;bottom: -.15rem;left: .15rem;}
    .home4 .top{ position: relative; bottom: 0;top: -1rem;}
    .list7 .bg{ top: 0; bottom: 0;}
    .home4 .top .wp .box{ width: 100%;max-width: 100%;margin: 0;}
    
    .home5{ padding: .5rem 0}
    .list10{ padding: .5rem 0 0; }

    .home5 .fl1 .left{ width: 100%;padding: .5rem;}
    .home5 .fl1 .right{ width: 100%;border-top: #fff .04rem solid;}
    .list9{ border: none;}
    
    .list10 .ico{ width: 1.2rem; height: 1.2rem}
    .list7 .img .imgLi{ padding-bottom: 60%;}
    
    .home5 .fl2 .left{ width: 100%;padding: 0;}
    .home5 .fl2 .right{ flex: auto; width: 100%;margin: .4rem 0 0;}
}
@media(max-width: 800px){
    .banner .txt h3{ max-width: 100%; font-size: .2rem;margin-bottom: 6vh;transform: translateY(.3rem);}

    .home1 .left{ width: 100%;}
    .home1 .right{ width: 100%;}
    .home1 .left .bg1{ width: 100%;}
    
    .list4 li{ margin-bottom: .25rem}
    .list4 .txt{ height: 1rem}
    
    .home1 .right{ padding: .4rem 0 .3rem;}
    .list5 li{ width: 100%;}

    .list5 li:nth-child(1) .a{ margin-top: 0;}
    .list5 li:nth-child(2) .a{ margin-top: 0;}

    .list10 .ico{ width: 1rem; height: 1rem}
    .home4 .top{ top: 0;left: -15px;right: -15px;width: calc(100% + 30px);}
    .list7 .ico1 img{ width: .7rem}
    
    .home4 .tit1 h3{ font-size: .4rem;}
    .list8 li{ font-size: .2rem;line-height: .4rem;}
    .home4 .top .wp .box{ padding: .3rem .3rem .5rem}
    .home4 .tit1{ margin-bottom: .2rem}
    
    .home5 .fl1 .left{ padding: .3rem}
    .list5 h4{ margin: .1rem 0 .16rem}
    .list9 .a{ height: 34vw;padding: 0 4px;}
    
    .list9 .ico{ width: .6rem; height: .6rem}
    .home5 .fl1 .left .ico img{ height: .18rem}
    .list9 h4{ font-size: .18rem !important; line-height: 1.375}
    .home5{ padding: .4rem 0}
    .home5 .fl1 .left .ar_article p{ font-size: .15rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;text-align: left;}
    
    .list10 .bg::after{ border: #164aa6 1px dashed;} 
    .list6 .a{ margin: 0;padding: .15rem .4rem .15rem .25rem;}
    .list4 .img{ margin-bottom: .3rem}
    .list8s1 li{ font-size: .2rem;line-height: .4rem;}
}
@media(max-width: 560px){
    .list10 .ico{ width: .7rem; height: .7rem}
}

@media(min-width: 1024px){
}
@media(max-width: 1024px){
}
@media(max-width: 800px){
}
@media(max-width: 560px){
}