﻿body{  font-size: 16px;   }







.preloader {



    width: 100%;



    height: 100vh;



    position: fixed;



    top: 0;



    bottom: 0;



    background: #b71f25;



    z-index: 800;



    text-align: center;



    overflow: hidden;



}



.preloader .box{ overflow: hidden;}



.preloader .box::after{   width: 100%; height: 100%; background: #b71f25; 



display: block; content: ''; position: absolute; top: 0; left: 0;animation: preloader 2s  infinite;/**/}



/* .preloader  .loader-blue{ position: absolute; top: 0; left: 0; transform: translateY(-100%); animation: preloader 1s infinite ; } */







.banner {



	position: relative;



	width: 100%;



	height: 100vh;



	overflow: hidden;



	background: #cccccc;



  }



  .banner:hover .scene-nav {



	opacity: 1;



  }



  .banner:hover .scene-nav.scene-nav--prev {



	left: 30px;



  }



  .banner:hover .scene-nav.scene-nav--next {



	right: 30px;



  }



  .banner canvas {



	display: block;



	position: absolute;



  }



  .scene-nav {



	position: absolute;



	top: 50%;



	margin-top: -20px;



	font-size: 40px;



	line-height: 1;



	color: #fff;



	z-index: 10;



	cursor: pointer;



	opacity: 0;



	transition: 0.45s;



  }



  .scene-nav.scene-nav--prev {



	left: -30px;



  }



  .scene-nav.scene-nav--next {



	right: -30px;



  }



  .slide-dit {



	position: absolute;



	right: 30px;



	bottom: 60px;



	z-index: 12;



	overflow: hidden;



  }



  .slide-dit span {



	display: block;



	float: left;



	margin-right: 35px;



	width: 12px;



	height: 16px;



	cursor: pointer;



	background: url(../images/water.png) center no-repeat;



	transition: 0.44s;



  }



  .slide-dit span:last-child {



	margin-right: 0;



  }



  .slide-dit span.active {



	animation: shake 1s forwards;



	background: url(../images/water1.png) center no-repeat;



  }



  @keyframes shake {



	from,



	to {



	  -webkit-transform: scale(1, 1);



	  transform: scale(1, 1);



	}



	25% {



	  -webkit-transform: scale(0.9, 1.1);



	  transform: scale(0.9, 1.1);



	}



	50% {



	  -webkit-transform: scale(1.1, 0.9);



	  transform: scale(1.1, 0.9);



	}



	75% {



	  -webkit-transform: scale(0.95, 1.05);



	  transform: scale(0.95, 1.05);



	}



	from,



	to {



	  -webkit-transform: scale(1, 1);



	  transform: scale(1, 1);



	}



	25% {



	  -webkit-transform: scale(0.9, 1.1);



	  transform: scale(0.9, 1.1);



	}



	50% {



	  -webkit-transform: scale(1.1, 0.9);



	  transform: scale(1.1, 0.9);



	}



	75% {



	  -webkit-transform: scale(0.95, 1.05);



	  transform: scale(0.95, 1.05);



	}



  }



  @-webkit-keyframes shake {



	from,



	to {



	  -webkit-transform: scale(1, 1);



	  transform: scale(1, 1);



	}



	25% {



	  -webkit-transform: scale(0.9, 1.1);



	  transform: scale(0.9, 1.1);



	}



	50% {



	  -webkit-transform: scale(1.1, 0.9);



	  transform: scale(1.1, 0.9);



	}



	75% {



	  -webkit-transform: scale(0.95, 1.05);



	  transform: scale(0.95, 1.05);



	}



	from,



	to {



	  -webkit-transform: scale(1, 1);



	  transform: scale(1, 1);



	}



	25% {



	  -webkit-transform: scale(0.9, 1.1);



	  transform: scale(0.9, 1.1);



	}



	50% {



	  -webkit-transform: scale(1.1, 0.9);



	  transform: scale(1.1, 0.9);



	}



	75% {



	  -webkit-transform: scale(0.95, 1.05);



	  transform: scale(0.95, 1.05);



	}



  }



  .banner__text {



	position: absolute; color: #fff; top: 50%; transform: translateY(-50%);



	z-index: 55;



	right:5vw;  



}



 



  .banner__text__item {



	  



   display: none;  



 



   animation: scaleIn 1.2s;



	



  }



  .banner__text__item a{display: flex; flex-direction: column; align-items: flex-end;}



  .banner__text__item.active {







 display: block;



 



  }



  



.banner__text__item span{ border: 1px solid #fff; width: 230px;  height: 50px;}







.anim-btn {



    border: 1px solid #FFFFFF;



    border-radius: 0.5em;



    



    letter-spacing: 0.1em;



     



    position: relative;



    overflow: hidden;



    z-index: 1;



    background-color: transparent;



    color: #FFFFFF;



 



    



    transition: .88s ease;  



    text-decoration: none;



}



.anim-btn:hover{



    border:solid 1px #FFFFFF;



}



.anim-btn b {



    position: absolute;



    width: 25%;



    height: 100%;



    background-color: #FFFFFF;



    transform: translateY(150%);



    border-radius: 50%;



    transition: 0.5s;



    z-index: -1;



}







.anim-btn:hover {



    color: #000000;



}







.anim-btn:hover b ,.green-btn:hover b ,.purple-btn:hover b,.pink-btn:hover b{



    transform: translateY(0) scale(3.15);



}







.anim-btn b:nth-child(1),.green-btn b:nth-child(1) ,.purple-btn b:nth-child(1) ,.pink-btn b:nth-child(1) {



    left: calc((1 - 1) * 25%);



    transition-delay: calc((1 - 1) * 0.1s);



}







.anim-btn b:nth-child(2) ,.green-btn b:nth-child(2) ,.purple-btn b:nth-child(2) ,.pink-btn b:nth-child(2){



    left: calc((2 - 1) * 25%);



    transition-delay: calc((2 - 1) * 0.1s);



}







.anim-btn b:nth-child(3) ,.green-btn b:nth-child(3) ,.purple-btn b:nth-child(3),.pink-btn b:nth-child(3){



    left: calc((3 - 1) * 25%);



    transition-delay: calc((3 - 1) * 0.1s);



}







.anim-btn b:nth-child(4),.green-btn b:nth-child(4),.purple-btn b:nth-child(4) ,.pink-btn b:nth-child(4) {



    left: calc((4 - 1) * 25%);



    transition-delay: calc((4 - 1) * 0.1s);



}



.anim-btn b:nth-child(5) ,.green-btn b:nth-child(5),.purple-btn b:nth-child(5) ,.pink-btn b:nth-child(5){



    left: calc((5 - 1) * 25%);



    transition-delay: calc((5 - 1) * 0.1s);



}







.container{ padding: 0 5vw;}



header{ border-bottom: 1px solid rgba(255, 255, 255, 0.5); background-color: transparent; height: 80px; position: fixed; left: 0; top: 0;z-index: 100;  width: 100%;}



header.bg-white { box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);}



header .icon2{ display: none;}



header.bg-white .icon1{ display: none;}



header.bg-white .icon2{ display: inline-block;}



.searchBtn{ cursor: pointer;}



nav{ width:52%; font-size: 16px;}



nav li{ position: relative;}



