@charset "utf-8";
@font-face {
  font-family: 'iconfont';
  src: url('./fonts/iconfont.woff2?t=1661850523083') format('woff2'),
       url('./fonts/iconfont.woff?t=1661850523083') format('woff'),
       url('./fonts/iconfont.ttf?t=1661850523083') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
html, body, div,
h1, h2, h3, h4, h5, h6,
hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre, form, fieldset, object, code,
legend, button, input, textarea, label,
th, td, a, img{margin: 0; padding: 0; border: 0; outline: 0;}
body{font: 12px/1.5 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', '\5FAE\8F6F\96C5\9ED1', 'Tahoma', 'Hiragino sans gb', 'SimSun', 'Sans-serif'; color: #333; background-color: #fff;}
a:hover{ text-decoration: none; }
@font-face{ font-family: DINB; src: url('./fonts/DIN-Black.otf'); }
@font-face{ font-family: DINm; src: url('./fonts/DIN-Medium.ttf'); }
@font-face{ font-family: YS; src: url('./fonts/YouSheBiaoTiHei.ttf'); }

@font-face{ font-family: GEO; src: url('./fonts/Geometric.ttf'); }
@font-face{ font-family: PMZD; src: url('./fonts/PMZD.ttf'); }
/*清除内外边距*/
h1, h2, h3, h4, h5, h6{font-weight: normal; font-size: 100%;}
/*设置默认字体*/
:focus{outline: 0;}
ul,
ol{list-style: none;}
/*重置图片元素*/
address, caption, cite, code, dfn, em, i, th, var, optgroup{font-style: normal; font-weight: normal;}
abbr, acronym{border: 0; font-variant: normal;}
input, button, textarea, select, optgroup, option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
code, kbd, samp, tt{font-size: 100%;}
/*修改滚动条*/
::-webkit-scrollbar{width:6px; height:6px ;}
::-webkit-scrollbar-track{box-shadow: inset 0 0 6px transparent; background: #f8f8f8; border-radius: 6px;}
::-webkit-scrollbar-thumb{border-radius: 6px; background: #bbb;}
textarea{resize: none;}
button:active, button:focus{ border:none; outline:0; }
/* 网站色值设置 */
body{--zhu-color:#208ef4;--pei-color:#ff9001;}
.inner{ width: 1400px; margin:0 auto; }
@media only screen and (max-width: 1400px){
  .inner{ width: 100%; box-sizing: border-box; padding:0 15px; }
}
@media only screen and (max-width: 1200px){
  .inner{ width: 1200px; box-sizing: border-box; padding:0 15px; }
}

/*page*/
.de-page-mian{overflow: hidden; text-align: center; font-size: 0; margin: 20px 0; width: 100%; clear: both; }
.de-page-mian .page-inner{display: inline-block; overflow: hidden;}
.de-page-mian .page-inner a{ display: block; float: left; width: 36px; height: 36px; color: #fff; background: #666666; border-color: #666666; text-align: center; line-height: 36px; font-size: 14px; margin:0 2px; overflow: hidden; border-radius: 50%; }
.de-page-mian .page-inner a.active,
.de-page-mian .page-inner a:hover{color: #fff; border-color:var(--zhu-color); background: var(--zhu-color);}
.de-page-mian .page-inner a.prev{margin-right: 10px; background: #fff url(../images/prev.jpg) no-repeat center;}
.de-page-mian .page-inner a.prev.on{background: #fff url(../images/prev-hover.jpg) no-repeat center;}
.de-page-mian .page-inner a.prev:hover{background-color: #fff; border-color: #dddddd;}
.de-page-mian .page-inner a.next{margin-left: 10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center;}
.de-page-mian .page-inner a.next.on{background: #fff url(../images/next-hover.jpg) no-repeat center;}
.de-page-mian .page-inner a.next:hover{background-color: #fff; border-color: #dddddd;}
.de-page-mian .page-inner a.page-btn{font-size: 12px; margin-right: 0; width: 63px; margin-left: 10px;}
.de-page-mian .page-inner span{display: block; font-size: 12px; color: #333; float: left; line-height: 38px;}
.de-page-mian .page-inner input{display: block; float: left; height: 36px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin: 0 5px; border-radius: 5px; }
@media only screen and (max-width: 774px){
  .de-page-mian .page-inner span, .de-page-mian .page-inner input, .de-page-mian .page-inner .page-btn{ display: none; }
}

/*down*/
.down{width: 100%;height: 52px;background:#211f1f;color: #ffffff;font-size: 16px;position: fixed;bottom: 0;display: none; z-index: 9999;}
.down li{width: 25%; box-sizing: border-box; text-align: center;line-height: 15px;float: left;padding-top: 4px;height: 52px; list-style:none;}
.down li + li{ border-left: solid 1px #ffffff; }
.down li a{color: #ffffff; font-size: 14px; }
.down .current{border-right: none;}
.down li img{max-width: 25px;height: 25px;}
.plugin-fixed-call{position:fixed;bottom:0px;right:0px;width:45px;z-index: 999999;}
.plugin-fixed-call .child{position:absolute;right:0px;overflow:hidden;cursor:pointer;width:45px;height:45px;background:var(--zhu-color);line-height: 45px;margin-top:1px;}
.plugin-fixed-call .child{transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s; -webkit-transition-duration: .5s; }
.plugin-fixed-call .child a{ display: inline-block; overflow: hidden; }
.plugin-fixed-call .child:hover{width:160px;background: #000;}
.plugin-fixed-call .child img{position:absolute;top:0px;left:0px;}
.plugin-fixed-call .child p{position: absolute;left:45px;color:#fff;}
.plugin-fixed-call .fixedQQ{bottom:92px;}
.plugin-fixed-call .fixedCall{bottom:46px;}
.plugin-fixed-call .fixedTop{position:absolute;right:0px;bottom:138px;color:#fff;background-color:#cbcbcb;cursor:pointer;text-align:center;width:45px;height:45px;line-height: 45px;font-size: 14px;font-family: "MICROSOFT YAHEI","Arial Narrow";}
.plugin-fixed-call .fixedTop .fixedTopPointer{position:absolute;top:-5px;left:18px;}
.plugin-fixed-call .fixedCode{bottom:0;cursor:pointer;width:45px;height:45px;background:var(--zhu-color);line-height: 45px;margin-top:1px;}
.plugin-fixed-call .fixedCode:hover .fixedCodeInfo{display: block;opacity: 1;}
.fixedCodeInfo{display:none;position:fixed;bottom:0px;right:54px;padding:0 3px;border:1px solid #ccc;background:#fff;opacity: 0;}
.fixedCodeInfo .fixedPointer{position: absolute;right:-6px;bottom:12px;}
@media only screen and (max-width: 768px){
  .down{ display: block; }
  .plugin-fixed-call{ display: none; }
}

/*no-goods*/
.no-goods{ width: 100%; }
.no-goods,.no-network{padding:50px 0; overflow: hidden; text-align: center;}
.no-goods img{display: block; margin:0 auto 30px; width:220px; max-height: 105px;}
.no-goods p,.no-network p{font-size:14px; color:#666666; line-height: 20px;}

/* section */
.section{ overflow: hidden; }

/* fp-nav 翻页侧边导航按钮 */
/* #fullPage-nav { _display: none; font-size: 12px;}
#fullPage-nav li { width: 90px; height: 21px; margin: 10px 0 0; vertical-align: middle;}
#fullPage-nav li a { float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; }
#fullPage-nav li .active { background-position: 0 bottom;}
#fullPage-nav span { display: none;}

.fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 21px;}
#fp-nav ul li .fp-tooltip{ color: #8F9DA4; } */

/*fp-nav*/
#fp-nav ul li, .fp-slidesNav ul li{ margin:20px 0; width: 18px; height: 18px; }
#fp-nav ul li a, .fp-slidesNav ul li a{ display: block; border-radius: 50%; position: relative; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; background: none; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 6px; height: 6px; background: #ffffff; border-radius: 50%; left: 50%; top:50%; margin:0; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
#fp-nav ul li a span::after, .fp-slidesNav ul li a span::after{ display: block; content: ''; -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; width: 0; height: 1px; background: #fff; position: absolute; top: 50%; right: 9px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
#fp-nav ul li:hover a span:after{ width:13px; }
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width: 6px; height: 6px; background: #ffffff; border-radius: 50%; left: 50%; top:50%; margin:0; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{ width: 6px; height: 6px; margin:0; }
#fp-nav ul li a.active::after, .fp-slidesNav ul li a.active::after{ display: block; content: ''; position: absolute; border: 3px solid #fff; width: 18px; height: 18px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius: 50%; -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; }
#fp-nav ul li .fp-tooltip.right{ right: 36px; }
#fp-nav ul li .fp-tooltip{ font-size: 14px; color: #fff; }



/* index */
.h_top{ padding:30px 120px; transition: all .3s; background: #ffffff; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.h_top .logo{ display: inline-flex; align-items: center; width:340px; }
.h_top .logo img{ transition: all .3s; max-width: 100%; }
.h_top .logo img + img{ margin-left: 20px; transition: all .3s; }
.h_top .nav{ display: flex; width:calc(100% - 600px); align-items: center; justify-content: space-between; }
.h_top .nav li{ width:10%; text-align: center; position: relative; overflow: hidden; }
.h_top .nav li > a{ display:inline-flex; padding:20px 0; align-items: center; justify-content: center; position: relative; font-size: 16px; color: #333333; line-height: 1; transition: all .3s; }
.h_top .nav li > a::before{ content:""; display: inline-block; width: 0; height:2px; background: var(--pei-color); position: absolute; right:0; bottom:0; transition: all .3s; border:0; }
.h_top .nav li > a:hover{ transition: all .3s; color: var(--pei-color); }
.h_top .nav li > a:hover::before{ transition: all .3s; width:100%; left:0; }
.h_top .tel{ width:240px; display: inline-flex; align-items: center; justify-content: flex-end; }
.h_top .tel .mobile{ display: inline-block; }
.h_top .tel .mobile b{ display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-family: "Microsoft Yahei"; line-height: 1;color: var(--zhu-color); }
.h_top .tel .mobile b i{ font-size: 32px; line-height: 1; font-style: normal; margin-right: 10px; color: var(--zhu-color); }

.h_top > .nav_btn{ display: none; }
.h_top .nav li:hover{ overflow: visible; }
#nav li .navson{display: none; position: absolute; left: 0; top:100%; z-index: 999; width: 100%; border:0; }
#nav li .navson .navson_nr .hei{ background: #fff; padding: 5%; overflow: hidden; }
#nav li .navson dl{ float: left; width: 100%;}
#nav li .navson dl dt{ font-weight: normal; font-size: 14px; padding:12px 0; text-align: center; position: relative;}
#nav li .navson dl dt a{ color: #333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#nav li .navson dl dt:before{ position: absolute; left: 0; bottom: 0; width: 0; height: 1px; content: ''; background: rgba(155,155,155,0.5); transition: 0.3s;}
#nav li .navson dl dt:hover:before{ width: 100%;}
#nav li .navson .pic{ float: right; width: 65%; padding-bottom: 30%; position: relative;  }
#nav li .navson .pic img{ left:0; width: 100%; height: 100%; object-fit: cover; transition: all .3s; position: absolute; }
#nav li .navson .pic:before{ position: absolute; left: -10%; top: 0; content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.5);}

.index{ width:100%; position: fixed; top:0; z-index: 9999; }
.index .h_top{ background: none; transition: all .3s; }
.index .h_top > .logo, .index .h_top > .nav, .index .h_top > .tel{ display: none; transition: all .3s; }
.index .h_top > .nav_btn{ position: absolute; display: inline-block; width: 46px; height:42px; cursor: pointer; right:30px; top:30px; padding-left: 30px; background: rgba(0,0,0,.4); border-radius: 2px; }
.index .h_top > .nav_btn.on{ background: rgba(255,255,255,.4); }
.nav_btn span { width: 30px; top: 50%; transform: translateY(-50%); transform-origin: 50% 50%; margin-top: -1px; }
.nav_btn span,
.nav_btn span::before,
.nav_btn span::after { position: absolute; left: 50%; transform: translateX(-50%); height: 2px; background: #f1f1f1; transition: all .2s ease }
.nav_btn span::before,
.nav_btn span::after { content: ''; width: 100% }
.nav_btn span::before { top: -10px }
.nav_btn span::after { bottom: -10px }

.index.on .h_top{ background: #ffffff; transition: all .3s; padding:22px 150px; }
.index.on .h_top > .nav_btn{ display: none; }
.index.on .h_top > .logo, .index.on .h_top > .nav, .index.on .h_top > .tel{ display: inline-flex; transition: all .3s; }
.index.on .h_top .nav a{ color: #333333; }
.index.on .h_top .tel .mobile p{ color: #ffffff; }
.close{ width:46px; height:42px; position:absolute; right:40px; top:40px; z-index:95; cursor:pointer; display:none; }
.close .bar{ width:100%; height:2px; margin:5px auto 0; display:block; background-color:#FFF; transition:.3s ease-in-out; -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; }
.close .bar:nth-child(1){ margin-top:20px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.close .bar:nth-child(2){ margin-top:-3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.slide-product .close{ display:block; }
.slide-product{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:9999; display:none; }
.slide-product .box{ width:100%; height:100%; position:relative; }
.slide-product .box-left{ background:rgba(0,0,0,0.8); width:100%; max-width:350px; border-right:1px solid #494949; height:100%; float:left; }
.slide-product .box-left b{ display: block; height:100px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:30px; width:100%; padding:0 36px; margin-bottom:23px; position:relative; }
.slide-product .box-left b:after{ content:""; display:block; width:calc(100% - 36px * 2); height:1px; background:rgba(73,73,73,0.59); position:absolute; bottom:0; left:36px; }
.slide-product .box-left ul li{ padding:10px 0; position:relative; }
.slide-product .box-left ul li:after{ content:""; display:block; width:calc(100% - 36px * 2); height:1px; background:rgba(73,73,73,0.59); position:absolute; bottom:0; left:36px; }
.slide-product .box-left ul li a{ display: flex; align-items: center; justify-content: space-between; transition:all 0.36s; padding:0 36px; }
.slide-product .box-left ul li a small{ font-size:20px; color:#ffffff; line-height:28px; display:block; height:100%; line-height:52px; height:52px;  cursor:pointer; }
.slide-product .box-left ul li a span{ font-size: 16px; color: #ffffff; line-height: 1; transition:all 0.36s; }
.slide-product .box-right{ width:100%; max-width:calc(100% - 350px); height:100%; overflow:hidden; background:rgba(0,0,0,0.9); float:right; }
.slide-product .box-right > b{ display: block; height:100px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:30px; width:100%; padding:0 36px; position:relative; }
.slide-product .box-right ul{ width:calc(100vw - 350px); height: calc(100vh - 100px); box-sizing: border-box; border-top: 1px solid rgba(73,73,73,0.59); box-sizing: border-box; padding:15px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.slide-product .box-right ul li{ width:calc(100% / 4 - 22.5px); height:calc(100% / 3 - 30px); float:left; }
.slide-product .box-right ul li a{ width: 100%; height:100%; display: block; position: relative; }
.slide-product .box-right ul li .img{ width: 100%; height:100%; overflow: hidden; }
.slide-product .box-right ul li img{ width:100%; height:100%; object-fit: cover; transition:all 0.36s; }
.slide-product .box-right ul li b{ position: absolute; left:0; bottom:0; width:100%; box-sizing: border-box; background: rgba(0,0,0,0.59); display: block; font-weight: normal; font-size:14px; color:#fff; text-align:center; padding:14px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slide-product .box-right ul li:hover img{ transform:scale(1.05); }
@media only screen and (max-width:1600px){
  .h_top, .index.on .h_top{ padding:15px; }
  .slide-product .box-right ul li{ width:calc(100% / 3 - 20px); }
  .slide-product .box-right ul li:nth-child(10),
  .slide-product .box-right ul li:nth-child(11),
  .slide-product .box-right ul li:nth-child(12){ display: none; }
}
@media only screen and (max-width:1500px){
  .index .h_top > .nav_btn{ top:15px; right:15px; }
}
@media only screen and (max-width:1400px){
  .h_top .logo{ width:250px; }
  .h_top .tel{ width:250px; }
  .h_top .logo img{ width: 16%; }
  .h_top .logo img + img{ width: 69%; margin-left: 12px; }
  .h_top .tel .mobile{ padding-left: 60px; background-size: 24%; }
  .h_top .tel .mobile b{ font-size:24px; }
  .h_top .nav{ width:calc(100% - 500px); }
  .h_top .nav li > a{ font-size: 14px; }
  .slide-product .box-right ul li{ width:calc(100% / 2 - 15px); }
  .slide-product .box-right ul li:nth-child(7),
  .slide-product .box-right ul li:nth-child(8),
  .slide-product .box-right ul li:nth-child(9){ display: none; }
  #nav li .navson dl dt{ padding:10px 0; font-size: 13px; }
  #nav li .navson{ width: 140%; left:-20%; }
}
@media only screen and (max-width:1200px){
  .h_top{ width: 1200px; }
  .h_top .logo{ width:160px; }
  .h_top .tel{ width:180px; }
  .h_top .tel .mobile{ padding-left: 0; background: none; }
  .h_top .tel .mobile p{ display: none; }
  .h_top .tel .mobile b{ margin-top: 0; }
  .h_top .nav{ width:calc(100% - 340px); }
  #nav li .navson dl dt{ padding:8px 0; }
  .h_top .tel .mobile b{ font-size: 20px; }
  .h_top .tel .mobile b i{ font-size: 24px; }
}


/*banner背景图片动画*/
@-webkit-keyframes scale-bg{
	from{ -webkit-transform:scale(1.2); transform:scale(1.2); }
	to{ -webkit-transform:scale(1); transform:scale(1); }
}
@keyframes scale-bg{
	from{ -webkit-transform:scale(1.2); transform:scale(1.2); }
	to{ -webkit-transform:scale(1); transform:scale(1); }
}
.mouse { /*background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);*/ position: relative; width: 21px; height: 35px; border-radius: 100px; background-size: 100% 200%; -webkit-animation: nudgeMouse 5s ease-out infinite; animation: nudgeMouse 5s ease-out infinite; }
.mouse:before, .mouse:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.mouse:before { width: 21px; height: 35px; border:3px solid #fff; border-radius: 100px; }
.mouse:after { background-color: #ffffff; width: 6px; height: 6px; border-radius: 50%; -webkit-animation: trackBallSlide 5s linear infinite; animation: trackBallSlide 5s linear infinite; }
@-webkit-keyframes colorSlide {
  0% { background-position: 0% 100%; }
  20% { background-position: 0% 0%; }
  21% { background-color: #4e5559; }
  29.99% { background-color: #ffffff; background-position: 0% 0%; }
  30% { background-color: #4e5559; background-position: 0% 100%; }
  50% { background-position: 0% 0%; }
  51% { background-color: #4e5559; }
  59% { background-color: #ffffff; background-position: 0% 0%; }
  60% { background-color: #4e5559; background-position: 0% 100%; }
  80% { background-position: 0% 0%; }
  81% { background-color: #4e5559; }
  90%, 100% { background-color: #ffffff; }
}
@keyframes colorSlide {
  0% { background-position: 0% 100%; }
  20% { background-position: 0% 0%; }
  21% { background-color: #4e5559; }
  29.99% { background-color: #ffffff; background-position: 0% 0%; }
  30% { background-color: #4e5559; background-position: 0% 100%; }
  50% { background-position: 0% 0%; }
  51% { background-color: #4e5559; }
  59% { background-color: #ffffff; background-position: 0% 0%; }
  60% { background-color: #4e5559; background-position: 0% 100%; }
  80% { background-position: 0% 0%; }
  81% { background-color: #4e5559; }
  90%, 100% { background-color: #ffffff; }
}
@-webkit-keyframes trackBallSlide {
  0% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  6% { opacity: 1; -webkit-transform:translateY(5px); transform:translateY(5px); }
  14% { opacity: 0; -webkit-transform:translateY(10px); transform:translateY(10px); }
  15%, 19% { opacity: 0; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  28%, 29.99% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  30% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  36% { opacity: 1; -webkit-transform:translateY(5px); transform:translateY(5px); }
  44% { opacity: 0; -webkit-transform:translateY(10px); transform:translateY(10px); }
  45%, 49% { opacity: 0; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  58%, 59.99% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  60% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  66% { opacity: 1; -webkit-transform:translateY(5px); transform:translateY(5px); }
  74% { opacity: 0; -webkit-transform:translateY(10px); transform:translateY(10px); }
  75%, 79% { opacity: 0; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  88%, 100% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
}
@keyframes trackBallSlide {
  0% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  6% { opacity: 1; -webkit-transform:translateY(5px); transform:translateY(5px); }
  14% { opacity: 0; -webkit-transform:translateY(10px); transform:translateY(10px); }
  15%, 19% { opacity: 0; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  28%, 29.99% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  30% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  36% { opacity: 1; -webkit-transform:translateY(5px); transform:translateY(5px); }
  44% { opacity: 0; -webkit-transform:translateY(10px); transform:translateY(10px); }
  45%, 49% { opacity: 0; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  58%, 59.99% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  60% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  66% { opacity: 1; -webkit-transform:translateY(5px); transform:translateY(5px); }
  74% { opacity: 0; -webkit-transform:translateY(10px); transform:translateY(10px); }
  75%, 79% { opacity: 0; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
  88%, 100% { opacity: 1; -webkit-transform:translateY(-8px); transform:translateY(-8px); }
}
@-webkit-keyframes nudgeMouse {
  0% { -webkit-transform: translateY(0); transform: translateY(0); }
  20% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  30% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  60% { -webkit-transform: translateY(0); transform: translateY(0); }
  80% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  90% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes nudgeMouse {
  0% { -webkit-transform: translateY(0); transform: translateY(0); }
  20% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  30% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  60% { -webkit-transform: translateY(0); transform: translateY(0); }
  80% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  90% { -webkit-transform: translateY(0); transform: translateY(0); }
}

/* banner */
#banner{ overflow: hidden; height: 100vh; position: relative; width: 100%; }
#banner .swiper-slide-active .scaleBg{visibility: visible;-webkit-animation:scale-bg 3s linear forwards;animation:scale-bg 3s linear forwards;}
#banner .swiper-slide{ width: 100%!important; }
#banner .swiper-slide a{ display: block; width: 100%; height: 100%; overflow: hidden; position: relative; }
#banner .swiper-slide a > img{ transition:9s ease; width: 100%;}
#banner .swiper-slide:nth-child(1) a > img { transform:scale(1.05); }
#banner .swiper-slide:nth-child(2) a > img { transform:scale(1.05); }
#banner .swiper-slide:nth-child(3) a > img { transform:scale(1.05); }
#banner .swiper-slide-active:nth-child(1) a > img { transform:scale(1)}
#banner .swiper-slide-active:nth-child(2) a > img { transform:scale(1)}
#banner .swiper-slide-active:nth-child(3) a > img { transform:scale(1)}

#banner a .banner_box{ z-index: 33; width: 1400px; height: 100%; position: absolute; top:0; left:50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
#banner a .banner_box p img{ max-width: 100%; }
#banner a .banner_box .b1_tit{ position: absolute; top:282px; left:46px; }
#banner a .banner_box .b1_img{ position: absolute; top:180px; right: 40px; }
#banner a .banner_box .b2_tit{ position: absolute; top:312px; left:0; }
#banner a .banner_box .b2_img{ position: absolute; top:260px; right: -60px; }
#banner a .banner_box .b3_tit{ position: absolute; top:258px; left:360px; }
#banner a .banner_box .b3_img{ position: absolute; top:530px; left:440px; }
@-webkit-keyframes scale-bg{
	from{ -webkit-transform:scale(1.25); transform:scale(1.25); }
	to{ -webkit-transform:scale(1); transform:scale(1); }
}
@keyframes scale-bg{
	from{ -webkit-transform:scale(1.25); transform:scale(1.25); }
	to{ -webkit-transform:scale(1); transform:scale(1); }
}

@media only screen and (min-width: 1930px){
  #banner a > img{ width: 100%; height: 100vh; object-fit: cover; }
}
@media only screen and (max-width: 1900px){
  #banner a > img{ width: 100%; height: 100vh; object-fit: cover; }
}
@media only screen and (max-width: 1400px){
  #banner a .banner_box{ width: 1200px; }
  #banner a .banner_box p img{ max-width: 100%; }
  #banner a .banner_box .b1_tit{ width: 30%; top:282px; left:0; }
  #banner a .banner_box .b1_img{ width: 67%; top:180px; right: 40px; }
  #banner a .banner_box .b2_tit{ width: 33%; top:312px; left:0; }
  #banner a .banner_box .b2_img{ width: 74%; top:260px; right: -60px; }
  #banner a .banner_box .b3_tit{ width: 46%; top:258px; left:360px; }
  #banner a .banner_box .b3_img{ width: 41%; top:530px; left:440px; }
}
@media only screen and (max-width: 1200px){
  #banner{ width: 1200px; }
  #banner a .banner_box .b1_tit{ width: 30%; top:282px; left:15px; }
  #banner a .banner_box .b1_img{ width: 67%; top:180px; right: 15px; }
  #banner a .banner_box .b2_tit{ width: 33%; top:312px; left:15px; }
  #banner a .banner_box .b2_img{ width: 74%; top:260px; right: 15px; }
  #banner a .banner_box .b3_tit{ width: 46%; top:258px; left:260px; }
  #banner a .banner_box .b3_img{ width: 41%; top:530px; left:340px; }
}
@media only screen and (max-height: 800px){
  #banner a .banner_box .b1_tit{ width: 24%; top:30%; left:10%; }
  #banner a .banner_box .b1_img{ width: 50%; top:20%; right: 15px; }
  #banner a .banner_box .b2_tit{ width: 24%; top:30%; left:10%; }
  #banner a .banner_box .b2_img{ width: 60%; top:24%; right: 15px; }
  #banner a .banner_box .b3_tit{ width: 30%; top:24%; left:34%; }
  #banner a .banner_box .b3_img{ width: 60%; top:46%; left:30%; }
}


.app .section1 .number{position: absolute;bottom:8%;left: 50%;padding-bottom: 5px;display: table;padding: 0 20px;width: auto;text-align: center;transform: translateX(-50%);-webkit-transform: translateX(-50%); z-index: 34; }
.app .section1 .number span{font-size: 52px;color: #fff;display: inline-block;cursor: pointer;position: relative;transition: all 500ms ease;-webkit-transition:all 500ms ease;}
.banners{ display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 34; width: 1400px; bottom:0; left:50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.banners li{ width: calc(33.3% - 1px); height: 170px; overflow: hidden; }
.banners li a{ display: block; width: 100%; height: 100%; background-size: cover; position: relative; }
.banners li a::before{ content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.75); position: absolute; left:0; top:0; }
.banners li a::after{ transition: all .5s ease; content: ""; display: block; width: 100%; height: 0%; background: rgba(28,143,250,.8); position: absolute; left:0; bottom: 0; z-index: 33; }
.banners li a .txt{ box-sizing: border-box; padding:35px; position: relative; z-index: 34; }
.banners li a .txt b{ font-size: 28px; color: #ffffff; font-weight: normal; line-height: 1; }
.banners li a .txt p{ font-size: 16px; color: rgba(255,255,255,.61); font-weight: normal; margin:20px 0; line-height: 1; }
.banners li a .txt small{ display: inline-block; font-size: 14px; color: #ffffff; line-height: 1; padding:7px 23px; border:1px solid #fff; }
.banners li a:hover::after{ transition: all .5s ease; height: 100%; }
.banners .active a::after{ transition: all .5s ease; height: 100%; }
@media only screen and (max-width: 1400px){
  .banners{ width: 1200px; }
  .banners li{ height: 160px; }
  .banners li a .txt{ padding:30px; }
  .banners li a .txt b{ font-size: 24px; }
  .banners li a .txt p{ font-size: 14px; margin:16px 0; }
  .banners li a .txt small{ font-size: 14px; }
}
@media only screen and (max-width: 1200px){
  .banners{ width: 1000px; }
  .banners li{ height: 140px; }
  .banners li a .txt{ padding:20px; }
  .banners li a .txt b{ font-size: 20px; }
  .banners li a .txt p{ font-size: 13px; margin:14px 0; }
  .banners li a .txt small{ font-size: 13px; }
}

/*m_solution*/
.app .section2{ position: relative; height: 100%; }
.app .section2 .img_bg{ position: absolute; top:0; width: 100%; height: 100%; z-index: 1; }
.app .section2 .img_bg .scale_img{ width: 100%; height: 100%; -webkit-transform:scale(1.2); transform:scale(1.2); }

.m_tit{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.m_tit span{ font-size: 50px; font-family: "DINB"; color: rgba(0, 0, 0, .04); line-height: 1; text-transform: uppercase; }
.m_tit b{ margin-top: -52px; margin-bottom: 18px; font-family: "YS"; font-size: 48px; color: #00070d; font-weight: normal; line-height: 1; }
.m_tit b i{ color: var(--zhu-color);  }
.m_tit p{ font-size: 16px; color: #999999; line-height: 1; }
@media only screen and (max-width: 1400px){
  .m_tit span{ font-size: 42px; }
  .m_tit b{ margin-top: -42px; margin-bottom: 14px; font-family: "YS"; font-size: 42px; }
  .m_tit p{ font-size: 14px; }
}
@media only screen and (max-width: 1200px){
  .m_tit{ width: 1200px; }
  .m_tit span{ font-size: 38px; }
  .m_tit b{ margin-top: -36px; margin-bottom: 12px; font-family: "YS"; font-size: 36px; }
  .m_tit p{ font-size: 13px; }
}

.m_solution{ overflow: hidden; position: relative; z-index: 3; height: 100%; box-sizing: border-box; }
.m_solution .inner{ height:100%; margin:0 auto; display: flex; flex-direction: column; justify-content: center; }
#msolution{ margin:56px 0; overflow: hidden; }
#msolution a{ display: block; width: 100%; height: 554px; overflow: hidden; border-radius: 5px; }
#msolution a img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
#msolution a .txt{ width: 100%; height: 180px; padding:40px 25px; position: absolute; bottom:0; box-sizing: border-box; background: linear-gradient(to bottom, transparent 0%,var(--zhu-color) 60%); border-radius: 5px; transition: all .3s; }
#msolution a .txt i{ font-style: normal; font-size: 14px; color: #ffffff; text-transform: uppercase; line-height: 1; }
#msolution a .txt b{ font-size: 26px; color: #ffffff; line-height: 1; display: block; padding:10px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight: normal; }
#msolution a .txt .info{ font-size: 16px; color: #ffffff; line-height: 1.875; height: 0; overflow: hidden; overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; transition: all .3s; }
#msolution a .txt .info p:nth-child(1){ margin-bottom: 20px; }
#msolution a .more{ display: inline-flex; align-items: center; justify-content: space-between; width: 106px; padding:11px 0; position: relative; }
#msolution a .more::before{ content: ""; display: block; width: 100%; height: 2px; background: #ffffff; border:0; position: absolute; bottom:0; }
#msolution a .more::after{ content: ""; display: block; width: 50%; height: 2px; background: #c57e32; border:0; position: absolute; left:0; bottom:0; transition: all .3s; }
#msolution a .more span{ font-size: 14px; color: #ffffff; text-transform: capitalize; line-height: 1; }
#msolution a .more i{ display: inline-block; width: 21px; height: 5px; background: url(../images/ico_right.png) no-repeat center; }
#msolution a:hover img{ transition: all .3s; transform: scale(1.05); }
#msolution a:hover .more::after{ transition: all .3s; width: 100%; }
#msolution a:hover .txt{ display: flex; flex-direction: column; justify-content: space-between; transition: all .3s; height: 100%;  background: linear-gradient(to bottom, var(--zhu-color) 0%,var(--zhu-color) 100%); }
#msolution a:hover .info{ transition: all .3s; height: auto; }
.solution_tel{ text-align: center; overflow: hidden; }
.solution_tel p{ font-size: 18px; color: #666666; line-height: 1; }
.solution_tel .tel{ margin-top: 15px; display: flex; font-size: 18px; color: #666666; align-items: center; justify-content: center; }
.solution_tel .tel i{ font-size: 18px; margin-right: 8px; line-height: 1; background: linear-gradient(to right, #fea400, #e90b00); -webkit-background-clip:text; color: transparent; }
.solution_tel .tel b{ line-height: 1; font-size: 30px; font-family: "DINM"; background: linear-gradient(to right, #fea400, #e90b00); -webkit-background-clip:text; color: transparent; }
@media only screen and (max-width: 1600px){
  #msolution{ margin:40px 0; }
  #msolution a{ height: 500px; }
  .solution_tel .tel b{ font-size: 26px; }
}
@media only screen and (max-width: 1200px){
  .m_solution{ width: 1200px;; }
  #msolution{ margin:30px 0; }
  #msolution a{ height: 450px; }
  .solution_tel .tel b{ font-size: 24px; }
}
/* 动画 */
/* .active .m_about .fl{ opacity: 1; margin-left: 0px; transition-delay: 0.7s; } */

/*m_product*/
.app .section3{ position: relative; height: 100%; }
.app .section3 .img_bg{ position: absolute; top:0; width: 100%; height: 100%; z-index: 1; }
.app .section3 .img_bg .scale_img{ width: 100%; height: 100%; -webkit-transform:scale(1.2); transform:scale(1.2); }

.m_about{ overflow: hidden; position: relative; z-index: 3; height: 100%; box-sizing: border-box; }
.m_about .inner{ height:100%; margin:0 auto; display: flex; flex-direction: column; justify-content: center; }
.m_about .m_tit span{ color: rgba(255, 255, 255, .04); }
.m_about .m_tit b{ color: #fbfafa; }
.m_about .m_tit p{ color: #fbfafa; }
.m_about .bd{ overflow: hidden; padding:120px 0 0; display: flex; align-items: center; justify-content: space-between; }
.m_about .intro{ width: 35%; overflow: hidden; }
.m_about .intro .tit{ margin-bottom: 35px; overflow: hidden; padding:4px 0; position: relative; padding-left:24px; }
.m_about .intro .tit::before{ content: ""; display: block; width: 4px; height: 100%; position: absolute; left:0; top:0; background: linear-gradient(to bottom, #fe9944 0%,#fb6174 100%); }
.m_about .intro .tit span{ display: block; font-size: 26px; line-height: 1; color: #fbfafa; text-transform: uppercase; }
.m_about .intro .tit b{ font-size: 36px; color: #fbfafa; line-height: 1; margin-top: 14px; display: block; }
.m_about .intro .txt{ overflow: hidden; overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; }
.m_about .intro .txt p{ font-size: 15px; color: #fbfafa; line-height: 1.8; }
.m_about .intro .txt p strong{ font-size: 18px; font-weight: normal; }
.m_about .intro .txt p:nth-child(2){ margin-bottom: 20px; }
.m_about .intro a{ position: relative; display: inline-flex; margin-top: 20px; background: linear-gradient(to bottom, #fe9944 0%,#fb6174 100%); width: 82px; height: 82px; border-radius: 50%; }
.m_about .intro a span{ position: relative; z-index: 33; display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 16px; color: #fbfafa; text-transform: uppercase; }
.m_about .intro a::before{ content: ""; display: block; width: 0%; height: 0%; background: var(--zhu-color); position: absolute; left:50%; top:50%; border-radius: 50%; transition: all .3s; }
.m_about .intro a:hover::before{ transition: all .3s; width: 100%; height: 100%; left:0; top:0; }
.m_about .list{ width: 58%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.m_about .list li{ width: calc(50% - 15px); overflow: hidden; margin-bottom: 30px; }
.m_about .list li a{ overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; border:1px solid #d1beb7; width: 100%; height: 224px; border-radius: 10px; transition: all .3s; }
.m_about .list li a img{ border-radius: 10px; width: 100%; height: 100%; object-fit: cover; transition: all .3s; transform: scale(0); }
.m_about .list li a .txt{ width: 100%; height: 100%; position: absolute; top:0; box-sizing: border-box; padding:30px; display: flex; flex-direction: column; transition: all .3s; }
.m_about .list li a .txt > span{ font-size: 52px; color: #ffffff; line-height: 1; text-align: right; }
.m_about .list li a .txt > b{ font-size: 24px; color: #ffffff; line-height: 1; font-weight: bold; margin:12px 0; }
.m_about .list li a .txt > p{ font-size: 14px; color: #fbfafa; line-height: 1.7; }
.m_about .list li a > small{ width: 100%; font-size: 24px; color: #fbfafa; line-height: 1; display: flex; align-items: center; box-sizing: border-box; padding:0 26px; position: absolute; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all .3s; opacity: 0; }
.m_about .list li a > small i{ display: inline-block; font-size: 22px; line-height: 1; color: #ffffff; margin-left: 12px; }
.m_about .list li a:hover{ transition: all .3s; border-color: #ffffff; }
.m_about .list li a:hover .txt{ transition: all .3s; opacity: 0; }
.m_about .list li a:hover img{ transition: all .3s; transform: scale(1); }
.m_about .list li a:hover > small{ transition: all .3s; opacity: 1; }
@media only screen and (max-width: 1600px){
  .m_about .bd{ padding:60px 0 0; }
  .m_about .list li a .txt{ padding:25px; }
  .m_about .list li a .txt > span{ font-size: 48px; }
  .m_about .list li a .txt > b{ font-size: 22px; }
  .m_about .intro .tit b{ font-size: 34px; }
}
@media only screen and (max-width: 1200px){
  .m_about{ width: 1200px; }
  .m_about .bd{ padding:40px 0 0; }
  .m_about .list li a .txt{ padding:20px; }
  .m_about .list li a .txt > span{ font-size: 44px; }
  .m_about .list li a .txt > b{ font-size: 20px; }
  .m_about .intro .tit b{ font-size: 32px; }
}

/* m_news */
.app .section4{ position: relative; height: 100%; }
.app .section4 .img_bg{ position: absolute; top:0; width: 100%; height: 100%; }
.app .section4 .img_bg .scale_img{ width: 100%; height: 100%; -webkit-transform:scale(1.2); transform:scale(1.2); }

.m_news{ overflow: hidden; position: relative; z-index: 3; height: 100%; box-sizing: border-box; }
.m_news .inner{ height:100%; margin:0 auto; display: flex; flex-direction: column; justify-content: center; }
.m_news .m_tit span{ color: rgba(255, 255, 255, .04); }
.m_news .m_tit b{ color: #fbfafa; }
.m_news .m_tit p{ color: #fbfafa; }
.m_news .bd{ width: 100%; height: 523px; background: #ffffff; margin-top: 100px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; }
.m_news .bd .video_btn{ width: 50%; height: 100%; overflow: hidden; }
.m_news .bd .video_btn a{ position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.m_news .bd .video_btn a img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
.m_news .bd .video_btn a span{ display: inline-block; font-size: 68px; color: #fff; line-height: 1; position: absolute; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.m_news .bd .video_btn a:hover img{ transition: all .3s; transform: scale(1.05); }
.m_news .bd .news_list{ width: 50%; height: 100%; box-sizing: border-box; padding:45px; overflow: hidden; }
.m_news .bd .news_list li{ overflow: hidden; }
.m_news .bd .news_list li + li{ border-top: 1px dashed #cccccc; }
.m_news .bd .news_list li a{ display: flex; align-items: center; padding:18px 0; }
.m_news .bd .news_list li a i{ display: inline-block; width: 6px; height: 6px; background: var(--zhu-color); border-radius: 50%; margin:0 10px; }
.m_news .bd .news_list li a span{ display: inline-block; font-size: 14px; text-align: right; color: #333333; line-height: 1; float: right; }
.m_news .bd .news_list li a b{ font-weight: normal; display: block; width: calc(100% - 120px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 16px; color: #333333; line-height: 1; }
.m_news .bd .news_list li:nth-child(1) a{ flex-direction: column; align-items: flex-start; padding:0 0 30px }
.m_news .bd .news_list li:nth-child(1) a small{ font-size: 18px; color: #141414; line-height: 1; }
.m_news .bd .news_list li:nth-child(1) a b{ font-size: 24px; color: var(--zhu-color); line-height: 1; display: block; padding:15px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m_news .bd .news_list li:nth-child(1) a p{ font-size: 15px; color: #999999; line-height: 2; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.m_news .bd .news_list li a:hover b{ transition: all .3s; color: var(--zhu-color); }
.m_news .bd .news_list li a:hover span{ transition: all .3s; color: var(--zhu-color); }
@media only screen and (max-width: 1600px){
  .m_news .bd{ margin-top: 60px; height: auto; }
  .m_news .bd .news_list{ padding:30px; }
}
@media only screen and (max-width: 1200px){
  .m_news{ width: 1200px; }
  .m_news .bd{ margin-top: 40px; }
  .m_news .bd .news_list{ padding:20px; }
}

/* m_case */
.app .section5{ position: relative; height: 100%; }
.app .section5 .img_bg{ position: absolute; top:0; width: 100%; height: 100%;  z-index: 1; }
.app .section5 .img_bg .scale_img{ width: 100%; height: 100%; -webkit-transform:scale(1.2); transform:scale(1.2); }

.m_case{ overflow: hidden; position: relative; z-index: 3; height:calc(100% - 345px); box-sizing: border-box; }
.m_case .inner{ height:100%; margin:0 auto; display: flex; flex-direction: column; justify-content: center; }
.m_case .bd{ overflow: hidden; margin:54px 0 0; }
.m_case .bd a{ width: 100%; height: 118px; background: #ffffff; display: block; overflow: hidden; }
.m_case .bd a .img{ width: 100%; height: 100%; overflow: hidden; border-radius: 5px; }
.m_case .bd a .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
.m_case .bd a:hover img{ transition: all .3s; transform: scale(1.05); }
@media only screen and (max-width: 1400px){
  .m_case .bd{ margin:40px 0 0; }
}
@media only screen and (max-width: 1200px){
  .m_case{ width: 1200px; }
  .m_case .bd{ margin:30px 0 0; }
}

/* footer */
.footer{ background: #333333; overflow: hidden; position: relative; z-index: 33; min-height: 345px; }
.f_nav{ display: flex; align-items: center; justify-content: space-between; padding:42px 0; overflow: hidden; border-bottom: 1px solid #575757; }
.f_nav .logo{ width: 300px; overflow: hidden; }
.f_nav .logo img{ max-width: 100%; }
.f_nav .r_nav{ display: flex; width: calc(100% - 380px); align-items: center; justify-content: space-around; }
.f_nav .r_nav a{ font-size: 16px; color: #ffffff; line-height: 1; transition: all .3s; }
.f_nav .r_nav a:hover{ transition: all .3s; color: var(--pei-color); }
.f_info{ display: flex; align-items: flex-start; justify-content: space-between; padding:35px 0; }
.f_info .info{ width: calc(100% - 160px); }
.f_info .info p, .f_info .info p a{ font-size: 16px; line-height: 2; color: #666666; transition: all .3s; }
.f_info .info p a:hover{ transition: all .3s; color: var(--pei-color); }
.f_info .info p span{ font-size: 20px; color: #605e5e; margin-right: 8px; }
.f_info .info p span + span{ margin-left: 24px; }
.f_info .f_ewm{ width: 160px; }
.f_info .f_ewm > div{ width: 150px; display: inline-flex; align-items: flex-start; justify-content: space-between; }
.f_info .f_ewm > div img{ width: 110px; }
.f_info .f_ewm > div p{ width: 40px; box-sizing: border-box; padding:10px 14px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.07; height: 100%; background: #296a76; font-size: 14px; color: rgba(255, 255, 255, .6); }
@media only screen and (max-width: 1400px){
  .footer{ min-height: 300px; }
  .f_nav{ padding:30px 0; }
}
@media only screen and (max-width: 1200px){
  .footer{ width: 1200px; min-height: 240px; }
  .f_nav{ padding:20px 0; }
}


/*sbanner*/
.sbanner{ padding:156px 0; overflow: hidden; background: url(../images/company_banner.jpg) no-repeat top center; }
.sbanner .row{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.sbanner .tit{ display: flex; align-items: center; }
.sbanner span{ text-transform: uppercase; font-size: 36px; font-family: "Constantia"; color: #ffffff; line-height: 1; }
.sbanner b{ font-size: 36px; font-weight: normal; color: #ffffff; line-height: 1; display: inline-block; padding:0 24px; }
.sbanner p{ line-height: 1; margin-top: 17px; font-size: 24px; color: #ffffff; font-weight: 200; }
.sbanner i{ font-size: 48px; color: #fff; line-height: 1; margin-top: 58px; }
.company{ background: url(../images/company_banner.jpg) no-repeat top center; }
.contact{ background: url(../images/contact_banner.jpg) no-repeat top center; }
.news{ background: url(../images/news_banner.jpg) no-repeat top center; }
.scope{ background: url(../images/scope_banner.jpg) no-repeat top center; }
.product_banner{ background: url(../images/product_banner.jpg) no-repeat top center; }
.case_banner{ background: url(../images/case_banner.jpg) no-repeat top center; }
@media only screen and (max-width:1600px){
  .sbanner .inner{ padding:0 15px; }
}
@media only screen and (max-width:1500px){
  .sbanner .row{ align-items: center; }
  .sbanner b::before{ left:50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
}
@media only screen and (max-width:1400px){
  .sbanner{ padding:100px 0; }
  .sbanner span{ font-size:50px; }
  .sbanner b{ font-size: 32px; }
}
@media only screen and (max-width:1200px){
  .sbanner{ padding:90px 0; }
  .sbanner b{ padding:12px 0 20px; }
}

/* location */
.location{ overflow: hidden; margin-top: -44px; width: 100%; padding-bottom: 30px; }
.location .inner{ overflow: visible; }
.location_box{ width: 100%; box-shadow: 0 0 6px rgba(0, 0, 0, .09); display: flex; align-items: center; background: #ffffff; box-sizing: border-box; padding:32px; }
.crumbs{ width: 50%; display: flex; align-items: center; }
.crumbs i{ font-size: 14px; line-height: 1; margin-right: 12px; }
.crumbs small, .crumbs a{ font-size: 14px; color: #666666; transition: all .3s; }
.crumbs a:hover{ transition: all .3s; color: var(--pei-color); }
.l_nav{ width: 50%; display: flex; align-items: center; justify-content: flex-end; }
.l_nav a{ transition: all .3s; display: inline-flex; align-items: center; margin:0 12px; font-size: 14px; color: #666666; line-height: 1; }
.l_nav a i{ transition: all .3s; display: inline-block; margin-right: 8px; font-size: 18px; color: #666666; line-height: 1; }
.l_nav a:hover{ transition: all .3s; color: var(--pei-color); }
.l_nav a:hover i{ transition: all .3s; color: var(--pei-color); }
@media only screen and (max-width: 1400px){
  .location{ margin-top: -40px; }
  .location_box{ padding:30px; }
}
@media only screen and (max-width: 1200px){
  .location{ margin-top: -36px; }
  .location_box{ padding:26px; }
}

/* c_company */
#c_company{ overflow: hidden; padding:70px 0; }
#c_company .inner{ display: flex; align-items: center; justify-content: space-between; }
#c_company .intro{ width: 462px; overflow: hidden; }
#c_company .intro b{ font-family: "YS"; font-size: 48px; color: #121212; font-weight: normal; line-height: 1; }
#c_company .intro ul{ margin-top: 145px; display: flex; flex-direction: column; width: 100%; }
#c_company .intro li{ display: flex; flex-direction: column; padding:25px 0; position: relative; }
#c_company .intro li + li{ margin-top: 14px; }
#c_company .intro li::before{ content: ""; display: block; width: 100%; height: 1px; border:0; background: #bec0c2; position: absolute; left:0; bottom:0; }
#c_company .intro li::after{ content: ""; display: block; width: 0%; height: 1px; border:0; background: var(--zhu-color); position: absolute; left:0; bottom:0; transition: all .3s; }
#c_company .intro li span{ font-size: 30px; font-family: "DINB"; color: #1a1a1a; line-height: 1; text-transform: capitalize; }
#c_company .intro li p{ font-size: 20px; color: #666666; line-height: 1; margin-top: 10px; }

#c_company .intro li:nth-child(1):hover::after{ width: 100%; transition: all .3s; }
#c_company .intro li:nth-child(2):hover::after{ width: 82%; transition: all .3s; }
#c_company .intro li:nth-child(3):hover::after{ width: 62%; transition: all .3s; }
#c_company .intro li:nth-child(4):hover::after{ width: 42%; transition: all .3s; }
#c_company .info{ width: 852px; overflow: hidden; }
#c_company .info{ display: flex; flex-direction: column; }
#c_company .info > b{ font-size: 36px; color: #333333; line-height: 1; margin-bottom: 16px; font-weight: normal; }
#c_company .info .txt{ font-size: 18px; color: #666666; line-height: 1.6; }
#c_company .info .txt strong{ display: none; }
#c_company .info .txt p:nth-child(4), #c_company .info .txt p:nth-child(5), #c_company .info .txt p:nth-child(6){ display: none; }
#c_company .info > img{ max-width: 100%; margin-top: 24px; }
@media only screen and (max-width: 1400px){
  #c_company{ padding:50px 0; }
  #c_company .intro{ width: 33%; }
  #c_company .intro b{ font-size: 42px; }
  #c_company .info{ width: 60%; }
  #c_company .intro ul{ margin-top: 40px; }
  #c_company .intro li span{ font-size: 24px; }
  #c_company .info > b{ font-size: 30px; }
  #c_company .info .txt{ font-size: 16px; }
}
@media only screen and (max-width: 1200px){
  #c_company{ width: 1200px; padding:30px 0; }
  #c_company .intro b{ font-size: 36px; }
  #c_company .intro li span{ font-size: 20px; }
  #c_company .info > b{ font-size: 24px; }
  #c_company .info > b{ font-size: 26px; }
  #c_company .info .txt{ font-size: 14px; }
}

/* c_cult */
#c_cult{ overflow: hidden; padding:70px 0; }
#c_cult .m_tit b{ margin-top: -70px; margin-bottom: 52px; }
#c_cult ul{ position: relative; overflow: hidden; width: 100%; height: 700px; }
#c_cult ul li{ float: left; width: 233px; overflow: hidden; height: 100%; position: relative; cursor: pointer;}
#c_cult ul li a{ display: block; width: 100%; height: 100%; }
#c_cult ul li .layer{ position: absolute; bottom: 0; left: 0; width: 100%; background:rgba(0,0,0,0.67); height: 100%; }
#c_cult ul li .layer .p1{ position: absolute; bottom: 20px; left: 20px; }
#c_cult ul li .layer .p2{ position: absolute; bottom: 14px; left: 400%; }
#c_cult ul li .layer .p2 b{ font-size: 24px; }
#c_cult ul li .layer .p1 b{ font-size: 24px; }
#c_cult ul li .layer .p2 span{ display: block; font-size: 16px; }
#c_cult ul li .layer .p1 span{ display: block; font-size: 16px; }
#c_cult ul li .layer b, #c_cult ul li .layer span{ color: #fff; font-size: 16px; font-weight: normal; }
@media only screen and (max-width: 1400px){
  #c_cult .m_tit b{ margin-bottom: 36px; }
  #c_cult ul{ height: 600px; }
  #c_cult ul li{ width: 16.6%; }
}
@media only screen and (max-width: 1200px){
  #c_cult{ width: 1200px; }
  #c_cult ul{ height: 500px; }
  #c_cult .m_tit b{ margin-bottom: 32px; }
}

/* c_team */
#c_team{ box-sizing: border-box; overflow: hidden; padding:70px 8%; background: url(../images/team_bg.jpg) no-repeat top center; background-attachment: fixed; }
#c_team .m_tit b{ margin-top: 0; margin-bottom: 60px; color: #ffffff; }
#c_team a{ display: block; background: #fff; padding:12px; box-shadow: 0 0 5px rgba(0, 0, 0, .21); position: relative; }
#c_team a::after{ content: ""; display: block; width: 0; height: 3px; background: linear-gradient(to bottom,#fe9944, #fc7265); border:0; position: absolute; left:0; bottom: 0; transition: all .3s; }
#c_team a .img{ width: 100%; height: 256px; overflow: hidden; }
#c_team a .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
#c_team a .txt{ padding:10px; margin:20px 0; border-top:1px solid #e2e1e1; }
#c_team a .txt b{ font-size: 18px; color: #333333; display: block; font-weight: normal; margin:12px 0; line-height: 1; transition: all .3s; }
#c_team a .txt p{ font-size: 14px; color: #999999; line-height: 1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#c_team a:hover::after{ transition: all .3s; width: 100%; }
#c_team a:hover img{ transition: all .3s; transform: scale(1.05); }
#c_team a:hover b{ transition: all .3s; color: var(--pei-color); }
#team{ overflow: hidden; padding-bottom: 120px; }
#team .swiper-button-next, #team .swiper-button-prev{ transition: all .3s; background: #cccccc; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 38px; top:auto; bottom:0; background-image: none; }
#team .swiper-button-next i, #team .swiper-button-prev i{ display: inline-block; color: #ffffff; font-size: 20px; }
#team .swiper-button-next i{ transform: rotateY(180deg); }
#team .swiper-button-next{ left: calc(50% + 15px); right: auto; }
#team .swiper-button-prev{ left: calc(50% - 87px);}
#team .swiper-button-next:hover, #team .swiper-button-prev:hover{ transition: all .3s; background: linear-gradient(to bottom, #fe9944, #fb6373); }
@media only screen and (max-width: 1400px){
  #c_team{ padding:50px 30px; }
  #team{  padding-bottom: 80px; }
  #c_team .m_tit b{ margin-bottom: 40px; }
}
@media only screen and (max-width: 1200px){
  #c_team{ width: 1200px; padding:30px 15px; }
  #team{  padding-bottom: 60px; }
  #c_team .m_tit b{ margin-bottom: 20px; }
}


/* c_case */
.c_case{ overflow: hidden; padding:80px 0; background: #fbfbfb url(../images/case_bg.jpg) no-repeat center; }
@media only screen and (max-width: 1400px){
  .c_case{ padding:60px 0; }
}
@media only screen and (max-width: 1200px){
  .c_case{ padding:40px 0; }
}

/* product_team */
.product_team{ background: #f6f7f8; margin:42px 0; padding:30px 0; border-radius: 60px; overflow: hidden; width:100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
.product_team li{ width:25%; box-sizing: border-box; padding:0 40px; display: flex; align-items: center; }
.product_team li + li{ border-left: 1px solid #cccdce; }
.product_team li span{ font-size: 40px; color: var(--zhu-color); line-height: 1; display: inline-block; margin-right: 30px; }
.product_team li .txt{ display: inline-flex; flex-direction: column; }
.product_team li .txt b{ font-size: 26px; color: #333333; font-weight: normal; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product_team li .txt p{ font-size: 14px; color: #666666; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top: 8px; }
@media only screen and (max-width:1500px){
  .product_team{ margin:28px 0; padding:28px 0; border-radius: 28px; }
  .product_team li{ padding:0 30px; }
  .product_team li span{ font-size:38px; margin-right:15px }
}
@media only screen and (max-width:1400px){
  .product_team{ margin:26px 0; padding:26px 0; border-radius: 26px; }
  .product_team li{ padding:0 15px; }
  .product_team li span{ font-size:36px; margin-right:12px }
  .product_team li .txt b{ font-size:22px; }
}
@media only screen and (max-width:1200px){
  .product_team{ width: 1200px; margin:24px 0; padding:0; border-radius: 24px; flex-wrap: wrap; }
  .product_team li{ width:50%; flex-direction: column; align-items: center; padding:20px; }
  .product_team li span{ font-size:34px; max-width: auto; margin-right:0; margin-bottom: 15px; }
  .product_team li .txt{ align-items: center; }
  .product_team li:nth-child(1), .product_team li:nth-child(2){ border-bottom: 1px solid #cccdce; }
  .product_team li:nth-child(3), .product_team li:nth-child(4){ border-top: none; }
  .product_team li:nth-child(3){ border-left: none; }
}

/* product_type */
#product_type{ overflow: hidden; padding-bottom: 80px; width: 100%; }
#product_type a{ width: 100%; height: 340px; display: block; position: relative; overflow: hidden; }
#product_type a > img{ width:100%; height:100%; object-fit: cover; transition: all .3s; }
#product_type a .info { color:rgba(255,255,255,.6); background:rgba(0,0,0,.7); position:absolute; left:0; top:0; right:0; bottom:0; text-align: center; display:flex; justify-content:center; align-items: center; transition:.36s all ease-out; }
#product_type a .info b { color:#fff; font-size:36px; font-weight: normal; transition: all .3s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#product_type a .info p { font-size: 18px; color: #999999; margin:48px 0 24px;  transition: all .3s;}
#product_type a .info span { font-size: 18px; color: #999999; transition: all .3s; line-height: 1; }
#product_type a:hover .info{ color:#fff; background: var(--zhu-color); left:30px; top:30px; right:30px; bottom:30px; transition:.2s all ease-in; }
#product_type a:hover b, #product_type a:hover p, #product_type a:hover span{ color:#fff; transition: all .3s; }
#product_type a:hover > img{ transition: all .3s; transform: scale(1.05); }
#product_type .swiper-pagination{ bottom:54px; }
#product_type .swiper-pagination-bullet{ display: inline-block; width:12px; height:12px; background: #c3c3c5; border-radius: 50%; margin:0 5px; opacity: 1; transition: all .3s; }
#product_type .swiper-pagination-bullet-active{ transition: all .3s; background: var(--zhu-color); }
@media only screen and (max-width:1500px){
  #product_type a .info b{ font-size:32px; }
}
@media only screen and (max-width:1400px){
  #product_type a .info b{ font-size:28px; }
  #product_type a{ height:260px; }
  #product_type a .info p{ margin:24px; }
  #product_type{ padding-bottom: 60px; }
  #product_type .swiper-pagination{ bottom:50px; }
}
@media only screen and (max-width:1200px){
  #product_type{ width: 1200px; }
  #product_type a .info b{ font-size:26px; }
  #product_type a .info p{ margin:20px; }
  #product_type{ padding-bottom: 30px; }
  #product_type .swiper-pagination{ bottom:45px; }
  #product_type a{ height:240px; }
}

/* product_list */
.product_list{ overflow: hidden; position: relative; padding-left: 220px; width: 100%; box-sizing: border-box; }
.product_list > small{ line-height: 1; position: absolute; left:80px; top:50%; font-weight: 200; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20px; writing-mode:tb; font-size: 18px; color: #666666; text-transform: capitalize; padding-top: 230px; min-height: 360px; }
.product_list > small::before{ content: ""; display: inline-block; width: 1px; height:194px; background: #e0e1e1; position: absolute; left:50%; top:0; }
#product_list{ overflow: hidden; }
#product_list > b{ display: block; width:calc(100% - 120px); font-size: 36px; color: #333333; font-weight: bold; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:20px 0; }
#product_list > .cate_info{ margin-bottom: 20px; font-size: 15px; color: #666666; line-height: 2; }
#product_list a{ display: block; width:100%; padding-bottom: 60%; position: relative; overflow: hidden; position: relative; }
#product_list a img{ width:100%; height:100%; object-fit: cover; position: absolute; transition: all .3s; }
#product_list a .txt{ position: absolute; top:100%; transition: all .3s; width:100%; height:100%; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; flex-direction: column; }
#product_list a .txt span{ font-size: 36px; color: #fff; line-height: 1; font-weight: 200; }
#product_list a .txt b{ font-size: 18px; font-weight: normal; color: #fff; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing: border-box; padding:12px; }
#product_list a:hover img{ transition: all .3s; transform: scale(1.05); }
#product_list a:hover .txt{ transition: all .3s; top:0; }
#product_list .swiper-button-next, #product_list .swiper-button-prev{ width:38px; height:38px; background: #d0d0d0; display: inline-flex; align-items: center; justify-content: center; transition: all .3s; }
#product_list .swiper-button-next:hover, #product_list .swiper-button-prev:hover{ transition: all .3s; background: var(--pei-color); }
#product_list .swiper-button-next::after, #product_list .swiper-button-prev::after{ display: none; }
#product_list .swiper-button-next span, #product_list .swiper-button-prev span{ display: inline-block; font-size: 16px; color: #ffffff; line-height: 1; }
#product_list .swiper-button-prev span{ transform: rotateY(180deg); }
#product_list .swiper-button-next{ top:30px; right:0; background: var(--zhu-color); }
#product_list .swiper-button-prev{ top:30px; left:auto; right:44px; }
@media only screen and (max-width:1500px){
  .product_list > small{ display:none; }
  .product_list{ padding-left: 0; }
  #product_list > b{ font-size:32px; }
}
@media only screen and (max-width:1400px){
  #product_list > b{ font-size:30px; }
}
@media only screen and (max-width:1200px){
  .product_list{ width: 1200px; }
  #product_list > b{ font-size:28px; padding:18px 0; }
  #product_list a .txt span{ font-size: 30px; } 
}

/* c_flow */
.c_flow{ padding:0 0 56px; }
.flow_list{ display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.flow_list:before{ content:""; position:absolute; left:2px; top:50px; width:99%; height:1px; border-bottom:#969ca1 1px dashed; }
.flow_list:after{ content:""; position:absolute; right:0; top:50px; width:0; height:1px; border-bottom:var(--zhu-color) 1px dashed; z-index:0; -moz-transition: all 4s ease-in-out;-webkit-transition: all 4s ease-in-out; -o-transition: all 4s ease-in-out; -ms-transition: all 4s ease-in-out; transition: all 4s ease-in-out; }
.flow_list:hover:after{ left:2px; width:100%; }
.flow_list{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
.flow_list li{ width:78px; text-align: center; position: relative; z-index: 33; }
.flow_list li b{ text-align: center; border-radius: 50%; font-weight: normal; box-sizing: border-box; padding:20px; display: inline-flex; width: 110px; height:110px; background: var(--zhu-color); align-items: center; justify-content: center; font-size: 32px; color: #ffffff; line-height: 1.1; font-family: "PMZD"; position: relative; z-index: 33; }
.flow_list li .img{ position: relative; width: 78px;height: 78px; display: inline-block; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; position:  relative; z-index: 10; -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out; -o-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out; transition: all 0.36s ease-in-out; transform:rotate(90deg) translateZ(0); -webkit-transform:rotate(90deg) translateZ(0); -moz-transform:rotate(90deg) translateZ(0); background:#ffffff; }
.flow_list li .img small{ display:flex; align-items: center; transform:rotate(-90deg) translateZ(0); -webkit-transform:rotate(-90deg) translateZ(0);  -moz-transform:rotate(-90deg) translateZ(0); }
.flow_list li .img small span{ display: inline-block; font-size: 34px; line-height: 1; color: var(--zhu-color); -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
.flow_list li:nth-child(1){ width:9%; text-align: left; }
.flow_list li:nth-child(1)::before{ content: ""; display: block; width: 126px; height:126px; background: rgba(14, 36, 96, .42); border-radius: 50%; position: absolute; left:10px; top:-8px; }
.flow_list li:hover .img small span{ color: var(--pei-color); -webkit-animation: jello 1s; -moz-animation: jello 1s; animation: jello 1s; }
.flow_list li p{ display: block; font-weight: normal; line-height: 1; font-size: 18px; color: #333333; margin-top: 12px; }
@keyframes jello {
  from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none }
  22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }
  33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }
  44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }
  55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }
  66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }
  77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }
  88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}
.circleProgress_wrapper{ position:relative;}
.wrapper{width: 72.5px;height: 78px;position: absolute;top:0;overflow: hidden;}
.circleProgress_wrapper .left{ width: 39px; height: 78px; position:absolute; left:0; top:0; }
.circleProgress_wrapper .right{ width: 39px; height: 78px ;position:absolute; right:0; top:0; }
.flow_list li .img .circleProgress{ width: 78px; height: 78px; border: 2px solid var(--pei-color); border-radius: 50%; position: absolute; top:0;-webkit-transform: rotate(45deg); box-sizing:border-box; }
.flow_list li .img .rightcircle{ border-top: 2px solid var(--zhu-color); border-right: 2px solid var(--zhu-color); right:0;}
.flow_list li .img:hover .rightcircle{ -webkit-animation: circleProgressLoad_right 2s linear; }
.flow_list li .img .leftcircle{border-bottom: 2px solid var(--zhu-color);border-left: 2px solid var(--zhu-color);left:0;}
.flow_list li .img:hover .leftcircle{ -webkit-animation: circleProgressLoad_left 2s linear;}
.flow_list li .img:after{content:"";position:absolute;left: 0;top: 0;width: 78px;height: 78px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.flow_list li .img:hover:after{transition-delay:2s; border:2px solid var(--pei-color);}
@-webkit-keyframes circleProgressLoad_right{
	0%{ -webkit-transform: rotate(45deg); }
	50%{ -webkit-transform: rotate(225deg); }
	100%{ -webkit-transform: rotate(225deg);}
}
@-webkit-keyframes circleProgressLoad_left{
	0%{ -webkit-transform: rotate(45deg);}
	50%{ -webkit-transform: rotate(45deg);}
	100%{ -webkit-transform: rotate(225deg);}
}

@media only screen and (max-width: 1600px){
  .flow_list li:nth-child(1)::before{ display: none; }
}
@media only screen and (max-width: 1400px){
  .c_flow{ padding:0 0 50px; }
  .flow_list{ align-items: flex-start; }
  .flow_list li{ width:10%; }
  .flow_list li b{ font-size: 26px; width:100px; height: 100px; }
  .flow_list li p{ margin-top: 6px; font-size: 16px; }
}
@media only screen and (max-width: 1200px){
  .c_flow{ width: 1200px; padding:0 0 40px; }
  .flow_list{ width: 1200px; flex-wrap: wrap; margin-top: 0; }
  .flow_list:before, .flow_list:after{ top:126px; }
  .flow_list li{ width:9%; }
  .flow_list li:nth-child(1){ width:100%; text-align: center; margin:20px 0; position: relative; }
  .flow_list li b{ width: auto; height: auto; border-radius: 10px; padding:10px 30px 8px; line-height: 1; }
  .flow_list:before{ left:2%; width:96%; }
  .flow_list:hover:after{ left:2%; width:100%; }
}

/*industry_news*/
.industry_news{ overflow: hidden; }
.industry_news li{ overflow: hidden; margin-bottom: 30px; }
.industry_news a{ display: block; width: 100%; overflow: hidden; }
.industry_news a .img{ width: 100%; height: 200px; overflow: hidden; }
.industry_news a .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
.industry_news a .txt{ overflow: hidden; padding:20px; background: #f5f5f5;transition: all .3s; }
.industry_news a .txt b{ font-weight: normal; display: block; font-size: 16px; color: #444; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industry_news a .txt span{ display: block; font-size: 14px; color: #777; line-height: 1.5; }
.industry_news a .txt p{ font-size: 14px; color: #777; line-height: 30px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.industry_news a .txt p + span{ font-size: 16px; margin-top: 4px; margin-left: 0; transition: all .3s; }
.industry_news a:hover img{ transition: all .3s; transform: scale(1.05); }
.industry_news a:hover .txt{ transition: all .3s; background: var(--zhu-color); }
.industry_news a:hover .txt b, .industry_news a:hover .txt span, .industry_news a:hover .txt p{ color: #fff; }
.industry_news a:hover .txt p + span{ margin-left: 10px; transition: all .3s; }
@media only screen and (max-width: 1400px){
}
@media only screen and (max-width: 1200px){
  .industry_news{ width: 1200px; }
  .industry_news a .txt{ padding:12px; }
  .industry_news a .img{ height: 160px; }
} 


/* article_main */
.article_main{ margin-bottom: 30px; }
.main{ overflow: hidden; }
.article_content .left{ padding-left: 0; padding-right: 7.5px; }
.article_content .right{ padding-left: 7.5px; padding-right: 0; }
.article_content .single{ width: 100%; box-sizing: border-box; padding:20px 45px; font-size: 16px; color: #4c4c4c; line-height: 1.8;}
.article_content .single img{ max-width: 100%; margin:12px 0!important }
.img_one{ text-align: center; width: 100%; }
.img_one img{ max-width: 100%; }
.article_box{ background: #fafafa; box-sizing: border-box; }
.page_tit{ position: relative; padding: 45px 45px 0; text-align: left; }
.page_tit b{ display: block; font-size: 26px; color: #1a1a1a; line-height: 1.5; font-weight: normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page_tit .meta{ font-size: 14px; color: #999999; line-height: 1; margin:18px 0 0; border-bottom: solid 1px #e9e9e9; padding-bottom: 15px; }
.page_tit .meta span{ display: inline-block; margin-right: 8px; color: #393939; font-size: 20px; }
.relevant_news{ padding:20px; box-sizing: border-box; background: #fafafa; }
.relevant_news > b{ display: inline-block; font-size: 24px; color: var(--pei-color); font-weight: bold; line-height: 1; padding:18px 0; margin-bottom: 24px; border-bottom: 4px solid var(--pei-color); }
.relevant_news a{ display: block; width: 100%; }
.relevant_news a .img{ width: 100%; padding-bottom: 74%; position: relative; overflow: hidden; }
.relevant_news a .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; }
.relevant_news a .txt{ padding:26px 0; overflow: hidden; }
.relevant_news a .txt b{ line-height: 1; display: block; font-size: 18px; color: #3a3a3a; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all .3s; }
.relevant_news a .txt span{ display: inline-block; font-size: 14px; color: #666666; margin-top: 18px; line-height: 1; }
.relevant_news a:hover img{ transition: all .3s; transform: scale(1.05); }
.relevant_news a:hover b{ transition: all .3s; color: var(--pei-color); }
.prev_next{ width:100%; margin:20px 0 0; display: flex; }
.prev_next>div{ width:50%; padding:20px; border-top: 1px solid #e9e9e9; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.prev_next>div + div{ border-left:1px solid #e9e9e9; }
.prev_next>div a{ color: #999; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block; width: calc(100% - 100px); font-size: 14px; }
.prev_next>div a:hover{ color: var(--zhu-color); }
@media only screen and (max-width: 1400px){
  .page_tit{ padding:35px 35px 0; }
  .article_content .single{ padding:20px 35px; }
  .relevant_news > b{ font-size: 22px; padding:15px 0; margin-bottom: 20px; }
  .relevant_news a .txt{ padding:24px 0; }
  .prev_next>div{ padding:18px; }
}
@media only screen and (max-width: 1200px){
  .page_tit{ padding:30px 30px 0; }
  .article_content .single{ padding:20px 30px; }
  .page_tit b{ font-size: 24px; }
  .relevant_news{ padding:15px; }
  .relevant_news > b{ font-size: 20px; padding:12px 0; margin-bottom: 15px; }
  .relevant_news a .txt{ padding:22px 0; }
  .relevant_news a .txt b{ font-size: 17px; }
  .prev_next>div{ padding:15px; }
}


/* honor_list */
.honor{ width:100%; }
.honor_list a { display: block; width:100%; margin-bottom: 30px; border:1px solid #f1f1f1; position: relative; overflow: hidden; }
.honor_list a .img{ width: 100%; padding-bottom: 72%; position: relative; overflow: hidden; }
.honor_list a .img img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all 0.6s ease 0s; }
.honor_list a .txt{ display: flex; flex-direction: column; width:100%; height: 100%; background: rgba(0, 0, 0, .5); align-items: center; justify-content: center; box-sizing: border-box; padding:15px; position: absolute; top:100%; left:0; transition: all .3s; }
.honor_list a .txt span{ font-size: 44px; color: #ffffff; line-height: 1; }
.honor_list a .txt b{ font-weight: normal; display: block; font-size: 16px; color: #ffffff; line-height: 1; margin-top: 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.honor_list a:hover img { transform: scale(1.06); }
.honor_list a:hover .txt{ transition: all .3s; top:0; }
@media only screen and (max-width: 1400px){
}
@media only screen and (max-width: 1200px){
  .honor_list{ width: 1200px; }
  .honor_list a .txt span{ font-size: 40px; }
}


/* contact_info */
.contact_info{ overflow: hidden; }
.contact_info .row > div{ background: #f5f5f5; box-sizing: border-box; padding:42px; }
.contact_info .row > div + div{ background: #e7ebec; }
.contact_info b{ font-size: 26px; color: var(--zhu-color); font-weight: bold; display: block; line-height: 1; margin-bottom: 24px; }
.contact_info .bg{ height: 560px; margin-top: -360px; background: url(../images/contact_info_bg.jpg) no-repeat top center; background-attachment:fixed; }
.contact_txt > .txt{ overflow: hidden; margin-bottom: 32px; }
.contact_txt > .txt p{ padding: 10px 0; display: flex; align-items: center; justify-content: flex-start; }
.contact_txt > .txt p span{ font-size: 20px; line-height: 1; color: #666666; margin-right: 14px; }
.contact_txt > .txt p small{ display: inline-block; font-size: 16px; line-height: 1; color: #333333; }
.contact_ewm{ overflow: hidden; }
.contact_ewm > div{ max-width: 136px; float: left; }
.contact_ewm > div img{ max-width: 100%; }
.contact_ewm > div p{ font-size: 14px; color: #333333; line-height: 1; margin:12px 0 0; padding:0; text-align: center; justify-content: center; }
.contact_ewm > div + div{ margin-left: 50px; }
/* contact_msg */
.contact_msg{ overflow: hidden; }
.contact_msg .contact_input{ overflow: hidden; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.contact_msg .contact_input input{ width: calc(50% - 17px); height: 51px; box-sizing: border-box; padding:0 25px; border-radius: 5px; background: #ffffff; font-size: 16px; color: #999999; }
.contact_msg textarea{ margin-bottom: 26px; width: 100%; height: 128px; box-sizing: border-box; border-radius: 5px; background: #ffffff; font-size: 16px; color: #999999; padding:20px; line-height: 1.5; }
.contact_msg .contact_code{ display: flex; align-items: center; justify-content: space-between; }
.contact_msg .contact_code img{ width: 160px; height: 51px; object-fit: cover; }
.contact_msg .contact_code input{ width: 246px; height: 51px; box-sizing: border-box; padding:0 25px; border-radius: 5px; background: #ffffff; font-size: 16px; color: #999999; }
.contact_msg .contact_code .submit{ padding:18px 100px; background: var(--zhu-color); border-radius: 5px; line-height: 1; font-size: 16px; color: #ffffff; }
@media(max-width:1400px){
  .contact_msg .contact_code .submit{ padding:18px 60px; }
}
@media(max-width:1200px){
  .contact_info{ width: 1200px; }
  .contact_info .row > div{ padding:30px; }
  .contact_msg .contact_code{ flex-wrap: wrap; }
  .contact_msg .contact_code .submit{ width:100%; margin-top: 26px; text-align: center; }
  .contact_txt > .txt p{ align-items: flex-start; }
  .contact_txt > .txt p small{ line-height: 1.5; }
}
/* contact_map */
#dituContent{ width: 100%; margin:0 auto; height: 640px; border:1px solid #cccccc; }
@media only screen and (max-width: 1400px){
}
@media only screen and (max-width: 1200px){
  #dituContent{ width: 1200px;}
}