/*基础CSS*/
@media only screen and (min-width:1921px) {
html{
        font-size: 150px;
    }
body{
        line-height: 1.6;
    }
}

@media only screen and (max-width:1600px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (max-width:1400px) {
    html {
        font-size: 14px;
    }
}
@media only screen and (max-width:1200px) {
    html {
        font-size: 12px;
    }
}
html, body{font-family: Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; font-size: 16px; overflow-x: hidden; font-weight: normal; margin:0px; padding:0px;}
li {	list-style: none;}
a {	color: #252525; text-decoration:none;}
i, em{ font-style:normal;}
a:hover {	text-decoration: none;}
p, dl, dt, dd,span, ul, h1,h2,h3,h4,h5,h6{ font-weight: normal;	margin: 0px;	padding: 0px;}
.wrap{margin:auto; width:1120px;}
.w1200{ margin:auto; width:1200px;}
.w1480{ margin:auto; width:1480px;}
.w1500{ margin:auto; width:1500px;}
.container {   width: 94%;   margin-left: auto;   margin-right: auto;    max-width: 1660px;    position: relative;}
.clear{ clear:both;}
.clearfix:before{ clear: both;}
*{box-sizing: border-box;}


header{z-index: 999; width: 100%; position: absolute; background: rgba(255,255,255,.85);transition: 1.5s;}
header.fixed-top, header:hover{  top:0; z-index: 999; position: fixed; background: rgba(255,255,255,.95); }
header.fixed-top .navbar ul li a.nav-link, header:hover .navbar ul li a.nav-link{color: #333;}
header:hover .head-tel a, header.fixed-top .head-tel a{font-size: 1.25rem; color: #333; transition: 1.5s; }
header:hover .head-tel i, header.fixed-top .head-tel i{font-size: 1rem; color: #fbb03f; margin-right: 10px; transition: 1.5s; }

header .headerbox{ display: flex; justify-content: space-between;align-items: center; margin: 0px 0px;}
.logo{  display: flex; align-items: center;height: 100px; margin: 0px 0px 0px 120px;}
.logo img{display:block;height:70px;}
.navbox{ display: flex;   justify-content: flex-end;   align-items: center;   flex: 1;}
.navbar ul{ display: flex; flex-wrap:wrap ; }
.navbar ul li{ margin: 0px 30px;  position: relative;display:table-cell;}
.navbar ul li a.nav-link {height: 100px;  line-height: 100px; display: block; font-size: 1rem; position: relative; padding:0px 0px; color: #333;}
.navbar ul li.active a.nav-link{color: #333; }
.navbar ul li a.nav-link::after {
    position: absolute;
    content: "";
    display: block;
    width: calc(100% - 1px);
    height: 2px;
    background-color: #fbb03f;
    left: 1px;
    bottom: 0px;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: 0.5s transform cubic-bezier(0.52, 0.08, 0.18, 1);
}
.navbar ul li.active a.nav-link::after, .navbar ul li:hover a.nav-link::after{transform: scale(1, 1); background-color: #fbb03f;  transform-origin: left top;}
.navbar ul li .downmune{position: absolute; z-index: 9;
    padding-top: 0px;
    text-align: left;
    width: 250px;
    height: 0;}
.navbar ul li dl{pointer-events: none;
    opacity: 0;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #343634;
    background-color: #4e4e4e;
    transform-origin: left;
    transform: translateX(-20%);
    transition: 0.75s all cubic-bezier(0.52, 0.08, 0.18, 1);
    /*overflow: hidden;*/
    justify-content: space-between;
    padding-right: 0.2rem;}
.navbar ul li dl::before { opacity: 0;
    content: "";
    
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    transition: 0.5s all cubic-bezier(0.52, 0.08, 0.18, 1);
    z-index: 0;
    background-color: #f5f5f5;
}
.navbar ul li dl:hover::before {    transform: translateX(0%); opacity: 1;}    
.navbar ul li dl:nth-child(2) {transition: 0.75s all cubic-bezier(0.52, 0.08, 0.18, 1) 0.2s;}
.navbar ul li dl:nth-child(3) {transition: 0.75s all cubic-bezier(0.52, 0.08, 0.18, 1) 0.3s;}
.navbar ul li dl:nth-child(4) {transition: 0.75s all cubic-bezier(0.52, 0.08, 0.18, 1) 0.4s;}
.navbar ul li dl:nth-child(5) {transition: 0.75s all cubic-bezier(0.52, 0.08, 0.18, 1) 0.5s;}
.navbar ul li dl:nth-child(6) {transition: 0.75s all cubic-bezier(0.52, 0.08, 0.18, 1) 0.6s;}
    
.navbar ul li dl dt{display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0px 20px;z-index: 1;}
.navbar ul li dl dt:after{font-family: "FontAwesome"; content: '\f105'; margin-left: 10px; color: #fff; line-height: normal;}
.navbar ul li:hover .downmune{ height: auto;}
.navbar ul li:hover dl{  opacity: 1;   pointer-events: auto;   transform: translateX(0%);}
  
.navbar ul li dl dt a{ display: block; line-height: 60px; padding: 0px 0px; color: #fff;}
.navbar ul li:hover .downmune{ display: block;-webkit-animation-duration: .3s;
    -webkit-animation-fill-mode: both;  animation-duration: .3s;   animation-fill-mode: both;  -webkit-animation-name: layui-upbit;   animation-name: layui-upbit;}
.navbar ul li dl:hover dt a{color: #4e4e4e; }
.navbar ul li dl:hover dt:after{color: #4e4e4e; }
.navbar ul li dl a.active{text-decoration: underline;}

.navbar ul li dl dd{display: none; position: absolute;  left: 100%;   top: 0;opacity: 0;      transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;width: 250px;
    max-width: none;    padding: 0px 0px 0px 0px;   border: 0;     border-radius: 5px 5px 5px 5px;}
.navbar ul li dl dd a{ color:#fff;height: 60px; line-height: 60px; display: block; padding: 0px 20px;  border-bottom: 1px solid #343634;   background-color: #4e4e4e;}    
.navbar ul li dl:hover dd{display: block; opacity: 1;}  
@-webkit-keyframes layui-upbit{from{-webkit-transform:translate3d(0,15px,0);opacity:.3}to{-webkit-transform:translate3d(0,0,0);opacity:1}}
@keyframes layui-upbit{from{transform:translate3d(0,15px,0);opacity:.3}to{transform:translate3d(0,0,0);opacity:1}}



.head-tel{border-left:1px solid rgba(255,255,255,.2); padding:0px 30px; height: 100px;display: flex;   justify-content: center;   align-items: center;}
.head-tel a{font-size: 1.25rem; color: #fff;  }
.head-tel i{font-size: 1rem; color: #000; margin-right: 10px;  }
.head-weixin{background: #fbb03f;padding: 0px 30px; width: 100px; height: 100px;display: flex;   justify-content: center;   align-items: center; cursor: pointer;}
.head-weixin i{font-size: 1rem; color: #fff;  }
.head-weixin img{display:none;position: absolute; top: 100px; right: 102px; width: 100px; height: 100px; border: 2px solid #fff;}
.head-weixin:hover img{display: block;}
.banner-swiper {      margin: 0 !important;   margin-left: auto !important;    height: calc(100vh - 0px);  }
.banner-swiper .bg-img-container {   height: 100%;}
.banner-swiper .swiper-slide {   display: flex;   justify-content: flex-end;}
.banner-swiper .bg-img-container {
    width: 100%;
    overflow: hidden;
    transition: all 2.5s ease-in-out;
    -webkit-transition: all 2.5s ease-in-out;
    -moz-transition: all 2.5s ease-in-out;
    -ms-transition: all 2.5s ease-in-out;
    -o-transition: all 2.5s ease-in-out;
}

.banner-swiper .bg-img-container>.bg-img {
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}
.bg-img-container {    position: relative;   width: 100%;}

.bg-img-container>.bg-img {    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    background-size: cover;
}

.banner-swiper .bg-img-container:hover>.bg-img {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.banner-swiper .swiper-slide-active .bg-img-container>.bg-img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}
.banner_txt{position: absolute; top: 0; width: 100%; display: flex;    height: 100vh;   justify-content: center;   align-items: center;}

.banner-text h3{color: #fbb03f; font-size:60px;line-height: normal; font-weight:bold;}
.banner-text p{color: #fbb03f; font-size: 30px;  margin: 30px 0px 60px 0px;text-transform:uppercase; color:#f2f2f2; text-align: center;}
.banner-area .control-area {
    position: absolute;
    z-index: 3;
    width: auto;
    left: calc(50% - 830px);
    bottom: 0.5rem;
    ;
    color: #4e4e4e;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: -10px;
}

.banner-area .swiper-button-next,
.banner-area .swiper-button-prev {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    width: auto;
    height: auto;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    margin: 0;
    padding: 10px; background: none !important;
}
.banner-area .swiper-button-next:after, .banner-area .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;font-size: 24px;
    color: #4e4e4e; font-family: "宋体";
}
.banner-area .swiper-button-prev:after{content: "<"; }
.banner-area .swiper-button-next:after{content: ">"; }

.banner-area .control-area ::after {
    font-size: 24px;
    color: #4e4e4e;
}

.banner-area .control-area .cut-line {
    width: 2px;
    height: 28px;
    background: #d4d4d4;
    margin: 0 10px;
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    -moz-transform: scaleX(0.5);
    -ms-transform: scaleX(0.5);
    -o-transform: scaleX(0.5);
}
.normal-pagination {
    margin-left: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;}

.normal-pagination .line {   width: 38px;    height: 1px;  background: #d4d4d4;    margin: 0 10px;}

.normal-pagination .swiper-pagination-total {    color: #d4d4d4;}



.index-prodduct{padding: 100px 0px; background: #eef1f6;}
.index-prodduct .index-tit{display: flex; align-items: center; margin-bottom: 30px;}
.index-prodduct .index-tit h2{font-size: 2rem;}
.index-prodduct .index-tit span{font-size: 1.25rem; font-weight: lighter; margin-left: 10px;}
.index-prodduct .pnav ul{display: flex; flex-wrap: wrap;}
.index-prodduct .pnav ul li{width: auto;    line-height: 43px;   font-size: 1rem;padding: 0 20px;   cursor: pointer;   color: #6e6e6e;
  border: 1px solid #cfcfcf;   margin-left: 15px;    border-radius: 30px;   transition: all ease-in-out .5s;}
.index-prodduct .pnav ul li:hover{ background: #fbb03f;   border: 1px solid #fbb03f; }
.index-prodduct .pnav ul li:hover a{color: #fff;transition: all ease-in-out .5s;}

.index-prodduct .product-box ul{flex-wrap: wrap; display: flex; margin: 0px -15px; overflow: hidden;}
.index-prodduct .product-box li{ width: calc(100%/3 - 30px); margin: 15px 15px; position: relative; transition: all 2s ease-in-out;   -webkit-transition: all 2s ease-in-out;}
.index-prodduct .product-box li .img {overflow: hidden;}
.index-prodduct .product-box li .img img{height: 300px; width: 100%; display: block; object-fit: cover;transition: all 2s ease-in-out;   -webkit-transition: all 2s ease-in-out;}
.index-prodduct .product-box li:hover .img img{     transform: scale(1.1);  -webkit-transform: scale(1.1);}
.index-prodduct .product-box li .text{padding: 30px 30px;width: 100%;background:#dbdee3;transition: all 1s ease-in-out;   -webkit-transition: all 1s ease-in-out;}
.index-prodduct .product-box li:hover .text{ background: #fbb03f;}
.index-prodduct .product-box li .text h3{font-size: 1.25rem; color: #1a1a1a;}
.index-prodduct .product-box li:hover .text h3{ color: #fff;}

.index-about{margin: 0px 0px;}
.index-about .about-box{display: flex; flex-wrap: wrap;}
.index-about .about-left{background: url(../images/about_tt.jpg) center top no-repeat #fdf9f0; width: 50%; padding: 60px 60px; margin-top: -200px; z-index: 9;}
.index-about .index-tit{margin-bottom: 100px;}
.index-about .index-tit h2{font-size: 2.25rem;}
.index-about .index-tit span{font-size: 1.875rem; font-weight: lighter;}

.index-about .about-left h3{font-size: 1.8rem;   color: #000;   text-transform: capitalize;   font-weight: bold;}
.index-about .about-left h4{font-size: 1.5rem;   color: #fbb03f;margin-bottom: 10px;    text-transform: capitalize;   font-weight: bold;}
.index-about .about-left hr{margin: 20px 0px;    width: 30px; border: 0.5px solid #fbb03f;}
.index-about .about-left em{  font-size: 1.5rem;color: #000;}
.index-about .about-text {  margin: 30px auto 20px; color: #666; font-size: 1rem; line-height: 30px;}
.index-about .about-left a{width: 9rem;  height: 3rem;  line-height: 3rem;   display: table;   border: 1px solid rgba(0,0,0,0.3);   position: relative;  z-index: 1;
    text-align: center;   color: #828282;  font-size: 0.9rem;  font-family: Arial;   margin-top: 1.5rem;}
.index-about .about-left a:after {   content: "";   position: absolute;   right: left;   top: 0;   display: block;   height: 100%;   width: 0;   background: #fbb03f;   transition: all ease 600ms;   z-index: -1;}
.index-about .about-left a:hover:after {width: 100%;}
.index-about .about-left a:hover{color: #fff; border: 1px solid #fbb03f;}

.index-about .about-right { width: 50%; margin: auto;}
.index-about .about-video video{aspect-ratio: 16/9; width: 100%;}

.index-advantage{ position: relative; margin: 100px 0px;}
.index-advantage .advantage-box ul{display: flex; flex-wrap: wrap; justify-content: space-between;  margin: auto;}
.index-advantage .advantage-box li{ width:calc(100%/3 - 1%);height:auto;  text-align:left; margin:0 0.5%; background:#eceef0; position:relative; overflow:hidden;}
.index-advantage .advantage-box li .img_mask{width:100%;height:0;overflow:hidden;background:rgba(251,176,63,1);position:absolute;transition:all ease-in-out .5s;z-index:1;transform: skewy(-12deg);margin-top:-50px;}
.index-advantage .advantage-box li img{width:100%; display:inline-block; transition:all ease-in-out .5s; z-index:2;position:relative;z-index:2;}
.index-advantage .advantage-box li dl{width:100%; height:auto; color:#000; float:left; padding:0 10%; z-index:2;position:relative;z-index:2; margin:0;}
.index-advantage .advantage-box li dl dt{width:52px; height:62px; background:url(../images/ad_list.png) no-repeat; text-align:center; line-height:50px; color:#fff; font-weight:bold; font-size:30px; font-family:Arial; margin-bottom:10%; transition:all ease-in-out .5s;}
.index-advantage .advantage-box li dl em{font-size:0.875rem; line-height:30px; font-style:italic; transition:all ease-in-out .5s;}
.index-advantage .advantage-box li dl p{font-size:1.25rem; line-height:30px; font-weight:bold; transition:all ease-in-out .5s;}
.index-advantage .advantage-box li dl dd{font-size:15px; line-height:25px; padding:5% 0 7% 0; color:#656565; transition:all ease-in-out .5s;}
.index-advantage .advantage-box li dl .more{width:115px; line-height:35px; text-align:center; margin-top:5%; font-size:15px; color:#fff; 
background: linear-gradient(-45deg,transparent 10px,#fbb03f 0);transition:all ease-in-out .5s;}
.index-advantage .advantage-box li:hover dl .more{color:#000; background: linear-gradient(-45deg,transparent 10px,#fff 0);}
.index-advantage .advantage-box li:hover dl{color:#fff;}
.index-advantage .advantage-box li:hover dl dd{color:#fff;}
.index-advantage .advantage-box li:hover .img_mask{width:100%; height:78%;}

.index-project{margin: 100px 0px;}
.index-project .project-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
.index-project .project-left{background: url(../images/case_back.jpg) center top no-repeat; width: 50%; padding: 60px 60px 60px 200px; z-index: 9;}
.index-project .project-left .index-tit{margin-bottom: 30px;}
.index-project .project-left .index-tit h2{font-size: 2.25rem;}
.index-project .project-left .index-tit span{font-size: 1.875rem; font-weight: lighter;}

.index-project .project-left h3{font-size: 1.25rem;   color: #000;   text-transform: capitalize; }

.index-project .project-left hr{margin: 20px 0px;    width: 30px; border: 0.5px solid #fbb03f;}

.index-project .project-left .about-text {  margin: 30px auto 20px; color: #666; font-size: 1rem; line-height: 30px;}
.index-project .project-left a{width: 9rem;  height: 3rem;  line-height: 3rem;   display: table;   border: 1px solid rgba(0,0,0,0.3);   position: relative;  z-index: 1;
    text-align: center;   color: #828282;  font-size: 0.9rem;  font-family: Arial;   margin-top: 1.5rem;}
.index-project .project-left a:after {   content: "";   position: absolute;   right: left;   top: 0;   display: block;   height: 100%;   width: 0;   background: #fbb03f;   transition: all ease 600ms;   z-index: -1;}
.index-project .project-left a:hover:after {width: 100%;}
.index-project .project-left a:hover{color: #fff; border: 1px solid #fbb03f;}

.project-list-area{width: 50%; position: relative;}
.project-list-area .swiper-slide{}
.project-list-area .swiper-slide img{display: block; height: 500px; object-fit: cover;}

.swiper-btn{position: absolute; bottom: 50px; right: 50px;z-index: 1; display: flex;}
.project-swiper-prev{width:40px; height:40px; display:flex; justify-content:center;align-items:center;right: 40px; background: #fff !important;   cursor: pointer;}
.project-list-area .project-swiper-prev:after {   content: "<";}
.project-swiper-next{width:40px; height:40px;right: 0; background: #fff !important;   cursor: pointer;   display:flex; justify-content:center;align-items:center;}
.project-list-area .project-swiper-next:after {   content: ">";}


.index-news{ margin: 0px 0px 100px 0px;}
.index-news .index-tit{display: flex; align-items: center; margin-bottom: 30px;}
.index-news .index-tit h2{font-size: 2rem;}
.index-news .index-tit span{font-size: 1.25rem; font-weight: lighter; margin-left: 10px;}
.index-news .nnav ul{display: flex; flex-wrap: wrap;}
.index-news .nnav ul li{width: auto;    line-height: 43px;   font-size: 1rem;padding: 0 20px;   cursor: pointer;   color: #6e6e6e;
  border: 1px solid #cfcfcf;   margin-left: 15px;    border-radius: 30px;   transition: all ease-in-out .5s;}
.index-news .nnav ul li:hover{ background: #fbb03f;   border: 1px solid #fbb03f; }
.index-news .nnav ul li:hover a{color: #fff;transition: all ease-in-out .5s;}

.index-news .news-box{display: flex; flex-wrap: wrap; }
.index-news .newsihead{width: 40%; position: relative;}
.index-news .newsihead img{width: 100%; display: block; height: 380px;}
.index-news .newsihead .text{position: absolute; bottom: 30px; padding: 30px 30px;}
.index-news .newsihead .text h3{ font-size: 1.125rem; color: #fff; margin: 10px 0px;}
.index-news .newsihead .text time{ font-size: 1.125rem; color: #fff;font-size: 0.875rem;}
.index-news .newsihead .text span{ display: flex; color:#fff; font-size: 0.875rem;}
.index-news .newsihead .text i:after{content: "—";}
.index-news .newsihead .text p{ font-size: 0.875rem; color: #fff; margin: 10px 0px 0px 0px;}

.index-news .newsli{  padding: 0px 0px 0px 30px; width: 60%;}
.index-news .newsli li{margin-bottom: 20px;}
.index-news .newsli li a{display: flex; flex-wrap: wrap; margin: 0px 0px 0px 0px; }
.index-news .newsli li .liimg{width: 30%;}
.index-news .newsli li .liimg img{width: 100%; height: 180px;     object-fit: cover;display: block;}
.index-news .newsli li .litext{ width: 70%; padding: 0px 0px 0px 30px;}
.index-news .newsli li .litext h3{ font-size: 1.125rem; color: #333; margin: 10px 0px;}
.index-news .newsli li:hover .litext h3{  color:#fbb03f;}
.index-news .newsli li .litext time{ font-size: 1.125rem; color: #939393;font-size: 0.875rem;}
.index-news .newsli li .litext span{ display: flex; color:#838383; font-size: 0.875rem;}
.index-news .newsli li .litext i:after{content: "—";}
.index-news .newsli li .litext p{ font-size: 0.875rem; color: #909090; margin: 10px 0px 0px 0px;}

.index-contact{background: url(../images/s_bn01.jpg) center no-repeat;   background-size: cover;
   background-attachment: fixed;   color: #000;   position: relative;   overflow: hidden;   width: 100%;}
   
.index-contact .contact-box { display: flex; flex-wrap: wrap; }
.index-contact .contact-box .img{width: 50%;}
.index-contact .contact-box .img img{ display: block;}
.index-contact .contact-box .text{width: 50%; padding: 100px 200px 100px 200px; height: 460px;}
.index-contact .contact-box .text h3{ font-size: 1.25rem;  margin-top: 20px; display: block; font-weight: bold; color: #000; font-style: normal; }
.index-contact .contact-box .text p{ font-size: 1.25rem; font-weight: lighter; color: #666;margin: 20px 0px 30px; display: block; line-height: 30px;}
.index-contact .contact-box .text a{display: flex;}
.index-contact .contact-box .text span{display: block;
    width: 8rem;
    height: 3.75rem;
    line-height: 3.7rem;
    color: #000;
    padding: 0 1.7rem;
    border: 1px solid rgba(0,0,0,.6);
    border-right: 0;}

.index-contact .contact-box .text span:last-child{background: #fbb03f; color: #fff; border: 1px solid #fbb03f;}
footer{ background: url(../images/foot_bg2.jpg) center bottom no-repeat;  background-size: cover;   background-attachment: fixed; padding: 100px 0px 0px; }
footer .footer-box{}
footer .foot-text{ display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .foot-pro{ margin-right: 30px;}
footer .foot-pro h3{ color: #333; font-size:1.25rem;  margin-bottom: 30px;}
footer .foot-pro li { line-height: 30px;}
footer .foot-pro li a{ color: #929292; font-size:1rem;}

footer .foot-ewm img{ width: 100px; height: 100px; }
footer .foot-ewm p{text-align: center; margin-top:10px;font-size: .875rem;    color: #333;}

footer .foot-contact{ }
footer .foot-contact h3{ color: #333; font-size:1.25rem; margin-bottom: 20px; }
footer .foot-contact p{ color: #888; font-size:1rem;margin-bottom: 10px; display: block;}

footer .foot-contact ul { display: flex; flex-wrap: wrap; }
footer .foot-contact ul li i{ color: #fff; font-size:1rem; line-height: 30px; margin: 0px 20px 0px 0px; }



footer .yq-link ul{ display:flex; flex-wrap:wrap;}
footer .yq-link ul li{ margin:0px 5px;}
footer .yq-link ul li a{ font-size:1rem; color:#ccc;}
footer .yq-link span{ margin-right:10px;font-size:1rem; color:#ccc;}

footer .copyright{border-top: 2px solid #d4d4d4; color: #929292; text-align: center; margin: 100px 0px 0px 0px; padding: 20px 100px;}
footer .copyright a{color: #929292;  }

.online {  position: fixed; bottom: 150px; background: #1247eb;  border-radius: 5px;   right: 10px;   width: 60px;   z-index: 999;   color: #999;}
.online dl { padding: 10px 5px;   margin-bottom: 1px;   position: relative;}
.online dl dd {   color: #fff;   text-align: center;   font-size: 1.1rem;   cursor: pointer;}
.online dl dd i{font-size:2rem;  }



.top_banner{background:#cccccc; position:relative;height:580px;}
.top_banner:before{content: ""; background: rgba(0,0,0,0.2); display: block; height: 100%; width: 100%; position: absolute; top: 0;}

.top_banner img{ height: 100%; object-fit: cover;}
.top_banner .text_box{width:1200px;text-align:center; position: absolute; }
.top_banner h3{font-size:60px;color:#fff;font-weight: bold; text-transform: uppercase;}
.top_banner p{font-size:1.5rem;color:#fff;line-height:42px;display: none;}

@media screen and (max-width: 768px) {
.top_banner{ height:200px;} 
.top_banner h3{font-size:18px;}   
.top_banner img{object-fit: cover; height:200px;}
.top_banner .text_box{ width:100%;}
.top_banner p{ display:none;}     
}

.pages_cont {margin: 30px 0;width: 100%;display: flex;justify-content: center;align-items: center;}
.pages_cont ul a {    float: left;}
.pages_cont ul a,.pages_cont ul span { width: 40px; height: 40px; background: #eee; border-radius: 10px; 
display: flex; align-items: center;   justify-content: center; float: left; margin:0px 3px;color: #fff; font-size: 1rem; 
transition: all .4s;   overflow: hidden;}
.pages_cont ul li.dt a {   border: 0;}
.pages_cont ul a.page-num-current {    background: #fbb03f;  }
.pages_cont ul a.page-num-current { color: #fff;}
.pages_cont select{padding: 10px;  border: 1px solid #ccc;}

.position {  font-size:0.875rem; bottom: 0; position: absolute; padding: 20px 0px;text-transform: uppercase; color: #fff;  margin: 0px 0px;   }
.position a{  font-size:0.875rem;  color: #fff;margin: 0px 2px;  text-transform: uppercase; }




.news-main{ }
.news-cont{ margin: 60px 0px;}
.newslist{ padding:0px 0px 15px 0px; width: calc(100% - 0px); box-sizing: border-box;}
.newslist ul{display: flex; flex-wrap: wrap;}
.newslist li{ width: calc(100%/1 - 0px);   overflow:hidden;   padding: 0px; margin:0px 0px 40px 0px ; }
.newslist li a{  margin: 0px auto; display: flex; flex-wrap: wrap; }
.newslist li .list_img{ width: 300px; height: 180px; overflow: hidden;}
.newslist li .list_img img{ width: 100%; height: 180px; display: block; object-fit: cover;}
.newslist li time{ color: #ccc; font-size: 0.875rem;width: 100%;  display: block;  padding: 0px 0px 0px 0px;  box-sizing: border-box;} 
.newslist li .list_text{ width: calc(100% - 300px); margin: 0px 0px;padding: 20px 30px; box-sizing: border-box; } 
.newslist li .list_text h3{ margin: 0px 0px 20px 0px; color: #252525; line-height: 18px;  font-size: 1.25rem;}
.newslist li:hover .list_text h3{color: #fbb03f;}
.newslist li .list_text p{ color:#676767; font-size: 0.875rem;padding: 15px 0px; line-height: 24px; clear: both;}
.newslist li .list_text span{color: #000;   position: relative;   font-size: 0.875rem;    }

.newslist li .list_text span {
    position: relative;
    display: inline-block;
    width: 30px;
   
    vertical-align: middle;
    transition: all 1s;
}
.newslist li:hover .list_text span{transform: translateX(10px);}
.newslist li .list_text span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #878888;
}
.newslist li .list_text span::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-width: 1px;
    border-color: #878888 #878888 transparent transparent;
    transform: rotate(45deg);
    margin-top: -2.5px;
}

.newslist li:hover .list_text h3{ }
.newslist li:hover img{ transform: scale(1.05, 1.05); transition: .5s transform;}

.news-show {   display: flex;   flex-wrap: wrap;   margin: 60px 0px;}
.news-right{background: #fff; width:300px;padding: 0px 20px; box-sizing: border-box;}
.news-right h2{border-left: 3px solid #fbb03f; font-size: 1.2rem; background: #f2f2f2; text-align: left; margin-bottom: 20px; padding: 10px 10px 10px 10px;}
.news-right ul li{ margin-bottom: 20px; border: 1px solid #eee; padding: 10px 10px;}
.news-right ul li img{ display: block; width: 100%;}
.news-right ul li h3{  color:#000;font-size:1rem;padding: 5px 0px; text-align: center;}

.newscontent{width: calc(100% - 300px);}
.newscontent h2{ text-align: center;}
.newscontent .metit{ text-align: center;border-bottom: 1px solid #eee;color:#999; padding: 30px 0px 30px 0px;}
.newscontent .content{padding: 60px 0px; line-height:2; font-size:1rem;}
.newscontent .content img{max-width: 100%;}

.page-links { margin: 0px 0px 30px 0px;}
.page-links .prev-link,.page-links .next-link{ width: 100%; margin: 10px 0px; color: #333; }
.page-links .prev-link a,.page-links .next-link a{ color: #333; }


.about-company{ padding:100px 0px 100px 0px; overflow:hidden;}
.company-cont{display: flex;flex-wrap: wrap;}
.about-company .about_right{  width:100%; padding: 0px 0px 0px 0px;}
.about-company .about_right h2{ color:#000; font-weight:600; text-align: center; font-size:2rem; margin-bottom:30px;}
.about-company .about_right p{ color:#54595f; font-size:1rem; line-height: 30px; }
.about-company .about_right a.baojia{ background:#fbb03f; font-size:1rem; font-weight: bold;  margin:30px auto 0px;color:#fff; padding: 15px 40px;  display:table; border-radius:5px;   }

.about-company .about_left{ width:50%; position:relative; display: flex; flex-wrap:wrap; justify-content: space-between;}
.about-company .about_left img{ display:block; border-radius: 5px;width: 100%; height: 450px;}



.about-shili{ padding:60px 0px 60px 0px;margin:0px 0px 0px 0px; overflow:hidden; background: #f8f8f8 url(../images/shape.png) no-repeat left bottom;}
.shili-cont{display: flex;flex-wrap: wrap;}

.about-shili .shili_right{width:100%; }
.about-shili .shili_right ul{display: flex; flex-wrap: wrap;}
.about-shili .shili_right ul li{width: calc(100%/4 - 20px); text-align: center; margin: 10px 10px; padding: 30px 30px; border-radius: 5px;}
.about-shili .shili_right ul li span{margin-bottom: 20px; display: block;}
.about-shili .shili_right ul li b{color: #000; font-weight: bold; font-size: 3rem;}
.about-shili .shili_right ul li p{font-size: 1rem;}


.about-advantage{ position: relative; margin: 100px 0px;}
.about-advantage .advantage-box ul{display: flex; flex-wrap: wrap; justify-content: space-between;  margin: auto;}
.about-advantage .advantage-box li{ width:calc(100%/3 - 1%);height:auto;  text-align:left; margin:0 0.5%; background:#eceef0; position:relative; overflow:hidden;}
.about-advantage .advantage-box li .img_mask{width:100%;height:0;overflow:hidden;background:rgba(251,176,63,1);position:absolute;transition:all ease-in-out .5s;z-index:1;transform: skewy(-12deg);margin-top:-50px;}
.about-advantage .advantage-box li img{width:100%; display:inline-block; transition:all ease-in-out .5s; z-index:2;position:relative;z-index:2;}
.about-advantage .advantage-box li dl{width:100%; height:auto; color:#000; float:left; padding:0 10%; z-index:2;position:relative;z-index:2; margin:0;}
.about-advantage .advantage-box li dl dt{width:52px; height:62px; background:url(../images/ad_list.png) no-repeat; text-align:center; line-height:50px; color:#fff; font-weight:bold; font-size:30px; font-family:Arial; margin-bottom:10%; transition:all ease-in-out .5s;}
.about-advantage .advantage-box li dl p{font-size:1.25rem; line-height:30px; font-weight:bold; transition:all ease-in-out .5s;}
.about-advantage .advantage-box li dl dd{font-size:15px; line-height:25px; padding:5% 0 7% 0; color:#656565; transition:all ease-in-out .5s;}

.about-advantage .advantage-box li:hover dl{color:#fff;}
.about-advantage .advantage-box li:hover dl dd{color:#fff;}
.about-advantage .advantage-box li:hover .img_mask{width:100%; height:78%;}




.case-main{margin: 60px 0px;}
.caselist ul{display: flex; flex-wrap: wrap;}
.caselist ul li{width: calc(100%/3 - 30px); margin: 15px 15px; position: relative;}
.caselist ul li .img img{width: 100%; height: 300px; border-radius: 10px; display: block;}
.caselist ul li::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color:rgba(0,0,0,0.5);
    z-index: 1;
    top: 5%;
    width: 90%;
    height: 90%;
    left: 5%;
    opacity: 0;
   
    transition: all 0.4s ease-in-out;
}
.caselist ul li .text{position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 9;
    opacity: 0;
   
    transition: all 0.4s ease-in-out;}
.caselist ul li .text h3{color: #fff; font-size: 1.25rem; font-weight: bold;}  
.caselist ul li .text span{display:flex; align-items: center;justify-content: center; margin: 20px auto; width: 40px; height: 40px; border-radius: 100%; 
background: #fbb03f;}  
.caselist ul li .text span i{color: #fff;}
.caselist ul li:hover .text{opacity: 1;} 
.caselist ul li:hover::before{opacity: 1;}   



.productsort{ margin: 0px 0px 0px 0px; background-color: #f2f2f2; }
.productsort h2{padding:10px 20px 10px 20px;  margin: 10px 20px; font-weight: bold; border-bottom: 1px solid #dcdcdc;   background: url(../images/position-ico.png) no-repeat center left;}
.productsort ul{ display: flex;     flex-wrap: wrap;}
.productsort ul li {display: flex;justify-content: center; align-items: center;  transition: 0.5s; border-right: 1px dotted #d6d6d6; position: relative; }
.productsort li a.class1 {color: #000; font-size: 1rem;  display: block;padding: 20px 50px; }
.productsort li a#navdown:after {   font-family: "FontAwesome";   content: '\f107';   margin-left: 10px;   color: #fff;}
.productsort li:hover ,.productsort li.active{background:#fbb03f;  }
.productsort li:hover a.class1, .productsort li.active a.class1 { color:#fff;}

.productsort li dl{ display: none;width: 100%;background: #f5f5f5;padding: 0px 0px; position: absolute; top: 60px; z-index: 9;}
.productsort li:hover dl{  display: block; }

.productsort li dl a{ width: 100%; font-size: 1rem; display: block; color: #000; padding: 10px 0px; text-align: center;}
.productsort li dl a.active{ color: #252525; text-decoration: underline;}
.productsort li dl a:hover{color: #fbb03f;}

.product_box{ margin: 60px 0px 60px 0px;}
.productlist{ margin: 0px auto;}
.productlist ul{ display: flex; flex-wrap: wrap; margin: 0px -10px;}
.productlist li{ width: calc(100%/4 - 20px); background: #fff; overflow: hidden;   margin:0px 10px 40px 10px;  position: relative; }
.productlist li a{display: flex; flex-wrap: wrap;}
.productlist li .img{width: 100%; height: 260px;   display: flex;  justify-content: center; align-items: center; overflow:hidden;}
.productlist li .img img{ margin:auto; display: block; object-fit: cover; width:100%; height: 260px;  transition: .5s transform; }
.productlist li:hover img{transform: scale(1.05, 1.05); transition: .5s transform;}

.productlist li .text{  width: 100%; padding: 20px 20px 20px 20px;  position: relative;transition: .5s transform;}
.productlist li .text h3{font-size: 1rem; text-align: center; color: #252525; margin:0px auto 10px;    transition: all .3s ease-out 0s; }
.productlist li .text p {font-size: 0.875rem; color: #676767; line-height: 24px; margin:10px 0px 30px 0px;}  
.productlist li .text em{ font-size: 14px; color: #676767;  font-style: normal;}
.productlist li .text span { background:#707070;  width: 25px;   height: 25px;  color: #fff;
    font-size: 14px;display: flex;   align-items: center; justify-content: center;  border-radius: 25px; margin: auto;} 
.productlist li:hover{}
.productlist li:hover .text h3{}
.productlist li:hover .text span{ }


/*产品轮播*/
.productshow-main{ background-color: #f2f2f2;}
.wpcs{ background-color: #ffffff;}
.productshow-main .product_content{ margin: 60px 0px 60px 0px;}
.prorow{  display: flex; flex-wrap:wrap;justify-content: space-between;}
.pro-left{    width: 700px;  }
.view {	 width:700px; height:400px;  overflow: hidden;}
.view .swiper-slide{	 width:700px; height:400px;}
.view img {width: 100%;	height: 100%; object-fit: contain;}

.preview {	position: relative;	width: 540px; padding: 0px 30px;	 margin:20px 0px 20px 80px}
.preview .swiper-slide {width: 120px;	height: 90px;	margin: 0 3px;	box-sizing: border-box;	overflow: hidden;	cursor: pointer;}
.preview .swiper-slide img {	object-fit: cover;display: inline-block;width: 100%;	height: 100%;}
.preview .active-nav {	border: 1px solid #ff0000;}
.preview .arrow-left,.preview .arrow-right{display: inline-block;position: absolute; }
.preview .arrow-left:after,.preview .arrow-right:after{font-family:"FontAwesome";font-size:36px;display:block; position: absolute;text-align:center;font-weight:600;}
.preview .arrow-left{left: 0px;top: 50%; margin-top: -25px; }
.preview .arrow-right{right: 10px;top: 50%;margin-top: -25px;}
.preview .arrow-left:after{content:'\f104'; color: #252525;}
.preview .arrow-right:after{content:'\f105'; color: #8d8d8d;}


.pro-right{ width:calc(100% - 700px); padding:30px 40px; height:auto;}
.pro-right h2{ font-size:20px; line-height: 30px; color: #252525; font-weight:bold; margin-bottom: 20px;}
.miaoshu p{ font-size: 16px; color: #676767; line-height: 30px;}
.pro-right a.inquirybtn {   width: 180px;   height: 42px;   color: #fff;   position: relative;    font-size: 14px;   font-weight: bold;
    display: flex;   align-items: center;   text-transform: uppercase;   padding-left: 15px; margin-top: 30px ;   background: #fbb03f; border-radius: 21px;}
.pro-right a.inquirybtn:before{ content: ""; background: url(../images/newsbtn.webp) no-repeat center; position: absolute; right: 20px; display: block; width: 20px; height: 20px;}

.product-container{  margin: 60px auto; }

.pro-content{ margin: 60px auto; border-top: 1px solid #eaeaea; padding: 60px;}

.contentbox {}
.dec-tit {     margin: 0px 0px 50px 0px;     font-weight: bold;}
.dec-tit span{ font-size: 36px; text-align: center; display: block; text-transform: uppercase; color: #000; font-weight: bold; }
.box-content .content img{ display: block; max-width: 100%;}
.box-content .content p{color: #676767; line-height: 30px;}




.contact-section{background:#f8f8f8; padding: 100px 0px;}
.contact-wrapper .contact-info ul{display: flex; flex-wrap: wrap;}
.contact-wrapper .contact-info li{margin:0px 0px 20px 0px; width:calc(100%/4); text-align:center;background: #f8f8f8; border-radius: 5px; padding: 30px 30px;}
.contact-wrapper .contact-info li span{display: flex;align-items: center;color: #fff; justify-content: center; font-size: 1.5rem; 
height: 65px; width: 65px; border-radius: 100%; margin: 0px auto 20px; background: #fbb03f;}
.contact-wrapper .contact-info li .info{width:calc(100% - 0px); color: #000;}
.contact-wrapper .contact-info li em{font-size: 1rem; font-weight: bold; display: block; margin: 0px 0px 10px 0px;}
.contact-wrapper .contact-info li p{font-size: 1rem;}


.form-input{display: flex; flex-wrap: wrap; }
.form-input .form-clt{ width: calc(100%/1 - 20px); margin: 10px 0px; display: flex; align-items: center; justify-content: space-between;position: relative;}
.form-input .form-clt input, .form-input .form-clt textarea {
    width: 100%;
    outline: none;
    border: none;
    background-color: #fff;
    border: none;
    color: #666;
    padding: 16px 30px;
    border-radius: 5px;
    font-weight: 500;
}
.form-input .form-clt textarea {
    padding-bottom: 175px;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.form-input .form-clt .icon {
    position: absolute;
    top: 16px;
    right: 30px;
    color: #666;
}

.theme-btn {
    background-color: #fbb03f;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 22px 40px;
   
    letter-spacing: 1.2px;
    line-height: 1;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
    border-radius: 5px; border: none;
    cursor: pointer;
}
.theme-btn::before {
    content: "";
    background-color: #000;
    width: 0;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
    border-radius: 5px 5px 0 0;
}
.theme-btn::after {
    content: "";
    background-color: #000;
    width: 0;
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
    border-radius: 0 0 5px 5px;
}

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

header {  position: inherit;}
header .headerbox { width: calc(100% - 0px); display:flex;margin: 0px 0px;height:60px;padding: 0px 0px;border-radius: 0px;}		
.wrap{width: 100%; padding: 0px 10px;  margin: 0px 0px;}
.w1200 {   margin: auto;   width: 100%;}
.w1360 {   margin: auto;   width: 100%;}
.w1480 {   margin: auto;   width: 100%;}
.logobox{ display: flex; justify-content: space-between; padding: 0px 10px;     align-items: center;   width: 100%;}
.logo { height: 60px;margin: 0px 0px 0px 0px;}
.logo img{ height: 55px;}


.head-tel{display: none;}
.head-weixin{display: none;}
.mc_ph_menu{ display:block !important;}
.point{ position:relative;}
.point .nav_btn{position: absolute;   top: 0px;  right: 0;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.point .nav_btn,.point .nav_btn:after,.point .nav_btn:before {display: inline-block;width: 26px;height: 2px; background-color: #000;}  
.point .nav_btn::after, .point .nav_btn::before {    content: '';   position: absolute;   right: 0;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.point .nav_btn::before {    top: 8px;}
.point .nav_btn::after {   top: -8px;} 
.point.active .nav_btn {  background: transparent; }
.point.active .nav_btn::before {    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.point.active .nav_btn::after {    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.contact-wrapper .form-box{width: 100%;}
.navbox{ display:none;position: absolute; opacity:0; left: 0; top: 60px; height: 100vh; padding: 0px 20px; box-sizing: border-box;  
z-index: 999;   background: #fff;   width: 100%;   transition: all 0.5s;transform: translateX(100%);}
.navbox.navbar-show{ transform: translateX(0%);opacity:1; display: block; }
.navbar ul li{ width: 100%;display: block;margin: 0px 0px;padding: 0px 0px; border-bottom: 1px solid #ddd;}
.navbar ul li.active{ border-radius: 0px; background:none;}
.navbar ul li a.nav-link{ width: 100%; display: flex; font-size: 1rem; padding: 0px 10px;  color: #000; height:40px;line-height: 40px; justify-content: space-between;align-items: center;}
.navbar ul li a.active {    color: #FF8F00;}
.navbar ul li.active a.nav-link::after, .navbar ul li:hover a.nav-link::after{display: none;} 
.navbar ul li a.navdown:after{position:absolute; right:0; display: none;}
.navbar ul li a.navdown:before {right: 0;}
.navbar ul li .downmune{ display:block; height: auto; position: inherit;top: 0px; padding: 0px 0px;width: 100%; text-align: left;   box-sizing: border-box;}
.navbar ul li.navdown:after { background:none; width:auto;   font-family: "FontAwesome";
    content: '\f107'; font-weight: bold;  color: #252525; line-height: 40px; position:absolute;  right:0; top:0; }
.navbar ul li.active:after {   content: "-"; font-weight: bold;   color: #2661bb;  line-height: 40px; position:absolute;  right:0; top:0; }
.navbar ul li.on dl{display:block;}
.navbar ul li:hover dl{ }
.navbar ul li:hover a.nav-link{}
.navbar ul li dl{opacity: 1;transform: translateX(0%); height: auto; display: block;}
.navbar ul li dl a{line-height:40px; font-size:1rem}
.navbar ul li dl dt{width: 100%;   justify-content: space-between;}
.navbar ul li dl dt a{height: 40px; line-height: 40px;}
.navbar ul li dl dd{position:inherit; left:0; opacity: 1; display: block; width: 100%; padding: 0px 20px 0px 20px;}
.navbar ul li dl dd a{height: 40px; line-height: 40px;}

.index-about .about-left{width: 100%;padding: 60px 20px;     margin-top: 0px;}
.index-about .about-right {   width: 100%;}
.index-about .about-right img{   width: 100%;}

.index-prodduct {  padding: 60px 0px;}
.index-prodduct .index-tit{width: 100%;}
.pnav{width: 100%;}
.index-prodduct .product-box ul{margin: 0px 0px;}
.index-prodduct .product-box li {   width: calc(100%/2 - 20px); margin: 10px 10px;}
.index-prodduct .product-box li .img img {  height: 180px;}
.index-prodduct .product-box li .text {    padding: 10px 10px;}
.index-prodduct .product-box li .text h3{font-size: 1rem; text-align: center;}

.index-advantage{margin: 60px 0px;}
.index-advantage .advantage-box li {    width: calc(100%/1 - 20px); margin: 10px 10px;}

.index-project {   margin: 60px 0px;}
.index-project .project-left{width: 100%; padding: 60px 20px 60px 20px;}
.project-list-area { width: 100%;}
.project-list-area .swiper-slide img{width:100%;  height: 300px;}

.index-news {   margin: 0px 0px 60px 0px; padding: 0px 20px;}
.index-news .newsihead {   width: 100%; margin-bottom: 20px;}
.index-news .newsihead img {height: 300px;}
.index-news .newsli {    padding: 0px 0px 0px 0px;    width: 100%;}

.index-contact .contact-box .img { width: 100%;}
.index-contact .contact-box .img img {   display: block;   width: 100%;}
.index-contact .contact-box .text {   width: 100%;   padding: 30px 20px 30px 20px;   height: auto;}

footer {padding: 60px 0px 0px;}
footer .footer-box {   margin: 0px 20px;}
footer .foot-pro { width: 100%;   margin-right: 0px;}
footer .foot-pro h3{font-size: 1rem; position: relative;}
footer .foot-pro h3:after {   content: "+";   font-weight: bold;    color: #333;  line-height: 30px;   position: absolute;   right: 0;   top: 0;}
footer .foot-pro ul{display: none;}
footer .copyright{padding: 20px 0px;    margin: 60px 0px 0px 0px;}

.about-company {   padding: 60px 20px 60px 20px;}
.about-shili .shili_right ul li {    width: calc(100%/2 - 20px);}
.about-advantage .advantage-box li {  width: calc(100%/1 - 1%);}

.productsort{display: none;}
.m_pronav{height: 50px; margin: 0px 10px; border-bottom: 1px solid #e6e6e6;display: flex !important;
    justify-content: flex-end;  align-items: center;}
.productsort-wap.productsort-wap_show  { display: block !important;transform: translateX(0%);   opacity: 1; width: 50%; }  
.productsort-wap{position:fixed;  height: 100%; top: 0; display: none; z-index: 999;   background: #fff;   padding: 20px; transition: all 0.5s;   transform: translateX(-100%);}

.productsort-wap ul{background: #fff; }
.productsort-wap ul li {   padding: 0px 0px;      margin: 0 0px; transition: 0.5s; }
.productsort-wap li a.class1 {color: #333; font-size: 1rem; font-weight: bold; display: flex;justify-content: space-between; padding: 20px 0px 20px 0px;}
.productsort-wap li:hover ,.productsort-wap li.active{  }
.productsort-wap li:hover a,.productsort-wap li.active a.class1 { color:#fbb03f;}
.productsort-wap li.active a.class1:after{font-family: "FontAwesome"; content: '\f106';}
.productsort-wap li dl{ display: none;padding: 0px 0px;}
.productsort-wap li.active dl{  display: block; }
.productsort-wap li dl a{ width: 100%; font-size: 1rem; display: block; border-bottom: 1px dashed #ccc; color: #676767; padding: 10px 10px;}
.productsort-wap li dl a.active{ color: #252525; text-decoration: underline;}

.productlist ul{margin: 0px 0px;}
.productlist li {width: calc(100%/2 - 20px);margin: 0px 10px 0px 10px;}
.productlist li .img {height: 180px;}
.productlist li .img img{height: 180px;}

.productshow-main .product_content {  width: 100%;   padding: 0px 10px;}
.pro-left {   width: 100%;}
.view {   width: 100%;   height: 300px;   overflow: hidden;}
.view .swiper-slide {   width: 100%;   height: 300px;}
.preview {   position: relative;   width: 100%; margin: 20px 0px 20px 0px;}
.pro-right {   width: calc(100% - 0px);   padding: 30px 0px 0px 0px;}

.news-cont {   margin: 60px 0px;}
.newslist li {  width: calc(100%/1 - 40px);margin: 0px 20px 40px 20px;}
.newslist li .list_img{width: 100%;}
.newslist li .list_text {   width: calc(100% - 0px);    padding: 20px 0px;}

.news-show {  margin: 60px 20px;}
.newscontent {  width: calc(100% - 0px);}
.news-right { width: 100%;   padding: 0px 0px;}
.news-right ul{display: flex; flex-wrap: wrap; margin: 0px -10px;}
.news-right ul li {    width: calc(100%/2 - 20px);   margin: 10px 10px;}

.caselist ul li {   width: calc(100%/1 - 40px);    margin: 15px 20px;}
.caselist ul li .img img {   width: 100%;   height: 200px;}

.contact-wrapper .contact-info li {   margin: 0px 0px 20px 0px;    width: calc(100%/2);}
.form-input .form-clt {   width: calc(100%/1 - 20px);   margin: 10px 10px;}

.pro-content{padding:10px;}
.content img{width:100%;padding-top:15px;}
.pro-right{display: none;}
.banner-text{width:90%; margin: 0 auto; text-align: center;}
.banner-text h3{font-size: 28px; padding-top: 10px;}
.banner-text p{font-size: 20px;}
.banner-swiper{height: calc(40vh - 0px);}
.banner_txt{height: 40vh;}
.index-about .about-left h3{font-size:1.6rem;}
.index-about .index-tit{margin-bottom:60px;}
.index-prodduct .index-tit h2{font-size: 1.6rem;padding-left:15px;}
.index-prodduct .pnav ul li{margin:5px;}
}