@charset "utf-8";

/* 引入外部图标样式 */

@font-face {

  font-family: 'iconfont';  /* Project id 2431691 */

  src: url('http://at.alicdn.com/t/font_2431691_cqivkwch1u.woff2?t=1634551339345') format('woff2'),

       url('http://at.alicdn.com/t/font_2431691_cqivkwch1u.woff?t=1634551339345') format('woff'),

       url('http://at.alicdn.com/t/font_2431691_cqivkwch1u.ttf?t=1634551339345') 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;

}

/* 网站色值设置 */

body{--zhu-color:#0291d7;--pei-color:#69b632;}

/* 样式重置 */

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: 14px/1.5 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'Tahoma', 'Hiragino sans gb', 'SimSun', 'Sans-serif'; color: #333; background-color: #fff;}

ul,li{list-style:none;margin:0;padding:0;}

a:hover{ text-decoration: none; }

/*清除内外边距*/

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;}

.inner{ width: 1200px; margin:0 auto; }

@media only screen and (max-width: 1200px){

  .inner{ width: 100%; box-sizing: border-box; }

}

@media only screen and (max-width: 640px){

  .inner{ padding:0; }

}

button:active, button:focus{ border:none; outline:0; }

/*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; min-width: 26px; padding: 0 12px; height: 36px; border: 1px solid #dddddd; background: #fff; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin-right: 1px; overflow: hidden; border-radius: 5px; }

.de-page-mian .page-inner a.active,

.de-page-mian .page-inner a:hover{color: #fff; border-color: var(--pei-color); background: var(--pei-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;}

@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; }

}



/*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;}



/*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;}

.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: 1000;}

.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; }

}



/* 字体引入 */

@font-face{ font-family: DIN; src: url('./fonts/DINPro-Bold.ttf'); }



/*header*/