nav li>a{  color: #fff; line-height: 80px; display: block;}



header.bg-white  nav li>a{ color: #666;}



nav li>a::after{ width: 100%;     transform: scale(0,1); transition: all .36s; height: 3px; background-color: #fff; left: 0; top: 0; position: absolute; content: ''; display: block;}



header.bg-white  nav li>a::after{ background-color: #b71f25;}



nav li>a:hover::after,nav li>a.on::after{transform: scale(1,1);}







nav li ul{display:none;position:absolute; z-index:99999; background:#fff; left:-60px;}



nav li li a{ background:#bf0a1f;font:14px/50px "微软雅黑";  width:180px; text-align:center;opacity: 0.8;}

header.bg-white  nav li li a{ color: #fff;}

nav li li a:hover ,header.bg-white  nav li li a:hover{background:#fff; color:#bf0a1f;}


nav li li ul{display:none;position:absolute; z-index:99999; background:#eee;left:180px; top:0px;}













.contactBtn{ margin-left: 25px;}



.navBtn{ display: none; height: 60px; width: 30px; line-height: 60px; cursor: pointer; background: url(../images/navicon-white.png) no-repeat center center; background-size: auto 20px;}



header.bg-white .navBtn{background: url(../images/navicon.png) no-repeat center center;background-size: auto 20px; }



.navBtn.close{ background: url(../images/close-w.png) no-repeat center center; background-size: auto 20px;}



header.bg-white .navBtn.close{ background: url(../images/close.png) no-repeat center center; background-size: auto 20px;}



/* nav li dl {position: absolute;text-align: center;width: 145px; z-index: 9999; background: #fff;top:86px;left: 50%;margin-left: -72.5px;-webkit-box-shadow: 0 13px 10px 0px rgba(151, 150, 150, 0.22);box-shadow: 0 13px 10px 0px rgba(151, 150, 150, 0.22);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px}



nav  li dl dd {height: 50px;line-height: 50px;border-bottom: 1px solid #eee;transition: all .36s ease; }



nav  li dl dd:last-child {border-bottom: 0}



nav  li dl dd a {font-size: 14px;color: #333 !important;font-weight: normal !important;transition: all .36s ease; display: block}



nav  li dl dd:hover {background: #b71f25}



nav  li dl dd:hover a {color: #fff !important;}



nav  li dl:before {content: "";position: absolute;border-width: 0 9px 9px;border-style: solid;border-color: transparent transparent #fff;top: -9px;left: 50%;margin-left: -9px}



nav  dl {visibility: hidden;opacity: 0;filter: alpha(opacity=0);transform: translateY(20px); transition: all .5s ease; }



nav  li:hover dl {visibility: visible;opacity: 1;filter: alpha(opacity=100);transform: none;  } */



/*.about{ background: url(../images/aboutbg.png) no-repeat bottom left; background-size: 50% auto; padding: 9vh 0  ;}



.about .left a{  text-decoration: underline;transition: all .36s; }



.about .left a::after{ display: block; content: ''; transition: all .36s; position: absolute; top: 50%; transform: translateY(-50%); left: 0;width: 0; height: 1px; background-color: #b71f25;}



.about .left a:hover{ color: #b71f25; padding-left: 50px;}



.about .left a:hover::after{ width: 35px;}



.about .right  .paly{ width: 100px;  cursor: pointer; background: #fff; border-radius: 50%; height: auto;



	box-shadow: 0 0 rgba(255, 255, 255, 0.1),0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1);



	animation: ripple-wave1 1s linear infinite;



	animation-play-state: running;



	opacity: 1;



	visibility: visible;



	transform: scale(1);



	-webkit-animation: ripple-wave1 1s linear infinite; transform: scale(0.8);}



  .aboutNum li span{ position: relative; padding-right: 20px;}



  .aboutNum li span::after{ display: block; content: '+'; color: #065fb3; position:  absolute; top: 0; font-size: 28px; right:  0; }



  .aboutNum li:nth-child(2) span{ padding-right:0}



  .aboutNum li:nth-child(2) span::after{ display: none;}



@keyframes ripple-wave1{



	to {



		box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1),0 0 0 45px rgba(255, 255, 255, 0.02);



	}



  }*/

  

  

 /*about*/

.about{

    background: url("../images/bg@about_index.jpg") center bottom;

}

.about-num{

    padding-top: 50px;

    margin: auto;

    max-width: 1500px;

    justify-content: space-between;

}

.num-item{

    flex-grow: 1;

    border-right: 1px solid #fff;

}

.about_sector_backer .block-sub-title {
  color: #FFF ;
}

.num-item:last-child{

    border: none;

}

.num{

    font-size: 32px;

    color: #FFF;

    text-align: center;

}

.num-desc{

    text-align: center;

    color: #fff;

    font-size: 24px;

    padding-top: 10px;

    font-weight: lighter;

}

.about-main{

    margin: auto;

    padding-top: 80px;

    max-width: 1331px;

    color: rgba(255,255,255,1);





    justify-content: space-around;

    flex-wrap: nowrap;

    align-items: stretch;

}

.about-main a{

    color: rgba(255,255,255,1);

}

.about-main a:hover .item-content{

    /*color: #b71f25;*/

}

.about-left{

    flex-direction: column;

    justify-content: space-around;

    align-items: flex-start;

    flex-basis: 60%;
    font-size: 16px;

    line-height: 2.3em;

    text-indent: 2em;

    padding-right: 5%;

    font-weight: lighter;

    letter-spacing: 1px;



}

.left-item{

    flex-wrap: nowrap;

}



.item-icon{

    flex-direction: column;

    border: 1px solid #fff;

    border-radius: 45px;

    width: 90px;

    height: 90px;

    overflow: hidden;

    flex-shrink: 0;

}

.icon-desc{

    padding-top: 5px;

    font-size: 13px;

}

.item-content{

    padding:0 100px 0 15px;

    line-height: 2em;

    font-weight: lighter;

    letter-spacing: 1px;

}



.about-right{

    flex-basis: 35%;

    flex-grow: 1;

}

.about-right video{

    width: 100%;

}

.block-title {

    display: inline-flex!important;

    justify-content: center!important;

    flex-wrap: nowrap!important;

}



.flex{

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;/*多列的对齐方�?*/

    align-items: center; /*单行垂直位置*/

    align-content: center; /*多行对齐方式*/

}



.sector {

    padding: 80px 0;

}



.block-title{

    display: inline-flex!important;

    justify-content: center!important;

    flex-wrap: nowrap!important;

}

.block-title-text{

    padding: 0 15px;

    margin: auto;

    font-weight: bolder;



}

.block-title-line{

    width: 50px;

    height: 1px;

    background-color: #b71f25;

}

.block-sub-title{

    color: #666;

    font-family: Arial, "Liberation Mono", Courier, "å¾®è½¯é›�?�é»�??";

    letter-spacing: 1px;

    padding-top: 5px;

    font-weight: 500;

    font-size: 20px;

}



 



header.bg-white .contactBtn{ color: #666;}



.about .right>div{ position: absolute; top: 0; left: 0;}







div.video-play{position:fixed;top:0;bottom:0;right:0;left:0;width:100vw;height:100vh;z-index:10001;display:none}



div.video-bg{position:absolute;top:0;bottom:0;width:100%;z-index:1001;background:#0b0b0b;opacity:.8}



div.video-wrap{z-index:1002;position:fixed;top:52%;left:50%;-webkit-transform:translate3d(-50%, -52%, 0);transform:translate3d(-50%, -52%, 0);width:1000px;height:570px;  }







div.video-wrap video{width:100%;height:auto}



div.close-btn{cursor: pointer; transition: all .36s;



 



 text-align: center;



 line-height: 40px;



 z-index: 9999;



 position: absolute;



 background: #000;



 border: 2px solid #fff;



 width: 50px;



 height: 50px;



 border-radius: 50%; opacity: 0.5;



 right: -20px;



 top: -25px;}



 div.close-btn:hover{ transform: rotate(180deg); opacity: 1;}







 .indexTit{ line-height: 2;}







 .solution .bg-black{ opacity: 0.2; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 5; }



 .solution ul{position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 8;}



 .solution ul li{ width: 33.3%; padding:180px 3vw 0;   border-left: 1px solid rgba(255, 255, 255, 0.4); }



.solution ul li .ico{ width: 95px; height: 95px;  border-radius: 50%; position: relative; }



.solution ul li .ico::before{ border-radius: 50%; z-index: -1; content: ''; display: block; width: 112px; height: 112px; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}



.solution ul li a{ overflow: hidden; position: relative;  margin: 0 auto;  border: 1px solid #fff; padding: 8px 20px; border-radius: 40px; transition: all .36s;}



.solution ul li .line{ width: 30px; height: 2px; background-color: #fff; margin: 3vh 0;}



.solution ul li a span{ position: relative; z-index: 5;}



.solution ul li a img{ position: relative; z-index: 5;}



.solution ul li a::after{ width: 100%; height: 0; border-radius:40px ; background-color: #b71f25; content: ''; display: block; position: absolute; bottom: 0; left: 0;  



	transition: all .4s; }



.solution ul li a:hover{ border-color: #b71f25; box-shadow: 0 0 10px rgba(2, 96, 179, 0.5);}



.solution ul li a:hover::after{ height:100%}



.solution ul li { position: relative;}







.solution ul li div .eng{ height:22vh;}



.solution ul li  .ico  i {  position: absolute;  top: 50%; left: 50%; transform:translate(-50%,-50%); content: '';  width: 112px;  height: 112px;  border: 1px solid transparent;  border-radius: 50%; transition:all .6s;}



.solution ul li  .ico i:before { content: ''; position: absolute; left: 0; top: 0;  border: 1px solid #fff; width: 100%;height: 100%;  border-radius: 50%;  opacity: 0}



.solution ul li  .ico i:after {content: '';position: absolute; left: 0;top: 0;border: 1px solid #fff; width: 100%; height: 100%; border-radius: 50%;opacity: 0}



.solution ul li:hover .ico  i:before { animation: serv_one_border .9s 0s ease 1; }



.solution ul li:hover  .ico i:after {  animation: serv_one_border 1.5s 0s ease 1;}



.solution ul li::after{ width: 100%; height: 0; position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); display: block; content: ''; transition: all .5s; z-index: 1;}



.solution ul li:hover::after{ height: 100%;}



.solution ul li>div{ position: relative; z-index: 5;}



.solution ul li:hover a{ transform: translateY(-10px); }



 



.solution ul li:nth-child(1) .ico{ background: url(../images/solutionicon1.png) no-repeat center center #fff;}



.solution ul li:nth-child(2) .ico{ background: url(../images/solutionicon2.png) no-repeat center center #fff;}



.solution ul li:nth-child(3) .ico{ background: url(../images/solutionicon3.png) no-repeat center center #fff;}



.solution ul li:nth-child(4) .ico{ background: url(../images/solutionicon4.png) no-repeat center center #fff;}





.solution ul li.on:nth-child(1) .ico{background: url(../images/solutionicon1-white.png) no-repeat center center #b71f25;}



.solution ul li.on:nth-child(2) .ico{background: url(../images/solutionicon2-white.png) no-repeat center center #b71f25;}



.solution ul li.on:nth-child(3) .ico{background: url(../images/solutionicon3-white.png) no-repeat center center #b71f25;}



.solution ul li.on:nth-child(4) .ico{background: url(../images/solutionicon4-white.png) no-repeat center center #b71f25;}







.solutionTit{ position: absolute; z-index: 10; top:120px ; left: 50%; transform: translateX(-50%);}



.solutionImg .img{ display: none; transition: all .36s; 



	animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93);/*transition: all .36s;*/}



.solutionImg .img.on{ display: block;}



.solutionImg{ overflow: hidden;}



 







.advantages{ background: url(../images/advantagesbg.jpg) no-repeat center left; background-size: 50% 100%;}



.advantagesMore{ border: 1px solid #a5a5a5; width: 265px; height: 65px; position: relative;}



.advantagesMore span{ position: relative; z-index: 5;}



.advantagesMore::after{ position: absolute; z-index: 1; top: 0; left: 0; width: 0; height: 100%; content: ''; display: block; background-color: #b71f25; transition: all .36s;}



.advantagesMore:hover::after{ width: 100%;}.advantagesMore:hover{ color: #fff;}







.advantagesUl li{ position: relative; width: 20%; border-radius: 15px; overflow: hidden; transition: all .36s; }



.advantagesUl li.on{ width: 37%;}



.advantagesUl li .img::after{ display: block; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;  z-index: 5;}



.advantagesUl li .img img{ width: 100%; height: 560px; object-fit: cover; position: relative; z-index: 2; }



.advantagesUl li .txt{ padding:100px 30px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}



.advantagesUl li .txt .bottom{   width: 62px; height: 62px; background-color: #b71f25; border-radius: 50%;   }



.advantagesUl li .text{ transition: all .56s; padding: 35px 50px; position: absolute;  bottom: 30px; left: 30px; width: calc(100% - 60px);   z-index: 10;}



.advantagesUl li .text span{ position: absolute; left: 50px; top: -40px;}



.advantagesUl li .text{ transform: translateX(-200%); border-radius: 20px;}



.advantagesUl li .txt .top,.advantagesUl li .txt .bottom{ transition: all .56s;}



.advantagesUl li.on .txt .top,.advantagesUl li.on .txt .bottom{  transform: translateX(200%);}



.advantagesUl li.on .text{  transform: translateX(0);}



.advantagesUl li.on .img::after{ background-color: rgba(0, 0, 0, 0.1);}



#caseSwiper .swiper-slide .DIN span{ position: relative;  z-index: 9;}

#caseSwiper .swiper-slide .DIN::after{ transition: all .36s; display: block; content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: #bf0a1f;  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 5;}

#caseSwiper .swiper-slide .DIN::before{ width: 0; height: 1px; background-color: #bf0a1f; left: 0; position: absolute; top: 50%; transform: translateY(-50%); display: block; content: ''; transition: all .36s;} 

#caseSwiper .swiper-slide .txt{ padding: 20px 15px;}

#caseSwiper .swiper-slide:hover .img img{ transform: scale(1.1);}



#caseSwiper .swiper-slide:hover  .DIN::after{ left: 60px;}

#caseSwiper .swiper-slide:hover  .DIN{padding-left: 40px;}

#caseSwiper .swiper-slide:hover  .DIN:before{ width: 25px;}

#caseSwiper .swiper-slide:hover { color: #bf0a1f; }





.case .prev,.case .next{ width: 70px; z-index: 10; height: 70px; cursor: pointer; border-radius: 50%; border: 1px solid #e5e5e5; position: absolute; top: 50%; margin-top: -35px;}

.case .prev{ left: -80px;}

.case .next{ right: -80px;}

.case .prev:hover,.case .next:hover{ background-color: #bf0a1f; border-color: #bf0a1f;}

.case .prev:hover img,.case .next:hover img{filter: grayscale(100%) brightness(500%);}

 



  /* .case .swiper-wrapper:hover > .swiper-slide:not(:hover) img{



	filter:   blur(5px)  ;  



  } */







.indexNew .item{  width: 40%; display: block;}



.indexNew .item a{ display: block;}



.indexNew .item.img img{ width: 100%; height: 600px;  object-fit: cover;}



.indexNew .item .txt{ position: absolute;  left: 0; top: 0; width: 100%; height: 100%; z-index: 5;



	background-image: linear-gradient(to bottom, transparent , rgba(0 0 0 / 0.5));



	 /* background-color: rgba(0, 0, 0, 0.2); */



 padding: 40px; justify-content: flex-end;}



.indexNew .item:last-child{ width: 56%; display: flex; }



.indexNew .newslink{ display: flex !important; flex-direction: column; justify-content: space-between;}



.indexNew .item:hover.img img{ transform: scale(1.1);}



.indexNew  .newslink{padding: 40px 50px; position: relative;}



.indexNew  .newslink:nth-child(2) {

    margin: 20px 0;

}



.indexNew .newslink>div{ position: relative; z-index: 5;    display: flex;

    flex-wrap: nowrap;

    padding: 20px;

    align-items: center;}

	

	



.indexNew .newslink::after{ width: 0; height: 100%; position: absolute; top: 0; left: 0; background-color: #b71f25; content: ''; display: block; transition: all .36s;}



.indexNew .newslink:hover,.indexNew .newslink:hover .color-999{  color: #fff;}



.indexNew .newslink:hover::after{ width: 100%;}





 .newDate {

    padding-right: 30px;

    border-right: 1px solid #d1d7e5;

    transition: all 0.5s;

}



.newDate em {

    font-size: 60px;

    height: 64px;

    line-height: 64px;

}



.newDate span {

    font-size: 18px;

    width: 64px;}



.newDatea{ padding-left:30px;}



.newslink .icon2{ display: none;}



.newslink:hover .icon1{ display: none;}



.newslink:hover .icon2{ display: inline-block;}



.newslink .DIN::after{ width: 0; transition: all .36s; height: 1px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #fff; 



display: block; content: '';}



.newslink:hover .DIN:after{ width: 35px;}



.newslink:hover .DIN{ padding-left: 50px;}











.State {



	position: relative;



	width: 100%;



	/* height: 615px; */



	overflow: hidden;



	padding-bottom: 60px;



}







.index_kehu_box {



	/* position: absolute; */



	/* left: 0px; */



	/* top: 0px; */



	width: 100%;



	/* height: auto; */



	z-index: 3;



}





.in5-sec {

	padding: 90px 0;

	background-color: #bf0a1f;

	background-image:url(../images/in5bg.webp); 

background-position: center 0; 

background-repeat: no-repeat; 

background-attachment:fixed; 

background-size: cover; 

-webkit-background-size: cover; 

-o-background-size: cover; 

zoom: 1; 

}

.in5-sec .main{

	margin-top: 60px;

}

.in5-sec .intitle {

	color: #fff;

}

.in5-sec .intitle .tit:after {

    display: none;

}

.in5-sec .main li{

	float: left;

	width: 33.33%;

	padding: 35px 20px;

	position: relative;

	margin-top: -2px;

	border-left: 1px solid rgba(255,255,255,.2);

	border-top: 1px solid rgba(255,255,255,.2);

}

.in5-sec .main li:nth-child(1),

.in5-sec .main li:nth-child(2),

.in5-sec .main li:nth-child(3){

	border-top: 0;

	

	

}

.in5-sec .main li:nth-child(3n+1){

	border-left: 0

}

.in5-sec .main li:before,

.in5-sec .main li:after{

	content: "";

	width: 10px;

	height: 10px;

	border-radius: 50%;

	background: #ffffff;

	position: absolute;

	left: -4.5px;

}



.in5-sec .main li:nth-child(3n+1):before,

.in5-sec .main li:nth-child(3n+1):after{

	display: none;

}

.in5-sec .main li:before{

	top: -5px;

}

.in5-sec .main li:after{

	bottom: -5px;

}

.in5-sec .main li img{

	position: absolute;

	left: 20px;

	top: 35px;

	width: 100px;

	display: block;

	border-radius: 50%;

	-moz-transition: all 0.3s;

	-webkit-transition: all 0.3s; 

	transition: all 0.3s; 

}

.in5-sec .main li img:hover{

	top: 40px;

	background: #bf0a1f;

}

.in5-sec .main li .tbox{

	padding-left: 150px;

	font-size: 16px;

	color: #fff;

	line-height: 30px;

	height: 120px;

}





.ys h2{text-align: center;}

.ys h2 a{color: #24bcdc;font-size: 36px;}

.ys h2 a span{color: #22456b;font-size: 48px;}

.ys h2 em{color: #393e42;font-size: 18px;display: block;padding: 18px 0 9px 0;}

.ys h2 b{color: #c2c2c2;font-size: 7px;display: block;font-family: Arial;letter-spacing: 0.5px;text-transform: uppercase;font-weight: normal;}







.ys_con{padding-top: 110px;position: relative;margin-top: 50px;}

.ys_con ul{position: absolute;top: 0; z-index:9; width:100%;}

.ys_con ul li{ width:18%; height: 70px; float: left; margin-left:2.5%;color: #FFF; line-height:70px;}

.ys_con ul li a{display: block;font-size: 16px;color: #FFF; padding-left: 75px;}

.ys_con ul li a em{display: block;font-size: 11px;color: #49617f;padding-top: 5px;}





.ys_con ul li.li01{background:url(../images/01.png) no-repeat 5px 15px #b71f25;}

.ys_con ul li.li02{background:url(../images/02.png) no-repeat 5px 15px #b71f25;}

.ys_con ul li.li03{background:url(../images/03.png) no-repeat 5px 15px #b71f25;}

.ys_con ul li.li04{background:url(../images/04.png) no-repeat 5px 15px #b71f25;}

.ys_con ul li.li05{background:url(../images/05.png) no-repeat 5px 15px #b71f25;}



.ys_con ul li.li01:hover,.ys_con ul li.li01.cur{background:url(../images/01.png) no-repeat 5px 15px #2d2d2d;}

.ys_con ul li.li02:hover,.ys_con ul li.li02.cur{background:url(../images/02.png) no-repeat 5px 15px #2d2d2d;}

.ys_con ul li.li03:hover,.ys_con ul li.li03.cur{background:url(../images/03.png) no-repeat 5px 15px #2d2d2d;}

.ys_con ul li.li04:hover,.ys_con ul li.li04.cur{background:url(../images/04.png) no-repeat 5px 15px #2d2d2d;}

.ys_con ul li.li05:hover,.ys_con ul li.li05.cur{background:url(../images/05.png) no-repeat 5px 15px #2d2d2d;}



.ys_con ul li a:hover em{color: #b9e4f1;}


/*.ys_con p{ text-align:center;}*/

.ys_contt{    position: absolute;

    z-index: 10;

    top: 50%;

    left: 50%;

    transform: translateX(-50%);

}}







@-webkit-keyframes bgScroll {



	from {



		-webkit-transform: translateY(0);



		transform: translateY(0)



	}







	to {



		-webkit-transform: translateY(-33.333%);



		transform: translateY(-33.333%)



	}



}







@keyframes bgScroll {



	from {



		-webkit-transform: translateY(0);



		transform: translateY(0)



	}







	to {



		-webkit-transform: translateY(-33.333%);



		transform: translateY(-33.333%)



	}



}















footer{ background-color: #2d2d2d; color: #fff;}



.w34{ width: 34%;}



footer .top{ border-bottom: 1px solid rgba(255, 255, 255, 0.1);}



.footSearch .text{ width:73%; height: 56px; padding-left: 15px; line-height: 56px;}



.footSearch .submit{ width:27%; height: 56px; text-align: center; line-height: 56px;}



footer .center{border-bottom: 1px solid rgba(255, 255, 255, 0.1);}



footer .center .right{ width: 38%; border-left: 1px solid rgba(255, 255, 255, 0.1); padding-left: 4%; padding-top: 60px; padding-bottom: 60px;}



footer .center .left{ width: 62%;padding-top: 60px; }



footer .center .left dl{ width: 28%;   line-height: 2.2;}



footer  a{ color: #fff;}



footer  a:hover{  opacity: 0.8;}



footer .center dt{ font-size: 18px; margin-bottom: 10px;}



footer .bottom{ padding: 20px 0;}







.pop{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: rgba(0 0 0 / 0.8); display: none;}



.searchPop .footSearch{ width: 50%;}



.searchClose{ position: absolute; top: 10vh; right: 10vw; cursor: pointer; opacity: 0.8; transition: all .36s;}



.searchClose:hover{ opacity: 1; transform: rotate(180deg);}







.neiBan{ height: 710px;  }



 



.neiBan .main{  justify-content: center;  }



/*.main{ padding: 0 10vw;}*/



.mainbox{ margin: 0 10vw;}







.classTwo{ line-height: 80px;}







.classTwo a{ padding: 0 5vw; border-left: 1px solid #e5e5e5;}



.classTwo a:first-child{ border-left: 0;}



.classTwo a:hover{ color: #b71f25;}



.classTwo a.on span{ line-height: 80px; padding: 0 2vw; display: inline-block;  border-bottom: 2px solid #b71f25;}







.aboutTop{ background: url(../images/abouttopbg.png) no-repeat right top #f7fbff;background-attachment: fixed; position: relative;}



.aboutTop .top .left{ width: 55%; padding:4vh 0 2vh 0;}



.aboutTop .top .img{ width: 45%; }



.aboutTop .top .img img{ width: 100%; height: 100%; object-fit: cover;}



.aboutTop .top .left .line{ background-color: #b71f25; width: 58px; height: 4px; margin: 3vh 0;}



 



.aboutTop .top .left  .info{  height: 400px; overflow-y: scroll;  padding-right: 2vw; margin-right: 2vw;  }



.aboutTop .top .left  .info::-webkit-scrollbar {/*滚动条整体样�?*/    /*高宽分别对应横竖滚动条的尺寸*/  width: 3px;}



.aboutTop .top .left  .info::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #b71f25; width: 3px; }



.aboutTop .top .left  .info::-webkit-scrollbar-track {/*滚动条里面轨�?*/border-radius: 3px; background: #e5e5e5; width: 3px; }







.aboutTop  .center .paly{ width: 100px;  cursor: pointer; background: #fff; border-radius: 50%; height: auto;



	box-shadow: 0 0 rgba(255, 255, 255, 0.1),0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1);



	animation: ripple-wave1 1s linear infinite;



	animation-play-state: running;



	opacity: 1;



	visibility: visible;



	transform: scale(1);



	-webkit-animation: ripple-wave1 1s linear infinite; transform: scale(0.8);}



.aboutTop  .center>div{ position: absolute; top: 0; left: 0;}



.line-height1-6{ line-height: 1.6;}







.cultureUl{ align-items: center;}



.cultureUl li{  width: 25%; position: relative; transition: all .36s;}



.cultureUl li>img{ transition: all .36s;}



.cultureUl li .txt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 50%;  transition: all .36s;



 background-color: rgba(0 0 0 / 0.2); }



 .cultureUl li .txt img{ width: 60px;}



.cultureUl li:nth-child(2n){ margin-top: 40px;}



.cultureUl li:hover{ z-index: 5;   /* transform:  translateY(-20px);  scale(1.05) box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); */   }



.cultureUl li:hover .txt{  background-color: rgba(0 0 0 / 0.5); margin: 20px;  padding-top: 0; width: calc(100% - 40px ); height:  calc(100% - 40px );}



.cultureUl li:hover>img{ 	filter:   blur(5px)  ;  }











.honor-box {



    padding-top: 65px;



    padding-bottom: 44px;



    background-attachment: fixed;



    background-position: center;



    background-size: cover;



    overflow: hidden;



  }



  .honor-box .honor-titles {



    padding-left: 74px;



    color: #fff;



    font-size: 16px;



    font-weight: normal;



  }



  .honor-swiper {



    padding-left: 12.29%;



    margin-top: 80px;



    height: 610px;



    cursor: grab;



  }



  .honor-slide {



    height: 100%;



    width: 2595px;



    background: url(../images/honor.png) 54px 62px no-repeat;



    margin-left: -100px;



  }



  .honor-slide:first-child {



    margin-left: 0;



  }



  .honor-item {



    position: absolute;



    cursor: pointer;



  }



  .honor-item:hover figure {



    transform: translateY(-10px);



  }



  .honor-item figure {



    display: block;



    width: 108px;



    height: 108px;



    border: 6px solid #fff;



    border-radius: 50%;



    transition: 0.45s;



  }



  .honor-item figure img {



    display: block;



    width: 100%;



    height: auto;



    border-radius: 50%;



  }



  .honor-item time {



    display: block;



    margin-top: 18px;



    line-height: 1;



    color: #fff;



    font-size: 18px;



    text-align: center;



  }



  .honor-item1 {



    left: 0;



    top: 35.57%;



  }



  .honor-item2 {



    left: 17.18%;



    top: 29.5%;



  }



  .honor-item3 {



    left: 29.59%;



    top: 19.344%;



  }



  .honor-item3 figure {



    width: 188px;



    height: 188px;



  }



  .honor-item3 time {



    margin-top: 22px;



    font-size: 36px;



  }



  .honor-item4 {



    left: 43.853%;



    top: 47.377%;



  }



  .honor-item5 {



    left: 57.92%;



    top: 10px;



  }



  .honor-item6 {



    left: 53.95%;



    bottom: 0;



  }



  .honor-item7 {



    left: 64.74%;



    top: 51.475%;



  }



  .honor-item7 figure {



    width: 188px;



    height: 188px;



  }



  .honor-item7 time {



    margin-top: 22px;



    font-size: 36px;



  }



  .honor-item8 {



    left: 81.96%;



    top: 53.77%;



  }



  .honor-item9 {



    right: 0;



    top: 37.54%;



  }



  .honor-hand {



    margin-top: 36px;



    display: flex;



    display: -webkit-flex;



    justify-content: center;



    -webkit-justify-content: center;



    align-items: center;



    -webkit-align-items: center;



  }



  .honor-hand i {



    display: inline-block;



    color: #fff;



    font-size: 18px;



    line-height: 1;



  }



  .honor-hand span {



    display: block;



    margin: 0 22px;



    color: #fff;



    line-height: 1;



    font-size: 28px;



    animation: handMove 1s infinite;



  }



  @keyframes handMove {



    0% {



      opacity: 1;



      transform: translateX(4px);



    }



    100% {



      opacity: 0.2;



      transform: translateX(-4px);



    }



  }



.honorPopBox{ width: 660px;  height: 660px; border-radius: 50%;}



 



.honorPopBox .info{ max-height: 260px; overflow-y: scroll;  margin: 70px; padding-right: 30px;  }



.honorPopBox .info::-webkit-scrollbar {/*滚动条整体样�?*/    /*高宽分别对应横竖滚动条的尺寸*/  width: 3px;}



.honorPopBox .info::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #b71f25; width: 3px; }



.honorPopBox .info::-webkit-scrollbar-track {/*滚动条里面轨�?*/border-radius: 3px; background: #f2f5f9; width: 3px; }



.honorClick h1,.honorClick h6{ display: none;}







 .programmeNav a{ line-height: 80px; padding: 0 3vw;} .programmeNav a:hover{ color: #b71f25;}



 .programmeNav a.on{ color: #b71f25;} .programmeNav a.on span{ border-bottom: 2px solid #b71f25; line-height: 80px; display: inline-block;}



 .middleOne{ background: url(../images/middleonebg.jpg) no-repeat center center; background-size: cover;}



 .middleOne .main .right{  justify-content: center; }



 .middleTwo ul li { transition: all .36s;}



 .middleTwo ul li img{ height: 54px; margin-bottom: 20px;}



 .middleTwo ul li:hover{ transform: translateY(-20px);}



 .middleTwo ul li:hover img{animation: jello 1.2s;}







  .middleThere{ background: url(../images/middletherebg.jpg)  no-repeat center center; background-size: cover;  padding: 30vh 0; }  



 /* .middleThere .main{ position: absolute; top: 0; left: 0; width: 100%;} */



 .middleThere .main .w50{ justify-content: center;}







 /* .middleFour{ width: 100%; height: 100%; background-image: url(../images/middlefourbg.jpg);} */



 .middleFour  figure{ position: absolute; top: 10%; left: 10vw;}



 .middleFour  figure ul li{ position: relative;padding-left: 25px;}



 .middleFour figure ul li::after{ background-color: #b71f25; display: block; content: ''; width: 10px; height: 10px; border-radius: 50%;



   position: absolute; top: 50%; left: 0; transform: translateY(-50%); 



}







.middleFour   ul.item{ background-color: #fff; border: 2px solid #000; border-radius: 8px; padding: 20px; z-index: 9;



 position: absolute; }



 .middleFour   ul.top{left: 40%; top: 10.5%;}



.middleFour   ul.item li{ margin-bottom: 12px;}



.middleFour   ul.item li:last-child{ margin-bottom: 0;}



/* .middleFour   ul.item::after{ background: url(../images/middlefoursan.png);} */



.middleFourSan{ position: absolute; top: 28%; left: 52%; z-index: 4; width:21.2% ;}



.middleFour   ul.bot{left: 48.4%; top: 55%;}



.middleFourSan2{ position: absolute; top: 70%; left: 60%; z-index: 4;  width:21.2% ;}







.middleFive{ background: url(../images/middlefivebg.png) no-repeat center top  ; background-size: 100% auto; margin-top: -15vh; position: relative; z-index: 10;



 padding: 20vh 0 10vh;}



.middleFiveImg{ width: 48%;}



.middleFive .text{ padding-left: 10vw; width: 45%;}



.middleFive ul li{ width: 31%;  padding: 30px 0; box-shadow: 0 0 10px rgba(0 0 0 / 0.05); border-radius: 8px; margin-bottom: 25px; overflow: hidden; transition: all .36s;}



.middleFive ul li img{   filter: grayscale(100%); opacity: 0.6;}



.middleFive ul li:hover{ box-shadow: 0 0 10px rgba(2, 96, 179, 0.5); transform: translateY(-10px);}



.middleFive ul li::after{ position: absolute; content: ""; left: -81px; top: 0; height: 0; width: 165px;  background: #b71f25;  transition: all 0.5s cubic-bezier(.73,.02,.31,1.02); transform: rotate(-45deg);



}



.middleFive ul li:hover:after{height: 50px;}



.middleFive ul li::before {position: absolute;content: "";right: -81px;bottom: 0;height: 0;width:165px;background: #b71f25;transition: all 0.8s cubic-bezier(.73,.02,.31,1.02);



transform: rotate(-45deg);}



.middleFive ul li:hover:before{height: 50px;}



.middleFive ul li:hover img{animation: jello 1.2s; filter: grayscale(0%); opacity: 1;}







.middleSix{ background: url(../images/middlesixbg.jpg) no-repeat center center; background-size: cover; padding: 12vh 0;}



.middleSix .main{   justify-content: center;   }



.middleSix ul{ width: 50%; margin-top: 10vh; }



.middleSix ul li:nth-child(2){ margin-left: 14px }



.middleSix   p{line-height: 2.7; position: relative; padding-left: 18px;}



.middleSix   p::after{ content: ''; display: block;  width: 5px; height: 5px; border-radius: 50%; background-color: #fff; position: absolute; left: 0; top: 50%;



transform: translateY(-50%);}







.middleSeven{ background: url(../images/middlesevenbg.jpg) no-repeat center center; background-size: cover;padding: 12vh 0;}



.w48{ width: 42%;}



.middleSeven ul{ margin-top: 10vh;}



.middleSeven ul li{ position: relative;}



.middleSeven .pic{ transition: all .36s; margin-bottom: 25px; background-color: #fff; position: relative; width: 88px; height: 88px; border-radius: 50%; box-shadow: 4px 3px 21px rgba(0, 0, 0, 0.14);}



.middleSeven .pic img{ width: 40%;}



.middleSeven ul li:hover .pic{ background-color: #b71f25;}



.middleSeven ul li:hover .pic img{filter: grayscale(100%) brightness(500%);animation: jello 1.2s;}



.middleSeven .pic i:before { content: ''; position: absolute; left: 0; top: 0;  border: 1px solid #b71f25; width: 100%;height: 100%;  border-radius: 50%;  opacity: 0}



.middleSeven .pic i:after {content: '';position: absolute; left: 0;top: 0;border: 1px solid #b71f25; width: 100%; height: 100%; border-radius: 50%;opacity: 0}



.middleSeven li:hover .pic  i:before { animation: serv_one_border .9s 0s ease 1; }



.middleSeven li:hover .pic i:after {  animation: serv_one_border 1.5s 0s ease 1;}



.middleSeven li::after{ width: 135px;  height: 1px; background-color: #989595; left: 110%; top: 88px; display: block;  content: ''; position: absolute;}



.middleSeven li:last-child:after{ display: none;}



.font-light{ font-weight: 100;}



.middleEight{ background: url(../images/middleeightbg.jpg) no-repeat center center; background-size: cover; padding: 10vh 0;}







.middleEight ul{ padding: 0 2vw;}



.middleEight ul li{ background-color: rgba(2, 96, 179, 0.1); position: relative; padding: 100px 50px 50px; width: 18.5%; border-radius: 15px;



 overflow: hidden; transition: all .36s;}



.middleEight .item span{ color: #b71f25; position: absolute; top: 30px;left: 30px; font-size: 20px; z-index: 5;}



.middleEight .item>img,.middleEight .item>div{ position: relative; z-index: 5;}



.middleEight .item>img{ width: 25%;}



.middleEight .item::after{ content: ''; display: block; background-color: rgba(2, 96, 179, 0.3);  left: -120px; top: -120px; position: absolute; z-index: 1;



 width: 240px; height: 240px; border-radius: 50%; transition: all .36s;}



 .middleEight .item:hover::after{ width: 100%; height: 100%; top: 0; left: 0; border-radius: 0; }



.middleEight .item:hover{ box-shadow: 0 0 15px rgba(2, 96, 179, 0.5); transform: translateY(-2vh);}



.middleEight .item:hover img{ animation: jello 1.2s;}







#middleEightswiper .item{background-color: rgba(2, 96, 179, 0.1); overflow: hidden; height: auto;    padding: 50px 12px 12px;}







.middleNine{ background: url(../images/middleninebg.jpg) no-repeat center center; background-size:  cover; padding: 10vh 0;}



.middleNine ul{height: 785px;}



 .middleNine li{ transition: all .1s; width: 21%; height: 600px; background-color: #fff;  padding:25px 5px; position: relative;  z-index: 10; }



 



.middleNine li.on{ width: 37%;    z-index: 20; height: 780px; background-color: #eef7ff; padding: 25px 25px 0;



  box-shadow:0px 0px 10px 0px rgba(0,0,0,.1); border-radius: 20px;}  



 



.middleNine li.on::after{display: block;content: '';  background-color: rgba(0 0 0 / 0.2); clip-path: polygon(0 100%, 0 0, 100% 100%);



 position: absolute; width: 35px; height: 90px; right: -35px; top: 0; z-index: 15; } 



 .middleNine li:last-child.on::after { display: none;}



.middleNine .item .img{ width: 100%; transition: all .36s;}



.middleNine .item:hover .img img{ transform: scale(1.1);}



.middleNine .item .img figure{ width: 100%; height: 25%; position: absolute; left: 0; bottom: 0; background-color: rgba(0 0 0 / 0.3);}



.middleNine .item  dl{ color: #666; border-bottom: 1px solid #e5e5e5; padding: 20px 0; line-height: 1.6;}



.middleNine .item  dl:last-child{ border-bottom: none;}



.middleNine .item  dl dt{  font-size: 18px; white-space: nowrap; }.middleNine li  dd{  font-size: 16px; margin-left: 15px;}







.middleNine li.on dt{  font-size: 24px; text-decoration: underline; color: #000;}



.middleNine li.on dd{ font-size: 19px; margin-left: 25px;} 



.middleNine li.on figure{ background-color: rgba(2, 96, 179, 0.5) !important;}







#middleNineswiper .swiper-slide{ padding: 15px; background-color: #fff;}



#middleNineswiper .swiper-slide-active{background-color: #eef7ff; }



#middleNineswiper .swiper-slide dl{ flex-direction: column; padding: 8px 0; align-items: flex-start;}



#middleNineswiper .swiper-slide dt{ font-size: 16px;  }



#middleNineswiper .swiper-slide-active figure{ background-color: rgba(2, 96, 179, 0.5);}











.middleTen li { width: 20%;}



.middleTen  .item .txt{ transition: all .36s;width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0 0 0 / 0.5); color: #fff; align-items: flex-start; justify-content: center; padding-left: 18%; }



.middleTen .item .icon{ position: relative;  margin-bottom: 60px; border: 1px solid #fff; border-radius: 50%; width: 85px; height: 85px;}



.middleTen .item .line{ width: 33px; height: 3px; background-color: #fff; margin-bottom: 40px;} 



.middleTen .item  .en{ margin-top: 40px; transition: all .36s;}



.middleTen .item  .ch{ transform: translateX(-150%); transition: all .36s; opacity: 0;}



.middleTen .item:hover .txt{ padding-left: 12%; background: rgba(0 0 0 / 0.7); padding-top: 20vh;}



.middleTen .item:hover .en{  transform: translateX(150%); opacity: 0;}



.middleTen .item:hover .ch{ transform: translateX(0); opacity: 1;}



.middleTen .item  .icon  i {  position: absolute;  top: 50%; left: 50%; transform:translate(-50%,-50%); content: '';  width: 100%;  height: 100%;  border: 1px solid transparent;  border-radius: 50%; transition:all .6s;}



.middleTen .item  .icon i:before { content: ''; position: absolute; left: 0; top: 0;  border: 1px solid #fff; width: 100%;height: 100%;  border-radius: 50%;  opacity: 0}



.middleTen .item  .icon i:after {content: '';position: absolute; left: 0;top: 0;border: 1px solid #fff; width: 100%; height: 100%; border-radius: 50%;opacity: 0}



.middleTen .item:hover .icon  i:before { animation: serv_one_border .9s 0s ease 1; }



.middleTen  .item:hover  .icon i:after {  animation: serv_one_border 1.5s 0s ease 1;}



 .middleTen .item:hover .icon img{animation: jello 1.2s;}  



 .middleTen .item:hover>img{ transform: scale(1.1);}



















 .middle11{ background: url(../images/middle11bg.jpg) no-repeat center center; background-size: cover; padding: 10vh 0 1vh;}



 .middle12{  padding: 8vh 0;}



 .middle13{ padding: 8vh 2vw; width: 100%;}



 .middleThirteen{padding: 8vh 2vw; width: 100%;}



 #yyPic{ height: 820px;}



 #yyPic .swiper-slide{ background-color: #fff;  height: calc((100% - 30px) / 2);}



 #yyPic .swiper-slide .img{ height: 85%;}



 #yyPic .swiper-slide .img img{ width: 100%; height: 100%; object-fit: cover;}



 #yyPic .swiper-slide .txt{ height: 15%; width: 100%; display: flex; }



 #yyPic .swiper-slide:hover img{ transform: scale(1.1);}







 .wap_show{ display: none;}



 .familyPaading{ padding: 8vh 0;}







 .family1 .left img{ box-shadow: 0 0px 21px rgba(0 0 0 / 0.15);}



 .family1 .right{  padding-left:3vw;}







 .family1 .right .item{ position: relative; box-shadow: 0 0px 21px rgba(0 0 0 / 0.05); padding: 25px 40px; border-radius: 12px;  transition: all .36s; }



 .family1 .right .item .img{ border: 1px dashed #ddd; width: 90px; height: 90px; border-radius: 50%; transition: all .88s;}



 .family1 .right .item .img img{ width: 45%;}



 .family1 .right .item .txt{ width: calc(100% - 120px);}



 .family1 .right .item:hover{ box-shadow: 0 0 20px rgba(2, 96, 179, 0.3); color: #fff;}



 .family1 .right .item::after{ width: 0;transition: all .36s;  height: 100%; position: absolute; top: 0; left: 0; background-color: #b71f25; display:  block; content: ''; z-index: 1;}



 .family1 .right .item>div{ position: relative; z-index: 5;}



 .family1 .right .item:hover::after{ width: 100%;}



 .family1 .right .item:hover  .img{ transform: rotate(180deg);}



 .family1 .right .item:hover  .img img{ filter: grayscale(100%) brightness(500%); }







 .family2{ background:  #f5faff;  }



 .family2Img{ width: 50%; }



 .family2 .right{  padding: 13vh 10vw 13vh 30px;   }



 



 .family2 .right li .icon{ height: 120px; width: 120px; border-radius: 50%; background-color: #fff; position: relative; overflow: hidden;}



 .family2 .right li .icon img{ width: 52%; z-index: 10;}



 .family2 .right li .icon::after{display: block; z-index: 2; content: ''; width: 18%;  height: 18%; border-radius: 50%; background-color: #e8f2ff; position: absolute;



   top: 60%; left: 60%;transition: all .36s; }



 .family2 .right li .txt{ width: calc(100% - 150px); margin-left: 30px;}



 .family2 .right li .icon::before{ z-index: 1; width: 100%; height: 100%; display: block; content: ''; background-color: #0079ff; position: absolute; top: 0; left: 0;



   border-radius: 50%; transform: scale(0,0);  transition: all .36s;}



   .family2 .right li:hover  .icon{ box-shadow: 0 0 10px rgba(0 0 0 / 0.05);}



   .family2 .right li:hover  .icon::before{ transform: scale(1,1);}



   .family2 .right li:hover  .icon::after{  top:  76%; left: 76%; background-color: #fff; }



   .family2 .right li:hover  .icon img{filter: grayscale(100%) brightness(500%);}



.family2 .right li:hover { transform: translateY(-12px);}



.familyTel{ width: 695px; height: 65px; border-radius: 33px; box-shadow: 0 0px 15px rgba(0 0 0 / 0.15);}



.familyTel .tit{ color: #fff; height: 65px; border-radius: 33px; text-align: center; width: 40%;  background-color: #eb9925;}



.familyTel .con{ height: 65px; width: 60%;}







.family3 ul{  position: relative; width: 50%;}



.family3 ul li{ line-height: 2; position: absolute; box-shadow: 0 0px 8px rgba(0 0 0 / 0.15); padding: 14px 24px; border-radius: 5px; transition: all .36s; }



.family3 ul li span{ width: 36px; height: 36px; font-size: 20px; text-align: center; line-height: 36px; background-color: #0079ff; color: #fff; border-radius: 3px;



  margin-right: 8px;}



.family3  ul li:nth-child(1){top: 12%; left: 20%;}



.family3  ul li:nth-child(2){top: 36%;  right: 0;}



.family3  ul li:nth-child(3){top: 40%; left: 4%;}



.family3  ul li:nth-child(4){top: 66%; left: 40%;}



.family3 ul li:nth-child(1) span{ background-color: #f3c03a;}



.family3 ul li:nth-child(2) span{ background-color: #ff853a;}



.family3 ul li:nth-child(3) span{ background-color: #1677ff;}



.family3 ul li:nth-child(4) span{ background-color: #47c13d;}



.family3 ul li:hover{ transform: translateY(-15px); border-radius: 20px 0; box-shadow: 0 0px 20px rgba(2, 96, 179, 0.3);}







.bg-blue2{ background-color: #eff7ff;}



.family4{ background: url(../images/family4bg.jpg) no-repeat center center; background-size: cover; padding-bottom: 10vh;}



.family4Top{-webkit-clip-path: polygon( 0 0, 50% 100%,  100% 0 ); width: 100%; height: 10vh;}



.family4 .main .tit{  line-height: 100px;}



.family4 .main .con li{ display: flex; align-items: center; justify-content: center; line-height: 70px; text-align: center; background-color: #FFFFFF;}



.family4 .main .con li .left{ width: 43%;}



.family4 .main .con li .center{ width: 14%; color: #fff; background-color: #8dcaff;}



.family4 .main .con li .right{ width: 43%;}



.family4 .main .con li:nth-child(2n) .left{ background-color: #cee8ff;}



.family4 .main .con li:nth-child(2n) .center{ background-color: #1274e0;}



.family4 .main .con li:nth-child(2n) .right{ background-color: #eff7ff;}



.vstit{ position: absolute; left:50%;  transform: translateX(-50%); top: -26px;}











.family5Ul li{ width: 25%;   transition: all .36s;  overflow: hidden; height: 540px;}



.family5Ul li .item{ width: 100%; height: 540px;}



.family5Ul li .txt{ background-color: #f5f5f5; padding: 65px 35px 80px; position: relative; overflow: hidden;}



.family5Ul li .txt{  display: none;   }



.family5Ul li .img {  width: 100%; }



.family5Ul li .img>img{ width: 100%; height: 540px; object-fit: cover; }



.family5Ul li .img figure{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; align-items: flex-start; 



  background-image: linear-gradient(transparent,rgba(0,0,0,0.8)); padding: 65px 35px; justify-content: flex-end;}



.family5Ul li .txt dl{ line-height: 2.2;  font-size: 15px; white-space: nowrap;}



.family5Ul li .txt dl dt{  width: 5px; height: 5px; border-radius: 50%; background-color: #1274e0; margin-right: 10px;}



.family5Ul li .txt a{ background-color: #b71f25; transition: all .36s;  color: #fff;  width: 60%; height: 50px; border-radius: 25px; padding: 0 25px; box-shadow: 0 0 15px rgba(0 0 0 / 0.15);}



.family5Ul li .txt a:hover{ transform: translateY(-20px); box-shadow: 0 0 15px  rgba(2, 96, 179, 0.5);}



.family5Ul li .txt .num{font-family: 'DIN'; font-size: 160px;position: absolute; bottom: -80px; opacity: 0.05; right: 30px;}



.family5Ul li.on{ width: 50%;   }



 .family5Ul li.on .txt{ display: flex;  width: 50%;}  



 .family5Ul li.on .img{ width: 50%;}



 .family5Ul li.on .img figure{  background-image: linear-gradient(transparent,rgba(0,0,0,0.4));}







 #family5swiper .swiper-slide{ background-color: #f5f5f5;}



#family5swiper .swiper-slide .img>img{ height: 260px; width: 100%; object-fit: cover;}



#family5swiper .swiper-slide .img figure{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; align-items: flex-start; 



  background-image: linear-gradient(transparent,rgba(0,0,0,0.8)); padding: 25px; justify-content: flex-end;}



  #family5swiper .swiper-slide .txt{ padding:18px 25px;}



  #family5swiper .swiper-slide .f20{ font-size: 18px;}



  #family5swiper .swiper-slide  .txt dl{ line-height: 2.2;  font-size: 14px;  }



  #family5swiper .swiper-slide  .txt dl dt{  width: 5px; height: 5px; border-radius: 50%; background-color: #1274e0; margin-right: 10px;}



  #family5swiper .swiper-slide  .txt a{ margin-top: 25px; background-color: #b71f25; transition: all .36s;  color: #fff;  width: 80%; height: 38px; border-radius: 25px; padding: 0 25px; box-shadow: 0 0 15px rgba(0 0 0 / 0.15);}



  #family5swiper .swiper-slide  .txt a:hover{ transform: translateY(-20px); box-shadow: 0 0 15px  rgba(2, 96, 179, 0.5);}



  #family5swiper .swiper-slide  .txt .num{font-family: 'DIN'; font-size: 160px;position: absolute; bottom: -80px; opacity: 0.05; right: 30px;}







.family6{ background-color: #f5faff;}



.family6Ul li{ background-color: #fff; text-align: center; width: 31%; transition: all .36s;}



.family6Ul li:hover{ background-color: #b71f25; color: #fff; transform: translateY(-20px); box-shadow: 0 0 20px rgba(2, 96, 179, 0.3); border-radius: 20px;} 











#family6swiper .swiper-slide{ padding: 30px; background-color: #fff; text-align: center; width: 31%; transition: all .36s;}



#family6swiper .swiper-slide:hover{ background-color: #b71f25; color: #fff;   box-shadow: 0 0 20px rgba(2, 96, 179, 0.3); border-radius: 20px;} 



#family6swiper .swiper-slide:hover img{ transform: scale(1.1);}







#family7swiper{  margin-left: 10vw; padding-bottom: 140px;}



#family7swiper .img .txt{ position: absolute; bottom: 0; left: 0; width: 100%; transition: all .36s;  padding: 30px; background-image: linear-gradient(to bottom,transparent ,rgba(0,0,0,0.8));}



#family7swiper .swiper-slide:hover img{ transform: scale(1.1); }



#family7swiper .swiper-slide:hover .txt{ padding: 50px 30px;}



.swiper-pagination{  }



.swiper-container-horizontal > .swiper-pagination-progressbar{ top: auto; bottom: 0;width: 52%; transform: translateX(50%);}







.family7swiperbtn{  width: 30%; left: 35%; position: absolute; bottom: 60px;}



.family7swiperbtn span{ width: 30px; height: 30px; text-align: center; line-height: 30px; cursor: pointer; font-size: 30px;}



.family7swiperbtn span:hover{ color: #b71f25;}



.family8{ background-color: #f5faff}



 



.familyTabTit a{ color: #666; padding: 15px 60px; border-radius: 8px;}



 



.familyTabTit a.on{ color: #fff; background-color: #b71f25;}







.family8 .swiper-slide{ padding: 20px; background-color: #fff;}



.family8 .tabSwiperBtn{ cursor: pointer; width: 50px; height: 50px; background : url(../images/right3.png) no-repeat  center center #fff; border-radius: 50%; position: absolute; top: 50%;  margin-top: -25px;}



.family8 .tabSwiperprev{ left: -80px; transform: rotate(180deg); }



.family8 .tabSwipernext{ right: -80px;}



.family8 .tabSwiperBtn:hover{background : url(../images/right4.png) no-repeat  center center #116ec1;}



.family8 .con figure{ display: none;}.family8 .con figure.on{ display: block;}







.shareOne{ background-color: #f5f5f5;}



.shareOne .bg{ width: 100%; height: 440px; justify-content: center; padding-left: 60px;



    background: url(../images/share1bg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; position: relative;}



#shareTwoswiper .swiper-slide { position: relative;}



#shareTwoswiper .swiper-slide figure{ width: 100%;  height: 100%; position: absolute; top: 0; left: 0;



   background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.5)); display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-start;



  padding: 0 50px 100px;}



#shareTwoswiper .swiper-slide figure .eng{ text-transform: uppercase; position: absolute; right: 30px; bottom: 80px; transform: rotate(90deg); }



#shareTwoswiper .swiper-wrapper .swiper-slide  .kong{ width: 100%;}



#shareTwoswiper .swiper-wrapper .swiper-slide:nth-child(1) .kong{ height: 200px;}



#shareTwoswiper .swiper-wrapper .swiper-slide:nth-child(2) .kong{ height: 100px;}



#shareTwoswiper .swiper-wrapper .swiper-slide:nth-child(3) .kong{  height: 0;}











.shareThere{ background: url(../images/sharetherebg.jpg) no-repeat  center center; background-size: cover;}



.shareThere .main{ padding-top: 265px;}



.shareThere .main .pic{ width:68% ; margin: 0 auto;}



.shareThere .familyTel{  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); }



.shareThere .familyTel .tit{ background-color: #b71f25;}



.shareThere .main .pic ul li{ position: absolute; width: 12.5%; font-size: 20px; white-space: nowrap;}



.shareThere .main .pic ul li span{ font-size: 24px; margin-left: 10px; margin-right: 10px;}



.shareThere .main .pic ul li>div>img{ margin-right: 15px;}



.shareThere .main .pic ul li>div{ position: absolute; top: -50px;}



.shareThere .main .pic ul li:nth-child(1){ bottom: 16%; left: -6%;}



.shareThere .main .pic ul li:nth-child(2){top: 18%; left:1%;}



.shareThere .main .pic ul li:nth-child(3){top: -12%;  left: 50%; margin-left: -6.25%;}



.shareThere .main .pic ul li:nth-child(4){top: 18%; right:1% ;}



.shareThere .main .pic ul li:nth-child(5){ bottom: 16%; right:-6% ;}







.shareFour{ background: url(../images/sharefourbg.jpg) no-repeat center  center; background-size: cover;  padding: 120px 0;}



.shareFourUl{ margin-top: 100px;}



.shareFour .img .ico{ width: 76%; height: 76%; background: #323031; border-radius: 50%; top: 12%; left: 12%; position: absolute;}



.shareFour .img .ico img{ height: 30%; }



/* .shareFourUl li:nth-child(2) .shareFouryuan{ transform: rotate(45deg); }



.shareFourUl li:nth-child(3) .shareFouryuan{ transform: rotate(80deg); animation: rotate 75s 0s infinite linear;}



.shareFourUl li:nth-child(4) .shareFouryuan{ transform: rotate(125deg); animation: rotate 95s 0s infinite linear;}



.shareFourUl li:nth-child(5) .shareFouryuan{ transform: rotate(156eg); animation: rotate 100s 0s infinite linear;} */



.shareFourUl li  .shareFouryuan{animation: rotate 50s 0s infinite linear;}



/* transition: all .46s; 



.shareFourUl li:hover .shareFouryuan{ transform: rotate(180deg);} */







#shareFiveswiper{ margin: 0 2vw;}



#shareFiveswiper .img .txt{ width: 100%;  height: 100%; position: absolute; top: 0; left: 0; padding: 60px 40px; justify-content: flex-end;



  background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.8));}



#shareFiveswiper .swiper-slide:hover .img img{ transform: scale(1.1);}



.shareSix{ background: url(../images/sharesixbg.jpg) no-repeat top  center; background-size: cover; padding-bottom: 320px;}







.shareSix .main{ background: url(../images/sharesixline.png)  no-repeat  center center;   height: 520px;}



.shareSix .main  ul{ align-items: flex-start;}



/* .shareSix .main{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



.shareSix .main  ul{ align-items: flex-start;} */



 



.shareSix .main li .pic{ width: 95px; height: 95px; border-radius: 50%; background-color: #fff; margin-bottom: 15px; transition: all .36s; position: relative; }



.shareSix .main li .pic img{ width: 40%;}



.shareSix .main li:hover .pic{ background-color: #b71f25;}



.shareSix .main li:hover .pic img{filter: grayscale(100%) brightness(500%);animation: jello 1.2s;}



.shareSix .main li .pic i:before { content: ''; position: absolute; left: 0; top: 0;  border: 1px solid #b71f25; width: 100%;height: 100%;  border-radius: 50%;  opacity: 0}



.shareSix .main li .pic i:after {content: '';position: absolute; left: 0;top: 0;border: 1px solid #b71f25; width: 100%; height: 100%; border-radius: 50%;opacity: 0}



.shareSix .main li:hover .pic  i:before { animation: serv_one_border .9s 0s ease 1; }



.shareSix .main li:hover .pic i:after {  animation: serv_one_border 1.5s 0s ease 1;}



 



.shareSix .main li:nth-child(1){ padding-top: 361px;  }



.shareSix .main li:nth-child(2){ padding-top: 290px;  }



.shareSix .main li:nth-child(3){ padding-top: 270px;  }



.shareSix .main li:nth-child(4){ padding-top: 290px;  }



.shareSix .main li:nth-child(5){ padding-top: 300px;  }



.shareSix .main li:nth-child(6){ padding-top: 180px;  }



#wave1 {position: absolute;width: 100%;height: 120px;top: -120px;z-index: 10} 



.shareSeven{ background: url(../images/sharesevenbg.jpg) no-repeat bottom ; background-size: 100% auto;}











.culture{ background: #f4f4f4 url(../images/bn14.jpg) no-repeat 50% 100%; }



.culture .culture_list{ width: 50%; height: 335px; padding-right: 260px; text-align: right; position: relative; overflow: hidden;}



.culture .culture_list dd:before{ content: ""; display: inline-block; position: absolute; width: 10px; height: 10px; background: #0056b8; border-radius: 100%; top: 40%; right: 37%; z-index: 2;transition: all .5s ease;}



.culture .culture_list dd:after{ content: ""; display: inline-block; position: absolute; width: 128px; height: 1px; background: #dcdcdc; top: 54%; right: 20%;transform: rotate(40deg); z-index: 1;transition: all .5s ease;}



.culture .culture_list:nth-child(2) dd:before{ left: 37%;}



.culture .culture_list:nth-child(4) dd:before{ left: 38%;}



.culture .culture_list:nth-child(3) dd:before{ top: 57%;}



.culture .culture_list:nth-child(4) dd:before{ top: 57%;}



.culture .culture_list:nth-child(1) dd{ margin-top: 82px;}



.culture .culture_list:nth-child(2) dd{ margin-top: 82px;}



.culture .culture_list:nth-child(2) dd:after{transform: rotate(-40deg);left: 20%;}



.culture .culture_list:nth-child(3) dd:after{transform: rotate(-40deg); top: 46%;}



.culture .culture_list:nth-child(4) dd:after{transform: rotate(40deg); top: 46%;left: 21%;}



.culture .culture_list:nth-child(2n){ padding-left: 260px; text-align: left; padding-right: 0px;}



.culture .culture_list:nth-child(2n) dt{ float: left;}



.culture .culture_list dd{ font-size: 20px; color: #222222; font-weight: bolder;border-bottom: 1px solid #d2d6d9; padding-bottom: 30px; margin-bottom: 30px;transition: all .5s ease; margin-top: 140px;}



.culture .culture_list dt p{ font-size: 15px; color: #72787f; line-height: 30px;}



.culture .about_content{ position: relative;}



.culture .culture_center{ width: 230px; height: 230px; border-radius: 100%; text-align: center; line-height: 230px;



	position: absolute;



	left: 50%;



    top: 50%;



    transform: translateX(-50%) translateY(-50%);



    background: #fff url(../images/bn13.png) no-repeat 50% 50%;



    z-index: 8;



}



.culture .culture_list .culture_list_img{



	webkit-border-radius: 100%;



    -moz-border-radius: 100%;



    border-radius: 100%;



    width: 380px;



    height: 380px;



    position: absolute;



    overflow: hidden;



    transition: all .5s ease;



    transform: translate3d(0,0,0);



    z-index: 5;



}



.culture .culture_list .culture_list_img img{



	 width: 50%;



    position: absolute;



    opacity: 0;



    transition: all .5s ease;



    transform: translate3d(0,0,0);



}



.culture .culture_list1 .culture_list_img{



	right: 0;



    bottom: 0;



    transform: translate3d(50%,50%,0);



    background-color: #2375d2;



}



.culture .culture_list1 .culture_list_img img{



	left: 0;



    top: 0;



}



.culture .culture_list2 .culture_list_img{



	left: 0;



    bottom: 0;



    transform: translate3d(-50%,50%,0);



    background-color: #1c5da7;



}



.culture .culture_list2 .culture_list_img img{



	right: 0;



    top: 0;



}







.culture .culture_list3 .culture_list_img{



	right: 0;



    top: 0;



    transform: translate3d(50%,-50%,0);



    background-color: #458bdb;



}



.culture .culture_list3 .culture_list_img img{



	left: 0;



    bottom: 0;



}







.culture .culture_list4 .culture_list_img{



	left: 0;



    top: 0;



    background-color: #0a4180;



    transform: translate3d(-50%,-50%,0);



}



.culture .culture_list4 .culture_list_img img{



	right: 0;



    bottom: 0;



}



.culture .culture_list:hover .culture_list_img{ background: #fff;}



















.culture_list:hover .culture_list_img img {



  opacity: 1;



  transform: translate3d(0,0,0);



}



.culture_list:hover .culture_list_img span{ opacity: 0;}



.culture_list:hover dd{ color: #0056b8; border-bottom: 1px solid #0056b8;transition: all .5s ease;}







.culture_list1:hover .culture_list_img{



  transform: translate3d(50%,50%,0) scale(1.2);



}







.culture_list1:hover .culture_list_img{



  transform: translate3d(50%,50%,0) scale(1.2);



}



.culture_list2:hover .culture_list_img{



  transform: translate3d(-50%,50%,0) scale(1.2);



}



.culture_list3:hover .culture_list_img{



  transform: translate3d(50%,-50%,0) scale(1.2);



}



.culture_list4:hover .culture_list_img{



  transform: translate3d(-50%,-50%,0) scale(1.2);



}



.culture .culture_list:hover dd:after{ background: #0056b8;}







.culture_list .culture_list_img:before{



	content: '';



    display: block;



    height: 2px;



    top: 50%;



    width: 100%;



    left: 0;



    background-color: #fff;



    position: absolute;



    z-index: 1;



}



.culture_list .culture_list_img:after{



	content: '';



    display: block;



    height: 100%;



    left: 50%;



    width: 2px;



    top: 0;



    background-color: #fff;



    position: absolute;



    z-index: 1;



}



.culture_list .culture_list_img span{



	display: block;



    width: 22px;



    height: 22px;



    background-color: rgba(255,255,255,.3);



    -webkit-border-radius: 50%;



    -moz-border-radius: 50%;



    border-radius: 50%;



    position: absolute;



    transition: opacity .5s ease;



}



.culture_list .culture_list_img span:after{



	content: '';



    display: block;



    -webkit-border-radius: 50%;



    -moz-border-radius: 50%;



    border-radius: 50%;



    position: absolute;



    left: 50%;



    top: 50%;



    width: 10px;



    height: 10px;



    margin-top: -5px;



    margin-left: -5px;



    background-color: #f6f9fb;



}



.culture_list1 .culture_list_img span{



  left: 25%;



  margin-left: -22px;



  bottom: 75%;



  margin-bottom: 0;



}



.culture_list2 .culture_list_img span{



  right: 25%;



  margin-right: -22px;



  bottom: 75%;



  margin-bottom: 0;



}



.culture_list3 .culture_list_img span{



  left: 25%;



  margin-left: -22px;



  top: 75%;



  margin-top: 0;



}



.culture_list4 .culture_list_img span{



  right: 25%;



  margin-right: -22px;



  top: 75%;



  margin-top: -0px;



}







 .about_content{ max-width: 1300px; margin: 0 auto; padding: 75px 0px 0;}







#Cooswiper .swiper-slide  .txt{  padding: 20px; margin-top: -60px; position: relative; z-index: 5;}



#Cooswiper .swiper-slide  .txt .text{ padding: 20px;}







#Cooswiper .swiper-slide .DIN span{ position: relative;  z-index: 9;}



#Cooswiper .swiper-slide .DIN::after{ transition: all .36s; display: block; content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: #b71f25;  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 5;}



#Cooswiper .swiper-slide .DIN::before{ width: 0; height: 1px; background-color: #b71f25; left: 0; position: absolute; top: 50%; transform: translateY(-50%); display: block; content: ''; transition: all .36s;} 



#Cooswiper .swiper-slide:hover .img img{ transform: scale(1.1);}



#Cooswiper .swiper-slide:hover  .DIN::after{ left: 60px;}



#Cooswiper .swiper-slide:hover  .DIN{padding-left: 40px;}



#Cooswiper .swiper-slide:hover  .DIN:before{ width: 25px; }



#Cooswiper .swiper-slide:hover .txt{ transform: translateY(-20px);}



#Cooswiper .swiper-slide:hover .text{ box-shadow: 0 0 10px rgba(0 0 0 / 0.15);}







.caseBox{  background-color: #f6faff; padding-bottom: 50px;}



.caseList li{  margin-top: 40px;}



.caseList li a{  }



.caseList li:nth-child(2n) a{ flex-direction: row-reverse;}



.caseList li .txt{  padding-top: 60px; }



.caseList li .txt .top .desc{ margin: 40px 0 70px; }



.caseList li .txt .bot{border-top: 1px solid #e5e5e5; }



.caseList li:hover{ color: #b71f25;}



.caseList li:hover .img img{ transform: scale(1.1);}







.newsTit a{ height: 45px;  line-height: 45px; border-radius: 25px; padding: 0 30px; transition: all .36s;}



.mainbox .newsTit{  border-bottom: 1px solid #e5e5e5; margin-top: -125px; }



.newsCOn  img{ 



    margin-bottom: 12px; 



    max-width: 100%;



   height:auto !important; 



    



}



.newsCOn iframe{ max-width:100%; height:220px !important;}



.newsTit a:hover{ box-shadow: 0 0 15px rgba(2, 96, 179, 0.5);}



.newsPage{  border-top: 2px solid #b71f25; border-bottom: 2px solid #b71f25;}



.newsPage a{ width: 40%;}



.mainbox .newsTit .left{ width: 76%; line-height: 1.6;}







.newslist{ padding-bottom: 40px }



.newslist li{  width: 32%; margin-right: 2%; margin-top: 40px; background-color: #f5f5f5; overflow: hidden; height: 480px; transition: all .36s;}



.newslist li:hover{ box-shadow: 0 0 15px  rgba(2, 96, 179, 0.3);} 



.newslist li:nth-child(3n){ margin-right: 0;}



.newslist li .img img{ width: 100%; height: 300px; object-fit: cover;  transition: all .5s; }



 



.newslist li .show{ display: none; transition: all .56s;}



.newslist li:hover .img img{ height: 0;}



.newslist li:hover .show{ display: -webkit-box;}



.contact .left{ width: 62%;}



.contact .left .input{   width: 48%;  padding: 20px 0;padding-left: 60px;  border-radius: 40px;}



.contact .left .input.inutName{  background: url(../images/input_name.png) no-repeat center left 25px #f6f6f6; background-size: 20px auto; }



.contact .left .input.inutPhone{  background: url(../images/input_tel.png) no-repeat center left 25px #f6f6f6; background-size: 20px auto; }



.contact .left .input.inutEmail{  background: url(../images/input_eamil.png) no-repeat center left 25px #f6f6f6; background-size: 20px auto; }



.contact .left .input.inutAdd{  background: url(../images/input_add.png) no-repeat center left 25px #f6f6f6; background-size: 20px auto; }



.contact .left .textarea{ background: #f6f6f6; width: 100%; border-radius: 12px; padding: 20px;}



.contact .left  .submit{ padding: 20px;}



.contact .right{ width: 38%; background: url(../images/contactrightbg.jpg) no-repeat center center; background-size: cover; }



.contact .right dl{ line-height: 2; margin-top: 10px;}



.contact .right dl img{ width: 26px; margin-right: 10px;}



.contact .right dl dd{  padding-left:36px ;} 







.mapBox{ width: 100%; height: 580px; overflow:hidden;}



.HonoraryClass{ padding: 60px 0;}



.HonoraryClass a{ padding: 25px 35px; margin: 0 25px; background-color: #fff; width: 30%;transition: all .36s;}



.HonoraryClass a:hover{ color: #b71f25;}



 .HonoraryClass a.on{ background: url(../images/honoraryclassbg.jpg) no-repeat center center; background-size: cover; color: #fff; }



.HonoraryClass a img{ transition: all .36s;}



 .HonoraryClass a.on img{filter: grayscale(100%) brightness(500%);}



 .HonoraryClass a.on .color-666{ color: rgba(255, 255, 255, 0.5);}







 



.honorUl li{ transition: all .36s; cursor: pointer; width: 23%; margin-right: 2.6%; margin-bottom: 40px; float: left; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background: #fff; padding: 20px; text-align: center; }



/* .honorUl li:nth-child(4n){ margin-right: 0;} */



.honorUl li .img{ height: 300px;}



.honorUl li .img img{ max-width: 100%; max-height: 100%; }



.honorUl li:hover{ box-shadow:0 0 10px rgba(2, 96, 179, 0.5);  transform: translateY(-10px); }



.honorUl li:hover img{ transform: scale(1.05);} 















.page-aside {



	position: fixed;



	right: -6px;



	bottom: 180px;



	transform: translateX(100%);



	z-index: 6;



	opacity: 0;



	transition: transform .3s, opacity .3s



}







.page-aside.show {



	transform: translateX(0);



	opacity: 1



}







.page-aside .img {



	max-width: 100%



}







.page-aside-item {



	width: 54px;



	text-align: center;



	height: 50px;



	position: relative;



	z-index: 1;



	cursor: pointer;



	display: block;



	background-color: rgba(0, 0, 0, .5);



	margin: 4px 0;



	border-top-left-radius: 6px;



	border-bottom-left-radius: 6px;



	padding-right: 6px;



	transition: transform .3s;



	display: flex;



	align-items: center;



	justify-content: center



}







.page-aside-item .icon {



	width: 24px



}







#toolbar{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10001; display: none;}



#toolbar a {



    width: 25%;



   padding: 10px 0;



    text-align: center;



   color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column;



}



#toolbar img{ height: 20px; margin-bottom:5px;}



.newsBan{  width: 100%; 

  /* height: 100vh; */
}



.newsBan .swiper-container{width:100%;height: 100%;}



.newsBan .swiper-slide{overflow: hidden;}



.banner .list{width:100%;height: 100%; position: relative;}



.newsBan .swiper-slide .img.before img {



  transition: 2s linear 0s;



}



.newsBan .list .list_wrap{ overflow: hidden;}



.newsBan .list .list_wrap.before img{transition: 3s linear 0s;}



.newsBan .list .list_wrap.after img{transform: scale(1.08);}













.newsBan .swiper-slide img{  width: 100%;height: 100%;object-fit: cover;}

.newsBan .list .list_wrap {
  width: 100% ;
  height: 100% ;
}

.newsBan .list .list_wrap video , .newsBan .list .list_wrap img {
  width: 100% ;
  height: 100% ;
  object-fit: cover ;
}

.newsBanBnt{ position:  absolute; top: 50%; transform: translateY(-50%); z-index: 65; cursor: pointer; opacity: 0; transition: all 3s;}



.newsBanBnt.prev{ left: 2vw;}



.newsBanBnt.next{ right: 2vw;}



.newsBan:hover .newsBanBnt{ opacity: 1;}



.newsBan .list .txt{ position: absolute; top: 40%;  left:0; z-index: 80; width:100%; text-align:center; }



/*  align-items: flex-end; */



.newsBan .list .txt .f34{ margin: 25px 0;}



.newsBan .list .txt .anim-btn{ width: 230px; height: 50px; border-radius: 0; font-size: 18px;} 







 
