body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,input{margin: 0; padding: 0;}
body{--maincolor: #0fa63b; font-family: Arial; padding-top: 180px; background: #f2f2f2;}
li{list-style: none;}
a,a:hover,input:focus,select:focus,textarea:focus{text-decoration: none; color: inherit; outline: none;}
img{border: none; max-width: 100%; height: auto;}
.clear{clear: both;}
.w{max-width: 1400px; margin: 0 auto;}
.swiper{overflow: hidden; position: relative;}
.swiper-slide img{width: 100%; display: block;}

/* 头部 */
.top{position: fixed; top: 0; z-index: 100; width: 100%; background: #fff;}

.top1 .w{height: 100px; display: flex; justify-content: space-between; align-items: center;}
.top1 .w .fl{display: flex; align-items: center;}
.top1 .w .fl p{font-size: 30px; margin-left: 20px;}
.top1 .w .fl dl{margin-left: 20px;}
.top1 .w .fl dl dt{font-size: 20px;}
.top1 .w .fl dl dd{font-size: 14px; padding-left: 10px;}
.top1 .w .fr li{font-size: 28px; margin: 5px 0;}
.top1 .w .fr li img{margin-right: 5px;}
.navbar-toggle{border: 1px solid rgba(0,0,0,0.5); margin-right: 0;}
.navbar-toggle span{background: rgba(0,0,0,0.8);}

.top2{background: var(--maincolor); color: #fff;}
.top2 .w>ul{height: 60px; line-height: 60px; display: flex;}
.top2 .w>ul>li{flex-grow: 1; text-align: center; position: relative;}
.top2 .w>ul>li:before{content: ""; width: 0px; height: 18px; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; background: rgba(255,255,255,0.8);}
.top2 .w>ul>li:nth-last-of-type(1):before{background: none;}
.top2 .w>ul>li>a{display: block; font-size: 18px;}
.top2 .w>ul>li ul{position: absolute; top: 60px; left: 0; right: 0; background: #fff; display: none; color: #333; line-height: 40px; font-size: 16px; padding: 10px 0;}
.top2 .w>ul>li ul li{transition: 0.5s;}
.top2 .w>ul>li ul li a{display: block;}
.top2 .w>ul>li ul li:hover{background: var(--maincolor); color: #fff;}

/* 首页 */
.index_tit{display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.index_tit dt{font-weight: normal;}
.index_tit dt span{font-size: 28px; border-bottom: 1px solid var(--maincolor); padding-bottom: 5px; color: var(--maincolor);}
.index_tit dt small{font-size: 16px; margin-left: 15px;}
.index_tit dd a{background: #fff; border: 1px solid #666; font-size: 12px; padding: 2px 5px;}

.index_tit2{background: #fff; display: flex; flex-wrap: wrap; margin-bottom: 15px;}
.index_tit2 dt{text-align: center; color: #fff; background: var(--maincolor); line-height: 40px; border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; padding: 0 20px;}
.index_tit2 dt a{display: block;}

.box1{margin: 50px 0;}
.box1 .bod{display: flex; flex-wrap: wrap; justify-content: space-between;}
.box1 .bod .item{width: 23.5%; background: #fff; margin-bottom: 2%; border: 1px solid #ddd;}
.box1 .bod .item .img{padding-bottom: 60%; position: relative; overflow: hidden;}
.box1 .bod .item .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.box1 .bod .item .img img:hover{transform: scale(1.2);}
.box1 .bod .item p{height: 46px; line-height: 46px; text-align: center; font-size: 18px;}
.box1 .bod .item span{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; margin: 0 15px 15px 15px; color: #666;}

.box2{background: #fff; padding: 50px 0;}
.box2 .bod{display: flex; justify-content: space-between;}
.box2 .bod .fl{width: 48%;}
.box2 .bod .fl video{width: 100%;}
.box2 .bod .fr{width: 48%;}
.box2 .bod .fr p{line-height: 2;}
.box2 .bod2{display: flex; justify-content: space-around; margin: 30px 0; text-align: center;}
.box2 .bod2 dl dt{font-size: 36px; color: var(--maincolor);}
.box2 .bod2 dl dd{font-size: 20px;}
.box2 .bod3{display: flex; justify-content: space-between;}
.box2 .bod3 dl{width: 23.5%;}
.box2 .bod3 dl dt{padding-bottom: 70%; position: relative; overflow: hidden;}
.box2 .bod3 dl dt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.box2 .bod3 dl dt img:hover{transform: scale(1.2);}

.box3{margin: 50px 0;}
.box3 .w{display: flex; align-items: center;}
.box3 .w .swiper{flex-grow: 1; margin: 0 20px;}
.box3 .w .swiper .img{padding-bottom: 70%; position: relative; overflow: hidden;}
.box3 .w .swiper .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.box3 .w .swiper .img img:hover{transform: scale(1.2);}
.box3 .w .swiper p{height: 50px; line-height: 50px; padding: 0 10px; background: #e0e0e0;}
.box3 .w .swiper .swiper-slide:hover p{background: var(--maincolor); color: #fff;}
.box3 .w .swiper-button-prev,.box3 .w .swiper-button-next{width: 28px; height: 100px; flex-shrink: 0; position: static; background: #737373; margin: 0; opacity: 1;}
.box3 .w .swiper-button-prev:after,.box3 .w .swiper-button-next:after{color: #fff; font-size: 20px;}

.box4{background: #fff; padding: 50px 0;}
.box4 .bod{display: flex; justify-content: space-between;}
.box4 .bod .fl{width: 35%;}
.box4 .bod .fl .item .img{position: relative; padding-bottom: 60%; overflow: hidden;}
.box4 .bod .fl .item .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.box4 .bod .fl .item .img img:hover{transform: scale(1.2);}
.box4 .bod .fl .item .dls{margin-top: 15px; display: flex; align-items: center;}
.box4 .bod .fl .item .dls .dl1{flex-grow: 1;}
.box4 .bod .fl .item .dls .dl1 dd{font-size: 14px; color: #666; margin-top: 10px;}
.box4 .bod .fl .item .dls .dl2{background: #7c7c7c; color: #fff; padding: 5px 10px; text-align: center; margin-left: 15px; font-size: 12px;}
.box4 .bod .fl .item .dls .dl2 dt{font-size: 28px; font-weight: normal;}
.box4 .bod .fr{width: 30%;}
.box4 .bod .fr dl{border-bottom: 1px solid #e4e4e4; padding-bottom: 30px; margin-bottom: 30px;}
.box4 .bod .fr dl:nth-last-of-type(1){margin-bottom: 0;}
.box4 .bod .fr dl dt{font-weight: normal; margin-bottom: 10px;}
.box4 .bod .fr dl dd{line-height: 2; font-size: 12px; color: #666}

.box5{margin: 50px 0;}
.box5 .bod{display: flex; justify-content: space-between; flex-wrap: wrap;}
.box5 .bod .item{width: 23.5%; margin-bottom: 2%;}
.box5 .bod .item .img{padding-bottom: 60%; position: relative; overflow: hidden;}
.box5 .bod .item .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.box5 .bod .item .img img:hover{transform: scale(1.2);}
.box5 .bod .item p{margin: 10px 0 5px; font-size: 18px;}
.box5 .bod .item span{color: #666; font-size: 12px;}

.box6{background: #fff; padding: 50px 0;}
.box6 .bod{display: flex; align-items: center;}
.box6 .bod .swiper{flex-grow: 1; margin: 0 20px;}
.box6 .bod .swiper .img{padding-bottom: 60%; position: relative; overflow: hidden;}
.box6 .bod .swiper .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.box6 .bod .swiper .img img:hover{transform: scale(1.2);}
.box6 .bod .swiper p{height: 50px; line-height: 50px; padding: 0 10px; background: #e0e0e0;}
.box6 .bod .swiper .swiper-slide:hover p{background: var(--maincolor); color: #fff;}
.box6 .bod .swiper-button-prev,.box6 .bod .swiper-button-next{width: 50px; height: 50px; flex-shrink: 0; position: static;  margin: 0; opacity: 1;}
.box6 .bod .swiper-button-prev:after,.box6 .bod .swiper-button-next:after{color: #fff; font-size: 20px;}

.bottom1{background: #252525; padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.6);}
.bottom1 .w{display: flex; justify-content: space-between;}
.bottom1 .w .fl{display: flex;}
.bottom1 .w .fl,.bottom1 .w .ce{white-space: nowrap;}
.bottom1 .w dl dt{font-size: 16px; margin-bottom: 15px; color: rgba(255,255,255,0.8);}
.bottom1 .w dl dd{margin-bottom: 10px;}
.bottom1 .w .fl .dl2{margin-left: 100px;}
.bottom1 .w .fl .dl2 dd{display: flex; flex-wrap: wrap; width: 200px;}
.bottom1 .w .fl .dl2 dd a{width: 50%; margin-bottom: 10px;}
.bottom1 .w .ce ul{display: flex;}
.bottom1 .w .ce ul li{margin: 10px 10px 0 0;}
.bottom1 .w .ce ul li a{font-size: 12px; margin-left: 5px;}
.bottom1 .w .fr input{width: 380px; height: 30px; border: none; display: block; margin-bottom: 10px; padding-left: 10px; color: #333;}
.bottom1 .w .fr textarea{padding: 5px 10px; width: 380px; color: #333;}
.bottom1 .w .fr button{border: none; background: var(--maincolor); color: #fff; display: block; width: 100px; height: 30px;}

.bottom2{background: #252525; color: rgba(255,255,255,0.6); padding: 15px 0; text-align: center; font-size: 12px; line-height: 2;}
.bottom2 p a{margin-right: 10px;}

.bottom3{display: none;}

/* 产品列表 */
.position{background: #fff; padding: 15px 0; margin-bottom: 30px; border-bottom: 1px solid #ddd;}
.position .w{text-align: right; color: #999;}

.ny{margin-bottom: 50px;}
.ny .w{display: flex; justify-content: space-between; flex-wrap: wrap;}

.left{width: 22%;}
.left .tit{background: var(--maincolor); color: #fff; padding: 20px; margin-bottom: 2px;}
.left .tit dt{font-size: 20px;}
.left .tit dd{font-size: 12px; text-transform: uppercase;}
.right{width: 75%;}

.left1 ul li{background: #fff; margin-bottom: 2px; font-size: 18px;}
.left1 ul li:hover,.left1 ul li.active{background: var(--maincolor); color: #fff;}
.left1 ul li a{padding: 10px 20px; display: block;}

.left2{background: #fff;}
.left2 .ewm{margin: 20px; border-bottom: 1px solid #ddd; text-align: center;}
.left2 .ewm img{max-width: 100%;}
.left2 .ewm dd{font-size: 26px; margin-top: 10px;}
.left2 ul{padding: 0 20px 20px 20px; font-size: 18px; line-height: 2;}

.productlist1 .bod{display: flex; justify-content: space-between; flex-wrap: wrap;}
.productlist1 .bod dl{width: 32%; margin-bottom: 2%;}
.productlist1 .bod dl dt{padding-bottom: 70%; position: relative; overflow: hidden;}
.productlist1 .bod dl dt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.productlist1 .bod dl dt img:hover{transform: scale(1.2);}
.productlist1 .bod dl dd{text-align: center; margin-top: 10px; font-size: 18px;}
.productlist1 .bod dl p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; margin: 10px; text-align: center;}
.pagination{display: flex; justify-content: center; flex-wrap: wrap;}

.product1{margin: 0 90px;}
.product1 h1{text-align: center; margin-bottom: 30px; color: var(--maincolor);}
.swipers{background: #fff; padding-bottom: 20px;}
.swiper4{margin-bottom: 15px;}
.swiper4 .spbj{padding-bottom: 70%; position: relative;}
.swiper4 .spbj iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.swiper4bj{position: relative;}
.swiper-button-prev4,.swiper-button-next4{width: 70px; height: 100px; background: #999; opacity: 1; position: absolute; top: 0; bottom: 0; margin: auto;}
.swiper-button-prev4:after,.swiper-button-next4:after{color: #fff;}
.swiper-button-prev4{left: -80px;}
.swiper-button-next4{right: -80px;}

.swiper5bj{display: flex; align-items: center;}
.swiper5{flex-grow: 1; margin: 0 10px;}
.swiper5 .swiper-slide-thumb-active{border: 4px solid var(--maincolor);}
.swiper-button-prev5,.swiper-button-next5{flex-shrink: 0; position: static; margin: 0; opacity: 1;}
.swiper-button-prev5:after,.swiper-button-next5:after{color: #999; font-size: 25px;}

.product2 .tit{background: #fff; margin: 30px 0 20px; display: flex; height: 50px; line-height: 50px;}
.product2 .tit li{padding: 0 20px; cursor: pointer;}
.product2 .tit li.ac{background: var(--maincolor); color: #fff;}
.product2 .bods .bod{display: none;}
.product2 .bods .bod img{max-width: 100%;}
.product2 .bods .bod:nth-of-type(1){display: block;}

.case1 .w{display: flex;}
.case1{padding: 0 100px;}
.case1 h1{text-align: center; margin-bottom: 30px; color: var(--maincolor);}
.case1 .swiper-slide video{width: 100%;}

.case2{margin-top: 70px;}
.case2 h3{background: #fff; padding: 10px 20px; font-size: 26px;}
.case2 ul{margin: 20px 0;}
.case2 ul li{margin: 20px 0; font-size: 20px;}
.case2 p{background: var(--maincolor); color: #fff; padding: 10px 20px; font-size: 20px;}

.case3 ul li{padding-bottom: 70%; position: relative; margin-top: 10px;;}
.case3 ul li img{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.fanye{display: flex; justify-content: center; flex-wrap: wrap; margin-top: 20px;}
.fanye li{margin: 0 10px; color: var(--maincolor);}
.fanye li a{color: #666;}

.newslist1 .bod .item>a{display: flex; background: #fff; margin-bottom: 30px; border: 1px solid #e0e0e0; padding: 10px 20px 10px 10px; align-items: center;}
.newslist1 .bod .item .fl{width: 240px; flex-shrink: 0; margin-right: 20px;}
.newslist1 .bod .item .fl .img{padding-bottom: 80%; position: relative; overflow: hidden; border: 1px solid #e0e0e0;}
.newslist1 .bod .item .fl .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.newslist1 .bod .item .fl .img img:hover{transform: scale(1.2);}
.newslist1 .bod .item .fr{flex-grow: 1;}
.newslist1 .bod .item .fr h3{display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #cbcbcb; font-size: 18px;}
.newslist1 .bod .item .fr h3 span{font-size: 12px; color: #666;}
.newslist1 .bod .item .fr p{margin: 15px 0; line-height: 2; color: #666;}
.newslist1 .bod .item .fr .more{display: block; width: 130px; height: 36px; line-height: 34px; text-align: center; border: 1px solid #cbcbcb; font-size: 12px; color: #666;}

.news1 .tit{font-size: 20px; font-weight: bold; margin: 20px 0;}
.news1 .xx{font-size: 12px; color: #999; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px dashed #d2d2d2;}
.news1 .xx span{margin-right: 20px;}
.news1 .bod *{background: none !important;}
.news1 .bod img{max-width: 100%;}

.sonnav{display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 30px;}
.sonnav li{background: #fff; margin: 5px;}
.sonnav li:hover{background: var(--maincolor);}
.sonnav li a{padding: 15px 30px; display: block; font-size: 18px;}

.aboutindex2{margin: 30px 0;}
.aboutindex2 .w{display: flex; align-items: center;}
.aboutindex2 .w .swiper{flex-grow: 1; margin: 0 20px;}
.aboutindex2 .w .swiper .img{padding-bottom: 70%; position: relative; overflow: hidden;}
.aboutindex2 .w .swiper .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s;}
.aboutindex2 .w .swiper .img img:hover{transform: scale(1.2);}
.aboutindex2 .w .swiper .tit{margin: 10px 0; font-size: 24px; text-align: center;}
.aboutindex2 .w .swiper span{font-size: 18px;}

.aboutindex2 .w .swiper-button-prev,.aboutindex2 .w .swiper-button-next{width: 28px; height: 100px; flex-shrink: 0; position: static; background: #737373; margin: 0; opacity: 1;}
.aboutindex2 .w .swiper-button-prev:after,.aboutindex2 .w .swiper-button-next:after{color: #fff; font-size: 20px;}

.aboutindex3{margin: 50px 0;}
.aboutindex3 .bod{display: flex; flex-wrap: wrap; justify-content: space-between;}
.aboutindex3 .bod dl{width: 18%; margin-bottom: 18px;}
.aboutindex3 .bod dl dt{padding-bottom: 80%; position: relative;}
.aboutindex3 .bod dl dt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.aboutindex3 .bod dl dd{text-align: center; margin-top: 18px;}

.aboutindex4{margin: 50px 0;}
.aboutindex4 .bod{display: flex; flex-wrap: wrap; justify-content: space-between;}
.aboutindex4 .bod dl{width: 15%; margin-bottom: 10px;}
.aboutindex4 .bod dl dt{padding-bottom: 50%; position: relative;}
.aboutindex4 .bod dl dt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.about1{padding: 20px; background: #fff;}
.about1 img{max-width: 100%; height: auto;}

.contact1{margin-bottom: 30px;}
.contact1 .w{display: flex; justify-content: space-between; flex-wrap: wrap;}
.contact1 .w .fl{width: 45%;}
.contact1 .w .fl h3{font-size: 24px; color: var(--maincolor); margin-bottom: 20px;}
.contact1 .w .fl p{margin-bottom: 10px; font-size: 18px;}
.contact1 .w .fl iframe{width: 100%; height: 300px; border: none;}

.m_phone{display: none;}

/*左侧工具条*/
#toolbar {
    position: fixed;
    z-index: 9999;
    right: 17px;
    top: 25%;
}
#toolbar li .icon-font{text-align: center;}
#toolbar .online-one li {
    margin-bottom: 3px;
    font-size: 0;
    width: 70px;
    height: 70px;
    right: 0;
    position: relative;
}

#toolbar .online-one li:hover a {
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

#toolbar .online-one li a {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background: #00c184;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-size: 0;
    border-radius: 4px;
    padding: 10px 0;
    overflow: hidden;
}

#toolbar .online-one li .icon-font {
    display: block;
    height: 28px;
    width: 100%;
}

#toolbar .online-one li .icon-font:after {
    background-image: url(../images/kf.png);
}

#toolbar .online-one li .icon-qq:after {
    background-position: -30px -240px;
}

#toolbar .online-one li .icon-phone:after {
    background-position: -30px -208px;
}

#toolbar .online-one li .icon-message:after {
    background-position: -30px -170px;
}

#toolbar .online-one li .icon-ewm:after {
    background-position: -30px -138px;
}

#toolbar .online-one li .icon-top:after {
    background-image: url(../images/icon_spirit.png);
    background-position: -30px -60px;
}

#toolbar .online-one li .icon-wangwang:after {
    background-image: url(../images/icon_spirit.png);
    background-position: -30px 0;
}

#toolbar .online-one li .wz {
    font-size: 12px;
    color: #fff;
    text-align: center;
    display: block;
    margin-top: 5px;
    height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#toolbar .online-one li.phone {
    border-radius: 4px;
    padding: 10px 0;
}

#toolbar .online-one li.ewm {
    background: #00c184;
    border-radius: 4px;
    padding: 10px 0;
}

#toolbar .online-one li.phone .tel-phone {
    position: absolute;
    z-index: 1;
    padding: 5px;
    right: calc(100% + 5px);
    top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s;
    transition: all .7s;
    -webkit-box-shadow: 0 4px 20px 4px rgb(0 20 60 / 20%);
    box-shadow: 0 4px 20px 4px rgb(0 20 60 / 20%);
    color: #fff;
    font-size: 18px;
}

#toolbar .online-one li.ewm .ewm-box {
    position: absolute;
    z-index: 1;
    padding: 5px;
    background: #fff;
    width: 110px;
    right: calc(100% + 5px);
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s;
    transition: all .7s;
    -webkit-box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
    box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
}

#toolbar .online-one li.ewm .ewm-box img {
    max-width: 100%;
}

#toolbar .online-one li.ewm .ewm-box:after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 20px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: 5px;
    cursor: pointer;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #fff;
    border-right: none;
}

#toolbar .online-one li.ewm:hover .ewm-box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#toolbar .online-one li.phone:hover .tel-phone {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#toolbar .online-two li {
    margin-bottom: 3px;
    font-size: 0;
    width: 57px;
    height: 57px;
    right: 0;
    position: relative;
}

#toolbar .online-two li a {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 0;
    width: 57px;
    height: 57px;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    white-space: nowrap;
    font-size: 0;
    background: #d9d9d9;
}

#toolbar .online-two li .icon-font {
    display: inline-block;
    vertical-align: middle;
    width: 57px;
    height: 57px;
}

#toolbar .online-two li .icon-qq:after {
    background-position: 0 -150px;
}

#toolbar .online-two li .icon-phone:after {
    background-position: 0 -90px;
}

#toolbar .online-two li .icon-ewm:after {
    background-position: 0 -30px;
}

#toolbar .online-two li .icon-message:after {
    background-position: 0 -120px;
}

#toolbar .online-two li .icon-top:after {
    background-position: 0 -60px;
}

#toolbar .online-two li .icon-wangwang:after {
    background-position: 0 0;
}

#toolbar .online-two li .wz {
    display: inline-block;
    line-height: 57px;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    padding-left: 10px;
}

#toolbar .online-two li.ewm .ewm-box {
    position: absolute;
    z-index: 1;
    padding: 5px;
    background: #2e4346;
    width: 110px;
    right: 120%;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s;
    transition: all .7s;
    -webkit-box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
    box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
}

#toolbar .online-two li.ewm .ewm-box p {
    margin-bottom: 0;
}

#toolbar .online-two li.ewm .ewm-box img {
    max-width: 100%;
}

#toolbar .online-two li.ewm .ewm-box:after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 20px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: 5px;
    cursor: pointer;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #2e4346;
    border-right: none;
}

#toolbar .online-two li.ewm:hover .icon {
    background-position: -57px -180px;
}

#toolbar .online-two li.ewm:hover .ewm-box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#toolbar .online-two li.backtop {
    cursor: pointer;
}

#toolbar .online-two li.backtop .iconfont {
    color: #fff;
    background-color: #2e4346;
}

#toolbar .online-two li:hover a {
    width: 200px;
}

#toolbar .online-two li:hover .icon-qq:after {
    background-position: -30px -150px;
}

#toolbar .online-two li:hover .icon-phone:after {
    background-position: -30px -90px;
}

#toolbar .online-two li:hover .icon-ewm:after {
    background-position: -30px -30px;
}

#toolbar .online-two li:hover .icon-message:after {
    background-position: -30px -120px;
}

#toolbar .online-two li:hover .icon-wangwang:after {
    background-position: -30px 0;
}

#toolbar .online-two li:hover .icon-top:after {
    background-position: -30px -60px;
}

#toolbar .online-three {
    width: 115px;
}

#toolbar .online-three .title {
    background: #3aa3e6;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    position: relative;
}

#toolbar .online-three .title span {
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background-image: url(../images/kf.png);
    background-repeat: no-repeat;
    background-position: -31px -28px;
    opacity: 1;
    text-shadow: none;
}

#toolbar .online-three .qq-list {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}

#toolbar .online-three .qq-list li {
    text-align: center;
    line-height: 32px;
}

#toolbar .online-three .qq-list li .icon-font:after {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../images/kf.png);
    background-repeat: no-repeat;
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
}

#toolbar .online-three .qq-list li .wz {
    color: #333;
    font-size: 12px;
    margin-left: 10px;
    display: inline-block;
}

#toolbar .online-three .qq-list .icon-qq:after {
    background-position: 0 -114px;
}

#toolbar .online-three .qq-list .icon-message:after {
    background-position: -30px -87px;
}

#toolbar .online-three .qq-list .icon-wangwang:after {
    background-position: -30px -116px;
}

#toolbar .online-three .ewm {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
}

#toolbar .online-three .ewm span {
    display: inline-block;
    font-size: 12px;
    color: #333;
    margin-bottom: 12px;
}

#toolbar .online-three .ewm img {
    width: 100%;
    max-width: 84px;
}

#toolbar .online-three .service-phone {
    background: #fff;
    padding: 10px 0;
    text-align: center;
}

#toolbar .online-three .service-phone span {
    font-size: 12px;
    color: #333;
}

#toolbar .online-three .service-phone span.hotline {
    color: #777777;
    font-size: 12px;
    line-height: 32px;
}

#toolbar .online-four li {
    margin-bottom: 3px;
    font-size: 0;
    width: 50px;
    height: 50px;
    right: 0;
    position: relative;
}

