@charset "utf-8";
/* CSS Document */
*,:after,:before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{margin:0; padding:0;  font:12px Arial,"microsoft yahei";  color:#333; background:#fff;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0; }
ul,li,ol{list-style:none;}
a{text-decoration:none; color:#333;cursor: pointer;}
a:hover{text-decoration:none; color: #ff4229;}
input,textarea,select,button{font-family:Arial,"Microsoft YaHei";}
input:focus,textarea:focus,select:focus,button:focus{ outline:none;}
::-moz-selection {background:#aaa;color:#FFF;}
::selection {background: #aaa;color: #FFF;}
img{border:0;image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;-ms-interpolation-mode: nearest-neighbor;}
.unselectable {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;user-select: none;}
.clear {zoom: 1;clear:both; }
.clear:after {content: ''; display: block; clear: both; }
table{width: 100%; border-collapse:collapse;}
table tr,table td{max-width: 100%; border: solid 1px #eee; }
.fl{float:left;}
.fr{float:right;}
.left{display: flex;flex-wrap: wrap;}
.right{display: flex;justify-content: flex-end;}
.between{display: flex;justify-content: space-between;}
.around{display: flex;justify-content: space-around;}
.center{display: flex;flex-direction: column;align-items: center;}
.centerT{display: flex;justify-content: center;align-items: center;}
.cut{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.cutTwo{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.cutThree{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.cutFour{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.cutFive{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.scrollbar::-webkit-scrollbar{ width:2px; background:#f4f4f4; }
.scrollbar::-webkit-scrollbar-button{ display:none;}
.scrollbar::-webkit-scrollbar-track{ display:none;}
.scrollbar::-webkit-scrollbar-track-piece{ display:none;}
.scrollbar::-webkit-scrollbar-thumb{ background:#ff4229;}
.scrollbar::-webkit-scrollbar-corner{display:none;}
.scrollbar::-webkit-resizer{display:none;}


@font-face {font-family:'Nice'; src: url('../fonts/Nice-Regular.ttf');} 
.c1440 {width: 1440px;margin:  auto;zoom: 1;  }
.c1200 {width:1200px;margin:  auto;zoom: 1;  }
@media (max-width: 1560px){
    .c1440{ width: 1200px;}
    .cutFour{-webkit-line-clamp: 3;}
}


/* .header */
.header{ width: 100%; position: fixed; top: 0; left: 0;  background-color: #fff;   z-index: 999; height: 80px; transition: all 0.8s ease; box-shadow: 0 0 20px rgba(0,0,0,0.07);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.07);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.07); }
.header .logo{  display: inline-block; width: 146px; height:40px; margin: 20px 0 ; background: url(../images/logo.png) center no-repeat; background-size: 146px 40px !important;}
.header .headerBox{width: calc(100% - 200px); }
.header .headerBox .navBox{  width: calc(100% - 200px);  z-index: 1;}
.header .navBox .nLi{ padding: 0 25px; margin-right: 10px; }
.header .navBox.tj .nLi{ padding: 0 25px; margin-right: 0; }
.header .navBox .nLi h3{ font-weight: normal; padding: 22px 0;}
.header .navBox .nLi h3 a{display: inline-block; font-size: 16px;line-height: 36px;  color: #333;}
.header .navBox .nLi.on h3 a,.header .navBox .nLi h3.current a{ color: #ff4229;}
.header .navBox .sub{ display: none; position: absolute; border-top: solid 1px #eee; top: 80px; width: 100%; left: 50%; transform: translateX(-50%); z-index: 98; background-color: rgba(255, 255, 255, 1);   box-shadow: 0 10px 10px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.05);}
.header .navBox .sub1{ padding: 0 0; }
.header .navBox .subBox1{ width: 100%;  padding: 40px 0; position: relative;}
.header .navBox .subBox1 .hd{width: 230px; padding-right: 40px; border-right: solid 1px #eee;}
.header .navBox .subBox1 .hd li{ margin-bottom:5px ; position: relative; overflow: hidden; background-color: #f9f9fb;}
.header .navBox .subBox1 .hd li::after{ content: ''; position: absolute; top: 0; left: -110%; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; z-index: 0;}
.header .navBox .subBox1 .hd li a{display: inline-block; width: 100%; padding:10px 30px; line-height: 20px; font-size: 14px; color: #333;  transition: all 0.8s ease;  position: relative; z-index: 2;}
.header .navBox .subBox1 .hd li i{ position: absolute; z-index: 3; right: 15px; top: 50%; width: 28px; height: 25px; background-size: 28px 25px !important; margin-top: -12px;}
.header .navBox .subBox1 .hd li i.i1{ background: url(../images/icon/icon_pro01.png) center no-repeat;}
.header .navBox .subBox1 .hd li i.i2{ background: url(../images/icon/icon_pro02.png) center no-repeat;}
.header .navBox .subBox1 .hd li i.i3{ background: url(../images/icon/icon_pro03.png) center no-repeat;}
.header .navBox .subBox1 .hd li i.i4{ background: url(../images/icon/icon_pro04.png) center no-repeat;}
.header .navBox .subBox1 .hd li i.i5{ background: url(../images/icon/icon_pro05.png) center no-repeat;}
.header .navBox .subBox1 .hd li.on::after {left: 0;}
.header .navBox .subBox1 .hd li.on a{ color: #fff;}
.header .navBox .subBox1 .hd .hContact{ width: 100%; padding: 15px; position: relative; margin-top: 15px;  background-image: linear-gradient(90deg, #f89172 0%, #ff4229 100%);}
.header .navBox .subBox1 .hd .hContact::after{ content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/icon/icon_proBg.png) left top no-repeat; background-size: auto 100%;opacity: 0.6;}
.header .navBox .subBox1 .hd .hContact p{ font-size: 14px; color: #fff; position: relative; z-index: 2;}
.header .navBox .subBox1 .hd .hContact a{ display: inline-block; padding: 3px 10px;margin-top: 8px; border: solid 1px rgba(255,255,255,0.4); color: #fff; transition: all 0.6s ease; position: relative; z-index: 2;}
.header .navBox .subBox1 .hd .hContact a:hover{ background-color: #fff; color: #ff4229;}
.header .navBox .subBox1 .bd{ width: calc(100% - 230px);padding: 0 10px; }
.header .navBox .subBox1 .bd ul{}
.header .navBox .subBox1 .bd ul li{ width: 33.33%; padding: 25px 40px;  text-align: left;}
.header .navBox .subBox1 .bd ul li a{ display: inline-block; padding-left: 65px;position: relative;}
.header .navBox .subBox1 .bd ul li .iconfont{ position: absolute; left: 0; top: 50%; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; margin-top: -25px; text-align: center; font-size: 30px; background-color: rgba(0,0,0,0.05); color: #333; transition: all 0.8s ease;}
.header .navBox .subBox1 .bd ul li .tit{ font-size: 16px; color: #333; transition: all 0.8s ease; }
.header .navBox .subBox1 .bd ul li .txt{ font-size: 14px; color: #999; transition: all 0.8s ease;margin-top: 6px;}
.header .navBox .subBox1 .bd ul li:hover .iconfont{ background-color: rgba(255,66,41,0.2); color: #ff4229;}
.header .navBox .subBox1 .bd ul li:hover .tit,.header .navBox .subBox1 .bd ul li:hover .txt{ color: #ff4229;}

.header .navBox .subBox2{ width: 100%;  padding: 30px 0; position: relative;  }
.header .navBox .subBox2 ul{ width: 100%;}
.header .navBox .subBox2 ul li{ padding: 15px 40px; position: relative;}
.header .navBox .subBox2 ul li a{ display: inline-block; padding-left: 65px;position: relative;}
.header .navBox .subBox2 ul li .iconfont{ position: absolute; left: 0; top: 50%; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; margin-top: -25px; text-align: center; font-size: 30px; background-color: rgba(0,0,0,0.05); color: #333; transition: all 0.8s ease;}
.header .navBox .subBox2 ul li .tit{ font-size: 16px; color: #333; transition: all 0.8s ease; }
.header .navBox .subBox2 ul li .txt{ font-size: 14px; color: #999; transition: all 0.8s ease;margin-top: 6px;}
.header .navBox .subBox2 ul li:hover .iconfont,.header .navBox .subBox2 ul li.on .iconfont{ background-color: rgba(255,66,41,0.2); color: #ff4229;}
.header .navBox .subBox2 ul li:hover .tit,.header .navBox .subBox2 ul li:hover .txt,.header .navBox .subBox2 ul li.on .tit,.header .navBox .subBox2 ul li.on .txt{ color: #ff4229;}

.header .navBox .subBox3{ width: 100%;  padding: 30px 0; position: relative; }
.header .navBox .subBox3 ul{ width: 100%;}
.header .navBox .subBox3 ul li{ padding: 15px 40px;}
.header .navBox .subBox3 ul li .iconfont{ width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%;  color: #333; font-size: 24px; margin-right: 10px; position: relative; background-color: rgba(0,0,0,0.05);  transition: all 0.8s ease;}
.header .navBox .subBox3 ul li .tit{  font-size: 16px; color: #333; transition: all 0.8s ease; }
.header .navBox .subBox3 ul li:hover .iconfont,.header .navBox .subBox3 ul li.on .iconfont{ background-color: rgba(255,66,41,0.2); color: #ff4229;}
.header .navBox .subBox3 ul li:hover .tit,.header .navBox .subBox3 ul li.on .tit{ color: #ff4229;}
.header .navBox .subBox3.case ul li:nth-child(1) .iconfont::before{content: "\e614";}
.header .navBox .subBox3.case ul li:nth-child(2) .iconfont::before{content: "\e619";}
.header .navBox .subBox3.case ul li:nth-child(3) .iconfont::before{content: "\e671";}
.header .navBox .subBox3.case ul li:nth-child(4) .iconfont::before{content: "\e6d9";}
.header .navBox .subBox3.case ul li:nth-child(5) .iconfont::before{content: "\e674";}
.header .navBox .subBox3.news ul li:nth-child(1) .iconfont::before{content: "\e60d";}
.header .navBox .subBox3.news ul li:nth-child(2) .iconfont::before{content: "\e607";}
.header .navBox .subBox3.news ul li:nth-child(3) .iconfont::before{content: "\e60b";}
/* .header .navBox.navOn .on .sub{ display: block !important; } */

.header.header1{  background-color: rgba(255, 255, 255, 0);  box-shadow: 0 0 20px rgba(0,0,0,0);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0);-moz-box-shadow: 0 0 20px rgba(0,0,0,0);}
.header.header1::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255,255,255,0.1);}
.header.header1 .logo{ background: url(../images/logo1.png) center no-repeat; }
.header.header1 .nLi h3 a{ color: #fff;}

.header .tel{height: 34px;  margin: 23px 0 23px 20px; font-size: 20px;  position: relative; z-index: 2; cursor: pointer;}
.header .tel .iconfont{ display: inline-block; font-size: 22px; width: 34px; line-height: 34px; position: relative; z-index: 2; vertical-align: middle;  border-radius: 50%; text-align: center; color: #fff; background-color: #ff4229; transition: all 0.8s ease;}
.header .tel p{ position: absolute; right: 0; top: 0; z-index: 1; line-height: 34px; border-radius: 18px; color: #ff4229; transition: all 0.8s ease; width:34px; padding: 0; overflow: hidden; color: #fff;  background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%);}
.header.header1 .tel .iconfont,.header.header1 .tel p{ background-color: #fff; color: #ff4229;}
.header .tel:hover p{width: 170px;  padding: 0 45px 0 15px; font-size: 18px; }
.header.header1 .tel:hover .iconfont,.header.header1 .tel:hover p{ background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%);color: #fff;}


.header .kefu{display: inline-block;  margin: 23px 0 23px 20px; line-height: 34px; padding: 0 15px 0 13px; text-align: center; font-size: 14px; color: #fff;  background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); border-radius: 18px; transition: all 0.8s ease;}
.header .kefu span{ display: inline-block; vertical-align: bottom; margin:-3px 5px 0 0; font-size: 20px;}
.header.header1 .kefu {color: #f85a2b;  background-image: linear-gradient(90deg, #fff 0%, #fff 100%);}
.header .kefu:hover{ background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); color: #fff;}

.header.is-fixed{ border-bottom: 0; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.07);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.07);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.07);}
.header.is-fixed .logo{ background: url(../images/logo.png) center no-repeat; }
.header.is-fixed .nLi h3 a{ color: #333;}
.header.is-fixed .nLi.on h3 a{ color: #ff4229;}
.header1.is-fixed .tel .iconfont,.header1.is-fixed .tel p,.header1.is-fixed .kefu{ color: #fff;  background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%);}
.header1.is-fixed .tel:hover .iconfont{ background-color: #ff4229;}
.aboutHeader.is-fixed{box-shadow: 0 0 20px rgba(0,0,0,0);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0);-moz-box-shadow: 0 0 20px rgba(0,0,0,0);}

/* indexBanner */
.indexBanner{ width: 100%; position: relative; min-width: 1200px;overflow: hidden;}
.indexBanner .swiper-slide{ position: relative; z-index: 1; }
.indexBanner .swiper-slide .img{ width: 100%; position: relative; z-index: 1;}
.indexBanner .swiper-slide .img img{ width: 100%; display: block;}
.indexBanner .swiper-slide .box{ width: 100%; position: absolute; top: 50%; left: 0; width: 100%; z-index: 2; transform: translateY(-50%);}
.indexBanner .swiper-slide .box .tit{ font-size: 34px; color: #fff;}
.indexBanner .swiper-slide .box .txt{ font-size: 16px; color: rgba(255,255,255,0.8); margin-top: 15px;}
.indexBanner .swiper-slide .box .lk{ margin-top: 50px;}

.indexBanner .swiper-pagination{ width: 8px !important; left: auto !important; right: 50px !important; bottom: 50% !important; transform: translateY(50%);}
.indexBanner .swiper-pagination-bullet{ margin: 8px 0 !important; width: 8px; height: 8px; opacity: 0.4 ; background-color: #fff;}
.indexBanner .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;}
.indexBanner .bannerItem{ position: absolute; z-index: 3; bottom: 0; left: 0; width: 100%; border-top: solid 1px rgba(255,255,255,0.1); backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.1);}
.indexBanner .bannerItem ul{ position: relative; z-index: 2;}
.indexBanner .bannerItem ul li{ padding:25px 50px 30px 105px; width: 25%; position: relative; overflow: hidden; border-left: solid 1px rgba(255,255,255,0.1);cursor: pointer;}
.indexBanner .bannerItem ul li::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; transition: all 0.8s ease;z-index: 0; opacity: 0; }
.indexBanner .bannerItem ul li:first-child{ border-left: 0;}
.indexBanner .bannerItem ul li .tit{ font-size: 16px; color: #fff; line-height: 26px; position: relative; z-index: 2;}
.indexBanner .bannerItem ul li .txt{font-size: 12px; color: rgba(255,255,255,0.8); line-height: 14px; margin-top: 5px; position: relative; z-index: 2;}
.indexBanner .bannerItem ul li .iconfont{ position: absolute; left: 45px; line-height: 40px; margin-top: -20px; top: 50%; font-size: 40px; color: #fff; z-index: 2;}
.indexBanner .bannerItem ul li:hover::after{ opacity: 0.2; }
@media (max-width: 1560px){
    .indexBanner .bannerItem ul li{padding:25px 30px 30px 65px;}
    .indexBanner .bannerItem ul li .iconfont{ left: 25px;}
}



.more1,.more2,.more3,.more4{display: inline-block; width: 160px;  text-align: center; transition: all 0.8s ease; position: relative; overflow: hidden; border-radius: 3px;}
.more1 span,.more2 span,.more3 span,.more4 span{ display: inline-block; position: relative; z-index: 2;}
.more1,.more3{  font-size: 16px; color: #fff; line-height: 50px; margin-right: 10px;  transition: all 0.8s ease;}
.more1::before,.more3::before,.more4::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px rgba(255,255,255,0.8); transition: all 0.8s ease; z-index: 1; border-radius: 3px; overflow: hidden;}
.more1::after,.more4::after{ content: ''; position: absolute; left: -110%; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0; border-radius: 3px; overflow: hidden;}
.more2{ font-size: 16px; color: #fff; line-height: 50px; margin-right: 10px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;}
.more3::after{ content: ''; position: absolute; left: -110%; top: 0; width: 100%; height: 100%; background-color: #fff; transition: all 0.8s ease;z-index: 0; border-radius: 3px; overflow: hidden;}
.more4{ width: 100%; line-height: 44px; font-size: 14px; color: #333;}
.more4::before{ border-color: #ddd;}
.more1.b{ color: #333;}
.more1.b::before{ border: solid 1px #ddd;}
.more1:hover::after,.more3:hover::after,.more4:hover::after{ left: 0;}
.more1:hover::before,.more3:hover::before,.more4:hover::before{opacity: 0;}
.more1:hover{ border: 0; color: #fff;}
.more2:hover,.more4:hover{ color: #fff;}
.more3:hover{  color: #ff4229;}


@media (max-width: 1560px){
    .indexBanner .bannerItem ul li{ padding:15px 30px 20px 85px;}
}

/* indexTitle */
.indexTitle{ text-align: center; position: relative; z-index: 1;}
.indexTitle h3{ font-weight: normal; font-size: 34px; color: #333; line-height: 56px;}
.indexTitle p{ font-size: 16px; color: #666; line-height: 30px; margin-top: 0px;}
.indexTitle.l{ text-align: left;}
.indexTitle.w h3,.indexTitle.w p{ color: #fff;}

/* indexProduct */
.indexProduct{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;}
.indexProduct .list{ width: 100%; margin-top: 50px;}
.indexProduct .list .item{ width: 18.8%; margin-right: 1.5%; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.07);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.07);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.07); border-radius: 3px; overflow: hidden; transition: all 0.8s ease;}
.indexProduct .list .item:last-child{ margin-right: 0;}
.indexProduct .list .item .tit{ position: relative; padding: 25px 30px; position: relative; background-image: linear-gradient(90deg, #ff4229 0%, #f89172 100%);}
.indexProduct .list .item .tit::after{ content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/icon/icon_proBg.png) left top no-repeat; background-size: auto 100%;opacity: 0.6;}
.indexProduct .list .item .tit span{ display: inline-block; position: relative; color: #fff; z-index: 3; font-size: 20px; font-weight: bold;}
.indexProduct .list .item .tit i{ position: absolute; z-index: 3; right: 25px; top: 50%; width: 56px; height: 50px; background-size: 56px 50px !important; margin-top: -25px;}
.indexProduct .list .item .tit i.i1{ background: url(../images/icon/icon_pro01.png) center no-repeat;}
.indexProduct .list .item .tit i.i2{ background: url(../images/icon/icon_pro02.png) center no-repeat;}
.indexProduct .list .item .tit i.i3{ background: url(../images/icon/icon_pro03.png) center no-repeat;}
.indexProduct .list .item .tit i.i4{ background: url(../images/icon/icon_pro04.png) center no-repeat;}
.indexProduct .list .item .tit i.i5{ background: url(../images/icon/icon_pro05.png) center no-repeat;}
.indexProduct .list .item ul{ padding: 15px 30px 25px;}
.indexProduct .list .item ul li{ width: 100%; margin: 10px 0;}
.indexProduct .list .item ul li .t{ position: relative; padding-left: 20px; line-height: 26px; font-size: 16px; color: #333; transition: all 0.8s ease;}
.indexProduct .list .item ul li .t::after{ content: ''; position: absolute; left: 0; top: 50%; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; border: solid 2px #a8afc7; transition: all 0.8s ease;}
.indexProduct .list .item ul li .d{ font-size: 14px; color: #aaa; padding-left: 20px; transition: all 0.8s ease;}
.indexProduct .list .item ul li:hover .t,.indexProduct .list .item ul li:hover .d{ color: #ff4229;}
.indexProduct .list .item ul li:hover .t::after{ border-color: #ff4229}


/* indexSolutions */
.indexSolutions{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background: url(../images/home/solutionsBg.jpg) center no-repeat; background-size: cover !important;}
.indexSolutions .top{ position: relative;}
.indexSolutions .solutionNav{ position: absolute; bottom: 0; right: 0; width: 340px;}
.indexSolutions .solutionNav .swiper-slide{ position: relative; text-align: center;}
.indexSolutions .solutionNav .swiper-slide a{ display: inline-block; width: 100%; font-size: 16px; color: #333; line-height: 50px;   transition: all 0.8s ease; position: relative; overflow: hidden; border-radius: 3px; overflow: hidden;}
.indexSolutions .solutionNav .swiper-slide a span{ display: inline-block; position: relative; z-index: 3;}
.indexSolutions .solutionNav .swiper-slide a::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px #ddd; transition: all 0.8s ease; z-index: 1;border-radius: 3px; overflow: hidden;}
.indexSolutions .solutionNav .swiper-slide a::after{ content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0;}
.indexSolutions .solutionNav .swiper-slide.swiper-slide-thumb-active a::after{ left: 0;}
.indexSolutions .solutionNav .swiper-slide.swiper-slide-thumb-active a::before{opacity: 0;}
.indexSolutions .solutionNav .swiper-slide.swiper-slide-thumb-active a{ border: 0; color: #fff;}

.indexSolutions .solutionBox{ width: 100%; margin-top: 50px; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.indexSolutions .solutionBox .swiper-slide{ width: 100%; position: relative; background-color: #fff; overflow: hidden; }
.indexSolutions .solutionBox .swiper-slide .slcase{ width: 300px; background-color: #f9f9fb; position: relative;}
.indexSolutions .solutionBox .swiper-slide .slcase ul{ width: 170px; position: absolute; right: 65px; top: 50%; transform: translateY(-50%);}
.indexSolutions .solutionBox .swiper-slide .slcase ul li{ width: 100%; margin: 10px 0;  position: relative; overflow: hidden; transition: all 0.8s ease; border-radius: 3px; overflow: hidden;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li::before{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; border: solid 1px #e5e5e5; transition: all 0.8s ease; border-radius: 3px; overflow: hidden;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li::after{ content: ''; position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; border-radius: 3px; overflow: hidden; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0; transition: all 0.8s ease;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li img{ width: 100%; display: block; position: relative; z-index: 3; transition: all 0.8s ease;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li img.img2{ position: absolute; left: 0; top: 0; opacity: 0; z-index: 2;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li:hover::before{ opacity: 0;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li:hover:after{ opacity: 1;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li:hover .img1{ opacity: 0;}
.indexSolutions .solutionBox .swiper-slide .slcase ul li:hover .img2{ opacity: 1;}
.indexSolutions .solutionBox .swiper-slide .box{ width: calc(100% - 300px); background-color: #fff;}
.indexSolutions .solutionBox .swiper-slide .box .info{ padding: 60px 40px 80px 40px; position: relative;}
.indexSolutions .solutionBox .swiper-slide .box .info .img{ width: 400px; transition: all 0.8s ease;  background-size: cover !important;}
.indexSolutions .solutionBox .swiper-slide .box .info .img img{ width: 100%; display: block;}
.indexSolutions .solutionBox .swiper-slide .box .info .text{ width: calc(100% - 400px); padding-right: 8%; transition: all 0.8s ease;}
.indexSolutions .solutionBox .swiper-slide .box .info .text .tit{ font-size: 26px; color: #333;}
.indexSolutions .solutionBox .swiper-slide .box .info .text .txt{ font-size: 16px; color: #666; margin-top: 20px; line-height: 36px;  overflow: hidden;}
.indexSolutions .solutionBox .swiper-slide .box .info .text .lk{ margin-top: 45px;}
.indexSolutions .solutionBox .swiper-slide .box ul{ padding:25px 40px; border-top: solid 1px #eee;}
.indexSolutions .solutionBox .swiper-slide .box ul li{ text-align: center; width: 16.66%;}
.indexSolutions .solutionBox .swiper-slide .box ul li .iconfont{ font-size: 46px; color: #a8afc7;}
.indexSolutions .solutionBox .swiper-slide .box ul li .tit{ color: #333; font-size: 16px; margin-top: 10px;}
.indexSolutions .solutionBox .swiper-slide .box ul li:hover .iconfont,.indexSolutions .solutionBox .swiper-slide .box ul li:hover .tit{ color: #ff4229;}

@media (max-width: 1560px){
    .indexSolutions .solutionBox .swiper-slide .box .info{ padding: 60px 40px ; position: relative;}
    .indexSolutions .solutionBox .swiper-slide .box .info .img{ width: 320px;}
    .indexSolutions .solutionBox .swiper-slide .box .info .text{ width: calc(100% - 320px); padding-right: 8%;}
    .indexSolutions .solutionBox .swiper-slide .box .info .text .txt{ font-size: 14px; line-height: 30px;}
}

/* indexCase */
.indexCase{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;}
.indexCase .caseBox{ width: calc(100% + 60px); position: relative; margin: 30px 0 0 -30px;}
.indexCase .caseBox::after{ content: ''; position: absolute; width: 99px; height: 71px; top: 5px; left: -30px; z-index: 0;  background: url(../images/icon/icon_bgl.png) center no-repeat; background-size: 99px 71px !important;}
.indexCase .caseItem{ position: relative; z-index: 2;  }
.indexCase .caseItem .swiper-slide{ position: relative;  padding: 30px;}
.indexCase .caseItem .swiper-slide .box{background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.indexCase .caseItem .swiper-slide .img{ width: 45.8%; overflow: hidden;}
.indexCase .caseItem .swiper-slide .img img{ width: 100%; height: 100%; display: block; transition: all 0.8s ease;}
.indexCase .caseItem .swiper-slide .info{ width: 54.2%;position: relative; padding: 80px 60px;}
.indexCase .caseItem .swiper-slide .info .clogo{ height: 42px; position: absolute; top: 85px; right: 60px;}
.indexCase .caseItem .swiper-slide .info .clogo img{ height: 100%; display: block;}
.indexCase .caseItem .swiper-slide .info .tit{ font-size: 26px; color: #333; transition: all 0.8s ease;}
.indexCase .caseItem .swiper-slide .info .tags{ margin-top: 10px; }
.indexCase .caseItem .swiper-slide .info .tags span{ display: inline; line-height: 26px; padding: 0 12px; border: solid 1px rgba(255,66,41,0.2);margin-right: 10px; font-size: 14px; color: #ff4229; border-radius: 3px; overflow: hidden;}
.indexCase .caseItem .swiper-slide .info .txt{ font-size: 16px; color: #666; margin-top: 20px; line-height: 36px; max-height: 108px; overflow: hidden;}
.indexCase .caseItem .swiper-slide .info .lk{ margin-top: 45px;}
.indexCase .caseItem .swiper-slide:hover .img img{ transform: scale(1.1);}
.indexCase .caseItem .swiper-slide:hover .info .tit{ color: #ff4229;}
.indexCase .caseItem .swiper-scrollbar{ position: relative ; left: 0; width: 240px; background-color: rgba(0,0,0,0); margin:50px auto 0; bottom: 0; border-radius: 0;}
.indexCase .caseItem .swiper-scrollbar::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background-color: #a8afc7; top: 1px;z-index: 0; opacity: 0.4;}
.indexCase .caseItem .swiper-scrollbar .swiper-scrollbar-drag{ border-radius: 2px; cursor: pointer; background-color: #ff4229;z-index: 2;}
.indexCase .swiper-button-next,.indexCase .swiper-button-prev{ color: #333; width: 60px; height: 60px; border: 0; background-color: #f9f9fb; border-radius: 50%;  background-image:  none !important; margin-top: -60px !important; font-size: 30px;  text-align: center; line-height: 60px; transition: all 0.6s ease;}
.indexCase .swiper-button-next::after,.indexCase .swiper-button-prev::after{ display: none;}
.indexCase .swiper-button-next{ right: -70px; transform: rotate(180deg);}
.indexCase .swiper-button-prev{ left: -70px;}
.indexCase .swiper-button-next:hover,.indexCase .swiper-button-prev:hover{ color: #fff; background-color: #ff4229;}
@media (max-width: 1560px){ 
    .indexCase .caseItem .swiper-slide .info .clogo{ height: 38px;}
}


/* indexPartner */
.indexPartner{ width: 100%;  padding: 100px 0 90px; position: relative; overflow: hidden; background:#f3f6fa url(../images/home/partnerBg.jpg) center no-repeat; background-size: cover !important;}
.indexPartner ul{ width: 100%; margin-top: 40px;}
.indexPartner ul li{ width: 15.5%; margin: 10px 1.2% 10px 0; position: relative; background-color: #fff;  transition: all 0.8s ease; overflow: hidden; border-radius: 3px; overflow: hidden;}
.indexPartner ul li::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0; opacity: 0; border-radius: 3px; overflow: hidden;}
.indexPartner ul li img{ width: 100%; display: block; position: relative; z-index: 2;  transition: all 0.8s ease;}
.indexPartner ul li img.img2{ opacity: 0; position: absolute; left: 0; top: 0; z-index: 1;}
.indexPartner ul li:nth-child(6),.indexPartner ul li:nth-child(11),.indexPartner ul li:nth-child(17){ margin-right: 0;}
.indexPartner ul li:nth-child(7){ margin-left: 7.75%;}
.indexPartner ul li:hover::after{ opacity: 1; }
.indexPartner ul li:hover img.img1{ opacity: 0;}
.indexPartner ul li:hover img.img2{ opacity: 1;}

/* indexNews */
.indexNews{ width: 100%;  padding: 100px 0  80px 0; position: relative; overflow: hidden; background: url(../images/home/newsBg.jpg) center no-repeat; background-size: cover !important;}
.indexNews .top{ position: relative;}
.indexNews .newsNav{ position: absolute; bottom: 0; right: 0; width: 520px;}
.indexNews .newsNav .swiper-slide{ position: relative; text-align: center;}
.indexNews .newsNav .swiper-slide a{ display: inline-block; width: 100%; font-size: 16px; color: #333; line-height: 50px;   transition: all 0.8s ease; position: relative; overflow: hidden; border-radius: 3px; overflow: hidden;}
.indexNews .newsNav .swiper-slide a span{ display: inline-block; position: relative; z-index: 3;}
.indexNews .newsNav .swiper-slide a::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px #ddd; transition: all 0.8s ease; z-index: 1; border-radius: 3px; overflow: hidden;}
.indexNews .newsNav .swiper-slide a::after{ content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0; border-radius: 3px; overflow: hidden;}
.indexNews .newsNav .swiper-slide.swiper-slide-thumb-active a::after{ left: 0;}
.indexNews .newsNav .swiper-slide.swiper-slide-thumb-active a::before{opacity: 0;}
.indexNews .newsNav .swiper-slide.swiper-slide-thumb-active a{ border: 0; color: #fff;}

.indexNews .newsBox{ width: calc(100% + 40px); margin: 20px 0 0 -20px; }
.indexNews .newsBox .swiper-slide{ position: relative; padding:30px 20px; overflow: hidden;}
.indexNews .newsBox .swiper-slide .first{ width: 44.5%; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05);  position: relative; border-radius: 3px; overflow: hidden;}
.indexNews .newsBox .swiper-slide .first::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide .first a{ display: inline-block; width: 100%; height: 100%; position: relative;}
.indexNews .newsBox .swiper-slide .first .img{ width: 100%; height: 58%; position: relative;overflow: hidden;}
.indexNews .newsBox .swiper-slide .first .img img{width: 100%; display: inline-block; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide .first .info{ width: 100%; padding:30px 40px ;}
.indexNews .newsBox .swiper-slide .first .info .tit{ color: #333; font-size: 26px; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide .first .info .txt{ font-size: 16px; color: #666; margin-top: 15px; line-height: 30px; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide .first .info .time{ font-size: 18px; color: #333; margin-top: 20px; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide ul{ width:  52%; margin-left: 3.5%;}
.indexNews .newsBox .swiper-slide ul li{ position: relative;width: 100%; margin-bottom: 30px;  background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 3px; overflow: hidden; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.indexNews .newsBox .swiper-slide ul li a{ display: inline-block; width: 100%; height: 100%; padding: 25px 35px 28px; position: relative; }
.indexNews .newsBox .swiper-slide ul li .time{ font-size: 18px; color: #333; position: relative; padding-bottom: 13px; margin-bottom: 12px; position: relative; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide ul li .time::after{ content: ''; position: absolute; width: 70px; left: 0; bottom: 0; height: 2px;  background-color: #a8afc7; opacity: 0.2;  transition: all 0.8s ease; z-index: 2; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide ul li .tit{ font-size: 20px; color: #333; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide ul li .txt{ font-size: 16px; color: #666; margin-top: 10px; transition: all 0.8s ease;}
.indexNews .newsBox .swiper-slide ul li:last-child{ margin-bottom: 0;}
.indexNews .newsBox .swiper-slide .first:hover::after,.indexNews .newsBox .swiper-slide ul li:hover::after{ left: 0;}
.indexNews .newsBox .swiper-slide ul li:hover .time::after{ background-color: rgba(255,66,41,0.4);}
.indexNews .newsBox .swiper-slide .first:hover .info .tit,.indexNews .newsBox .swiper-slide .first:hover .info .time,.indexNews .newsBox .swiper-slide ul li:hover .time,.indexNews .newsBox .swiper-slide ul li:hover .tit{ color: #ff4229; }
.indexNews .newsBox .swiper-slide .first:hover .info .txt,.indexNews .newsBox .swiper-slide ul li:hover .txt{ color: rgba(255,66,41,0.7);}
.indexNews .newsBox .swiper-slide .first:hover img{ transform:scale(1.1);}


/* indexContact */
.indexContact{ width: 100%; padding: 40px 0; position: relative; overflow: hidden; background: url(../images/home/contactBg.jpg) center no-repeat; background-size: cover !important;}
.indexContact .box{ text-align: center;}
.indexContact .box .tit{ color: #fff; font-size: 16px;}
.indexContact .box .tel{ margin: 35px 0; position: relative;}
.indexContact .box .tel p{ display: inline-block;text-align: left; vertical-align: middle; font-size: 30px; width: 265px; color: #fff;  margin: 0 40px;  line-height: 34px; position: relative;}
.indexContact .box .tel p span{ width: 34px; height: 34px; text-align: center; line-height: 34px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 20px; background-color: rgba(255,255,255,0.2); font-size: 26px; border-radius: 50%;}
.indexContact .box .tel::after{ content: ''; width: 1px; height: 30px; position: absolute; right: 50%; top: 50%; margin-top: -15px; background-color: rgba(255,255,255,0.3); }



/* footer */
.footer{ width: 100%; position: relative; background-color: #222;}
.footer .box{ padding: 70px 0 60px 0; position: relative;}
.footer .fCon{ width: 480px;}
.footer .fCon .fLogo a{ display: inline-block;  width: 146px; height:40px; margin-bottom: 20px; background: url(../images/logo1.png) center no-repeat; background-size: 146px 40px !important;}
.footer .fCon .fInfo{ position: relative; margin: 5px 0; font-size: 16px; color: rgba(255,255,255,0.6); line-height: 30px; padding-left: 30px;}
.footer .fCon .fInfo span{ display: inline-block; line-height: 30px; font-size: 22px; color: rgba(255,255,255,0.3); position: absolute; left: 0; top: 0;}
.footer .fNav{ width:  calc(100% - 800px); padding: 0 5%; border-left: solid 1px rgba(255,255,255,0.1);border-right: solid 1px rgba(255,255,255,0.1);}
.footer .fNav dl{ padding:0 8%  ;}
.footer .fNav dl dt{width: 100%; margin-bottom: 15px;}
.footer .fNav dl dt a{ display: inline-block; font-size: 16px; color: #fff;}
.footer .fNav dl dd{ margin: 10px 0;}
.footer .fNav dl dd a{ display: inline-block; font-size: 14px; color: rgba(255,255,255,0.6);}
.footer .fNav dl a:hover{ color: #ff4229;}
.footer .fEwm{ width: 120px; text-align: center;}
.footer .fEwm img{ width: 100%; display: block;}
.footer .fEwm p{ font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 10px;}
.footer .links{ padding: 15px 0; border-top:  solid 1px rgba(255,255,255,0.1); border-bottom:  solid 1px rgba(255,255,255,0.1);}
.footer .links .blogroll{ padding-left: 80px; line-height: 26px; font-size: 14px; color: rgba(255,255,255,0.4); position: relative;}
.footer .links .blogroll p{ position: absolute; top: 0; left: 0;}
.footer .links .blogroll span{ display: inline-block; margin: 0 7px;}
.footer .links .blogroll span:last-child{ display: none;}
.footer .links .blogroll a{ font-size: 14px;color: rgba(255,255,255,0.4); }
.footer .links .blogroll a:hover{ color: #ff4229;}
.footer .copy{ padding: 15px 0;}
.footer .copy p{ max-width: 50%; line-height: 26px; font-size: 14px; color: rgba(255,255,255,0.3);}
.footer .copy img{ display: inline-block; vertical-align: middle; margin:-2px 3px 0 0; height: 16px;}
.footer .copy a{ font-size: 14px;color: rgba(255,255,255,0.3); }
.footer .copy a:hover{ color: #f85a2b;}
@media (max-width: 1560px){
    .footer .fNav{ width:  calc(100% - 700px) ;padding: 0  3%;}
    .footer .fNav dl{ padding:0 6.5%  ;}
}


/* customer */
.customer{width: 64px; height: 300px; position:fixed;right:20px; bottom: 10%; z-index:97; }
.customer .kefu{ width: 100%; position: relative; text-align: center; margin-bottom: 10px; z-index: 2;}
.customer .kefu .kf{ width: 100%;  height: 64px; position: relative;}
.customer .kefu .kf::after{ content: '';  position: absolute; z-index: 1; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background-color: #ff4229; top: 50%; left: 50%; opacity: 0.4; -webkit-animation: zoomBig 1.4s infinite; animation: zoomBig 1.4s infinite;}
.customer .kefu .kf::before{ content: '';  position: absolute; z-index: 0; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background-color: #ff4229; transform: translate(-50%,-50%); top: 50%; left: 50%; opacity: 0.1; -webkit-animation: zoomBig1 1.4s infinite; animation: zoomBig1 1.4s infinite;}
.customer .kefu .kf .img{ width: 100%; height: 64px; background:#fff url(../images/icon/icon_kefu.png) center bottom no-repeat; background-size: 87% !important; border: solid 2px #ff4229; border-radius: 50%; position: relative; z-index: 3;}
.customer .kefu .tit{ width: 100%; line-height: 24px; color: #fff; font-size: 14px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); position: relative; z-index: 3;}
.customer .kefu .tit a{ display: inline-block; color: #fff;}
.customer .info{ background-color: #fff;position: relative; width: 100%; box-shadow: 0 0 20px rgba(0,0,0,0.07);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.07);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.07); position: relative; z-index: 3;}
.customer .info::after{ content: ''; position: absolute; width: 30px; height: 1px; left: 50%; margin-left: -15px; top:50%; background-color: #a8afc7; z-index: 9;}

.customer dl{width: 100%;height: 64px;position: relative; z-index: 2; background-color: #fff; text-align: center;}
.customer dl dt{width: 64px;height: 64px;  padding: 8px 0; color:#a8afc7;background-color: #fff;cursor: pointer;position: relative; z-index: 3;transition: all 0.8s ease; text-align: center; }
.customer dl dt a{ display: inline-block; width: 100%; height: 100%; color: #a8afc7;}
.customer dl dt i{ display: inline-block; font-size:30px; line-height: 24px; margin-top: 2px;}
.customer dl dt p{ font-size: 12px; margin-top: 3px;}
.customer dl.icon1 dd{width: 200px; display: none; opacity: 0; height: 64px; padding: 10px 15px; border-right: solid 1px rgba(255,255,255,0.4);  color: #fff;font-size: 14px; line-height: 24px; background-color: #ff4229; position: absolute; top: 0;right: -300px; z-index: 1; text-align: center; transition: all 0.5s ease;}
.customer dl.icon1 dd p{ line-height:44px; font-size: 26px; font-weight: bold; display: inline-block;}
.customer dl.icon2{ z-index: 1;}
.customer dl.icon2 dd{width: 150px; display: none;  opacity: 0 ;text-align: center; background-color: #fff; border: solid 1px #eee; position: absolute; bottom: 0; right: -300px; z-index: 1; transition: all 0.8s ease; }
.customer dl.icon2 dd img{ width: 100%; display: block; }
.customer dl.icon2 dd p{ font-size: 14px; margin-bottom: 8px;}
.customer dl:hover dt{ background-color: #ff4229; color: #fff;}
.customer dl:hover dd{right: 64px;opacity: 1; display: inline-block;}
.customer dl:hover dt a{ color: #fff;}
.customer .gotop{ width: 100%; line-height: 64px; text-align: center; line-height: 64px; font-size: 16px; color: #a8afc7; background-color: #fff; margin-top: 10px; cursor: pointer; box-shadow: 0 0 20px rgba(0,0,0,0.07);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.07);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.07); transition: all 0.8s ease;}
.customer .gotop:hover{ background-color: #ff4229; color: #fff;}

/*donghua*/
@-webkit-keyframes zoomBig {0%{transform: scale(0.71) ;}100%{transform: scale(1) ; opacity: 0;}}
@-moz-keyframes zoomBig {0%{transform: scale(0.71) ;}100%{transform: scale(1) ; opacity: 0;}}
@keyframes zoomBig {0%{transform: scale(0.71) ;}100%{transform: scale(1) ; opacity: 0;}}

@-webkit-keyframes zoomBig1 {0%{transform: scale(0.49) ;}100%{transform: scale(1) ; opacity: 0;}}
@-moz-keyframes zoomBig1 {0%{transform: scale(0.49) ;}100%{transform: scale(1) ; opacity: 0;}}
@keyframes zoomBig1 {0%{transform: scale(0.49) ;}100%{transform: scale(1) ; opacity: 0;}}

/* pageBanner */
.pageBanner{ width: 100%; position: relative; overflow: hidden; margin-top: 80px; min-width: 1200px;}
.pageBanner .bg{ width: 100%; position: relative; background-color: #000; z-index: 1;}
.pageBanner .bg img{ width: 100%; display: block; position: relative; z-index: 1; opacity: 1;}
.pageBanner .info{ position: absolute; text-align: left; left: 0; width: 100%; top: 50%; transform: translateY(-50%); z-index: 2;}
.pageBanner .info .tit{ font-size: 44px; color: #333;}
.pageBanner .info .txt{ font-size: 18px;  line-height: 36px; color: #666; margin-top: 15px;}
.pageBanner .info .lk{  margin-top: 50px;}
.pageBanner .info .lk .more2{ }
.pageBanner .info .lk .more2:hover{}
.pageBanner .info.w .tit,.pageBanner .info.w .txt{ color: #fff;}
.pageBanner.aboutBanner .bg img{opacity:0.5;}
.pageBanner.aboutBanner .info{ text-align: center;}
.pageBanner.aboutBanner .info .tit { font-size: 50px;}
.pageBanner.aboutBanner .info .txt { font-size: 22px;}

/* pageCrumbs */
.pageCrumbs{ width: 100%; position: relative; overflow: hidden; margin-top: 80px; padding:19px 0 ; background-color: #f6f7f9;}
.pageCrumbs .pageNav{ max-width: 60%;}
.pageCrumbs .pageNav li{ margin-left: 40px;}
.pageCrumbs .pageNav li:first-child{ margin-left: 0;}
/* .pageCrumbs .pageNav li a{ display: inline-block; font-size: 16px; color: #333; line-height: 30px;}
.pageCrumbs .pageNav li.on a,.pageCrumbs .pageNav li:hover a{ color: #ff4229; }
 */
.pageCrumbs .pageNav li .iconfont{ width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%;  color: #333; font-size: 20px; margin-right: 10px; position: relative; background-color: rgba(0,0,0,0.05);  transition: all 0.8s ease;}
.pageCrumbs .pageNav li .tit{  font-size: 16px; color: #333; line-height: 32px; transition: all 0.8s ease; }
.pageCrumbs .pageNav li:hover .iconfont,.pageCrumbs .pageNav li.on .iconfont{ background-color: rgba(255,66,41,0.2); color: #ff4229;}
.pageCrumbs .pageNav li:hover .tit,.pageCrumbs .pageNav li.on .tit{ color: #ff4229;}

.pageCrumbs .pageNav.case li:nth-child(1) .iconfont::before{content: "\e614";}
.pageCrumbs .pageNav.case li:nth-child(2) .iconfont::before{content: "\e619";}
.pageCrumbs .pageNav.case li:nth-child(3) .iconfont::before{content: "\e671";}
.pageCrumbs .pageNav.case li:nth-child(4) .iconfont::before{content: "\e6d9";}
.pageCrumbs .pageNav.case li:nth-child(5) .iconfont::before{content: "\e674";}
.pageCrumbs .pageNav.news li:nth-child(1) .iconfont::before{content: "\e60d";}
.pageCrumbs .pageNav.news li:nth-child(2) .iconfont::before{content: "\e607";}
.pageCrumbs .pageNav.news li:nth-child(3) .iconfont::before{content: "\e60b";}

.pageCrumbs .crumbs{ max-width: 35%; line-height: 30px;}
.pageCrumbs .crumbs a{display: inline-block; font-size: 16px; color: #666; line-height: 30px;}
.pageCrumbs .crumbs a:hover,.pageCrumbs .crumbs a:last-child{ color: #ff4229;}
.pageCrumbs .crumbs span{ font-size: 16px; color: #999; display: inline-block; margin: 0 5px;}
.pageCrumbs .crumbs span:last-child{ display: none;}
.pageCrumbs .crumbs i{ font-size: 20px; color: #aaa; margin-right: 5px;}

/* aboutNav */
.aboutNav{ width: 100%; position: fixed; top: -80px; z-index: 99; overflow: hidden; padding:15px 0 ; border-top: solid 1px #fafafa; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.07);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.07);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.07); transition: all 0.8s ease;}
.aboutNav ul{ width: 100%;}
.aboutNav li{ margin-right: 40px;}
.aboutNav li a{ display: inline-block; font-size: 16px; color: #333; line-height: 30px;}
.aboutNav li.current a,.aboutNav li:hover a{ color: #ff4229; }
.aboutNav.on-fixed{ top: 80px;}


/* pageAbout */
.pageAbout{ width: 100%; position: relative; padding: 130px 0 190px; background: url(../images/suncher.png) center bottom 80px no-repeat; background-size: 98% auto; overflow: hidden;}
.pageAbout .indexTitle p{ line-height: 38px; font-size: 18px; margin-top: 40px;}
.pageAbout ul{ width: 100%; margin-top: 90px;}
.pageAbout ul li{ position: relative; margin: 0 6%; text-align: center;}
.pageAbout ul li .num{ position: relative;}
.pageAbout ul li .num span{  display: inline-block; width: 100%; font-family:'Nice'; font-size: 100px; color:#ff4229;}
.pageAbout ul li .num i{ position: absolute; right: -20px; top: 0; font-size: 30px; color: #ff4229;}
.pageAbout ul li .num.n1{ width: 80px;}
.pageAbout ul li .num.n2{ width: 100px;}
.pageAbout ul li .num.n3{ width: 152px;}
.pageAbout ul li .tit{ font-size: 18px; color: #666; margin-top: 10px;}


/* pagePartner */
.pagePartner{ width: 100%;  padding: 100px 0; position: relative; overflow: hidden; background:#f3f6fa url(../images/home/partnerBg.jpg) center no-repeat; background-size: cover !important;}
.pagePartner ul{ width: 100%; }
.pagePartner ul li{ width: 15.5%; margin: 10px 1.4% 10px 0; position: relative; background-color: #fff;  transition: all 0.8s ease; overflow: hidden; border-radius: 3px; overflow: hidden;}
.pagePartner ul li::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0; opacity: 0; border-radius: 3px; overflow: hidden;}
.pagePartner ul li img{ width: 100%; display: block; position: relative; z-index: 2;  transition: all 0.8s ease;}
.pagePartner ul li img.img2{ opacity: 0; position: absolute; left: 0; top: 0; z-index: 1;}
.pagePartner ul li:nth-child(6),.pagePartner ul li:nth-child(11),.pagePartner ul li:nth-child(17){ margin-right: 0;}
.pagePartner ul li:nth-child(7){ margin-left: 7.75%;}
.pagePartner ul li:hover::after{ opacity: 1; }
.pagePartner ul li:hover img.img1{ opacity: 0;}
.pagePartner ul li:hover img.img2{ opacity: 1;}

/* pageBrand */
.pageBrand{ width: 100%;  padding: 180px 0; position: relative; overflow: hidden; background:#f3f6fa url(../images/about/brandBg.jpg) center no-repeat; background-size: cover !important;}
.pageBrand .videoBox{ position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 1;}
.pageBrand .videoBox::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 2;}
.pageBrand .videoBox video{width:auto;height: auto; min-width: 100%; min-height: 100%; object-fit: fill; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
.pageBrand .c1440{ position: relative; z-index: 2;}
.pageBrand .c1440{ position: relative; z-index: 2;}
.pageBrand .info{ width: 50%;}
.pageBrand .info .tit{ font-size: 44px; color: #fff; line-height: 60px;}
.pageBrand .info .txt{ font-size: 24px; color: #fff; margin-top: 20px;  }

/* pageValues */
.pageValues{ width: 100%;  padding: 100px 0; position: relative; overflow: hidden; background:#f9f9f9 url(../images/about/valuesBg.jpg) center no-repeat; background-size: cover !important;}
.pageValues .info{ width: 38%; padding: 60px 60px 0 0;}
.pageValues .indexTitle h3{ font-weight: bold;}
.pageValues .indexTitle p{ line-height: 34px; margin-top: 10px;}
.pageValues ul{ width: 62%;}
.pageValues ul li{ width: 48%; margin: 2% 4% 2% 0; padding: 40px 35px 100px 35px; background-color: #fff; position: relative; overflow: hidden; border-radius: 3px; cursor: pointer;}
.pageValues ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.pageValues ul li:nth-child(2n){ margin-right: 0;}
.pageValues ul li .tit{ font-size: 26px; color: #333; transition: all 0.8s ease;}
.pageValues ul li .txt{ font-size: 18px; color: #666; line-height: 34px; margin-top: 10px;}
.pageValues ul li .iconfont{ position: absolute; right: 30px; bottom: 30px; font-size: 60px; color: #a8afc7; transition: all 0.8s ease;}
.pageValues ul li:hover::after{ left: 0;}
.pageValues ul li:hover .iconfont{ color: #ff4229;}




/* pageHonor */
.pageHonor{ width: 100%; padding: 100px 0 0; position: relative; overflow: hidden;}
.pageHonor .honorBox{ width: 100%; position: relative; margin-top: 40px;}
.pageHonor .honorList{ width: 100%;}
.pageHonor .honorList .swiper-slide{ text-align: center;}
.pageHonor .honorList .swiper-slide .img{ width: 100%;}
.pageHonor .honorList .swiper-slide .img img{ width: 100%; display: block;}
.pageHonor .honorList .swiper-slide .tit{ margin-top: 15px;}
.pageHonor .honorList .swiper-slide .tit p{ font-size: 18px; color: #333;}
.pageHonor .honorList .swiper-slide .tit span{display: inline-block; font-size: 16px; text-transform: uppercase; margin-top: 5px;}
.pageHonor .swiper-button-next,.pageHonor .swiper-button-prev{ color: #333; width: 60px; height: 60px; border: 0; background-color: #f9f9fb; border-radius: 50%;  background-image:  none !important; margin-top: -60px !important; font-size: 30px;  text-align: center; line-height: 60px; transition: all 0.6s ease;}
.pageHonor .swiper-button-next::after,.pageHonor .swiper-button-prev::after{ display: none;}
.pageHonor .swiper-button-next{ right: -80px; transform: rotate(180deg);}
.pageHonor .swiper-button-prev{ left: -80px;}
.pageHonor .swiper-button-next:hover,.pageHonor .swiper-button-prev:hover{ color: #fff; background-color: #ff4229;}

/* pageContact */
.pageContact{ width: 100%; position: relative; overflow: hidden; padding-top: 200px;}
.pageContact .c1440{ position: relative;}
.pageContact .box{ position: absolute; left: 0; top: -100px; width: 100%; background-image: linear-gradient(90deg, #ff6e37 0%, #ed403c 100%); padding: 50px; z-index: 2; border-radius: 3px; overflow: hidden;}
.pageContact .box::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: url(../images/lineBg.png) center no-repeat; background-size: cover ; transform: rotate(-180deg);}
.pageContact .box .info{ width: 50%; padding-right: 60px; position: relative; z-index: 2;}
.pageContact .box .info .tit{ font-size: 26px; color: #fff;}
.pageContact .box .info ul{ width: 100%; margin-top: 20px;}
.pageContact .box .info ul li{ position: relative; margin-top: 10px; font-size: 16px; color: #fff; line-height: 30px; padding-left: 30px;}
.pageContact .box .info ul li span{ display: inline-block; line-height: 30px; font-size: 22px; color: #fff; position: absolute; left: 0; top: 0;}
.pageContact .box .info ul li b{ display: inline-block; font-family:'Nice'; font-size: 40px;}
.pageContact .box .info ul li:first-child span{ top: 8px;}
.pageContact .box .form{ width: 45%; position: relative; z-index: 2;}
.pageContact .box .form .tit{ font-size: 26px; color: #fff;}
.pageContact .box .form form{ margin-top: 25px;}
.pageContact .box .form form .item{ margin-top: 20px;}
.pageContact .box .form form .item .row{ width: 48.5%; position: relative;}
.pageContact .box .form form .item .row:first-child{ margin-right: 3%;}
.pageContact .box .form form .item .row label{ position:relative; display:block; }
.pageContact .box .form form .item .row label span{ position:absolute; left:15px; top:10px; line-height: 30px; font-size:16px; color:#999;}
.pageContact .box .form form .item .row .txt{ border: 0; width: 100%;  padding:10px 15px ; line-height: 30px; background:#fff;}
.pageContact .box .form form .item .row .ipt,.pageContact .box .form form .item .row .int{border: 0; width: 100%;  padding:10px 100px 10px 15px ; line-height: 30px; background:#fff;}
.pageContact .box .form form .item .row #code{ position: absolute; right: 0; top: 0; width: 90px; height: 100%; z-index: 2;}
.pageContact .box .form form .item .row .btn{ text-align: center; width: 100%; line-height: 50px; border: 0; font-size: 16px; color: #fff;background-color: #333;cursor: pointer;}
.pageContact .map{ width: 100%; position: relative; z-index: 1; height: 560px;}
.pageContact .map::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; z-index: 2;}
.pageContact .map #mapall{ width: 100%; height: 560px; position: relative; z-index: 1;}
@media (max-width: 1560px){ 
    .pageContact .box .form{ width: 50%;}
    .pageContact .box .form .tit{ font-size: 24px; }
}



/* pageNews */
.pageNews{ width: 100%; position: relative; padding: 80px 0;  overflow: hidden;}
.pageNews .first{ width: 100%; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 3px; overflow: hidden;}
.pageNews .first a{  width: 100%;}
.pageNews .first .img{ width: 50%; overflow: hidden;}
.pageNews .first .img img{ width: 100%; display: block; transition: all 0.8s ease;}
.pageNews .first .info{ width: 50%; padding: 60px; position: relative;}
.pageNews .first .info .tit{ font-size: 26px; color: #333; transition: all 0.8s ease;}
.pageNews .first .info .txt{ font-size: 16px; color: #666; line-height: 36px; margin-top: 30px;}
.pageNews .first .info .time{ font-size: 18px; color: #333; position: absolute; left: 60px; bottom: 60px; }
.pageNews .first:hover img{ transform: scale(1.1); }
.pageNews .first:hover .tit,.pageNews .first:hover .time{ color: #ff4229;}
.pageNews ul{ width: 100%; margin-top: 20px;}
.pageNews ul li{ width: 32%; margin: 2% 2% 0 0; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; overflow: hidden; border-radius: 3px;}
.pageNews ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.pageNews ul li:nth-child(3n){ margin-right: 0;}
.pageNews .listText li a{ display: inline-block; width: 100%; height: 100%; padding: 40px;}
.pageNews .listText li .time{color: #999; transition: all 0.8s ease;}
.pageNews .listText li .time p{ font-size: 30px; }
.pageNews .listText li .time span{ font-size: 14px; margin-top: 3px;}
.pageNews .listText li .tit{ font-size: 20px; color: #333; margin-top: 15px; transition: all 0.8s ease;}
.pageNews .listText li .txt{ font-size: 16px; color: #666; line-height: 30px; margin-top: 20px; transition: all 0.8s ease;}
.pageNews .listText li .more{ font-size: 14px; color: #999; margin-top: 30px; transition: all 0.8s ease;}
.pageNews .listText li .more span{ display: inline-block; margin-left: 5px; width: 20px; line-height: 20px; border-radius: 50%; background-color: #999; text-align: center;font-size: 14px;color: #fff; transition: all 0.8s ease;}
.pageNews .listImg li .img{ width: 100%; position: relative; overflow: hidden;}
.pageNews .listImg li .img img{ width: 100%; display: block; transition: all 0.8s ease;}
.pageNews .listImg li .info{ padding: 30px 40px 70px 40px; width: 100%; position: relative;}
.pageNews .listImg li .info .tit{ font-size: 20px; color: #333; transition: all 0.8s ease;}
.pageNews .listImg li .info .txt{ font-size: 16px; color: #666; line-height: 30px; margin-top: 15px; transition: all 0.8s ease;}
.pageNews .listImg li .info .time{ font-size: 16px; color: #333; position: absolute; left: 40px; bottom: 30px; transition: all 0.8s ease;}
.pageNews .listImg li:hover img{ transform: scale(1.1);}
.pageNews .listImg li:hover::after,.pageNews .listText li:hover::after{ left: 0;}
.pageNews .listText li:hover .more span{ background-color: #ff4229; color: #fff; margin-left: 40px;}
.pageNews .listText li:hover .time,.pageNews .listText li:hover .tit,.pageNews .listText li:hover .more,.pageNews .listImg li:hover .time,.pageNews .listImg li:hover .tit{ color: #ff4229;}
.pageNews .listText li:hover .txt,.pageNews .listImg li:hover .txt,.pageNews .first:hover .txt{  color: rgba(255,66,41,0.7);}

/* pageNewsD */
.pageNewsD{ width: 100%; position: relative;  padding: 80px 0; position: relative;}
.pageNewsD .c1440{ position: relative;}
.pageNewsD .pageLeft{ width: calc(100% - 340px);background-color: #fff; padding: 40px; border-radius: 3px; overflow: hidden; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.pageNewsD .pageLeft .tit{ font-size:30px ; color: #333; font-weight: normal;}
.pageNewsD .pageLeft .time{  padding: 20px 0 25px 0; width: 100%; border-bottom: dashed 1px #ddd;}
.pageNewsD .pageLeft .time span{ display: inline-block; font-size: 16px; color: #666; margin-right: 30px;}
.pageNewsD .pageLeft .summary{ padding:20px 25px; margin-top: 30px; border-radius: 3px; font-size: 16px; color: #aaa; line-height: 34px; overflow: hidden; background-color: #fafafa;}
.pageNewsD .pageLeft .summary span{ color: #666;}
.pageNewsD .pageLeft .text{ width: 100%; padding: 30px 0 20px 0; font-size: 16px; line-height: 38px; color: #333;}
.pageNewsD .pageLeft .text img{ max-width: 100%; height: auto !important;}
.pageNewsD .pageLeft .keywords{}
.pageNewsD .pageLeft .keywords span{ font-size: 14px; margin: 3px 0; line-height: 26px; color: #ff4229; margin-right: 5px; display: inline-block;}
.pageNewsD .pageLeft .keywords a{ margin: 3px 10px 3px 0; display: inline-block; line-height: 26px; padding: 0 10px; border: solid 1px #ff4229; color: #ff4229; font-size: 14px; border-radius: 3px;}
.pageNewsD .pageLeft .Plink{ padding-top: 20px; margin-top: 30px; border-top: dashed 1px #ddd;}
.pageNewsD .pageLeft .Plink p{ display: inline-block; width: 100%; margin: 7px 0;}
.pageNewsD .pageLeft .Plink a{ display: inline-block; font-size: 16px; color: #333;}
.pageNewsD .pageLeft .Plink a:hover{ color: #ff4229;}

.pageNewsD .pageRight{ width: 300px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: -webkit-sticky; position: sticky; top: 140px;}
.pageNewsD .pageRight .hotNews{ padding:25px 30px; width: 100%; background-color: #fff;}
.pageNewsD .pageRight .hotNews .Ntit{ font-size: 24px; padding-bottom: 15px; border-bottom: solid 1px #eee; color: #333;}
.pageNewsD .pageRight .hotNews ul{margin-top: 15px; width: 100%;}
.pageNewsD .pageRight .hotNews ul li{padding: 8px 0; width: 100%;}
.pageNewsD .pageRight .hotNews ul li .tit{ font-size: 16px; color: #333; line-height: 26px;}
.pageNewsD .pageRight .hotNews ul li .time{ font-size: 14px; color: #999; margin-top: 3px;}
.pageNewsD .pageRight .hotNews ul li:hover .tit,.pageNewsD .pageRight .hotNews ul li:hover .time{ color: #ff4229;}



/* pageCase */
.pageCase{ width: 100%; position: relative; padding: 80px 0; overflow: hidden;}
.pageCase .first{ width: 100%; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 3px; overflow: hidden;}
.pageCase .first .img{ width: 45.8%; overflow: hidden;}
.pageCase .first .img img{ width: 100%; height: 100%; display: block; transition: all 0.8s ease;}
.pageCase .first .info{ width: 54.2%;position: relative; padding: 60px 60px;}
.pageCase .first .info .clogo{ height: 42px; position: absolute; top: 65px; right: 60px;}
.pageCase .first .info .clogo img{ height: 100%; display: block;}
.pageCase .first .info .tit{ font-size: 26px; color: #333;}
.pageCase .first .info .tags{ margin-top: 10px; }
.pageCase .first .info .tags span{ display: inline; line-height: 26px; padding: 0 12px; border: solid 1px rgba(255,66,41,0.2);margin-right: 10px; font-size: 14px; color: #ff4229; border-radius: 3px; overflow: hidden;}
.pageCase .first .info .txt{ font-size: 16px; color: #666; margin-top: 20px; line-height: 36px;  overflow: hidden;}
.pageCase .first .info .lk{ margin-top: 45px;}
.pageCase .first:hover .img img{ transform: scale(1.1);}
.pageCase .first:hover .info .tit{  color: #ff4229;}
.pageCase ul{ width: 100%; margin-top: 20px;}
.pageCase ul li{ width: 32%; margin: 2% 2% 0 0; background-size: cover !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; overflow: hidden; border-radius: 3px; transition: all 0.8s ease;}
/* .pageCase ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; } */
.pageCase ul li:nth-child(3n){ margin-right: 0;}
.pageCase ul li .info{ width: 100%; height: 100%; position: relative; padding: 120px 40px 50px;  z-index: 2; background-color: #fff; transition: all 0.8s ease;}
.pageCase ul li .clogo{ height: 42px; position: absolute; left: 50%; top: 50px; transform: translateX(-50%); transition: all 0.8s ease;}
.pageCase ul li .clogo img{ height: 100%; display: block;}
.pageCase ul li .tit{ font-size: 18px; text-align: center; line-height: 30px; margin-top: 0; color: #333;  transition: all 0.8s ease;}
.pageCase ul li .tags{ margin-top: 15px;  transition: all 0.8s ease;}
.pageCase ul li .tags span{ display: inline; line-height: 26px; padding: 0 12px; border: solid 1px rgba(255,66,41,0.2);margin-right: 10px; font-size: 14px; color: #ff4229; border-radius: 3px; overflow: hidden;  transition: all 0.8s ease;}
.pageCase ul li .tags span:nth-child(n+3){ display: none;}
.pageCase ul li .txt{ font-size: 16px; color: #666; text-align: center; margin-top: 20px; line-height: 36px; overflow: hidden; transition: all 0.8s ease;}
.pageCase ul li .lk{  position: absolute; left: 0; width: 100%; bottom: -70px; transition: all 0.8s ease; }
.pageCase ul li .lk a{ width: 120px; line-height: 42px;}
.pageCase ul li:hover .info{ padding:70px 40px 140px;background-color: rgba(0,0,0,0.5); }

.pageCase ul li:hover .clogo{ top: -60px;}
.pageCase ul li:hover .tit{ font-size: 28px; color: #fff;}
.pageCase ul li:hover .tags{ margin-top:15px;  opacity: 0;}
.pageCase ul li:hover .tags span{ color: #fff; border-color: #fff;}
.pageCase ul li:hover .txt{ color: #fff; margin-top: -20px;}
.pageCase ul li:hover .lk{ bottom: 60px;}
@media (max-width: 1560px){ 
    .pageCase .first .info .clogo,.pageCase ul li .clogo{ height: 38px;}
}


/* mallModule01 */
.mallModule01{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background-color: #fff;}
.mallModule01 ul{ margin-top: 30px;}
.mallModule01 ul li{ width: 23.5%; margin: 2% 2% 0 0; padding: 40px 30px; background-color: #fff; border-radius: 3px; position: relative; overflow: hidden; transition: all 0.8s ease;  box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative;}
.mallModule01 ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.mallModule01 ul li:nth-child(4n){ margin-right: 0;}
.mallModule01 ul li .tit{ width: 100%; padding-bottom: 20px; border-bottom: solid 1px #eee; transition: all 0.8s ease; position: relative; z-index: 2;}
.mallModule01 ul li .tit span{ display: inline-block; text-align: center; font-size: 30px; color: #fff; width: 40px; line-height: 40px; border-radius: 3px;  background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); margin-right:10px ; transition: all 0.8s ease; }
.mallModule01 ul li .tit p{font-size: 20px; color: #333; font-weight: bold; line-height: 40px; transition: all 0.8s ease;}
.mallModule01 ul li .txt{ padding: 20px 0 30px; font-size: 16px; color: #666; line-height: 30px; position: relative; z-index: 2; transition: all 0.8s ease;}
.mallModule01 ul li .more4{ color: #fff;}
.mallModule01 ul li .more4::before{ opacity: 0;}
.mallModule01 ul li .more4::after{left: 0;}
.mallModule01 ul li:hover::after{left: 0;}
.mallModule01 ul li:hover .tit p{ color: #ff4229;}
.mallModule01 ul li:hover .txt{ color: #333;}


/* mallModule02 */
.mallModule02{ width: 100%; padding: 100px 0 170px; position: relative; overflow: hidden; background: url(../images/product/mall/mall02Bg.jpg) center no-repeat fixed; background-size: cover !important;}
.mallModule02::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.70); z-index: 0;}
.mallModule02 .c1440{ position: relative; z-index: 2;}
.mallModule02 ul{ margin-top: 40px;}
.mallModule02 ul li{ width: 24.25%; margin: 1% 1% 0 0; padding: 30px 30px; background-color: rgba(255,255,255,0.2); border: solid 1px rgba(255,255,255,0.1); border-radius: 3px; position: relative; overflow: hidden; transition: all 0.8s ease;  box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; cursor: pointer;}
.mallModule02 ul li::after{ content: ''; position: absolute; bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.mallModule02 ul li:nth-child(4n){ margin-right: 0;}
.mallModule02 ul li .tit{ width: 100%; padding-bottom: 15px; transition: all 0.8s ease; position: relative; z-index: 2;}
.mallModule02 ul li .tit span{ display: inline-block; text-align: center; font-size: 26px; color: #fff; width: 40px; line-height: 40px; border-radius: 3px;  background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; margin-right:10px ; transition: all 0.8s ease; }
.mallModule02 ul li .tit p{font-size: 20px; color: #fff; font-weight: bold; line-height: 40px; transition: all 0.8s ease;}
.mallModule02 ul li .txt{  font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 30px; position: relative; z-index: 2; transition: all 0.8s ease;}
.mallModule02 ul li:hover::after{ opacity: 1;}
.mallModule02 ul li:hover{ border-color: #ff4229;}


/* mallModule03 */
.mallModule03{ width: 100%; padding:0 0 80px 0; margin-top: -100px; position: relative; overflow: hidden;}
.mallModule03 .box{ width: 100%; padding: 30px;  box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05); background-color: #fff; border-radius: 3px; overflow: hidden;}
.mallModule03 .box table{ width: 100%; }
.mallModule03 .box table,.mallModule03 .box tbody,.mallModule03 .box tr,.mallModule03 .box td,.mallModule03 .box th{ border: 0; text-align: center; }
.mallModule03 .box tbody.t1 td{ background-color: #f8f8f8;}
.mallModule03 .box tbody.t2 td{ background-color: rgba(255,66,41,0.07);}
.mallModule03 .box td,.mallModule03 .box th{ border: solid 4px #fff; width: 11.11%; padding:15px 10px;}
.mallModule03 .box th{ font-size: 18px; color: #fff; line-height: 30px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); font-weight: normal;}
.mallModule03 .box td{ font-size: 16px; color: #666; line-height: 26px;}

/* mallModule04 */
.mallModule04{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background: url(../images/product/mall/mall04Bg.jpg) center no-repeat fixed; background-size: cover !important;}
.mallModule04::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.70); z-index: 0;}
.mallModule04 .c1440{ position: relative; z-index: 2;}
.mallModule04 ul{ margin-top: 50px;}
.mallModule04 ul li{ width: 49%; border-radius: 3px;  padding: 50px; background-color: #fff; position: relative;}
.mallModule04 ul li:first-child{ margin-right: 2%;}
.mallModule04 ul li .img{ width: 34%; padding:0 35px 0 0; position: relative;}
.mallModule04 ul li .img::after{ content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background-color: #eee;}
.mallModule04 ul li .img img{ width: 100%; display: block;}
.mallModule04 ul li .info{width: 66%; padding-left: 35px;}
.mallModule04 ul li .info .tit{ font-size: 24px; color: #333;}
.mallModule04 ul li .info .txt{ font-size: 16px; color: #999; line-height: 28px; margin-top: 20px;}
.mallModule04 .lk{ margin-top: 60px;}


/* mallModule05 */
.mallModule05{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;}
.mallModule05 ul{ margin-top: 35px;}
.mallModule05 ul li{ width: 25%; text-align: center; margin: 20px 0;}
.mallModule05 ul li .iconfont{ width: 100px; height: 100px; margin: auto; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); color: #fff; line-height: 100px; border-radius: 50%; text-align: center; transition: all 0.8s ease; font-size: 60px;}
.mallModule05 ul li .tit{ font-size: 24px; color: #333; margin-top:20px ;}
.mallModule05 ul li .txt{ font-size: 16px; color: #999; line-height: 28px; margin-top: 10px;}


/* mallModule06 */
.mallModule06{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background-color: #f6f7f9;}
.mallModule06 ul{ margin-top: 30px;}
.mallModule06 ul li{ width: 23.5%; margin: 2% 2% 0 0; padding: 60px 30px 120px;  background-size: cover !important; border-radius: 3px; position: relative; overflow: hidden; transition: all 0.8s ease;   position: relative; text-align: center;}
.mallModule06 ul li::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.70); z-index: 0;}
.mallModule06 ul li .info{ position: relative; z-index: 2; width: 100%;}
.mallModule06 ul li .info .tit{ font-size: 24px; color: #fff; padding-bottom: 30px; border-bottom: solid 1px rgba(255, 255, 255, 0.2);}
.mallModule06 ul li .info .con{ margin-top: 40px;}
.mallModule06 ul li .info .con p{ width: 50%; text-align: center; padding: 10px 0; font-size: 18px; color: #fff;}
.mallModule06 ul li:nth-child(4n){ margin-right: 0;}



/* mallModule07 */
.mallModule07{ width: 100%; padding: 100px 0 0 0; position: relative; overflow: hidden; /* background: url(../images/home/solutionsBg.jpg) center no-repeat; background-size: cover !important; */}


/* vrModule01 */
.vrModule01{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; }
.vrModule01 .Module01Box{margin-top: 50px;}
.vrModule01 ul{ margin-top: 50px;}
.vrModule01 ul li{ width:16.9%; margin: 0 1.2% 0 0; height: 450px; padding: 0; background-size: cover !important; border-radius: 3px; position: relative; overflow: hidden; transition: all 0.8s ease; position: relative;}
.vrModule01 ul li::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.60); z-index: 0;}
.vrModule01 ul li:last-child{ margin-right: 0;}
.vrModule01 ul li .info{ position: absolute; left: 0; bottom: 0; padding:0 30px 60px; z-index: 2; transition: all 0.8s ease;}
.vrModule01 ul li .info .icon{ width: 50px; height: 50px; background-size: 50px 50px !important; transition: all 0.8s ease;}
.vrModule01 ul li .info .icon.icon1{ background: url(../images/product/vr/vr01Icon01.png) center no-repeat;}
.vrModule01 ul li .info .icon.icon2{ background: url(../images/product/vr/vr01Icon02.png) center no-repeat;}
.vrModule01 ul li .info .icon.icon3{ background: url(../images/product/vr/vr01Icon03.png) center no-repeat;}
.vrModule01 ul li .info .icon.icon4{ background: url(../images/product/vr/vr01Icon04.png) center no-repeat;}
.vrModule01 ul li .info .tit{ font-size: 20px; line-height: 36px; color: #fff; margin: 15px 0; transition: all 0.8s ease;}
.vrModule01 ul li .info .txt{ font-size: 16px; color: #fff; line-height: 32px; height: 0; opacity: 0; transition: all 0.8s ease;}
.vrModule01 ul li.on{ width: 45.7%;}
.vrModule01 ul li.on .info{ padding:0 22% 50px 40px;}
.vrModule01 ul li.on .tit{ font-size: 24px;}
.vrModule01 ul li.on .txt { opacity: 1; height: auto;}


/* vrModule02 */
.vrModule02{ width: 100%; padding: 100px 0 ; position: relative; overflow: hidden; background: url(../images/product/vr/vr02Bg.jpg) center no-repeat fixed; background-size: cover !important;}
.vrModule02::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.70); z-index: 0;}
.vrModule02 .c1440{ position: relative; z-index: 2;}
.vrModule02 .vr02Box{ width: 100%; margin-top: 50px; padding-left: 300px; position: relative;}
.vrModule02 .vr02Nav{ position: absolute; left: 0; top: 0; width: 220px; padding: 20px; border-radius: 3px; overflow: hidden; background-color: rgba(255, 255, 255, 0.3);}
.vrModule02 .vr02Nav .swiper-slide{  position: relative; height: 50px !important; overflow: hidden; border-radius: 3px;}
.vrModule02 .vr02Nav .swiper-slide::after{ content: ''; position: absolute; left: -110%; top: 0; border-radius: 3px; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.vrModule02 .vr02Nav .swiper-slide a{ width: 100%; display: inline-block; text-align: center; padding:15px 20px ;line-height: 20px; border-radius: 3px; overflow: hidden; position: relative; z-index: 2; font-size: 16px; color: #fff;}
.vrModule02 .vr02Nav .swiper-slide.swiper-slide-thumb-active::after{ left: 0;}
.vrModule02 .vr02Item{ width: 100%; position: relative; overflow: hidden;}
.vrModule02 .vr02Item .swiper-slide{ width: 100%; position: relative; overflow: hidden;}
.vrModule02 .vr02Item .swiper-slide .tit{ font-size: 24px; color: #fff; margin-top: 20px;}
.vrModule02 .vr02Item .swiper-slide .txt{ font-size: 16px; color: #fff; line-height: 32px; margin-top: 30px; }
.vrModule02 .vr02Item .swiper-slide ul{ width: 100%; margin-top: 40px;}
.vrModule02 .vr02Item .swiper-slide ul li{ margin-left: 7%; text-align: center; position: relative;}
.vrModule02 .vr02Item .swiper-slide ul li:first-child{ margin-left: 0;}
.vrModule02 .vr02Item .swiper-slide ul li .iconfont{ width: 80px; height: 80px; line-height: 80px;  border-radius: 50%; margin: auto; background-color: rgba(255, 255, 255, 0.3); font-size: 40px; color: #fff;}
.vrModule02 .vr02Item .swiper-slide ul li .t{ font-size: 16px; color: #fff; margin-top: 15px;}
.vrModule02 .vr02Item .swiper-slide .lk{ margin: 40px 0;}


/* vrModule03 */
.vrModule03{ width: 100%; padding: 100px 0 ; position: relative; overflow: hidden; background-color: #f6f7f9; }
.vrModule03 ul{ width: 100%; margin-top: 50px;}
.vrModule03 ul li{ width: 24.1%; margin-right: 1.2%; padding: 60px 35px 100px; position: relative; border-radius: 3px; overflow: hidden; background: #fff; background-size: cover !important;}
.vrModule03 ul li:last-child{margin-right: 0;}
.vrModule03 ul li::before{ content: ''; position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px);}
.vrModule03 ul li::after{ content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; transition: all 0.8s ease;}
.vrModule03 ul li .info{ position: relative; z-index: 2;}
.vrModule03 ul li .num{ font-family:'Nice';  font-size: 60px; color: rgba(0, 0, 0, 0.05); transition: all 0.8s ease;}
.vrModule03 ul li .tit{ font-size: 24px; color: #333; margin-top: 30px; padding-top: 30px; position: relative; transition: all 0.8s ease;}
.vrModule03 ul li .tit::after{ content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 2px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;}
.vrModule03 ul li .txt{ font-size: 16px; color: #666; line-height: 32px; margin-top: 30px; transition: all 0.8s ease;}
.vrModule03 ul li:hover::after{ top: -110%;}
.vrModule03 ul li:hover .num{ color: rgba(255, 255, 255, 0.8);}
.vrModule03 ul li:hover .tit,.vrModule03 ul li:hover .txt{ color: #fff;}
.vrModule03 ul li:hover .tit::after{ background-image: linear-gradient(90deg, #fff 0%, #fff 100%);}


/* vrModule04 */
.vrModule04{ width: 100%; padding: 100px 0 ; position: relative; overflow: hidden; background: url(../images/product/vr/vr04Bg.jpg) center no-repeat fixed; background-size: cover !important;}
.vrModule04::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.70); z-index: 0;}
.vrModule04 .c1440{ position: relative; z-index: 2;}
.vrModule04 ul{ margin-top: 30px; width: 100%;}
.vrModule04 ul li{ width: 32%; margin: 2% 2% 0 0; background-color: #fff; padding: 20px; border-radius: 3px; overflow: hidden; transition: all 0.8s ease; position: relative;cursor: pointer;}
.vrModule04 ul li:nth-child(3n){ margin-right: 0;}
.vrModule04 ul li::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; opacity: 0;}
.vrModule04 ul li .img{ width: 110px;border-radius: 3px; overflow: hidden; position: relative; z-index: 2;}
.vrModule04 ul li .img img{ width: 100%; display: block;}
.vrModule04 ul li .info{ width: calc(100% - 110px); padding-left: 20px;  position: relative; z-index: 2;}
.vrModule04 ul li .info .tit{ font-size: 20px; color: #333; font-weight: bold; transition: all 0.8s ease;}
.vrModule04 ul li .info .txt{ font-size: 16px; color: #999; line-height: 28px; margin-top: 10px; transition: all 0.8s ease;}
.vrModule04 ul li:hover::after{ opacity: 1;}
.vrModule04 ul li:hover .tit,.vrModule04 ul li:hover .txt{ color: #fff;}

/* vrModule05 */
.vrModule05{ width: 100%; padding: 100px 0 ; position: relative; overflow: hidden; background: url(../images/product/vr/vr05Bg.jpg) center no-repeat ; background-size: cover !important;}
.vrModule05 ul{ width: 100%; margin-top: 50px; position: relative; height: 340px;}
.vrModule05 ul li{position: absolute; text-align: center;}
.vrModule05 ul li .img{ width: 100%; border-radius: 20px; overflow: hidden;}
.vrModule05 ul li .img img{ width: 100%; display: block;}
.vrModule05 ul li .tit{ font-size: 18px; color: #333; margin-top: 20px;}
.vrModule05 ul li.l1,.vrModule05 ul li.l2,.vrModule05 ul li.l3,.vrModule05 ul li.l7,.vrModule05 ul li.l8,.vrModule05 ul li.l9{ width: 6.25%;}
.vrModule05 ul li.l4,.vrModule05 ul li.l5,.vrModule05 ul li.l6{ width: 8.33%;}
.vrModule05 ul li.l1{ left: 6.25%; top: 115px;}
.vrModule05 ul li.l2{ left: 17.01%; top: 0;}
.vrModule05 ul li.l3{ left: 21.18%; bottom:  0;}
.vrModule05 ul li.l4{ left: 31.6%; top:  75px;}
.vrModule05 ul li.l5{ left: 45.83%; top:  40px;}
.vrModule05 ul li.l6{ right: 31.6%; top:  75px;}
.vrModule05 ul li.l7{ right: 21.18%; bottom:  0; }
.vrModule05 ul li.l8{ right: 17.01%; top: 0;}
.vrModule05 ul li.l9{ right: 6.25%; top: 115px;}


/* vrModule06 */
.vrModule06{ width: 100%; padding: 100px 0 0 0; position: relative; overflow: hidden; /* background: url(../images/home/solutionsBg.jpg) center no-repeat; background-size: cover !important; */}


/* webModule01 */
.webModule01{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background-color: #fff; }
.webModule01 ul{ margin-top: 50px;}
.webModule01 ul li{ width:23.5%; margin: 2% 2% 0 0; padding: 30px; border-radius: 3px; position: relative; overflow: hidden; transition: all 0.8s ease; position: relative; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.webModule01 ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.webModule01 ul li:nth-child(4n){ margin-right: 0;}
.webModule01 ul li .iconfont{ width: 64px; height: 64px; margin: auto; text-align: center; line-height: 64px; color: #fff; font-size: 42px; border-radius: 3px; overflow: hidden; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;}
.webModule01 ul li .tit{ padding: 20px 0; text-align: center; border-bottom: solid 1px #eee; font-size: 20px; font-weight: bold; color: #333; transition: all 0.8s ease;}
.webModule01 ul li .txt{ text-align: center; font-size: 16px; margin-top: 20px; line-height: 30px; transition: all 0.8s ease;}
.webModule01 ul li .more4{ color: #fff; margin-top: 30px;}
.webModule01 ul li .more4::before{ opacity: 0;}
.webModule01 ul li .more4::after{left: 0;}
.webModule01 ul li:hover .tit{ color: #ff4229;}
.webModule01 ul li:hover::after{ left: 0;}


/* webModule02 */
.webModule02{ width: 100%; padding: 100px 0 ; position: relative; overflow: hidden; background: url(../images/product/web/web02Bg.jpg) center no-repeat fixed; background-size: cover !important;}
.webModule02::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.70); z-index: 0;}
.webModule02 .c1440{ position: relative; z-index: 2;}
.webModule02 ul{ margin-top: 20px; width: 100%;}
.webModule02 ul li{ width: 25%; text-align: center; padding: 30px;}
.webModule02 ul li .iconfont{ width: 110px; height: 110px; margin: auto; border-radius: 50%; text-align: center; line-height: 110px; font-size: 60px; color: #fff; background-color: rgba(255, 255, 255, 0.3); transition: all 0.8s ease; position: relative;}
.webModule02 ul li .iconfont::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;  background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); opacity: 0; transition: all 0.8s ease;}
.webModule02 ul li .iconfont::before{ z-index: 2;position: relative;}
.webModule02 ul li .tit{ font-size: 20px; color: #fff; font-weight: bold; margin-top: 25px;}
.webModule02 ul li .txt{ font-size: 16px; color: #fff; margin-top: 15px; line-height: 28px;}
.webModule02 ul li:hover .iconfont::after{opacity: 1;}
.webModule02 ul li:hover .tit,.webModule02 ul li:hover .txt{ color: #ff4229;}



/* webModule03 */
.webModule03{ width: 100%;  padding: 100px 0; position: relative; overflow: hidden; background:#f9f9f9 url(../images/product/web/web03Bg.jpg) center no-repeat; background-size: cover !important;}
.webModule03 ul{ margin-top: 35px; width: 100%;}
.webModule03 ul li{ margin: 1% 2%  1% 0; width: 23.5%; background-color: #fff; padding:40px 30px 50px 30px ; position: relative; overflow: hidden; border-radius: 3px; cursor: pointer;}
.webModule03 ul li::after{ content: ''; position: absolute; bottom: 0; left: -110%; width: 100%; height: 3px; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease; }
.webModule03 ul li:nth-child(4n){ margin-right: 0;}
.webModule03 ul li .tit{ font-size: 26px; color: #333;}
.webModule03 ul li .txt{ font-size: 16px; color: #666; margin-top: 15px; line-height: 28px;}
.webModule03 ul li .num{ font-size: 26px; color: #a8afc7; position: absolute; right: 30px; bottom: 20px; font-family:'Nice';}
.webModule03 ul li:hover::after{ left: 0;}
.webModule03 ul li:hover .num{ color: #ff4229;}

/* webModule04 */
.webModule04{ width: 100%; padding: 100px 0 0 0; position: relative; overflow: hidden; /* background: url(../images/home/solutionsBg.jpg) center no-repeat; background-size: cover !important; */}



/* promotionBanner */
.promotionBanner{ width: 100%; height: 100vh; min-width: 1200px; position: relative; overflow: hidden;}
.promotionBanner .c1440{ position: relative; height: 100%;}
.promotionBanner .videoBox{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
.promotionBanner .videoBox video{width:auto;height: auto; min-width: 100%; min-height: 100%; object-fit: fill; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
.promotionBanner .videoBox::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 2;}
.promotionBanner .box{ width: 100%; position: absolute; top: 50%; left: 0; width: 100%; z-index: 2; transform: translateY(-60%);}
.promotionBanner .box .tit{ font-size: 60px; color: #fff;  line-height: 90px;}
.promotionBanner .box .txt{ font-size: 26px; margin-top: 30px; color: #fff; }
.promotionBanner .line{ width: 2px; height: 170px; position: absolute; left: 0; bottom: 4%; z-index: 2; background-color: rgba(255, 255, 255, 0.2);}
.promotionBanner .line::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0;  -webkit-animation: solid 8s infinite; animation: solid 8s infinite; background-color: #fff; }
@media (max-width: 1680px){
    .promotionBanner .box .line{height: 150px;}
}
@media (max-width: 1560px){
    .promotionBanner .box .line{height: 120px;}
}

@keyframes solid{0%{height: 0;} 100%{height: 100%;}}
@-webkit-keyframes solid{0%{height: 0;} 100%{height: 100%;}}
@-moz-keyframes solid{0%{height: 0;} 100%{height: 100%;}}

/* promotiontTitle */
.promotiontTitle{ text-align: center;position: relative; z-index: 2;}
.promotiontTitle .title{  font-size: 60px; color: #333;font-weight: normal; }
.promotiontTitle .text{ font-size: 20px; line-height: 44px;  margin-top: 10px; color: #333;}
.promotiontTitle .more{ position: absolute; right: 0; top: 10px; width: 200px;}
.promotiontTitle .more a{ width: 100%; line-height: 60px; text-align: center; position: relative; overflow: hidden; color: #ff4229;  border-radius: 3px; }
.promotiontTitle .more a::before{content: ''; width: 100%; height: 100%; left: 0; top: 0; border: solid 1px #ff4229; position: absolute; z-index: 0; opacity: 1; transition: all 0.8s ease;}
.promotiontTitle .more a::after{ content: ''; position: absolute; left: -110%; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 1; border-radius: 3px; overflow: hidden;}
.promotiontTitle .more a span{ display: inline-block; font-size: 20px; margin-right: 25px; position: relative; z-index: 2; transition: all 0.8s ease;}
.promotiontTitle .more a i{display: inline-block; font-size: 34px; position: relative; z-index: 2; transition: all 0.8s ease;}
.promotiontTitle.l{ text-align: left;}
.promotiontTitle.w .title,.promotiontTitle.w .text{ color: #fff;}
.promotiontTitle.w .more a{ color: #fff;}
.promotiontTitle.w .more a::before{ border-color: #fff;}
.promotiontTitle .more.r{ position: relative; top: 0; margin-top: 50px;}
.promotiontTitle .more a:hover::after,.promotiontTitle .more.c a::after{ left: 0;}
.promotiontTitle .more a:hover::before,.promotiontTitle .more.c a::before{ opacity: 0;}
.promotiontTitle .more a:hover,.promotiontTitle .more.c a{ color: #fff;}
@media (max-width: 1560px){
    .promotiontTitle .title{ font-size: 48px;}
    .promotiontTitle .text{  font-size: 18px;}
}

/* promotionAbout */
.promotionAbout{ width: 100%; padding: 120px 0; position: relative; overflow: hidden; background: url(../images/recommend/aboutBg.jpg) center no-repeat; background-size: cover !important;}
.promotionAbout::after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/suncher.png) center  bottom 60px no-repeat; background-size: 90% auto;}
.promotionAbout .c1440{ position: relative; z-index: 2;}
.promotionAbout .promotiontTitle .text{ margin-top: 30px;}
.promotionAbout ul{ width: 100%; margin-top: 70px;}
.promotionAbout ul li{ position: relative; padding: 0 6%; text-align: center;}
.promotionAbout ul li .num{ position: relative;}
.promotionAbout ul li .num span{  display: inline-block; width: 100%; font-family:'Nice'; font-size: 100px; color:#ff4229;}
.promotionAbout ul li .num i{ position: absolute; right: -20px; top: 0; font-size: 30px; color: #ff4229;}
.promotionAbout ul li .num.n1{ width: 80px;}
.promotionAbout ul li .num.n2{ width: 100px;}
.promotionAbout ul li .num.n3{ width: 152px;}
.promotionAbout ul li .tit{ font-size: 18px; color: #666; margin-top: 10px;}


/* promotionProduct */
.promotionProduct{ width: 100%; padding: 120px 0; position: relative; overflow: hidden;  background: url(../images/recommend/productBg.jpg) center no-repeat; background-size: cover !important;}
.promotionProduct .videoBox{ position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 1;}
.promotionProduct .videoBox::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 2;}
.promotionProduct .videoBox video{width:auto;height: auto; min-width: 100%; min-height: 100%; object-fit: fill; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
.promotionProduct .c1440{ position: relative; z-index: 2;}
.promotionProduct ul{ width: 100%; margin-top: 80px;}
.promotionProduct ul li{ width: 20%; text-align: center; position: relative; overflow: hidden;}
.promotionProduct ul li::before{content: ''; width: 100%; height: 100%; left: 0; top: 0; border: solid 1px rgba(255, 255, 255, 0.2);border-left: 0; position: absolute; z-index: 0; opacity: 1; transition: all 0.8s ease;}
.promotionProduct ul li:first-child::before{ border-left: solid 1px rgba(255, 255, 255, 0.2);}
.promotionProduct ul li::after{ content: ''; position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 1; overflow: hidden;}
.promotionProduct ul li a{display: inline-block; padding: 50px 0; width: 100%; height: 100%; position: relative; z-index: 3;}
.promotionProduct ul li .iconfont{ color: #fff; font-size: 70px;font-weight: 100;}
.promotionProduct ul li .tit{ color: #fff; font-size: 20px; margin-top:15px;}
.promotionProduct ul li:hover::after{ opacity: 1;}


/* promotionCustomize */
.promotionCustomize{ width: 100%; padding:120px 0 110px 0; position: relative; overflow: hidden; background-color: #f6f7f9;}
.promotionCustomize ul{ width: 100%; margin-top: 20px;}
.promotionCustomize ul li{ width: 25%; padding: 30px; text-align: center; cursor: pointer;}
.promotionCustomize ul li .icon{ width: 160px; height: 160px; border-radius: 50%; margin: auto;transition: all 0.8s ease; background-image: linear-gradient(225deg,#eee,#fff); border: 2px solid #fff; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05);-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.promotionCustomize ul li .icon::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%);  border-radius: 50%; z-index: 0; opacity: 0; transition: all 0.8s ease;}
.promotionCustomize ul li .iconfont{ position: relative; z-index: 2; text-align: center;  line-height: 160px; width: 100%; text-align: center;  font-size: 78px; color: #333; }
.promotionCustomize ul li .tit{ font-size: 28px; color: #333; margin-top: 25px; transition: all 0.8s ease;}
.promotionCustomize ul li .txt{ font-size: 16px; color: #666; margin-top: 15px; transition: all 0.8s ease;}
.promotionCustomize ul li:hover .tit,.promotionCustomize ul li:hover .txt{ color: #ff4229;}
.promotionCustomize ul li:hover .iconfont{ color: #fff; }
.promotionCustomize ul li:hover .icon{ border: 0;}
.promotionCustomize ul li:hover .icon::after{ opacity: 1;}
@media (max-width: 1560px){
    .promotionCustomize ul li .icon{ width: 140px; height: 140px;}
    .promotionCustomize ul li .iconfont{ line-height: 140px;font-size: 68px;}
}

/* promotionCase */
.promotionCase{ width: 100%; padding: 120px 0; position: relative; overflow: hidden;background:#fff url(../images/recommend/caseBg.png) top left no-repeat; background-size: 42% auto !important;}
.promotionCase ul{ width: 100%; margin-top: 30px;}
.promotionCase ul li{ width: 32%; margin: 2% 2% 0 0; cursor: pointer; border-radius: 3px; overflow: hidden; position: relative;}
.promotionCase ul li:nth-child(3n){ margin-right: 0;}
.promotionCase ul li .img{ width: 100%; position: relative; z-index: 1; overflow: hidden;}
.promotionCase ul li .img::after{ content: ''; position: absolute; bottom: 0; left: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40% , rgba(0, 0, 0, 0.8) 100%); width: 100%; height: 60%; z-index:2; transition: all 0.8s ease;}
.promotionCase ul li .img img{ width: 100%; display: block; position: relative; z-index: 1; transition: all 0.8s ease;}
.promotionCase ul li .info{ position: absolute; left: 0; bottom:0; z-index: 2; text-align: center; width: 100%; padding:85% 30px 30px; transition: all 0.8s ease;height: 100%;}
.promotionCase ul li .info .tit{ font-size: 28px; color: #fff;  transition: all 0.8s ease;}
.promotionCase ul li .info .txt{ font-size: 18px; color: #fff; line-height: 36px; margin-top: 50px; opacity: 0; transition: all 0.8s ease;}
.promotionCase ul li .info .lk{ margin-top: 40px;  transition: all 0.8s ease; opacity: 0;}
.promotionCase ul li .info .more1{ width: 130px;line-height: 42px;  margin-right: 0; transition: all 0.8s ease;}
.promotionCase ul li:hover img{ transform: scale(1.1);}
.promotionCase ul li:hover .img::after{ background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 40% , rgba(0,0,0, 0.7) 100%) ; height: 100%; }
.promotionCase ul li:hover .info{  padding-top: 20%;}
.promotionCase ul li:hover .info .txt,.promotionCase ul li:hover .info .lk{ opacity: 1;}



/* promotionPartner */
.promotionPartner{ width: 100%;  padding: 120px 0; position: relative; overflow: hidden; background:#f3f6fa url(../images/home/partnerBg.jpg) center no-repeat; background-size: cover !important;}
.promotionPartner ul{ width: 100%; margin-top: 50px; }
.promotionPartner ul li{ width: 15.5%; margin: 10px 1.4% 10px 0; position: relative; background-color: #fff;  transition: all 0.8s ease; overflow: hidden; border-radius: 3px; overflow: hidden;}
.promotionPartner ul li::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #f85a2b 0%, #ff4229 100%); transition: all 0.8s ease;z-index: 0; opacity: 0; border-radius: 3px; overflow: hidden;}
.promotionPartner ul li img{ width: 100%; display: block; position: relative; z-index: 2;  transition: all 0.8s ease;}
.promotionPartner ul li img.img2{ opacity: 0; position: absolute; left: 0; top: 0; z-index: 1;}
.promotionPartner ul li:nth-child(6),.promotionPartner ul li:nth-child(11),.promotionPartner ul li:nth-child(17){ margin-right: 0;}
.promotionPartner ul li:nth-child(7){ margin-left: 7.75%;}
.promotionPartner ul li:hover::after{ opacity: 1; }
.promotionPartner ul li:hover img.img1{ opacity: 0;}
.promotionPartner ul li:hover img.img2{ opacity: 1;}


/* promotionProcess */
.promotionProcess{ width: 100%;  padding: 120px 0; position: relative;  background: url(../images/recommend/processBg.jpg) center no-repeat fixed; background-size: cover ;}
.promotionProcess .c1440{ position: relative; }
.promotionProcess .promotiontTitle{ width: 55%; top: 160px; position: -webkit-sticky; position: sticky;}
.promotionProcess .list{ width: 40%;}
.promotionProcess .list li{ background-color: #fff; width: 100%; border-radius: 3px; overflow: hidden; position: relative; padding: 40px 40px 60px; margin-bottom: 30px;}
.promotionProcess .list li .tit{ font-size: 22px; color: #333; font-weight: bold;}
.promotionProcess .list li .txt{ font-size: 16px; color: #999; line-height: 28px; margin-top: 15px;}
.promotionProcess .list li .num{ font-size: 90px; color: #a8afc7; position: absolute; right:40px; bottom: -20px; font-family:'Nice';opacity: 0.2;}
.promotionProcess .list li .icon{ position: absolute; top: 40px; right: 40px; border-radius: 50%; width: 20px; height: 20px; background-color: #ff4229;}
.promotionProcess .list li .icon::after{ content: ''; position: absolute; left: -35px; top: -1px; width: 20px; height: 20px;  border-radius: 50%; border: solid 1px #333;}


/* promotionContact */
.promotionContact{ width: 100%; padding: 120px 0 30px; position: relative; overflow: hidden; }
.promotionContact::after{ content: ''; position: absolute; bottom: 0; left: 0; height: 180px; width: 100%; z-index: 0;  background-color: #222;}
.promotionContact .box{ position: relative; z-index: 2; padding: 50px;  background-image: linear-gradient(90deg, #ff6e37 0%, #ed403c 100%); border-radius: 3px; overflow: hidden;}
.promotionContact .box::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: url(../images/lineBg.png) center no-repeat; background-size: cover ; }
.promotionContact .box .form{ width: 100%; padding-top: 50px; margin-top: 40px; border-top: solid 1px rgba(255,255,255,0.3); position: relative; z-index: 2; }
.promotionContact .box .form form{ width: 100%; position: relative;}
.promotionContact .box .form form .row{ width: 23.5%; margin-left: 2%; position: relative;}
.promotionContact .box .form form .row:first-child{ margin-left: 0;}
.promotionContact .box .form form .row label{ position:relative; display:block; }
.promotionContact .box .form form .row label span{ position:absolute; left:15px; top:10px; line-height: 30px; font-size:16px; color:#999;}
.promotionContact .box .form form .row .txt{ border: 0; width: 100%;  padding:10px 15px ; line-height: 30px; background:#fff;}
.promotionContact .box .form form .row .ipt,.promotionContact .box .form form .row .int{border: 0; width: 100%;  padding:10px 100px 10px 15px ; line-height: 30px; background:#fff;}
.promotionContact .box .form form .row #code{ position: absolute; right: 0; top: 0; width: 90px; height: 100%; z-index: 2;}
.promotionContact .box .form form .row .btn{ text-align: center; width: 100%; line-height: 50px; border: 0; font-size: 16px; color: #fff;background-color: #333;cursor: pointer;}


/* box-shadow */
.header .kefu,.header .tel .iconfont,.header .tel p,.promotionCustomize ul li:hover .icon,.mallModule05 ul li .iconfont{box-shadow: 0 5px 10px rgba(255,66,41,0.3);-webkit-box-shadow: 0 5px 10px rgba(255,66,41,0.3);-moz-box-shadow: 0 5px 10px rgba(255,66,41,0.3);}
.header1 .kefu,.header1 .tel .iconfont,.header1 .tel p{box-shadow: 0 5px 10px rgba(255,255,255,0);-webkit-box-shadow: 0 5px 10px rgba(255,255,255,0);-moz-box-shadow: 0 5px 10px rgba(255,255,255,0);}
.header1.is-fixed .kefu,.header1.is-fixed .tel .iconfont,.header1.is-fixed .tel p,.mallModule01 ul li:hover .more4,.webModule01 ul li:hover .more4,.webModule02 ul li:hover .iconfont::after,.pageBanner .info .lk .more2:hover{box-shadow: 0 5px 10px rgba(255,66,41,0.3);-webkit-box-shadow: 0 5px 10px rgba(255,66,41,0.3);-moz-box-shadow: 0 5px 10px rgba(255,66,41, 0.3);}


/* wxkfbox */
.PopUp{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.40); display: none; z-index: 99998;}
.wxkfbox{position: fixed; width: 600px; height: 290px; top: 50%; left: 50%; padding: 40px; margin: -145px 0 0 -300px; display: none; z-index: 99999; background: url(../images/suncher_fd.jpg) center center no-repeat; background-size: cover ; color: #fff; overflow: hidden;  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1); -moz-box-shadow:0 0 10px rgba(0,0,0,0.1); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.wxkfbox .info{  width: 320px;  text-align: left;}
.wxkfbox .info .sgm{ font-size: 22px; line-height: 38px}
.wxkfbox .info .sgm p{ font-weight: bold; font-size: 24px;}
.wxkfbox .info .tel{ font-size: 42px; margin: 15px 0 5px;}
.wxkfbox .info .sgs{ font-size: 12px; margin-top: 10px;}
.wxkfbox .img{ width: 160px; margin-top: 20px;}
.wxkfbox .img img{ width: 100%; }
.wxkfbox .img a{ margin-top: 16px; width: 100%; height: 38px; line-height: 38px; background-color: #fff; display: block; text-align: center; font-size: 16px; color: #ff4229;}
.wxkfbox .kq{ font-size: 30px; color: #fff; position: absolute; top: 10px; right: 10px;}



/*pages*/
.pages{ padding:0 0 60px 0 ; width: 100%;  font-size:14px; text-align: center; }
.pages a { display:inline-block; height:32px; line-height:32px; background:#333; color: #fff; text-align:center;  padding:0 12px; margin:0 5px; }
.pages a:hover { background:#ff4229;  text-decoration:none }
.pages span { display:inline-block;  height:32px; line-height:32px; background:#ff4229; color:#fff; text-align:center; padding:0 12px; margin:0 5px;}