body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, header, main, footer, aside, section, article, nav { padding: 0; margin: 0 }
fieldset, img { border: 0 }
table { border-collapse: collapse; border-spacing: 0 }
ol, ul { list-style-type: none }
address, caption, cite, code, dfn, em, th, var { font-weight: normal; font-style: normal }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100% }
p:before, q:after { content: '' }
abbr, acronym { border: 0 }
a { text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease }
.clr { HEIGHT: 0px; VISIBILITY: hidden; CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; width: 100% }
body, samp, body input, body textarea { font-size: 12px; color: #333; font-family: "微软雅黑", "Microsoft YaHei", "Arial", "SimSun", Serif, "PingFang SC", "苹方" !important }
img { vertical-align: bottom }
input[type="text"], input[type="hidden"], input[type="button"], input[type="radio"], input[type="submit"], input[type="checkbox"], input[type="password"], button, textarea, select { outline: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0 }
img, .menu span, .header-right, .header-right ul li:before, .header-lang, .sub-body p, .sub-body2 p, .footer-item .h3:before, .leaf-item, .leaf-phone, .leaf-wx, .banner .swiper-button-prev:before, .banner .swiper-button-prev:after, .banner .swiper-button-next:before, .banner .swiper-button-next:after, .hcor ul li:before, .hcor-pannel, .hcor-item, .hpro .swiper-button-prev:before, .hpro .swiper-button-prev:after, .hpro .swiper-button-next:before, .hpro .swiper-button-next:after, .hsolve-item:after, .hyy-content .swiper-button-prev:before, .hyy-content .swiper-button-prev:after, .hyy-content .swiper-button-next:before, .hyy-content .swiper-button-next:after, .hyy-pannel em, .hyy-pannel em:before, .hyy-pannel em samp, .hyy-pannel em samp:before, .hyy-pannel span, .hcase-item, .hcase-item:before, .hcase-item samp, .hcase-item span, .hcase-item p, .hcase-content .swiper-button-prev:before, .hcase-content .swiper-button-prev:after, .hcase-content .swiper-button-next:before, .hcase-content .swiper-button-next:after, .hnews-content .swiper-slide, .hnews-cont span, .hnews-cont samp:before, .hnews-cont samp:after, .hnews-more, .hnews-content .swiper-button-prev:before, .hnews-content .swiper-button-prev:after, .hnews-content .swiper-button-next:before, .hnews-content .swiper-button-next:after, .hform-input, .hform-text, .hform-button, .news-1, .news-1right span, .news-1right samp, .news-item, .news-pic p, .news-item span, .detail-2, .case-1left, .case-1pic em, .case-1cont em:before, .case-1cont em:after, .case-1cont span, .case-1right, .case-2item, .case-2pic em, .case-2cont em:before, .case-2cont em:after, .case-2cont span, .cinfo-2 .swiper-button-prev:before, .cinfo-2 .swiper-button-prev:after, .cinfo-2 .swiper-button-next:before, .cinfo-2 .swiper-button-next:after, .about-1item, .about-1pannel ul li, .about-1pannel ul li:before, .about-1pannel ul li:after, .about-3pic, .about-3cont .h4, .about-3cont .h4:before, .about-3info, .about-3icon, .about-4item .h4, .about-5content .swiper-button-prev:before, .about-5content .swiper-button-prev:after, .about-5content .swiper-button-next:before, .about-5content .swiper-button-next:after, .about-5content .swiper-pagination span, .about-6content .swiper-button-prev:before, .about-6content .swiper-button-prev:after, .about-6content .swiper-button-next:before, .about-6content .swiper-button-next:after, .ser-1content, .ser-1 ul li, .ser-1 ul li:before, .ser-1 ul li:after, .ser-3right span, .ser-3info, .dz-2right .swiper-pagination span, .dz-5more, .dz-5item span, .dz-5item em:before, .dz-5item em:after, .sol-nav span, .sol-nav span:before, .sinfo-2right span, .sinfo-2info, .sinfo-3left span, .sinfo-3item, .sinfo-3item span, .pro-nav span, .pro-nav p, .pro-list, .pro-list:before, .pro-li, .pro-more, .pro-more:before, .pro-more:after, .pro-more i, .pinfo-1center ul li, .pinfo-3pic .swiper-button-prev:before, .pinfo-3pic .swiper-button-prev:after, .pinfo-3pic .swiper-button-next:before, .pinfo-3pic .swiper-button-next:after, .pinfo-7content .swiper-button-prev, .pinfo-7content .swiper-button-next, .pinfo-7 .swiper-pagination span, .pinfo-8cont .swiper-slide, .pinfo-8cont .swiper-slide span, .pinfo-8cont .swiper-button-prev:before, .pinfo-8cont .swiper-button-prev:after, .pinfo-8cont .swiper-button-next:before, .pinfo-8cont .swiper-button-next:after, .contact-2content ul li, .contact-2content ul li span { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s }
.weixin-prop { width: 300px; height: 380px; border: 1px #ddd solid; background: #fff; position: fixed; left: 50%; top: 50%; margin: -190px 0px 0px -150px; z-index: 2345667 }
.weixin-close { width: 25px; height: 25px; position: absolute; right: 10px; top: 10px; line-height: 30px; text-align: center; font-size: 20px; color: #333; cursor: pointer }
.weixin-close:before { width: 60%; height: 2px; content: ""; position: absolute; left: 20%; top: calc(50% - 1px); background: #333; transform: rotate(45deg) }
.weixin-close:after { width: 60%; height: 2px; content: ""; position: absolute; left: 20%; top: calc(50% - 1px); background: #333; transform: rotate(-45deg) }
.weixin-img { float: left; width: 250px; margin: 60px 0px 0px 25px }
.weixin-img canvas { width: 250px; height: 250px }
.weixin-prop p { float: left; width: 100%; overflow: hidden; font-size: 14px; text-align: center; color: #222 }
.swiper { height: 100% }
.swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: auto }
.swiper-button-prev, .swiper-button-next { background: none }
.swiper-button-prev::after, .swiper-button-next::after { content: "" }
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.animated.hinge { -webkit-animation-duration: 3s; animation-duration: 3s }
@-webkit-keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translateY(40px);
transform:translateY(40px)
}
100% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translateY(40px);
-ms-transform:translateY(40px);
transform:translateY(40px)
}
100% {
opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp }
.video-prop { width: 100%; height: 100%; overflow: hidden; position: fixed; left: 0px; top: 0px; z-index: 1000; background: rgba(0,0,0,0.6); text-align: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease }
.video-prop:before { height: 100%; content: ""; display: inline-block; vertical-align: middle }
.video-center { width: 65%; vertical-align: middle; display: inline-block; position: relative }
.video-center video { width: 100%; height: auto; display: block }
.video-close { width: 36px; height: 36px; overflow: hidden; position: absolute; right: -18px; top: -18px; z-index: 12; border-radius: 50%; background: #fafafa; text-align: center; cursor: pointer; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease }
.video-close:before { width: 60%; height: 2px; content: ""; position: absolute; left: 20%; top: calc(50% - 1px); background: #333; transform: rotate(45deg) }
.video-close:after { width: 60%; height: 2px; content: ""; position: absolute; left: 20%; top: calc(50% - 1px); background: #333; transform: rotate(-45deg) }
.video-close:hover { transform: rotate(180deg) }
.video-active { opacity: 1; visibility: visible }
@media screen and (max-width: 768px) {
.video-center { width: 90% }
.video-close { width: 32px; height: 32px; right: -16px; top: -16px }
}
@keyframes zhuanquan { 0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
@keyframes suofang { 0% {
transform:scale(1)
}
100% {
transform:scale(1.3)
}
}
@keyframes updown { 0% {
opacity:0;
transform:translateY(60px)
}
100% {
opacity:1;
transform:translateY(0px)
}
}
@keyframes picslide { 0% {
transform:scale(0.5) translateX(-50%);
opacity:0
}
100% {
transform:scale(1) translateX(-50%);
opacity:1
}
}
@keyframes picslide3 { 0% {
transform:scale(0.9) translate(-50%, -50%);
opacity:0
}
100% {
transform:scale(1) translate(-50%, -50%);
opacity:1
}
}
@keyframes picslide2 { 0% {
transform:scale(0.8);
opacity:0
}
100% {
transform:scale(1);
opacity:1
}
}
@keyframes curmove { 0% {
transform:translateY(20px)
}
100% {
transform:translateY(5px)
}
}
@keyframes opa { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes line { 0% {
width:0px;
height:0px;
opacity:0;
border-radius:50%
}
80% {
width:100%;
height:100%;
opacity:1;
border-radius:0%
}
90% {
width:100%;
height:100%;
opacity:0
}
100% {
width:0%;
height:0%;
opacity:0
}
}
.header { width: 100%; position: fixed; left: 0px; top: 0px; z-index: 1000; background: #fff; height: 56px; line-height: 56px; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.02) }
.header-center { width: 75%; height: 100%; margin: 0px auto }
.logo { float: left; width: 146px; height: 100%; overflow: hidden }
.logo a { width: 100%; height: 100%; display: block; overflow: hidden; position: relative }
.logo img { width: auto; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100% }
.logo a:hover { transform: translateY(3px) }
.header-right { float: right; width: auto; height: 100% }
.header-right ul, .header-right ul li { float: left; width: auto; height: 100% }
.header-right ul li { margin-left: 40px; padding: 0px 5px; position: relative }
.header-right ul li:before { width: 0%; height: 2px; content: ""; position: absolute; left: 0px; bottom: 0px; background: #0d6a89 }
.header-right ul li span a { font-size: 16px; color: #7d7d7d }
.header-right ul li.active span a, .header-right ul li:hover span a { color: #0d6a89 }
.header-right ul li.active:before, .header-right ul li:hover:before { width: 100% }
.header-right ul li:nth-child(3) { position: static }
.header-phone { float: left; width: auto; margin-left: 60px; height: 56px; line-height: 56px; overflow: hidden; padding-left: 32px; background: url("../images/icon-1.png") no-repeat left center; font-size: 16px; color: #0d6a89; font-weight: bold }
.header-phone a { color: #0d6a89 }
.header-lang { float: left; width: 22px; height: 100%; margin-left: 40px; background: url("../images/icon-2.png") no-repeat center; background-size: 100% }
.header-lang a { width: 100%; height: 100%; display: block; overflow: hidden }
.header-lang:hover { transform: translateY(3px) }
.header-langsj { display: none }
.sub-nav { width: 280px; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%) scale(0); transform-origin: top center; opacity: 0; visibility: hidden; top: 56px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; box-shadow: 0px 3px 12px 4px rgba(0,0,0,0.03) }
.sub-body { width: 100%; margin: 0px auto; background: #fff; border-radius: 6px; padding: 30px 30px 36px; box-sizing: border-box }
.sub-body a { width: 100%; overflow: hidden; height: 46px; display: flex; justify-content: flex-start; box-sizing: border-box; padding-left: 50px; align-items: center; border-bottom: 2px #c5c5c5 dotted }
.sub-body em { width: 23px; height: 23px; display: block; position: relative; margin-right: 15px }
.sub-body em img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0 }
.sub-body em img:last-child { opacity: 1 }
.sub-body p { width: auto; overflow: hidden; font-size: 18px; color: #4a4a4a }
.sub-body a:hover em img { opacity: 1 }
.sub-body a:hover em img:last-child { opacity: 0 }
.sub-body a:hover p { color: #0a6b87 }
.sub-body2 { width: 100%; margin: 0px auto; background: #fff; border-radius: 6px; padding: 30px 30px 36px; box-sizing: border-box }
.sub-body2 a { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; box-sizing: border-box; align-items: center; border-bottom: 2px #c5c5c5 dotted; padding: 20px 0px }
.sub-body2 em { width: 48px; height: 30px; display: block; position: relative; margin-right: 15px }
.sub-body2 em img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1 }
.sub-body2 em img:last-child { opacity: 0 }
.sub-body2 p { width: 100px; overflow: hidden; font-size: 18px; color: #6C6C6C; line-height: 22px; position: relative; padding-left: 0px !important }
.sub-body2 a:hover em img { opacity: 0 }
.sub-body2 a:hover em img:last-child { opacity: 1 }
.sub-body2 a:hover p { color: #0a6b87 }
.sub-body2 a:hover p:hover:before { background: #0a6b87 }
.sub-nav3 { width: 75vw; overflow: hidden; position: absolute; left: calc((100% - 75%)/2); transform: scale(0); transform-origin: top center; opacity: 0; visibility: hidden; top: 56px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; box-shadow: 0px 3px 12px 4px rgba(0,0,0,0.03) }
.sub-body3 { width: 100%; margin: 0px auto; background: #fff; border-radius: 6px; padding: 30px 30px 36px; box-sizing: border-box; box-sizing: border-box; padding: 3vw 12vw }
.sub-content3 { width: 100%; overflow: hidden; display: flex; justify-content: space-between }
.sub-3item { width: 27%; overflow: hidden }
.sub-3name { width: 100%; overflow: hidden; text-align: center; font-size: 16px; line-height: normal }
.sub-3name em { font-size: 20px; margin-right: 12px }
.sub-3name a { color: #333 }
.sub-3name a:hover { color: #0d6a89 }
.sub-3pic { width: 100%; overflow: hidden; border-radius: 6px; background: #f1f1f1; margin-top: 15px; padding: 35px 0px }
.sub-3pic em { width: 100%; height: 6vw; overflow: hidden; position: relative; display: block }
.sub-3pic em img { width: auto; height: auto; max-width: 90%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.sub-3pic p { width: 100%; overflow: hidden; text-align: center; line-height: normal; font-size: 14px; margin-top: 40px }
.sub-3pic a { color: #333 }
.sub-3pic a:hover { color: #0d6a89 }
.sub-3cont { width: 100%; overflow: hidden; margin-top: 10px; line-height: normal }
.sub-3list { width: 100%; overflow: hidden; margin-top: 10px }
.sub-3list em { float: left; width: 30px; line-height: 22px; font-size: 14px }
.sub-3list em a { color: #333 }
.sub-3list em a:hover { color: #0d6a89 }
.sub-3list p { float: left; width: calc(100% - 30px); line-height: 22px; font-size: 12px }
.sub-3list p a { float: left; width: auto; overflow: hidden; margin-left: 6px; color: #333 }
.sub-3list p a:hover { color: #0d6a89 }
.header-right ul li:hover .sub-nav3 { opacity: 1; visibility: visible; transform: scale(1) }
.header-right ul li:hover .sub-nav { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1) }
.menu { display: none }
.sub-3cont, .sub-3pic p { display: none !important }
.footer { width: 100%; overflow: hidden; background: url("../images/bg-1.jpg") no-repeat; background-size: cover; box-sizing: border-box; padding: 63px calc((100% - 75%)/2) 45px }
.footer-item { float: left; width: auto; overflow: hidden; margin-right: 70px }
.footer-item .h3 { width: 100%; overflow: hidden; position: relative; padding-bottom: 12px }
.footer-item .h3:before { width: 0%; height: 3px; content: ""; position: absolute; left: 0px; bottom: 0px; border-radius: 2px; background: #0d6a89 }
.footer-item .h3 a { font-size: 20px; color: #727373; font-weight: bold }
.footer-item .h3:hover:before { width: 100% }
.footer-item .h3:hover a { color: #0d6a89 }
.footer-item ul { width: 100%; overflow: hidden; margin-top: 10px }
.footer-item ul li { width: 100%; overflow: hidden; line-height: 38px }
.footer-item ul li a { font-size: 16px; color: #727373 }
.footer-item ul li a:hover { color: #0d6a89 }
.footer-right { float: right; width: auto; overflow: hidden }
.footer-phone { width: 100%; overflow: hidden }
.footer-phone span { width: 100%; display: block; overflow: hidden; padding-right: 66px; background: url("../images/icon-4.png") no-repeat right center; height: 53px; line-height: 53px; text-align: right; font-size: 28px; color: #0d6a89; box-sizing: border-box }
.footer-phone p { width: 100%; display: block; overflow: hidden; text-align: right; font-size: 58px; color: #0d6a89; font-weight: bold; margin-top: 5px }
.footer-phone p a { color: #0d6a89 }
.footer-wx { width: 100%; overflow: hidden; margin-top: 12px; display: flex; justify-content: flex-end; flex-wrap: wrap }
.footer-wx p { float: right; width: auto; overflow: hidden }
.footer-wx img { width: 136px; overflow: hidden; height: auto; border: 1px #b5bfcb solid; border-radius: 2px; display: block }
.footer-wx span { width: 100%; overflow: hidden; text-align: center; display: block; text-align: center; font-size: 14px; color: #727373; margin-top: 20px }
.footer-beian { float: left; width: 100%; overflow: hidden; text-align: right; margin-top: 90px }
.footer-beian a { font-size: 12px; color: #727373; margin-left: 10px }
.footer-beian a:hover { color: #0d6a89 }
.leaf-right { width: auto; position: fixed; right: 4px; bottom: 10%; z-index: 234567 }
.leaf-item { foat: left; width: 57px; height: 57px; margin-top: 2px; background: #6d6d6e; cursor: pointer; position: relative; border-radius: 4px }
.leaf-item:hover { background: #0d6a89 }
.leaf-item samp { width: 100%; height: 100%; display: block; overflow: hidden; position: relative }
.leaf-item samp img { width: auto; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.leaf-phone { width: 180px; height: 60px; line-height: 60px; position: absolute; right: 75px; top: 0px; background: #fff; border-radius: 12px; padding-left: 20px; font-size: 22px; color: #222; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.1); transform-origin: right center; opacity: 0; transform: scale(0) }
.leaf-phone:before { width: auto; content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border-left: 10px #fff solid; border-top: 10px transparent solid; border-bottom: 10px transparent solid }
.leaf-item:hover .leaf-phone, .leaf-item:hover .leaf-wx { opacity: 1; transform: scale(1) }
.leaf-item a { color: #222 }
.leaf-wx { width: 80px; position: absolute; right: 70px; top: 0px; background: #fff; padding: 10px; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.1); transform-origin: right center; opacity: 0; transform: scale(0) }
.leaf-wx:before { width: auto; content: ""; position: absolute; right: -7px; top: 26%; transform: translateY(-50%); border-left: 10px #fff solid; border-top: 10px transparent solid; border-bottom: 10px transparent solid }
.leaf-wx img { float: left; width: 100%; height: auto }
.content { width: 100%; overflow: hidden }
.banner { width: 100%; overflow: hidden; margin-top: 56px; position: relative }
.banner .swiper-slide { position: relative }
.banner .swiper-slide samp { width: 100%; height: 100%; display: block; overflow: hidden; z-index: 12; position: relative }
.banner .swiper-slide samp a { width: 100%; height: 100%; display: block; overflow: hidden }
.banner .swiper-slide samp img { width: 100%; height: auto; animation: suofang 40s linear infinite alternate }
.banner .swiper-slide:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 12 }
.banner-center { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12 }
.banner-center span { width: 100%; text-align: center; display: block }
.banner-center span img { width: 54.55%; height: auto }
.banner-center em { width: 100%; text-align: center; display: block; margin-top: 30px }
.banner-center em img { width: 47.4%; height: auto }
.banner-center p { width: 100%; text-align: center; display: block; margin-top: 8.6vw }
.banner-center p img { width: auto; height: auto }
.banner .swiper-button-prev { width: 39px; height: 39px; overflow: hidden; opacity: 1; left: 8% }
.banner .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-3-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.banner .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.banner .swiper-button-next { width: 39px; height: 39px; overflow: hidden; right: 8% }
.banner .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-3-1.png") no-repeat; background-size: 100% }
.banner .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.banner .swiper-button-prev:hover:before, .banner .swiper-button-next:hover:before { opacity: 0 }
.banner .swiper-button-prev:hover:after, .banner .swiper-button-next:hover:after { opacity: 1 }
.banner-cur { width: 22px; height: 124px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; background: url("../images/icon-37.png") no-repeat; background-size: 100%; z-index: 20; animation: curmove 1s ease infinite alternate }
.hcor { width: 100%; height: 68px; background: -webkit-linear-gradient(left, #0d6a89 76%, #44c1d1); background: -moz-linear-gradient(left, #0d6a89 76%, #44c1d1); background: -ms-linear-gradient(left, #0d6a89 76%, #44c1d1); background: -o-linear-gradient(left, #0d6a89 76%, #44c1d1); position: relative }
.hcor ul { width: 75%; height: 100%; margin: 0px auto; position: relative; z-index: 22 }
.hcor ul li { float: left; width: 33.33%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative }
.hcor ul li:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 2; background: -webkit-linear-gradient(left, #1da1c3, #09dbec); background: -moz-linear-gradient(left, #1da1c3, #09dbec); background: -ms-linear-gradient(left, #1da1c3, #09dbec); background: -o-linear-gradient(left, #1da1c3, #09dbec); opacity: 0 }
.hcor ul li samp { width: auto; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding-right: 20px; z-index: 20 }
.hcor ul li samp:before { width: 2px; height: 60%; content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background: #fff }
.hcor ul li samp img { width: auto; height: auto; max-height: 58% }
.hcor ul li span { width: auto; display: block; margin-left: 15px; font-size: 18px; color: #fff; position: relative; z-index: 20 }
.hcor ul li em { width: auto; display: block; margin-left: 10px; font-size: 14px; color: #fff; position: relative; z-index: 20 }
.hcor ul li:hover:before { opacity: 1 }
.hcor-pannel { width: 100%; height: 63px; background: #deecee; position: absolute; left: 0px; top: 68px; box-sizing: border-box; padding: 0px calc((100% - 75%)/2); opacity: 0; visibility: hidden }
.hcor-item { width: 100%; overflow: hidden; height: 100%; text-align: center; opacity: 0; transform: translateY(20px); position: absolute; left: 0px; top: 68px; z-index: 12; height: 63px; line-height: 63px }
.hcor-item a { font-size: 16px; color: #888; margin: 0px 5px }
.hcor-item a:hover { color: #0d6a89 }
.hcor:hover .hcor-pannel { opacity: 1; visibility: visible }
.hcor ul li:hover .hcor-item { opacity: 1; transform: translateY(0px) }
.hpro { width: 100%; overflow: hidden; height: 47.7vw; background: url("../images/bg-7.jpg") no-repeat; background-position: center; background-repeat: no-repeat; background-size: cover }
.hpro-center { width: 75%; overflow: hidden; margin: 11.7vw auto 0px; padding: 0px 135px; position: relative }
.hpro-item { width: 100%; height: 100%; overflow: hidden }
.hpro-left { float: left; width: 26%; text-align: right }
.hpro-type { float: left; width: 100%; overflow: hidden; font-size: 48px; color: #0d6a89; font-weight: bold; transform: translateY(60px); opacity: 0 }
.hpro-title { float: left; width: 100%; overflow: hidden; font-size: 18px; color: #777; transform: translateY(60px); opacity: 0 }
.hpro-title span { font-size: 36px; color: #0d6a89; font-weight: lighter; margin-left: 16px }
.hpro-subname { float: left; width: 100%; overflow: hidden; font-size: 24px; color: #0d6a89; margin-top: 35px; transform: translateY(60px); opacity: 0 }
.hpro-info { float: left; width: 100%; overflow: hidden; text-align: right; line-height: 30px; font-size: 14px; color: #777; margin-top: 20px; transform: translateY(60px); opacity: 0 }
.hpro-more { float: right; width: auto; margin-top: 54px; transform: translateY(60px); opacity: 0 }
.hpro-more a { width: 145px; height: 36px; line-height: 36px; background: url("../images/icon-7.png") no-repeat; background-size: 100%; overflow: hidden; display: block; font-size: 18px; color: #fff; text-align: center }
.hpro-more span { margin-left: 25px }
.hpro-more a:hover { transform: translateY(5px) }
.hpro-right { float: right; width: 68%; overflow: hidden; position: relative; text-align: center }
.hpro-right img { width: auto; height: auto; max-width: 74%; opacity: 0 }
.hpro .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.hpro .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.hpro .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.hpro .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.hpro .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.hpro .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.hpro .swiper-button-prev:hover:before, .hpro .swiper-button-next:hover:before { opacity: 0 }
.hpro .swiper-button-prev:hover:after, .hpro .swiper-button-next:hover:after { opacity: 1 }
.hpro-center .swiper-slide-active .hpro-type { animation: updown 0.8s ease 1; animation-fill-mode: forwards }
.hpro-center .swiper-slide-active .hpro-title { animation: updown 0.8s ease 0.1s 1; animation-fill-mode: forwards }
.hpro-center .swiper-slide-active .hpro-subname { animation: updown 0.8s ease 0.2s 1; animation-fill-mode: forwards }
.hpro-center .swiper-slide-active .hpro-info { animation: updown 0.8s ease 0.3s 1; animation-fill-mode: forwards }
.hpro-center .swiper-slide-active .hpro-more { animation: updown 0.8s ease 0.4s 1; animation-fill-mode: forwards }
.hpro-center .swiper-slide-active .hpro-right img { animation: picslide2 0.8s ease 1; animation-fill-mode: forwards }
.hsolve { width: 100%; overflow: hidden }
.hsolve-item { float: left; width: 25%; height: 100vh; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; flex-wrap: wrap; align-content: center; position: relative; z-index: 5 }
.hsolve-item:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 2 }
.hsolve-item:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 3; background: url("../images/bg-8.jpg") no-repeat; background-size: cover; opacity: 0 }
.hsolve-item:nth-child(1):before { background: rgba(56,170,204,0.95) }
.hsolve-item:nth-child(2):before { background: rgba(50,159,193,0.95) }
.hsolve-item:nth-child(3):before { background: rgba(30,133,160,0.95) }
.hsolve-item:nth-child(4):before { background: rgba(4,106,136,0.95) }
.hsolve-item samp { width: 100%; display: block; overflow: hidden; text-align: center; position: relative; z-index: 12; height: 111px }
.hsolve-item samp img { width: auto; height: auto; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.hsolve-item span { width: 100%; display: block; overflow: hidden; text-align: center; font-size: 42px; color: #fff; position: relative; z-index: 12; margin-top: 48px }
.hsolve-pannel { width: 100%; position: relative; z-index: 20; display: none }
.hsolve-info { width: 61%; overflow: hidden; margin: 20px auto 0px; line-height: 32px; font-size: 16px; color: #fff; padding-top: 46px; position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5 }
.hsolve-info:before { width: 100%; height: 3px; content: ""; position: absolute; left: 0px; top: 0px; background: #fff; border-radius: 2px }
.hsolve-more { width: 100% }
.hsolve-more a { width: 152px; height: 38px; line-height: 38px; margin: 100px auto 0px; overflow: hidden; background: url("../images/icon-29.png") no-repeat; background-size: 100%; display: block; text-align: center; font-size: 18px; color: #116f8c }
.hsolve-more em { margin-left: 20px }
.hsolve-item:hover:after { opacity: 1 }
.hsolve-more a:hover { transform: translateY(5px) }
.hyy { width: 100%; overflow: hidden; padding: 85px 0px 30px; background: url("../images/bg-6.jpg") no-repeat left bottom; background-size: 100% }
.hyy-content { width: 75%; overflow: hidden; padding: 0px 135px; margin: 90px auto 0px; position: relative }
.hyy-item { width: 100%; overflow: hidden; height: 100% }
.hyy-left { float: left; width: 36%; margin-top: 4.5vw }
.hyy-left .h4 { float: left; width: 100%; overflow: hidden; font-size: 48px; color: #106a87; font-weight: bold; transform: translateY(60px); opacity: 0 }
.hyy-left em { float: left; width: 100%; overflow: hidden; font-size: 32px; color: #106a87; margin-top: 10px; transform: translateY(60px); opacity: 0 }
.hyy-info { float: left; width: 100%; overflow: hidden; line-height: 36px; font-size: 18px; color: #5e6060; margin-top: 35px; transform: translateY(60px); opacity: 0 }
.hyy-more { float: left; width: auto; margin-top: 60px; transform: translateY(60px); opacity: 0 }
.hyy-more a { float: left; width: 145px; height: 36px; line-height: 36px; overflow: hidden; background: url("../images/icon-7.png") no-repeat; overflow: hidden; display: block; height: 100%; font-size: 18px; color: #fff; text-align: center }
.hyy-more span { margin-left: 25px }
.hyy-more a:hover { transform: translateY(5px) }
.hyy-right { float: right; width: 36.4vw; overflow: hidden; background-size: 100%; text-align: center; height: 31.66vw; position: relative }
.hyy-right img { width: auto; height: auto; max-width: 90%; max-height: calc(100% - 4.6vw); position: absolute; left: 50%; transform: translateX(-50%); bottom: 4.6vw; transform-origin: bottom left; opacity: 0 }
.hyy-content .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.hyy-content .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.hyy-content .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.hyy-content .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.hyy-content .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.hyy-content .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.hyy-content .swiper-button-prev:hover:before, .hyy-content .swiper-button-next:hover:before { opacity: 0 }
.hyy-content .swiper-button-prev:hover:after, .hyy-content .swiper-button-next:hover:after { opacity: 1 }
.hyy-content .swiper-slide-active .hyy-left .h4 { animation: updown 0.8s ease 1; animation-fill-mode: forwards }
.hyy-content .swiper-slide-active .hyy-left em { animation: updown 0.8s ease 0.1s 1; animation-fill-mode: forwards }
.hyy-content .swiper-slide-active .hyy-info { animation: updown 0.8s ease 0.2s 1; animation-fill-mode: forwards }
.hyy-content .swiper-slide-active .hyy-more { animation: updown 0.8s ease 0.3s 1; animation-fill-mode: forwards }
.hyy-content .swiper-slide-active .hyy-right img { animation: picslide 0.8s ease 1; animation-fill-mode: forwards }
.hyy-nav { width: 100%; overflow: hidden; margin-top: 48px; position: relative }
.hyy-nav:before { width: 100%; content: ""; height: 3px; position: absolute; left: 0px; top: 36px; background: url("../images/icon-23.png") no-repeat center; background-size: 100% }
.hyy-nav .swiper { width: 75%; margin: 0px auto }
.hyy-pannel { width: 100%; overflow: hidden; height: 100%; cursor: pointer }
.hyy-pannel em { width: 76px; height: 76px; display: block; margin: 0px auto; overflow: hidden; position: relative; transform: scale(0.65) }
.hyy-pannel em:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; border-radius: 50%; box-sizing: border-box; border: 2px #c3c8ca dashed }
.hyy-pannel em samp { width: 70%; height: 70%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #d7d9d9; border-radius: 50% }
.hyy-pannel em samp:before { width: 40%; height: 40%; display: block; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #5e6060; border-radius: 50% }
.hyy-pannel span { width: 100%; display: block; overflow: hidden; font-size: 24px; color: #5e6060; text-align: center; margin-top: 20px }
.hyy-nav .swiper-slide.active .hyy-pannel em { transform: scale(1) }
.hyy-nav .swiper-slide.active .hyy-pannel em:before { border: 2px #146d89 dashed; animation: zhuanquan 12s linear infinite }
.hyy-nav .swiper-slide.active .hyy-pannel em samp { background: #b3d6e0 }
.hyy-nav .swiper-slide.active .hyy-pannel em samp:before { background: #106a87 }
.hyy-nav .swiper-slide.active .hyy-pannel span { color: #106a87 }
.hcase { width: 100%; overflow: hidden; padding-top: 100px }
.hcase-content { width: 100%; overflow: hidden; position: relative; margin-top: 50px }
.hcase-top { width: 100%; overflow: hidden; position: relative }
.hcase-top .swiper-slide { position: relative }
.hcase-top .swiper-slide:before { width: 90%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 12; background: -webkit-linear-gradient(left, rgba(47,144,173,0.95) 30%, rgba(47,144,173,0)); background: -moz-linear-gradient(left, rgba(47,144,173,0.95) 30%, rgba(47,144,173,0)); background: -ms-linear-gradient(left, rgba(47,144,173,0.95) 30%, rgba(47,144,173,0)); background: -o-linear-gradient(left, rgba(47,144,173,0.95) 30%, rgba(47,144,173,0)) }
.hcase-top .swiper-slide img { width: 100%; height: auto }
.hcase-cont { width: 75%; position: absolute; left: 50%; transform: translateX(-50%); top: 9vw; z-index: 15 }
.hcase-cont .h3 { float: left; width: 100%; overflow: hidden; font-size: 40px; color: #fff; font-weight: bold; transform: translateY(60px); opacity: 0 }
.hcase-info { float: left; width: 780px; overflow: hidden; line-height: 42px; font-size: 24px; color: #fff; font-weight: lighter; margin-top: 36px; transform: translateY(60px); opacity: 0 }
.hcase-more { float: left; width: 100%; margin-top: 50px; transform: translateY(60px); opacity: 0 }
.hcase-more a { width: 145px; height: 36px; line-height: 36px; overflow: hidden; background: url("../images/icon-129.png") no-repeat; display: block; text-align: center; font-size: 18px; color: #116f8c }
.hcase-more span { margin-left: 25px }
.hcase-more a:hover { transform: translateY(5px) }
.hcase-top .swiper-slide-active .hcase-cont .h3 { animation: updown 0.8s ease 1; animation-fill-mode: forwards }
.hcase-top .swiper-slide-active .hcase-info { animation: updown 0.8s ease 0.1s 1; animation-fill-mode: forwards }
.hcase-top .swiper-slide-active .hcase-more { animation: updown 0.8s ease 0.2s 1; animation-fill-mode: forwards }
.hcase-bottom { width: 75%; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); z-index: 15; bottom: 2px; display: flex; justify-content: space-between }
.hcase-item { flex: 1; margin-right: 1px; height: 100px; overflow: hidden; background: #fff; border-radius: 5px 5px 0px 0px; position: relative; margin-top: 64px; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; align-content: center }
.hcase-item:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/bg-5.jpg") no-repeat; background-size: cover; opacity: 0 }
.hcase-item:last-child { margin-right: 0px }
.hcase-item.active { height: 164px; margin-top: 0px }
.hcase-item.active:before { opacity: 1 }
.hcase-item samp { width: 100%; height: 0px; display: block; overflow: hidden; position: relative; z-index: 20 }
.hcase-item samp img { width: auto; height: auto; position: absolute; max-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.hcase-item.active samp { height: 60px }
.hcase-item span { width: 27px; display: block; overflow: hidden; position: relative; z-index: 20 }
.hcase-item span img { width: 100%; height: auto }
.hcase-item.active span { width: 0px }
.hcase-item p { width: auto; overflow: hidden; font-size: 24px; color: #5e6060; margin-left: 10px; position: relative; z-index: 20 }
.hcase-item.active p { color: #fff; margin-top: 10px }
.hnews { width: 100%; overflow: hidden; background: url("../images/bg-4.jpg") no-repeat center; background-size: cover; padding: 110px 0px }
.hnews-head { width: 100%; display: block; overflow: hidden; text-align: center }
.hnews-center { width: auto; overflow: hidden; position: relative; display: inline-flex; justify-content: space-between; align-items: center; padding-bottom: 12px }
.hnews-center:before { width: 100%; content: ""; position: absolute; left: 0px; bottom: 0px; height: 4px; background: #0d6a89; border-radius: 2px }
.hnews-center samp { width: auto; display: block; overflow: hidden; margin-right: 12px }
.hnews-center .h3 { width: auto; overflow: hidden; font-size: 48px; color: #5e6060 }
.hnews-content { width: calc(75% + 20px); overflow: hidden; margin: 140px auto 0px; padding: 0px 135px; position: relative }
.hnews-content .swiper { padding: 0px 10px 90px; box-sizing: border-box }
.hnews-content .swiper-slide { background: #ffff; border-radius: 6px; overflow: hidden; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.02) }
.hnews-content a { width: 100%; height: 100%; overflow: hidden; display: block }
.hnews-pic { width: 100%; height: 16vw; overflow: hidden; border-radius: 6px }
.hnews-pic img { width: 100%; height: 100%; object-fit: cover }
.hnews-content a:hover img { transform: scale(1.05) }
.hnews-cont { width: 100%; overflow: hidden; box-sizing: border-box; padding: 2.6vw }
.hnews-cont em { float: left; width: 100%; padding-left: 24px; font-size: 14px; color: #5e6060; background: url("../images/icon-10.png") no-repeat left center }
.hnews-cont span { float: left; width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 16px; color: #5e6060; margin-top: 18px }
.hnews-cont samp { float: right; width: 24px; height: 24px; overflow: hidden; position: relative; margin-top: 44px }
.hnews-cont samp:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-9.png") no-repeat center; background-size: 100% }
.hnews-cont samp:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-9-1.png") no-repeat center; background-size: 100%; opacity: 0 }
.hnews-content a:hover .hnews-cont span { color: #0d6a89; transform: translateY(7px) }
.hnews-content a:hover .hnews-cont samp:before { opacity: 0 }
.hnews-content a:hover .hnews-cont samp:after { opacity: 1 }
.hnews-more { width: 145px; height: 36px; line-height: 36px; overflow: hidden; margin: 0px auto; background: url("../images/icon-7.png") no-repeat }
.hnews-more a { width: 100%; overflow: hidden; display: block; height: 100%; font-size: 18px; color: #fff; text-align: center }
.hnews-more span { margin-left: 25px }
.hnews-more:hover { transform: translateY(5px) }
.hnews-content .swiper-slide:hover { box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.04) }
.hnews-content .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.hnews-content .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.hnews-content .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.hnews-content .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.hnews-content .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.hnews-content .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.hnews-content .swiper-button-prev:hover:before, .hnews-content .swiper-button-next:hover:before { opacity: 0 }
.hnews-content .swiper-button-prev:hover:after, .hnews-content .swiper-button-next:hover:after { opacity: 1 }
.hform { width: 100%; overflow: hidden; background: url("../images/bg-2.jpg") no-repeat center; background-size: cover; padding: 66px 0px 50px }
.hform-head { width: 100%; overflow: hidden; text-align: center }
.hform form { width: 75%; overflow: hidden; margin: 32px auto 0px; display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 38px }
.hform-input { width: 32.8%; overflow: hidden; margin-top: 13px; background: #fff; border-radius: 10px; height: 57px; line-height: 57px; box-sizing: border-box; padding: 0px 30px }
.hform-input input { width: 100%; height: 100%; overflow: hidden; font-size: 21px; color: #0d6a89; background: none }
.hform-input input::placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-input input::-webkit-input-placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-input input::-ms-input-placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-input input::-moz-placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-input:hover, .hform-text:hover { box-shadow: 0px 0px 5px 2px #68f2f8 inset }
.hform-text { width: 100%; overflow: hidden; margin-top: 13px; background: #fff; border-radius: 10px }
.hform-text textarea { width: 100%; overflow: hidden; line-height: 24px; height: 100px; font-size: 21px; color: #0d6a89; background: none; box-sizing: border-box; padding: 15px 30px }
.hform-text textarea::placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-text textarea::-webkit-input-placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-text textarea::-ms-input-placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-text textarea::-moz-placeholder {
color:#0d6a89 !important;
opacity:1
}
.hform-button { width: 100%; overflow: hidden; margin-top: 13px; background: url("../images/bg-3.jpg"); border-radius: 10px; height: 57px; line-height: 57px; background-size: 100% }
.hform-button input { width: 100%; height: 100%; background: none; cursor: pointer; font-size: 24px; color: #fff }
.hform-button:hover { transform: translateY(4px) }
.hform-info { width: 75%; overflow: hidden; margin: 0px auto; line-height: 34px; font-size: 16px; color: #fff }
.banner-news { width: 100%; overflow: hidden; position: relative; margin-top: 56px }
.banner-news img { width: 100%; height: auto; animation: suofang 40s linear infinite alternate }
.news-col { width: 100%; overflow: hidden; height: 64px; line-height: 64px; margin-top: -64px; background: rgba(232,253,254,0.96); position: relative; z-index: 12 }
.news-col ul { width: 100%; height: 100%; display: flex; justify-content: center }
.news-col ul li { width: auto; height: 100%; overflow: hidden; margin: 0px 45px }
.news-col ul li a { font-size: 14px; color: #4a4a4a; cursor: pointer }
.news-col ul li.active a, .news-col ul li:hover a { color: #006b88 }
.bread { width: 75%; overflow: hidden; margin: 32px auto 0px; font-size: 14px; color: #6c6c6c; line-height: 24px; background: url("../images/icon-46.png") no-repeat left center; padding-left: 30px; box-sizing: border-box }
.bread a { color: #6c6c6c; margin: 0px 5px }
.bread a:hover { color: #0d6a89 }
.news { width: 100%; overflow: hidden; padding: 32px 0px 80px }
.news-1 { width: 75%; overflow: hidden; margin: 0px auto; box-shadow: 0px 0px 12px 5px #F0F2F4; border-radius: 10px }
.news-1 a { width: 100%; height: 100%; overflow: hidden; display: block; display: flex; justify-content: space-between; align-items: center }
.news-1left { width: 63.4%; overflow: hidden; border-radius: 10px }
.news-1left img { width: 100%; height: auto }
.news-1left:hover img { transform: scale(1.05) }
.news-1right { width: calc(100% - 63.4%); box-sizing: border-box; padding: 0px 48px }
.news-1right em { float: left; width: 100%; overflow: hidden; box-sizing: border-box; padding-left: 56px; background: url("../images/icon-69.png") no-repeat left center; font-size: 28px; color: #207B97; letter-spacing: 1.4px }
.news-1right span { float: left; width: 100%; overflow: hidden; font-size: 32px; color: #136F8A; letter-spacing: 1.33px; line-height: 44px; margin-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }
.news-1right p { float: left; width: 100%; overflow: hidden; line-height: 36px; font-size: 18px; color: #7C7C7C; margin-top: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4 }
.news-1right samp { float: right; width: 39px; height: 39px; overflow: hidden; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; margin-top: 4vw }
.news-1right samp:hover { transform: translateY(5px) }
.news-1:hover { box-shadow: 0px 1px 5px 2px #88e6ea }
.news-1:hover .news-1right span { transform: translateX(10px) }
.news-list { width: 75%; margin: 0px auto; display: flex; flex-wrap: wrap }
.news-item { float: left; width: 31.5%; overflow: hidden; margin: 64px 2.75% 0px 0px; box-shadow: 0px 0px 12px 5px #F0F2F4; border-radius: 6px; padding-bottom: 40px }
.news-item:nth-child(3n) { margin-right: 0px }
.news-item a { width: 100%; height: 100%; display: block; overflow: hidden }
.news-pic { width: 100%; position: relative; height: 15vw }
.news-pic samp { width: 100%; display: block; height: 100%; overflow: hidden; border-radius: 6px }
.news-pic img { width: 100%; height: 100%; object-fit: cover }
.news-pic p { width: 40px; height: 40px; position: absolute; right: 2vw; bottom: -20px; background: url("../images/icon-71.png") no-repeat; background-size: 100%; z-index: 1; opacity: 0; transform: scale(0.5) }
.news-item:hover .news-pic p { opacity: 1; transform: scale(1) }
.news-item:hover .news-pic img { transform: scale(1.05) }
.news-item em { width: 80%; display: block; overflow: hidden; margin: 24px auto 0px; font-size: 14px; color: #727373; padding-left: 22px; box-sizing: border-box; background: url("../images/icon-10.png") no-repeat left center }
.news-item span { width: 80%; display: block; overflow: hidden; margin: 24px auto 0px; font-size: 20px; color: #727373; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }
.news-item:hover { box-shadow: 0px 1px 5px 2px #88e6ea }
.news-item:hover span { color: #0d6a89; transform: translateX(10px) }
.news-page { width: 100%; overflow: hidden; margin-top: 90px; text-align: center; display: flex; justify-content: center }
.news-page a { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; display: block; margin: 0px 12px; border: 1px #979797 solid; font-size: 20px; color: #727373 }
.news-page a.active, .news-page a:hover { background: #0D99C6; color: #fff; border-color: #0D99C6 }
.news-page a:first-child, .news-page a:last-child { width: auto; border: none }
.news-page a:first-child:hover, .news-page a:last-child:hover { border-radius: 0px; background: none; color: #0D99C6 }
.banner-ver { width: 75%; position: absolute; left: 50%; transform: translateX(-50%); height: 25vw; z-index: 12; top: 0px; display: flex; justify-content: center; flex-wrap: wrap; align-content: center }
.banner-ver .h1 { width: 100%; overflow: hidden; text-align: center; font-size: 56px; color: #fff }
.banner-1 { width: 100%; text-align: center; font-size: 20px; color: #fff; margin-top: 50px; white-space: pre }
.detail-body { width: 75%; overflow: hidden; margin: -14vw auto 0px; border-radius: 10px; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.04); position: relative; z-index: 12; background: #fff; box-sizing: border-box; padding: 4vw; line-height: 48px; font-size: 21px; color: #7C7C7C }
.detail-body img { width: auto; height: auto; max-width: 100% }
.detail-2 { width: 145px; height: 36px; line-height: 36px; overflow: hidden; background: url("../images/icon-7.png") no-repeat; overflow: hidden; display: block; height: 100%; font-size: 18px; color: #fff; text-align: center; margin: 80px auto 48px }
.detail-2 a { width: 100%; height: 100%; display: block; overflow: hidden; color: #fff }
.detail-2 span { margin-left: 26px }
.detail-2:hover { transform: translateY(5px) }
.detail-3 { width: 100%; overflow: hidden; padding-bottom: 80px; display: flex; justify-content: center }
.detail-3 span { width: auto; overflow: hidden; position: relative; max-width: 32%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0px 30px }
.detail-3 span:first-child:before { width: 4px; height: 100%; content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background: #14b2c4; border-radius: 2px }
.detail-3 span a { font-size: 20px; color: #7C7C7C }
.detail-3 span a:hover { color: #0d6a89 }
.case-1 { width: 75%; margin: 0px auto }
.case-1left { float: left; width: 63.5%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0px 4px 12px 5px rgba(0,0,0,0.06) }
.case-1left a { width: 100%; height: 100%; overflow: hidden; display: block }
.case-1pic { width: 100%; height: 26.6vw; position: relative }
.case-1pic samp { float: left; width: 100%; height: 100%; overflow: hidden; border-radius: 8px }
.case-1pic samp img { width: 100%; height: 100%; object-fit: cover }
.case-1pic em { width: 81px; height: 81px; position: absolute; right: 4vw; bottom: -40px; background: url("../images/icon-71.png") no-repeat; background-size: 100%; z-index: 1; opacity: 0; transform: scale(0.5) }
.case-1left:hover img, .case-1right:hover img { transform: scale(1.05) }
.case-1left:hover .case-1pic em, .case-1right:hover .case-1pic em { opacity: 1; transform: scale(1) }
.case-1cont { width: 100%; overflow: hidden; padding: 1.4vw 1vw 1.4vw 3vw }
.case-1cont em { float: left; width: 42px; height: 42px; overflow: hidden; position: relative }
.case-1cont em:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-72.png") no-repeat center; background-size: 100%; z-index: 1 }
.case-1cont em:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-72-1.png") no-repeat center; background-size: 100%; opacity: 0 }
.case-1cont span { float: left; width: 80%; line-height: 42px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 28px; color: #838282; margin-left: 20px }
.case-1left:hover, .case-1right:hover { box-shadow: 0px 1px 5px 2px #88e6ea }
.case-1left:hover .case-1cont span, .case-1right:hover .case-1cont span { color: #106A87 }
.case-1left:hover .case-1cont em:before, .case-1right:hover .case-1cont em:before { opacity: 0 }
.case-1left:hover .case-1cont em:after, .case-1right:hover .case-1cont em:after { opacity: 1 }
.case-1right { float: right; width: 35.5%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.06) }
.case-1right a { width: 100%; height: 100%; overflow: hidden; display: block }
.case-1right .case-1cont { width: 100%; overflow: hidden; padding: 1.4vw 1vw 1.4vw 2vw }
.case-1right .case-1pic em { right: 2vw }
.case-1right .case-1pic em { width: 40px; height: 40px; bottom: -20px }
.case-2 { width: 75%; margin: 0px auto; display: flex; flex-wrap: wrap }
.case-2item { float: left; width: 32%; overflow: hidden; margin: 64px 2% 0px 0px; box-shadow: 0px 0px 12px 5px #F0F2F4; border-radius: 8px }
.case-2item:nth-child(3n) { margin-right: 0px }
.case-2item a { width: 100%; height: 100%; display: block; overflow: hidden }
.case-2pic { width: 100%; height: 16vw; position: relative }
.case-2pic samp { float: left; width: 100%; height: 100%; overflow: hidden; border-radius: 8px }
.case-2pic samp img { width: 100%; height: 100%; object-fit: cover }
.case-2pic em { width: 40px; height: 40px; position: absolute; right: 2vw; bottom: -20px; background: url("../images/icon-71.png") no-repeat; background-size: 100%; z-index: 1; opacity: 0; transform: scale(0.5) }
.case-2item:hover img { transform: scale(1.03) }
.case-2item:hover .case-2pic em { opacity: 1; transform: scale(1) }
.case-2cont { width: 100%; overflow: hidden; padding: 1.4vw; box-sizing: border-box }
.case-2cont em { float: left; width: 29px; height: 29px; overflow: hidden; position: relative }
.case-2cont em:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-72.png") no-repeat center; background-size: 100%; z-index: 1 }
.case-2cont em:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-72-1.png") no-repeat center; background-size: 100%; opacity: 0 }
.case-2cont span { float: left; width: 80%; line-height: 29px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 24px; color: #838282; margin-left: 15px }
.case-2item:hover { box-shadow: 0px 1px 5px 2px #88e6ea }
.case-2item:hover .case-2cont span { color: #106A87 }
.case-2item:hover .case-2cont em:before { opacity: 0 }
.case-2item:hover .case-2cont em:after { opacity: 1 }
.banner-wz2 { width: 60%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; padding-left: 35px; font-size: 58px; color: #fff; font-weight: 400; letter-spacing: 3.05px; text-shadow: 0 2px 4px #0094C4; line-height: 81px; margin-top: calc(-64px/2) }
.banner-wz2:before { width: 7px; height: 87%; content: ""; left: 0px; position: absolute; top: 50%; transform: translateY(-50%); background: #67F2F8; border-radius: 10px }
.banner-wz2 span { width: 100%; display: block }
.case-info { width: 100%; overflow: hidden; padding: 60px 0px 130px }
.cinfo-1 { width: 75%; overflow: hidden; margin: 0px auto }
.cinfo-1 .h1 { width: 100%; overflow: hidden; text-align: center; font-size: 48px; color: #6C6C6C; letter-spacing: 2.48px }
.cinfo-1pic { width: 100%; overflow: hidden; margin-top: 58px }
.cinfo-1pic img { width: 100%; height: auto }
.cinfo-1 .h3 { width: 100%; overflow: hidden; text-align: center; font-size: 48px; color: #6C6C6C; letter-spacing: 2.48px; margin-top: 56px }
.cinfo-info { width: 90%; margin: 24px auto 0px; line-height: 48px; font-size: 21px; color: #7C7C7C; letter-spacing: 1px; text-align: justify }
.cinfo-body { width: 100%; overflow: hidden }
.cinfo-body img { width: auto; height: auto; max-width: 100% }
.cinfo-body p { margin-top: 48px }
.cinfo-2 { width: 100%; overflow: hidden; margin-top: 100px }
.cinfo-2content { width: 75%; overflow: hidden; margin: 100px auto 0px; position: relative; padding: 0px 135px }
.cinfo-2content .case-2item { width: 100%; margin: 0px }
.cinfo-2 .swiper { padding: 20px 10px }
.cinfo-2 .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.cinfo-2 .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.cinfo-2 .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.cinfo-2 .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.cinfo-2 .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.cinfo-2 .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.cinfo-2 .swiper-button-prev:hover:before, .cinfo-2 .swiper-button-next:hover:before { opacity: 0 }
.cinfo-2 .swiper-button-prev:hover:after, .cinfo-2 .swiper-button-next:hover:after { opacity: 1 }
.banner-wz { width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; color: #fff }
.banner-wz .h3 { width: 100%; overflow: hidden; font-size: 64px; font-weight: bold }
.banner-wz p { width: 100%; overflow: hidden; font-size: 34px; line-height: 48px; font-weight: lighter; margin-top: 30px }
.about { width: 100%; overflow: hidden }
.about-1 { width: 75%; overflow: hidden; margin: 0px auto; padding: 100px 0px 90px }
.about-1pic { float: right; width: 42.6%; position: relative }
.about-1pic:before { width: 92%; height: 100%; content: ""; position: absolute; right: 0px; top: 0px; border-radius: 8px; background: #3096ae; overflow: hidden; z-index: 1 }
.about-1pic samp { width: 100%; display: block; overflow: hidden; border-radius: 8px; position: relative; z-index: 2; transform: translate(-45px, -45px) }
.about-1pic img { width: 100%; height: auto }
.about-1pic:hover img { transform: scale(1.05) }
.about-1pannel { float: left; width: 43%; overflow: hidden; margin-top: 30px }
.about-1content { float: left; width: 100%; overflow: hidden; position: relative }
.about-1item { width: 100%; overflow: hidden; position: absolute; left: 0px; top: 0px; z-index: 1; opacity: 0; line-height: 38px; font-size: 16px; color: #4a4a4a; height: 30vw }
.about-1item.active { opacity: 1; z-index: 2; position: relative }
.about-1item p { text-indent: 2em }
.about-1pannel ul { float: left; width: 86%; overflow: hidden; margin-top: 3vw; display: flex; justify-content: space-between }
.about-1pannel ul li { width: auto; font-size: 21px; color: #636363; padding-left: 20px; position: relative; padding-bottom: 10px; cursor: pointer }
.about-1pannel ul li:before { width: 9px; height: 9px; content: ""; position: absolute; left: 0px; top: 10px; border-radius: 50%; background: #4a4a4a }
.about-1pannel ul li:after { width: 0%; height: 3px; content: ""; position: absolute; left: 0px; bottom: 0px; border-radius: 2px; background: #0a6b87 }
.about-1pannel ul li.active { color: #0a6b87 }
.about-1pannel ul li.active:before { background: #0a6b87 }
.about-1pannel ul li.active:after { width: 100% }
.mCSB_inside>.mCSB_container { width: 100%; box-sizing: border-box; padding-right: 30px }
.about-1item.mCS_no_scrollbar .mCSB_inside>.mCSB_container { padding-right: 0px !important }
.mCSB_scrollTools { width: 4px }
.mCSB_scrollTools:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: #fff }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; background: #0d6a89; border-radius: 2px }
.about-2 { width: 100%; overflow: hidden }
.about-2 ul { width: 100%; overflow: hidden }
.about-2 ul li { float: left; width: calc(16% - 2px); overflow: hidden; margin-right: 2px; height: 160px; border-radius: 8px; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; color: #fff; box-sizing: border-box }
.about-2 ul li:last-child { margin-right: 0px }
.about-2 ul li:nth-child(1) { background: #6ec4dd; width: calc(26% - 2px); padding-left: 6% }
.about-2 ul li:nth-child(2) { background: #59bbd9 }
.about-2 ul li:nth-child(3) { background: #3aa0bf }
.about-2 ul li:nth-child(4) { background: #26859f }
.about-2 ul li:nth-child(5) { background: #106a87; width: 26%; padding-right: 6% }
.about-2center { width: auto; overflow: hidden }
.about-2center span { width: 100%; overflow: hidden; display: block; font-size: 50px; font-weight: bold }
.about-2center span em { font-weight: bold }
.about-2center p { width: 100%; overflow: hidden; display: block; font-size: 21px; position: relative; padding-bottom: 9px }
.about-2center p:before { width: 53px; height: 6px; content: ""; position: absolute; left: 0px; bottom: 0px; border-radius: 3px; background: #26dcf5 }
.about-3 { width: 100%; overflow: hidden; padding-top: 80px }
.about-3content { width: 75%; overflow: hidden; margin: 80px auto 0px; display: flex; justify-content: space-between }
.about-3item { width: 32.7%; overflow: hidden; background: #f4f5f6; border-radius: 10px; position: relative; cursor: pointer }
.about-3pic { float: left; width: 100%; overflow: hidden; position: relative; opacity: 0 }
.about-3pic:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 12; background: rgba(19,166,210,0.8) }
.about-3pic img { width: 100%; height: auto; position: relative; z-index: 1 }
.about-3cont { width: 80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20 }
.about-3cont samp { width: 100%; height: 9.9vw; display: block; position: relative }
.about-3cont samp img { width: auto; height: auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; max-height: 100%; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s }
.about-3cont samp img:last-child { opacity: 0 }
.about-3cont .h4 { width: 100%; overflow: hidden; text-align: center; border-bottom: 2px #979797 dotted; color: #5e6060; font-size: 48px; padding: 30px 0px; position: relative }
.about-3cont .h4:before { width: 0%; height: 1px; content: ""; position: absolute; left: 0px; bottom: 0px; background: #fff }
.about-3info { width: 100%; overflow: hidden; line-height: 36px; color: #5e6060; font-size: 20px; box-sizing: border-box; padding: 24px 7% 0px; min-height: 216px }
.about-3icon { width: 39px; height: 0px; overflow: hidden; margin: 20px auto 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100%; transform: scale(0) }
.about-3icon a { width: 100%; height: 100%; display: block; overflow: hidden }
.about-3item:hover .about-3pic { opacity: 1 }
.about-3item:hover .about-3cont samp img { opacity: 0; transform: translateX(-50%) rotateY(360deg) }
.about-3item:hover .about-3cont samp img:last-child { opacity: 1; transform: translateX(-50%) rotateY(360deg) }
.about-3item:hover .h4 { color: #fff; border-color: transparent }
.about-3item:hover .h4:before { width: 100% }
.about-3item:hover .about-3info { color: #fff }
.about-3item:hover .about-3icon { height: 39px; transform: scale(1) }
.about-4 { width: 100%; overflow: hidden; padding-top: 100px }
.about-4content { width: 100%; overflow: hidden; position: relative; margin-top: 80px; height: 44vw }
.about-4bg { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; animation: suofang 50s linear infinite alternate }
.about-4center { width: 75%; overflow: hidden; margin: 0px auto; height: 100%; position: relative; z-index: 12 }
.about-4item { width: 25%; overflow: hidden; height: 100%; float: left; box-sizing: border-box; border-left: 2px #fff solid; padding: 0px 2%; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap; align-content: center; -webkit-transition: all 0.9s ease 0s; -moz-transition: all 0.9s ease 0s; -ms-transition: all 0.9s ease 0s; -o-transition: all 0.9s ease 0s; transition: all 0.9s ease 0s }
.about-4item:last-child { border-right: 2px #fff solid }
.about-4item samp { width: 100%; overflow: hidden; height: 118px; position: relative; display: block }
.about-4item samp img { width: auto; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 100% }
.about-4item samp img:last-child { opacity: 0 }
.about-4item .h4 { width: 100%; text-align: center; overflow: hidden; padding: 30px 0px; font-size: 38px; color: #146b86; border-bottom: 2px transparent dotted }
.about-4model { width: 100%; overflow: hidden; margin-top: 20px; display: none }
.about-4model span { float: left; width: 100%; overflow: hidden; text-align: center; font-size: 36px; color: #fff }
.about-4model p { float: left; width: 100%; overflow: hidden; text-align: center; font-size: 20px; color: #fff; margin-top: 20px }
.about-4item:hover { background: #2aa8c9 }
.about-4item:hover samp img { opacity: 0 }
.about-4item:hover samp img:last-child { opacity: 1 }
.about-4item:hover .h4 { color: #fff; border-color: #fff }
.about-5 { width: 100%; overflow: hidden; background: url("../images/bg-11.jpg") no-repeat; background-size: cover; padding: 90px 0px 120px }
.about-5content { width: 75%; overflow: hidden; margin: 120px auto 0px; padding: 0px 135px; position: relative }
.about-5content .swiper { padding: 6px }
.about-5content .swiper-slide { overflow: hidden; background: #fff; height: 24vw; position: relative; border-radius: 9px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1); box-sizing: border-box; padding: 10px }
.about-5content .swiper-slide img { width: auto; height: auto; max-width: 100%; max-height: 100% }
.about-5content .swiper-slide:hover img { transform: scale(1.05) }
.about-5content .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.about-5content .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.about-5content .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.about-5content .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.about-5content .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.about-5content .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.about-5content .swiper-button-prev:hover:before, .about-5content .swiper-button-next:hover:before { opacity: 0 }
.about-5content .swiper-button-prev:hover:after, .about-5content .swiper-button-next:hover:after { opacity: 1 }
.about-5content .swiper-pagination { width: 100%; position: relative; margin-top: 100px }
.about-5content .swiper-pagination span { width: 35px; height: 5px; border-radius: 3px; background: #bbb; opacity: 1 }
.about-5content .swiper-pagination .swiper-pagination-bullet-active { background: #15b3c5 }
.about-6 { width: 100%; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0px 160px }
.about-6 .hnews-center .h3 { color: #fff }
.about-6 .hnews-center::before { background: #0da7cc }
.about-6content { width: 75%; overflow: hidden; margin: 150px auto 0px; padding: 0px 135px; position: relative }
.about-6content .swiper-slide { overflow: hidden; background: #fff; border-radius: 9px; height: 8vw }
.about-6content .swiper-slide img { width: auto; height: auto; max-width: 90%; max-height: 60% }
.about-6content .swiper-slide:hover img { transform: scale(1.05) }
.about-6content .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.about-6content .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.about-6content .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.about-6content .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.about-6content .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100% }
.about-6content .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.about-6content .swiper-button-prev:hover:before, .about-6content .swiper-button-next:hover:before { opacity: 0 }
.about-6content .swiper-button-prev:hover:after, .about-6content .swiper-button-next:hover:after { opacity: 1 }
.banner-wz3 { width: 100%; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; font-size: 78px; color: #FCFCFC; font-weight: 400; letter-spacing: 3.05px; margin-top: calc(-64px/2); letter-spacing: 2.29px; font-weight: bold; text-shadow: 0 8px 4px rgba(74,74,74,0.5) }
.banner-wz3 span { width: 100%; display: block; overflow: hidden }
.server { width: 100%; overflow: hidden; padding: 23px 0px 70px }
.ser-1 { width: 100%; overflow: hidden; margin: 0px auto }
.ser-1head { width: 100%; margin: 0px auto; text-align: center }
.ser-1head .h3 { width: auto; display: inline-block; overflow: hidden; font-size: 48px; color: #5E6060; padding-bottom: 12px; position: relative }
.ser-1head .h3:before { width: 100%; content: ""; position: absolute; left: 0px; bottom: 0px; height: 4px; background: #0d6a89; border-radius: 2px }
.ser-1head .h3 span { color: #136f8a }
.ser-1content { width: 75%; overflow: hidden; margin: 110px auto 0px; background: #F7F7F7; box-shadow: 0 2px 8px 0 rgba(74,74,74,0.25); border-radius: 10px; position: relative }
.ser-1content:hover { box-shadow: 0px 1px 5px 2px #88e6ea }
.ser-1left { float: right; width: 64.66%; overflow: hidden; border-radius: 10px; position: relative }
.ser-1left span { width: 100%; display: block; position: absolute; left: 0px; top: 0px; z-index: 1; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s }
.ser-1left span.active { position: relative; z-index: 12; opacity: 1 }
.ser-1left img { width: 100%; height: auto }
.ser-1left:hover img { transform: scale(1.05) }
.ser-1right { justify-content: center; flex-wrap: wrap; align-content: center; width: calc(100% - 64.66%); overflow: hidden; position: absolute; left: 0px; top: 0px; z-index: 12; height: 100%; display: flex }
.ser-1item { width: 80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; opacity: 0; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s }
.ser-1item.active { z-index: 12; opacity: 1 }
.ser-1item .h4 { float: left; width: 100%; overflow: hidden; font-size: 48px; color: #136F8A; letter-spacing: 2px }
.ser-1info { float: left; width: 100%; overflow: hidden; font-size: 16px; color: #7C7C7C; letter-spacing: 1px; text-align: justify; line-height: 30px; margin-top: 22px; max-height: 12.2vw }
.ser-1 ul { width: 100%; overflow: hidden; padding: 100px 0px; display: flex; justify-content: center }
.ser-1 ul li { width: auto; font-size: 21px; color: #636363; padding-left: 20px; position: relative; padding-bottom: 10px; cursor: pointer; margin: 0px 80px }
.ser-1 ul li:before { width: 9px; height: 9px; content: ""; position: absolute; left: 0px; top: 10px; border-radius: 50%; background: #4a4a4a }
.ser-1 ul li:after { width: 0%; height: 3px; content: ""; position: absolute; left: 0px; bottom: 0px; border-radius: 2px; background: #0a6b87 }
.ser-1 ul li.active { color: #0a6b87 }
.ser-1 ul li.active:before { background: #0a6b87 }
.ser-1 ul li.active:after { width: 100% }
.ser-2 { width: 100%; overflow: hidden; background: url("../images/bg-13.jpg") no-repeat; background-size: cover; padding: 40px 0px 60px }
.ser-2 .h3 { width: 100%; overflow: hidden; text-align: center; font-size: 66px; color: #0A6786 }
.ser-2content { width: 80.3%; overflow: hidden; margin: 114px auto 0px; position: relative }
.ser-2content img { width: 100%; height: auto }
.ser-2content span { float: left; width: 100%; overflow: hidden }
.ser-2content p { width: 100%; overflow: hidden; height: 100%; position: absolute; left: 0px; top: 0px; animation: opa 1s linear infinite alternate }
.ser-3 { width: 100%; overflow: hidden; padding: 90px 0px 100px }
.ser-3head { width: 100%; margin: 0px auto; text-align: center }
.ser-3 .h3 { width: 100%; overflow: hidden; font-size: 48px; color: #5E6060; padding-bottom: 12px; position: relative; text-align: center }
.ser-3 .h3:before { width: 280px; content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; height: 4px; background: #0d6a89; border-radius: 2px }
.ser-3list { width: 75%; margin: 130px auto 0px; overflow: hidden }
.ser-3item { width: 100%; overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center }
.ser-3item:nth-child(2n) { flex-direction: row-reverse }
.ser-3left { width: 50%; overflow: hidden; border-radius: 10px }
.ser-3left img { width: 100%; height: auto }
.ser-3left:hover img { transform: scale(1.05) }
.ser-3right { width: 50%; overflow: hidden; border-radius: 10px; box-sizing: border-box; padding: 0px 5% }
.ser-3right span { float: left; width: 100%; overflow: hidden; font-size: 46px; color: #5E6060; letter-spacing: 2px; font-weight: bold }
.ser-3info { float: left; width: 100%; overflow: hidden; font-size: 18px; color: #5E6060; letter-spacing: 0; text-align: justify; line-height: 38px; margin-top: 30px }
.ser-3right:hover span { color: #106A87; transform: translateX(15px) }
.ser-3right:hover .ser-3info { transform: translateY(10px) }
.ser-3item:nth-child(2n) .ser-3right span { text-align: right }
.ser-3item:nth-child(2n) .ser-3info { text-align: right }
.ser-4 { width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 120px 0px 100px }
.ser-4center { width: 75%; overflow: hidden; margin: 0px auto }
.ser-4 .h3 { width: 100%; overflow: hidden; font-size: 76px; color: #FFFFFF; letter-spacing: 0.93px; text-shadow: 0 1px 6px #1F7B1A; font-weight: bold }
.ser-4content { width: 100%; overflow: hidden; margin-top: 70px }
.ser-4item { float: left; width: auto; overflow: hidden; margin-right: 6vw }
.ser-4title { width: 100%; overflow: hidden }
.ser-4title samp { float: left; width: 63px; height: 63px; overflow: hidden; position: relative }
.ser-4title samp img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.ser-4title span { float: left; width: auto; line-height: 63px; overflow: hidden; font-size: 36px; color: #fff; letter-spacing: 0.8px; text-shadow: 0 2px 4px #269020; margin-left: 16px }
.ser-4item ul { width: 100%; overflow: hidden; margin-top: 30px }
.ser-4item ul li { width: 100%; line-height: 80px; font-size: 28px; letter-spacing: 0.67px; color: #fff; text-shadow: 0 2px 4px #269020 }
.ser-5 { display: none }
.dz { width: 100%; overflow: hidden }
.dz-1 { width: 100%; overflow: hidden; padding: 40px 0px 80px }
.dz-1info { width: 1250px; overflow: hidden; margin: 80px auto 0px; line-height: 40px; font-size: 16px; color: #626362 }
.dz-1content { width: 1250px; overflow: hidden; margin: 50px auto 0px }
.dz-1head { width: 100%; overflow: hidden; height: 50px; line-height: 50px; background: #119dad; text-align: center; font-size: 24px; color: #fff; border-bottom: 2px #a5d7dd solid }
.dz-1title { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; align-content: center; background: #15b3c5; position: relative; padding: 14px 0px }
.dz-1title:before { width: 2px; height: 100%; content: ""; position: absolute; left: 33.3%; top: 0px; background: #a5d7dd }
.dz-1title:after { width: 2px; height: 100%; content: ""; position: absolute; left: 66.6%; top: 0px; background: #a5d7dd }
.dz-1title span { width: 33.33%; display: block; overflow: hidden; font-size: 18px; color: #fff; text-align: center; box-sizing: border-box; padding: 0px 10px }
.dz-1content ul { width: 100%; overflow: hidden; box-sizing: border-box; border: 2px #dedede solid; border-bottom: none; position: relative }
.dz-1content ul:before { width: 2px; height: 100%; content: ""; position: absolute; left: 33.3%; top: 0px; background: #dedede }
.dz-1content ul:after { width: 2px; height: 100%; content: ""; position: absolute; left: 66.6%; top: 0px; background: #dedede }
.dz-1content ul li { width: 100%; overflow: hidden; border-bottom: 2px #dedede solid; padding: 14px 0px; display: flex; justify-content: center; align-items: center; align-content: center }
.dz-1content ul li span { width: 33.33%; display: block; overflow: hidden; font-size: 16px; color: #626362; text-align: center; box-sizing: border-box; padding: 0px 10px }
.dz-2 { width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 150px 0px; background-attachment: fixed }
.dz-2center { width: 75%; overflow: hidden; margin: 0px auto; display: flex; justify-content: space-between; align-items: center }
.dz-2left { width: 350px; overflow: hidden }
.dz-2left samp { float: left; width: 100%; overflow: hidden }
.dz-2left .h3 { float: left; width: 100%; overflow: hidden; position: relative; font-size: 54px; color: #0a6b87; margin-top: 10px; padding-bottom: 28px }
.dz-2left .h3:before { width: 113px; height: 6px; content: ""; position: absolute; left: 0px; bottom: 0px; border-radius: 3px; background: #00edff }
.dz-2info { float: left; width: 100%; overflow: hidden; line-height: 40px; font-size: 21px; color: #5e6060; margin-top: 40px }
.dz-2right { width: auto; overflow: hidden }
.dz-2right .swiper { width: 47.4vw; height: 37vw; overflow: hidden }
.dz-2right .swiper-slide { position: relative }
.dz-2right img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: scale(0.9) translate(-100%); opacity: 0 }
.dz-2right .swiper-slide-active img { animation: picslide3 0.9s ease 1; animation-fill-mode: forwards }
.dz-2right .swiper-pagination { width: 100%; position: relative; height: 20px; margin-top: 70px }
.dz-2right .swiper-pagination span { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 1px #99999b solid; background: none; opacity: 1; margin: 0px 6px !important; display: inline-block }
.dz-2right .swiper-pagination .swiper-pagination-bullet-active { background: #0aacb9; border-color: #0aacb9 }
.dz-2:nth-child(2n) .dz-2center { flex-direction: row-reverse }
.dz-2:nth-child(2n) .dz-2left samp { text-align: right }
.dz-2:nth-child(2n) .dz-2left .h3 { text-align: right }
.dz-2:nth-child(2n) .dz-2left .h3:before { left: auto; right: 0px }
.dz-3 { width: 100%; overflow: hidden; padding-top: 60px }
.dz-3content { width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 90px; padding: 180px 0px 140px; background-attachment: fixed }
.dz-3content .h4 { width: 100%; overflow: hidden; text-align: center; font-size: 68px; color: #fff }
.dz-3info { width: 1000px; overflow: hidden; text-align: center; font-size: 26px; color: #fff; line-height: 42px; margin: 46px auto 0px }
.dz-3content ul { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; margin-top: 80px }
.dz-3content ul li { width: auto; overflow: hidden }
.dz-3content ul li span { width: 134px; height: 134px; margin: 0px auto; border: 2px #fff solid; box-sizing: border-box; border-radius: 50%; display: block; font-size: 28px; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; letter-spacing: 4px }
.dz-3content ul li p { width: 210px; overflow: hidden; text-align: center; font-size: 22px; color: #fff; line-height: 30px; margin-top: 20px }
.dz-3content ul li samp { width: 50px; text-align: center; display: block; font-size: 28px; color: #fff; margin-top: 50px }
.dz-4 { width: 100%; overflow: hidden; padding-top: 60px }
.dz-4cntent { width: 100%; overflow: hidden; position: relative; margin-top: 70px }
.dz-4cntent img { width: 100%; height: auto }
.dz-4cntent .h4 { width: 100%; overflow: hidden; text-align: center; position: absolute; left: 0px; top: 6vw; font-size: 2.5vw; color: #fff; text-shadow: 0px 0px 9px rgba(0,0,0,0.6) }
.dz-4cntent ul { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 12 }
.dz-4cntent ul li { position: absolute; font-size: 2.917vw; color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,0.1) }
.dz-4cntent ul li:nth-child(1) { left: 33vw; top: 14vw }
.dz-4cntent ul li:nth-child(2) { left: 47vw; top: 24vw }
.dz-4cntent ul li:nth-child(3) { left: 61vw; top: 15vw }
.dz-4cntent ul li:nth-child(4) { left: 76vw; top: 17vw }
.dz-2pannel { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 14 }
.dz-2item { position: absolute; font-size: 1.042vw; color: #fff; text-shadow: 0px 0px 8px rgba(0,0,0,0.8); font-weight: lighter }
.dz-2item:nth-child(1) { width: 22vw; left: 17vw; top: 22vw }
.dz-2item:nth-child(2) { width: 14vw; left: 43vw; top: 32vw; text-align: center }
.dz-2item:nth-child(3) { width: 13vw; left: 60vw; top: 24vw; text-align: center }
.dz-2item:nth-child(4) { width: 12vw; left: 76vw; top: 24vw; text-align: center }
.dz-5 { width: 100%; overflow: hidden; padding-top: 60px; background: url("../images/bg-9.jpg") no-repeat left bottom; background-size: 100%; margin-bottom: 100px }
.dz-5content { width: calc(75% + 100px); position: relative; overflow: hidden; margin: 50px auto 0px }
.dz-5pannel { width: 100%; overflow: hidden; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); z-index: 1; height: 647px }
.dz-5pic { width: 100%; height: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; position: relative }
.dz-5pic:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 12; background: url("../images/icon-58.png"); background-size: 100% }
.dz-5model { width: 30%; position: absolute; left: 7vw; top: 50%; transform: translateY(-50%); z-index: 20; color: #fff }
.dz-5model .h4 { float: left; width: 100%; overflow: hidden; font-size: 64px; transform: translateY(60px); opacity: 0 }
.dz-5model em { float: left; width: 100%; overflow: hidden; font-size: 40px; transform: translateY(60px); opacity: 0 }
.dz-5model p { float: left; width: 100%; overflow: hidden; font-size: 14px; line-height: 26px; margin-top: 30px; transform: translateY(60px); opacity: 0 }
.dz-5more { float: left; margin-top: 3vw }
.dz-5more a { width: 145px; height: 36px; line-height: 36px; display: block; overflow: hidden; text-align: center; font-size: 18px; color: #fff; background: url("../images/icon-56.png") no-repeat; background-size: 100%; transform: translateY(60px); opacity: 0 }
.dz-5more a span { margin-left: 26px }
.dz-5more:hover { transform: translateY(5px) }
.dz-5pannel .swiper-slide-active .dz-5model .h4 { animation: updown 0.6s ease 1; animation-fill-mode: forwards }
.dz-5pannel .swiper-slide-active .dz-5model em { animation: updown 0.6s ease 0.1s 1; animation-fill-mode: forwards }
.dz-5pannel .swiper-slide-active .dz-5model p { animation: updown 0.6s ease 0.2s 1; animation-fill-mode: forwards }
.dz-5pannel .swiper-slide-active .dz-5model .dz-5more a { animation: updown 0.6s ease 0.3s 1; animation-fill-mode: forwards }
.dz-5cont { width: 27.5%; float: right; overflow: hidden; padding: 10px 50px; position: relative; z-index: 12 }
.dz-5item { width: 100%; overflow: hidden; background: #fff; border-radius: 6px; margin-top: 6px; box-sizing: border-box; padding: 24px 40px; cursor: pointer; box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.06) }
.dz-5item:first-child { margin-top: 0px }
.dz-5item span { float: left; width: 100%; overflow: hidden; font-size: 14px; color: #938e8e; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1 }
.dz-5item p { float: left; width: 100%; overflow: hidden; font-size: 14px; color: #938e8e; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 26px; margin-top: 15px }
.dz-5item em { float: right; width: 24px; height: 24px; position: relative; margin-top: 14px }
.dz-5item em:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-9.png") no-repeat; background-size: 100% }
.dz-5item em:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-9-1.png") no-repeat; background-size: 100%; opacity: 0 }
.dz-5item.active { box-shadow: 0px 0px 7px 3px rgba(22,247,255,0.6) }
.dz-5item.active span { color: #0d6a89 }
.dz-5item.active em:before { opacity: 0 }
.dz-5item.active em:after { opacity: 1 }
.solution { width: 75%; margin: 100px auto 0px; padding-bottom: 136px; position: relative }
.solution:before { width: 77px; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; border-right: 1px #979797 dashed; z-index: 1 }
.sol-left { float: left; width: 310px; overflow: hidden; position: sticky; top: calc(56px + 50px); padding: 50px 0px; z-index: 12 }
.sol-left:before { width: 77px; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; border-right: 2px #046A88 dashed; z-index: 1 }
.sol-nav { width: 100%; overflow: hidden; padding: 25px 0px; display: flex; align-items: center; position: relative; z-index: 15; cursor: pointer }
.sol-nav samp { width: 54px; height: 40px; display: block; position: relative; overflow: hidden }
.sol-nav samp img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.sol-nav samp img:last-child { opacity: 0 }
.sol-nav span { width: auto; overflow: hidden; display: block; margin-left: 20px; font-size: 24px; color: #4A4A4A; position: relative; padding-left: 40px }
.sol-nav span:before { width: 7px; height: 0%; background: #1A99BC; border-radius: 4px; content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%) }
.sol-nav.active samp img { opacity: 0 }
.sol-nav.active samp img:last-child { opacity: 1 }
.sol-nav.active span { color: #046A88 }
.sol-nav.active span:before { height: 90% }
.sol-right { float: right; width: calc(100% - 310px); overflow: hidden }
.sol-item { width: 100%; overflow: hidden; margin-top: 40px; position: relative }
.sol-pic { width: 100%; overflow: hidden; position: relative; border-radius: 12px }
.sol-pic img { width: 100%; height: auto }
.sol-pic .h4 { width: auto; position: absolute; left: 5.4vw; bottom: 5.4vw; z-index: 12; font-size: 38px; color: #FFFFFF; letter-spacing: 1.12px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); padding-bottom: 20px }
.sol-pic .h4:before { width: 149px; height: 6px; background: #17EDFD; border-radius: 6px; content: ""; position: absolute; left: 0px; bottom: 0px }
.sol-model { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 20; background: -webkit-linear-gradient(69deg, #046A88, #29CFF0); background: -moz-linear-gradient(69deg, #046A88, #29CFF0); background: -ms-linear-gradient(69deg, #046A88, #29CFF0); background: -o-linear-gradient(69deg, #046A88, #29CFF0); border-radius: 12px; display: flex; justify-content: center; flex-wrap: wrap; align-content: center; opacity: 0; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s }
.sol-model samp { width: 60%; height: 90%; position: absolute; right: 0px; bottom: 20px; z-index: 1 }
.sol-model samp img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; right: 0px; bottom: 0px }
.sol-model .h4 { width: 70%; z-index: 12; font-size: 38px; color: #FFFFFF; letter-spacing: 1.12px; padding-bottom: 20px; position: relative; transform: translateY(60px); opacity: 0 }
.sol-model .h4:before { width: 149px; height: 6px; background: #17EDFD; border-radius: 6px; content: ""; position: absolute; left: 0px; bottom: 0px }
.sol-model span { width: 70%; display: block; z-index: 12; font-size: 24px; color: #FFFFFF; letter-spacing: 0.71px; margin-top: 60px; transform: translateY(60px); opacity: 0 }
.sol-info { width: 70%; z-index: 12; font-size: 18px; color: #fff; letter-spacing: 0.53px; line-height: 24px; margin-top: 12px; padding-right: 24%; box-sizing: border-box; transform: translateY(60px); opacity: 0 }
.sol-more { width: 70%; margin-top: 44px; transform: translateY(60px); opacity: 0 }
.sol-more a { float: left; width: 145px; height: 36px; line-height: 36px; background: url("../images/icon-56.png") no-repeat; background-size: 100%; overflow: hidden; display: block; font-size: 18px; color: #fff; text-align: center }
.sol-more em { margin-left: 26px }
.sol-more a:hover { transform: translateY(5px) }
.sol-item:hover .sol-model { opacity: 1 }
.sol-item:hover .sol-model .h4 { animation: updown 0.6s ease 0.2s 1; animation-fill-mode: forwards }
.sol-item:hover .sol-model span { animation: updown 0.6s ease 0.3s 1; animation-fill-mode: forwards }
.sol-item:hover .sol-info { animation: updown 0.6s ease 0.4s 1; animation-fill-mode: forwards }
.sol-item:hover .sol-more { animation: updown 0.6s ease 0.5s 1; animation-fill-mode: forwards }
.sinfo-1 { width: 100%; overflow: hidden; margin-top: 60px }
.sinfo-1head { width: 100%; margin: 0px auto; text-align: center }
.sinfo-1head .h3 { width: auto; display: inline-block; overflow: hidden; font-size: 48px; color: #5E6060; padding-bottom: 12px; position: relative }
.sinfo-1head .h3:before { width: 90%; content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; height: 4px; background: #0d6a89; border-radius: 2px }
.sinfo-1des { width: 64%; margin: 58px auto 0px; overflow: hidden; font-size: 18px; color: #5E6060; line-height: 36px }
.sinfo-1pic { width: 100%; overflow: hidden; margin-top: 60px }
.sinfo-1pic img { width: 100%; height: auto }
.sinfo-2 { width: 100%; overflow: hidden; margin-top: 90px }
.sinfo-2 .h3 { width: 100%; overflow: hidden; font-size: 48px; color: #5E6060; text-align: center }
.sinfo-2list { width: 100%; overflow: hidden; margin-top: 65px }
.sinfo-2item { width: 100%; overflow: hidden; display: flex; justify-content: space-between; align-items: center }
.sinfo-2item:nth-child(2n) { flex-direction: row-reverse }
.sinfo-2left { width: 50%; overflow: hidden; border-radius: 8px }
.sinfo-2left img { width: 100%; height: auto }
.sinfo-2left:hover img { transform: scale(1.03) }
.sinfo-2right { width: 50%; overflow: hidden; box-sizing: border-box; padding-left: 5% }
.sinfo-2item:nth-child(2n) .sinfo-2right { padding: 0px 5% 0px 0px }
.sinfo-2right span { float: left; width: 100%; overflow: hidden; font-size: 48px; color: #5E6060; letter-spacing: 2px }
.sinfo-2info { float: left; width: 78%; overflow: hidden; font-size: 18px; color: #5E6060; letter-spacing: 0; text-align: justify; line-height: 38px; margin-top: 30px }
.sinfo-2item:nth-child(2n) .sinfo-2right span { float: right; text-align: right }
.sinfo-2item:nth-child(2n) .sinfo-2info { float: right }
.sinfo-2right:hover span { color: #106A87; transform: translateX(15px) }
.sinfo-2right:hover .sinfo-2info { transform: translateY(10px) }
.sinfo-3 { width: 100%; overflow: hidden; background-position: top center; background-repeat: no-repeat; background-size: cover; padding: 140px 0px }
.sinfo-3content { width: 75%; margin: 100px auto 0px }
.sinfo-3left { float: left; width: 71.8%; height: 31.2vw; overflow: hidden; border-radius: 10px; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.15) }
.sinfo-3left a { width: 100%; height: 100%; overflow: hidden; position: relative }
.sinfo-3left img { width: 100%; height: 100%; object-fit: cover }
.sinfo-3left:hover img { transform: scale(1.03) }
.sinfo-3left span { width: 100%; overflow: hidden; background: #0A6B87; border-radius: 10px; position: absolute; left: 0px; bottom: 0px; z-index: 12; height: 67px; line-height: 67px; text-align: center; box-sizing: border-box; padding: 0px 10px; font-size: 26px; color: #FFFFFF; letter-spacing: 2px }
.sinfo-3left:hover span { transform: translateY(5px) }
.sinfo-3right { float: right; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: space-between; width: calc(100% - 71.8% - 11px); height: 31.2vw }
.sinfo-3item { width: 100%; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.15); height: 9.9vw; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; cursor: pointer }
.sinfo-3item.active { box-shadow: 0px 0px 7px 3px rgba(22,247,255,0.6) }
.sinfo-3item span { width: 80%; overflow: hidden; font-size: 16px; color: #938E8E; letter-spacing: 1px; line-height: 25px; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }
.sinfo-3item p { width: 80%; overflow: hidden; font-size: 14px; color: #938E8E; letter-spacing: 0; line-height: 25px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin-top: 15px }
.sinfo-3item.active span { color: #0A6B87 }
.product { width: 75%; margin: 100px auto 0px; padding-bottom: 136px; position: relative }
.product:before { width: 90px; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; border-right: 1px #979797 dashed; z-index: 1 }
.pro-pannel { width: 100% }
.pro-left { float: left; width: 200px; overflow: hidden; position: sticky; top: calc(56px + 50px); padding: 50px 0px; z-index: 12; display: flex; align-items: center; z-index: 15; cursor: pointer; margin-top: 5vw }
.pro-left:before { width: 90px; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; border-right: 2px #046A88 dashed; z-index: 1; display: none }
.pro-nav { width: 80px; overflow: hidden }
.pro-nav samp { width: 100%; display: block; height: 37px; position: relative; margin: 0px auto }
.pro-nav samp img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.pro-nav samp img:last-child { opacity: 0 }
.pro-nav span { width: 100%; display: block; text-align: center; overflow: hidden; color: #4a4a4a; font-size: 24px; letter-spacing: 0.71px; margin-top: 14px; font-weight: bold }
.pro-nav p { width: 100%; display: block; text-align: center; overflow: hidden; color: #4a4a4a; font-size: 16px; letter-spacing: 0.47px; font-weight: bold; margin-top: 2px }
.pro-list { width: auto; overflow: hidden; display: block; margin-left: 8px; position: relative; padding-left: 40px; z-index: 30; height:200px!important; }
.pro-list:before { width: 7px; height: 0px; background: #1A99BC; border-radius: 4px; content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%) }
.pro-list .h4 { width: 100%; overflow: hidden; font-size: 22px; color: #4A4A4A; margin-top: 22px; opacity: 0 }
.pro-list .h4:first-child { margin-top: 0px }
.pro-list .h4.active { color: #046A88 }
.pro-list ul { width: 100%; overflow: hidden; margin-top: 5px; opacity: 0 }
.pro-list ul li { width: 100%; overflow: hidden; font-size: 14px; color: #4A4A4A; line-height: 34px; cursor: pointer }
.pro-list ul li:hover { color: #046A88 }
.pro-pannel.active .pro-nav samp img { opacity: 0 }
.pro-pannel.active .pro-nav samp img:last-child { opacity: 1 }
.pro-pannel.active .pro-nav span, .pro-pannel.active .pro-nav p { color: #046A88 }
.pro-pannel.active .pro-list:before { height: 100% }
.pro-right { float: right; width: calc(100% - 200px) }
.pro-model { width: 100%; display: flex; flex-wrap: wrap }
.pro-li { float: left; width: 30%; overflow: hidden; margin: 33px 5% 0px 0px; background: #fff; box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1); border-radius: 6px; padding-bottom: 45px }
.pro-li:nth-child(3n) { margin-right: 0px }
.pro-li samp { width: 100%; height: 12vw; display: block; overflow: hidden; position: relative; margin-top: 20px }
.pro-li samp img { width: auto; height: auto; max-width: 90%; max-height: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.pro-li:hover samp img { transform: scale(1.03) translate(-50%, -50%) }
.pro-li span { width: 100%; overflow: hidden; display: block; text-align: center; margin-top: 20px; font-size: 28px; color: #4A4A4A; letter-spacing: 5.09px }
.pro-li em { width: 100%; overflow: hidden; display: block; text-align: center; font-size: 20px; color: #4A4A4A; letter-spacing: 4px; margin-top: 5px }
.pro-li p { width: 100%; overflow: hidden; display: block; text-align: center; font-size: 14px; color: #4A4A4A; margin-top: 10px }
.pro-li:hover { box-shadow: 0px 0px 7px 3px rgba(22,247,255,0.3) }
.pro-more { width: 121px; height: 30px; line-height: 30px; display: block; overflow: hidden; text-align: center; color: #fff; position: relative; margin: 20px auto 0px }
.pro-more:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 1; background: url("../images/icon-87.png") no-repeat; background-size: 100%; opacity: 0 }
.pro-more:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; z-index: 1; background: url("../images/icon-9.png") no-repeat center; background-size: 21px }
.pro-more i { font-style: normal; margin-left: 22px; font-size: 14px; position: relative; z-index: 12; opacity: 0 }
.pro-more:hover { transform: translateY(5px) }
.pro-li:hover .pro-more:after { opacity: 0 }
.pro-li:hover .pro-more:before, .pro-li:hover .pro-more i { opacity: 1 }
.pinfo-1 { width: 100%; overflow: hidden; height: 49.48vw; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 36px }
.pinfo-1center { width: 75%; margin: 12vw auto; overflow: hidden }
.pinfo-1left { float: left; width: 26%; text-align: right; margin-top: 20px }
.pinfo-1type { float: left; width: 100%; overflow: hidden; font-size: 48px; color: #0d6a89; font-weight: bold }
.pinfo-1title { float: left; width: 100%; overflow: hidden; font-size: 18px; color: #777 }
.pinfo-1title span { font-size: 36px; color: #0d6a89; font-weight: lighter; margin-left: 16px }
.pinfo-1subname { float: left; width: 100%; overflow: hidden; font-size: 24px; color: #0d6a89; margin-top: 35px }
.pinfo-1info { float: left; width: 100%; overflow: hidden; text-align: left; line-height: 30px; font-size: 14px; color: #777; margin-top: 20px; text-align: right }
.pinfo-1center ul { float: left; width: 100%; margin-top: 50px; display: flex; justify-content: center; align-items: center; position: relative }
.pinfo-1center ul li { width: 70.59px; height: 17px; background: -webkit-linear-gradient(top, #F0F0F0 0%, #AEADAD 100%); background: -moz-linear-gradient(top, #F0F0F0 0%, #AEADAD 100%); background: -ms-linear-gradient(top, #F0F0F0 0%, #AEADAD 100%); background: -o-linear-gradient(top, #F0F0F0 0%, #AEADAD 100%); border-radius: 9px; margin: 0px 10px; cursor: pointer }
.pinfo-1center ul li:nth-child(2) { background: -webkit-linear-gradient(top, #D9CDBD 0%, #AF9475 100%); background: -moz-linear-gradient(top, #D9CDBD 0%, #AF9475 100%); background: -ms-linear-gradient(top, #D9CDBD 0%, #AF9475 100%); background: -o-linear-gradient(top, #D9CDBD 0%, #AF9475 100%) }
.pinfo-1center ul li:hover { transform: translateY(3px) }
.pinfo-1center ul span { width: auto; position: absolute; right: 0px; top: 0px; font-size: 16px; color: #0d6a89 }
.pinfo-1right { float: right; width: 69%; overflow: hidden; position: relative; text-align: center }
.pinfo-1right span { float: left; width: 100%; overflow: hidden; position: absolute; left: 0px; top: 0px; z-index: 1 }
.pinfo-1right span.active { position: relative; z-index: 2; text-align: center }
.pinfo-1right img { width: auto; height: auto; max-width: 87%; opacity: 0 }
.pinfo-1right span.active img { animation: picslide2 0.8s ease 1; animation-fill-mode: forwards }
.pinfo-2 { width: 100%; overflow: hidden; position: relative }
.pinfo-2pic { width: 100%; overflow: hidden }
.pinfo-2pic img { width: 100%; height: auto }
.pinfo-2 .hnews-head { position: absolute; z-index: 12; top: 4.6vw }
.pinfo-3 { width: 100%; overflow: hidden; margin-top: 80px }
.pinfo-3info { width: 75%; overflow: hidden; margin: 0px auto; position: relative }
.pinfo-3des { width: 100%; overflow: hidden; position: absolute; left: 0px; top: 0px; z-index: 1; transform: translateY(60px); opacity: 0; font-size: 18px; color: #7C7C7C; letter-spacing: 1px; line-height: 40px; text-align: center }
.pinfo-3des.active { position: relative; z-index: 2; animation: updown 0.6s ease 1; animation-fill-mode: forwards }
.pinfo-3pic { width: 75%; overflow: hidden; margin: 100px auto 0px; padding: 0px 135px; position: relative }
.pinfo-3pic img { width: auto; height: auto; max-width: 100% }
.pinfo-3pic .swiper-button-prev { width: 39px; height: 39px; overflow: hidden }
.pinfo-3pic .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.pinfo-3pic .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.pinfo-3pic .swiper-button-next { width: 39px; height: 39px; overflow: hidden }
.pinfo-3pic .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.pinfo-3pic .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.pinfo-3pic .swiper-button-prev:hover:before, .pinfo-3pic .swiper-button-next:hover:before { opacity: 0 }
.pinfo-3pic .swiper-button-prev:hover:after, .pinfo-3pic .swiper-button-next:hover:after { opacity: 1 }
.pinfo-3content { width: 75%; overflow: hidden; margin: 80px auto 0px; font-size: 21px; color: #7C7C7C; letter-spacing: 1px; line-height: 48px; box-sizing: border-box; padding: 0px 5% }
.pinfo-4 { width: 100%; overflow: hidden; padding: 80px 0px }
.pinfo-4content { width: 75%; overflow: hidden; margin: 70px auto 0px; font-size: 18px; color: #7C7C7C; letter-spacing: 1px; line-height: 40px }
.pinfo-list { width: 100%; overflow: hidden; margin-top: 80px }
.pinfo-5 { width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 9vw 0px }
.pinfo-5 .pinfo-1center { margin: 0px auto; display: flex; justify-content: space-between; align-items: center }
.pinfo-5:nth-child(2n+1) .pinfo-1center { flex-direction: row-reverse }
.pinfo-5 .pinfo-1title span { font-size: 21px }
.pinfo-list.p2 .pinfo-5:nth-child(2) { padding: 60px 0px 70px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1type, .pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1title, .pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1subname { display: none }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1center { flex-wrap: wrap }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1left { width: 100% }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1info { font-size: 18px; color: #7C7C7C; letter-spacing: 0.86px; line-height: 40px; text-align: center }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1right { width: 100%; margin-top: 50px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1right img { max-width: 100% }
.pinfo-list.p2 .pinfo-5:nth-child(2n+3) .pinfo-1center { flex-direction: row }
.pinfo-list.p2 .pinfo-5:nth-child(2n+2) .pinfo-1center { flex-direction: row-reverse }
.pinfo-6 { width: 100%; overflow: hidden; padding: 76px 0px 57px; background-position: center; background-repeat: no-repeat; background-size: cover }
.pinfo-6content { width: 80%; overflow: hidden; margin: 76px auto 0px; text-align: center }
.pinfo-6content img { width: auto; max-width: 100%; height: auto }
.pinfo-7 { width: 100%; overflow: hidden; padding: 50px 0px }
.pinfo-7content { width: 100%; overflow: hidden; margin-top: 60px; position: relative }
.pinfo-7content .swiper { width: 184%; margin-left: -42% }
.pinfo-7content .swiper-slide { overflow: hidden }
.pinfo-7content .swiper-slide img { width: 100%; height: auto }
.pinfo-7content .swiper-slide:hover img { transform: scale(1.03) }
.pinfo-7content .swiper-button-prev { width: 83px; height: 83px; overflow: hidden; opacity: 0.7; background: url("../images/icon-97.png") no-repeat center; background-size: 100%; left: 6% }
.pinfo-7content .swiper-button-next { width: 83px; height: 83px; overflow: hidden; opacity: 0.7; background: url("../images/icon-98.png") no-repeat center; background-size: 100%; right: 6% }
.pinfo-7content .swiper-button-prev:hover, .pinfo-7content .swiper-button-next:hover { opacity: 1 }
.pinfo-7 .swiper-pagination { width: 100%; overflow: hidden; position: relative; text-align: center; height: 20px; bottom: 0px; margin-top: 50px }
.pinfo-7 .swiper-pagination span { width: 60px; height: 8px; background: #bbb; border-radius: 4px; opacity: 1; margin: 0px 5px }
.pinfo-7 .swiper-pagination .swiper-pagination-bullet-active { background: #15B3C5 }
.pinfo-8 { width: 100%; overflow: hidden; padding-top: 80px }
.pinfo-8 .h3 { width: 100%; overflow: hidden; text-align: center; font-size: 38px; color: #5E6060 }
.pinfo-8cont { width: 100%; overflow: hidden; box-sizing: border-box; position: relative }
.pinfo-8cont .swiper { width: 75%; margin: 0px auto; padding: 43px 12px 127px }
.pinfo-8cont .swiper-slide { overflow: hidden; width: 100%; background: #fff; box-shadow: -1px 13px 16px 0 #F0F2F4; border-radius: 10px; box-sizing: border-box; padding: 20px 48px }
.pinfo-8cont .swiper-slide:hover { box-shadow: 0px 0px 7px 3px rgba(22,247,255,0.3) }
.pinfo-8cont .swiper-slide a { width: 100%; height: 100%; display: block; overflow: hidden }
.pinfo-8cont .swiper-slide samp { width: 100%; height: 10.94vw; display: block; overflow: hidden; position: relative }
.pinfo-8cont .swiper-slide samp img { width: auto; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; position: absolute }
.pinfo-8cont .swiper-slide:hover img { transform: translate(-50%, -50%) scale(1.03) }
.pinfo-8cont .swiper-slide span { width: 100%; overflow: hidden; display: block; text-align: center; color: #4a4a4aff; font-size: 20px; line-height: 34px; margin-top: 22px }
.pinfo-8cont .swiper-slide span em { margin-right: 12px }
.pinfo-8cont .swiper-slide:hover span { color: #0d6a89 }
.pinfo-8cont .swiper-button-prev { width: 39px; height: 39px; overflow: hidden; left: 7%; top: 40% }
.pinfo-8cont .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.pinfo-8cont .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.pinfo-8cont .swiper-button-next { width: 39px; height: 39px; overflow: hidden; right: 7%; top: 40% }
.pinfo-8cont .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100% }
.pinfo-8cont .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.pinfo-8cont .swiper-button-prev:hover:before, .pinfo-8cont .swiper-button-next:hover:before { opacity: 0 }
.pinfo-8cont .swiper-button-prev:hover:after, .pinfo-8cont .swiper-button-next:hover:after { opacity: 1 }
.contact-1 { width: 100%; overflow: hidden; margin: 100px auto 0px }
.contact-1head { width: 100%; margin: 0px auto; text-align: center }
.contact-1head .h3 { width: auto; display: inline-block; overflow: hidden; font-size: 48px; color: #5E6060; padding-bottom: 12px; position: relative }
.contact-1head .h3:before { width: 100%; content: ""; position: absolute; left: 0px; bottom: 0px; height: 4px; background: #0d6a89; border-radius: 2px }
.contact-1content { width: 1226px; margin: 33px auto 0px; position: relative }
.contact-1map, .contact-1map img { width: 100%; height: auto }
.contact-line1 { width: 100%; height: 100%; position: absolute; background: url("../images/map.gif") no-repeat; left: 0px; top: 0px; background-size: 100%; transform: translate(22px, 0px) }
.contact-2 { width: 100%; margin: 130px auto 0px; position: relative; z-index: 12; overflow: hidden; padding-bottom: 15px }
.contact-2content { width: 75%; margin: 80px auto 0px }
.contact-2content .h4 { width: 100%; overflow: hidden; height: 62px; line-height: 62px; text-align: center; background: -webkit-linear-gradient(right, #15B4C5 13%, #267B96 85%); background: -moz-linear-gradient(right, #15B4C5 13%, #267B96 85%); background: -ms-linear-gradient(right, #15B4C5 13%, #267B96 85%); background: -o-linear-gradient(right, #15B4C5 13%, #267B96 85%); font-size: 28px; color: #fff }
.contact-2content ul { float: left; width: 100% }
.contact-2content ul li { float: left; width: 25%; height: 16.7vw; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; position: relative; z-index: 1; cursor: pointer; background: #fff; box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.1) }
.contact-2content ul li a { width: 100%; height: 100%; display: block; overflow: hidden; display: flex; justify-content: center; align-content: center; flex-wrap: wrap }
.contact-2content ul li:hover { z-index: 10; box-shadow: 0px 0px 8px 3px rgba(75,207,213,0.5) }
.contact-2content ul li samp { width: 100%; display: block; overflow: hidden; height: 72px; position: relative }
.contact-2content ul li samp img { width: auto; height: auto; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.contact-2content ul li span { width: 72%; display: block; margin: 50px auto 0px; font-size: 24px; color: #5E6060; text-align: center; overflow: hidden; line-height: 34px; word-break: break-word; min-height: 112px }
.contact-2content ul li:hover span { margin-top: 40px }
.contact-3 { width: 100%; overflow: hidden; height: 810px; position: relative; z-index: 11; margin-top: -220px }
.amap-logo { display: none !important }
.contact-3 #container { width: 150% !important; height: 150% !important; transform: translate(-1%, 80px) }
.contact-3map { width: auto; overflow: hidden }
.contact-3map samp { width: 100%; display: block; overflow: hidden; margin: 0px auto; text-align: center }
.contact-3map span { width: 100%; display: block; overflow: hidden; margin: 20px auto; text-align: center }
.contact-3map p { width: 100%; display: block; overflow: hidden; text-align: center; margin: 0px auto; font-size: 28px; color: #A2A2A2; text-align: center }
.contact-4 { width: 75%; overflow: hidden; margin: 0px auto; padding: 100px 0px }
.contact-4item { float: left; width: 590px; overflow: hidden; max-width: 45% }
.contact-4item:nth-child(2n) { float: right }
.contact-4item samp { float: left; width: 54px; overflow: hidden }
.contact-4item samp img { width: 100%; height: auto }
.contact-4right { float: right; width: calc(100% - 54px - 20px); font-size: 28px; color: #A2A2A2 }
.contact-4right span { float: left; width: 100%; overflow: hidden; font-weight: bold }
.contact-4right p { float: left; width: 100%; overflow: hidden }
@media screen and (max-width: 1660px) {
.header-right ul li { margin-left: 32px }
.header-phone { margin-left: 50px }
.header-lang { margin-left: 32px }
.footer { padding: 50px calc((100% - 75%)/2) 40px }
.footer-item { margin-right: 60px }
.footer-item .h3 { padding-bottom: 10px }
.footer-item .h3:before { height: 2px }
.footer-item .h3 a { font-size: 18px }
.footer-item ul { margin-top: 8px }
.footer-item ul li { line-height: 32px }
.footer-item ul li a { font-size: 14px }
.footer-phone span { padding-right: 60px; background-size: 46px; height: 46px; line-height: 46px; font-size: 24px }
.footer-phone p { font-size: 50px }
.footer-wx { margin-top: 10px }
.footer-wx img { width: 120px }
.footer-wx span { font-size: 12px; margin-top: 16px }
.footer-beian { margin-top: 80px }
.leaf-item { width: 50px; height: 50px }
.banner-center em { margin-top: 26px }
.banner-center p { margin-top: 7vw }
.banner .swiper-button-prev { width: 39px; height: 39px }
.banner .swiper-button-next { width: 39px; height: 39px }
.banner-cur { width: 20px; height: 120px }
.hcor { height: 60px }
.hcor ul li samp { padding-right: 16px }
.hcor ul li span { font-size: 16px; margin-left: 13px }
.hcor ul li em { margin-left: 8px; font-size: 12px }
.hcor-pannel { height: 56px; top: 60px }
.hcor-item { top: 60px; height: 56px; line-height: 56px }
.hcor-item a { font-size: 14px }
.hpro-center { margin: 11.2vw auto 0px; padding: 0px 120px }
.hpro-type { font-size: 42px }
.hpro-title { font-size: 16px }
.hpro-title span { font-size: 30px; margin-left: 12px }
.hpro-subname { font-size: 20px; margin-top: 30px }
.hpro-info { line-height: 28px; margin-top: 15px }
.hpro-more { margin-top: 40px }
.hpro-more a { width: 130px; height: 32px; line-height: 32px; font-size: 14px }
.hpro-more span { margin-left: 20px }
.hpro .swiper-button-prev { width: 39px; height: 39px }
.hpro .swiper-button-next { width: 39px; height: 39px }
.hsolve-item samp { height: 100px }
.hsolve-item span { font-size: 32px; margin-top: 30px }
.hsolve-info { margin: 15px auto 0px; line-height: 28px; font-size: 14px; padding-top: 36px }
.hsolve-more a { width: 146px; height: 36px; line-height: 36px; margin: 60px auto 0px; font-size: 14px }
.hsolve-more em { margin-left: 20px }
.hyy { padding: 70px 0px 30px }
.hyy-content { padding: 0px 120px; margin: 60px auto 0px }
.hyy-left .h4 { font-size: 42px }
.hyy-left em { font-size: 26px; margin-top: 8px }
.hyy-info { line-height: 30px; font-size: 16px; margin-top: 30px }
.hyy-more { margin-top: 50px }
.hyy-more a { width: 130px; height: 32px; line-height: 32px; background-size: 100%; font-size: 14px }
.hyy-more span { margin-left: 20px }
.hyy-content .swiper-button-prev { width: 39px; height: 39px }
.hyy-content .swiper-button-next { width: 39px; height: 39px }
.hyy-nav { margin-top: 32px }
.hyy-nav:before { height: 2px; top: 34px }
.hyy-pannel em { width: 70px; height: 70px }
.hyy-pannel em:before { border: 1px #c3c8ca dashed }
.hyy-pannel span { font-size: 20px; margin-top: 18px }
.hyy-nav .swiper-slide.active .hyy-pannel em:before { border: 1px #146d89 dashed }
.hcase { padding-top: 80px }
.hcase-content { margin-top: 40px }
.hcase-cont .h3 { font-size: 32px }
.hcase-info { line-height: 36px; font-size: 20px; margin-top: 26px }
.hcase-more { margin-top: 40px }
.hcase-more a { width: 130px; height: 32px; line-height: 32px; background-size: 100%; font-size: 14px }
.hcase-more span { margin-left: 20px }
.hcase-item { height: 70px; margin-top: 50px }
.hcase-item.active { height: 120px }
.hcase-item.active samp { height: 50px }
.hcase-item span { width: 22px }
.hcase-item p { font-size: 18px }
.hcase-item.active p { margin-top: 8px }
.hnews { padding: 90px 0px }
.hnews-center { padding-bottom: 10px }
.hnews-center:before { height: 3px }
.hnews-center samp { margin-right: 10px }
.hnews-center samp img { width: auto; height: 42px }
.hnews-center .h3 { font-size: 42px }
.hnews-content { width: calc(75% + 20px); margin: 100px auto 0px; padding: 0px 120px }
.hnews-content .swiper { padding: 0px 10px 80px }
.hnews-cont { padding: 2.2vw }
.hnews-cont em { padding-left: 22px }
.hnews-cont span { margin-top: 12px }
.hnews-cont samp { margin-top: 30px }
.hnews-more { width: 130px; height: 32px; line-height: 32px; background-size: 100% }
.hnews-more a { font-size: 14px }
.hnews-more span { margin-left: 20px }
.hform { padding: 50px 0px }
.hform form { margin: 28px auto 0px; padding-bottom: 30px }
.hform-input { height: 50px; line-height: 50px; padding: 0px 24px }
.hform-input input { font-size: 18px }
.hform-text textarea { font-size: 18px; padding: 15px 24px }
.hform-button { height: 50px; line-height: 50px }
.hform-button input { font-size: 20px }
.hform-info { line-height: 30px; font-size: 14px }
.news-col { height: 58px; line-height: 58px; margin-top: -58px }
.news-col ul li { margin: 0px 35px }
.bread { margin: 28px auto 0px }
.news { padding: 28px 0px 70px }
.news-1right { padding: 0px 40px }
.news-1right em { padding-left: 45px; background-size: 28px; font-size: 22px }
.news-1right span { font-size: 26px; line-height: 38px; margin-top: 16px }
.news-1right p { line-height: 30px; font-size: 16px; margin-top: 10px }
.news-item { margin: 50px 2.75% 0px 0px; padding-bottom: 30px }
.news-item em { margin: 20px auto 0px }
.news-item span { margin: 20px auto 0px; font-size: 18px; line-height: 28px }
.news-pic p { width: 24px; height: 24px }
.news-page { margin-top: 80px }
.news-page a { width: 24px; height: 24px; line-height: 24px; margin: 0px 8px; font-size: 16px }
.banner-ver .h1 { font-size: 48px }
.banner-1 { font-size: 18px; margin-top: 44px }
.detail-body { line-height: 40px; font-size: 18px }
.detail-body img { width: auto; height: auto; max-width: 100% }
.detail-2 { width: 130px; height: 32px; line-height: 32px; background-size: 100%; font-size: 14px; margin: 40px auto }
.detail-2 span { margin-left: 20px }
.detail-3 { padding-bottom: 40px }
.detail-3 span { padding: 0px 25px }
.detail-3 span:first-child:before { width: 3px }
.detail-3 span a { font-size: 18px }
.case-1pic em { width: 60px; height: 60px; bottom: -30px }
.case-1cont em { width: 34px; height: 34px }
.case-1cont span { line-height: 34px; font-size: 22px; margin-left: 18px }
.case-1right .case-1pic em { width: 30px; height: 30px; bottom: -15px }
.case-2item { margin: 50px 2% 0px 0px }
.case-2pic em { width: 30px; height: 30px; bottom: -15px }
.case-2cont em { width: 24px; height: 24px }
.case-2cont span { line-height: 24px; font-size: 20px; margin-left: 12px }
.banner-wz2 { padding-left: 30px; font-size: 50px; letter-spacing: 2px; line-height: 70px; margin-top: calc(-58px/2) }
.banner-wz2:before { width: 6px }
.case-info { padding: 50px 0px 110px }
.cinfo-1 .h1 { font-size: 42px; letter-spacing: 2px }
.cinfo-1pic { margin-top: 50px }
.cinfo-1 .h3 { font-size: 42px; letter-spacing: 2px; margin-top: 48px }
.cinfo-info { margin: 20px auto 0px; line-height: 40px; font-size: 18px }
.cinfo-body p { margin-top: 40px }
.cinfo-2 { margin-top: 90px }
.cinfo-2content { margin: 70px auto 0px; padding: 0px 120px }
.banner-wz .h3 { font-size: 50px }
.banner-wz p { font-size: 28px; line-height: 40px; margin-top: 26px }
.about-1 { padding: 80px 0px }
.about-1pic samp { transform: translate(-40px, -40px) }
.about-1pannel { margin-top: 24px }
.about-1item { line-height: 30px; font-size: 15px }
.about-1pannel ul li { font-size: 18px }
.about-1pannel ul li:before { width: 8px; height: 8px; top: 8px }
.mCSB_inside>.mCSB_container { padding-right: 26px }
.about-2 ul li { height: 140px }
.about-2center span { font-size: 40px }
.about-2center p { font-size: 18px }
.about-2center p:before { width: 50px; height: 5px }
.about-3 { padding-top: 70px }
.about-3content { margin: 60px auto 0px }
.about-3cont samp { height: 9vw }
.about-3cont .h4 { font-size: 42px; padding: 26px 0px }
.about-3info { line-height: 30px; font-size: 18px; padding: 20px 7% 0px; min-height: 210px }
.about-3icon { margin: 18px auto 0px }
.about-4 { padding-top: 80px }
.about-4content { margin-top: 60px; height: 42vw }
.about-4item samp { height: 90px }
.about-4item .h4 { padding: 25px 0px; font-size: 30px }
.about-4model { margin-top: 18px }
.about-4model span { font-size: 26px }
.about-4model p { font-size: 18px; margin-top: 18px }
.about-5 { padding: 80px 0px 100px }
.about-5content { margin: 90px auto 0px; padding: 0px 120px }
.about-5content .swiper-pagination { margin-top: 80px }
.about-5content .swiper-pagination span { width: 30px; height: 4px }
.about-6 { padding: 70px 0px 130px }
.about-6content { margin: 120px auto 0px; padding: 0px 120px }
.banner-wz3 { font-size: 66px; letter-spacing: 2px; margin-top: calc(-58px/2) }
.server { padding: 23px 0px 60px }
.ser-1head .h3 { font-size: 42px }
.ser-1head .h3:before { height: 3px }
.ser-1content { margin: 80px auto 0px }
.ser-1left { float: right }
.ser-1item .h4 { font-size: 42px; letter-spacing: 1px }
.ser-1info { font-size: 15px; line-height: 28px; margin-top: 18px }
.ser-1 ul { padding: 80px 0px }
.ser-1 ul li { font-size: 18px; margin: 0px 60px }
.ser-1 ul li:before { width: 8px; height: 8px; top: 8px }
.ser-2 { padding: 40px 0px 50px }
.ser-2 .h3 { font-size: 56px }
.ser-2content { margin: 90px auto 0px }
.ser-3 { padding: 80px 0px 90px }
.ser-3 .h3 { font-size: 42px; padding-bottom: 10px }
.ser-3 .h3:before { width: 260px; height: 3px }
.ser-3list { margin: 100px auto 0px }
.ser-3right span { font-size: 38px; letter-spacing: 1px }
.ser-3info { font-size: 16px; line-height: 30px; margin-top: 20px }
.ser-4 { padding: 100px 0px 90px }
.ser-4 .h3 { font-size: 66px; letter-spacing: 0px }
.ser-4content { margin-top: 50px }
.ser-4item { margin-right: 5vw }
.ser-4title samp { width: 50px; height: 50px }
.ser-4title span { line-height: 50px; font-size: 30px; margin-left: 12px }
.ser-4item ul { margin-top: 24px }
.ser-4item ul li { line-height: 60px; font-size: 22px }
.dz-1 { padding: 30px 0px 60px }
.dz-1info { width: 75%; margin: 60px auto 0px; line-height: 36px; font-size: 15px }
.dz-1content { width: 75%; margin: 40px auto 0px }
.dz-1head { height: 44px; line-height: 44px; font-size: 20px }
.dz-1title { padding: 12px 0px }
.dz-1title span { font-size: 16px }
.dz-1content ul li { padding: 12px 0px }
.dz-1content ul li span { font-size: 14px }
.dz-2 { padding: 120px 0px }
.dz-2left { width: 320px }
.dz-2left samp img { width: auto; height: 80px }
.dz-2left .h3 { font-size: 40px; padding-bottom: 20px }
.dz-2left .h3:before { width: 100px; height: 5px }
.dz-2info { line-height: 32px; font-size: 18px; margin-top: 30px }
.dz-2right .swiper-pagination { margin-top: 60px }
.dz-3 { padding-top: 50px }
.dz-3content { margin-top: 60px; padding: 150px 0px 120px }
.dz-3content .h4 { font-size: 56px }
.dz-3info { width: 900px; font-size: 22px; line-height: 34px; margin: 32px auto 0px }
.dz-3content ul { margin-top: 60px }
.dz-3content ul li span { width: 100px; height: 100px; font-size: 22px; letter-spacing: 2px }
.dz-3content ul li p { width: 190px; font-size: 18px; line-height: 26px; margin-top: 10px }
.dz-3content ul li samp { width: 40px; font-size: 24px; margin-top: 34px }
.dz-4 { padding-top: 50px }
.dz-4cntent { margin-top: 50px }
.dz-5 { padding-top: 50px; margin-bottom: 90px }
.dz-5content { width: calc(75% + 90px); margin: 40px auto 0px }
.dz-5pannel { height: 572px }
.dz-5model .h4 { font-size: 50px }
.dz-5model em { font-size: 32px; margin-top: 5px }
.dz-5model p { margin-top: 25px }
.dz-5more { float: left; margin-top: 3vw }
.dz-5more a { width: 130px; height: 32px; line-height: 32px; font-size: 14px }
.dz-5more a span { margin-left: 20px }
.dz-5cont { padding: 10px 45px }
.dz-5item { margin-top: 4px; padding: 15px 30px }
.dz-5item p { line-height: 24px; margin-top: 12px }
.dz-5item em { margin-top: 12px }
.solution { margin: 80px auto 0px; padding-bottom: 100px }
.solution:before { width: 64px }
.sol-left { width: 280px; top: calc(56px + 40px); padding: 40px 0px }
.sol-left:before { width: 64px }
.sol-nav samp { width: 46px; height: 32px }
.sol-nav span { margin-left: 16px; font-size: 18px; padding-left: 30px }
.sol-nav span:before { width: 6px }
.sol-right { width: calc(100% - 280px) }
.sol-item { margin-top: 30px }
.sol-pic .h4, .sol-model .h4 { font-size: 30px; padding-bottom: 18px }
.sol-pic .h4:before, .sol-model .h4:before { width: 120px; height: 5px }
.sol-model samp { bottom: 15px }
.sol-model span { font-size: 20px; margin-top: 40px }
.sol-info { font-size: 16px }
.sol-more { margin-top: 32px }
.sol-more a { width: 130px; height: 32px; line-height: 32px; font-size: 14px }
.sol-more em { margin-left: 20px }
.sinfo-1 { margin-top: 50px }
.sinfo-1head .h3 { font-size: 42px; padding-bottom: 10px }
.sinfo-1head .h3:before { height: 3px }
.sinfo-1des { margin: 42px auto 0px; font-size: 16px; line-height: 32px }
.sinfo-1pic { margin-top: 50px }
.sinfo-2 { margin-top: 80px }
.sinfo-2 .h3 { font-size: 42px }
.sinfo-2list { margin-top: 50px }
.sinfo-2right span { font-size: 42px }
.sinfo-2info { font-size: 16px; line-height: 32px; margin-top: 24px }
.sinfo-3 { padding: 120px 0px }
.sinfo-3content { margin: 50px auto 0px }
.sinfo-3left span { height: 60px; line-height: 60px; font-size: 20px; letter-spacing: 1px }
.sinfo-3item p { line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 12px }
.product { margin: 80px auto 0px; padding-bottom: 110px }
.pro-left { float: left; width: 190px; top: calc(56px + 40px); padding: 40px 0px }
.pro-nav samp { height: 32px }
.pro-nav span { font-size: 20px; margin-top: 12px }
.pro-nav p { font-size: 14px }
.pro-list:before { width: 6px }
.pro-list .h4 { font-size: 20px; margin-top: 20px }
.pro-list ul li { line-height: 30px }
.pro-pannel.active .pro-list:before { height: 100px }
.pro-right { width: calc(100% - 190px) }
.pro-li { margin: 30px 5% 0px 0px; padding-bottom: 35px }
.pro-li samp { margin-top: 16px }
.pro-li span { margin-top: 16px; font-size: 24px; letter-spacing: 3px }
.pro-li em { font-size: 18px; letter-spacing: 2px }
.pinfo-1 { margin-top: 28px }
.pinfo-1left { margin-top: 24px }
.pinfo-1type { font-size: 42px }
.pinfo-1title { font-size: 16px }
.pinfo-1title span { font-size: 30px; margin-left: 14px }
.pinfo-1subname { font-size: 20px; margin-top: 25px }
.pinfo-1info { line-height: 26px; margin-top: 16px }
.pinfo-1center ul { margin-top: 40px; box-sizing: border-box; padding-right: 50px }
.pinfo-3 { margin-top: 60px }
.pinfo-3des { font-size: 18px; line-height: 40px }
.pinfo-3pic { margin: 80px auto 0px; padding: 0px 120px }
.pinfo-3pic img { width: auto; height: auto; max-width: 100% }
.pinfo-3content { margin: 60px auto 0px; font-size: 18px; line-height: 40px }
.pinfo-4 { padding: 60px 0px }
.pinfo-4content { margin: 60px auto 0px; font-size: 18px; line-height: 40px }
.pinfo-list { margin-top: 60px }
.pinfo-5 .pinfo-1title span { font-size: 18px }
.pinfo-list.p2 .pinfo-5:nth-child(2) { padding: 50px 0px 60px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1info { font-size: 16px; line-height: 40px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1right { margin-top: 40px }
.pinfo-6 { padding: 60px 0px }
.pinfo-6content { width: 75%; margin: 60px auto 0px }
.pinfo-7 { padding: 45px 0px }
.pinfo-7content { margin-top: 40px }
.pinfo-7content .swiper-button-prev { width: 60px; height: 60px }
.pinfo-7content .swiper-button-next { width: 60px; height: 60px }
.pinfo-7 .swiper-pagination { margin-top: 40px }
.pinfo-7 .swiper-pagination span { width: 50px; height: 6px }
.pinfo-8 { padding-top: 70px }
.pinfo-8 .h3 { font-size: 34px }
.pinfo-8cont .swiper { width: 75%; padding: 40px 12px 110px }
.pinfo-8cont .swiper-slide { padding: 20px 42px }
.pinfo-8cont .swiper-slide span { font-size: 18px; line-height: 30px; margin-top: 20px }
.pinfo-8cont .swiper-slide span em { margin-right: 11px }
.pinfo-8cont .swiper-button-prev { width: 39px; height: 39px }
.pinfo-8cont .swiper-button-next { width: 39px; height: 39px }
.contact-1 { margin: 80px auto 0px }
.contact-1head .h3 { font-size: 42px; padding-bottom: 10px }
.contact-1head .h3:before { height: 3px }
.contact-1content { width: 75%; margin: 30px auto 0px }
.contact-2 { margin: 10px auto 0px; padding-bottom: 12px }
.contact-2content { margin: 60px auto 0px }
.contact-2content .h4 { height: 60px; line-height: 60px; font-size: 24px }
.contact-2content ul li samp { height: 50px }
.contact-2content ul li span { margin: 30px auto 0px; font-size: 18px; line-height: 30px }
.contact-2content ul li:hover span { margin-top: 40px }
.contact-3map p { font-size: 24px }
.contact-4 { padding: 80px 0px }
.contact-4item samp { width: 46px }
.contact-4right { width: calc(100% - 46px - 20px); font-size: 22px }
}
@media screen and (max-width: 1440px) {
.header-center { width: 80% }
.header-right ul li { margin-left: 24px }
.header-right ul li span a { font-size: 15px }
.header-phone { margin-left: 40px; font-size: 15px }
.header-lang { margin-left: 28px }
.sub-nav3 { width: 80vw; position: absolute; left: calc((100% - 80%)/2) }
.sub-body3 { padding: 2vw 6vw }
.sub-3item { width: 29% }
.sub-3pic p { margin-top: 30px }
.footer { padding: 40px calc((100% - 80%)/2) }
.footer-item { margin-right: 50px }
.footer-item .h3 { padding-bottom: 8px }
.footer-item .h3:before { height: 1px }
.footer-item .h3 a { font-size: 16px }
.footer-item ul { margin-top: 6px }
.footer-item ul li { line-height: 28px }
.footer-item ul li a { font-size: 13px }
.footer-phone span { padding-right: 50px; background-size: 36px; height: 36px; line-height: 36px; font-size: 20px }
.footer-phone p { font-size: 36px }
.footer-wx { margin-top: 8px }
.footer-wx img { width: 110px }
.footer-wx span { margin-top: 12px }
.footer-beian { margin-top: 60px }
.leaf-item { width: 50px; height: 50px }
.banner-center em { margin-top: 22px }
.banner-center p { margin-top: 6vw }
.banner .swiper-button-prev { width: 39px; height: 39px }
.banner .swiper-button-next { width: 39px; height: 39px }
.banner-cur { width: 20px; height: 120px }
.hcor { height: 54px }
.hcor ul { width: 80% }
.hcor ul li samp { padding-right: 16px }
.hcor ul li span { font-size: 15px; margin-left: 13px }
.hcor-pannel { height: 50px; top: 54px; padding: 0px calc((100% - 80%)/2) }
.hcor-item { top: 54px; height: 50px; line-height: 50px }
.hpro-center { width: 80%; margin: 11.2vw auto 0px; padding: 0px 100px }
.hpro-type { font-size: 32px }
.hpro-title { font-size: 14px }
.hpro-title span { font-size: 24px; margin-left: 10px }
.hpro-subname { font-size: 17px; margin-top: 24px }
.hpro-info { line-height: 26px; margin-top: 12px }
.hpro-more { margin-top: 30px }
.hsolve-item samp { height: 80px }
.hsolve-item span { font-size: 24px; margin-top: 20px }
.hsolve-info { margin: 15px auto 0px; line-height: 26px; font-size: 13px; padding-top: 26px }
.hsolve-more a { width: 130px; height: 32px; line-height: 32px; margin: 40px auto 0px }
.hsolve-more em { margin-left: 20px }
.hyy { padding: 60px 0px 30px }
.hyy-content { width: 80%; padding: 0px 100px; margin: 50px auto 0px }
.hyy-left .h4 { font-size: 32px }
.hyy-left em { font-size: 22px }
.hyy-info { line-height: 28px; font-size: 14px; margin-top: 20px }
.hyy-more { margin-top: 40px }
.hyy-nav { margin-top: 24px }
.hyy-nav:before { top: 25px }
.hyy-nav .swiper { width: 80% }
.hyy-pannel em { width: 50px; height: 50px }
.hyy-pannel span { font-size: 16px; margin-top: 12px }
.hcase { padding-top: 60px }
.hcase-content { margin-top: 36px }
.hcase-cont { width: 80% }
.hcase-cont .h3 { font-size: 26px }
.hcase-info { line-height: 30px; font-size: 18px; margin-top: 20px }
.hcase-more { margin-top: 30px }
.hcase-bottom { width: 80% }
.hcase-item { height: 60px; margin-top: 40px }
.hcase-item.active { height: 100px }
.hcase-item.active samp { height: 40px }
.hcase-item span { width: 20px }
.hcase-item p { font-size: 16px }
.hnews { padding: 70px 0px }
.hnews-center { padding-bottom: 8px }
.hnews-center:before { height: 2px }
.hnews-center samp { margin-right: 8px }
.hnews-center samp img { height: 32px }
.hnews-center .h3 { font-size: 32px }
.hnews-content { width: calc(80% + 20px); margin: 70px auto 0px; padding: 0px 100px }
.hnews-content .swiper { padding: 0px 10px 60px }
.hnews-cont { padding: 2vw }
.hnews-cont span { margin-top: 10px }
.hnews-cont samp { margin-top: 24px }
.hform { padding: 45px 0px }
.hform form { width: 80%; margin: 24px auto 0px; padding-bottom: 24px }
.hform-input { height: 44px; line-height: 44px; padding: 0px 20px }
.hform-input input { font-size: 14px }
.hform-text textarea { font-size: 14px; padding: 15px 20px }
.hform-button { height: 44px; line-height: 44px }
.hform-button input { font-size: 16px }
.hform-info { width: 80%; line-height: 26px }
.news-col { height: 50px; line-height: 50px; margin-top: -50px }
.news-col ul li { margin: 0px 30px }
.bread { width: 80%; margin: 24px auto 0px }
.news { padding: 24px 0px 60px }
.news-1 { width: 80% }
.news-1right { padding: 0px 35px }
.news-1right em { padding-left: 40px; background-size: 24px; font-size: 20px }
.news-1right span { font-size: 18px; line-height: 28px; margin-top: 12px }
.news-1right p { line-height: 26px; font-size: 14px; margin-top: 8px }
.news-1right samp { margin-top: 3vw }
.news-list { width: 80% }
.news-item { margin: 45px 2.75% 0px 0px; padding-bottom: 24px }
.news-item em { margin: 16px auto 0px }
.news-item span { margin: 16px auto 0px; font-size: 16px; line-height: 26px }
.news-item p { width: 20px; height: 20px }
.news-page { margin-top: 60px }
.news-page a { width: 22px; height: 22px; line-height: 22px; margin: 0px 6px; font-size: 14px }
.banner-ver { width: 80% }
.banner-ver .h1 { font-size: 36px }
.banner-1 { font-size: 16px; margin-top: 32px }
.detail-body { width: 80%; line-height: 34px; font-size: 16px }
.detail-2 { margin: 35px auto }
.detail-3 { padding-bottom: 35px }
.detail-3 span { padding: 0px 20px }
.detail-3 span:first-child:before { width: 2px }
.detail-3 span a { font-size: 16px }
.case-1 { width: 80% }
.case-1pic em { width: 50px; height: 50px; bottom: -25px }
.case-1right .case-1cont { padding: 1.2vw 1vw 1.2vw 1.5vw }
.case-1cont { padding: 1.2vw 1vw 1.2vw 2.5vw }
.case-1cont em { width: 30px; height: 30px }
.case-1cont span { line-height: 30px; font-size: 18px; margin-left: 14px }
.case-1right .case-1pic em { width: 24px; height: 24px; bottom: -12px }
.case-2 { width: 80% }
.case-2item { margin: 45px 2% 0px 0px }
.case-2pic em { width: 24px; height: 24px; bottom: -12px }
.case-2cont em { width: 20px; height: 20px }
.case-2cont span { line-height: 20px; font-size: 16px; margin-left: 10px }
.banner-wz2 { padding-left: 24px; font-size: 40px; letter-spacing: 1px; line-height: 60px; margin-top: calc(-50px/2) }
.banner-wz2:before { width: 5px }
.case-info { padding: 50px 0px 90px }
.cinfo-1 { width: 80% }
.cinfo-1 .h1 { font-size: 32px; letter-spacing: 1px }
.cinfo-1pic { margin-top: 40px }
.cinfo-1 .h3 { font-size: 32px; letter-spacing: 1px; margin-top: 40px }
.cinfo-info { margin: 16px auto 0px; line-height: 30px; font-size: 16px }
.cinfo-body p { margin-top: 30px }
.cinfo-2 { margin-top: 80px }
.cinfo-2content { width: 80%; margin: 40px auto 0px; padding: 0px 100px }
.banner-wz .h3 { font-size: 40px }
.banner-wz p { font-size: 22px; line-height: 32px; margin-top: 20px }
.about-1 { width: 80%; padding: 70px 0px }
.about-1pic samp { transform: translate(-35px, -35px) }
.about-1pannel { margin-top: 20px }
.about-1item { line-height: 28px; font-size: 14px }
.about-1pannel ul li { font-size: 16px }
.about-1pannel ul li:before { width: 6px; height: 6px }
.about-1pannel ul li::after { height: 2px }
.mCSB_inside>.mCSB_container { padding-right: 24px }
.about-2 ul li { height: 120px }
.about-2center span { font-size: 32px }
.about-2center p { font-size: 15px }
.about-2center p:before { width: 40px; height: 3px }
.about-3 { padding-top: 60px }
.about-3content { width: 80%; margin: 40px auto 0px }
.about-3cont samp { height: 8vw }
.about-3cont .h4 { font-size: 32px; padding: 22px 0px }
.about-3info { line-height: 28px; font-size: 14px; padding: 18px 7% 0px; min-height: 160px }
.about-3icon { margin: 12px auto 0px }
.about-4 { padding-top: 60px }
.about-4content { margin-top: 40px; height: 40vw }
.about-4center { width: 80% }
.about-4item samp { height: 70px }
.about-4item .h4 { padding: 20px 0px; font-size: 26px }
.about-4model { margin-top: 12px }
.about-4model span { font-size: 24px }
.about-4model p { font-size: 16px; margin-top: 14px }
.about-5 { padding: 60px 0px 70px }
.about-5content { width: 80%; margin: 50px auto 0px; padding: 0px 100px }
.about-5content .swiper-pagination { margin-top: 60px }
.about-5content .swiper-pagination span { width: 26px; height: 3px }
.about-6 { padding: 60px 0px 100px }
.about-6content { width: 80%; margin: 80px auto 0px; padding: 0px 100px }
.banner-wz3 { font-size: 50px; letter-spacing: 1px; margin-top: calc(-50px/2) }
.server { padding: 23px 0px 50px }
.ser-1head .h3 { font-size: 32px }
.ser-1head .h3:before { height: 2px }
.ser-1content { width: 80%; margin: 50px auto 0px }
.ser-1left { float: right }
.ser-1item .h4 { font-size: 32px; letter-spacing: 0px }
.ser-1info { font-size: 14px; line-height: 26px; margin-top: 12px }
.ser-1 ul { padding: 60px 0px }
.ser-1 ul li { font-size: 16px; margin: 0px 60px }
.ser-1 ul li:before { width: 6px; height: 6px }
.ser-1 ul li:after { height: 2px }
.ser-2 { padding: 40px 0px }
.ser-2 .h3 { font-size: 44px }
.ser-2content { margin: 70px auto 0px }
.ser-3 { padding: 60px 0px }
.ser-3 .h3 { font-size: 32px; padding-bottom: 8px }
.ser-3 .h3:before { width: 200px; height: 2px }
.ser-3list { width: 80%; margin: 70px auto 0px }
.ser-3right span { font-size: 30px; letter-spacing: 0px }
.ser-3info { font-size: 14px; line-height: 26px; margin-top: 15px }
.ser-4 { padding: 80px 0px }
.ser-4center { width: 80% }
.ser-4 .h3 { font-size: 50px }
.ser-4content { margin-top: 40px }
.ser-4item { margin-right: 5vw }
.ser-4title samp { width: 35px; height: 35px }
.ser-4title span { line-height: 35px; font-size: 24px; margin-left: 10px }
.ser-4item ul { margin-top: 20px }
.ser-4item ul li { line-height: 44px; font-size: 18px }
.dz-1 { padding: 30px 0px 50px }
.dz-1info { width: 80%; margin: 40px auto 0px; line-height: 30px; font-size: 14px }
.dz-1content { width: 80%; margin: 30px auto 0px }
.dz-1head { height: 40px; line-height: 40px; font-size: 18px }
.dz-2 { padding: 100px 0px }
.dz-2center { width: 80% }
.dz-2left { width: 290px }
.dz-2left samp img { height: 60px }
.dz-2left .h3 { font-size: 30px; padding-bottom: 12px }
.dz-2left .h3:before { width: 80px; height: 4px }
.dz-2info { line-height: 28px; font-size: 16px; margin-top: 24px }
.dz-2right .swiper-pagination { margin-top: 50px }
.dz-2right .swiper-pagination span { width: 10px; height: 10px }
.dz-3 { padding-top: 40px }
.dz-3content { margin-top: 40px; padding: 120px 0px 100px }
.dz-3content .h4 { font-size: 44px }
.dz-3info { width: 840px; font-size: 20px; line-height: 30px; margin: 28px auto 0px }
.dz-3content ul { margin-top: 50px }
.dz-3content ul li span { width: 90px; height: 90px; font-size: 18px; letter-spacing: 1px }
.dz-3content ul li p { width: 160px; font-size: 14px; line-height: 22px; margin-top: 8px }
.dz-3content ul li samp { width: 30px; margin-top: 30px }
.dz-4 { padding-top: 40px }
.dz-4cntent { margin-top: 40px }
.dz-5 { padding-top: 40px; margin-bottom: 70px }
.dz-5content { width: calc(80% + 80px); margin: 30px auto 0px }
.dz-5pannel { height: 528px }
.dz-5model .h4 { font-size: 40px }
.dz-5model em { font-size: 26px }
.dz-5model p { margin-top: 20px }
.dz-5more { margin-top: 2.4vw }
.dz-5cont { padding: 10px 40px }
.dz-5item { margin-top: 3px; padding: 13px 24px }
.dz-5item p { line-height: 22px; margin-top: 10px }
.dz-5item em { margin-top: 10px }
.solution { width: 80%; margin: 60px auto 0px; padding-bottom: 80px }
.solution:before { width: 60px }
.sol-left { width: 230px; top: calc(56px + 35px); padding: 35px 0px }
.sol-left:before { width: 60px }
.sol-nav samp { width: 42px; height: 28px }
.sol-nav span { margin-left: 17px; font-size: 16px; padding-left: 26px }
.sol-nav span:before { width: 5px }
.sol-right { width: calc(100% - 230px) }
.sol-pic .h4, .sol-model .h4 { font-size: 24px; padding-bottom: 12px }
.sol-pic .h4:before, .sol-model .h4:before { width: 100px; height: 4px }
.sol-model samp { bottom: 14px }
.sol-model span { font-size: 18px; margin-top: 30px }
.sol-info { font-size: 14px }
.sol-more { margin-top: 24px }
.sinfo-1 { margin-top: 45px }
.sinfo-1head .h3 { font-size: 32px; padding-bottom: 8px }
.sinfo-1head .h3:before { height: 2px }
.sinfo-1des { margin: 36px auto 0px; font-size: 15px; line-height: 30px }
.sinfo-1pic { margin-top: 40px }
.sinfo-2 { margin-top: 60px }
.sinfo-2 .h3 { font-size: 32px }
.sinfo-2list { margin-top: 40px }
.sinfo-2right span { font-size: 32px }
.sinfo-2info { font-size: 15px; line-height: 30px; margin-top: 18px }
.sinfo-3 { padding: 100px 0px }
.sinfo-3content { width: 80%; margin: 40px auto 0px }
.sinfo-3left span { height: 54px; line-height: 54px; font-size: 18px; letter-spacing: 0px }
.sinfo-3item p { line-height: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 10px }
.product { width: 80%; margin: 60px auto 0px; padding-bottom: 90px }
.pro-left { float: left; width: 180px; top: calc(56px + 35px); padding: 35px 0px }
.pro-nav samp { height: 28px }
.pro-nav span { font-size: 18px; margin-top: 10px }
.pro-list:before { width: 5px }
.pro-list .h4 { font-size: 18px; margin-top: 18px }
.pro-list ul li { line-height: 26px; font-size: 12px }
.pro-pannel.active .pro-list:before { height: 80px }
.pro-right { width: calc(100% - 180px) }
.pro-li { margin: 25px 5% 0px 0px; padding-bottom: 25px }
.pro-li samp { margin-top: 12px }
.pro-li span { margin-top: 12px; font-size: 20px; letter-spacing: 2px }
.pro-li em { font-size: 16px; letter-spacing: 1px }
.pinfo-1 { margin-top: 24px }
.pinfo-1center { width: 80% }
.pinfo-1left { margin-top: 18px }
.pinfo-1type { font-size: 32px }
.pinfo-1title { font-size: 14px }
.pinfo-1title span { font-size: 24px; margin-left: 10px }
.pinfo-1subname { font-size: 18px; margin-top: 20px }
.pinfo-1info { line-height: 24px; margin-top: 12px }
.pinfo-1center ul { margin-top: 30px }
.pinfo-3 { margin-top: 50px }
.pinfo-3info { width: 80% }
.pinfo-3des { font-size: 16px; line-height: 30px }
.pinfo-3pic { width: 80%; margin: 50px auto 0px; padding: 0px 100px }
.pinfo-3content { width: 80%; margin: 40px auto 0px; font-size: 16px; line-height: 30px }
.pinfo-4 { padding: 50px 0px }
.pinfo-4content { width: 80%; margin: 40px auto 0px; font-size: 16px; line-height: 30px }
.pinfo-list { margin-top: 40px }
.pinfo-5 .pinfo-1title span { font-size: 16px }
.pinfo-list.p2 .pinfo-5:nth-child(2) { padding: 50px 0px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1info { font-size: 14px; line-height: 30px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1right { margin-top: 30px }
.pinfo-6 { padding: 50px 0px }
.pinfo-6content { width: 80%; margin: 40px auto 0px }
.pinfo-7 { padding: 40px 0px }
.pinfo-7content { margin-top: 30px }
.pinfo-7content .swiper-button-prev { width: 40px; height: 40px }
.pinfo-7content .swiper-button-next { width: 40px; height: 40px }
.pinfo-7 .swiper-pagination { margin-top: 30px }
.pinfo-7 .swiper-pagination span { width: 40px; height: 4px }
.pinfo-8 { padding-top: 60px }
.pinfo-8 .h3 { font-size: 32px }
.pinfo-8cont .swiper { width: 80%; padding: 40px 12px 100px }
.pinfo-8cont .swiper-slide { padding: 20px 40px }
.pinfo-8cont .swiper-slide span { font-size: 17px; line-height: 26px; margin-top: 19px }
.pinfo-8cont .swiper-slide span em { margin-right: 10px }
.pinfo-8cont .swiper-button-prev { width: 39px; height: 39px; left: 5% }
.pinfo-8cont .swiper-button-next { width: 39px; height: 39px; right: 5% }
.contact-1 { margin: 60px auto 0px }
.contact-1head .h3 { font-size: 32px; padding-bottom: 8px }
.contact-1head .h3:before { height: 2px }
.contact-1content { width: 80%; margin: 25px auto 0px }
.contact-line1 { background-size: 62.424vw 51.222vw }
.contact-line2 { background-size: 62.424vw 51.222vw }
.contact-2 { padding-bottom: 10px }
.contact-2content { width: 80%; margin: 40px auto 0px }
.contact-2content .h4 { height: 50px; line-height: 50px; font-size: 20px }
.contact-2content ul li samp { height: 40px }
.contact-2content ul li span { margin: 24px auto 0px; font-size: 16px; line-height: 28px }
.contact-2content ul li:hover span { margin-top: 34px }
.contact-3map p { font-size: 20px }
.contact-4 { width: 80%; padding: 60px 0px }
.contact-4item samp { width: 40px }
.contact-4right { width: calc(100% - 40px - 20px); font-size: 18px }
}
@media screen and (max-width: 1366px) {
.hpro-type { font-size: 26px }
.hyy-left .h4 { font-size: 26px }
.hnews-center samp img { height: 26px }
.hnews-center .h3 { font-size: 26px }
.cinfo-1 .h1 { font-size: 26px }
.cinfo-1 .h3 { font-size: 26px }
.about-3cont .h4 { font-size: 26px }
.ser-1head .h3 { font-size: 26px }
.ser-1item .h4 { font-size: 26px }
.ser-3 .h3 { font-size: 26px }
.sinfo-1head .h3 { font-size: 26px }
.sinfo-2 .h3 { font-size: 26px }
.sinfo-2right span { font-size: 26px }
.pinfo-1type { font-size: 26px }
.contact-1head .h3 { font-size: 26px }
}
@media screen and (max-width: 1280px) {
.header-right ul li { margin-left: 25px; padding: 0px }
.header-phone { margin-left: 32px }
.header-lang { margin-left: 24px }
.footer { padding: 35px calc((100% - 80%)/2) }
.footer-item { margin-right: 46px }
.footer-phone span { padding-right: 44px; background-size: 30px; height: 32px; line-height: 32px; font-size: 18px }
.footer-phone p { font-size: 30px }
.footer-wx img { width: 100px }
.footer-wx span { margin-top: 10px }
.footer-beian { margin-top: 40px }
.leaf-item { width: 34px; height: 34px }
.leaf-item samp img { width: 24px }
.leaf-item.leaf-top samp img { width: 16px }
.leaf-phone { height: 50px; line-height: 50px; right: 46px; font-size: 18px; top: -4px }
.leaf-wx { right: 46px }
.banner { height: calc(100vh - 56px) }
.banner .swiper-slide samp img { width: 100%; height: 100%; object-fit: cover }
.banner-center em { margin-top: 20px }
.banner-center p { margin-top: 5vw }
.banner .swiper-button-prev { width: 39px; height: 39px }
.banner .swiper-button-next { width: 39px; height: 39px }
.banner-cur { width: 20px; height: 80px }
.hpro-center { margin: 11vw auto 0px; padding: 0px 80px }
.hpro-type { font-size: 24px }
.hpro-title span { font-size: 20px }
.hpro-subname { font-size: 16px; margin-top: 20px }
.hpro-info { line-height: 24px; margin-top: 10px }
.hpro-more { margin-top: 25px }
.hsolve-item samp { height: 60px }
.hsolve-item span { font-size: 20px }
.hsolve-info { width: 80%; line-height: 24px; font-size: 12px; padding-top: 20px }
.hsolve-more a { width: 130px; height: 32px; line-height: 32px; margin: 30px auto 0px }
.hyy { padding: 50px 0px 30px }
.hyy-content { padding: 0px 80px; margin: 40px auto 0px }
.hyy-left .h4 { font-size: 24px }
.hyy-left em { font-size: 20px }
.hyy-info { line-height: 26px; margin-top: 18px }
.hyy-more { margin-top: 30px }
.hyy-nav { margin-top: 20px }
.hcase { padding-top: 50px }
.hcase-content { margin-top: 30px }
.hcase-cont .h3 { font-size: 22px }
.hcase-info { line-height: 28px; font-size: 15px; margin-top: 18px }
.hcase-more { margin-top: 25px }
.hnews { padding: 50px 0px }
.hnews-center samp img { height: 24px }
.hnews-center .h3 { font-size: 24px }
.hnews-content { width: calc(80% + 20px); margin: 40px auto 0px; padding: 0px 80px }
.hnews-content .swiper { padding: 0px 10px 50px }
.hnews-cont samp { margin-top: 20px }
.hform { padding: 40px 0px }
.hform-head img { width: 220px; height: auto }
.hform form { margin: 20px auto 0px; padding-bottom: 20px }
.hform-input { height: 40px; line-height: 40px }
.hform-button { height: 40px; line-height: 40px }
.hform-info { line-height: 24px }
.news { padding: 24px 0px 60px }
.news-1right { padding: 0px 30px }
.news-1right em { padding-left: 30px; background-size: 20px; font-size: 18px; letter-spacing: 0px }
.news-1right span { font-size: 16px; line-height: 24px; margin-top: 10px }
.news-1right p { line-height: 24px }
.news-1right samp { margin-top: 2.5vw }
.news-item { margin: 40px 2.75% 0px 0px; padding-bottom: 20px }
.news-item em { margin: 12px auto 0px }
.news-item span { margin: 12px auto 0px; font-size: 14px; line-height: 23px }
.news-page { margin-top: 50px }
.news-page a { width: 20px; height: 20px; line-height: 20px; font-size: 13px }
.banner-ver .h1 { font-size: 28px }
.banner-1 { font-size: 14px; margin-top: 25px }
.detail-body { line-height: 30px; font-size: 15px }
.detail-2 { margin: 30px auto }
.detail-3 { padding-bottom: 30px }
.detail-3 span { padding: 0px 16px }
.detail-3 span a { font-size: 14px }
.case-1pic em { width: 32px; height: 32px; bottom: -16px }
.case-1cont { padding: 1.2vw 1vw 1.2vw 2vw }
.case-1cont em { width: 24px; height: 24px }
.case-1cont span { line-height: 24px; font-size: 16px; margin-left: 10px }
.case-2item { margin: 35px 2% 0px 0px }
.case-2pic em { width: 22px; height: 22px; bottom: -11px }
.case-2cont { padding: 1.2vw }
.case-2cont span { font-size: 14px; margin-left: 8px }
.banner-wz2 { padding-left: 20px; font-size: 32px; letter-spacing: 0px; line-height: 42px; margin-top: calc(-64px/2) }
.banner-wz2:before { width: 4px }
.case-info { padding: 45px 0px 70px }
.cinfo-1 .h1 { font-size: 24px; letter-spacing: 0px }
.cinfo-1pic { margin-top: 30px }
.cinfo-1 .h3 { font-size: 24px; letter-spacing: 0px; margin-top: 30px }
.cinfo-info { margin: 12px auto 0px; line-height: 28px; font-size: 14px }
.cinfo-body p { margin-top: 24px }
.cinfo-2 { margin-top: 60px }
.cinfo-2content { margin: 20px auto 0px; padding: 0px 80px }
.banner-wz .h3 { font-size: 32px }
.banner-wz p { font-size: 18px; line-height: 28px; margin-top: 16px }
.about-1 { padding: 50px 0px }
.about-1pic samp { transform: translate(-30px, -30px) }
.about-1pannel { margin-top: 15px }
.about-1item { line-height: 26px }
.about-2 ul li { height: 100px }
.about-2center span { font-size: 28px }
.about-2center p { font-size: 14px }
.about-2center p:before { width: 30px; height: 2px }
.about-3 { padding-top: 50px }
.about-3content { margin: 30px auto 0px }
.about-3cont samp { height: 7vw }
.about-3cont .h4 { font-size: 24px; padding: 20px 0px }
.about-3info { line-height: 25px; padding: 16px 7% 0px; min-height: 140px }
.about-3icon { margin: 10px auto 0px }
.about-4 { padding-top: 50px }
.about-4content { margin-top: 30px }
.about-4item samp { height: 60px }
.about-4item .h4 { font-size: 22px }
.about-4model { margin-top: 10px }
.about-4model span { font-size: 20px }
.about-4model p { font-size: 14px; margin-top: 12px }
.about-5content { margin: 30px auto 0px; padding: 0px 80px }
.about-5content .swiper-pagination { margin-top: 40px }
.about-5content .swiper-pagination span { width: 24px; height: 2px }
.about-6 { padding: 60px 0px 70px }
.about-6content { margin: 50px auto 0px; padding: 0px 80px }
.banner-wz3 { font-size: 44px; letter-spacing: 0px; margin-top: calc(-64px/2) }
.server { padding: 23px 0px 40px }
.ser-1head .h3 { font-size: 24px }
.ser-1content { margin: 40px auto 0px }
.ser-1left { float: right }
.ser-1item .h4 { font-size: 24px }
.ser-1info { margin-top: 10px }
.ser-1 ul { padding: 50px 0px }
.ser-1 ul li { margin: 0px 50px }
.ser-2 .h3 { font-size: 36px }
.ser-2content { margin: 50px auto 0px }
.ser-3 { padding: 50px 0px }
.ser-3 .h3 { font-size: 24px }
.ser-3 .h3:before { width: 180px }
.ser-3list { margin: 50px auto 0px }
.ser-3right span { font-size: 24px }
.ser-3info { line-height: 24px; margin-top: 12px }
.ser-4 { padding: 70px 0px }
.ser-4 .h3 { font-size: 40px }
.ser-4content { margin-top: 30px }
.ser-4title samp { width: 30px; height: 30px }
.ser-4title span { line-height: 30px; font-size: 22px }
.ser-4item ul { margin-top: 18px }
.ser-4item ul li { line-height: 40px; font-size: 16px }
.dz-1 { padding: 30px 0px 45px }
.dz-1info { margin: 30px auto 0px; line-height: 28px }
.dz-1content { margin: 24px auto 0px }
.dz-1head { font-size: 17px }
.dz-2 { padding: 90px 0px }
.dz-2left { width: 270px }
.dz-2left samp img { height: 50px }
.dz-2left .h3 { font-size: 24px; padding-bottom: 10px }
.dz-2left .h3:before { width: 70px; height: 3px }
.dz-2info { line-height: 26px; font-size: 14px; margin-top: 20px }
.dz-2right .swiper-pagination { margin-top: 40px }
.dz-3content { padding: 90px 0px }
.dz-3content .h4 { font-size: 36px }
.dz-3info { width: 800px; font-size: 18px; line-height: 28px; margin: 24px auto 0px }
.dz-3content ul { margin-top: 40px }
.dz-5 { margin-bottom: 50px }
.dz-5content { width: calc(80% + 80px) }
.dz-5model .h4 { font-size: 32px }
.dz-5model em { font-size: 22px }
.dz-5cont { padding: 10px 40px }
.dz-5item { padding: 13px 20px }
.solution { margin: 50px auto 0px; padding-bottom: 70px }
.sol-left { width: 200px; top: calc(56px + 30px); padding: 30px 0px }
.sol-right { width: calc(100% - 200px) }
.sol-pic .h4, .sol-model .h4 { font-size: 22px; padding-bottom: 10px }
.sol-pic .h4:before, .sol-model .h4:before { width: 80px; height: 3px }
.sol-model span { font-size: 17px; margin-top: 20px }
.sol-more { margin-top: 20px }
.sol-info { padding-right: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 }
.sinfo-1 { margin-top: 40px }
.sinfo-1head .h3 { font-size: 24px }
.sinfo-1des { width: 80%; margin: 24px auto 0px; font-size: 14px; line-height: 28px }
.sinfo-1pic { margin-top: 30px }
.sinfo-2 { margin-top: 50px }
.sinfo-2 .h3 { font-size: 24px }
.sinfo-2list { margin-top: 30px }
.sinfo-2right span { font-size: 24px }
.sinfo-2info { font-size: 14px; line-height: 26px; margin-top: 12px }
.sinfo-3 { padding: 80px 0px }
.sinfo-3content { margin: 30px auto 0px }
.sinfo-3left span { height: 50px; line-height: 50px; font-size: 16px }
.sinfo-3item p { margin-top: 8px }
.sinfo-3item span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1 }
.product { margin: 50px auto 0px; padding-bottom: 70px }
.pro-left { float: left; width: 180px; top: calc(56px + 30px); padding: 30px 0px }
.pro-right { width: calc(100% - 180px) }
.pinfo-1 { margin-top: 20px }
.pinfo-1left { margin-top: 14px }
.pinfo-1type { font-size: 24px }
.pinfo-1title span { font-size: 20px }
.pinfo-1subname { font-size: 16px; margin-top: 15px }
.pinfo-1info { line-height: 22px; margin-top: 10px }
.pinfo-1center ul { margin-top: 20px; padding-right: 70px }
.pinfo-3 { margin-top: 40px }
.pinfo-3des { line-height: 28px }
.pinfo-3pic { margin: 40px auto 0px; padding: 0px 80px }
.pinfo-3content { width: 80%; margin: 30px auto 0px; line-height: 28px }
.pinfo-4content { margin: 30px auto 0px; line-height: 28px }
.pinfo-list { margin-top: 30px }
.pinfo-list.p2 .pinfo-5:nth-child(2) { padding: 40px 0px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1info { line-height: 26px }
.pinfo-list.p2 .pinfo-5:nth-child(2) .pinfo-1right { margin-top: 20px }
.pinfo-6content { margin: 30px auto 0px }
.pinfo-7 { padding: 35px 0px }
.pinfo-7content { margin-top: 30px }
.pinfo-7content .swiper-button-prev { width: 35px; height: 35px }
.pinfo-7content .swiper-button-next { width: 35px; height: 35px }
.pinfo-7 .swiper-pagination { margin-top: 25px }
.pinfo-8 { padding-top: 50px }
.pinfo-8 .h3 { font-size: 24px }
.pinfo-8cont .swiper { width: 80%; padding: 40px 12px 80px }
.pinfo-8cont .swiper-slide { padding: 20px 36px }
.pinfo-8cont .swiper-slide span { font-size: 16px; line-height: 25px; margin-top: 18px }
.pinfo-8cont .swiper-button-prev { width: 39px; height: 39px }
.pinfo-8cont .swiper-button-next { width: 39px; height: 39px }
.contact-1 { margin: 50px auto 0px }
.contact-1head .h3 { font-size: 24px }
.contact-2content { margin: 30px auto 0px }
.contact-2content ul li samp { height: 30px }
.contact-2content ul li span { margin: 20px auto 0px; font-size: 14px; line-height: 24px; min-height: 72px }
.contact-2content ul li:hover span { margin-top: 30px }
.contact-3map p { font-size: 20px }
.contact-3 { height: 500px }
.amap-container span img { width: 40px !important; height: auto !important }
.contact-4 { padding: 50px 0px }
.contact-4item samp { width: 36px }
.contact-4right { width: calc(100% - 36px - 18px); font-size: 16px }
}
@media screen and (max-width: 1060px) {
.header-right ul li { margin-left: 15px }
}
@media screen and (max-width: 1000px) {
.header { height: 50px; line-height: 50px }
.header-center { width: 90% }
.logo { width: 130px }
.menu { float: right; width: 24px; display: block; position: relative; z-index: 820; margin-top: 10px; cursor: pointer }
.menu span { float: left; width: 100%; height: 2px; background: #0d6a89; margin-top: 6px; border-radius: 2px }
.header-slide .menu { margin-top: 15px }
.header-slide .menu span:nth-child(1) { transform: rotate(45deg) translateY(5px) }
.header-slide .menu span:nth-child(2) { transform: rotate(-45deg) translateY(-6px) }
.header-slide .menu span:nth-child(3) { display: none }
.header-right { float: none; width: 100%; height: calc(100% - 50px); position: fixed; left: -100%; top: 50px; z-index: 2000; background: #fff; box-sizing: border-box; border-top: 1px #eee solid; overflow-y: auto; -webkit-transition: all 0.6s ease 0.06s; -moz-transition: all 0.6s ease 0.06s; -ms-transition: all 0.6s ease 0.06s; -o-transition: all 0.6s ease 0.06s; transition: all 0.6s ease 0.06s }
.header-right ul, .header-right ul li { float: left; width: auto; height: 100%; position: relative }
.header-right ul { float: none; width: 84%; margin: 30px auto 0px; height: auto; overflow: hidden }
.header-right ul li { margin-left: 0px; position: relative; border-bottom: 1px #eee solid; width: 100%; height: auto; position: relative !important }
.header-right ul li span { width: 80%; line-height: 50px }
.header-right ul li span a { color: #333 }
.header-right ul li samp { width: 50px; height: 50px; position: absolute; z-index: 12; cursor: pointer; background: url("../images/icon.png") no-repeat center; right: 0px; top: 0px; display: block }
.header-right ul li samp.on { transform: rotate(90deg) }
.header-phone { float: none; width: 84%; margin: 10px auto 0px; box-sizing: border-box }
.header-phone a { color: #0d6a89 }
.header-lang { display: none }
.header-langsj { width: 84%; margin: 10px auto 0px; overflow: hidden; display: block; line-height: normal }
.header-langsj a { font-size: 14px; color: #333 }
.header-langsj a:hover { color: #0d6a89 }
.sub-nav { float: left; width: 98%; position: relative; left: 0%; transform: translateX(0%) scale(1); top: 0; background: #fff; border-radius: 4px; box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.03); opacity: 1; transition: none; margin: 0px 1% 2%; display: none; visibility: visible }
.sub-body { padding: 10px 15px }
.sub-body a { height: 40px; padding-left: 10px; border-bottom: 1px #c5c5c5 dashed }
.sub-body em { width: 20px; height: 20px }
.sub-body p { font-size: 14px }
.sub-body2 { padding: 10px 15px }
.sub-body2 a { border-bottom: 1px #c5c5c5 dashed; padding: 15px 0px; justify-content: flex-start }
.sub-body2 em { width: 24px; height: 20px; margin-right: 12px }
.sub-body2 p { font-size: 14px; line-height: 20px; padding-left: 12px }
.sub-body2 p:before { width: 1px }
.header-right ul li:hover .sub-nav { opacity: 1; visibility: visible; transform: translateX(0%) scale(1) }
.header-slide .header-right { left: 0px }
.sub-nav3 { float: left; width: 98%; position: relative; left: 0%; transform: scale(1); top: 0; background: #fff; border-radius: 4px; box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.03); opacity: 1; transition: none; margin: 0px 1% 2%; display: none; visibility: visible }
.sub-body3 { padding: 20px }
.footer { padding: 30px calc((100% - 90%)/2) }
.footer-item { margin-right: 32px }
.footer-item .h3 a { font-size: 14px }
.footer-item ul li { line-height: 24px }
.footer-item ul li a { font-size: 12px }
.footer-phone span { padding-right: 32px; background-size: 24px; height: 24px; line-height: 24px; font-size: 16px }
.footer-phone p { font-size: 24px }
.footer-beian { margin-top: 30px }
.leaf-right { display: none }
.banner { margin-top: 50px; height: auto }
.banner .swiper-button-prev { width: 32px; height: 32px; left: 5% }
.banner .swiper-button-next { width: 32px; height: 32px; right: 5% }
.banner-cur { display: none }
.hcor { height: 50px }
.hcor ul { width: 90% }
.hcor-pannel, .hcor-item { display: none }
.hpro-center { width: 90%; margin: 12vw auto 0px; padding: 0px 60px; box-sizing: border-box }
.hpro-left { width: 32% }
.hpro-type { font-size: 20px }
.hpro-title span { font-size: 16px }
.hpro-subname { font-size: 14px; margin-top: 10px }
.hpro-info { line-height: 24px; margin-top: 8px; font-size: 12px }
.hpro-more { margin-top: 20px }
.hpro-more a { width: 110px; height: 27px; line-height: 27px; font-size: 12px }
.hpro .swiper-button-prev { width: 32px; height: 32px }
.hpro .swiper-button-next { width: 32px; height: 32px }
.hsolve-item { height: 60vw }
.hsolve-item samp { height: 50px }
.hsolve-item span { font-size: 18px }
.hsolve-more a { width: 110px; height: 27px; line-height: 27px; margin: 30px auto 0px; font-size: 12px }
.hyy-content { width: 90%; padding: 0px 60px; margin: 30px auto 0px; box-sizing: border-box }
.hyy-left .h4 { font-size: 20px }
.hyy-left em { font-size: 18px }
.hyy-info { line-height: 24px; margin-top: 15px }
.hyy-more { margin-top: 24px }
.hyy-more a { width: 110px; height: 27px; line-height: 27px; font-size: 12px }
.hyy-content .swiper-button-prev { width: 32px; height: 32px }
.hyy-content .swiper-button-next { width: 32px; height: 32px }
.hyy-nav { margin-top: 20px }
.hyy-nav .swiper { width: 90% }
.hcase { padding-top: 40px }
.hcase-content { margin-top: 25px }
.hcase-cont { width: 90% }
.hcase-cont .h3 { font-size: 20px }
.hcase-info { line-height: 25px; font-size: 14px; margin-top: 12px; width: 80% }
.hcase-more { margin-top: 20px }
.hcase-more a { width: 110px; height: 27px; line-height: 27px; font-size: 12px }
.hcase-bottom { width: 90% }
.hnews-center samp img { height: 20px }
.hnews-center .h3 { font-size: 20px }
.hnews-content { width: calc(90% + 20px); margin: 30px auto 0px; padding: 0px 60px; box-sizing: border-box }
.hnews-content .swiper { padding: 0px 10px 40px }
.hnews-cont samp { width: 20px; height: 20px; margin-top: 10px }
.hnews-more { width: 110px; height: 27px; line-height: 27px }
.hnews-more a { font-size: 12px }
.hnews-content .swiper-button-prev { width: 32px; height: 32px }
.hnews-content .swiper-button-next { width: 32px; height: 32px }
.hform { padding: 35px 0px }
.hform-head img { width: 200px }
.hform form { width: 90% }
.hform-input { height: 36px; line-height: 36px }
.hform-button { height: 36px; line-height: 36px }
.hform-info { width: 90% }
.banner-news { margin-top: 50px }
.news-col ul li { margin: 0px 15px }
.bread { width: 90%; margin-top: 15px }
.news { padding: 24px 0px 60px }
.news-1 { width: 90% }
.news-1right samp { width: 32px; height: 32px; margin-top: 2vw }
.news-list { width: 90% }
.news-item { margin: 30px 2.75% 0px 0px }
.news-page { margin-top: 40px }
.news-page a { font-size: 12px }
.banner-ver { width: 90% }
.banner-ver .h1 { font-size: 22px }
.banner-1 { margin-top: 20px }
.detail-body { width: 90%; line-height: 25px; font-size: 14px }
.detail-2 { width: 110px; height: 27px; line-height: 27px; font-size: 12px; margin: 25px auto }
.detail-3 { padding-bottom: 25px }
.detail-3 span { padding: 0px 14px }
.detail-3 span a { font-size: 13px }
.case-1 { width: 90% }
.case-1pic em { width: 28px; height: 28px; bottom: -14px }
.case-1cont span { font-size: 15px }
.case-2 { width: 90% }
.case-2item { margin: 30px 2% 0px 0px }
.banner-wz2 { padding-left: 20px; font-size: 24px; line-height: 36px; margin-top: calc(-64px/2) }
.banner-wz2:before { width: 3px }
.case-info { padding: 45px 0px 60px }
.cinfo-1 { width: 90% }
.cinfo-1 .h1 { font-size: 20px }
.cinfo-1pic { margin-top: 25px }
.cinfo-1 .h3 { font-size: 20px; margin-top: 25px }
.cinfo-info { line-height: 24px; width: 100% }
.cinfo-body p { margin-top: 20px }
.cinfo-2 { margin-top: 40px }
.cinfo-2content { width: 90%; padding: 0px 40px }
.cinfo-2 .swiper-button-prev { width: 32px; height: 32px }
.cinfo-2 .swiper-button-next { width: 32px; height: 32px }
.banner-wz .h3 { font-size: 26px }
.banner-wz p { font-size: 16px; line-height: 26px; margin-top: 12px }
.about-1 { width: 90% }
.about-1item { height: 34vw }
.about-2center span { font-size: 26px }
.about-3content { width: 90% }
.about-3cont samp { height: 6vw }
.about-3cont .h4 { font-size: 20px; padding: 18px 0px }
.about-3info { line-height: 24px; padding: 16px 0px 0px; min-height: 110px }
.about-3icon { width: 32px }
.about-3item:hover .about-3icon { height: 32px }
.about-4content { margin-top: 20px }
.about-4center { width: 90% }
.about-4item samp { height: 50px }
.about-4item .h4 { font-size: 20px }
.about-4model span { font-size: 16px }
.about-5content { width: 90%; margin: 30px auto 0px; padding: 0px 50px }
.about-5content .swiper-button-prev { width: 32px; height: 32px }
.about-5content .swiper-button-next { width: 32px; height: 32px }
.about-5content .swiper-pagination { margin-top: 30px }
.about-6 { padding: 50px 0px 60px }
.about-6content { width: 90%; margin: 40px auto 0px; padding: 0px 50px }
.about-6content .swiper-button-prev { width: 32px; height: 32px }
.about-6content .swiper-button-next { width: 32px; height: 32px }
.banner-wz3 { font-size: 32px; margin-top: calc(-64px/2) }
.ser-1head .h3 { font-size: 20px }
.ser-1content { width: 90%; margin: 30px auto 0px }
.ser-1left { float: right }
.ser-1item .h4 { font-size: 20px }
.ser-1info { margin-top: 10px; max-height: 20vw }
.ser-1 ul { padding: 40px 0px }
.ser-1 ul li { margin: 0px 40px }
.ser-2 .h3 { font-size: 32px }
.ser-2content { margin: 40px auto 0px }
.ser-3 { padding: 50px 0px }
.ser-3 .h3 { font-size: 20px }
.ser-3 .h3:before { width: 150px }
.ser-3list { width: 90%; margin: 40px auto 0px }
.ser-3right span { font-size: 20px }
.ser-3info { line-height: 22px; margin-top: 8px; font-size: 12px }
.ser-4 { padding: 60px 0px }
.ser-4center { width: 90% }
.ser-4 .h3 { font-size: 32px }
.ser-4content { margin-top: 25px }
.ser-4title samp { width: 24px; height: 24px }
.ser-4title span { line-height: 24px; font-size: 20px }
.ser-4item ul { margin-top: 16px }
.ser-4item ul li { line-height: 34px; font-size: 14px }
.dz-1info { width: 90%; margin: 20px auto 0px; line-height: 24px }
.dz-1content { width: 90%; margin: 20px auto 0px }
.dz-1head { font-size: 16px }
.dz-2 { padding: 50px 0px }
.dz-2center { width: 90% }
.dz-2left { width: 260px }
.dz-2left samp img { height: 44px }
.dz-2left .h3 { font-size: 20px }
.dz-3content { padding: 60px 0px }
.dz-3content .h4 { font-size: 32px }
.dz-3info { width: 70%; font-size: 16px; line-height: 24px; margin: 20px auto 0px }
.dz-3content ul { margin-top: 30px }
.dz-5 { margin-bottom: 40px }
.dz-5content { width: calc(90% + 60px) }
.dz-5model .h4 { font-size: 24px }
.dz-5model em { font-size: 18px }
.dz-5more a { width: 110px; height: 27px; line-height: 27px; font-size: 12px }
.dz-5cont { padding: 10px 30px }
.dz-5item em { width: 20px; height: 20px }
.dz-5pannel { height: 490px }
.solution { width: 90%; margin: 50px auto 0px; padding-bottom: 60px }
.sol-left { width: 200px; top: calc(50px + 25px); padding: 25px 0px }
.sol-right { width: calc(100% - 200px) }
.sol-pic .h4, .sol-model .h4 { font-size: 20px }
.sol-model span { font-size: 16px; margin-top: 16px }
.sol-more { margin-top: 16px }
.sol-more a { width: 110px; height: 27px; line-height: 27px; font-size: 12px }
.sinfo-1head .h3 { font-size: 20px }
.sinfo-1des { width: 90%; margin: 20px auto 0px; line-height: 26px }
.sinfo-1pic { margin-top: 30px }
.sinfo-2 { margin-top: 50px }
.sinfo-2 .h3 { font-size: 20px }
.sinfo-2list { margin-top: 30px }
.sinfo-2right span { font-size: 20px }
.sinfo-2info { font-size: 14px; line-height: 26px; margin-top: 12px }
.sinfo-3 { padding: 60px 0px }
.sinfo-3content { width: 90%; margin: 25px auto 0px }
.sinfo-3item p { margin-top: 4px }
.product { width: 90%; margin: 50px auto 0px; padding-bottom: 60px }
.pro-left { float: left; width: 170px; top: calc(50px + 25px); padding: 25px 0px }
.pro-right { width: calc(100% - 170px) }
.pinfo-1center { width: 90% }
.pinfo-1left { width: 32% }
.pinfo-1type { font-size: 20px }
.pinfo-1title span { font-size: 16px }
.pinfo-1subname { font-size: 14px; margin-top: 12px }
.pinfo-1center ul { margin-top: 18px }
.pinfo-1right { width: 50%; margin-right: 13% }
.pinfo-3info { width: 90% }
.pinfo-3des { line-height: 26px }
.pinfo-3pic { width: 90%; margin: 30px auto 0px; padding: 0px 50px }
.pinfo-3pic .swiper-button-prev { width: 32px; height: 32px }
.pinfo-3pic .swiper-button-next { width: 32px; height: 32px }
.pinfo-3content { width: 90%; margin: 30px auto 0px; line-height: 26px; padding: 0px }
.pinfo-4content { width: 90%; margin: 30px auto 0px; line-height: 26px }
.pinfo-list { margin-top: 20px }
.pinfo-6content { width: 90% }
.pinfo-7content { margin-top: 20px }
.pinfo-7content .swiper-button-prev { width: 35px; height: 35px }
.pinfo-7content .swiper-button-next { width: 35px; height: 35px }
.pinfo-7 .swiper-pagination { margin-top: 20px }
.pinfo-8 { padding-top: 40px }
.pinfo-8 .h3 { font-size: 20px }
.pinfo-8cont .swiper { width: 90%; padding: 35px 12px 60px }
.pinfo-8cont .swiper-slide { padding: 20px 32px }
.pinfo-8cont .swiper-button-prev { width: 32px; height: 32px; left: 1% }
.pinfo-8cont .swiper-button-next { width: 32px; height: 32px; right: 1% }
.contact-1head .h3 { font-size: 20px }
.contact-1content { width: 90% }
.contact-2content { width: 90% }
.contact-4 { width: 90%; padding: 40px 0px }
.contact-4item samp { width: 32px }
.contact-4right { width: calc(100% - 32px - 18px); font-size: 14px }
}
@media screen and (max-width: 768px) {
.sub-content3 { display: block }
.sub-3item { width: 100%; margin-top: 20px }
.sub-3name { font-size: 13px }
.sub-3name em { font-size: 16px }
.sub-3pic em { height: 32vw }
.footer { display: flex; justify-content: center; flex-wrap: wrap }
.footer-item { display: none }
.footer-phone { text-align: center }
.footer-phone span { width: auto; display: inline-block }
.footer-wx { justify-content: center }
.footer-beian { text-align: center; margin-top: 20px }
.footer-beian a { margin: 0px 7px }
.banner-center span img { width: 35% }
.banner-center em { margin-top: 2px }
.banner-center em img { width: 60% }
.banner-center p img { width: 50% }
.banner .swiper-button-prev { width: 22px; height: 22px }
.banner .swiper-button-next { width: 22px; height: 22px }
.hcor { display: none }
.hpro { height: auto }
.hpro-center { margin: 0vw auto; padding: 30px 50px; width: 100% }
.hpro-left { width: 100%; text-align: left }
.hpro-type { font-size: 18px }
.hpro-title span { font-size: 16px }
.hpro-subname { font-size: 14px; margin-top: 10px }
.hpro-info { line-height: 24px; margin-top: 8px; font-size: 12px }
.hpro-more { float: left }
.hpro .swiper-button-prev { width: 22px; height: 22px }
.hpro .swiper-button-next { width: 22px; height: 22px }
.hpro-right { width: 100%; margin-top: 30px }
.hpro-right img { max-width: 95% }
.hsolve-item { width: 100%; height: auto; padding: 30px 0px }
.hsolve-item samp { height: 40px }
.hsolve-item span { font-size: 16px; margin-top: 12px }
.hsolve-pannel { display: block }
.hyy { padding: 30px 0px }
.hyy-content { padding: 0px 50px; margin: 20px auto 0px; width: 100% }
.hyy-left { width: 100% }
.hyy-left .h4 { font-size: 18px }
.hyy-left em { font-size: 16px }
.hyy-info { line-height: 22px; margin-top: 12px; font-size: 12px }
.hyy-more { margin-top: 16px }
.hyy-content .swiper-button-prev { width: 22px; height: 22px }
.hyy-content .swiper-button-next { width: 22px; height: 22px }
.hyy-right { width: 100%; margin-top: 30px; height: 45.66vw }
.hyy-nav { display: none }
.hcase { padding-top: 30px }
.hcase-content { margin-top: 20px }
.hcase-top { position: relative }
.hcase-top .swiper-slide img { height: 310px; object-fit: cover }
.hcase-info { width: 100%; font-size: 12px; line-height: 22px }
.hcase-cont { width: 80% }
.hcase-bottom { display: none }
.hcase-content .swiper-button-prev { width: 22px; height: 22px; overflow: hidden }
.hcase-content .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.hcase-content .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.hcase-content .swiper-button-next { width: 22px; height: 22px; overflow: hidden }
.hcase-content .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100% }
.hcase-content .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8.png") no-repeat; background-size: 100%; opacity: 0 }
.hcase-content .swiper-button-prev:hover:before, .hcase-content .swiper-button-next:hover:before { opacity: 0 }
.hcase-content .swiper-button-prev:hover:after, .hcase-content .swiper-button-next:hover:after { opacity: 1 }
.hnews { padding: 30px 0px }
.hnews-center .h3 { font-size: 18px }
.hnews-content { width: calc(90% + 20px); margin: 20px auto 0px; padding: 0px 40px }
.hnews-content .swiper { padding: 0px 10px 30px }
.hnews-content .swiper-button-prev { width: 22px; height: 22px }
.hnews-content .swiper-button-next { width: 22px; height: 22px }
.hnews-pic { height: 48vw }
.hform form { padding-bottom: 12px; margin-top: 10px }
.hform { padding: 30px 0px }
.hform-head img { width: 170px }
.hform-input { width: 100% }
.hform-info { font-size: 12px; line-height: 22px }
.news-col { display: none }
.bread { font-size: 12px }
.news { padding: 24px 0px 30px }
.news-1 a { flex-wrap: wrap }
.news-1left { width: 100% }
.news-1right { width: 100%; padding: 24px }
.news-1right samp { width: 22px; height: 22px }
.news-item { width: 100%; margin: 15px 0% 0px 0px }
.news-pic { height: auto }
.news-item em, .news-item span { width: 90% }
.news-page { margin-top: 30px }
.banner-ver { height: 100% }
.banner-ver .h1 { font-size: 18px }
.banner-1 { margin-top: 10px }
.detail-body { line-height: 24px; margin-top: 20px }
.detail-3 { padding-bottom: 25px; flex-wrap: wrap; padding: 0px 5% 30px; box-sizing: border-box; overflow: hidden }
.detail-3 span { padding: 0px; width: 100%; margin-top: 5px }
.detail-3 span { max-width: 100% }
.detail-3 span:first-child::before { display: none }
.case-1left { width: 100% }
.case-1pic { height: auto }
.case-1cont, .case-1right .case-1cont { padding: 13px }
.case-1cont span { font-size: 15px }
.case-1right { width: 100%; margin-top: 20px }
.case-2item { margin: 20px 0% 0px 0px; width: 100% }
.case-2pic { height: auto }
.case-2cont { padding: 13px }
.banner-wz2 { padding-left: 16px; font-size: 18px; line-height: 26px; margin-top: 0px }
.case-info { padding: 30px 0px }
.cinfo-2 { margin-top: 20px }
.cinfo-2content { padding: 0px 20px; box-sizing: border-box; width: 100%; margin-top: 10px }
.cinfo-2 .swiper-button-prev { width: 22px; height: 22px; left: 5px }
.cinfo-2 .swiper-button-next { width: 22px; height: 22px; right: 5px }
.banner-wz { width: 74% }
.banner-wz .h3 { font-size: 20px }
.banner-wz p { font-size: 14px; line-height: 23px; margin-top: 8px }
.about-1 { padding: 30px 0px }
.about-1pic { width: 100%; float: left }
.about-1pic samp { transform: translate(0px, 0px) }
.about-1pannel { width: 100% }
.about-1pannel ul { margin-top: 25px; width: 100% }
.about-1item { height: 38vw }
.about-2 ul { display: flex; justify-content: space-between; flex-wrap: wrap }
.about-2 ul li { width: 33.1% !important; padding: 0px !important; margin: 1px 0px 0px; border-radius: 0px }
.about-2 ul li:nth-child(4), .about-2 ul li:nth-child(5) { width: 49.8% !important }
.about-2center span { font-size: 22px }
.about-3 { padding-top: 30px }
.about-3content { margin-top: 10px; flex-wrap: wrap }
.about-3item { width: 100%; margin-top: 10px; height: 70vw }
.about-3cont samp { height: 12vw }
.about-3cont .h4 { font-size: 18px; padding: 12px 0px; color: #fff }
.about-3info { line-height: 24px; padding: 16px 0px 0px; min-height: 0px; color: #fff }
.about-3icon { width: 22px }
.about-3item:hover .about-3icon { height: 22px }
.about-3item .about-3pic { opacity: 1 }
.about-3cont samp img { opacity: 0 }
.about-3cont samp img:last-child { opacity: 1 }
.about-3item .h4 { color: #fff; border-color: transparent }
.about-3cont .h4::before { width: 100% }
.about-4content { margin-top: 20px; height: auto; padding: 30px 0px }
.about-4item { width: 50%; box-sizing: border-box }
.about-4item:nth-child(1) { border-right: 1px #fff solid; border-bottom: 1px #fff solid; border-left: 0px }
.about-4item:nth-child(2) { border-bottom: 1px #fff solid; border-left: none }
.about-4item:nth-child(3) { border-right: 1px #fff solid; border-left: none }
.about-4item:nth-child(4) { border: none }
.about-4item samp { height: 40px; margin-top: 5vw }
.about-4item .h4 { font-size: 18px }
.about-4model { display: none !important; opacity: 0; visibility: hidden }
.about-4item:hover .h4 { color: #fff; border-color: transparent }
.about-5 { padding: 30px 0px }
.about-5content { margin: 20px auto 0px; padding: 0px 40px; box-sizing: border-box; width: 96% }
.about-5content .swiper-button-prev { width: 22px; height: 22px }
.about-5content .swiper-button-next { width: 22px; height: 22px }
.about-5content .swiper-pagination { margin-top: 20px }
.about-5content .swiper-pagination span { width: 8px; margin: 0px 1px }
.about-5content .swiper-slide { height: 75vw }
.about-6 { padding: 30px 0px }
.about-6content { margin: 20px auto 0px; padding: 0px 40px; box-sizing: border-box; width: 96% }
.about-6content .swiper-button-prev { width: 22px; height: 22px }
.about-6content .swiper-button-next { width: 22px; height: 22px }
.about-6content .swiper-slide { height: 14vw }
.banner-wz3 { font-size: 22px; margin-top: 0px }
.ser-1head .h3 { font-size: 18px }
.ser-1content { margin: 20px auto 0px }
.ser-1left { float: left; width: 100% }
.ser-1right { width: 90%; position: relative; float: left; margin: 20px 5% 30px }
.ser-1item { width: 100%; left: 0px; top: 0px; transform: translate(0px, 0px) }
.ser-1item.active { position: relative; left: 0px; top: 0px }
.ser-1item .h4 { font-size: 18px }
.ser-1info { max-height: 40vw }
.ser-1 ul { padding: 30px 0px 10px; width: 90%; margin: 0px auto; display: block }
.ser-1 ul li { margin: 10px 0px; width: 100% }
.ser-1 ul li.active::after { width: 0% }
.ser-2 { padding: 30px 0px }
.ser-2 .h3 { font-size: 22px }
.ser-2content { margin: 20px auto 0px }
.ser-3 { padding: 30px 0px }
.ser-3 .h3 { font-size: 18px }
.ser-3 .h3:before { width: 120px }
.ser-3list { margin: 0px auto 0px }
.ser-3item { margin-top: 20px }
.ser-3left { width: 100% }
.ser-3right { width: 100%; margin-top: 15px }
.ser-3right span { font-size: 18px }
.ser-3info { line-height: 22px; margin-top: 8px; font-size: 12px }
.server { padding-bottom: 0px }
.ser-4 { display: none }
.ser-5 { width: 100%; display: block; overflow: hidden }
.ser-5 img { width: 100%; height: auto }
.dz-2 { padding: 30px 0px }
.dz-2center { display: block }
.dz-2left { width: 100% }
.dz-2left samp img { height: 34px }
.dz-2left .h3 { font-size: 20px }
.dz-2info { margin-top: 10px }
.dz-2right .swiper { width: 100%; height: 68vw; margin-top: 30px }
.dz-2:nth-child(2n) .dz-2left samp { text-align: left }
.dz-2:nth-child(2n) .dz-2left .h3 { text-align: left }
.dz-2:nth-child(2n) .dz-2left .h3::before { left: 0px; right: auto }
.dz-3 { padding-top: 30px }
.dz-3content { padding: 20px 0px; margin-top: 20px }
.dz-3content .h4 { font-size: 22px }
.dz-3info { width: 90%; font-size: 14px; line-height: 24px; text-align: left }
.dz-3content ul { margin-top: 20px; display: block }
.dz-3content ul li { width: 50%; float: left; margin-top: 20px }
.dz-3content ul li:nth-child(2n) { display: none }
.dz-3content ul li span { width: 60px; height: 60px; font-size: 14px }
.dz-3content ul li samp { display: none }
.dz-3content ul li p { font-size: 12px }
.dz-4 { padding-top: 30px }
.dz-4cntent { margin-top: 20px }
.dz-4cntent .h4 { font-size: 16px }
.dz-5 { margin-bottom: 30px; padding-top: 30px }
.dz-5content { width: 100%; margin: 20px auto 0px }
.dz-5pannel { position: relative; left: 0px; top: 0px; transform: translateY(0%); height: 240px; width: 90%; margin: 0px auto }
.dz-5model { width: 84% }
.dz-5model .h4 { font-size: 18px }
.dz-5model em { font-size: 16px }
.dz-5cont { display: none }
.dz-5content .swiper-button-prev { width: 22px; height: 22px; overflow: hidden; left: 20px }
.dz-5content .swiper-button-prev:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100%; transform: rotateY(180deg) }
.dz-5content .swiper-button-prev:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; transform: rotateY(180deg); opacity: 0 }
.dz-5content .swiper-button-next { width: 22px; height: 22px; overflow: hidden; right: 20px }
.dz-5content .swiper-button-next:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-2.png") no-repeat; background-size: 100% }
.dz-5content .swiper-button-next:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: url("../images/icon-8-1.png") no-repeat; background-size: 100%; opacity: 0 }
.dz-5content .swiper-button-prev:hover:before, .dz-5content .swiper-button-next:hover:before { opacity: 0 }
.dz-5content .swiper-button-prev:hover:after, .dz-5content .swiper-button-next:hover:after { opacity: 1 }
.solution { margin: 00px auto 0px; padding-bottom: 30px }
.sol-left { display: none }
.solution::before { display: none }
.sol-right { width: 100% }
.sol-pic .h4, .sol-model .h4 { font-size: 20px }
.sol-item { margin-top: 20px }
.sol-pic .h4, .sol-model .h4 { font-size: 18px }
.sol-model .h4, .sol-model span, .sol-info, .sol-more { width: 90% }
.sol-info { display: none }
.sinfo-1head .h3 { font-size: 18px }
.sinfo-1pic { margin-top: 20px }
.sinfo-2 { margin-top: 30px }
.sinfo-2 .h3 { font-size: 18px }
.sinfo-2list { width: 90%; margin: 20px auto 0px }
.sinfo-2right span { font-size: 18px }
.sinfo-2item { display: block; margin-top: 15px }
.sinfo-2left { width: 100% }
.sinfo-2right { width: 100%; margin-top: 15px; padding-left: 0px }
.sinfo-2info { width: 100%; margin-top: 4px; font-size: 12px; line-height: 22px }
.sinfo-2item:nth-child(2n) .sinfo-2right span { text-align: left }
.sinfo-3 { padding: 30px 0px }
.sinfo-3content { margin: 20px auto 0px }
.sinfo-3left { width: 100%; height: auto; border-radius: 0px }
.sinfo-3left span { height: 40px; line-height: 40px; font-size: 14px; border-radius: 0px }
.sinfo-3right { width: 100%; height: auto }
.sinfo-3item { width: 100%; box-shadow: none; border-radius: 0px; height: auto; padding: 15px 0px; border-bottom: 1px #eee solid }
.sinfo-3item.active { box-shadow: none }
.product { margin: 30px auto 0px; padding-bottom: 30px }
.pro-left { display: none }
.product::before { display: none }
.pro-right { width: 100% }
.pro-li { width: 100%; margin: 15px 0px 0px }
.pro-li samp { height: 45vw }
.pro-more::before { opacity: 1 }
.pro-more::after { opacity: 0 }
.pro-more i { opacity: 1 }
.pinfo-1 { height: auto }
.pinfo-1left { width: 100%; text-align: left }
.pinfo-1type { font-size: 18px }
.pinfo-1info { text-align: left }
.pinfo-1right { width: 100%; margin-right: 0%; margin-top: 30px }
.pinfo-3 { margin-top: 30px }
.pinfo-3des { line-height: 24px; font-size: 14px }
.pinfo-3pic { box-sizing: border-box; padding: 0px 30px; width: 95% }
.pinfo-3pic .swiper-button-prev { width: 22px; height: 22px; left: 0px }
.pinfo-3pic .swiper-button-next { width: 22px; height: 22px; right: 0px }
.pinfo-3content { margin: 20px auto 0px; line-height: 24px; font-size: 14px }
.pinfo-4content { margin: 20px auto 0px; line-height: 24px; font-size: 14px }
.pinfo-5 .pinfo-1center { display: block }
.pinfo-6 { padding: 30px 0px }
.pinfo-7 { padding: 30px 0px }
.pinfo-7content { margin-top: 20px }
.pinfo-7content .swiper { width: 100%; margin: 0px }
.pinfo-7content .swiper-button-prev { width: 25px; height: 25px }
.pinfo-7content .swiper-button-next { width: 25px; height: 25px }
.pinfo-7 .swiper-pagination { margin-top: 15px }
.pinfo-8 { padding-top: 20px }
.pinfo-8 .h3 { font-size: 18px }
.pinfo-8cont .swiper { width: 90%; padding: 30px 12px 40px }
.pinfo-8cont .swiper-slide { padding: 20px 26px }
.pinfo-8cont .swiper-slide samp { height: 42vw }
.pinfo-8cont .swiper-button-prev { width: 22px; height: 22px; left: 7% }
.pinfo-8cont .swiper-button-next { width: 22px; height: 22px; right: 7% }
.contact-1 { margin-top: 30px }
.contact-1head .h3 { font-size: 18px }
.contact-2content { margin-top: 20px }
.contact-2content .h4 { height: 40px; line-height: 40px; font-size: 18px }
.contact-2content ul li { width: 50%; height: 160px }
.contact-2content ul li span { font-size: 12px; line-height: 20px }
.contact-3 { margin-top: -50px; height: 340px }
.contact-3 #container { width: 100% !important; height: 130% !important; transform: translate(0%, 80px) }
.contact-4 { padding: 30px 0px }
.contact-4item samp { width: 26px }
.contact-4right { width: calc(100% - 26px - 18px); font-size: 14px }
.contact-4item { width: 100%; max-width: 100%; margin-top: 15px }
.ser-3item:nth-child(2n) .ser-3right span { text-align: left }
.ser-3item:nth-child(2n) .ser-3info { text-align: left }
}