#toolbar .online-four li a {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    white-space: nowrap;
    font-size: 0;
    border-radius: 50%;
    overflow: hidden;
}

#toolbar .online-four li .icon-font {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
}

#toolbar .online-four li .icon-font:after {
    background-image: url(../images/kf.png);
}

#toolbar .online-four li .icon-qq:after {
    background-position: 0 -87px;
}

#toolbar .online-four li .icon-phone:after {
    background-position: 0 -57px;
}

#toolbar .online-four li .icon-ewm:after {
    background-position: 0 -21px;
}

#toolbar .online-four li .icon-message:after {
    background-position: -30px -55px;
}

#toolbar .online-four li .icon-top:after {
    background-position: 0 -0px;
}

#toolbar .online-four li .icon-wangwang:after {
    background-position: 0 0;
}

#toolbar .online-four li .wz {
    display: inline-block;
    line-height: 50px;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    padding-left: 10px;
}

#toolbar .online-four li.ewm {
    border-radius: 50%;
    background: #fff;
}

#toolbar .online-four li.ewm .ewm-box {
    position: absolute;
    z-index: 1;
    padding: 5px;
    background: #fff;
    width: 110px;
    right: calc(100% + 5px);
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s;
    transition: all .7s;
    -webkit-box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
    box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
}