.h_top{ padding:0 15px; border-radius: 10px; width: 100%; display: flex; align-items: center; justify-content: space-between; background: #fff; z-index: 999; z-index: 999; box-sizing: border-box; box-shadow: 0 0 10px rgba(197, 198, 201, .35); transition: all .3s; }

.h_top .logo{ display: block; padding:22px 0; }

.h_top .menu{ width: calc(100% - 400px); display: flex; align-items: center; }

.nav{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }

.nav li{ position: relative; transition: all .3s; width: 12.5%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 35; }

.nav li > a{ display: flex; height: 100%; flex-flow: column; align-items: center; transition: all .3s; position: relative; z-index: 33; }

.nav li > a::before{ content: ""; display: inline-block; width: 0; position: absolute; bottom:0; left:0; height: 2px; background: #0291d7; transition: all .3s; }

.nav li > a b{ font-size: 16px; color: #333333; line-height: 1; display: inline-block; padding:46px 0; transition: all .3s; font-weight: normal; }

.nav li:hover{ transition: all .3s; overflow: visible;  }

.nav li:hover a::before{ transition: all .3s; width: 100%; }

.nav li:hover b{ transition: all .3s; color: var(--zhu-color); font-weight: bold; }

.nav li .d_menu{ position: absolute; padding:20px 0; top:50%; left:0; width: 100%; background: var(--zhu-color); z-index: 31; transition: all .3s; opacity: 0; border-radius: 0 0 5px 5px; }

.nav li .d_menu a{ display: block; text-align: center; font-size: 14px; color: #ffffff; padding:5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .3s; }

.nav li .d_menu a:hover{ transition: all .3s; background: var(--pei-color); color: #fff; }

.nav li:hover .d_menu{ transition: all .3s; top:100%; z-index: 33; opacity: 1; }

.h_top .tools{ display:flex; align-items: center;  position: relative; }

.h_top .tools li{ display:inline-block; padding:40px 10px; overflow: hidden; }

.h_top .tools li span{ position: relative; display: inline-block; width: 30px; height: 30px; line-height: 30px; background: #b6b6b6; border-radius: 50%; text-align: center; font-size: 18px; color: #fff; transition: all .3s; }

.h_top .tools li + li span::before{ content:""; display: inline-block; width: 1px; height:20px; background: #e3e3e3; position: absolute; left: -10px; top:50%; margin-top: -10px; }

.h_top .tools li:hover span{ transition: all .3s; background: -moz-linear-gradient(top, var(--pei-color) 0%, var(--zhu-color) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--pei-color)), color-stop(100%,var(--zhu-color))); background: -webkit-linear-gradient(top, var(--pei-color) 0%,var(--zhu-color) 100%); background: -o-linear-gradient(top, var(--pei-color) 0%,var(--zhu-color) 100%); background: -ms-linear-gradient(top, var(--pei-color) 0%,var(--zhu-color) 100%); background: linear-gradient(to bottom, var(--pei-color) 0%,var(--zhu-color) 100%); }

.h_top .tools li .drop_down{ position: absolute; right:-15px; top:50%; display: none; width: 100%; text-align: center; background: #f1f1f1; padding:15px; border-radius: 10px; transition: all .3s; }

.h_top .tools li .h_tel{ width:160%; box-sizing: border-box; padding: 18px 24px; }

.h_top .tools li .h_tel b{ line-height: 30px; font-size: 24px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;  }

.h_top .tools li .h_tel b span{ margin-right: 12px; }

.h_top .tools li .h_ewm{ width:120%; }

.h_top .tools li .h_search{ width:240%; padding:18px 24px; box-sizing: border-box; }

.h_top .tools li:hover{ overflow: visible; }

.h_top .tools li:hover .drop_down{ display: block; transition: all .3s; top:100%; }



.search{ width: 330px; box-sizing: border-box; background: #ffffff; display: flex; align-items: center; float: right; line-height: 40px; padding:0 22px; border-radius: 30px; }

.search input{ background: none; width: 90%; height: 100%; font-size: 14px; color: #999999;  }

.search button{ cursor: pointer; background: none; width: 10%; font-size: 18px; color: #000000;  }

.search button:active{ border:none; }



.index_top{ position: fixed; width: 80%; margin:60px auto 0; z-index: 9999; left:10%; }

.scrolledDown{ position: fixed!important; top:0; left:0; z-index: 9999; transition: all .3s; border-radius:0; }

.btn_tool{ display: none; }

.btn_tool .menu span, .btn_tool .close span{ font-size: 44px; color: var(--pei-color); line-height: 1; font-weight: normal; }



@media only screen and (max-width: 1606px){

  .index_top{ position: fixed; width: 90%; margin:60px auto 0; z-index: 9999; left:5%; }

}

@media only screen and (max-width: 1406px){

  .index_top{ position: fixed; width: 100%; margin:0 auto; z-index: 9999; left:0; }

  .index_top .h_top{ border-radius: 0;  }

  .h_top{ position: relative;  }

  .h_top::before{ content: ""; display: block; width: 100%; height: 100%; background: #fff; position: absolute; top:0; left: 0; z-index: 34; }

  .h_top .inner{ padding:0 15px; }

  .h_top .logo{ padding-left: 0; }

  .h_top .menu{ flex-direction: row-reverse; }

  .nav li .d_menu{ display: none; }

  .h_top .btn_tool, .h_top .logo, .h_top .tools{ position: relative; z-index: 34; }

  .btn_tool{ display: flex; height: 100%; align-items: center; justify-content: flex-end; }

  .btn_tool .close{ display: none; }

  .nav{ position: fixed; top: -100%; transition: all .3s; flex-direction: column; width: 100%; left: 0; background: var(--pei-color); justify-content: flex-start; overflow: hidden; height: auto; z-index: 33; opacity: .9; }

  .nav li{ width: 100%; border-bottom: 1px dashed rgba(255, 255, 255, .8); }

  .nav li::before, .nav a span, .nav a img{ display: none; }

  .nav li > a{ display: block; width: 100%; text-align: center; }

  .nav li > a b{ padding:20px 0; color: #fff; display: block; text-align: center; }

  .nav a:hover b{ color: #fff; font-weight: bold; top:0; }

  .nav li > a::before{ bottom: -1px; }

  .btn_tool .hide{ transition: all .3s; display: none; opacity: 0; }

  .btn_tool .show{ transition: all .3s; display: flex; opacity: 1; }

  .open{ transition: all .3s; top:110px;  }

  .h_top .tools{ margin-right: 10px; }

}

@media only screen and (max-width: 1206px){

  .h_top .menu{ width: calc(100% - 400px); }

  .h_top .logo{ width:400px; box-sizing: border-box; }

  .h_top .logo img{ max-width: 100%; }

  .nav li > a b{ font-size: 17px; }

  .nav li > a span{ font-size: 24px; }

}

@media only screen and (max-width: 774px){

  .h_top .menu{ width: calc(100% - 300px); }

  .h_top .logo{ width:300px; box-sizing: border-box; }

}

@media only screen and (max-width: 646px){

  .h_top .tools{ display: none; }

  .nav li > a{ padding:0; }

  .h_top .logo{ padding:16px 0; }

  .h_top .logo img{ max-width: 100%; }

  .open{ transition: all .3s; top:74px;  }

  .btn_tool .menu span, .btn_tool .close span{ font-size: 36px; }

}

@media only screen and (max-width: 576px){

  .h_top .logo{ padding:12px 0; }

  .h_top .logo img{ max-width: 80%; }

  .open{ transition: all .3s; top:57px;  }

}



/*banner*/

#banner{ width: 100%;}

#banner .swiper-pagination{ bottom:30px; }

#banner .swiper-pagination-bullet{ opacity: 1; width: 14px; height: 14px; background: none; border:2px solid #f7fbfe; border-radius: 50%; }

#banner .swiper-pagination-bullet-active{ width: 42px; height: 12px; background: var(--pei-color); border-radius: 12px; border:none; }

@media only screen and (max-width: 1900px){

  #banner img{ width: 100%;}

}

@media only screen and (max-width: 998px){

  #banner{ padding-top:110px; }

  #banner .swiper-button-next, #banner .swiper-button-prev{ top:60%; }

}

@media only screen and (max-width: 646px){

  #banner{ padding-top:74px; }

  #banner .swiper-pagination{ bottom:15px; }

  #banner .swiper-pagination-bullet{ opacity: 1; width: 10px; height: 10px; background: none; border:1px solid #f7fbfe; border-radius: 50%; }

  #banner .swiper-pagination-bullet-active{ width: 32px; height: 8px; background: var(--pei-color); border-radius: 12px; border:none; }

  #banner img{ width: 100%; height: 300px; object-fit: cover; }

}

@media only screen and (max-width: 576px){

  #banner{ padding-top:57px; }

   #banner img{ height: 200px; }

}



/* box_tit */

.box_tit{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding:60px 0; }

.box_tit .tit{ overflow: hidden; }

.box_tit .tit b{ font-size: 48px; color: var(--zhu-color); font-weight: bold; line-height: 1; }

.box_tit .tit p{ font-size: 18px; color: #666666; line-height: 1.5; margin-top: 20px; }

.box_tit a{ display: inline-block; position: relative; }

.box_tit a::before{ content: ""; width: 96px; height: 1px; background: #333333; position: absolute; left:0; top:0; transition: all .3s; }

.box_tit a::after{ content: ""; width: 96px; height: 1px; background: #333333; position: absolute; right:0; bottom: 0; transition: all .3s; }

.box_tit a small{ display: inline-block; padding:20px 32px; position: relative; font-size: 16px; color: #333333; line-height: 1; text-transform: uppercase; transition: all .3s; }

.box_tit a small::before{ content: ""; width: 1px; height: 18px; background: #333333; position: absolute; left:0; top:0; transition: all .3s; }

.box_tit a small::after{ content: ""; width: 1px; height: 18px; background: #333333; position: absolute; right:0; bottom:0; transition: all .3s; }

.box_tit a:hover small{ transition: all .3s; color:var(--pei-color); }

.box_tit a:hover::before{ background: var(--pei-color); width: 100%; transition: all .3s; }

.box_tit a:hover::after{ background: var(--pei-color); width: 100%; transition: all .3s; }

.box_tit a:hover small::before{ background: var(--pei-color); height: 100%; transition: all .3s; }

.box_tit a:hover small::after{ background: var(--pei-color); height: 100%; transition: all .3s; }

@media only screen and (max-width: 1206px){

  .box_tit{ padding:40px 0; }

}

@media only screen and (max-width: 998px){

  .box_tit .tit b{ font-size: 38px; }

  .box_tit .tit p{ font-size: 16px; }

  .box_tit a small{ font-size: 14px; padding:16px 26px; }

}

@media only screen and (max-width: 646px){

  .box_tit{ padding:30px 0; }

  .box_tit .tit b{ font-size:28px; }

  .box_tit .tit p{ font-size:14px; margin-top:12px; }

  .box_tit a small{ font-size: 12px; padding:12px 18px; }

}



/* m_product */

.m_product{ padding-bottom: 80px; overflow: hidden; background: -webkit-linear-gradient(left, var(--pei-color) 70%, #363e49 30%); background: -o-linear-gradient(right, var(--pei-color) 70%, #363e49 30%); background: -moz-linear-gradient(right, var(--pei-color) 70%, #363e49 30%); background: linear-gradient(to right, var(--pei-color) 70%, #363e49 30%); }

.m_product .box_tit b{ color: #fff; }

.m_product .box_tit p{ color: #fff; }

.m_product .box_tit a small{ color: rgba(255, 255, 255, .4); }

.m_product .box_tit a::before{ background: rgba(255, 255, 255, .4); }

.m_product .box_tit a::after{ background: rgba(255, 255, 255, .4); }

.m_product .box_tit a small::before{ background: rgba(255, 255, 255, .4); }

.m_product .box_tit a small::after{ background: rgba(255, 255, 255, .4); }

.m_product .bd{ overflow: hidden; width: 100%; }

#products{ background: #fff; }

#products a{ display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding:30px; }

#products a .img{ width: 58%; }

#products a .img img{ width: 100%; height: 100%; object-fit: cover; }

#products a .info{ width: 42%; box-sizing: border-box; padding:30px; }

#products a .info b{ font-size: 26px; color: #333333; font-weight: bold; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom: 16px; display: flex; align-items: center; text-transform: uppercase; display: block; }

#products a .info b i{ display: inline-block; width:6px; height: 6px; border-radius: 50%; border:2px solid var(--pei-color); margin-right: 15px; }

#products a .info p{ text-transform: uppercase; position: relative; padding-left: 30px; font-size: 14px; color: #666666; line-height: 30px; }

#products a .info p::before{ content: ""; display: inline-block; width: 6px; height: 6px; background: #666666; border-radius: 50%; position: absolute; left:5px; top:13px; }

#products a .info > span{ display: inline-block; padding:5px 30px; border:1px solid #666666; font-size: 30px; line-height: 1; color: #b2b2b2; transition: all .3s;margin-top: 24px; }

#products a .info > span:hover{ transition: all .3s; background: var(--pei-color); border-color: var(--pei-color); color: #fff; padding:5px 40px; }

#products .swiper-button-next:after, #products .swiper-button-prev:after{ display: none; }

#products .swiper-button-next, #products .swiper-button-prev{ width: 40px; height: 90px; background: #b2b2b2; text-align: center; line-height: 90px; transition: all .3s; margin-top: -45px; }

#products .swiper-button-next span, #products .swiper-button-prev span{ font-size: 32px; color: #fff; line-height: 1; }

#products .swiper-button-next:hover, #products .swiper-button-prev:hover{ background: var(--pei-color); transition: all .3s; }

#products .swiper-button-next{ right:0; }

#products .swiper-button-prev{ left:0; }

@media only screen and (max-width: 1206px){

  .m_product{ padding:0 15px 40px; }

  .m_product .bd{ align-items: center; margin-left: 0; }

  #products a .info{ padding:20px; }

}

@media only screen and (max-width: 998px){

  #products a, #products a .info{ padding:15px; }

}

@media only screen and (max-width: 774px){

  .m_product .row{ margin:0; }

  .m_product{ padding:0 0 40px; }

  .m_product .bd > div{ padding:0; }

}

@media only screen and (max-width:640px){

  .m_product{ padding:0 0 30px; background: -webkit-linear-gradient(left, var(--pei-color) 62%, #363e49 38%); background: -o-linear-gradient(right, var(--pei-color) 62%, #363e49 38%); background: -moz-linear-gradient(right, var(--pei-color) 62%, #363e49 38%); background: linear-gradient(to right, var(--pei-color) 62%, #363e49 38%); }

  #products a{ flex-direction: column; }

  #products a .img{ width:100%; }

  #products a .info{ width:100%; }

  #products a, #products a .info{ padding:10px; }

  #products a .info p{ line-height: 2; }

}

@media only screen and (max-width: 576px){

.box_tit .tit{ width: 50%; }

}



/* product_sider */

.product_sider{ width: 100%; overflow: hidden; }

.product_sider a{ padding:18px; min-width: 168px; max-width: 266px; border:1px solid #fff; border-radius: 5px; display: inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all .3s; }

.product_sider a + a{ margin-top: 14px; }

.product_sider a i{ display: inline-block; width: 8px; height:8px; background: #fff; border-radius: 50%; margin-right: 12px; transition: all .3s; }

.product_sider a small{ display: inline-block; font-size: 16px; color: #ffffff; line-height: 1; transition: all .3s; }

.product_sider a span{ display: inline-block; font-size: 30px; height: 16px; overflow: hidden; line-height: 1; width: 0; transition: all .3s; position: relative; top:-4px;  }

.product_sider a:hover{ background: var(--zhu-color); border-color: var(--zhu-color); transition: all .3s; }

.product_sider a:hover small{  width: calc(100% - 80px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.product_sider a:hover span{ transition: all .3s; margin-left: 20px; width: auto; color: #fff;  }

@media only screen and (max-width: 1206px){

  .product_sider a{ padding:16px 18px; max-width: 100%; min-width: 100%;  }

  .product_sider a small{  width: calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

}

@media only screen and (max-width: 998px){

  .product_sider{ margin-bottom: 20px; }

  .product_sider a{ padding:10px; min-width: 150px; }

}

@media only screen and (max-width: 774px){

  

  .product_sider a + a{ margin-top: 0; }

}

@media only screen and (max-width: 646px){

  .product_sider a{ min-width: auto; padding:8px 16px 8px 8px; }

  .product_sider a small{ font-size:14px; }

  .product_sider a span{ display: none; }

  .product_sider a:hover small{  width: 80%; }

}





/* m_case */

.m_case{ overflow: hidden; background: #f9f9f9; }

.m_case .bd{ position: relative; padding:30px 0 0; width: 100%; }

.m_case .bd::after{ content: ""; display: inline-block; width: 773px; height: 762px; background: #fff; box-shadow: 0 0 10px rgba(153, 153, 153, .3); position: absolute; top:0; right:0; z-index: 31; }

.m_case .case_box{ position: relative; z-index: 33; }

.m_case .case_item{ display: block; overflow: hidden; margin-bottom: 50px; }

.m_case .case_item .img{ width: 100%; position: relative; padding-bottom: 61%; overflow: hidden; }

.m_case .case_item .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

.m_case .case_item .info{ overflow: hidden; }

.m_case .case_item .info b{ font-size: 24px; color: var(--pei-color); padding:30px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block; line-height: 1; transition: all .3s; }

.m_case .case_item .info p{ font-size: 14px; color: #666666; line-height: 24px; }

.m_case .case_item .info hr{ margin-top: 24px; width: 400px; height: 2px; background: var(--pei-color); transition: all .3s; }

.m_case .case_item:nth-child(2) .img{ padding-bottom: 89%; }

.m_case .case_item:nth-child(3){ margin-top: -164px; }

.m_case .case_item:hover img{ transition: all .3s; transform: scale(1.05); }

.m_case .case_item:hover hr{ transition: all .3s; width: 100%; background: var(--zhu-color); }

.m_case .case_item:hover .info b{ transition: all .3s; color: var(--zhu-color); }

.m_case .case_tel{ margin-top: 130px; }

.m_case .case_tel b{ display: flex; align-items: center;  }

.m_case .case_tel b span{ display: inline-block; margin-right: 15px; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 18px; color: #fff; transition: all .3s;  background: -moz-linear-gradient(top, var(--pei-color) 0%, var(--zhu-color) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--pei-color)), color-stop(100%,var(--zhu-color))); background: -webkit-linear-gradient(top, var(--pei-color) 0%,var(--zhu-color) 100%); background: -o-linear-gradient(top, var(--pei-color) 0%,var(--zhu-color) 100%); background: -ms-linear-gradient(top, var(--pei-color) 0%,var(--zhu-color) 100%); background: linear-gradient(to bottom, var(--pei-color) 0%,var(--zhu-color) 100%); }

.m_case .case_tel b small{ font-size: 36px; color: var(--zhu-color); font-weight: 200; }

.m_case .case_tel a{ margin-top:30px; display:inline-block; padding:8px 24px; border:1px solid #999999; border-radius: 5px; transition: all .3s; }

.m_case .case_tel a small{ font-size: 16px; color: #333333; font-weight: 200; line-height: 1; position: relative; top:-5px; }

.m_case .case_tel a span{ display: inline-block; font-size: 32px; color: #333333; line-height: 1; margin-left: 10px; height: 16px; }

.m_case .case_tel a:hover{ transition: all .3s; background: var(--pei-color); border-color: var(--pei-color); }

.m_case .case_tel a:hover small, .m_case .case_tel a:hover span{ transition: all .3s; color: #fff; }

@media only screen and (max-width: 1206px){

  .m_case{ padding:0 15px; }

}

@media only screen and (max-width: 998px){

  .m_case .case_item:nth-child(3){ margin-top:-124px; }

  .m_case .case_tel{ margin-top:40px; }

  .m_case .bd{ padding-top: 0; }

  .m_case .bd::after{ display:none; }

  .m_case .case_tel b small{ font-size: 28px; }

}

@media only screen and (max-width: 646px){

  .m_case .case_item{ margin-bottom:30px; }

  .m_case .case_item:nth-child(3){ margin-top:-80px; }

}

@media only screen and (max-width: 576px){

  .m_case .case_item:nth-child(3){ margin-top:0; }

  .m_case .case_item .info b{ font-size: 18px; padding:12px 0; }

  .m_case .case_item .info p{ line-height: 1.5; }

  .m_case .case_item .info hr{ margin-top:12px; }

  .m_case .case_item:nth-child(2) .img{ padding-bottom: 61%; }

  .m_case .case_item{ margin-bottom: 20px; }

  .m_case .case_tel{ margin-top:0; padding:24px 15px; }

  .m_case .case_tel b small{ font-size: 30px; }

  .m_case .case_tel a{ margin-top: 12px; padding:4px 18px; }

}



/* m_application */

.m_application{ overflow: hidden; padding:0 0 60px; }

.m_application .bd{ width: 100%; overflow: hidden; }

#application a{ display: block; width: 100%; position: relative; overflow: hidden; } 

#application a .img{ width: 100%; padding-bottom: 72%; position: relative; overflow: hidden; }

#application a .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

#application a .txt{ position: absolute; top:100%; width: 100%; height: 100%; box-sizing: border-box; padding:42px; background: rgba(105, 182, 50, .6); transition: all .3s; }

#application a .txt b{ font-size: 18px; color: #ffffff; line-height: 1; padding-bottom: 24px; border-bottom: 1px solid #fff; display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom: 14px; }

#application a .txt p{ font-size: 14px; line-height: 24px; color: #ffffff; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }

#application a:hover .txt{ transition: all .3s; top:0; }

@media only screen and (max-width: 1206px){

  .m_application{ padding:0 15px 40px; }

}

@media only screen and (max-width: 998px){

  #application a .txt p{ -webkit-line-clamp:3; }

  #application a .txt{ padding:26px 20px; }

  #application a .txt b{ padding-bottom: 14px; }

  #application a .txt b{ font-size: 14px; }

}

@media only screen and (max-width: 576px){

  #application a .txt p{ -webkit-line-clamp:2; }

  #application a .txt{ padding:20px 15px; }

  #application a .txt b{ padding-bottom: 12px; margin-bottom: 12px; }

  .m_application .hd .tit{ width: 100%; }

  #application a .txt b{ font-size: 12px; }

}



/* m_choice */

.m_choice{ overflow: hidden; background: url(../images/choice_bg.jpg) no-repeat center; padding:46px 0; }

.choice_info{ box-sizing: border-box; padding-left: 85px; overflow: hidden; }

.choice_info b{ display: block; width: 100%; font-size: 48px; color: #ffffff; line-height: 1; font-weight: bold; }

.choice_info p{ font-size: 18px; color: #ffffff; margin:20px 0 30px; line-height: 1; }

.choice_info ul{ overflow: hidden; }

.choice_info li{ text-align: center; display: inline-block; float: left; }

.choice_info li + li{ margin-left: 60px; }

.choice_info li span{ display: inline-block; width: 72px; height: 72px; line-height: 72px; text-align: center; background: #ffffff; border-radius: 50%; font-size: 34px; color: #666666; }

.choice_info li small{ display: block; font-size: 16px; color: #fff; line-height: 1; margin-top:12px; }

.choice_tel > img{ width: 132px; margin-bottom: 20px; }

.choice_tel > div{ display: flex; align-items: center; }

.choice_tel > div span{ font-size: 54px; color: #fff; line-height: 1; margin-right: 12px; }

.choice_tel > div p{ font-size: 14px; color: #ffffff; line-height: 1; margin:5px 0; }

.choice_tel > div b{ font-size: 30px; color: #ffffff; font-weight:bold; line-height: 1; letter-spacing: 1px; }

@media only screen and (max-width: 1206px){

  .m_choice{ padding:40px 15px; }

  .choice_info{ padding-left:0; }

  .choice_tel > div b{ font-size:28px; }

}

@media only screen and (max-width: 998px){

  .choice_info b{ font-size:32px; }

  .choice_info p{ font-size:16px; margin:20px 0; }

  .choice_info li + li{ margin-left:38px; }

  .choice_tel > div b{ font-size:18px; }

  .choice_tel > div span{ font-size:48px; }

}

@media only screen and (max-width: 774px){

  .m_choice{ padding:30px 15px; background-size:cover; }

  .choice_tel{ margin-top:20px; display: flex; }

  .choice_tel > img{ margin-bottom: 0; margin-right: 15px; }

  .choice_info b{ font-size:28px; }



}

@media only screen and (max-width: 576px){

  .m_choice .row > div{ padding:0; }

  .choice_info li + li{ margin-left: 0; }

  .choice_info ul{ display: flex; justify-content: space-between; }

  .choice_tel > div{ width: calc(100% - 132px); }

  .choice_tel > div span{ display: none; }

  .choice_tel > div b{ display: block; }

}



/* m_service */

.m_service{ overflow: hidden; padding:70px 0; background: #fff; }

.m_service .hd{ width: 100%; text-align: center; padding-bottom: 40px; }

.m_service .hd b{ display: block; letter-spacing: 1px; font-size: 48px; color: var(--zhu-color); font-weight: bold; line-height: 1; margin-bottom: 20px; }

.m_service .hd p{ font-size: 18px; color: #666666; line-height: 1; }

.m_service .bd{ width: 100%; overflow: hidden; }

.service_info{ overflow: hidden; position: relative; }

.service_info .img{ width: 100%; padding-bottom: 94%; position: relative; overflow: hidden; }

.service_info .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

.service_info .txt{ width: 100%; box-sizing: border-box; position: absolute; bottom:0; padding:36px; background: var(--zhu-color); }

.service_info .txt b{ font-size: 24px; color: #ffffff; font-weight: bold; line-height: 1; margin-bottom: 12px; display: block; }

.service_info .txt p{ font-size: 14px; color: #ffffff; line-height: 30px; position: relative; }

.service_info .txt p::before{ content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #ffffff; margin-right: 6px; position: relative; top:-2px; }

.service_list{ overflow: hidden; position: relative; }

.service_list li{ display: inline-block; float: left; }

.service_list li img{ width: 100%; }

.service_list li:nth-child(1){ width: calc(100% - 388px); }

.service_list li:nth-child(2){ margin:0 1px; width: calc(100% - 399px); }

.service_list li:nth-child(3){ width: calc(100% - 356px); }

.service_list li:nth-child(4){ width: calc(100% - 286px); }

.service_list li:nth-child(4), .service_list li:nth-child(5){ margin-top: 2px; }

.service_list li:nth-child(5){ margin-left: 2px; width: calc(100% - 286px); }

.service_list li:nth-child(6){ width: 170px; height: 170px; background: var(--pei-color); display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top:151px; left:184px; }

.service_list li:nth-child(6) span{ font-size: 70px; color: #fff; line-height: 1; }

.service_list li:nth-child(6) b{ display: inline-block; font-size: 18px; color: #ffffff; line-height: 1; margin-top: 18px; }

@media only screen and (max-width: 1206px){

  .m_service{ padding:40px 15px; }

  .service_list{ display: block; height: 100%; }

  .service_list li{ position: relative; padding-bottom: 47%; }

  .service_list li img{ width: 100%; height:100%; object-fit: cover; position: absolute; }

  .service_list li:nth-child(1), .service_list li:nth-child(2), .service_list li:nth-child(3){ width: 33.3%; }

  .service_list li:nth-child(2){ margin:0; }

  .service_list li:nth-child(4), .service_list li:nth-child(5){ width: 50%; margin-top:1px; }

  .service_list li:nth-child(5){ margin-left:0; }

  .service_list li:nth-child(6){ padding-bottom: inherit; top:50%; left:50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

}

@media only screen and (max-width: 998px){

  .service_info .txt{ padding:20px; bottom:0; transition: all .3s; }

  .service_info:hover .txt{ transition: all .3s; bottom:0; }

}

@media only screen and (max-width: 774px){

  .m_service{ padding:30px 15px; }

  .m_service .hd{ padding-bottom: 30px; }

  .m_service .bd{ margin-left: 0; }

  .m_service .bd > div{ padding:0; }

  .service_info .img{ padding-bottom:64%; }

  .service_info .txt{ bottom:0; }

  .service_list li{ padding-bottom: 30%; }

  .m_service .hd b{ font-size:36px; }

}

@media only screen and (max-width: 576px){

  .m_service .hd b{ font-size: 28px; margin-bottom: 12px; }

  .m_service .hd p{ font-size:14px; }

  .service_info .txt{ bottom: auto; top:0; height:100%; }

  .service_info .txt b{ font-size:18px; }

  .service_list li:nth-child(6){ width:120px; height:120px; }

  .service_list li:nth-child(6) span{ font-size: 40px; }

}



/* m_plan */

.m_plan{ background: #f4f5f9; padding:45px 0; }

.plan_list{ display: flex; align-items: center; justify-content: space-between; width: 100%; }

.plan_list li{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 170px; height: 236px; background: #ffffff; box-shadow: 0 0 12px rgba(153, 153, 153, .2); border-radius: 10px; transition: all .3s; position: relative; top:0; }

.plan_list li + li{ margin-left: 30px; }

.plan_list li > span{ font-size: 48px; line-height: 1; color: var(--zhu-color); }

.plan_list li b{ display: block; margin:20px 0 24px; font-size: 14px; color: #333333; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight: normal; }

.plan_list li small{ width: 30px; height: 30px; display: inline-block; background: #e9eaf2; border-radius: 50%; text-align: center; line-height: 30px; transition: all .3s; position: relative; }

.plan_list li small i{ font-size: 16px; color: #727273; line-height: 1; transition: all .3s; position: absolute; top:7px; left:8px; overflow: hidden; }

.plan_list li small span{ display: inline-block; width: 0; overflow: hidden; transition: all .3s; font-size: 14px; color: #333333; padding:0; }

.plan_list li:hover{ transition: all .3s; top:-25px; background: var(--pei-color); }

.plan_list li:hover > span, .plan_list li:hover b{ color: #fff; transition: all .3s; }

.plan_list li:hover small{ background: #ffffff; width: auto; transition: all .3s; border-radius: 5px; padding:0 12px; }

.plan_list li:hover small i{ transition: all .3s; left:-10px; width: 0; }

.plan_list li:hover small span{ transition: all .3s; width: auto; }

@media only screen and (max-width: 1206px){

  .m_plan{ padding:40px 15px; }

  .plan_list li + li{ margin-left: 15px; }

 

}

@media only screen and (max-width: 998px){

  .m_plan{ padding:30px 15px; }

  .plan_list{ flex-wrap: wrap; }

  .plan_list li{ width: 33%; margin-bottom: 6px; height: auto; padding:30px 0; }

  .plan_list li + li{ margin-left: 0; }

  

}

@media only screen and (max-width: 576px){

  .plan_list li{ width: 49%; margin-bottom: 6px; padding:20px 0; }

}



/* m_news */

.m_news{ overflow: hidden; padding:10px 0 68px; }

.news_img{ display: block; background: #f4f5f9; overflow: hidden; }

.news_img .img{ width: 100%; padding-bottom: 65%; position: relative; overflow: hidden; }

.news_img .img img{ width: 100%; height: 100%; box-sizing: border-box; padding:20px; object-fit: cover; position: absolute; transition: all .3s; }

.news_img .txt{ padding:20px; box-sizing: border-box; width: 100%; }

.news_img .txt b{ font-size: 18px; color: #3a3a3a; display: block; line-height: 1; margin:10px 0 24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all .3s; }

.news_img .txt p{ font-size: 14px; color: #666666; line-height: 22px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.news_img .txt span{ margin:15px 0; display: inline-block; font-size: 14px; color: #666666; }

.news_img:hover img{ transition: all .3s; transform: scale(1.05); }

.news_img:hover .txt{ background: var(--pei-color); transition: all .3s; }

.news_img:hover b, .news_img:hover p, .news_img:hover span{ color:#fff; transition: all .3s; }

.news_item{ display: block; overflow: hidden; background: #f4f5f9; }

.news_item + .news_item{ margin-top:30px; }

.news_item .txt{ padding:20px; box-sizing: border-box; width: 100%; }

.news_item .txt b{ font-size: 18px; color: #3a3a3a; display: block; line-height: 1.2; margin:10px 0 24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all .3s; }

.news_item .txt p{ font-size: 14px; color: #666666; line-height: 29.5px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.news_item .txt span{ margin:15px 0; display: inline-block; font-size: 14px; color: #666666; }

.news_item:hover img{ transition: all .3s; transform: scale(1.05); }

.news_item:hover .txt{ background: var(--pei-color); transition: all .3s; }

.news_item:hover b, .news_item:hover p, .news_item:hover span{ color:#fff; transition: all .3s; }

@media only screen and (max-width: 1206px){

  .m_news{ padding:0 15px 40px; }

  .news_img .img{ height:247px; }

}

@media only screen and (max-width: 998px){

  .news_img .img{ height:192px; }

  .news_item .txt b{ margin:10px 0 16px; }

  .news_item .txt span{ margin:12px 0 0; }

}

@media only screen and (max-width: 774px){

  .m_news{ padding:0 15px; }

  .news_img .img{ height:auto; }

  .news_item{ margin-bottom:20px; }

}

@media only screen and (max-width: 646px){

  .news_img .img{ padding-bottom:59%; }

  .news_img{ margin-bottom: 20px; }

  .news_img .txt b{ white-space:inherit; line-height: 1.2; }

  

}

/* footer */

.footer{ overflow: hidden; background: #293038; padding:22px 0 0; }

.f_nav{ overflow: hidden; padding:38px 0; border-bottom: 1px solid #545960; display: flex; align-items: center; justify-content: center; }

.f_nav li, .f_nav li a{ display: inline-block; }

.f_nav li a{ transition: all .3s; font-size: 16px; color: #ffffff; margin:0 32px; }

.f_nav li a:hover{ transition: all .3s; color: var(--zhu-color); }

.f_info{ overflow: hidden; text-align: center; }

.f_info > b{ display: block; padding:28px 0; line-height: 1; font-size: 30px; color: #ffffff; font-weight: bold; }

.f_info p{ font-size: 14px; color: #6b768a; line-height: 24px; }

.f_copy{ overflow: hidden; padding:24px 0; margin-top: 8px; text-align: center; }

.f_copy p{ font-size: 14px; color: #999999; line-height: 1; }

.f_copy p a{ font-size: 14px; color: #999999; }

.f_info p a:hover, .f_copy p a:hover{ transition: all .3s; color: var(--zhu-color); }

@media only screen and (max-width: 1206px){

  .f_nav li a{ margin:0 26px; }

}

@media only screen and (max-width: 998px){

  .f_nav{ display: none; }

}

@media only screen and (max-width: 774px){

  .f_copy{ padding:0 15px 80px; }

}

@media only screen and (max-width: 646px){

  .f_info{ padding:0 15px; }

  .f_info > b{ font-size: 24px; }



}



/* l-title */

.l-title{ padding:42px 0;text-align: center; width:100%; position: relative; }

.l-title span{ font-family: "思源黑体 CN"; font-size: 90px; color: #f4f4f4; line-height: 1; display: block; width: 100%; text-transform: uppercase; font-weight: bold; }

.l-title b{ font-family: "Microsoft Yahei"; color: var(--zhu-color); font-size: 36px; display: block; width: 100%; text-align: center; line-height: 1; position: absolute; top:68px; font-weight: normal; }

.l-title p{ font-size: 22px; color: #000000; line-height: 1; text-align: center; margin-top: 14px; }

@media(max-width: 1206px){

  .l-title span{ font-size: 72px; }

  .l-title b{ top:60px; }

}

@media(max-width: 774px){

  .l-title{ padding:20px 0; }

  .l-title span{ font-size: 46px; }

  .l-title b{ font-size: 26px; top:30px; }

  .l-title p{ font-size:18px; }

}

@media(max-width: 646px){

  .l-title span{ font-size: 36px; }

  .l-title b{ font-size:24px; top:26px; }

  .l-title p{ font-size:14px; padding:0 15px; line-height:1.5; }

}



.product_type{ overflow: hidden; margin: 20px 0; width: 100%; }

.product_type .swiper-slide{ height: auto; }

.product_type a{ transition: all .3s; width: 100%; display: block; padding:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 16px; color: #333333; background: #eae8e8; transition: all .3s; line-height: 1; }

.product_type a span{ display: inline-block; margin-left: 8px; transition: all .3s; }

.product_type a:hover{ transition: all .3s; background: var(--zhu-color); color: #fff; }

.product_type a:hover span{ transition: all .3s; transform: rotate(-360deg); color: #fff; }

#product_type{ width: 100%; }

@media(max-width: 1206px){

  .product_type{ padding: 0 15px; }

  .product_list{ padding:0 15px; }

  .product_info_type .container-fluid{ padding: 0; }

}

@media(max-width: 646px){

  .product_type{ margin:15px 0!important; }

  .product_type a{ font-size: 14px; padding:15px; }

}



/* product_list */

.product_list{ overflow: hidden; width: 100%; }

.product_list .product_box{ background: #fff; box-sizing: border-box; padding:15px; }

.product_list .product_box + .product_box{ margin-top: 30px; }

.product_box a{ display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;  }

.product_box a .img{ width: 50%; position: relative; padding-bottom: 37%; overflow: hidden; border:2px solid #f8f8f8; }

.product_box a .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

.product_box a .info{ width: 50%; box-sizing: border-box; padding:30px; }

.product_box a .info b{ font-size: 26px; color: #333333; font-weight: bold; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom: 16px; display: flex; align-items: center; text-transform: uppercase; display: block; }

.product_box a .info b i{ display: inline-block; width:6px; height: 6px; border-radius: 50%; border:2px solid var(--pei-color); margin-right: 15px;position: relative; top: -5px; }

.product_box a .info p{ text-transform: uppercase; position: relative; padding-left: 30px; font-size: 14px; color: #666666; line-height: 30px; }

.product_box a .info p::before{ content: ""; display: inline-block; width: 6px; height: 6px; background: #666666; border-radius: 50%; position: absolute; left:5px; top:13px; }

.product_box a .info > span{ display: inline-block; padding:5px 30px; border:1px solid #666666; font-size: 30px; line-height: 1; color: #b2b2b2; transition: all .3s;margin-top: 24px; }

.product_box a .info > span:hover{ transition: all .3s; background: var(--pei-color); border-color: var(--pei-color); color: #fff; padding:5px 40px; }

.product_box a:hover .img{ border-radius: 5px; border-color: var(--pei-color); transition: all .3s; }

.product_box a:hover img{ transition: all .3s; transform: scale(1.05); }

@media(max-width: 998px){

  .product_box a .info{ padding:0 20px; }

  .product_box a .info p{ line-height: 1.5; }

}

@media(max-width: 774px){

  .product_box a{ flex-direction: column; }

  .product_box a .img, .product_box a .info{ width: 100%; }

  .product_box a .info{ padding:20px; }

  .product_box a .img{ padding-bottom: 68%; }

}

@media(max-width: 646px){

  .product_box a .info{ padding:15px; }

  .product_box a .info b{ font-size: 20px; }

  .product_box a .info p{ padding-left: 24px; }

  .product_box a .info p::before{ top:6px; width: 4px; height: 4px; }

  .product_box a .info > span{ margin-top: 12px; padding: 0 30px; }

}





/* company_info */

#company_info{ overflow: hidden; padding:0; }

#company_info .l-title, #company_info .l-title b, #company_info .l-title p{ text-align: left; }

#company_info .bd p{ font-size: 16px; color: #000000; line-height: 1.75; overflow: hidden; }

@media(max-width: 1206px){

  #company_info .bd{ padding:0 15px; }

  #company_info .l-title{ padding:32px 15px; }

  #company_info .l-title span{ font-size: 72px; }

  #company_info .l-title b{ top:48px;  }

}

@media(max-width: 774px){

  #company_info .l-title{ padding:20px 15px; }

  #company_info .l-title span{ font-size: 46px; }

  #company_info .l-title b{ font-size: 26px; top:30px; }

  #company_info .l-title p{ font-size:18px; }

}

@media(max-width: 646px){

  #company_info .l-title{ padding: 15px 0; }

  #company_info .l-title, #company_info .l-title b, #company_info .l-title p{ text-align: center; }

  #company_info .l-title span{ font-size: 36px; }

  #company_info .l-title b{ font-size:24px; top:26px; display: block; }

  #company_info .l-title p{ font-size:14px; padding:0 15px; line-height:1.5; }

  #company_info .bd p{ font-size:14px; line-height: 1.5; }

}



/* company_show */

#company_show{ overflow: hidden; padding:0 0 46px; }

#env_show{ overflow: hidden; border-radius: 10px; }

#env_show a{ display: block; width: 100%; padding-bottom: 60%; position: relative; overflow: hidden; }

#env_show a img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; position: absolute; }

.env_small{ overflow: hidden; } 

.env_small li{ width: 100%; padding-bottom: 40%; position: relative; overflow: hidden; border-radius: 10px; }

.env_small li img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; position: absolute; }

.env_small li + li{ margin-top: 10px; }

@media(max-width: 774px){

  #env_show{ display: none; }

  .env_small{ display: flex; align-items: center; justify-content: space-between; }

  .env_small li{ width: 32%; }

  .env_small li + li{ margin-top:0; }

}

@media(max-width: 576px){

  .env_small{ flex-direction: column; }

  .env_small li{ width: 100%; }

  .env_small li + li{ margin-top:10px; }

}



/* company_cult */

#company_cult{ background: #f5f5f5; padding:0 0 60px; }

#company_cult .l-title span{ color: #fff; }

#company_cult .bd{ width: 100%; }

#cult .cult_box{ width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; padding:72px 0; background: #fff; border-radius: 10px; position: relative; overflow: hidden; }

#cult .cult_box > i{ font-size: 58px; line-height: 1; color: var(--zhu-color); }

#cult .cult_box > b{ font-size: 22px; font-weight: bold; color: #333333; line-height: 1; margin-top:46px; }

#cult .cult_box > .info{ transition: all .3s; position: absolute; top:100%; display: flex; width: 100%; height: 100%; box-sizing: border-box; padding:40px 35px; flex-direction: column; align-items: center; justify-content: center; background: var(--pei-color); }

#cult .cult_box > .info b{ font-size: 22px; color: #ffffff; font-weight: bold; line-height: 1; display: block; text-align: center; margin-bottom: 16px; }

#cult .cult_box > .info p{ font-size: 14px; color: #ffffff; line-height: 2; overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; }

#cult .cult_box:hover .info{ transition: all .3s; top:0; }

@media(max-width: 998px){

  #cult .cult_box{ padding:40px 0; }

}

@media(max-width: 774px){

  #company_cult{ padding:0 0 20px; }

}

@media(max-width: 646px){

  #cult .cult_box > i{ font-size: 32px; }

  #cult .cult_box > b{ font-size:17px; margin-top: 12px; }

}



/* company_honor */

#company_honor{ overflow: hidden; background: url(../images/company_honor_bg.jpg) no-repeat top center; padding-bottom: 60px; }

#company_honor .l-title span{ color: rgba(255,255,255,.2); }

#company_honor .l-title b{ color: #333333; }

#company_honor .l-title p{ color: #666666; }

#company_honor .bd{ width: 100%; overflow: hidden; }

#company_honor .bd a{ display: block; border:1px solid #eae7e7; }

#company_honor .bd a .img{ width: 100%; padding-bottom: 72%; position: relative; overflow: hidden; }

#company_honor .bd a .img img{ width: 100%; height: 100%; object-fit: contain; position: absolute; transition: all .3s; }

#company_honor .bd a b{ transition: all .3s; border-top:1px solid #eae7e7; display: block; box-sizing: border-box; padding:15px; overflow: hidden; font-size: 17px; color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: normal; }

#company_honor .bd a:hover img{ transition: all .3s; transform: scale(1.05); }

#company_honor .bd a:hover b{ transition: all .3s; font-weight: bold; color: var(--zhu-color); }

@media(max-width: 1206px){

  #company_honor{ padding:0 15px 30px; }

}

@media(max-width: 646px){

  #company_honor .bd a b{ padding:10px; font-size: 14px; }

}



/*l-banner*/

.l-banner{ box-sizing: border-box; height: 599px; text-align: center; position: relative; padding:280px 0 0; background: url(../images/l-banner.jpg) no-repeat top center;  }

.l-banner span{ width: 100%; display: block; font-size: 14px; color: var(--zhu-color); text-transform: uppercase; line-height: 1; }

.l-banner b{ width: 100%; font-weight: bold; display: block; font-size: 50px; color: var(--zhu-color); line-height: 1; margin:14px 0 24px; }

.l-banner p{ width: 100%; display: block; text-align: center; font-size: 20px; color:#333333; line-height: 1; }

.l-banner i{ width: 100%; display: block; clear: both; font-size: 48px; line-height: 1; color: #fff; margin:32px auto 10px; font-weight: 200; }

.l-banner i + i{ font-size: 26px; font-weight: 200; margin:0; color: #fff; line-height: 1; animation:title_font_img_down 1.5s linear 0s infinite running; -webkit-animation:title_font_img_down 1.5s linear 0s infinite running; }

.product_banner{ background: url(../images/product_banner.jpg) no-repeat top center; }

.news_banner{ background: url(../images/news_banner.jpg) no-repeat top center; }

.honor_banner{ background: url(../images/honor_banner.jpg) no-repeat top center; }

.case_banner{ background: url(../images/case_banner.jpg) no-repeat top center; }

.contact_banner{ background: url(../images/contact_banner.jpg) no-repeat top center; }

@keyframes title_font_img_down{ 0%{ bottom:10px; opacity: 0.5;} 30%{ bottom:5px; opacity: 1;} 100%{ bottom:0px;  opacity: 0;} }

@-webkit-keyframes title_font_img_down{ 0%{ bottom:10px; opacity: 0.5;} 30%{ bottom:5px; opacity: 1;} 100%{ bottom:0px;  opacity: 0;} }

@media(max-width:1206px){

  .l-banner{ padding:180px 0 60px; height: auto; background-size: cover; }

}

@media(max-width: 774px){

  .l-banner{ padding:180px 0 60px; }

  .l-banner b{ font-size: 30px; margin-top: 12px; }

  .l-banner p{ font-size: 18px; }

  .l-banner i{ font-size: 36px; }

}

@media(max-width: 582px){

  .l-banner{ padding:100px 0 40px; }

  .l-banner b{ font-size: 24px; margin:14px 0; }

  .l-banner p{ font-size: 14px; padding:0 15px; line-height: 1.5; }

  .l-banner i{ display: none; }

}



/*position*/

.position{ width:100%; background: #fff; border-bottom: solid 1px #e0dfdf;  }

.position-left{display: flex;flex-direction: row;align-items: center; padding:12px 0; justify-content: flex-start; }

.position-left i{color: #808080;font-size:25px;margin:0 10px;}

.position-left p, .position-left p small{color:#808080; font-size: 14px; }

.position-left p a{color:#808080;}

.position-left p a:hover{color: var(--pei-color);}

.position-right{display: flex;flex-direction: row;justify-content:flex-end;}

.position-right a{color: #333333;padding:20px 20px;display:block;transition: all .5s}

.position-right a:hover{background: var(--pei-color);color: #fff;}

@media(max-width: 1206px){

  .position-left{ padding:12px 15px; }

}

@media(max-width: 998px){

  .position-left p small{ display: none; }

}

@media(max-width: 774px){

  .position-left{ padding:0; }

  .position-right{flex-wrap: wrap;justify-content: flex-start;}

  .position-right a{padding:12px;}

  .position-left, .position-right{ flex:100%; max-width: 100%; justify-content: center; }

}



/* industry_news */

.industry_news{ overflow: hidden; width: 100%; margin:32px 0; }

.industry_news a{ display: block; background: #f4f5f9; box-sizing: border-box; }

.industry_news a > .img{ width: 100%; padding-bottom: 74%; position: relative; overflow: hidden; }

.industry_news a > .img img{ width: 100%; height: 100%; box-sizing: border-box; padding:20px; object-fit: cover; transition: all .3s; position: absolute; }

.industry_news a > .txt{ box-sizing: border-box; padding:20px; transition: all .3s; margin-top: 0; position: relative; z-index: 33; }

.industry_news a b{ display: block; margin:6px 0 25px; font-size: 18px; color: #3a3a3a; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.industry_news a p{ font-size: 14px; color: #ffffff; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 0; transition: all .3s; }

.industry_news a span{ display: block; font-size: 14px; color: #666666; padding:14px 0; line-height: 1; }

.industry_news a:hover .txt{ background: var(--pei-color); transition: all .3s; margin-top: -42px; }

.industry_news a:hover b{ color: #fff; transition: all .3s; }

.industry_news a:hover p{ height: 42px; transition: all .3s; }

.industry_news a:hover span{ color: #fff; transition: all .3s; }

@media(max-width: 1206px){

  .industry_news{ padding:0 15px; }

  .industry_news .swiper-slide{ height: auto; }

}

@media(max-width: 998px){

  .industry_news{ margin:20px 0; }

}

@media(max-width: 646px){

  .industry_news{ margin:18px 0; }

  .industry_news a > .img img, .industry_news a > .txt{ padding:10px; }

  .industry_news a b{ margin:6px 0; font-size: 14px; }

  .industry_news a span{ padding:6px 0; }

}



/* problem_news */

.problem_news{ overflow: hidden; }

.problem_news .problem_li{ display: flex; align-items: center; justify-content: space-between; padding:20px; background: #f4f5f9; margin-bottom: 20px; width:100%; }

.problem_news .problem_li .img{ width:256px; padding-bottom: 13%; overflow: hidden; position: relative; }

.problem_news .problem_li .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

.problem_news .problem_li .txt{ overflow: hidden; width: calc(100% - 280px); }

.problem_news .problem_li .txt b{ font-size: 18px; color: #3a3a3a; padding:16px 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.problem_news .problem_li .txt p{ margin:12px 0 20px; text-indent: -2em; font-size: 14px; color: #666666; line-height: 1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.problem_news .problem_li .txt span{ font-size: 14px; color: #666666; }

.problem_news .problem_li .txt small{ display: inline-block; float: right; font-size: 14px; color: var(--zhu-color); }

.problem_news .problem_li:hover{ transition: all .3s; background: var(--pei-color); }

.problem_news .problem_li:hover img{ transition: all .3s; transform: scale(1.05); }

.problem_news .problem_li:hover b, .problem_news .problem_li:hover p, .problem_news .problem_li:hover small, .problem_news .problem_li:hover span{ transition: all .3s; color: #fff; }

@media(max-width: 1206px){

  .problem_news{ padding:0 15px; }

  .problem_news .problem_li .img{ padding-bottom: 17%; }

  .problem_news .problem_li .txt b{ padding:0; }

}

@media(max-width: 998px){

  .problem_news{ padding:15px; }

  .problem_news .problem_li{ padding:15px; }

  .problem_news .problem_li .img{ padding-bottom: 20%; }

}

@media(max-width: 646px){

  .problem_news .problem_li{ flex-direction: column; }

  .problem_news .problem_li .img{ width: 100%; padding-bottom: 40%; }

  .problem_news .problem_li .txt{ width: 100%; }

  .problem_news .problem_li .txt b{ font-size: 17px; margin-top: 12px; }

}



/*case_list*/

.case_list{ display: block; width: 100%; margin-bottom:30px;transition:.36s all ease; }

.case_list .img{ padding-bottom: 75%; width: 100%; overflow: hidden; position: relative; }

.case_list .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .3s; position: absolute; }

.case_list .txt{ background:#f1f1f1;padding:20px 20px; }

.case_list .txt strong{ color:#333;font-size:17px;font-weight:bold;white-space: nowrap;overflow:hidden;text-overflow: ellipsis; display: block; }

.case_list .txt p { font-size: 14px; line-height: 26px; height: 52px; color:#999; margin-top:15px; overflow:hidden; }

.case_list .txt span { font-size: 30px; color: #999; line-height: 1; margin-top:25px;transition:.36s all ease;}

.case_list:hover {box-shadow: 0 0 15px 5px #999;transition: all .3s;}

.case_list:hover img {height:110%;transition: all .3s;}

.case_list:hover strong {color:#db2016;}

.case_list:hover span {padding-left:25px;transition:.36s all .3s;}

@media only screen and (max-width: 646px){

  .case_list .txt{ padding:10px; }

  .case_list .txt b{ font-size: 14px; }

  .case_list .txt p{ font-size: 12px; margin:6px 0; }

}



/*honor_list*/

.honor_list{padding:15px 0; width: 100%; background: #fff; }

.honor_list a{ display: block; overflow: hidden; margin-bottom: 30px;}

.honor_list .box{display: flex;flex-direction: column;overflow: hidden;transition: all .5s;border:solid 1px #f8f8f8;}

.honor_list .box .img{width:100%;padding-bottom:75%;position: relative;overflow: hidden;}

.honor_list .box .img img{width:100%;height: 100%;object-fit: cover;position: absolute; transition: all .3s; box-sizing: border-box; padding:12px; }

.honor_list .box .img:after{width:0;height: 0;content:'';position: absolute;top:0;left:0;background: rgba(0,0,0,.8);transition: all .5s;border-radius: 50%;}

.honor_list .box .img i{color:#fff;font-size: 50px;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index: 1;opacity: 0;transition: all .5s}

.honor_list .box .txt{padding:12px 15px; text-align: center; transition: all .5s; border-bottom: 1px solid #f8f8f8;}

.honor_list .box b{ display: block; color: #333;font-size: 16px;font-weight: normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all .5s}

.honor_list .box span{width:40px;height: 5px;display: block;transition: all 1s}

.honor_list .box:hover{box-shadow: 0 0 10px #999;}

.honor_list .box:hover .txt{background: var(--pei-color)}

.honor_list .box:hover .txt b{ color:#fff; transition: all .3s; }

.honor_list .box:hover .img{background: var(--pei-color)}

.honor_list .box:hover .img i{opacity: 1;}

.honor_list .box:hover .img img{ transition: all .3s; transform: scale(1.05); }

.honor_list .box:hover span{margin-left:calc(100% - 40px);}

@media(max-width: 1206px){

  .honor_list{ margin-left: 15px; margin-right: 15px; }

}

@media(max-width: 646px){

  .honor_list .box .txt{ padding:12px; text-align: center; }

  .honor_list .box b{ font-size: 14px; font-weight: normal; }

  .honor_list .row>div:nth-child(2n){padding-left: 7.5px;}

  .honor_list .row>div:nth-child(2n-1){padding-right: 7.5px;}

  .honor_list .box .img img{ padding:0; }

}

@media(max-width: 447px){

  .honor_list{ margin-left: 0; margin-right: 0; padding:0; background: #f8f8f8; }

  .honor_list .box .txt{ background: #fff; }

}



/*job*/

.jobs-list{margin-bottom: 30px;}

.jobs-list li{width:100%;margin-top: 30px;}

.jobs-list a{display:block;width:100%;background:#fff;box-shadow:0px 1px 7.09px 0.91px rgba(125,125,125,0.5);border-radius:5px;padding:1% 0 3% 0}

.jobs-list a .son{width:95%;overflow:hidden;margin:0 auto;}

.jobs-list a .t1{padding:2% 0;border-bottom:1px solid #eee}

.jobs-list a .t1 .t1l{float:left;font-size:20px;font-weight:bold;color:#333;}

.jobs-list a .t1 .t1r{float:right;color:#666;text-decoration:underline;font-size:14px;padding-left:38px;line-height:25px;}

.jobs-list a .t1 .t1r i{font-size: 24px;color: var(--zhu-color);margin-right: 15px;}

.jobs-list a .son .con{margin-top:2.5%;height:250px;overflow-y:scroll;line-height: 2.6}

.jobs-list a .son .con p{color:#666;padding:3px 0;font-size:14px;line-height:1.6;text-indent:0!important;}

.jobs-list a .son .con::-webkit-scrollbar{width:3px;height:3px;}

.jobs-list a .son .con::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;background:#f8f8f8;border-radius:3px;}

.jobs-list a .son .con::-webkit-scrollbar-thumb{border-radius:3px;background:#bbb;}

.jobs-list a .t1 .t1r:hover{color:#333;}

	

/*应聘表单*/

.fu-job{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.6);left:0;top:0;display:none;z-index:10000;}

.fu-job .job-son{width:100%;height:100%;display:flex;align-items:center;}

#jobform{background:#fff;padding:40px 30px 30px 30px;width:500px;margin:0 auto;position: relative;}

#jobform .jobclose{position:absolute;right:0px;top:0;background:var(--zhu-color);color:#fff;display:inline-block;padding:2px 10px;font-size:14px;cursor:pointer;}

#jobform .faqline{padding:6px 0;border-bottom:0px solid #eee;}

#jobform .faqline .faqtit{width:20%;height:40px;line-height:40px;float:left;background:#fff;text-align:left;font-size:15px;border-radius:2px;}

#jobform .faqline .input{text-indent:8px;width:80%;outline:none;height:40px;box-sizing:border-box;border:1px solid #ddd;float:left}

#jobform textarea{width:80%;outline:none;height:100px;box-sizing:border-box;border:1px solid #ddd;float:left;;border-radius:2px;padding:10px 8px}

#jobform .input:focus{border-color:#1d7df5;}

#jobform textarea:focus{border-color:#1d7df5;}

#jobform .faqline .input1{width:120px;float:left;}

#jobform .code img{display:block;float:left;height:40px;margin-left:0px;}

#jobform .code .tip{display:block;float:left;color:red;font-size:14px;}

#jobform button{width:100px;height:38px;background:var(--pei-color);color:#fff;display:block;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;cursor:pointer;}

#jobform button:hover{background:var(--zhu-color);}

@media(max-width: 500px){

  #jobform button{ margin-top: 60px; width: 100%; }

}





/* contact_msg */

#contact_msg{ overflow: hidden; }

#contact_msg .info{ background: #f5f5f5; overflow: hidden; padding:46px 100px; }

#contact_msg .hd{ width: 100%; margin-bottom: 50px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }

#contact_msg .hd b{ font-size: 26px; color: #333333; font-weight: normal; line-height: 1; }

#contact_msg .hd .line{ margin:14px 0; }

#contact_msg .hd .line i{ display: inline-block; width:83px; height: 2px; background: var(--pei-color); }

#contact_msg .hd .line i + i{ background: var(--zhu-color); }

#contact_msg .hd > p{ line-height:1; font-size: 16px; color: #a1a1a1; }

#contact_msg .bd{ overflow: hidden; }

#contact_msg .bd .form_item{ margin-bottom: 26px; background: #fff; height: 46px; border:1px solid #f0f0f0; border-radius: 5px; }

#contact_msg .bd .form_item label{ line-height: 46px; font-size: 16px; color: #a1a1a1; width: 30%; text-align: center; float: left; }

#contact_msg .bd .form_item input{ width: 70%; float: left; height: 100% }

#contact_msg .bd .form_box{ overflow: hidden; margin-bottom: 30px; background: #fff; height: 100px; border:1px solid #f0f0f0; border-radius: 5px; }

#contact_msg .bd .form_box label{ display: block; text-align: left; box-sizing: border-box; padding-left: 17px; line-height: 46px; font-size: 16px; color: #666;  }

#contact_msg .bd .form_box textarea{ width: 100%; height: 100%; padding:5px 17px; font-size: 14px; color: #333; }

#contact_msg .bd .form_btn{ float: left; width: 240px; display: flex; align-items: center; background: #fff; height: 46px; border:1px solid #eee; }

#contact_msg .bd .form_btn label{ width: auto; padding:0 17px; border-radius: 5px; }

#contact_msg .bd .form_btn img{ width: 92px; height: 30px; object-fit: cover; float: left;  }

#contact_msg .bd .form_btn input{ width: calc(100% - 200px); float: left; box-sizing: border-box; padding-left: 5px; }

#contact_msg .bd .submit{ float: left; margin-left: 12px; display: inline-block; padding:15px 54px; line-height: 1; font-size: 16px; color: #fff; background: var(--zhu-color); text-align: center; border-radius: 5px; }

#contact_msg .bd .submit:hover{ background: var(--pei-color); transition: all .3s; }

@media(max-width: 1206px){

  #contact_msg .info{ padding:30px 15px; }

}

@media only screen and (max-width: 998px){

  #contact_msg .hd > p{ line-height: 1.5; text-align: center; }

}

@media only screen and (max-width: 774px){

  #contact_msg .bd .form_item label{ width: 20%; }

  #contact_msg .bd .form_item input{ width: 80%; }

}

@media only screen and (max-width: 640px){

  #contact_msg .bd .form_item label{ width: 30%; font-size: 13px; }

  #contact_msg .bd .form_box label, #contact_msg .bd .form_btn label{ font-size: 13px; }

  #contact_msg .bd .form_item input{ width: 70%; }

  #contact_msg{ padding:20px 15px; }

  #contact_msg .bd .form_item:last-child input{ width: 40%; }

  #contact_msg .bd .form_btn{ width: 100%; }

  #contact_msg .bd .submit{ margin:20px 0 0; }

}



/* contact_info */

#contact_info{ margin:48px 0; overflow: hidden; }

#contact_info .box{ overflow: hidden; background: #f5f5f5; }

#contact_info .big_box{ margin-bottom: 30px; display: flex; align-items: center; justify-content: center; }

#contact_info .big_box .icon{ width:30%; padding:60px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f0f0f0; }

#contact_info .big_box .icon i{ font-size: 32px; line-height: 1; color: #8c8c8c;transition: all .3s; }

#contact_info .big_box .icon b{ font-weight: normal; display: inline-block; font-size: 16px; color:#8c8c8c; line-height: 1; margin-top:24px;transition: all .3s; }

#contact_info .big_box .txt{ width: 70%; box-sizing: border-box; padding:0 15px; display: flex; align-items: center; }

#contact_info .big_box .txt p{ font-size:14px; color:#8c8c8c; line-height: 1.5; }

#contact_info .big_box:hover b, #contact_info .big_box:hover i{ transition: all .3s; color: var(--pei-color); }

#contact_info .small_box{ display: flex; align-items: center; justify-content: center; flex-direction: column; padding:58px 0; }

#contact_info .small_box i{ font-size: 72px; color: #8c8c8c; line-height: 1; transition: all .3s; }

#contact_info .small_box img{ width: 72px; }

#contact_info .small_box p, #contact_info .small_box p a{ font-size: 16px; color:#8c8c8c; line-height: 1; margin-top:30px; transition: all .3s; }

#contact_info .small_box:hover i, #contact_info .small_box:hover p, #contact_info .small_box:hover p a, #contact_info .small_box a:hover{ transition: all .3s; color:var(--pei-color); }

#dituContent{ width: 100%; border:12px solid #f5f5f5; border-radius: 10px; margin:30px auto; height: 500px; }

@media(max-width: 1206px){

  #contact_info .big_box .icon{ padding:30px 0; }

  #contact_info .small_box{ padding:30px 0; }

}

@media(max-width: 998px){

  #contact_info{ margin:35px 0; }

  #contact_info .small_box{ margin-bottom: 30px; }



}

@media(max-width: 774px){

  #contact_info{ margin:25px 0; }

  #contact_info .big_box .icon{ width: 20%; }

  #contact_info .big_box .txt{ width:80%; }

  #dituContent{ height: 400px; }

  #contact_info .big_box, #contact_info .small_box{ margin-bottom: 15px;  }

  

}

@media(max-width: 646px){

  #contact_info .big_box .icon{ width: 30%; }

  #contact_info .big_box .txt{ width:70%; }

  #contact_info{ margin:20px 0; }

  #dituContent{ height: 320px; margin:0 15px 15px; }

}



/* product_info */

.product_focus{padding:45px 0;background: #f8f8f8;}

.product_focus #product_focus{ width:100%;overflow: hidden; }

.product_focus .swiper-slide .img{width:100%;padding-bottom: 75%;position: relative;overflow: hidden; border-radius: 5px; }

.product_focus .swiper-slide .img img{width:100%;height: 100%;object-fit: cover;position: absolute;}

.product_focus .swiper-button-next, .product_focus .swiper-button-prev{color: rgba(255,255,255,.4);}

.product_focus .swiper-button-next{right:15px;}

.product_focus .swiper-button-prev{left:15px;}

.product_focus .info b{ display: block; font-size: 26px;color: #333; text-transform: uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.product_focus .info .txt{ padding:15px; background: #fff; margin:12px 0; }

.product_focus .info .txt p{ font-size: 14px; line-height: 2.2; color: #666666; }

.product_focus .info .txt p i{ display: inline-block; width: 6px; height: 6px; background: #666666; border-radius: 50%; margin:0 16px 0 5px;; }

.product_focus .info .btn{width:100%; padding:0; display: flex; align-items: center; justify-content: space-between; }

.product_focus .info .btn a{color: #fff;padding:10px 24px;background: var(--zhu-color);border-radius: 5px;display: block;float: right;transition: all .5s}

.product_focus .info .btn a i{ margin-right: 12px; }

.product_focus .info .btn .con{display: flex;flex-direction: row;float: left;  align-items: center;}

.product_focus .info .btn .con i{color: var(--pei-color);font-size: 48px;margin-right: 10px;line-height: 1}

.product_focus .info .btn .con .rt{text-align: left;}

.product_focus .info .btn .con .rt .t2{font-size: 14px;color: #666666;}

.product_focus .info .btn .con .rt .t3{font-size: 28px;color: var(--pei-color);font-weight: bold;line-height: 1}

.product_focus .info .btn a:hover{background: var(--pei-color)}

#goods_imgs{ width: 100%; overflow: hidden; margin-top: 16px; }

#goods_imgs .swiper-slide{ border:1px solid #ececec; width: 100%; padding-bottom: 20%; overflow: hidden; position: relative; background: #fff; }

#goods_imgs .swiper-slide img{ position: absolute; width: 100%; height: 100%; object-fit: contain; transition: all .3s; }

#goods_imgs .swiper-slide-active{ border-color: var(--pei-color); }

.product_nav{padding:20px 0;}

.product_nav .inner{ padding:0 15px; }

.product_nav a{ position: relative; font-size: 16px;color: #282828; padding:21px 36px; line-height: 1; transition: all .3s; }

.product_nav a::after{ content: ""; display: inline-block; width: 0; height: 2px; background: var(--pei-color); position: absolute; left:0; top:0; transition: all .3s; }

.product_nav a+a::before{ content: ""; display: inline-block; width: 1px; height:25px; background: #cececf; position: absolute; left:-2px; top:20px; }

.product_nav a:hover{ background: #f8f8f8; }

.product_nav a:hover::after{ transition: all .3s; width: 100%; }

.product_info{ overflow: hidden; background: #f8f8f8; }

.product_info .tit{ display: block; text-align: center; font-size: 30px; color:#444444;line-height: 1; margin:24px 0; }

.product_info .tit span{ position: relative; padding:0 130px; }

.product_info .tit span::before{ content: ""; display: inline-block; width: 130px; height: 4px; background: var(--zhu-color); position: absolute; left:0; top:50%; margin-top: 1px; }

.product_info .tit span::after{ content: ""; display: inline-block; width: 130px; height: 4px; background: var(--zhu-color); position: absolute; right:0; top:50%; margin-top: 1px; }

.product_info .tit small{ position: relative; padding:0 20px; }

.product_info .tit small::before{ content: ""; display: inline-block; width: 4px; height: 4px; background: var(--pei-color); position: absolute; left:0; top:50%; margin-top: -2px; }

.product_info .tit small::after{ content: ""; display: inline-block; width: 4px; height: 4px; background: var(--pei-color); position: absolute; right:0; top:50%; margin-top: -2px; }

#product_content{ padding:30px 15px;}

#product_content .content{line-height: 260%;padding:30px 0 0;}

#product_content .content img{ max-width: 100%; }

.product_case{ overflow: hidden; }

.product_case .tit{ margin:28px 0; }

@media(max-width: 1206px){

  .product_focus .info .btn a{ padding:10px ​18px; }

  .product_info .tit span::before, .product_info .tit span::after{ display: none; }

  .product_info .tit small{ padding:0 40px; }

  .product_info .tit small::before, .product_info .tit small::after{ width: 20px; }

}

@media(max-width: 998px){

  .product_focus{ padding:24px 0; }

  .product_focus .info .btn a, .product_focus .info .btn .con{ display: none; }

  #goods_imgs{ margin-top: 0; }

  .product_focus .info .txt{ margin:12px 0; }

  .product_focus .info .txt p{ line-height: 1.5; }

}

@media(max-width: 774px){

  .product_focus{ padding:24px 0; }

  .product_focus .info b{ margin-top: 18px; font-size: 24px; }

}

@media(max-width: 646px){

  .product_info .tit{ margin:0 0 20px; }

  .product_info .tit span{ padding:0; }

  #product_content{ padding:15px; }

  #product_content .content{ padding:0; }

  .product_nav{ padding:9px 0; }

  .product_nav a{ padding:10px 20px; font-size: 15px; }

  .product_nav a+a::before{ top:10px; }

  

}



/* company_case */

#company_case{ overflow: hidden; padding-bottom: 40px; }

#company_case .bd{ width: 100%; overflow: hidden; }

#company_case .bd a{ display: block; background: #f2f2f3; border:1px solid #f2f2f3; transition: all .3s; }

#company_case .bd a .img{ width: 100%; padding-bottom: 84%; position: relative; overflow: hidden; }

#company_case .bd a .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

#company_case .bd a b{ transition: all .3s; display: block; box-sizing: border-box; padding:15px; overflow: hidden; font-size: 17px; color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: normal; }

#company_case .bd a:hover{ transition: all .3s; background: var(--zhu-color); }

#company_case .bd a:hover img{ transition: all .3s; transform: scale(1.05); }

#company_case .bd a:hover b{ transition: all .3s; color: #fff; font-weight: bold; }

@media(max-width: 1206px){

  #company_case{ padding:0 15px 20px; }

}

@media(max-width: 646px){

  #company_case .bd a b{ padding:10px; font-size: 14px; }

}



/* newslist */

.newslist{ overflow: hidden; width: 100%;padding:30px 0; }

.newslist a{ display: flex; align-items: center; justify-content: space-between; padding:20px; background: #f4f5f9; margin-bottom: 20px; }

.newslist a .img{ width:256px; padding-bottom: 13%; overflow: hidden; position: relative; }

.newslist a .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all .3s; }

.newslist a .txt{ overflow: hidden; width: calc(100% - 280px); }

.newslist a .txt b{ font-size: 18px; color: #3a3a3a; padding:16px 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.newslist a .txt p{ margin:12px 0 20px; text-indent: -2em; font-size: 14px; color: #666666; line-height: 1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.newslist a .txt span{ font-size: 14px; color: #666666; }

.newslist a .txt small{ display: inline-block; float: right; font-size: 14px; color: var(--zhu-color); }

.newslist a:hover{ transition: all .3s; background: var(--pei-color); }

.newslist a:hover img{ transition: all .3s; transform: scale(1.05); }

.newslist a:hover b, .newslist a:hover p, .newslist a:hover small, .newslist a:hover span{ transition: all .3s; color: #fff; }







@media(max-width: 1206px){

  .newslist{ padding:0 15px; }

}

@media(max-width: 774px){

  .newslist a .txt b{ margin:12px 0; }

  .newslist a .txt p{ overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }

  .newslist a .imgbox{ width: 240px; }

  .newslist a .txt{width:calc(100% - 260px); }

}

@media(max-width: 646px){

  .newslist a .txt p{ overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

}

@media(max-width: 576px){

  .newslist a .img{ padding-bottom: 48%; }

  .newslist a{flex-direction: column;}

  .newslist a .imgbox{ width: 100% }

  .newslist a .txt{ width:100% }

}



/*newsinfo*/

.newsinfo{padding:30px 0; background: #f8f8f8; }

.article_box{ background: #fff; 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; }

.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: #fff; }

.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); }

@media(max-width: 1206px){

  .newsinfo .row{ margin-left: 0; }

  .article_box{ margin-left: -15px; }

}

@media(max-width: 998px){

  .page_tit{ padding:15px 15px 0; }

  .relevant_news{ padding:15px; }

}

@media(max-width: 774px){

  .relevant_news{ margin-top:20px; margin-left: -15px; }

}

@media(max-width: 646px){

  .newsinfo{ padding:20px 0; }

  .page_tit b{ font-size: 22px; }

  .relevant_news a .txt{ padding:16px 0; }

  .relevant_news a .txt b{ font-size: 14px; }

  .relevant_news a .txt span{ font-size: 12px; }

}



/*prev_next*/

.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: center; }

.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); }

.prev_next>div a:hover{color: var(--pei-color);}

@media(max-width: 774px){

  .prev_next{ flex-direction: column; }

  .prev_next>div{ width: 100%; padding:14px; border:1px solid #e9e9e9; }

  .prev_next>div + div{ border-top: 0; }

}



.main .single{ padding:45px; font-size: 16px; color: #4c4c4c; line-height: 1.8;}

.main .single img{ max-width: 100%; margin:12px 0!important }



@media(max-width: 998px){

  .main .single{ padding:15px; }

}