@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; min-width: 1200px; 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: #eb5405;} 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; } .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;} .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:#eb5405;} .scrollbar::-webkit-scrollbar-corner{display:none;} .scrollbar::-webkit-resizer{display:none;} @font-face {font-family:'SourceHanSansSC-Heavy'; src: url('../font/SourceHanSansSC-Heavy-2.otf');} .c1500 {width: 1500px;margin: auto;zoom: 1; min-width: 1200px;} .c1360 {width:1360px;margin: auto;zoom: 1; } .c1200 {width:1200px;margin: auto;zoom: 1; } @media (max-width: 1560px){ .c1500{ width: 1360px;} } @media (max-width: 1440px){ .c1500,.c1360{ width: 1200px;} } /* .header */ .header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 99; height: 80px; transition: all 0.6s ease; background-color: rgba(255, 255, 255, 0);} .header .logo{ display: inline-block; width: 255px; margin: 10px 0 0 0; background: url(../images/logo.png) center no-repeat; background-size: auto; background-size: 255px 75px !important;} .header .headerBox{width: calc(100% - 300px); } .header .headerBox .navBox{ width: calc(100% - 350px);} .header .navBox .nLi{ margin-right: 10%; } .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#on h3 a,.header .navBox .nLi.TabActive h3 a{ color: #eb5405;} .header .subItem{ display: none;height: auto; position: absolute; overflow: hidden; top: 80px; width: 1500px; left: 50%; transform: translateX(-50%); z-index: 98; background-color: rgba(255, 255, 255, 1); border-top: solid 1px #fafafa; box-shadow: 0 5px 10px rgba(0,0,0,0.05);-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.05);-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.05); transition: all 0.6s ease;} .header .subItem.on{ display: block;} .header .subItem .sub{ width: 100%; display: none; transition: all 0.6s ease; } .header .subItem .sub.ContActive{ display: block;} .header .subItem .subBox1{ width: 100%; padding: 20px 5%; position: relative;} .header .subItem .subBox1 .hd{width: 200px;} .header .subItem .subBox1 .hd li{ margin: 15px 0;} .header .subItem .subBox1 .hd li a{display: inline-block; line-height: 30px; font-size: 16px; color: #333; transition: all 0.6s ease;} .header .subItem .subBox1 .hd li span{ display: inline-block; margin-left: 5px; opacity: 0; transition: all 0.6s ease; transform: rotate(180deg);} .header .subItem .subBox1 .hd li.on a{ color: #eb5405;} .header .subItem .subBox1 .hd li.on span{ opacity: 1;} .header .subItem .subBox1 .bd{ width: calc(100% - 200px);padding: 0 20px; } .header .subItem .subBox1 .bd ul{} .header .subItem .subBox1 .bd ul li{ width: 33.33%; padding: 30px 40px; text-align: center;} .header .subItem .subBox1 .bd ul li .img{ width: 90%; margin: auto;} .header .subItem .subBox1 .bd ul li .img img{ max-width: 100% ; max-height: 200px; display: inline-block;} .header .subItem .subBox1 .bd ul li .tit{ font-size: 14px; color: #333; margin-top: 10px;} .header .subItem .subBox1 .bd ul li:hover .tit{ color: #eb5405;} .header .subItem .subBox2{ width: 100%; padding: 20px 5%; position: relative; } .header .subItem .subBox2 ul{ width: auto; text-align: center;} .header .subItem .subBox2 ul.hxys{ margin-left: -288px;} .header .subItem .subBox2 ul.ffzc{ margin-left: 324px;} .header .subItem .subBox2 ul.gywm{ margin-left: 605px;} .header .subItem .subBox2 ul li.nb{ padding: 0 30px; display: inline-block; vertical-align: top; position: relative;} .header .subItem .subBox2 ul li.nb .yjnav{position: relative;} .header .subItem .subBox2 ul li.nb .yjnav a{display: inline-block; line-height: 30px; font-size: 16px; color: #333; transition: all 0.6s ease;} .header .subItem .subBox2 ul li.nb .yjnav span{ display: inline-block; margin-left: 5px; opacity: 0; transition: all 0.6s ease; transform: rotate(180deg);} .header .subItem .subBox2 ul li.nb .yjnav a:hover,.header .subItem .subBox2 ul li.nb.on .yjnav a{color: #eb5405;} .header .subItem .subBox2 ul li.nb .ejnav{} .header .subItem .subBox2 ul li.nb .ejnav p{ display:block; margin: 3px 0;} .header .subItem .subBox2 ul li.nb .ejnav p a{font-size: 14px; line-height: 26px; color: #999; display: inline-block;} .header .subItem .subBox2 ul li.nb .ejnav p a:hover,.header .subItem .subBox2 ul li.nb .ejnav p.on a{ color: #eb5405;} .header .tel{line-height: 36px; color: #eb5405; margin: 22px 40px; font-size: 18px; } .header .tel .iconfont{ display: inline-block; font-size: 20px; vertical-align: middle; margin-right: 5px;} .header .zxkf{ line-height: 36px; display: inline-block; border-radius: 18px; margin: 22px 0; padding: 0 15px; background-color: #eb5405; color: #fff; font-size: 14px;} .header .zxkf .iconfont{ display: inline-block; font-size: 18px; vertical-align: middle; margin-right: 5px;} .header.header2 .navBox .nLi h3 a{ color: #fff;} .header.header2 .navBox .nLi.on h3 a,.header.header2 .navBox .nLi#on h3 a,.header.header2 .navBox .nLi.TabActive h3 a{ color: #eb5405;} .header.header2 .tel{ color: #fff;} .header.is-fixed,.header.hover-fixed{ border-bottom: solid 1px #fafafa; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05);} .header1.is-fixed,.header1.hover-fixed{border-bottom: solid 1px #eee; background-color: #fff; box-shadow: 0 0 0 rgba(0,0,0,0);-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);} .header2.is-fixed .navBox .nLi h3 a,.header2.hover-fixed .navBox .nLi h3 a{ color: #333;} .header2.is-fixed .navBox .nLi.on h3 a,.header2.hover-fixed .navBox .nLi.on h3 a,.header2.is-fixed .navBox .nLi#on h3 a,.header2.hover-fixed .navBox .nLi#on h3 a,.header2.is-fixed .navBox .nLi.TabActive h3 a,.header2.hover-fixed .navBox .nLi.TabActive h3 a{ color: #eb5405;} .header.header2.is-fixed .tel,.header.header2.hover-fixed .tel{ color: #eb5405;} .header.hide{ top: 0;} .pageHeader{ width: 100%; position: fixed; top: -120px; left: 0; z-index: 100; height: 80px; transition: all 0.6s ease; background-color: #fff; border-bottom: solid 1px #fafafa; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05);} .pageHeader .logo{ display: inline-block; width: 262px; height:30px; margin: 25px 0 25px; background: url(../images/logo.png) center no-repeat; background-size: 262px 30px;} .pageHeader .nbox{ width: calc(100% - 300px);} .pageHeader .nbox .ptit{ font-size: 18px;line-height: 36px; margin: 28px 0 16px 0; color: #333; padding: 0 15px;} .pageHeader .nbox ul{ width: calc(100% - 240px);} .pageHeader .nbox ul li{ margin-right: 6%; padding: 22px 0;} .pageHeader .nbox ul li a{display: inline-block; font-size: 16px;line-height: 36px; color: #333;} .pageHeader .nbox ul li.more a{ padding: 0 15px;font-size: 14px; background-color: #eb5405; color: #fff; border-radius: 18px;} .pageHeader .nbox ul li.more .iconfont{ display: inline-block; font-size: 18px; vertical-align: middle; margin-right: 5px;} .pageHeader .nbox ul li.on a,.pageHeader .nbox ul li:hover a{color: #eb5405;} .pageHeader .nbox ul li.more:hover a{ color: #fff;} .pageHeader .nbox ul li:last-child{ margin-right: 0;} .pageHeader.show{ top:0; } @media (max-width: 1560px){ .header .subItem{ width: 1360px;} .header .subItem .subBox2 ul.hxys{ margin-left: -316px;} .header .subItem .subBox2 ul.jjfa{ margin-left: -50px;} .header .subItem .subBox2 ul.ffzc{ margin-left: 240px;} .header .subItem .subBox2 ul.gywm{ margin-left: 493px;} } @media (max-width: 1440px){ .header .navBox .nLi{ margin-right: 8%;} .header .subItem{ width: 1200px;} .header .subItem .subBox2 ul.hxys{ margin-left: -258px;} .header .subItem .subBox2 ul.ffzc{ margin-left: 190px;} .header .subItem .subBox2 ul.gywm{ margin-left: 388px;} .header .subItem .subBox2 ul li.nb{ padding: 0 20px;} } @media (max-width: 1360px){ .header .subItem .subBox2 ul.hxys{ margin-left: -220px;} .header .subItem .subBox2 ul.jjfa{ margin-left: -10px;} .header .subItem .subBox2 ul.ffzc{ margin-left: 230px;} .header .subItem .subBox2 ul.gywm{ margin-left: 432px;} .header .tel{ margin: 22px 30px;} } /* indexBanner */ .indexBanner{ width: 100%; position: relative; height: 100vh; min-width: 1200px;} .indexBanner::after{ content: ''; width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 150px; background: linear-gradient(180deg,rgba(0,0,0,0.2) 0,rgba(0,0,0,0)); z-index: 2; } .indexBanner .swiper-slide{ position: relative; height: 100%; z-index: 1;} .indexBanner .swiper-slide a.a{ position: relative; display: block; width: 100%; height: 100%; background-size: cover !important;} .indexBanner .swiper-slide .box1{ position: absolute; top:50%; left: 0; transform: translateY(-50%); width: 100%; z-index: 2; text-align: center;} .indexBanner .swiper-slide .box1 .tit{ font-size: 90px; color: #333;} .indexBanner .swiper-slide .box1 .tit b{ color: #eb5405;} .indexBanner .swiper-slide .box1 .img1{ width: 77.5%; margin:7% auto -3%; position: relative; z-index: 1;} .indexBanner .swiper-slide .box1 .img2{ width: 80%; margin: auto; position: relative; z-index: 2;} .indexBanner .swiper-slide .box1 .img1 img,.indexBanner .swiper-slide .box1 .img2 img{ width: 100%; display: block;} .indexBanner .swiper-slide .box2{ position: absolute; height: 100%; top:0; left: 0; padding: 100px 0 0 3%; width: 100%; z-index: 2; text-align: center;} .indexBanner .swiper-slide .box2 .img1{ width: 44.47%; position: relative; z-index: 2;} .indexBanner .swiper-slide .box2 .img1 .img1_1{ position: relative; z-index: 4;} .indexBanner .swiper-slide .box2 .img1 .img1_2{ position: absolute; left: 0; top: 0; z-index: 3;} .indexBanner .swiper-slide .box2 .img1 .img1_3{ position: absolute; left: 0; top: 0; z-index: 2;} .indexBanner .swiper-slide .box2 .img1 .img1_4{ position: absolute; left: 0; top: 0; z-index: 1;} .indexBanner .swiper-slide .box2 .img2{ position: absolute; right: 5%; top: 5%; width: 48.85%;} .indexBanner .swiper-slide .box2 .img3{ position: absolute; right: 10%; top: 65%; width: 16.09%;} .indexBanner .swiper-slide .box2 .img1 img,.indexBanner .swiper-slide .box2 .img2 img,.indexBanner .swiper-slide .box2 .img3 img{ max-width: 100%; display: block;} .indexBanner .swiper-slide .videoBox{ width: 100%; height: 100%; position: relative; overflow: hidden; background-color: #000;} .indexBanner .swiper-slide .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; opacity: 0.6;} .indexBanner .swiper-slide .videoBox .info{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;text-align: center;} .indexBanner .swiper-slide .videoBox .info .tit{font-size: 90px; color: #eb5405; font-weight: bold;} .indexBanner .swiper-slide .videoBox .info .sum{ font-size: 22px; margin-top: 30px; color: #fff; line-height: 40px;} .indexBanner .swiper-pagination{ bottom: 40px !important;} .indexBanner .swiper-pagination .swiper-pagination-bullet{ width: 30px; height: 2px; background-color: #fff; border-radius: 0; opacity: 0.5;} .indexBanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;} @media (max-width: 1680px){ .indexBanner .swiper-slide .box1 .tit{ font-size: 80px;} } @media (max-width: 1440px){ .indexBanner .swiper-slide .box1 .tit{ font-size: 64px;} } /* indexProduct */ .indexProduct{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background: url(../images/productbg.jpg) bottom center no-repeat; background-size: 100% 45%;} .indexProduct .title{ text-align: center; font-size: 48px; color: #333;} .indexProduct .list{ width: 100%; position: relative;} .indexProduct .productThumb{ margin: 100px auto 0; width: 100% ;} .indexProduct .productThumb .swiper-slide{ position: relative; width: 700px;text-align: center;} .indexProduct .productThumb .swiper-slide .img{ width: 100%; margin: auto;} .indexProduct .productThumb .swiper-slide .img img{ width: auto; max-width: 90%; max-height: 420px; display: inline-block;} .indexProduct .productThumb .swiper-slide .info{ width: 100%; text-align: center; display: none;} .indexProduct .productThumb .swiper-slide .tit{ font-size: 34px; color: #333; margin-top: 20px; } .indexProduct .productThumb .swiper-slide .lk{ width: 330px; margin: auto; margin-top: 40px;} .indexProduct .productThumb .swiper-slide .lk a{ display: inline-block;line-height: 46px; border-radius: 23px; width: 150px; font-size: 16px; transition: all 0.6s ease;} .indexProduct .productThumb .swiper-slide .lk .more{ background-color: #fff; color: #333; margin-right: 30px; box-shadow: 0 0 10px rgba(0,0,0,0.03);-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.03);-moz-box-shadow: 0 0 10px rgba(0,0,0,0.03);} .indexProduct .productThumb .swiper-slide .lk .lx{ background-color: #eb5405; color: #fff; } .indexProduct .productThumb .swiper-slide .lk a:hover{ background-color: #eb5405; color: #fff;} .indexProduct .productThumb .swiper-slide-active{} .indexProduct .productThumb .swiper-slide-active .info{ display: block;} /*.indexProduct .productThumb .swiper-slide-active .img img{ width: 100%;} */ .indexProduct .swiper-button-prev,.indexProduct .swiper-button-next{ width: 46px; height: 46px; line-height: 46px; border-radius: 50%; text-align: center; color: #fff; background-color: rgba(235, 84, 5, 1); font-size: 26px; transition: all 0.8s ease; margin-top: -46px; top: 100%;} .indexProduct .swiper-button-prev::after,.indexProduct .swiper-button-next::after{ display: none;} .indexProduct .swiper-button-prev{ left: 50%; margin-left: -240px;} .indexProduct .swiper-button-next{ transform: rotate(180deg); right: 50%; margin-right: -240px;} .indexProduct .swiper-button-prev:hover,.indexProduct .swiper-button-next:hover{ background-color: #eb5405; } @media (max-width: 1400px){ .productThumb .swiper-slide{ width: 600px;} } /* indexAbout */ .indexAbout{ width: 100%; position: relative; overflow: hidden; padding: 100px 0; } .indexAbout .title{ text-align: center; font-size: 48px; color: #333;} .indexAbout .img{ width: 100%; position: relative; z-index: 1; background-color: #000; margin-top: 60px; border-radius: 20px; overflow: hidden;} .indexAbout .img img{ width: 100%; display: block; position: relative; z-index: 1; opacity: 0;} .indexAbout .img video{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2;opacity: 0.5;} .indexAbout .img a{ position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); border: solid 1px #fff; padding: 0 30px; color: #fff; font-size: 16px; line-height: 46px; border-radius: 23px; transition: all 0.6s ease;} .indexAbout .img a span{ display: inline-block; vertical-align: middle; margin-left: 10px; transition: all 0.6s ease;} .indexAbout .img a:hover{ background-color: #eb5405; border-color: #eb5405;} /* indexAdvantage */ .indexAdvantage { width: 100%; position: relative; overflow: hidden; padding-bottom: 100px;} .indexAdvantage .title{ text-align: center; font-size: 48px; color: #333;} .indexAdvantage .advantageBox{ width: 100%; overflow: hidden; margin:60px 0 3%; border-radius: 20px; overflow: hidden;} .indexAdvantage .advantageBox .swiper-slide { position: relative;} .indexAdvantage .advantageBox .swiper-slide .img{ width: 100%; position: relative; z-index: 1; overflow: hidden; background-color: #000;} .indexAdvantage .advantageBox .swiper-slide .img img{ width: 100%; display: block; opacity: 1; transition: all 0.6s ease;} .indexAdvantage .advantageBox .swiper-slide .info{ position: absolute; z-index: 2; left: 70px; top: 70px; text-align: left; color: #fff;} .indexAdvantage .advantageBox .swiper-slide .info .tit{ font-size: 40px; position: relative; transition: all 0.6s ease; padding-bottom: 0;} .indexAdvantage .advantageBox .swiper-slide .info .tit::after{ content: ''; position: absolute; bottom: 0; left:0; margin-left: 0; width: 50px; height: 4px; background-color: #eb5405; opacity: 0; transition: all 0.6s ease;} .indexAdvantage .advantageBox .swiper-slide .info a{ display: inline-block; font-size: 16px; color: #fff; margin-top: 20px; transition: all 0.6s ease;} .indexAdvantage .advantageBox .swiper-slide.yyjj .img img{ opacity: 0.9;} .indexAdvantage .advantageBox .swiper-slide.yyjj .info{ left: 50%; top: 45%; text-align: center; transform: translate(-50%,-50%);} .indexAdvantage .advantageBox .swiper-slide.yyjj .info .tit{ color: #333;} .indexAdvantage .advantageBox .swiper-slide.yyjj .info .tit::after{ left: 50%; margin-left: -25px;} .indexAdvantage .advantageBox .swiper-slide.yyjj .info a{ color: #333;} .indexAdvantage .advantageBox .swiper-slide .info a:hover{ color: #eb5405;} .indexAdvantage .advantageBox .swiper-slide:hover img{ transform: scale(1.1);} .indexAdvantage .advantageBox .swiper-slide:hover .info .tit{ padding-bottom: 20px;} .indexAdvantage .advantageBox .swiper-slide:hover .info .tit::after{ opacity: 1;} .indexAdvantage .swiper-pagination{ bottom: 20px !important;} .indexAdvantage .swiper-pagination .swiper-pagination-bullet{ width: 12px; height: 12px; background-color: #eb5405; border-radius: 50%; opacity: 0.5;margin: 0 5px !important;} .indexAdvantage .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1; background-color: #eb5405;} .indexAdvantage .swiper-button-prev,.indexAdvantage .swiper-button-next{ width: 46px; height: 46px; line-height: 46px; border-radius: 50%; text-align: center; color: #eb5405; background-color: rgba(255, 255, 255, 1); font-size: 26px; transition: all 0.8s ease;} .indexAdvantage .swiper-button-prev::after,.indexAdvantage .swiper-button-next::after{ display: none;} .indexAdvantage .swiper-button-prev{ left: -50px; } .indexAdvantage .swiper-button-next{ transform: rotate(180deg); right: -50px;} .indexAdvantage .swiper-button-prev:hover,.indexAdvantage .swiper-button-next:hover{ background-color: #eb5405; color: #fff;} .indexAdvantage .advantageBox:hover .swiper-button-prev{ left: 40px;} .indexAdvantage .advantageBox:hover .swiper-button-next{ right: 40px;} .indexAdvantage ul{ width: 100%; } .indexAdvantage ul li{ width: 48.5%; border-radius: 20px; overflow: hidden; position: relative;} .indexAdvantage ul li .img{ width: 100%; position: relative; z-index: 1; background-color: #000;} .indexAdvantage ul li .img img{ width: 100%; display: block; opacity: 0.4; transition: all 0.6s ease;} .indexAdvantage ul li .info{ position: absolute; z-index: 2; top: 50%; left: 50%; text-align: center; transform: translate(-50%,-50%); color: #fff;} .indexAdvantage ul li .info .tit{ font-size: 40px; position: relative; transition: all 0.6s ease;} .indexAdvantage ul li .info .tit::after{ content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -25px; width: 50px; height: 4px; background-color: #eb5405; opacity: 0; transition: all 0.6s ease;} .indexAdvantage ul li .info a{ display: inline-block; font-size: 16px; color: #fff; margin-top: 20px; transition: all 0.6s ease;} .indexAdvantage ul li .info a:hover{ color: #eb5405;} .indexAdvantage ul li:last-child{ margin-left: 3%;} .indexAdvantage ul li:hover .tit{ padding-bottom: 20px;} .indexAdvantage ul li:hover .tit::after{ opacity: 1; } .indexAdvantage ul li:hover img{ transform: scale(1.1);} /* footer */ .footer{ width: 100%; position: relative; background-color: #111;} .footer .box{ padding: 80px 0 60px 0; position: relative;} .footer .fooNav{ max-width: 80%;} .footer .fooNav .item{ margin-left: 60px;min-width: 120px;} .footer .fooNav .item .navt{ margin-bottom: 20px;} .footer .fooNav .item .navt a{ font-size: 16px; color: rgba(255, 255, 255, 0.4); transition: all 0.6s ease;} .footer .fooNav .item .navt .iconfont{ display: inline-block; transform: rotate(180deg); margin-left: 5px; transition: all 0.6s ease;} .footer .fooNav .item .navt.on a{ color: #eb5405;} .footer .fooNav .item .navt.on a .iconfont{ transform: rotate(270deg);} .footer .fooNav .item .navBox{ list-style: none;} .footer .fooNav .item .navBox .snavt{ margin-bottom: 10px;} .footer .fooNav .item .navBox .snavt a{ font-size: 14px; color: rgba(255, 255, 255, 0.4); transition: all 0.6s ease;} .footer .fooNav .item .navBox .snavt .iconfont{ display: inline-block; font-size: 12px; transform: rotate(180deg); margin-left: 5px; transition: all 0.6s ease;} .footer .fooNav .item .navBox .snavt.on a,.footer .fooNav .item .navBox .snavt:hover a{ color: #eb5405;} .footer .fooNav .item .navBox .snavt.on a .iconfont{ transform: rotate(270deg);} .footer .fooNav .item .navBox .snavBox{ display: none; list-style: none;} .footer .fooNav .item .navBox .snavBox p{ margin-bottom: 10px;} .footer .fooNav .item .navBox .snavBox p a{ font-size: 12px; color: rgba(255, 255, 255, 0.3); transition: all 0.6s ease;} .footer .fooNav .item .navBox .snavBox p:hover a{ color: #eb5405;} .footer .fooNav .item .navBox ul{} .footer .fooNav .item .navBox ul li{ margin-top: 10px;} .footer .fooNav .item .navBox ul li:first-child{ margin-top: 0;} .footer .fooNav .item .navBox ul li a{ font-size: 14px; color: rgba(255, 255, 255, 0.4); transition: all 0.6s ease;} .footer .fooNav .item .navBox ul li:hover a{ color: #eb5405;} .footer .fooNav .item:first-child{margin-left: 0;} .footer .info{ text-align: right;} .footer .info .t{ font-size: 12px; color: rgba(255, 255, 255, 0.4);} .footer .info .t .iconfont{ font-size: 14px; color: #eb5405; display: inline-block; margin-right: 5px;} .footer .info .tel{ font-size: 20px; color: #eb5405; margin: 10px 0;} .footer .info ul{margin-top: 40px; text-align: center;} .footer .info ul li{ position: relative; margin-left: 20px;cursor: pointer;} .footer .info ul li:first-child{ margin-left: 0;} .footer .info ul li .iconfont{ font-size: 30px; color: rgba(255, 255, 255, 0.4); transition: all 0.6s ease;} .footer .info ul li .img{ position: absolute; display: none; z-index: 2; bottom: 30px; padding-bottom: 10px; left: 50%; width: 110px; margin-left: -55px;} .footer .info ul li .img::after{ content: '';width: 0;height: 0;position: absolute;left: 50%;bottom: 0;margin-left: -10px;border-top: 10px solid #fff;border-right: 10px solid transparent;border-left: 10px solid transparent;box-sizing: border-box;} .footer .info ul li .img img{ width: 100%; display: block;} .footer .info ul li:hover .img{ display: block;} .footer .info ul li:hover .iconfont{ color: #eb5405;} .footer .links{ padding: 15px 0; font-size: 12px; color: rgba(255, 255, 255, 0.4); border-top: solid 1px rgba(255, 255, 255, 0.1); line-height: 24px;} .footer .links p{font-size: 14px; color: rgba(255, 255, 255, 0.4);} .footer .links span{display: inline-block; padding: 0 15px ; color: rgba(255, 255, 255, 0.4);} .footer .links span:last-child{display: none;} .footer .links a{ color: rgba(255, 255, 255, 0.4);} .footer .links a:hover{ color: #fff;} .footer .copy{ padding: 15px 0; font-size: 12px; color: rgba(255, 255, 255, 0.2); border-top: solid 1px rgba(255, 255, 255, 0.1);} .footer .copy a{ color: rgba(255, 255, 255, 0.2);} .footer .copy a:hover{ color: #fff;} .footer .copy img{ width: 14px; height: 14px; display: inline-block; vertical-align: middle;} .footer .copy .red{ color: #eb5405;} /* customer */ .customer{width: 70px;position:fixed;right:0; top:50%; transform: translateY(-50%); z-index:97;} .customer dl{width: 100%;height: 70px;position: relative; margin-top: 1px; z-index: 2; border-bottom: solid 1px rgba(0,0,0,0);} .customer dl dt{width: 70px;height: 70px; padding: 7px 0; color:#FFFFFF;background-color: #000;cursor: pointer;position: relative; z-index: 5;transition: all 0.6s ease; text-align: center; } .customer dl dt a{ display: inline-block; width: 100%; height: 100%; color: #fff;} .customer dl dt i{ display: inline-block; font-size:30px; line-height: 30px; margin-top: 2px;} .customer dl dt p{ font-size: 12px; margin-top: 3px;} .customer dl:hover dt{ background-color: #eb5405;} .customer dl.icon1 dd{width: 150px; text-align: center; background-color: #fff; border: solid 1px #eee; position: absolute; top: 0; right: -300px; z-index: 1; transition: all 0.6s ease; } .customer dl.icon1 dd img{ width: 100%; display: block; } .customer dl.icon1 dd p{ font-size: 14px; margin-bottom: 8px;} .customer dl.icon2 dd{width: 230px; height: 70px; padding: 10px 15px; border-right: solid 1px rgba(255,255,255,0.4); color: #fff;font-size: 14px; line-height: 24px; background-color: #eb5405; position: absolute; top: 0;right: -300px; z-index: 1; text-align: center; transition: all 0.5s ease;} .customer dl.icon2 dd p{ line-height: 50px; font-size: 24px; font-weight: bold; display: inline-block;} .customer dl:hover dd{right: 70px;} /* popupVideo */ .popup{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.8);z-index: 998;display: none;} .popupVideo{width: 70%; position: fixed;top:50%;left:15%;transform: translateY(-50%);z-index:999;display: none; padding: 0 40px; text-align: center;} .popupVideo video{display: inline-block; height: auto; min-height: 100%; width: 100%; background-color: #000;} .popupVideo .closevideo{width: 40px;height: 40px;border-radius: 0;border: 1px solid #fff;color: #fff;font-size: 18px;text-align: center;line-height: 38px;position: absolute;top: 0;right: 0; transition: all 0.6s ease;cursor: pointer;} .popupVideo .closevideo:hover{background-color: #eb5405;border-color: #eb5405;} /* pageBanner */ .pageBanner{ width: 100%; height: 62vh; position: relative; overflow: hidden; background-size: cover !important;} .pageBanner::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; z-index: 2; height: 100%; background-color: rgba(0, 0, 0, 0.5);} .pageBanner.topbg::before{ content: ''; width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(180deg,rgba(0,0,0,0.4) 0,rgba(0,0,0,0)); z-index: 2; } .pageBanner .info{ position: absolute; top: 50%; left: 50%; text-align: center; z-index: 3; transform: translate(-50%,-40%);} .pageBanner .info .tit{ font-size: 50px; color: #fff;} .pageBanner .info .tit span{ color: #eb5405;} .pageBanner .info .slogan{ font-size: 20px; min-width: 800px; line-height: 38px; margin-top: 20px; color: #fff;} .pageBanner .info .slogan span{ color: #eb5405;} .pageBanner .info a.videoPlay{ display: inline-block; margin-top: 20px; border: solid 1px #fff; padding: 0 30px; color: #fff; font-size: 16px; line-height: 46px; border-radius: 23px; transition: all 0.6s ease;} .pageBanner .info a.videoPlay span{ display: inline-block; vertical-align: middle; margin-left: 10px; transition: all 0.6s ease;} .pageBanner .info a.videoPlay:hover{ background-color: #eb5405; border-color: #eb5405;} .pageBanner .videoBox{ width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden;} .pageBanner .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;} .pageBanner.highban{height: 100vh;} .pageBanner.shighban{height: 70vh;} .pageBanner.noback::after{ display: none;} .pageBanner.solutionBanner .info{ top: 40%;} .pageBanner.advBanner .c1500{ height: 100%; position: relative;} .pageBanner.advBanner .advInfo{ position: absolute; top: 45%; left: 0; text-align: left; z-index: 3; transform: translateY(-50%);} .pageBanner.advBanner .advInfo .tit{ font-size: 50px; display: inline-block; line-height: 60px; color: #fff; position: relative;} .pageBanner.advBanner .advInfo .tit::after{ content: ''; width: 32px; height: 32px; position: absolute; right: -50px; top: 7px; } .pageBanner.advBanner .advInfo .slogan{ font-size: 20px; line-height: 36px; color: #fff; margin: 30px 0 40px;} .pageBanner.advBanner .advInfo .item{ width: 100%;} .pageBanner.advBanner .advInfo .item li{ margin-right: 30px; width: 90px; } .pageBanner.advBanner .advInfo .item li:first-child{ margin-left: -10px;} .pageBanner.advBanner .advInfo .item li .icon{ width: 60px; border: solid 2px #fff; border-radius: 10px; overflow: hidden; margin: auto;} .pageBanner.advBanner .advInfo .item li .icon img{ max-width: 100%; display: block;} .pageBanner.advBanner .advInfo .item li .t{ text-align: center; font-size: 14px; color: #fff; margin-top: 10px;} .pageBanner.advBanner .advInfo.zbnl{ top: 50%;} .pageBanner.advBanner .advInfo.zbnl .item li{ width: 75px;} .pageBanner.advBanner .advInfo.zbnl .item li:first-child{ margin-left: -5px;} .pageBanner.advBanner .st{ font-size: 20px; color: #fff; position: absolute; left: 0; bottom: 7%; } .pageBanner.advBanner .st.t10{ bottom: 10%;} .applicationBanner::after{background-color: rgba(255, 255, 255, 0.4); } .applicationBanner .applicationBox{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%); margin: 0 0 0 -464px; text-align: center; z-index: 3; } .applicationBanner .applicationBox .tit{ font-size: 50px; color: #eb5405; line-height: 60px; position: relative; display: inline-block;} .applicationBanner .applicationBox .tit::after{ content: ''; width: 32px; height: 32px; position: absolute; right: -50px; top: 7px; } .applicationBanner .applicationBox .tit span{ color: #333;} .applicationBanner .applicationBox .slogan{ font-size: 20px; min-width: 800px; line-height: 36px; margin-top: 20px; color: #333;} .applicationBanner .applicationBox .img{ width:927px; margin: 5% auto 0;} .applicationBanner .applicationBox .img img{ width: 100%; display: block;} @media (max-width: 1560px){ .pageBanner.advBanner .advInfo .tit{ font-size: 60px; line-height: 70px;} .pageBanner.advBanner .advInfo .slogan{ font-size: 20px; line-height: 36px;} } @media (max-width: 1440px){ .pageBanner.advBanner .advInfo .slogan{ font-size: 18px; line-height: 32px;} .pageBanner.advBanner .item li{ width: 80px;margin-right: 20px;} .pageBanner.advBanner .item li .icon{ width: 50px; } .pageBanner.advBanner .item li .t{ font-size: 12px;} .pageBanner.advBanner .advInfo.zbnl .item li{ width: 70px;} .pageBanner.advBanner .st{ font-size: 16px;} } /* pageContent */ .pageContent{ width: 100%; position: relative; overflow: hidden; padding: 100px 0;} .pageContent .text{ width: 100%; font-size: 16px; line-height: 38px; color: #333; overflow: hidden; position: relative;} .pageContent .text img,.pageContent .text video{ max-width: 100%; height: auto !important;} /* pageAbout */ .pageAbout{ width: 100%; position: relative; overflow: hidden; padding: 100px 0;} .pageAbout .text{ width: 61%; padding-right: 7%; font-size: 16px;} .pageAbout .text p{ margin: 15px 0; font-size: 16px; color: #333; line-height: 38px;} .pageAbout .text img{ max-width: 100%; height: auto !important; display: none;} .pageAbout .img { width: 39%; border-radius: 20px; overflow: hidden;} .pageAbout .img img{ width: 100%;} /* pageTitle */ .pageTitle{ width: 100%; text-align: center; } .pageTitle .tit{ font-size: 40px; position: relative; color: #333; padding-bottom: 25px; transition: all 0.6s ease;} .pageTitle .tit::after{ content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -25px; width: 50px; height: 4px; background-color: #eb5405; transition: all 0.6s ease;} .pageTitle .slogan{font-size: 16px; line-height: 38px; margin-top: 20px; color: #333;} .pageTitle .slogan span{ color: #eb5405;} /* pageSystem */ .pageSystem{ width: 100%; position: relative; overflow: hidden;} .pageSystem .box{ width: 100%; position: relative; margin-top: 60px;} .pageSystem .systemBox{ width: 100%;} .pageSystem .systemBox .swiper-slide{ text-align: center;} .pageSystem .systemBox .swiper-slide .img{ width: 100%; border: solid 4px #000;} .pageSystem .systemBox .swiper-slide .img img{ width: 100%; display: block;} .pageSystem .systemBox .swiper-slide .tit{ font-size: 16px; color: #333; margin-top: 10px;} .pageSystem .systemBox .swiper-slide:hover .tit{ color: #eb5405;} .pageSystem .swiper-button-next,.pageSystem .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #eee; text-align: center; line-height: 40px; transition: all 0.6s ease;} .pageSystem .swiper-button-next::after,.pageSystem .swiper-button-prev::after{ display: none;} .pageSystem .swiper-button-next{ right: -70px; transform: rotate(180deg);} .pageSystem .swiper-button-prev{ left: -70px;} .pageSystem .swiper-button-next:hover,.pageSystem .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} /* pagePatent */ .pagePatent{ width: 100%; position: relative; overflow: hidden; padding: 100px 0;} .pagePatent .box{ width: 100%; position: relative; margin-top: 60px;} .pagePatent .patentBox{ width: 100%;} .pagePatent .patentBox .swiper-slide{ text-align: center; position: relative;} .pagePatent .patentBox .swiper-slide .img{ width: 100%; position: relative; z-index: 1; background-color: #000; border: solid 4px #000;} .pagePatent .patentBox .swiper-slide .img img{ width: 100%; display: block; transition: all 0.6s ease;} .pagePatent .patentBox .swiper-slide .tit{ font-size: 16px; color: #fff; position: absolute; top: 50%; left: 0; text-align: center; width: 100%; padding: 0 20px; z-index: 0; transform: translateY(-50%); opacity: 0; transition: all 0.6s ease;} .pagePatent .patentBox .swiper-slide:hover .tit{ opacity: 1; z-index: 2;} .pagePatent .patentBox .swiper-slide:hover img{ opacity: 0.6;} .pagePatent .swiper-button-next,.pagePatent .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #eee; text-align: center; line-height: 40px; transition: all 0.6s ease;} .pagePatent .swiper-button-next::after,.pagePatent .swiper-button-prev::after{ display: none;} .pagePatent .swiper-button-next{ right: -70px; transform: rotate(180deg);} .pagePatent .swiper-button-prev{ left: -70px;} .pagePatent .swiper-button-next:hover,.pagePatent .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} /* pageInformation */ .pageInformation{ width: 100%; height: 800px; position: relative; overflow: hidden; } .pageInformation .informationBox{ width: 100%; height: 800px; position: relative; z-index: 1;} .pageInformation .informationBox .swiper-slide{ position: relative; height: 800px;background-size: cover !important;} .informationBox .swiper-slide::after{ content: ''; position: absolute; top: 0; width: 50%; height: 100%; background-color: rgba(0, 0, 0, 0.7);} .informationBox .swiper-slide.dg::after{ left: 0;} .informationBox .swiper-slide.zgs::after{ right: 0;} .informationBox .swiper-slide .c1360{ position: relative;z-index: 2;} .informationBox .swiper-slide .text{ width: 50%; padding-top: 250px; color: #fff;} .informationBox .swiper-slide .text .tit{ font-size: 36px;padding-bottom: 30px; margin-bottom: 30px; position: relative;} .informationBox .swiper-slide .text .tit::after{ content: ''; position: absolute;left: 0; bottom: -2px; height: 4px; width: 50px; background-color: #eb5405;} .informationBox .swiper-slide .text .d{ position: relative; margin-top: 15px; font-size: 16px; padding-left: 110px; line-height: 28px;} .informationBox .swiper-slide .text .d p{ position: absolute; left: 0; top: 0;} .informationBox .swiper-slide .text .d p span{ display: inline-block; font-size: 18px; vertical-align: middle; margin-right: 10px;} .informationBox .swiper-slide .text .more{ margin-top: 25px;} .informationBox .swiper-slide .text .more a{ display: inline-block; padding:0 20px; line-height: 40px; border-radius: 20px; background-color: rgba(255, 255, 255, 1); color: #eb5405; font-size: 16px; transition: all 0.6s ease;} .informationBox .swiper-slide .text .more a:hover{ background-color: #eb5405; color: #fff;} .informationBox .swiper-slide.zgs .text{ padding-left: 80px;} .pageInformation .informationNav{ width: 460px; position: absolute; z-index: 2; bottom: 50px; height: 50px; left: 50%; margin-left: -230px;} .informationNav .swiper-slide{ text-align: center; background-color: #fff; position: relative; overflow: hidden;} .informationNav .swiper-slide::after{ content: ''; position: absolute; left: 0; width: 1px; height: 100%; top: 0; z-index: 2; background-color: #eb5405;opacity: 0.4;} .informationNav .swiper-slide:nth-child(1){ border-top-left-radius: 25px; border-bottom-left-radius: 25px;} .informationNav .swiper-slide:nth-child(3){ border-top-right-radius: 25px; border-bottom-right-radius: 25px;} .informationNav .swiper-slide a{ display: inline-block; width: 100%; color: #eb5405;color: #eb5405; font-size: 16px;line-height: 50px} .informationNav .swiper-slide.swiper-slide-thumb-active{ background-color: #eb5405;} .informationNav .swiper-slide.swiper-slide-thumb-active a{ color: #fff;} .informationNav .swiper-slide.swiper-slide-thumb-active::after,.informationNav .swiper-slide:nth-child(1)::after{ display: none;} /* pageBrand */ .pageBrand{ width: 100%; position: relative; overflow: hidden; padding: 100px 0;} .pageBrand .originate{ text-align: center; font-size: 16px; margin: 60px 0 40px 0; color: #333;} .pageBrand .originate span{ font-size: 16px; color: #333; display: inline-block; vertical-align: bottom;} .pageBrand .originate .imgBox{ display: inline-block; vertical-align: bottom; position: relative; overflow: hidden; width: 450px; margin: 0 15px; } .pageBrand .originate .imgBox img{ width: 100%; display: block; position: relative; z-index: 2;} .pageBrand .text{ text-align: center; font-size: 16px; color: #333; line-height: 30px;} .pageBrand .text p{margin: 5px 0;} /* brandInfo */ .brandInfo{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background: url(../images/brandbg.jpg) center no-repeat fixed; background-size: cover;} .brandInfo::after{ content: ''; width: 100%; height: 100%; position: absolute; opacity: 0; left: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.4);} .brandInfo .c1360{ position: relative; z-index: 2;} .brandInfo .text{ width: 55%; padding: 40px; font-size: 16px; line-height: 36px; color: #fff; background-color: rgba(0, 0, 0, 0.5); border-radius: 20px;} .brandInfo .text p{ display: inline-block; width: 100%; margin: 10px 0; } .brandInfo .text img{ max-width: 100%; height: auto !important; display: none;} .brandInfo .info{ width: 42%; margin-top: 30px;} .brandInfo .info dl{ width: 33.33%; margin-bottom: 30px; text-align: center; color: #fff;} .brandInfo .info dl dt{ font-size: 14px;} .brandInfo .info dl dd{ font-size: 14px; margin-top: 5px;} .brandInfo .info dl dd b{ font-size: 60px;} /* pageHistory */ .pageHistory{ width: 100%; padding: 100px 0; background-color: #fff; position: relative; overflow: hidden;} .pageHistory ul{ position: relative; z-index: 3; margin-top: 40px; width: 100%;} .pageHistory ul::after{ content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background-color: #eee; } .pageHistory ul li{ padding: 10px 0;min-height: 170px; width: 100%; position: relative; z-index: 2;} .pageHistory ul li .box{ position: relative; width: 100%; min-height: 130px;} .pageHistory ul li .box::after{ content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: #fff; border: solid 3px #eb5405; top: 3px;} .pageHistory ul li .img{ width: 220px; border-radius: 10px; overflow: hidden; position: absolute; top: 0; overflow: hidden; border: solid 1px #eee;} .pageHistory ul li .img img{ width: 100%; display: inline-block;} .pageHistory ul li .info{ width: 100%; } .pageHistory ul li .info .n{ font-size: 20px; color: #333;} .pageHistory ul li .info .d{ font-size: 16px; color: #333; margin-top: 10px; line-height: 30px;} .pageHistory ul li .info .d img{ display: none;} .pageHistory ul li:nth-child(n+5) {display:none;} .pageHistory ul li:nth-child(odd) { padding-right: 50%;} .pageHistory ul li:nth-child(odd) .box{padding-left: 250px;} .pageHistory ul li:nth-child(odd) .box::after{ right: -7px;} .pageHistory ul li:nth-child(odd) .img{ left: 0; } .pageHistory ul li:nth-child(odd) .info{ padding-right: 50px; text-align: right;} .pageHistory ul li:nth-child(even) { padding-left: 50%;} .pageHistory ul li:nth-child(even) .box{padding-right: 250px;} .pageHistory ul li:nth-child(even) .box::after{ left: -7px;} .pageHistory ul li:nth-child(even) .img{ right: 0;} .pageHistory ul li:nth-child(even) .info{ padding-left: 50px; } .pageHistory .more{ text-align: center; margin: 50px auto 0;position: relative; z-index: 2; cursor: pointer; } .pageHistory .more p{ width: 180px; font-size: 16px; display: inline-block; background-color: #eb5405; color: #fff; line-height: 50px; border-radius: 25px; margin: auto;} .pageHistory .more p span{ display: inline-block;margin-left: 5px; transform: rotate(270deg); } .pageHistory .more #hioClose{ display: none;} /* pageContact */ .pageContact{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageContact ul{ width: 100%;} .pageContact ul li{ width: 31.33%; margin:0 3% 3% 0; position: relative; padding:50px 40px; border-radius: 20px; background-color: #f4f5fa;} .pageContact ul li .iconfont{ position: absolute; top: 50px; right: 40px; z-index: 1; font-size: 56px; color: #eb5405;} .pageContact ul li .tit{ font-size: 22px; position: relative; padding-bottom: 20px; color: #333; font-weight: bold;} .pageContact ul li .tit::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background-color: #eb5405;} .pageContact ul li .txt{ margin-top: 20px; font-size: 16px; line-height: 36px;} .pageContact ul li .txt img{ width: 70px; display: inline-block; border: solid 1px #eee; border-radius: 3px;overflow: hidden;} .pageContact ul li:nth-child(3n){ margin-right: 0;} .pageContact ul li:nth-child(n+4){ margin-bottom: 0;} /* pageMap */ .pageMap{ width: 100%; position: relative; overflow: hidden; z-index: 1;} .pageMap #allmap{ width: 100%; height: 520px;} .tdt-label.tdt-zoom-animated{ width: 140px; height: 60px; position: relative; padding:0; background: #eb5405 !important; border: 0 !important; box-sizing: border-box;} .tdt-label.tdt-zoom-animated::after{ content: ''; width: 0; height: 0; top: auto; position: absolute; left: 50%; right: 0; bottom: -15px; margin-left: -10px; border-top: 10px solid #eb5405; border-right: 10px solid transparent; border-left: 10px solid transparent; box-sizing: border-box;} .pageMap .mapBox{ width:100% ; position: relative; overflow: hidden; text-align: center;} .pageMap .mapBox .t{ font-size: 16px; padding: 10px ;line-height: 22px; color: #fff ; overflow: hidden;box-sizing: border-box;} /* pageNav */ .pageNav{ width: 100%;} .pageNav ul{ width: 100%;} .pageNav li{padding: 0 4%;position: relative;} .pageNav li::after{ content: ''; position: absolute; top: 50%; width: 2px; height: 24px; margin-top: -12px; background-color: #eee; right: -1px;} .pageNav li:last-child::after{ display: none;} .pageNav li a{ font-size: 24px; font-weight: bold; color: #333;} .pageNav li:hover a,.pageNav li.on a{ color: #eb5405;} /* pageNews */ .pageNews{ width: 100%; position: relative; padding: 100px 0; overflow: hidden;} .pageNews .list{ width: 100%; margin-top: 60px;} .pageNews .list li{ width: 31.33%; margin:0 3% 3% 0; border: solid 1px #eee; border-radius: 20px; overflow: hidden; transition: all 0.6s ease;} .pageNews .list li:nth-child(3n){ margin-right: 0;} .pageNews .list li a{ display: block; height: 100%;} .pageNews .list li .img{ width: 100%; overflow: hidden;} .pageNews .list li .img img{ width: 100%; display: block; transition: all 0.6s ease;} .pageNews .list li .info{ padding: 25px;/* border: solid 1px #eee; border-top: 0; */ border-radius:0 0 20px 20px;} .pageNews .list li .info .tit{ font-size: 18px; color: #333; line-height: 28px; max-height: 60px; transition: all 0.6s ease;} .pageNews .list li .info .time{ font-size: 14px; color: #999; margin-top: 10px;} .pageNews .list li:hover .info{ border-color: #eb5405;} .pageNews .list li:hover img{ transform: scale(1.05);} .pageNews .list li:hover .tit{ color: #eb5405;} .pageNews .list li:hover .time{ color: #333;} /* detailsBanner */ .detailsBanner{ width: 100%; height: 520px; position: relative; overflow: hidden; background-size: cover !important;} .detailsBanner::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 100%; background-color: rgba(0, 0, 0, 0.4);} .detailsBanner .text{ position: absolute; bottom:150px; left: 0; width: 100%; z-index: 2;} .detailsBanner .text .tit{ font-size: 36px; color: #fff;} .detailsBanner .text .time{ font-size: 16px; color: #fff;margin-top: 50px;} .detailsBanner .text .time span{ display: inline-block; margin-right: 50px;} .detailsBanner .info{ z-index: 2; position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 0; border-top: solid 1px rgba(255, 255, 255, 0.2);} .detailsBanner .crumbs{ max-width: 70%; line-height: 30px;} .detailsBanner .crumbs p{ font-size: 20px;display: inline-block;vertical-align: middle; color: rgba(255, 255, 255, 0.6); margin-right: 5px;} .detailsBanner .crumbs a{ font-size: 14px; color: rgba(255, 255, 255, 0.6);} .detailsBanner .crumbs span{ display: inline-block; font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0 5px;} .detailsBanner .crumbs a:hover{ color: #eb5405;} .detailsBanner .share { line-height: 30px;} .detailsBanner .share span{ color: #fff;} .detailsBanner .share a{ display: inline-block; width: 30px; height: 30px !important; line-height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2) !important; color: #ffff; text-align: center; margin-left: 10px; font-size: 20px; transition: all 0.6s ease;padding: 0 !important; background-image: none !important; } .detailsBanner .share a:hover{ background-color: #eb5405 !important; text-decoration: none;} .pageNewsD{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageNewsD .text{ font-size: 16px; color: #333; line-height: 38px;} .pageNewsD .text img,.pageNewsD .text video{ max-width: 100%; height: auto !important;} .Plink { margin-top: 40px; padding-top: 40px; border-top: dashed 1px #ddd; position: relative; } .Plink a{ max-width:40%; display: inline-block; font-size: 16px; line-height: 30px; color: #333; transition: all 0.6s ease;} .Plink a:hover{ color: #eb5405;} .Plink a.back{ width: 100px; text-align: center; line-height: 40px; font-size: 16px; background-color: #eee; position: absolute; top: 35px; left: 50%; margin-left: -50px;} .Plink a.back:hover{ background-color: #eb5405; color: #fff;} /* serviceConcept */ .serviceConcept { width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .serviceConcept .box{ width: 1100px ; position: relative; margin: 60px auto 0;} .serviceConcept .box .img{ position: relative; z-index: 1; width: 500px; padding: 0; overflow: hidden;} .serviceConcept .box .img img{ width: 100%; display: block; position: relative; z-index: 2;}/* .serviceConcept .box .img::after{ content: ''; width: 50%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; border: solid 2px rgba(235, 84, 5, 0.1); border-left: 0;border-radius: 0 250px 250px 0; } */ .serviceConcept .box .item{position: absolute; left: 50%; width: 650px; z-index: 3;} .serviceConcept .box .item.item1{ top: 10px; margin-left: -200px;} .serviceConcept .box .item.item2{ top: 50%; margin: -60px 0 0 -100px;} .serviceConcept .box .item.item3{ bottom: 10px; margin-left: -165px;} .serviceConcept .box .item .icon{display: inline-block; vertical-align: middle; width: 90px; height: 90px; padding: 9px; border-radius: 50%; background-color: #fff; border: dashed 1px rgba(235, 84, 5, 0.1);} .serviceConcept .box .item .icon .iconfont{display: inline-block; width: 70px; height: 70px; text-align: center; font-size: 40px; color: #fff; background-color: #eb5405; border-radius: 50%; line-height: 70px; position: relative;} .serviceConcept .box .item .info{ display: inline-block; vertical-align: middle; margin-left: 120px; padding: 30px 0; border-bottom: solid 1px #eeee; min-width: 420px;} .serviceConcept .box .item .info .tit{ font-size: 24px; font-weight: bold; color: #eb5405;} .serviceConcept .box .item .info .txt{ font-size: 16px; color: #333; margin-top: 10px;} /* servicePromise */ .servicePromise{ width: 100%; position: relative; padding-bottom: 0; overflow: hidden;} .servicePromise ul{ margin-top: 60px;} .servicePromise ul li{width: 22.75%; margin:0 3% 3% 0; position: relative; padding:40px 30px; border-radius: 20px; background-color: #f4f5fa;} .servicePromise ul li:nth-child(4n){ margin-right: 0;} .servicePromise ul li:nth-child(n+5){ margin-bottom: 0;} .servicePromise ul li .icon{position: absolute; top: 40px; right: 30px; z-index: 1; width: 40px; height: 40px; background-size: 40px 40px !important;} .servicePromise ul li .icon.icon1{ background: url(../images/promiseicon01.png) center no-repeat;} .servicePromise ul li .icon.icon2{ background: url(../images/promiseicon02.png) center no-repeat;} .servicePromise ul li .icon.icon3{ background: url(../images/promiseicon03.png) center no-repeat;} .servicePromise ul li .icon.icon4{ background: url(../images/promiseicon04.png) center no-repeat;} .servicePromise ul li .icon.icon5{ background: url(../images/promiseicon05.png) center no-repeat;} .servicePromise ul li .icon.icon6{ background: url(../images/promiseicon06.png) center no-repeat;} .servicePromise ul li .icon.icon7{ background: url(../images/promiseicon07.png) center no-repeat;} .servicePromise ul li .icon.icon8{ background: url(../images/promiseicon08.png) center no-repeat;} .servicePromise ul li .tit{ font-size: 20px; color: #333; font-weight: bold; position: relative; padding-top: 5px; /* padding-bottom: 20px; */} /* .servicePromise ul li .tit::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background-color: #eb5405;} */ .servicePromise ul li .txt{ font-size: 16px; color: #333; margin-top: 25px; line-height: 30px;} .servicePromise ul li .more{ margin-top: 15px;} .servicePromise ul li .more a{ display: inline-block;font-size: 16px; color: #eb5405;} .servicePromise ul li .more a:hover{ text-decoration: underline;} /* serviceCustomization */ .serviceCustomization{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .serviceCustomization .box{ width: 100%; position: relative; margin-top: 50px;} .serviceCustomization .customizationBox{ width: 100%;} .serviceCustomization .customizationBox .swiper-slide{ text-align: center; position: relative; border-radius: 20px; overflow: hidden;} .serviceCustomization .customizationBox .swiper-slide .img{ width: 100%; background-color: #000; transition: all 0.6s ease; position: relative; z-index: 1;} .serviceCustomization .customizationBox .swiper-slide .img img{ width: 100%; display: block; opacity: 0.3; position: relative; transition: all 0.6s ease;} .serviceCustomization .customizationBox .swiper-slide .img::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(235, 84, 5, 0.7); transform: scale(0);border-radius: 50%; transition: all 0.6s ease;} .serviceCustomization .customizationBox .swiper-slide .info{ position: absolute; top: 50%; transform: translateY(-50%); width: 60%; left: 20%; text-align: center; z-index: 2; transition: all 0.6s ease;} .serviceCustomization .customizationBox .swiper-slide .info .tit{ font-size: 24px; color: #fff;} .serviceCustomization .customizationBox .swiper-slide .info .txt{ font-size: 16px; color: #fff; line-height: 28px; margin-top: 15px;} .serviceCustomization .customizationBox .swiper-slide:hover .img::after{ } .serviceCustomization .customizationBox .swiper-slide:hover .img img{ transform: scale(1.1); opacity: 1;} .serviceCustomization .customizationBox .swiper-slide:hover .info{ opacity: 0;} .serviceCustomization .swiper-button-next,.serviceCustomization .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #eee; text-align: center; line-height: 40px; transition: all 0.6s ease;} .serviceCustomization .swiper-button-next::after,.serviceCustomization .swiper-button-prev::after{ display: none;} .serviceCustomization .swiper-button-next{ right: -70px; transform: rotate(180deg);} .serviceCustomization .swiper-button-prev{ left: -70px;} .serviceCustomization .swiper-button-next:hover,.serviceCustomization .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} /* pageFailure */ .pageFailure{ width:100% ; padding: 100px 0; position: relative; overflow: hidden;} .pageFailure ul{ width: 100%; margin-top: 60px;} .pageFailure ul li{ width: 100%; position: relative; border-radius: 20px; padding: 30px 280px 30px 30px; overflow: hidden; border: solid 1px #eee; margin-bottom: 30px;} .pageFailure ul li .tit{ font-size: 24px; color: #333;} .pageFailure ul li .txt{ font-size: 16px; color: #333; line-height: 36px; margin-top: 20px;} .pageFailure ul li .txt p:nth-child(1){ text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;} .pageFailure ul li .txt p:nth-child(n+2){ display: none;} .pageFailure ul li .more{ position: absolute; right: 30px; top: 40px; display: inline-block; width: 140px; height: 46px; transition: all 0.6s ease;} .pageFailure ul li .more p{ width: 100%;display: inline-block; width: 140px; text-align: center; line-height: 46px; border-radius: 23px; background-color: #eb5405; font-size: 14px; color: #fff; text-align: center; width: 100%;} .pageFailure ul li .more p#fClose1,.pageFailure ul li .more p#fClose2,.pageFailure ul li .more p#fClose3{ display: none; background-color: #333;} .pageFailure ul li .more p:hover{ background-color: #333;} /* commonFault */ .commonFault{ width: 100%; padding: 0 0 100px; position: relative; overflow: hidden;} .commonFault .box{ position: relative; width: 100%; margin-top: 60px; font-size: 16px; line-height: 32px; color: #333; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05);} .commonFault .box img{ max-width: 100%; display: none; height: auto !important;} .commonFault .box table{ border: none; display: inline-block; border-radius: 20px; overflow: hidden;} .commonFault .box table tr{ border: none; transition: all 0.6s ease;} .commonFault .box table tr:nth-child(odd){ background-color: #eee;} .commonFault .box table tr th{ border: solid 1px #ddd; padding: 20px; background-color: #e5e5e5;} .commonFault .box table tr td{ border: solid 1px #eee;width: 28%; padding:30px 20px; text-align: center; vertical-align: middle!important;} .commonFault .box table tr:nth-child(odd) td{ border-color: #ddd;} .commonFault .box table tr td:first-child{ width: 16%;} .commonFault .box table tr:nth-child(n+7){ display: none;} .commonFault .box table tr:last-child td{ padding-bottom: 40px;} .commonFault .box .more{text-align: center; position: absolute; width: 180px; left: 50%; bottom: -30px; margin-left: -90px; z-index: 2; cursor: pointer; } .commonFault .box .more p{ width: 100%; padding: 5px; font-size: 16px; display: inline-block; background-color: #eb5405; color: #fff; line-height: 40px; border-radius: 25px; margin: auto;} .commonFault .box .more p i{ display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; position: relative;} .commonFault .box .more p i::after{ content: ''; width: 20px; height: 2px; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -10px; background-color: #eb5405;} .commonFault .box .more p i::before{ content: ''; width: 2px; height: 20px; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -1px; background-color: #eb5405; transition: all 0.6s ease;} .commonFault .box .more p span{display: inline-block; vertical-align: middle; width: 130px; } .commonFault .box .more #faClose{ display: none;} .commonFault .box .more #faClose i::before{ transform: rotate(90deg);} /* pageCase */ .pageCase{ width: 100%; position: relative; padding: 100px 0; overflow: hidden;} .pageCase .list{ width: 100%; margin-top: 60px;} .pageCase .list li{ width: 31.33%; margin:0 3% 3% 0; border: solid 1px #eee; border-radius: 20px; overflow: hidden; transition: all 0.6s ease;} .pageCase .list li:nth-child(3n){ margin-right: 0;} .pageCase .list li a{ display: block; height: 100%;} .pageCase .list li .img{ width: 100%; overflow: hidden;} .pageCase .list li .img img{ width: 100%; display: block; transition: all 0.6s ease;} .pageCase .list li .info{ padding: 25px; /* border: solid 1px #eee; border-top: 0; */ border-radius:0 0 20px 20px;} .pageCase .list li .info .tit{ font-size: 18px; color: #333; line-height: 30px; max-height: 60px; transition: all 0.6s ease;} .pageCase .list li .info .time{ font-size: 14px; color: #999; margin-top: 10px;} .pageCase .list li:hover .info{ border-color: #eb5405;} .pageCase .list li:hover img{ transform: scale(1.05);} .pageCase .list li:hover .tit{ color: #eb5405;} .pageCase .list li:hover .time{ color: #333;} /* pageParts */ .pageParts{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageParts ul{ margin-top: 40px;} .pageParts ul li{ width: 31.33%; margin:0 3% 3% 0; position: relative; padding:50px 40px; border-radius: 20px; background-color: #f4f5fa;} .pageParts ul li:nth-child(3),.pageParts ul li:nth-child(5){ margin-right: 0;} .pageParts ul li:nth-child(4),.pageParts ul li:nth-child(5){ width: 32%;} .pageParts ul li:nth-child(4){ margin-left: 16.5%;} .pageParts ul li .iconfont{ position: absolute; top: 40px; right: 40px; z-index: 1; font-size: 56px; color: #eb5405;} .pageParts ul li .tit{ font-size: 22px; position: relative; margin-top: 5px; /* padding-bottom: 20px; */ color: #333; font-weight: bold;} /* .pageParts ul li .tit::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background-color: #eb5405;} */ .pageParts ul li .txt{ margin-top: 20px; font-size: 16px; color: #333; line-height: 36px;} /* pageInventory */ .pageInventory{ width: 100%; padding: 0 0 100px 0; position: relative; overflow: hidden;} .pageInventory .img{ width: 100%; text-align: center; margin: 60px 0;} .pageInventory .img img{ max-width: 100%; display: inline-block;} .pageInventory .info{ width: 100%; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05);overflow: hidden;border-radius: 20px;} .pageInventory .info table{ border: none;width: 100%; display: inline-block; border-radius: 20px; overflow: hidden;} .pageInventory .info table tbody{ width: 100% !important;} .pageInventory .info table tr{ border: none;width: 100%; transition: all 0.6s ease;} .pageInventory .info table tr th{ border: solid 1px #ddd;font-size: 16px; padding: 20px;width: 170px; background-color: #e5e5e5;} .pageInventory .info table tr td{ border: solid 1px #eee; font-size: 16px; padding:30px 20px; width: 170px; background-color: #fff; text-align: center; vertical-align: middle!important;} .pageInventory .info table tr:nth-child(odd) td{ border-color: #ddd;} .pageInventory .more{ margin: 40px auto 0;width: 100%; text-align: center;} .pageInventory .more a{ width: 180px;display: inline-block; margin: auto; line-height: 50px; border-radius: 25px; text-align: center; font-size: 16px; color: #fff; background-color: #eb5405; transition: all 0.6s ease;} .pageInventory .more a span{ display: inline-block; vertical-align: middle; font-size: 24px; margin-right: 10px;} .pageInventory .more a:hover{ background-color: #333;} @media (max-width: 1360px){ .pageInventory .info table tr th,.pageInventory .info table tr td{ width: 150px;} } /* pageComplaints */ .pageComplaints { width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageComplaints .box{ width: 100%; margin-top: 60px;} .pageComplaints .box .row{ width: 100%; margin-bottom: 30px; text-align: center;} .pageComplaints .box .row label{ position: relative; padding: 15px 0; overflow: hidden; background-color: #f4f5fa; border-radius: 20px; } .pageComplaints .box .row.row1 label{ width: 48%;} .pageComplaints .box .row.row1 label:first-child{ margin-right: 4%;} .pageComplaints .box .row.row2 label{ width: 100%; } .pageComplaints .box .row.row3{ width: 48%;overflow: hidden; margin-bottom: 0; margin-right: 4%;position: relative;} .pageComplaints .box .row.row3 label{ width: 100%; } .pageComplaints .box .row label .txt{ display: inline-block; width: 100%; padding: 0 30px 0 115px; border: 0; line-height: 30px; background-color: rgba(255, 255, 255, 0); overflow: hidden; font-size: 16px; color: #333;} .pageComplaints .box .row label .txt.input7{ padding-left:130px ;} /* .pageComplaints .box .row label .txt.input1{ padding-right:110px ;} */ .pageComplaints .box .row span{ position: absolute; top: 15px; left: 30px;line-height: 30px; font-size: 16px; color: #333; z-index: 2;} .pageComplaints .box .row .nm{ position: absolute; top: 15px; right: 30px; line-height: 30px; font-size: 14px; color: #333;} .pageComplaints .box .row .nm i{ display: inline-block; vertical-align: middle; font-size: 18px; color: #eb5405; margin:-2px 3px 0 0;} .pageComplaints .box .row textarea{ height: 110px; resize: none;} .pageComplaints .box .row.row3 input.ipt{ display: inline-block; width: 100%; padding: 0 200px 0 115px; border: 0; line-height: 30px; background-color: rgba(255, 255, 255, 0); overflow: hidden; font-size: 16px; color: #333;} .pageComplaints .box .row.row3 input.int:focus{ display: inline-block; width: 100%; padding: 0 200px 0 115px; border: 0; line-height: 30px; background-color: rgba(255, 255, 255, 0); overflow: hidden; font-size: 16px; color: #333;} .pageComplaints .box .row.row3 #code{ position: absolute; width: 140px; height: 100%; position: absolute; top: 0; right: 0; border-radius: 0 20px 20px 0;} .pageComplaints .box .btn{display: inline-block; width: 48%; border-radius: 25px; margin: auto; line-height: 60px; border: 0; background-color: #eb5405; color: #fff; font-size: 16px; cursor: pointer; transition: all 0.6s ease;} /* pageScrew */ .pageScrew{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageScrew .text{ text-align: center; padding-bottom: 60px;} .pageScrew .text .tit{ font-size: 48px; color: #eb5405;} .pageScrew .text .txt{ font-size: 16px; line-height: 38px; color: #333; margin-top: 15px;} .pageScrew .list{ width: 1060px; margin: 20px auto 0;} .pageScrew .list li{ width: 100%; margin-top: 50px;} .pageScrew .list li .img{ width: 520px;} .pageScrew .list li .img img{ display: inline-block; vertical-align: middle;} .pageScrew .list li .img img.img1{ width: 75px; height: 75px; margin-right: 60px;} .pageScrew .list li .img img.img2{ width: 380px;} .pageScrew .list li .info{ line-height: 30px;padding: 5px 0; width: 360px;} .pageScrew .list li .info .t{ font-size: 18px; color: #eb5405;} .pageScrew .list li .info .n{ font-size: 16px; color: #333;} .pageScrew .list li .info .n span{ display: inline-block; margin-left: 20px;} .pageScrew .list li .info .n span:first-child{ margin-left: 0;} /* pageRotor */ .pageRotor{ width: 100%; padding: 100px 0; position: relative; background: url(../images/rotorbg.jpg) center no-repeat fixed; background-size: cover; overflow: hidden;} .pageRotor .box{ width: 50%; float: right;} .pageRotor .pageTitle{ text-align: left; color: #fff;} .pageRotor .pageTitle .tit,.pageRotor .pageTitle .slogan{ color: #fff;} .pageRotor .pageTitle .tit::after{ left: 0; margin-left: 0;} .pageRotor .t{ font-size: 18px; color: #fff; font-weight: bold; margin: 50px 0 30px;} .pageRotor ul{ width: 100%;} .pageRotor ul li{ margin-left: 7%; width: 14.4%; text-align: center; border-radius: 10px; background-color: rgba(255, 255, 255, 0.2); font-size: 24px; color: #fff; font-weight: bold; padding: 25px 0; cursor: pointer; transition: all 0.6s ease;} .pageRotor ul li:first-child{ margin-left: 0;} .pageRotor ul li:hover{ background-color: #eb5405;} /* pageSurface */ .pageSurface{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageSurface .box{ width: 100%; position: relative; margin-top: 50px;} .pageSurface .surfaceBox{ width: 100%;} .pageSurface .surfaceBox .swiper-slide{ text-align: center; position: relative; border-radius: 20px; overflow: hidden;} .pageSurface .surfaceBox .swiper-slide .img{ width: 100%; background-color: #000; transition: all 0.6s ease; position: relative; z-index: 1;} .pageSurface .surfaceBox .swiper-slide .img img{ width: 100%; display: block; opacity: 0.5; position: relative; transition: all 0.6s ease;} .pageSurface .surfaceBox .swiper-slide .img::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(235, 84, 5, 0.7); transform: scale(0);border-radius: 50%; transition: all 0.6s ease;} .pageSurface .surfaceBox .swiper-slide .tit{ position: absolute; top: 50%; transform: translateY(-50%); width: 60%; left: 20%; text-align: center; z-index: 2; font-size: 24px; color: #fff;} .pageSurface .surfaceBox .swiper-slide:hover .img::after{transform: scale(1); opacity: 0; border-radius: 20px;} .pageSurface .surfaceBox .swiper-slide:hover .img img{ transform: scale(1.1); opacity: 1;} .pageSurface .surfaceBox .swiper-slide:hover .tit{ opacity: 0;} .pageSurface .swiper-button-next,.pageSurface .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #eee; text-align: center; line-height: 40px; transition: all 0.6s ease;} .pageSurface .swiper-button-next::after,.pageSurface .swiper-button-prev::after{ display: none;} .pageSurface .swiper-button-next{ right: -70px; transform: rotate(180deg);} .pageSurface .swiper-button-prev{ left: -70px;} .pageSurface .swiper-button-next:hover,.pageSurface .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} /* pageMore */ .pageMore{padding: 60px 0; width: 100%; position: relative; background-size: cover !important; overflow: hidden;} .pageMore::after{ content: ''; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-color: rgba(235, 84, 5, 0.9);} .pageMore .c1360{ position: relative; z-index: 2;} .pageMore a{ display: inline-block; font-size: 26px; line-height: 30px; color: #fff;} .pageMore a span{ display: inline-block; vertical-align: middle; margin:-2px 0 0 20px; text-align: center; line-height: 26px; width: 30px; height: 30px; border-radius: 50%; border: solid 2px #fff; transform: rotate(180deg); transition: all 0.6s ease;} .pageMore a.l span{ transform: rotate(0); margin: -2px 20px 0 0;} .pageMore a:hover span{ color: #eb5405; background-color: #fff;} /* pageRubber */ .pageRubber{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageRubber .text{ text-align: center; padding-bottom: 60px;} .pageRubber .text .tit{ font-size: 48px; color: #eb5405;} .pageRubber .text .txt{ font-size: 16px; line-height: 38px; color: #333; margin-top: 15px;} .pageRubber ul{ width: 100%; margin-top: 20px;} .pageRubber ul li{ width: 30.33%; margin: 3% 3% 0 0; position: relative; overflow: hidden; border-radius: 20px; overflow: hidden;cursor: pointer;} .pageRubber ul li:nth-child(3n){ margin-right: 0;} .pageRubber ul li .img{ width: 100%; position: relative; z-index: 1;} .pageRubber ul li .img::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; z-index:2; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); transition: all 0.6s ease;} .pageRubber ul li .img img{ width: 100%; display: block; position: relative; z-index: 1; transition: all 0.6s ease;} .pageRubber ul li .tit{ position: absolute; bottom: 30px; left: 0; padding: 0 30px; z-index: 3; font-size: 24px; color: #fff; transition: all 0.6s ease;} .pageRubber ul li:hover .tit{ /* left: 50%; transform: translateX(-50%); */ opacity: 0;} .pageRubber ul li:hover .img::after{ display: none; background-image: linear-gradient(rgba(235, 84, 5, 0.6), rgba(235, 84, 5, 0.6));} .pageRubber ul li:hover .img img{ transform: scale(1.1);} /* rubberFormula */ .rubberFormula{ width: 100%; position: relative; padding-bottom: 100px; overflow: hidden;} .rubberFormula .box{ margin: 60px auto 0; } .rubberFormula .box table{ border: none; overflow: hidden; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05);} .rubberFormula .box table tr{ border: none; overflow: hidden;} .rubberFormula .box table tr:nth-child(odd){ background-color: #eee;} .rubberFormula .box table tr:first-child{ background-color: #e6e8eb;} .rubberFormula .box table tr th{ border: solid 1px #ddd; font-size: 18px;padding: 20px; text-transform: uppercase; color: #333;} .rubberFormula .box table tr td{ border: solid 1px #eee; text-align: center; padding: 20px; font-size: 16px; color: #333;} .rubberFormula .box table tr:nth-child(odd) td{ border-color: #ddd;} .rubberFormula .box p{ margin-top: 25px;font-size: 14px; color: #333;line-height: 20px;} .rubberFormula .box p span{ display: inline-block;vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background-color: #eb5405; color: #fff; line-height: 20px; text-align: center; margin-right: 5px;} /* statorQuality */ .statorQuality{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background: url(../images/qualitybg.jpg) center no-repeat fixed; background-size: cover;} .statorQuality::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 0;} .statorQuality .c1360{ position: relative; z-index: 2;} .statorQuality .pageTitle .tit,.pageRotor .pageTitle .slogan{ color: #fff;} .statorQuality ul{ width: 100%; margin-top: 60px;} .statorQuality ul li{ border-radius: 20px; width: 30.33%; margin-right: 3%; overflow: hidden; height: 300px; position: relative; background-color: #fff;cursor: pointer;} .statorQuality ul li:nth-child(3n){ margin-right: 0;} .statorQuality ul li .text{ width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 0 35px; text-align: center;} .statorQuality ul li .text .iconfont{ font-size: 60px; color: #333; margin-bottom: 20px; transition: all 0.6s ease;} .statorQuality ul li .text .tit{ font-size: 24px; color: #333;} .statorQuality ul li .text .txt{ font-size: 16px; line-height: 32px; margin-top: 20px; display: none; color: #333; transition: all 0.6s ease;} .statorQuality ul li:hover .iconfont{ display: none;} .statorQuality ul li:hover .txt{ display: block;} /* pageAcquire */ .pageAcquire{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageAcquire .text{ text-align: center; } .pageAcquire .text .tit{ font-size: 48px; color: #eb5405;} .pageAcquire .text .txt{ font-size: 16px; line-height: 38px; color: #333; margin-top: 15px;} .pageAcquire .text .more{ width: 180px; margin-top: 60px; display: inline-block; line-height: 50px; border-radius: 25px; overflow: hidden; transition: all 0.6s ease; font-size: 16px; color: #fff;background-color: #eb5405;} .pageAcquire .text .more:hover{ background-color: #333;} /* pageMore1 */ .pageMore1{ width: 100%; padding: 0; position: relative; overflow: hidden;} .pageMore1 .box{ width: 100%;} .pageMore1 .item{padding: 60px 0; width: 50%; position: relative; background-size: cover !important; overflow: hidden;} .pageMore1 .item::after{ content: ''; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);} .pageMore1 .item a{ display: inline-block; position: relative; z-index: 2; font-size: 26px; line-height: 30px; color: #fff;} .pageMore1 .item a span{ display: inline-block; vertical-align: middle; margin:-2px 0 0 20px; text-align: center; line-height: 26px; width: 30px; height: 30px; border-radius: 50%; border: solid 2px #fff; transform: rotate(180deg); transition: all 0.6s ease;} .pageMore1 .item a:hover span{ color: #eb5405; background-color: #fff;} .pageMore1 .item:first-child:after{ background-color: rgba(235, 84, 5, 0.8);} .pageMore1 .item:first-child a span{margin: -2px 20px 0 0; transform: rotate(0);} /* pageEquipment */ .pageEquipment{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageEquipment .text{ text-align: center; padding-bottom: 60px;} .pageEquipment .text .tit{ font-size: 48px; color: #eb5405;} .pageEquipment .text .txt{ font-size: 16px; line-height: 38px; color: #333; margin-top: 15px;} .pageEquipment .box{ width: 100%; position: relative;} .pageEquipment .cont{ float: right; width: 41%;} .pageEquipment .equipmentImg{ position: relative; margin-top: 40px; width: 53%; overflow: hidden;} .equipmentImg .swiper-slide img{ width: 100%; display: block;} .equipmentImg .swiper-pagination{ z-index: 3; bottom: 17px !important;} .equipmentImg .swiper-pagination-bullet{ background-color: #eb5405; width: 10px; height: 10px; margin: 0 10px !important; cursor: pointer; } .pageEquipment .equipmentInfo{ position: relative; width: 47%;padding-left:80px; height: 300px; overflow: hidden;} .pageEquipment .swiper-button-next,.pageEquipment .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #eee; text-align: center; line-height: 40px; transition: all 0.6s ease; top: calc(100% - 20px);} .pageEquipment .swiper-button-next::after,.pageEquipment .swiper-button-prev::after{ display: none;} .pageEquipment .swiper-button-next{ right: 50% ; margin-right: -120px; transform: rotate(180deg);} .pageEquipment .swiper-button-prev{ left:50%; margin-left: -120px;} .pageEquipment .swiper-button-next:hover,.pageEquipment .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} .equipmentInfo .swiper-slide{ } .equipmentInfo .swiper-slide .tit{ font-size: 18px; color: #333; font-weight: bold;} .equipmentInfo .swiper-slide .txt{ font-size: 16px; margin-top: 10px; color: #333;} .equipmentInfo .swiper-slide.swiper-slide-thumb-active .tit{ color: #eb5405;} /* heatTEquipment */ .heatTEquipment{ width: 100%; padding: 100px 0; background-color: #f4f5fa; position: relative; overflow: hidden;} .heatTEquipment .box{ width: 100%; position: relative; margin-top: 50px;} .heatTEquipment .TEquipmentBox{ width: 100%;} .heatTEquipment .TEquipmentBox .swiper-slide{ text-align: center; position: relative; border-radius: 20px; overflow: hidden;} .heatTEquipment .TEquipmentBox .swiper-slide .img{ width: 100%; background-color: #000; transition: all 0.6s ease; position: relative; z-index: 1;} .heatTEquipment .TEquipmentBox .swiper-slide .img img{ width: 100%; display: block; opacity: 0.5; position: relative; transition: all 0.6s ease;} .heatTEquipment .TEquipmentBox .swiper-slide .img::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(235, 84, 5, 0.7); transform: scale(0);border-radius: 50%; transition: all 0.6s ease;} .heatTEquipment .TEquipmentBox .swiper-slide .info{ position: absolute; top: 50%; transform: translateY(-50%); width: 80%; left: 10%; text-align: center; z-index: 2; transition: all 0.6s ease;} .heatTEquipment .TEquipmentBox .swiper-slide .info .tit{ font-size: 24px; color: #fff;} .heatTEquipment .TEquipmentBox .swiper-slide .info .txt{ font-size: 16px; color: #fff; line-height: 28px; margin-top: 15px;} .heatTEquipment .TEquipmentBox .swiper-slide:hover .img::after{transform: scale(1); border-radius: 20px; display: none;} .heatTEquipment .TEquipmentBox .swiper-slide:hover .img img{ transform: scale(1.1);opacity: 1;} .heatTEquipment .TEquipmentBox .swiper-slide:hover .info{ opacity: 0;} .heatTEquipment .swiper-button-next,.heatTEquipment .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #fff; text-align: center; line-height: 40px; transition: all 0.6s ease;} .heatTEquipment .swiper-button-next::after,.heatTEquipment .swiper-button-prev::after{ display: none;} .heatTEquipment .swiper-button-next{ right: -70px; transform: rotate(180deg);} .heatTEquipment .swiper-button-prev{ left: -70px;} .heatTEquipment .swiper-button-next:hover,.heatTEquipment .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} /* qualityEquipment */ .qualityEquipment{ width: 100%; height: 640px; position: relative; overflow: hidden; background: url(../images/qualitybg.jpg) center no-repeat ; background-size: cover;} .qualityEquipment::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);} .qualityEquipment .c1360 { position: relative; height: 100%; z-index: 2;} .qualityEquipment .info { position: absolute; font-size: 24px; color: #fff; line-height: 30px; right: 50%; top: 50%; margin:-15px 100px 0 0;} /* technologicalProcess */ .technologicalProcess{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .technologicalProcess .box{ width: 100%; margin-top: 60px; text-align: center;} .technologicalProcess .box img{ max-width: 100%; display: inline-block;} /* inspectionEquipment */ .inspectionEquipment{ width: 100%; padding: 0 0 100px 0; position: relative; overflow: hidden;} .inspectionEquipment .box{ width: 100%; position: relative; margin-top: 50px;} .inspectionEquipment .inspectionBox{ width: 100%;} .inspectionEquipment .inspectionBox .swiper-slide{ text-align: center; position: relative; border-radius: 20px; overflow: hidden;} .inspectionEquipment .inspectionBox .swiper-slide .img{ width: 100%; background-color: #000; transition: all 0.6s ease; position: relative; z-index: 1;} .inspectionEquipment .inspectionBox .swiper-slide .img img{ width: 100%; display: block; opacity: 0.5; position: relative;transition: all 0.6s ease;} .inspectionEquipment .inspectionBox .swiper-slide .img::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(235, 84, 5, 0.7); transform: scale(0);border-radius: 50%; transition: all 0.6s ease;} .inspectionEquipment .inspectionBox .swiper-slide .tit{ position: absolute; top: 50%; transform: translateY(-50%); width: 60%; left: 20%; text-align: center; z-index: 2; font-size: 24px; color: #fff; transition: all 0.6s ease;} .inspectionEquipment .inspectionBox .swiper-slide:hover .img::after{transform: scale(1); border-radius: 20px; display: none;} .inspectionEquipment .inspectionBox .swiper-slide:hover .img img{ transform: scale(1.1);opacity: 1;} .inspectionEquipment .inspectionBox .swiper-slide:hover .tit{ opacity: 0;} .inspectionEquipment .swiper-button-next,.inspectionEquipment .swiper-button-prev{ color: #333; width: 40px; height: 40px; border:0; border-radius: 50%; background-image: none !important; font-size: 24px; background-color: #eee; text-align: center; line-height: 40px; transition: all 0.6s ease;} .inspectionEquipment .swiper-button-next::after,.inspectionEquipment .swiper-button-prev::after{ display: none;} .inspectionEquipment .swiper-button-next{ right: -70px; transform: rotate(180deg);} .inspectionEquipment .swiper-button-prev{ left: -70px;} .inspectionEquipment .swiper-button-next:hover,.inspectionEquipment .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} /* pageIndustry */ .pageIndustry{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .pageIndustry .text{ text-align: center; padding-bottom: 60px;} .pageIndustry .text .tit{ font-size: 48px; color: #eb5405;} .pageIndustry .text .tit span{ color: #333;} .pageIndustry .text .txt{ font-size: 16px; line-height: 38px; color: #333; margin-top: 15px;} .pageIndustry .list{ position: relative; margin-top: 60px; padding: 0;border: none; width:100%;column-count: 3;column-gap: 20px;} .pageIndustry .list.list1{ margin-top: 0; display: none; transition: all 0.6s ease;} .pageIndustry .list .item{ width: 100%; position: relative; margin-bottom: 20px ;border-radius: 20px; overflow: hidden;} /* .pageIndustry .list .item:nth-child(n+6){ display: none;} */ .pageIndustry .list .item a{ display: block; background-color: #000; overflow: hidden; position: relative; transition:all 0.6s ease;} .pageIndustry .list .item img {display: block; width:100%; height:auto; background:#eee; padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; opacity: 0.4; transition:all 0.6s ease;} .pageIndustry .list .item .info{ position: absolute; z-index: 2; width: 100%; top: 0; left: 0; padding: 30px ;} .pageIndustry .list .item .info .tit{ font-size: 24px; color: #fff; position: relative; transition:all 0.6s ease;} .pageIndustry .list .item .info .tit::after{ content: ''; position: absolute; left: 0; bottom: -2px; width: 50px; height: 4px; background-color: #eb5405; opacity: 0;} .pageIndustry .list .item .info .txt{ font-size: 16px; text-transform: capitalize; color: #fff; margin-top: 10px;} .pageIndustry .list .item .con{position: absolute; z-index: 2; width: 100%; top: 50%; left: 0; padding: 30px ; text-align: center; transform: translateY(-50%);} .pageIndustry .list .item .con .tit{ font-size: 24px; color: #fff; line-height: 38px; transition: all 0.6s ease;} .pageIndustry .list .item .con .tit p{ color: #eb5405;} .pageIndustry .list .item .con .s{ font-size: 16px; color: #fff; margin-top: 15px; line-height: 30px;} .pageIndustry .list .item .con .s .hand{ font-size: 60px; margin: 20px 0 20px ; -webkit-animation: pul 2s infinite; animation: pul 2s infinite;transform: scale(0.9); } .pageIndustry .list .item:hover img{ opacity: 1; transform: scale(1.05);} .pageIndustry .list .item:hover .info .tit{ padding-bottom: 15px; margin-bottom: 20px;} .pageIndustry .list .item:hover .info .tit::after{ opacity: 1;} .pageIndustry .list .item.onHide{ display: none; transition: all 0.6s ease;} .pageIndustry .list .item.industryMore{ display: block;} .pageIndustry .list .item.industryMore:hover a{ background-color: #eb5405;} .pageIndustry .list .item.industryMore:hover img{ opacity: 0.4;} .pageIndustry .list .item.industryMore:hover .con .tit p{ color: #fff;} @-webkit-keyframes pul{ 0%{-webkit-transform: scale(0.9);transform: scale(0.9);} 50%{-webkit-transform: scale(1.1);transform: scale(1.1);} 100%{-webkit-transform: scale(0.9); transform: scale(0.9);} } @-moz-keyframes pul{ 0%{-webkit-transform: scale(0.9);transform: scale(0.9);} 50%{-webkit-transform: scale(1.1);transform: scale(1.1);} 100%{-webkit-transform: scale(0.9); transform: scale(0.9);} } @keyframes pul{ 0%{-webkit-transform: scale(0.9);transform: scale(0.9);} 50%{-webkit-transform: scale(1.1);transform: scale(1.1);} 100%{-webkit-transform: scale(0.9); transform: scale(0.9);} } /* pagePartner */ .pagePartner{ width: 100%; padding:0 0 100px 0; position: relative; overflow: hidden;} .pagePartner ul { width: 100%; margin-top: 60px;border-radius: 20px; overflow: hidden; border: solid 1px #eee;} .pagePartner ul li{ width: 16.6666%; border-top: solid 1px #eee;border-right: solid 1px #eee; padding:10px 15px;} .pagePartner ul li:nth-child(1),.pagePartner ul li:nth-child(2),.pagePartner ul li:nth-child(3),.pagePartner ul li:nth-child(4),.pagePartner ul li:nth-child(5),.pagePartner ul li:nth-child(6){ border-top: 0;} .pagePartner ul li:nth-child(6n){ border-right: 0;} .pagePartner ul li img{ display: block; width: 100%; transition: all 0.6s ease;/* filter: grayscale(100%); */} /* .pagePartner ul li:hover img{filter: none;} */ /* solutionNav */ .solutionNav{ width: 100%; position: relative; z-index: 3;} .solutionNav ul{ width: 100%;position: relative; z-index: 1;} .solutionNav ul::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 16px); background-color: #f4f5fa; border-radius: 16px 16px 0 0;} .solutionNav ul li{ width: 33.3333%; position: relative; z-index: 3; text-align: center; padding-top: 16px; transition: all 0.6s ease; overflow: hidden;} .solutionNav ul li a{ display: inline-block;height: 100%; color: #333; width: 100%; font-size: 18px; line-height: 30px; padding: 15px 20px; border-right: solid 1px #ddd; background-color: #f4f5fa; transition: all 0.6s ease; } .solutionNav ul li:first-child a{ border-radius: 16px 0 0 0;} .solutionNav ul li:last-child a{ border-right: 0; border-radius: 0 16px 0 0;} .solutionNav ul li.on { padding-top: 0;} .solutionNav ul li.on a{ padding: 23px 20px; border-color: #fff; background-color: #fff; font-size: 20px; color: #eb5405; border-radius: 16px 16px 0 0;font-weight: bold;} .solutionNav ul li a:hover{ color: #eb5405;} .solutionNav ul.u6 li{ width: 16.6666%;} /* solutionInfo */ .solutionInfo{ width: 100%; position: relative; z-index: 2; margin-bottom: 100px;} .solutionInfo .box{ width: 100%; position: relative; margin-top: -20vh; z-index: 2; } .solutionInfo .info{ padding: 60px; width: 100%; position: relative; background-color: #fff; z-index: 2; border-radius: 0 0 20px 20px; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05); overflow: hidden; } .solutionInfo .info.br{ border-radius: 20px;} .solutionInfo .info .text{ width: 100%; margin-top: 50px; font-size: 16px; line-height: 38px; color: #333;} .solutionInfo .info .text img{display: none;} .solutionInfo .info .img{ width: 100%; position: relative; z-index: 1; background-color: #000; margin-top: 40px; border-radius: 20px; overflow: hidden;} .solutionInfo .info .img img{ width: 100%; display: block; position: relative; z-index: 1; opacity: 0;} .solutionInfo .info .img video{ position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: auto; min-width: 100%; height: 100%; z-index: 2;opacity: 0.5;} .solutionInfo .info .img a{ position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); border: solid 1px #fff; padding: 0 30px; color: #fff; font-size: 16px; line-height: 46px; border-radius: 23px; transition: all 0.6s ease;} .solutionInfo .info .img a span{ display: inline-block; vertical-align: middle; margin-left: 10px; transition: all 0.6s ease;} .solutionInfo .info .img a:hover{ background-color: #eb5405; border-color: #eb5405;} .solutionInfo .info .img.imgon img{ opacity: 0.8;} /* solutionAdvantage */ .solutionAdvantage{ width: 100%; position: relative; padding-bottom: 100px; overflow: hidden;} .solutionAdvantage ul{ margin-top: 60px;} .solutionAdvantage ul li{width: 31%; margin:0 3.5% 3.5% 0; position: relative; padding:45px 30px; border-radius: 20px; background-color: #f4f5fa;} .solutionAdvantage ul li:nth-child(3n){ margin-right: 0;} .solutionAdvantage ul li:nth-child(n+4){ margin-bottom: 0;} .solutionAdvantage ul li .iconfont{position: absolute; top: 40px; right: 40px; z-index: 1; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 52px; color: #eb5405;} .solutionAdvantage ul li .tit{ font-size: 20px; color: #333; font-weight: bold; position: relative; padding-right: 50px; } .solutionAdvantage ul li .txt{ font-size: 18px; color: #333; margin-top: 30px; line-height: 36px;} .solutionAdvantage ul li .more{ margin-top: 15px;} .solutionAdvantage ul li .more a{ display: inline-block;font-size: 16px; color: #eb5405;} .solutionAdvantage ul li .more a:hover{ text-decoration: underline;} /* productDiagram */ .productDiagram{ width: 100%; position: relative; padding-bottom: 100px; overflow: hidden;} .productDiagram .proTitle .tit span{ color: #eb5405;} .productDiagram .img{ width: 100%; text-align: center; position: relative; margin-top: 20px; padding-top: 60px;} .productDiagram .img img{ display: inline-block; max-width: 100%; position: relative; z-index: 1;} .productDiagram .img .p{ position: absolute; z-index: 2; text-align: center; font-size: 18px; line-height: 30px; color: #333;} .productDiagram .img .p.p1{ left: 11.7%; bottom: 36%;} .productDiagram .img .p.p2{ left: 56.2%; bottom: 84%;} .productDiagram .img .p.p3{ left: 70%; bottom: 4.5%;} @media (max-width: 1360px){ .productDiagram .img .p{ font-size: 16px;line-height: 26px;} } /* productOther */ .productOther{ width: 100%; padding: 100px 0; position: relative; overflow: hidden; background-size: cover !important; margin-bottom: 100px;} .productOther ul{ width: 100%; margin-top: 30px;} .productOther ul li{ width: 31.3333%;margin: 3% 3% 0 0; position: relative; background-color: #fff; border: solid 1px #eee; border-radius: 20px; overflow: hidden; } .productOther ul li:nth-child(3n){ margin-right: 0;} .productOther ul li .tit{ font-size: 18px; color: #333; padding:20px 25px; text-align: center; width: 100%; } .productOther ul li .img{ width: 100%; position: relative; overflow: hidden;} .productOther ul li .img img{ width: 100%; display: block; transition: all 0.6s ease;} /* solutionCase */ .solutionCase{ width: 100%; padding-bottom: 100px; position: relative; overflow: hidden;} .solutionCase ul{ width: 100%; margin-top: 30px;} .solutionCase ul li{ width: 31.3333%;margin: 3% 3% 0 0; position: relative; overflow: hidden; } .solutionCase ul li:nth-child(3n){ margin-right: 0;} .solutionCase ul li .tit{ font-size: 18px; color: #333; padding:20px 25px; text-align: center; width: 100%; border: solid 1px #e5e5e5; border-top: 0; border-radius:0 0 20px 20px ; overflow: hidden; transition: all 0.6s ease;} .solutionCase ul li .img{ width: 100%; border-radius: 20px 20px 0 0; position: relative; overflow: hidden;} .solutionCase ul li .img img{ width: 100%; display: block; transition: all 0.6s ease;} .solutionCase ul li:hover .tit{ background-color: #eb5405; color: #fff; border-color: #eb5405;} .solutionCase ul li:hover img{ transform: scale(1.1);} /* solutionProduct */ .solutionProduct{ width: 100%; padding-bottom: 100px; position: relative; overflow: hidden;} .solutionProduct .swiper-button-next,.solutionProduct .swiper-button-prev{ color: #333; width: 40px; height: 40px; background-color: #eee; border: 0; border-radius: 50%; background-image: none !important; font-size: 24px; text-align: center; line-height: 40px; transition: all 0.6s ease;} .solutionProduct .swiper-button-next::after,.solutionProduct .swiper-button-prev::after{ display: none;} .solutionProduct .swiper-button-next{ right: 0; transform: rotate(180deg);} .solutionProduct .swiper-button-prev{ left: 0;} .solutionProduct .swiper-button-next:hover,.solutionProduct .swiper-button-prev:hover{ color: #fff; background-color: #eb5405;} .solutionProduct .box{ position: relative;} .solutionProduct .productBox{ margin: 60px auto 0; width: calc(100% - 160px) ;position: relative;} .solutionProduct .productBox .swiper-slide{ position: relative; text-align: center;} .solutionProduct .productBox .swiper-slide .img{ width: 80%; margin: auto;} .solutionProduct .productBox .swiper-slide .img img{ width: 100%; display: block;} .solutionProduct .productBox .swiper-slide .tit{ font-size: 16px; color: #333; margin-top: 20px;} .solutionProduct .productBox .swiper-slide:hover .tit{ color: #eb5405;} /* productBanner */ .productBanner{ width: 100%; height: 100vh; overflow: hidden; position: relative; background-size: cover !important;} .productBanner.bgshow::after{ content: ''; width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 150px; background: linear-gradient(180deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0)); z-index: 2; } .productBanner .box{ width: 100%; height: 100%; position: relative;} .productBanner .c1360{ position: relative; height: 100%;} .productBanner .box .img{ width: 52%; position: absolute; top: 50%; transform: translateY(-40%) ; right: 4%;} .productBanner .box .img img{ width: 100%;} .productBanner .box .info{ width: 42%; text-align: left; position: absolute; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .productBanner .box .info .tit{ font-family:'SourceHanSansSC-Heavy'; font-size: 60px; color: #eb5405;} .productBanner .box .info .st{ font-size:50px;margin-top:0; color: #333; } .productBanner .box .info .txt{ font-size: 20px; color: #333; margin-top: 20px; line-height: 38px; } .productBanner .box .info ul{ position: relative; margin-top: 5%;} .productBanner .box .info ul li{ position: relative; padding-left: 45px; line-height: 30px; margin-top: 15px;} .productBanner .box .info ul li .pic{ position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 5px; border: solid 1px #eb5405; overflow: hidden;} .productBanner .box .info ul li .pic img{ width: 100%; display: block;} .productBanner .box .info ul li .t{ font-size: 16px;} .productBanner1{width: 100%; height: 100vh; overflow: hidden; position: relative; background-size: cover !important;} .productBanner1 .box{ width: 100%; position: absolute; bottom: 30px; width: 100%; left: 0; } .productBanner1 .box .img{ width: 28%; margin-left: 5%;} .productBanner1 .box .img img{ width: 100%; display: block;} .productBanner1 .box .info{ width: 42%; margin-right: 5%; position: relative;} .productBanner1 .box .info .tit{ text-align: right; margin-top: 10%; font-family:'SourceHanSansSC-Heavy'; font-size: 90px; color: #eb5405;} .productBanner1 .box .info .st{ font-size:50px;margin-top:0; color: #333; text-align: right; } .productBanner1 .box .info .txt{ font-size: 20px; color: #333; margin-top: 20px; line-height: 38px; text-align: right;} .productBanner1 .box .info ul{ width: 100%; position: absolute; bottom: 5%; right: 0;} .productBanner1 .box .info ul li{ width: 31%; text-align: center; margin-right: 3.5%;} .productBanner1 .box .info ul li:last-child{ margin-right: 0;} .productBanner1 .box .info ul li .pic{ width: 100%; border-radius: 10px; overflow: hidden;} .productBanner1 .box .info ul li .pic img{ width: 100%; display: block;} .productBanner1 .box .info ul li .t{ font-size: 16px; text-align: center; margin-top: 15px; color: #333;} @media (max-width: 1680px){ .productBanner1 .box .img{ width: 25%; margin-left: 5%;} .productBanner1 .box .info .tit{ margin-top: 0;} } @media (max-width: 1560px){ .productBanner .box .info .tit{ font-size: 60px;} .productBanner .box .info .st{ font-size:30px;} .productBanner .box .info .txt{ font-size: 18px; line-height: 30px; } .productBanner1 .box .img{ width: 23%; margin-left: 10%;} .productBanner1 .box .info ul{ width: 80%; right: 0;} } @media (max-width: 1440px){ .productBanner .box .info .tit{ font-size: 40px;} .productBanner .box .info .st{ font-size:24px;} .productBanner .box .info .txt{ font-size: 16px; line-height: 30px; } .productBanner .box .info ul li .t{ font-size: 14px;} .productBanner1 .box .img{ width: 20%; margin-left: 10%;} .productBanner1 .box .info .tit{ font-size: 40px;} .productBanner1 .box .info .st{ font-size:24px;} .productBanner1 .box .info .txt{ font-size: 16px; line-height: 30px; } .productBanner1 .box .info ul{ width: 80%; right: 0;} } /* proTitle */ .proTitle{ width: 100%; text-align: center; } .proTitle .tit{ font-size: 40px; position: relative; color: #333; padding-bottom: 25px; transition: all 0.6s ease;} .proTitle .tit::after{ content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -25px; width: 50px; height: 4px; background-color: #eb5405; transition: all 0.6s ease;} .proTitle .txt{font-size: 16px; line-height: 38px; margin-top: 20px; color: #333;} /* productAdvantage */ .productAdvantage{ width: 100%; padding: 100px 0; position: relative; overflow: hidden;} .productAdvantage ul{ width: 100%; margin-top: 30px;} .productAdvantage ul li{ width: 22.75%; margin: 3% 3% 0 0; cursor: pointer; background-color: #f4f5fa; border-radius: 20px; text-align: center; padding: 60px 0; transition: all 0.6s ease;} .productAdvantage ul li:nth-child(4n){ margin-right: 0;} .productAdvantage ul li .iconfont{ font-size: 72px; color: #eb5405; transition: all 0.6s ease;} .productAdvantage ul li .tit{ font-size: 18px; color: #333; padding: 0 20px; margin-top: 30px; transition: all 0.6s ease;} .productAdvantage ul li:hover{ background-color: #eb5405; border-color: #eb5405;} .productAdvantage ul li:hover .iconfont,.productAdvantage ul li:hover .tit{ color: #fff;} /* productTechnique */ .productTechnique{ width: 100%; position: relative; overflow: hidden;} .productTechnique ul{ width: 100%;} .productTechnique ul li{ width: 100%; position: relative; margin-bottom: 100px;} .productTechnique ul li .img{ width: 48%; border-radius: 20px; overflow: hidden;} .productTechnique ul li .img img{ width: 100%; display: block; transition: all 0.6s ease;} .productTechnique ul li .info{ position: absolute; width: 48%; top: 50%; transform: translateY(-50%); padding:0 60px;} .productTechnique ul li .info .tit{ font-size: 40px; position: relative; color: #333; padding-bottom: 25px; transition: all 0.6s ease;} .productTechnique ul li .info .tit::after{ content: ''; position: absolute; bottom: 0; width: 50px; height: 4px; background-color: #eb5405; transition: all 0.6s ease;} .productTechnique ul li .info .txt{font-size: 18px; line-height: 36px; margin-top: 20px; color: #333;} .productTechnique ul li:nth-child(odd) .img{ float: left;} .productTechnique ul li:nth-child(odd) .info{ right: 0; text-align: left;} .productTechnique ul li:nth-child(odd) .info .tit::after{ left: 0;} .productTechnique ul li:nth-child(even) .img{ float: right;} .productTechnique ul li:nth-child(even) .info{ left: 0; text-align: right;} .productTechnique ul li:nth-child(even) .info .tit::after{ right: 0;} .productTechnique ul li .img:hover img{ transform: scale(1.05);} /* productTechnique1 */ .productTechnique1{ width: 100%; position: relative;padding-bottom: 100px; padding-bottom: 100px; overflow: hidden;} .productTechnique1 .bigImg{ width: 50%; padding: 0 15.3%;} .productTechnique1 .bigImg img{ width: 100%; display: block;} .productTechnique1 ul{ width: 50%; padding-left: 3%;} .productTechnique1 ul li{ width: 100%; margin-top: 40px;} .productTechnique1 ul li:first-child{ margin-top: 0;} .productTechnique1 ul li .img{ width: 100%; border-radius: 20px; overflow: hidden;} .productTechnique1 ul li .img img{ width: 100%; display: block; transition: all 0.6s ease;} .productTechnique1 ul li .info{ width: 100%; margin-top: 30px; text-align: center;} .productTechnique1 ul li .info .tit{ font-size: 40px; position: relative; color: #333; padding-bottom: 25px; transition: all 0.6s ease;} .productTechnique1 ul li .info .tit::after{ content: ''; position: absolute; bottom: 0; left: 50%; width: 50px; margin-left: -25px; height: 4px; background-color: #eb5405; transition: all 0.6s ease;} .productTechnique1 ul li .info .txt{font-size: 18px; line-height: 36px; margin-top: 20px; color: #333;} /* productTopical */ .productTopical{position: relative; width: 100%; overflow: hidden; } .productTopical .img{ width: 1200px; position: relative; margin:100px auto 0; text-align: center; } .productTopical .img .img1{ position: relative; z-index: 1; } .productTopical .img .img2{ position: absolute; top: 0; left: 0; z-index: 2; -webkit-animation: imgup 1s forwards ; animation: imgup 1s forwards ;} .productTopical .img img{ width: 100%; display: block; } .productTopical .img .txt{ position: absolute; z-index: 3; top:0; left: 7%; font-size: 18px; color: #eb5405; line-height: 36px; opacity: 0; -webkit-animation: txtshow 1s forwards ; animation: txtshow 1s forwards ;} @-webkit-keyframes imgup {0%{ top: 0;}100%{ top: -60px;}} @-moz-keyframes imgup {0%{top: 0;}100%{ top: -60px;}} @keyframes imgup {0%{top: 0;}100%{ top: -60px;}} @-webkit-keyframes txtshow {0%{ opacity: 0;}100%{ opacity: 1;}} @-moz-keyframes txtshow {0%{opacity: 0;}100%{ opacity: 1;}} @keyframes txtshow {0%{opacity: 0;}100%{ opacity: 1;}} /* productStructure */ .productStructure{ width: 100%; padding-bottom: 100px; position: relative; overflow: hidden;} .structureBox{ width: 100%; position: relative; margin-top: 60px; } .structureBox .imgBox{ width: 100%; position: relative;} .structureBox .imgBox img{ background-color: #fff;} .structureBox .img1{ position: absolute; top: 0; left: 0; display:block; width: 1360px;} .structureBox .displaningPlan{ position: relative; width: 100%; z-index: 2; overflow:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;} .structureBox .displaningPlan img.img2{ position: relative; display:block; width: 1360px; } .structureBox.is-visible .displaningPlan{width:50%;-webkit-animation:imgBoxIn .7s;-moz-animation:imgBoxIn .7s;animation:imgBoxIn .7s} .structureBox .dragHandle{position:absolute;left:50%;top:50%;cursor:move;opacity:0;-webkit-transform:translate3d(0, 0, 0) scale(0);-moz-transform:translate3d(0, 0, 0) scale(0);-ms-transform:translate3d(0, 0, 0) scale(0);-o-transform:translate3d(0, 0, 0) scale(0);transform:translate3d(0, 0, 0) scale(0)} .structureBox .dragHandle .Hand{position:absolute;left:0;top:0;width:100%;height:100%;background: url(../images/btn.png) no-repeat center;z-index:9;} .structureBox .dragHandle .Hand:before,.structureBox .dragHandle .Hand:after{position: absolute;top: 0;width: 16px; height: 100%; content: "";} .structureBox .dragHandle .Hand:before{left: 0;background: url(../images/icon_left.png) no-repeat center;animation: prevHover 1.5s 1s ease infinite;-webkit-animation: prevHover 1.5s 1s ease infinite;-moz-animation: prevHover 1.5s 1s ease infinite;-o-animation: prevHover 1.5s 1s ease infinite;} .structureBox .dragHandle .Hand:after{right:0;background: url(../images/icon_right.png) no-repeat center;animation: nextHover 1.5s 1s ease infinite;-webkit-animation: nextHover 1.5s 1s ease infinite;-moz-animation: nextHover 1.5s 1s ease infinite;-o-animation: nextHover 1.5s 1s ease infinite;} .structureBox.is-visible .dragHandle{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);-moz-transform:translate3d(0, 0, 0) scale(1);-ms-transform:translate3d(0, 0, 0) scale(1);-o-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1);-webkit-transition:-webkit-transform .3s .7s, opacity 0s .7s;-moz-transition:-moz-transform .3s .7s, opacity 0s .7s;transition:transform .3s .7s, opacity 0s .7s} .structureBox.is-visible .displaningPlan{border-right:2px solid #eb5405;} .structureBox.is-visible .dragHandle{width:80px;height:36px;margin-left:-40px;margin-top:-18px;box-shadow:none;} .structureBox .dragHandle{z-index:9;} .structureBox .hd ul li{ position: absolute; width: 40px; height: 40px; overflow: hidden; z-index: 8; cursor: pointer;} .structureBox .hd ul li::after{ content: ''; width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; background-color: rgba(235, 84, 5, 1); z-index: 2; border-radius: 50%; transition: all 0.6s ease; } .structureBox .hd ul li a{ width: 100%; display: inline-block; position: relative; z-index:1; width: 40px; height: 40px; overflow: hidden;} .structureBox .hd ul li a::after{ content: ''; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; background-color: rgba(235, 84, 5, 0.3); z-index: 1; border-radius: 50%; transition: all 0.6s ease; -webkit-animation: iconSize 2s infinite; animation: iconSize 2s infinite;} .structureBox .hd ul li a::before{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: 0; background-color: rgba(235, 84, 5, 0.3); z-index: 1; border-radius: 50%; transition: all 0.6s ease; transform: scale(0); } .structureBox .hd ul li.on a::before{transform: scale(1); -webkit-animation: iconSize 2s infinite; animation: iconSize 2s infinite;} .structureBox .hd ul li.on a::after,.structureBox .hd ul li:hover a::after{ transform: scale(1.2);} .structureBox .structureInfo{ position: relative; width: 100%; color: #333; } .structureItem { width: 1200px; margin:20px auto 0; position: relative;} .structureItem .ttit{ width: 520px;padding:15px 50px 15px 0;line-height: 30px; border-bottom: solid 1px #eee; font-size: 18px; color: #333; font-weight: bold; position: relative; cursor: pointer;} .structureItem .ttit i{ position: absolute; display: inline-block; width: 30px; height: 30px;margin-top: -15px; border-radius: 50%; overflow: hidden; background-color: #333; top: 50%; right: 0;} .structureItem .ttit i::after,.structureItem .ttit i::before{ content: ''; background-color: #fff; position: absolute; top: 50%; left: 50%; transition: all 0.6s ease;} .structureItem .ttit i::after{ width: 12px; height: 2px; margin: -1px 0 0 -6px; } .structureItem .ttit i::before{ width: 2px; height: 12px; margin: -6px 0 0 -1px; } .structureItem .ttit.on{ color: #eb5405;} .structureItem .ttit.on i{ background-color: #eb5405;} .structureItem .ttit.on i::before{ transform: rotate(90deg);} .structureItem .tcon { width: 520px; padding: 10px 0 ; display: none;} .structureItem .tcon .txt{ font-size: 16px; line-height: 30px; color: #666;} .structureItem .tcon .txt p{ padding: 5px 0 0 15px; position: relative;} .structureItem .tcon .txt p::after{ content: ''; width: 6px; height: 6px; border-radius: 50%;position: absolute; background-color: #333; left: 0; top: 17px;} .structureItem .tcon .pic{ position: absolute;text-align: center; right: 0; top: 0;height: 300px; background-color: #fff; width: 520px;} .structureItem .tcon .pic img{ width: auto; height: auto; max-width: 100%; max-height: 100%; display: inline-block;} @media (max-width: 1360px){ .structureBox .img1,.structureBox .displaningPlan img.img2{ width: 1200px;} } @-webkit-keyframes imgBoxIn{0%{width:0}60%{width:55%}100%{width:50%}} @-moz-keyframes imgBoxIn{0%{width:0}60%{width:55%}100%{width:50%}} @keyframes imgBoxIn{0%{width:0}60%{width:55%}100%{width:50%}} @-webkit-keyframes iconSize{0%{transform: scale(0.8);}50%{transform: scale(1);}100%{transform: scale(0.8);}} @-moz-keyframes iconSize{0%{transform: scale(0.8);}50%{transform: scale(1);}100%{transform: scale(0.8);}} @keyframes iconSize{0%{transform: scale(0.8);}50%{transform: scale(1);}100%{transform: scale(0.8);}} @keyframes nextHover{0%{opacity: 1;transform: translateX(0);}50%{opacity: 0.3;transform: translateX(10px);}100%{opacity: 1;transform: translateX(0);}} @-webkit-keyframes nextHover{0%{opacity: 1;-webkit-transform: translateX(0);}50%{opacity: 0.3;-webkit-transform: translateX(10px);}100%{opacity: 1;-webkit-transform: translateX(0);}} @keyframes prevHover{0%{opacity: 1;transform: translateX(0);}50%{opacity: 0.3;transform: translateX(-10px);}100%{opacity: 1;transform: translateX(0);}} @-webkit-keyframes prevHover{0%{opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);}50%{opacity: 0.3;transform: translateX(-10px);-webkit-transform: translateX(-10px);}100%{opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);}} /* productParameter */ .productParameter{ width: 100%; padding-bottom: 100px; position: relative; overflow: hidden;} .productParameter .box{ margin: 60px auto 0;border-radius: 10px; border: solid 1px #eee; box-shadow: 0 0 20px rgba(0,0,0,0.05);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.05);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.05); overflow: hidden; } .productParameter .box table{border: none; overflow: hidden; } .productParameter .box table tr{ border: none; overflow: hidden; border-top: solid 1px #eee;} .productParameter .box table tr:first-child{border: none;} .productParameter .box table tr:nth-child(odd){ background-color: #fafafa;} .productParameter .box table tr td{ border: 0; width: 50%; text-align: center; padding: 30px 20px; font-size: 16px; color: #333;} .productParameter .box table tr td:nth-child(1){ border-right: solid 1px #eee;} .productParameter .box table tr:nth-child(odd) td{ } .productParameter .notice{ margin-top: 25px;font-size: 14px; color: #333;line-height: 20px; text-align: right;} .productParameter .notice span{ display: inline-block;vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background-color: #eb5405; color: #fff; line-height: 20px; text-align: center; margin-right: 5px;} /* productApplication */ .productApplication{ width: 100%; position: relative; overflow: hidden; background-size: cover !important;} .productApplication .applicationBox{position: relative; width: 100%; padding: 100px 0; overflow: hidden; transition: all 2s ease;} .productApplication .applicationBox::after{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.5); } .productApplication .applicationBox .c1360{ position: relative; z-index: 2; } .productApplication .applicationBox .proTitle .tit{ color: #fff;} .productApplication .applicationBox ul{ width: 100%; margin-top: 60px;} .productApplication .applicationBox ul li{ width: 31.33%; border-radius: 20px; background-color: rgba(255, 255, 255, 0.2); text-align: center; padding:60px 40px ; margin-right: 3%; backdrop-filter: blur(3px);} .productApplication .applicationBox ul li .tit{ color: #fff; font-size: 24px;} .productApplication .applicationBox ul li .txt{ color: #fff; font-size: 16px; margin-top: 15px; line-height: 30px;} .productApplication .applicationBox ul.u4 li{ margin-right: 2%; width: 23.5%;} .productApplication .applicationBox ul.u2 li{ margin-right: 4%; width: 48%;} .productApplication .applicationBox ul li:last-child{ margin-right: 0;} .productApplication .applicationBox .text{ width: 100%; text-align: center; margin-top: 60px; padding: 60px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.15); line-height: 40px; font-size: 20px; color: #fff; backdrop-filter: blur(3px);} .productApplication .applicationBox .more{text-align: right; margin-top: 60px;} .productApplication .applicationBox .more a{ display: inline-block; font-size: 18px; line-height: 30px; color: #fff; transition: all 0.8s ease;} .productApplication .applicationBox .more a span{ display: inline-block; vertical-align: middle; margin:-2px 0 0 20px; text-align: center; line-height: 30px; width: 30px; height: 30px; border-radius: 50%; background-color: #eb5405; transform: rotate(180deg); transition: all 0.6s ease;color: #fff;} .productApplication .applicationBox .more a:hover{ color: #eb5405;} .proCase{ position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 3; background-size: cover !important;} .proCase::after{ content: ''; width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(180deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0)); z-index: 2; } .proCase .bigbox{ position: absolute; left: 0; width: 100%; z-index: 1; top: 50%; transform: translateY(-43%); z-index: 1;} .proCase .title{ font-size: 48px; color: #333;} .proCase .caseBox{width: 100%;padding: 40px 0 100px;} .proCase .caseBox .swiper-slide{position: relative;} .proCase .caseBox .swiper-slide a{ display: block; height: 100%;} .proCase .caseBox .swiper-slide .img{ width: 100%; overflow: hidden; border-radius: 20px 20px 0 0;} .proCase .caseBox .swiper-slide .img img{ width: 100%; display: block; transition: all 0.6s ease;} .proCase .caseBox .swiper-slide .info{ padding: 25px; background-color: #fff; border-radius:0 0 20px 20px;} .proCase .caseBox .swiper-slide .info .tit{ font-size: 18px; color: #333; line-height: 30px; max-height: 60px; transition: all 0.6s ease; text-align: center;} .proCase .caseBox .swiper-slide .info .time{ font-size: 14px; color: #999; margin-top: 10px;} .proCase .caseBox .swiper-slide:hover .info{ border-color: #eb5405;} .proCase .caseBox .swiper-slide:hover img{ transform: scale(1.05);} .proCase .caseBox .swiper-slide:hover .tit{ color: #eb5405;} .proCase .caseBox .swiper-slide:hover .time{ color: #333;} .proCase .swiper-pagination{ bottom: 100% !important; margin-bottom: -5px; } .proCase .swiper-pagination .swiper-pagination-bullet{ width: 30px; height: 4px; margin:0 5px; background-color: #eb5405; border-radius: 0; opacity: 0.5;} .proCase .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;} .proCase .more{ width: 150px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3;} .proCase .more a{ display: inline-block; width: 100%; line-height: 46px; border-radius: 23px; overflow: hidden; background-color: rgba(235, 84, 5, 0.6);color: #fff; text-align: center; font-size: 16px; transition: all 0.6s ease;} .proCase .more a:hover{ background-color: #eb5405; color: #fff;} /*pages*/ .pages{ padding: 40px 0 0 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:#eb5405; text-decoration:none } .pages span { display:inline-block; height:32px; line-height:32px; background:#eb5405; color:#fff; text-align:center; padding:0 12px; margin:0 5px;} /* bsWXBox */ #bsWXBox{ width: 232px !important; height: 256px !important;}