#toolbar .online-four li.phone {
    border-radius: 50%;
}

#toolbar .online-four li.phone .tel-phone {
    position: absolute;
    z-index: 1;
    padding: 5px;
    background: rgb(59,57,57);
    width: 110px;
    right: calc(100% + 5px);
    top: 0;
    opacity: 0;
    font-size: 14px;
    color: #fff;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s;
    transition: all .7s;
    -webkit-box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
    box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.2);
}

#toolbar .online-four li.phone:hover .tel-phone {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#toolbar .online-four li.ewm .ewm-box img {
    max-width: 100%;
}

#toolbar .online-four li.ewm .ewm-box:after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 20px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: 5px;
    cursor: pointer;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #fff;
    border-right: none;
}

#toolbar .online-four li.ewm:hover .ewm-box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#toolbar .online-four li.backtop .icon-font {
    height: 20px;
}

#toolbar .online-four li.backtop .icon-font:after {
    height: 20px;
    left: calc(50% - 17px);
    top: calc(50% - 2px);
}

#toolbar .online-four li.backtop .wz {
    display: block;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    color: #bfbfbf;
    padding-left: 0;
}

@media(max-width: 768px){
	body{padding-top: 80px; padding-bottom: 40px;}
	.w{padding: 0 10px;}
	.top1 .w{height: 80px; border-bottom: 1px solid #ddd;}
	.top1 .w .fl img{width: 70px;}
    .top1 .w .fl p{display: none;}
	.top1 .w .fl dl{margin-left: 5px;}
	.top1 .w .fl dl dt{font-size: 14px;}
    .top1 .w .fl dl dd{font-size: 12px; padding-left: 6px;}
	.top1 .w .fr{display: none;}
	.navbar-toggle{display: block; margin-left: auto;}
	.top2{position: fixed; top: 80px; left: 0; right: 0; display: none;}
	.top2 .w>ul{height: auto; display: block;}
	.top2 .w>ul li{border-bottom: 1px solid rgba(255,255,255,0.2);}
	.top2 .w>ul li:before{display: none;}
	.box1 .bod .item{width: 49%;}
	.box2 .bod{flex-wrap: wrap;}
	.box2 .bod .fl{width: 100%;}
	.box2 .bod .fr{width: 100%; margin-top: 20px;}
	.box2 .bod2 dl dt{font-size: 20px;}
	.box2 .bod2 dl dd{font-size: 14px;}
	.box2 .bod3{flex-wrap: wrap;}
	.box2 .bod3 dl{width: 49%; margin-bottom: 10px;}
	.box4 .bod{flex-wrap: wrap;}
	.box4 .bod .fl{width: 100%; margin-bottom: 30px;}
	.box4 .bod .fr{width: 100%;}
	.box4 .bod .fr dl{padding-bottom: 15px; margin-bottom: 15px;}
	.box5 .bod .item{width: 49%;}
	.box6 .bod .swiper-button-prev, .box6 .bod .swiper-button-next{width: 20px;}
	.bottom1 .w{flex-wrap: wrap;}
	.bottom1 .w .fl{width: 100%;}
	.bottom1 .w dt{display: none;}
	.bottom1 .w .fl dl{display: flex; flex-wrap: wrap;}
	.bottom1 .w .fl dd{width: 25%; text-align: center;}
	.bottom1 .w .fl .dl2{display: none;}
	.bottom1 .w .ce{width: 100%; text-align: center;}
	.bottom1 .w .fr{display: none;}
	.bottom1 .w .ce ul{justify-content: center;}
	.bottom1,.bottom2{display: none;}
	.left{width: 100%;}
	.left .tit{display: none;}
	.left1 ul{display: flex; flex-wrap: wrap; background: #fff; margin-bottom: 20px;}
	.left1 ul li{width: 33.3333%; text-align: center;}
	.left1 ul li a{padding-left: 0; padding-right: 0;}
	.left2{display: none;}
	.right{width: 100%;}
	.productlist1 .bod dl{width: 49%;}
	.product1{margin: 0;}
	.swiper-button-prev4,.swiper-button-next4{display: none;}
	.case1{padding: 0;}
	.left .case3 .tit{display: block;}
	.case3{display: none;}
	.newslist1 .bod .item .fl{display: none;}
	.aboutindex3 .bod dl{width: 32%;}
	.aboutindex4 .bod dl{width: 32%;}
	.contact1 .w .fl{width: 100%;}
	#toolbar{display: none;}
	.bottom3{display: block; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(51,51,51,0.9); color: #fff; padding: 18px 0;}
	.bottom3 ul{display: flex;}
	.bottom3 ul li{text-align: center; flex: 1; font-size: 16px}
	.bottom3 ul li img{margin-right: 10px;}
 .m_phone{display: flex; position: fixed; right: 18px; bottom: 30%; width: 50px; height: 50px; justify-content: center; align-items: center; border-radius: 100%; z-index: 100;}
}