@import "../font/iconfont.css"; 
.iconfont{ font-size: 20px;}
.opacity4{ opacity: .4;}
:root {
     
    --blue: #0260b3; 
  }
.mask-white { position:absolute; top:0; left:0; width:100%; height:100%; z-index: 4; background:rgba(255,255,255,.2); content:''; -webkit-transition:-webkit-transform .6s; 
    transition:transform .6s; -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0) }
.maskBox:hover .mask-white{ -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)}
 .z5{ position: relative; z-index: 5;}
.hidden{ overflow: hidden;}
.border-bottom{ border-bottom: 1px solid #e5e5e5;}
.text-nowrap{ white-space: nowrap;}
.radius5{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.radius8{ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
.radius10{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }
.radius15{ border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; }
.radius20{ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.radius40{ border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; }
.radius50{ border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.transition6{ transition:all .6s ; -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; }
.f12{ font-size: 12px;}
.flex-center-center{  display: flex; align-items: center; justify-content: center;}
.flex-between-center{  display: flex; justify-content: space-between; align-items: center;}
.flex-center{  display: flex; align-items: center;}
.flex-between{  display: flex; justify-content: space-between}
.flex-between-start{ display: flex; justify-content: space-between;align-items: flex-start;}
.flex-between-end{ display: flex; justify-content: space-between;align-items: flex-end;}
.flex{  display: flex;}
.flex-column{ flex-direction: column;}
.flex-wrap{ flex-wrap: wrap;}
.flex-end{display: flex; align-items: flex-end;}
.flex-content-end{display: flex; justify-content: flex-end;}
.flex-start{display: flex; align-items: flex-start;}
.iflex{ display: inline-flex}
.block{  display: block;}

.justify-center{justify-content: center;}
.justify-end{justify-content: flex-end;}
.justify-start{justify-content: flex-start;}
.align-start{align-items: flex-start;}
.align-end{align-items: flex-end;}
.align-center{align-items: center;}

@media screen and (max-width:750px){
    .wapFlex{ flex-direction: column; align-items: flex-start; justify-content: flex-start;}
    .wapFlexF{ flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start;}
    
}


.ConstructionSwiper .swiper-slide{ border-radius: 10px; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }
.ConstructionSwiper .swiper-slide .desc{ height: 7em;}
.ConstructionSwiper .more{ display: inline-flex; height: 50px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; }
.ConstructionSwiper .more::after{ width:0; height: 100%; transition: all .36s;   position: absolute; left: 0; top: 0; background: var(--blue); display: block; content: ''; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s;    }
.ConstructionSwiper .swiper-slide:hover .title{ color: var(--blue);}
.ConstructionSwiper .more:hover{ color: #fff; transform: scale(0.9); box-shadow: 0 0 10px rgba(0, 0, 0, .15); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); }
.ConstructionSwiper .more:hover::after{    width: 100%; }
.ConstructionSwiper .swiper-slide:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }

 
.light{ position: absolute; left: -100%; top: 0; width: 100%; height: 100%; transform: skewx(-25deg); z-index: 2;
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));}
.light-tri:hover .light{ left: 100%; transition: 1s;}
.light-tri:hover{ transform: scale(0.95); box-shadow: 0 0 10px rgba(43 ,23, 110, .5); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); }

.params-container .text-nowrap{ flex-shrink: 0;}
.equipmentSwiper  .img img{ width: 100%; height: 100%; object-fit: cover;}
/*   */
 .equipmentSwiper .more{position: absolute; left: 40px ; bottom: 30px;  display: inline-flex;  border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; }
/*.equipmentSwiper .more::after{ width:0; height: 100%; transition: all .36s;   position: absolute; left: 0; top: 0; background: var(--blue); display: block; content: ''; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s;    }
.equipmentSwiper .more:hover{ color: #fff; transform: scale(0.9); box-shadow: 0 0 10px rgba(0, 0, 0, .15); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); }
.equipmentSwiper .more:hover::after{    width: 100%; } */
.salesBtn{ width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, .15); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.salesBtn:hover{ background: var(--blue); color: #fff;}

.hotSwiper .swiper-slide{ background-color: #0261b5; position: relative;}
.hotSwiper .swiper-slide::after{ width: 24.6%; height: 60%; background: rgba(255,255,255,.1); position: absolute; right: 0; bottom: 0; display: block; content: '';-webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);clip-path: polygon(0 100%, 100% 0, 100% 100%);}
.hotSwiper .swiper-slide .img{ width: 63%;}
.hotSwiper .swiper-slide .img img{ width: 100% ; height: 100%; object-fit: cover;}
.hotSwiper .swiper-slide .text{ width: 30%; border-left: 1px solid rgba(255,255,255,.2);}
.hotSwiper .swiper-slide .text .title{ border-bottom: 1px solid rgba(255,255,255,.2);}
.hotSwiper .swiper-slide .text  li{ cursor: pointer; color: rgba(255,255,255,.3); line-height: 30px;}
.hotSwiper .swiper-slide .text  li::before{ display: block; content: ''; position: absolute; top: 50%; transform: scale(0,0); transition: all .36s; margin-top: -14px; left: -14px; width: 28px; height: 28px; background: url(../pic/hotSwiperIcon.png) no-repeat center center; background-size: 100% 100%; -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; }
.hotSwiper .swiper-slide .text  li.on,.hotSwiper .swiper-slide .text  li:hover{ color: #fff; font-size: 1.2em;}
.hotSwiper .swiper-slide .text  li.on::before,.hotSwiper .swiper-slide .text  li:hover:before{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); }
.hotSwiper .swiper-slide .text ul:hover > li:not(:hover){color: rgba(255,255,255,.3); font-size: 1em; }
.hotSwiper .swiper-slide .text ul:hover > li:not(:hover)::before{ transform: scale(0,0); -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); }


.salesThere .salesBtn{ position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.salesThere .prev{ left: -80px;}
.salesThere .next{ right: -80px;}

.coreUl li{ width: calc((100% - 60px)/3); margin-right: 30px;}
.coreUl li::after{ width: 0; height: 100%; position: absolute; left: 0; top: 0; display: block; content: ''; background: var(--blue); transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; }
.coreUl li:nth-child(3n){ margin-right: 0;}
.coreUl li .desc{ height: 12.8em;}
.coreUl li .con{ border: 1px solid rgba(255 ,255, 255, .2);}
.coreUl li .f60{ color: rgba(2 ,96, 179, .2); position: absolute; right: 0; bottom: 0;}
.coreUl li:hover::after{ width: 100%;}
.coreUl li:hover { color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .15); transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); }
.coreUl li:hover .f60{ color: rgba(255 ,255, 255, .2);  }
.coreUl li:hover .desc{ color: #fff;}

.scenariosul li{ width: 15.3%; }
.scenariosul li .img img{ height: 350px; width: 100%; object-fit: cover;}
.scenariosul li .txt{ height: 115px;}
.scenariosul li .txt .desc{ display: none; margin-top: 8px;}

@media screen and (min-width:750px) {
    .scenariosul li.on,.scenariosul li:hover{ width: 33.3%;}
    .scenariosul li.on .txt,.scenariosul li:hover .txt{ background: var(--blue); color: #fff;}
    .scenariosul li.on .txt .desc,.scenariosul li:hover .txt .desc{display:-webkit-box;}
    
    .scenariosul:hover > li:not(:hover) {width: 15.3%;  }
    .scenariosul:hover > li:not(:hover) .txt{background: #f5f5f5; color: #333; }
    .scenariosul:hover > li:not(:hover) .desc{display: none;}
	 
}



.WorkshopUL li{ width: calc((100% - 70px)/3); margin-right: 35px;}
.WorkshopUL li:nth-child(3n){ margin-right: 0;}
.WorkshopUL li:hover .img img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; }
.WorkshopUL li:hover .txt{background: var(--blue); color: #fff;}

.f14{ font-size: 14px;}
.studiesSwiper{ padding-left: 10vw;}
.studiesSwiper .swiper-slide{}
.studiesSwiper .swiper-slide .txt{ align-items: flex-start;}
.studiesSwiper .swiper-slide .txt .more{ display: inline-block;}
.studiesSwiper .swiper-slide:hover .txt .more{ background: var(--blue); color: #fff; padding: 10px 25px;}
.studiesSwiper .swiper-slide .img {-webkit-clip-path: polygon(100% 0,100% 100%, 0% 100%, 20% 0);clip-path: polygon(100% 0,100% 100%, 0% 100%, 20% 0);}
.studiesSwiper .swiper-slide .img img{ width: 100%; height: 400px; object-fit: cover;}
.salesSeven .button{ width: 150px; position: absolute; right: 29%; top: 0; height: 400px; z-index: 10;}

.systemOne{ background: url(../pic/systemOneImg.png) no-repeat center right; height: 80vh; background-size: auto 100%;}
.w40{ width: 40%;}
.systemLine{ width: 20px; height: 5px;}
.diagramUl{ width: 72%;}
.diagramUl li{ border: 1px solid #e5e5e5; width: 18.5%;  background: url(../pic/diagram-bg.png) no-repeat center center  ; background-size: 86% auto;}
.diagramUl li:hover img{filter: grayscale(100%) brightness(500%);}
.diagramUl li:hover{ background: var(--blue); color: #fff; transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); }
.diagramIcon{ height: 30px;}
.systemTwoCon{ box-shadow: 0 0 20px rgba(2,96,179,.15);}

.systemThere{ background: url(../pic/systemTherebg.jpg) no-repeat center center; background-size: cover;}
.color-white2{ color: rgba(255 ,255, 255, .4);}

.systemThereUl li{ width: calc((100% - 140px)/3); margin-right: 70px; background: rgba(255 ,255, 255, .2);}
.systemThereUl li:nth-child(3n){ margin-right: 0;}
.systemThereUl li:hover{ box-shadow: 0 0 30px rgba(255 ,255, 255, .4); transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); }

.systemFour{ background: url(../pic/systemFourbg.png) no-repeat center center;background-size: cover; background-attachment: fixed;}
.systemFourUl::after{ width: 100%; height: 1px; position: absolute; top:50%; left: 0;  background: var(--blue);  display: block; content: '';}
.systemFourUl li{ width: calc(100% / 5); position: relative;}
.systemFourUl li .item{ height: 212px;}
.systemFourUl li .item::after{ width: 1px; height: 100%; position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom,rgba(2,96,179,.15),rgba(2,96,179,1)); display: block; content: '';}
.systemFourUl li::after,.systemFourUl li::before{ width: 100%; height: 212px; display: block; content: '';}
.systemFourUl li i{ transition:all .36s ; width: 15px; height: 15px; display: block; content: ''; background: url(../pic/systemFourDian.png) no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; top: 50%; margin-left: -7px; margin-top: -7px; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; }
.systemFourUl li::before{  display: none; }
.systemFourUl li:nth-child(2n)::after{  display: none; }
.systemFourUl li:nth-child(2n):before{  display: block; }
.systemFourUl li:nth-child(2n) .item::after{background-image: linear-gradient(to bottom,rgba(2,96,179,1),rgba(2,96,179,.15));}

.systemFourUl li:hover i{ transform:scale(1.2) ; -webkit-transform:scale(1.2) ; -moz-transform:scale(1.2) ; -ms-transform:scale(1.2) ; -o-transform:scale(1.2) ; }
.systemFourUl li:hover .systemFourIcon{animation: jello 1.2s;}

.systemFive:hover{ background: url(../pic/systemFivebg.jpg) no-repeat center center; background-size: cover;}
.systemFiveRight{ width: 72%;}
.line-height1{ line-height: 1;}
.systemFiveConUl li{ width: calc((100% - 72px)/4); margin-right: 24px;}
.systemFiveConUl li .txt{ background: rgba(0, 0, 0, .3); position: absolute; left: 0; bottom: 0; z-index: 10;}
.systemFiveConUl li:hover img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; }
.systemFiveConUl li:hover{ box-shadow: 0 0 25px rgba(2,96,179,.15);}
.posi-a{ position: absolute; top: 0; left: 0;z-index: 3}
.bg-f7{ background: #f7f7f7;}
.systemSixUl li{ width: calc(25%);}
.systemSixUl li:nth-child(2n){ flex-direction: column-reverse;}

.systemSevenUl li{ width: 23.8%;}
.systemSevenUl li::after{ background: rgba(255 ,255, 255, .9); width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; content: ''; transition:all .36s ; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; }
/* .systemSevenUl li .txt{ height: auto;} */

.systemSevenUl li:hover .txt{  background-image: linear-gradient(to bottom,rgba(0 ,0, 0, .7),transparent); }
.systemSevenUl li:hover { color: #fff; box-shadow: 0 0 25px rgba(2 ,96, 179, .25);}
.systemSevenUl li:hover .color-666{ color: #fff;}
.systemSevenUl li:hover img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; }
.systemSevenUl li:hover::after{ height: 0;}
.border{ border: 1px solid #e5e5e5;}
.border-bottom{ border-bottom: 1px solid #e5e5e5;}
.border-top{ border-top: 1px solid #e5e5e5;}
.border-left{ border-left: 1px solid #e5e5e5;}
.border-right{ border-right: 1px solid #e5e5e5;}
.systemEight{ background: url(../pic/systemEightBg.jpg) no-repeat center  center; background-size: cover;}
.systemEightImg{ width: 54vw; margin-left: -5vw; max-width: none;} 
.systemEight .txt{ background: rgba(255 ,255, 255, .1); border: 1px solid rgba(255 ,255, 255, .3);}
.systemEight .txt li{ border-bottom: 1px solid rgba(255 ,255, 255, .3);  }
.systemEight .txt li:last-child{ border-bottom: none;}
.systemEightIcon{ flex-shrink: 0;  width: 1px; height: 80px; opacity: 0;}
.systemEight .txt li.on .systemEightIcon,.systemEight .txt li:hover .systemEightIcon{  width: 80px; opacity: 1; }
.systemEight .txt:hover > li:not(:hover) .systemEightIcon{width: 1px; height: 80px; opacity: 0;}


.systemEightTip{ width: 50%;}
.systemEightTip span{ margin-right: 10px;}

.systemNineUl li{ width: calc((100% - 60px)/4); margin-right: 20px;}
.systemNineUl li:nth-child(4n){ margin-right: 0;}
.systemNineUl li:hover { box-shadow: 0 0 15px rgba(2,96,179,.15); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); }
.systemNineUl li:hover .txt{ background: var(--blue); color: #fff;}
.systemNineUl li:hover .img img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; }

.systemTen .HeadquartersSwiper .swiper-slide .text{ background-image: linear-gradient( to bottom,transparent,rgba(0,0,0,.5));  }
.systemTen .HeadquartersSwiper .swiper-slide:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }


.systemTen .salesBtn{ position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.systemTen .prev{ left: -80px;}
.systemTen .next{ right: -80px;}