*{padding: 0; margin: 0}
body,html {margin: 0px; padding: 0px; -webkit-text-size-adjust: none}
body {margin: 0 auto;font-size: 12px; line-height: 1.6;}
@font-face{
    font-family: "fptm";
    src: url('fonts/FuturaPT-Medium.woff');
}
@font-face{
    font-family: "hosb";
    src: url('fonts/HarmonyOS_Sans_SC_Black.woff');
}
@font-face{
    font-family: "hosbo";
    src: url('fonts/HarmonyOS_Sans_SC_Bold.woff');
}
@font-face{
    font-family: "hosm";
    src: url('fonts/HarmonyOSMedium.woff');
}
@font-face{
    font-family: "hosr";
    src: url('fonts/HarmonyOS_Sans_SC_Regular.woff2');
}
.fl{display:inline;float:left}
.fr{display:inline;float:right}
.clearfix:after{display:block;clear:both;width:100%;height:0px;line-height:0px;font-size:0px;margin:0;padding:0; content: ""}
a{text-decoration: none;}
ul,li{list-style: none;}
.fw600{font-weight: 600}
.fs12{font-size: 12px}
.fs13{font-size: 13px}
.fs14{font-size: 14px}
.fs15{font-size: 15px}
.fs16{font-size: 16px!important}
.fs20{font-size: 20px!important}

.fl{float: left;}
.fr{float: right;}
.pdl30{padding-left: 30px}
.pdl20{padding-left: 20px}

.c499{color: #499a97}
.red{color: #cd4619}
.cd60{color: #d60d17!important}
.textc{text-align: center;}
.textl{text-align: left!important;}
.textr{text-align: right!important;}
.m{display: none;}
.pc{display: block;}
.dn{display: none;}
input:focus { outline: none; } 



.container {width: 1150px;margin: 0 auto;padding: 0;}

.header{font-size: 14px;background: rgba(0, 0, 0, .4); position: fixed; top: 0; left: 0; z-index: 999; width: 100%}
.header-box{width: 100%;height: 70px;line-height: 70px;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative; justify-content: space-between;}
.header-box .i-logo{width: 180px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-right: 125px;cursor: pointer;}
.header-box .i-logo img{width: 100%; display: block;}
.header-box .menus{display: -webkit-box;display: -ms-flexbox;display: flex;color: #000;font-size: 14px; justify-content: space-between;}
.header-box .menus .menus-item{margin-right: 5rem;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-weight: 300;position: relative;}
.header-box .menus .menus-item a{color: #FFF}

.header-box .menus .menus-item:hover a{color: #00a898}
.header-box .menus .menus-item a.active{color: #00a898}
.header-box .menus .menus-item .menus-children{display: none;position: absolute;top: 68px;left: -30px;background: rgba(247, 247, 247, .8);z-index: 999;width: 140px;height: auto;box-shadow: 0 4px 15px rgba(0, 0, 0, .15);padding: 20px 0;}
.header-box .menus .menus-item .menus-children.special{width: 270px}
.header-box .menus .menus-item:hover .menus-children{display: block;}
.header-box .menus .menus-item:hover svg{transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.header-box .menus .menus-item .menus-children .child-nav{display: block; color: #000;position: relative;height: 32px;line-height: 32px;padding: 0 30px;}
.header-box .menus .menus-item .menus-children .child-nav:hover{color: #00a898}

.header-box .lang{color: #999;}
.header-box .lang .link{color: #999; padding: 0 5px; display: inline-block;}


.ibanner{width: 100%; font-size: 0}
.ibanner img{width: 100%}
.ibanner video{width: 100%}
.ibanner .swiper-button-next, .ibanner .swiper-container-rtl .swiper-button-prev{background-image: url(../../images/zy/right.png);background-size: initial; top:60%; right: 20px}
.ibanner .swiper-button-prev, .ibanner .swiper-container-rtl .swiper-button-next{background-image: url(../../images/zy/left.png);background-size: initial; top:60%; left: 20px}
.ibanner .swiper-pagination-bullet{width: 12px; height: 12px}
.ibanner .swiper-pagination-bullet-active{background-color: #00a898}

.i-about{background-color: #f0f6fd; padding: 4rem 0 2rem 0}
.i-about .i-ab-tit{text-align: center;color: rgba(0, 0, 0, .9);margin-bottom: 20px;font-size: 34px;cursor: pointer;font-weight: 600;}
.i-about .i-ab-box{display: flex; justify-content: space-between; padding: 2rem;}
.i-about .i-ab-box .txt{width: 57%}
.i-about .i-ab-box .txt p{font-size: 13px; color: #898989}
.i-about .i-ab-box .txt p.one{line-height: 24px}
.i-about .i-ab-box .txt .more{padding-top: 3rem}
.i-about .i-ab-box .txt .more .more-link{font-size: 16px;font-family: 'hosr'; color: #898989; padding: 15px 0; position: relative; display: inline-block; width: 200px; border-top: 1px solid #00ebbe;}
.i-about .i-ab-box .txt .more .more-link:before{width: 40px; height: 2px; background-color: #00ebbe; content: ""; position: absolute; top: -2px; left: 0; -webkit-transition: all .5s;transition: all .5s;}
.i-about .i-ab-box .txt .more .more-link:hover:before{width: 100%}
.i-about .i-ab-box .txt .more .more-link svg{position: absolute; right: 5px; top: 10px}

.i-about .i-ab-box .zleft{position: relative; width: 38%}
.i-about .i-ab-box .zleft .zl-box{position: absolute; top: -70%; left: 0; width: 76%; background-color: rgba(0, 168, 152, .9); z-index: 997; padding: 20px 30px}
.i-about .i-ab-box .zleft .zl-box .zl-btop{padding-bottom: 10rem;}
.i-about .i-ab-box .zleft .zl-box .zl-btop .tit{font-size: 26px; color: #FFF;font-weight: 600;font-family: 'hosb'}
.i-about .i-ab-box .zleft .zl-box .zl-btop .name{font-size: 14px; color: #FFF}
.i-about .i-ab-box .zleft .zl-box .zl-btm{padding-bottom: 4rem}
.i-about .i-ab-box .zleft .zl-box .zl-btm .logen{color: #FFF; font-family: 'hosbo'; letter-spacing: 2px; font-size: 40px; line-height: 42px}
.i-about .i-ab-box .zleft .zl-box .zl-btm .zlog{color: #FFF; font-size: 16px; font-weight: 600; padding-top: 10px}

.i-about .i-ab-box .zleft .zli-box{position: absolute; top: -70%; left: 0; width: 76%; z-index: 997;}
.i-about .i-ab-box .zleft .zli-box .zl-btop{padding:20px 30px 44px 30px; background-color: rgba(0, 168, 152, .9);}
.i-about .i-ab-box .zleft .zli-box .zl-btop .tit{font-size: 26px; color: #FFF;font-weight: 600;font-family: 'hosb'}
.i-about .i-ab-box .zleft .zli-box .zl-btop .name{font-size: 14px; color: #FFF}
.i-about .i-ab-box .zleft .zli-box .zl-btm{padding:8rem 30px 4rem 30px; background-color: rgba(0, 168, 152, .9);}
.i-about .i-ab-box .zleft .zli-box .zl-btm .logen{color: #FFF; font-family: 'hosbo'; letter-spacing: 2px; font-size: 40px; line-height: 42px}
.i-about .i-ab-box .zleft .zli-box .zl-btm .zlog{color: #FFF; font-size: 16px; font-weight: 600; padding-top: 10px}


.i-products{padding: 5rem 0 6rem 0; background-color: #f4f4f4}
.ipro-list{display: flex; justify-content: space-between; font-family: 'hosr'}
.ipro-list .ipro-box{width: 22%; text-align: center;}
.ipro-list .ipro-box h3{font-size: 20px; color: #333; font-family: 'hosm'}
.ipro-list .ipro-box .subtit{font-size: 13px; color: #333; font-family: 'hosm'}
.ipro-list .ipro-box .specs{font-size: 12px; color: #898989}
.ipro-list .ipro-box .img{ padding:30px 0 40px 0; background-image: url(../../images/zy/i-pbg.png); background-position: center bottom; background-repeat: no-repeat;}
.ipro-list .ipro-box .img img{width: 100%}

.triangle{width: 0;height: 0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #FFF; margin-bottom: 15px}


.i-news{padding: 5rem 0; width: 100%}
.i-news-box{display: flex; justify-content: space-between;}
.i-news-box .i-news-tit{width: 25%; text-align: right;}
.i-news-box .i-news-tit h3{font-size: 26px; width: 180px; font-weight: 500; display: inline-block; text-align: left; font-family: 'hosb'}
.i-news-box .i-news-tit p{font-size: 14px; color: #00a898; display: inline-block; width: 180px; text-align: left;}
.i-news-box .i-news-txt{width: 70%; display: flex; justify-content: space-between;}
.i-news-box .i-news-txt li{border-top: 1px solid #00a898; width: calc(100% / 3);-webkit-transition: all .5s; transition: all .5s; position: relative;}
.i-news-box .i-news-txt li .links{width: 85%; display: inline-block; padding: 18px 0}
.i-news-box .i-news-txt li .thumb{position: relative; width: 100%; font-size: 0; overflow: hidden; margin: 15px 0;}
.i-news-box .i-news-txt li .img{width: 100%;height: auto;overflow: hidden;background: center center no-repeat;background-size: cover;-webkit-transition: all .5s;}
.i-news-box .i-news-txt li .img img{width: 100%;}
.i-news-box .i-news-txt li:hover .img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}
.i-news-box .i-news-txt li .txt h3{color: #333; font-size: 14px; font-family: 'hosbo'; margin-bottom: 15px; overflow: hidden; height: 45px; font-weight: 500}
.i-news-box .i-news-txt li .txt .desc{color: #898989; font-size: 12px; margin-bottom: 3rem; overflow: hidden; height: 40px}
.i-news-box .i-news-txt li .txt .time{color: #898989; font-size: 12px;}
.i-news-box .i-news-txt li:after{width: 0;-webkit-transition: all .8s; transition: all .8s; position: absolute; left: 0; top: -1px; height: 2px; content: ""; background-color: #333;}
.i-news-box .i-news-txt li:hover:after{width: 100%}


.i-zxun{width: 100%; position: relative; font-size: 0}
.i-zxun img{width: 100%}
.i-zxun .txt{position: absolute; width: 100%; height: 100%; top: 0; left: 0;display: flex; align-items: center;}
.i-zxun .txt .txt-box{text-align: center; width: 100%}
.i-zxun .txt .txt-box p.tit{font-size: 18px; color: #FFF; position: relative; margin-bottom: 40px}
.i-zxun .txt .txt-box p.tit:after{position: absolute; height: 1px; background-color: #FFF; width: 60px; left: 0; right: 0; bottom: -16px; content: ""; margin: 0 auto;}
.i-zxun .txt .txt-box .inputs{width: 50%; margin: 0 auto; display: flex; justify-content: space-between;}
.i-zxun .txt .txt-box .inputs input{background: inherit; border: 0; border-bottom: 1px solid #FFF; padding: 12px;outline-color: #FFF;}
.i-zxun .txt .txt-box .zxtxt{width: 50%; margin-top: 20px; outline:1px ;outline-color: #FFF; padding: 12px 0;background: inherit; border: 0; border: 1px solid #FFF;}
.i-zxun .txt .txt-box .subtim{padding: 5px 10px; color: #FFF; display: block; font-size: 14px; border: 1px solid #FFF; width: 100px; margin: 0 auto; margin-top: 20px; }
.i-zxun .txt .txt-box .subtim:hover{background-color: rgba(255, 255, 255, .5);}
input::placeholder {color: #FFF; text-align: center;}
textarea::placeholder {color: #FFF; text-align: center;}

.zbanner{width: 100%; font-size: 0}
.zbanner img{width: 100%}

.intro-con{padding: 4rem 0 0 0}
.intro-body{display: flex; justify-content: space-between;}
.intro-body .ableft{width: 50%}
.intro-body .ableft .tit{font-size: 28px; font-family: 'hosb'}
.intro-body .ableft .subtit{color: #00a898}
.intro-body .abright{width: 50%}
.intro-body .abright h3{color: #00a898; font-size: 20px; font-weight: 500; line-height: 24px; padding-bottom: 3rem;font-family: 'hosb'}
.intro-body .abright .desc{font-size: 13px; color: #898989}

.zidata{display: flex; justify-content: space-between; padding-top: 6rem}
.zidata .zid-left{width: 33%;}
.zidata .zid-left .zid-dbox{padding-bottom: 4rem}
.zidata .zid-left .zid-dbox .data{font-size: 46px; color: #00a898; font-weight: 600;  font-family: 'hosr'}
.zidata .zid-left .zid-dbox .name{color: #898989;font-size: 14px}
.zidata .zid-right{font-size: 0; width: 67%}
.zidata .zid-right img{width: 100%}

.zab-line{width: 100%; border-top: 1px solid #00a898; border-bottom: 1px solid #00a898; position: relative;}
.zab-line .zli-box{display: flex; justify-content: space-between;}
.zab-line .zli-left{width: 33%; padding: 1rem 0}
.zab-line .zli-left p{text-align: center; color: #00a898; font-size: 16px; font-weight: 600}
.zab-line .zli-right{background-color: #00a898;padding: 1rem 0; width: 67%}
.zab-line .zli-right .zlir-box{display: flex; justify-content: space-between;}
.zab-line .zli-right .zlir-box p{width: 50%;text-align: center; color: #FFF; font-size: 16px; font-weight: 600}
.zab-line .zli-right .zlir-box p:first-child{border-right: 1px solid #FFF;}
.zab-line .zli-rightbg{position: absolute; width: 50%; z-index: -1; right: 0; top: 0; background-color: #00a898; font-size: 16px;padding: 1rem 0;}


.z-install{}
.zin-box{display: flex; justify-content: space-between;}
.zin-box .left{width: 50%; border-right: 1px solid #ddd; padding: 2rem 0; display: flex; flex-wrap: wrap; align-items: center;}
.zin-box .left p{position: relative; font-size: 14px; color: #898989; padding-left: 15px;width: 100%}
.zin-box .left p:before{position: absolute; content: ""; width: 10px; height: 10px; background:#898989; left: 0; top: 6px; border-radius: 50%}
.zin-box .right{width: 30%; padding: 4rem 0 4rem 10%}
.zin-box .right img{width: 100%}


.wnxc-box{position: relative;}
.wnxc-box h3{font-size: 45px; color: #FFF}
.wnxc-box .subtit{font-size: 16px; color: #FFF; padding-top: 20px}
.wnxc-box .wnuan{position: absolute; right: 5%; bottom: -20px; font-size: 16px; color: #FFF; display: flex; align-items: center;}
.wnxc-box .wnuan span{height: 1px; background-color: #FFF; width: 60px; display: inline-block; margin-right: 5px}

.z-contact{padding: 4rem 0}
.z-cont-box{width: 76%; margin: 0 auto; border: 1px solid #ddd; display: flex;justify-content: space-between;}
.z-cont-box .zcb-list{width: 25%; text-align: center; font-size: 16px; padding: 3rem 0}
.z-cont-box .zcb-list p{padding-top: 15px; color: #666}


.nav-box{padding: 4rem 0 1rem 0; border-bottom: 1px solid #ddd;}
.znews-nav{display: flex; justify-content: space-between;}
.znews-nav .left{width: 50%}
.znews-nav .left h3{font-size: 30px}
.znews-nav .left .desc{color: #00a898}
.znews-nav .nav-wrapper{width: 50%; padding-top: 46px; text-align: right;}
.znews-nav .nav-wrapper .nav-item{font-size: 13px; color: #898989; display: inline-block; padding-left: 20px}
.znews-nav .nav-wrapper .nav-item.active{color: #00a898}

.z-ac-listbox {display: flex; justify-content: space-between; margin-bottom: 3rem; border-bottom: 1px solid #ddd; padding-bottom: 3rem}
.z-ac-listbox .thumb{position: relative; width: 38%; font-size: 0; overflow: hidden;}
.z-ac-listbox .thumb .img{width: 100%;height: auto;overflow: hidden;background: center center no-repeat;background-size: cover;-webkit-transition: all .5s;}
.z-ac-listbox .thumb .img img{width: 100%;}
.z-ac-listbox .thumb:hover .img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}

.z-ac-listbox .txt{width: 52%;}
.z-ac-listbox .txt h3{font-size: 22px; font-weight: 400; color: #898989;font-family: 'hosr'}
.z-ac-listbox .txt .subtit{font-size: 18px; padding-top: 2rem; color: #00a898;font-family: 'hosb'}
.z-ac-listbox .txt .desc{padding: 1rem 0 0 0}
.z-ac-listbox .txt .desc .con{font-size: 13px; color: #666; line-height: 24px}
.z-ac-listbox .txt .desc .btm{padding-top: 5rem; font-size: 0;overflow: hidden;}
.z-ac-listbox .txt .desc .btm img{width: 100%;-webkit-transition: all .5s;transition: all .5s;}
.z-ac-listbox .txt .desc .btm:hover img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}

.z-ac-listbox .txt .desc .more{padding-top: 3rem}
.z-ac-listbox .txt .desc .more .more-link{font-size: 14px; padding: 15px 0; color: #898989; position: relative; display: inline-block; width: 200px; border-top: 1px solid #00a898;}
.z-ac-listbox .txt .desc .more .more-link:before{width: 40px; height: 2px; background-color: #00a898; content: ""; position: absolute; top: -2px; left: 0; -webkit-transition: all .5s;transition: all .5s;}
.z-ac-listbox .txt .desc .more .more-link:hover:before{width: 100%}
.z-ac-listbox .txt .desc .more .more-link svg{position: absolute; right: 5px; top: 10px}


.znews-intro{width: 100%; background-color: #FFF; padding: 3rem 0 4rem 0;}
.znews-intro-box{display: flex; justify-content: center;color: #606060;}
.znews-intro-box .left{width: 30%;}
.znews-intro-box .time{font-size: 22px;}
.znews-intro-box .left .nav{font-size:14px;}

.znews-intro-box .right{color: #000; width: 60%;}
.znews-intro-box .right h2{font-weight: inherit; font-size: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.znews-intro-box .right .detail{font-size: 14px; padding: 2rem 0; color: #666;}
.znews-intro-box .right .detail p{padding: 15px 0; line-height: 1.7;}
.znews-intro-box .right .detail img{width: 100%;}
.znews-intro-box .right .detail p img{width: 100%;}
.tj-list{padding-top: 3rem; width: 85%;}
.tj-list h3{color: #272727; font-size: 18px;}
.tj-list p{font-size: 14px; color: #888; padding-bottom: 16px; border-bottom: 1px solid #ddd;}
.tj-list ul li{ width: 100%; }
.tj-list ul li a{display: flex; justify-content: space-between; padding-top: 25px;}
.tj-list ul li .left{width: 45%;}
.tj-list ul li .right{width: 50%;}
.tj-list ul li .left .thumb{position: relative; overflow: hidden;}
.tj-list ul li .left .thumb .thumb-box{position: relative; overflow: hidden;}

.tj-list ul li .left .img{width: 100%;height: auto;overflow: hidden;background: center center no-repeat; background-size: cover;-webkit-transition: all .5s;transition: all .5s;}
.tj-list ul li .left .img img{width: 100%;}
.tj-list ul li .left .thumb:hover .img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1);}

.tj-list ul li .right .txt{padding: 0;position: relative;-webkit-transition: all .5s;transition: all .5s;}
.tj-list ul li .right .time{font-size: 14px; color: #a0a0a0;padding: 5px 0 10px 0; margin-bottom: 10px; border: 0;}
.tj-list ul li .right h3{font-size: 16px; line-height: 26px; color: #000;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: .5s; -webkit-transition: .5s; position: relative;}
.tj-list ul li .right .time:after{content: "";position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background-color: #004d9c;}
.tj-list ul li .right .time-more{font-size: 12px; color: #888;-webkit-transition: all .5s; transition: all .5s;}

.goback{text-align: right;}
.goback a{display: inline-block; padding: 5px 20px; border: 1px solid #888; font-size: 14px; color: #888;-webkit-transition: all .5s;transition: all .5s;}
.goback a:hover{background-color: #004d9c; color: #FFF; border-color: #004d9c;}

.zproduct{padding: 4rem 0; }
.zproduct .container{width: 1050px;position: relative;};
.zp-tit{padding-bottom: 4rem}
.zp-tit .tit{font-size: 28px; font-weight: 500; font-family: 'hosb'}
.zp-tit .subtit{color: #00a898}

.zp-box{display: flex; justify-content: space-between; }
.zp-box .thumb{position: relative; width: 38%; font-size: 0; overflow: hidden;}
.zp-box .thumb .img{width: 100%;height: auto;overflow: hidden;background: center center no-repeat;background-size: cover;-webkit-transition: all .5s;}
.zp-box .thumb .img img{width: 100%;}
.zp-box .thumb:hover .img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}
.zp-box .thumb .thumb-box .ivideo-box{width: 100%}
.zp-box .thumb .thumb-box .ivideo-box .ivideo{width: 100%}

.zp-box .txt{width: 50%;}
.zp-box .txt h3{font-size: 24px; color: #333; line-height: 28px; font-family: 'hosbo'; font-weight: 500}
.zp-box .txt .subtit{font-size: 16px; color: #898989; padding: 10px 0 2rem 0; font-family: 'hosr'}
.zp-box .txt .desc{padding: 1rem 0 0 0}
.zp-box .txt .desc .con{font-size: 13px; color: #666; line-height: 24px}
.zp-box .txt .desc .btm{padding-top: 5rem; font-size: 0;overflow: hidden;}
.zp-box .txt .desc .btm img{width: 100%;-webkit-transition: all .5s;transition: all .5s;}
.zp-box .txt .desc .btm:hover img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}

.zp-box .txt .desc .more{padding-top: 3rem}
.zp-box .txt .desc .more .more-link{font-size: 14px;font-family: 'hosr'; padding: 15px 0; color: #898989; position: relative; display: inline-block; width: 200px; border-top: 1px solid #00a898;}
.zp-box .txt .desc .more .more-link:before{width: 40px; height: 2px; background-color: #00a898; content: ""; position: absolute; top: -2px; left: 0; -webkit-transition: all .5s;transition: all .5s;}
.zp-box .txt .desc .more .more-link:hover:before{width: 100%}
.zp-box .txt .desc .more .more-link svg{position: absolute; right: 5px; top: 10px}

.zproduct .swiper-button-next, .zproduct .swiper-container-rtl .swiper-button-prev{background-image: url(../../images/zy/right.png);background-size: initial; top:50%; right: -50px}
.zproduct .swiper-button-prev, .zproduct .swiper-container-rtl .swiper-button-next{background-image: url(../../images/zy/left.png);background-size: initial; top:50%; left: -50px}

.z-ab-btm{width: 100%; padding-top: 3rem;}
.z-ab-btm ul{display: flex; justify-content: left;}
.z-ab-btm ul li{width: calc(100% / 4); text-align: left; color: #00a898; font-size: 12px;}
.z-ab-btm ul li span{font-size: 40px; color: #00a898; font-family: 'hosr'}
.z-ab-btm ul li .desct{font-size: 12px; color: #898989}

.zpackage{padding: 3rem 0}
.zpa-box{}
.zpa-box .zpa-box01{display: flex; justify-content: space-between;}
.zpa-box .zpa-box01 .item{width: calc(100% / 4 - 1px); text-align: center; padding: 30px 0; border-left: 1px solid #ddd; position: relative; border-top: 1px solid #ddd;}
.zpa-box .zpa-box01 .item img{width: 55%}
.zpa-box .zpa-box01 .item span{font-size: 18px; color: #00a898; position: absolute; left: 20px; top: 30px}
.zpa-box .zpa-box01 .item:last-child{border-right: 1px solid #ddd;}
.zpa-box .zpa-box02{display: flex; justify-content: space-between;}
.zpa-box .zpa-box02 .item{width: calc(100% / 4 - 1px); text-align: center; padding: 30px 0; border-left: 1px solid #ddd; border-top: 1px solid #ddd; display: flex;align-items: center; flex-wrap: wrap;}
.zpa-box .zpa-box02 .item img{width: 40%; margin: 0 auto;}
.zpa-box .zpa-box02 .item p{text-align: center; font-size:14px; color: #898989; width: 100%} 
.zpa-box .zpa-box02 .item p.tit{font-size: 16px; color: #00a898; padding-bottom: 15px}
.zpa-box .zpa-box02 .item:last-child{border-right: 1px solid #ddd;}
.zpa-box .zpa-box03{display: flex; justify-content: space-between;}
.zpa-box .zpa-box03 .item{width: calc(100% / 4 - 1px); text-align: center; padding: 30px 0; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex;align-items: center; flex-wrap: wrap;}
.zpa-box .zpa-box03 .item img{width: 40%; margin: 0 auto;}
.zpa-box .zpa-box03 .item p{text-align: center; font-size:14px; color: #898989; width: 100%} 
.zpa-box .zpa-box03 .item p.tit{font-size: 16px; color: #00a898; padding-bottom: 15px}
.zpa-box .zpa-box03 .item:last-child{border-right: 1px solid #ddd;}

.goods-detail{padding: 3rem 0;}
.goods-dcontent{font-size: 14px; padding-bottom: 4rem}
.goods-dcontent h3{font-size: 26px; color: #808080; text-align: center; padding: 2rem 0; font-weight: inherit; letter-spacing: 3px}
.goods-dcontent .gd-con{width: 800px; margin: 0 auto; padding-top: 2rem;}


.footer {background: #FFF;padding: 5rem 0 2rem 0}
.footer-box{display: flex; justify-content: space-between;}
.footer-left{width: 42%}
.footer-left .flogo{position: relative;}
.footer-left .flogo img{width: 180px}
.footer-left .flogo p{color: #898989; font-size: 12px; position: absolute; left: 200px; bottom: 5px}
.footer-left .fsafe{display: flex; justify-content: space-between;padding-top: 25px; text-align: center;}
.footer-left .fsafe img{width: 30px}
.footer-left .fsafe p{color: #666; font-size: 12px}

.footer-right{width: 38%; padding-top: 10px}
.footer-right .contact{font-size: 14px; color: #898989; display: flex; align-items: center;}
.footer-right .contact img{width: 18px; padding-right: 10px}
.footer-right .mall{display: flex; justify-content: space-between; padding-top: 30px; color: #898989}
.footer-right .mall .tmall{width: 40%}
.footer-right .mall .tmall p{border-bottom: 1px solid #898989;}
.footer-right .mall .media{width: 44%}
.footer-right .mall .media p{border-bottom: 1px solid #898989;}
.zmt-box{display: flex;justify-content: space-between; padding-top: 20px}
.zmt-box .zm-box{position: relative; cursor: pointer;}
.zmt-box .zm-box .icon img{width: 32px}
.zmt-box .zm-box p{position: absolute; z-index: 99; box-shadow: 1px 1px 6px rgb(77 77 77 / 20%); bottom: 50px; width: 100px; left: -40px; display: none; cursor: pointer; font-size: 0}
.zmt-box .zm-box p img{width: 100%}
.zmt-box .zm-box:hover p{display: block;}

.footer-btm{padding-top: 3rem; display: flex; position: relative;}
.footer-btm img{width: 150px}
.footer-btm .copyright{padding:15px 0 0 0; color: #898989}
.footer-btm .copyright a{color: #898989}
.footer-btm .code{position: absolute; right: 0; bottom: 0; width: 120px;}
.footer-btm .code img{width: 100%}

.sound{position: absolute; bottom:30px; right: 25px; z-index: 99;}
.sound svg{width: 34px; cursor: pointer;}
.sound svg.on{display: none;}

@media (min-width:1680px) {
}

@media (min-width:1440px) {
    .container{width: 1400px}
    .zproduct .container{width: 1300px};
    .i-about .i-ab-box .zleft .zli-box{top: -83%}
    .zp-box .txt .desc .more{padding-top: 5rem}
    .z-ab-btm{padding-top: 5rem;}
}

@media (min-width:1200px) {

}


.z-slide-wrap {position: fixed; right: 0; bottom: 50px; z-index: 1000;}
.z-slide-wrap ul{position: relative;}
.z-slide-wrap ul li{width: 50px; height: 50px; background: #fff; border: 1px solid #f0f0f0; margin-bottom: 1px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;  position: relative; font-size: 12px; color: #2895c9; text-align: center; cursor: pointer; transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -ms-transition: .15s ease-in-out; -o-transition: .15s ease-in-out;}
.z-slide-wrap ul li.to-feedback{height: 43px; line-height: 1.5; padding-top: 7px;}
.z-slide-wrap ul li:hover{color: #333;}
.z-slide-wrap ul li:before{font-size: 16px;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -ms-transition: .15s ease-in-out; -o-transition: .15s ease-in-out;}
.z-slide-wrap ul li:hover:before{color: #333;}
.to-up:after {content:"";display:block;width:14px;height:14px;border-width:2px 2px 0 0;border-style:solid;color:#00a898;position:absolute;left:50%;top:55%;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}


.fixed{position:fixed;bottom:50%;right:0px;width:50px; display:block; z-index:9999}
.fixed .child{position:absolute;right:0px;overflow:hidden;cursor:pointer;width:50px;height:50px;background:#00a898;line-height: 50px;margin-top:1px;}
.fixed .child{transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s; -webkit-transition-duration: .5s; }
.fixed .child:hover{width:135px;background: #00a898;}
.fixed .child img{position:absolute;top:0px;left:0px;}
.fixed .child p{position: absolute;left:50px;color:#fff;}
.fixed .child:hover img.call{display:none;}
.fixed .child:hover p{left:0;}

.fixed .fixedCall{bottom:53px;}
.fixed .fixedCode{bottom:0;cursor:pointer;width:50px;height:50px;background:#00a898;line-height: 50px;margin-top:1px;}
.fixedCodeInfo{display:none;position:fixed;bottom:50%;right:53px; z-index: 999; width: 110px;font-size: 0}
.fixedCodeInfo .fixedPointer{position: absolute;right:-6px;bottom:12px;}
.fixedCodeInfo img{width: 100%}

#pages{text-align: center; padding: 2rem 0 0 0;}
#pages a{padding: 10px 12px; color: #333; font-size: 14px;}
#pages span{background-color: #004d9c; color: #FFF; padding: 10px 12px;}

@media (max-width:1025px) {
	.pc{display: none!important;}
    .m{display: block;}
    .container{width: 100%}

    .mtd-header{position: fixed; z-index: 99; top: 0; width: 100%; background-color: #FFF; box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);}
    .mtd-header .mlogo{padding: 15px 12px 5px 15px; float: left;}
    .mtd-header .mlogo img{width: 190px;}
    .mtd-header-info {position: relative;z-index: 10;height: 70px;}
    .mtd-header-info .nav_btn{float: right;margin: 20px 20px 0 0;cursor:pointer;height: 32px;width: 25px;position: relative;}
    .mtd-header-info .nav_btn span{display: inline-block;width: 25px;height: 2px;background-color: #333;position: absolute;top: 16px;left: 0px;transition:background-color 0.3s ease-out 0.1s}
    .mtd-header-info .nav_btn span:after{content:'';display: inline-block;width: 25px;height: 2px;background-color: #333;position: absolute;top: 8px;left:0px;transition:transform 0.3s ease-out,top 0.5s ease 0.4s;transform: rotate(0deg)}
    .mtd-header-info .nav_btn span:before{content:'';display: inline-block;width: 25px;height: 2px;background-color: #333;position: absolute;top: -8px;left:0px;transition:transform 0.3s ease-out,top 0.5s ease 0.4s;transform: rotate(0deg)}
    .mtd-header-info.btn_click .nav_btn span{background-color: transparent;}
    .mtd-header-info.btn_click .nav_btn span:after{transition: top 0.5s ease, transform 0.3s ease-out 0.4s;transform: rotate(-45deg);top: 0px }
    .mtd-header-info.btn_click .nav_btn span:before{transition: top 0.5s ease, transform 0.3s ease-out 0.4s;transform: rotate(45deg);top: 0px}
    .mtd-header-info .nav {position: fixed;top: 65px;left: 0px;right: 0px;bottom: 0px;background: #fff;visibility: hidden;filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0;transition: all 0.5s;overflow: auto;}
    .mtd-header-info.btn_click .nav{visibility: visible;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;top:70px;transition: all 0.5s;}
    .mtd-header-info .nav>ul {overflow-y: auto}
    .mtd-header-info .nav>ul>li{border-top: 1px solid #dcdcdc}
    .mtd-header-info .nav>ul>li:last-child{border-bottom: 1px solid #dcdcdc}
    .mtd-header-info .nav li a{color: #333;display:block;text-align: center;height: 100%}
    .mtd-header-info .nav li>a{padding:15px 25px }
    .mtd-header-info .nav>ul>li>a{font-size: 16px; text-align: left;}
    .mtd-header-info .nav>ul>li>a em{font-size: 14px;padding-left: 5px;color: #333}

    .navPhone-li{display: none;transition: all 0.5s;}
    .navPhone-li ul li a{text-align: left !important;position: relative;font-size: 14px !important;padding-left: 43px !important;}
    .nav>ul li a i{display: inline-block;width: 9px;height: 6px;background: url(../images/icon-2.png) no-repeat;margin-left: 5px;-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;-ms-transition: all .3s;transition: all .3s}
    .nav.nav-phone>ul li.active a i{ background: url(../images/icon-2.png) no-repeat;transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); }
    
    .lang{position: absolute;right: 60px;color: #555;font-size: 14px; top:28px}
    .lang a{color: #555}

    .ibanner{margin-top: 70px}
    .zbanner{margin-top: 70px}

    .i-about{padding: 3rem 0 2rem 0}
    .i-about .i-ab-box{padding: 0 12px 2rem 12px; display: block;}
    .i-about .i-ab-box .zleft{width: 100%}
    .i-about .i-ab-box .zleft .zl-box{position: initial; width: 91%; padding: 10px 16px}
    .i-about .i-ab-box .zleft .zl-box .zl-btop{padding-bottom: 4rem}
    .i-about .i-ab-box .txt{width: 100%; padding-top: 2rem}

    .i-products{padding: 4rem 12px;}
    .ipro-list{display: block; text-align: center;}
    .ipro-list .ipro-box{display: inline-block; width: 80%;}

    .i-news{padding: 4rem 12px}
    .i-news-box{display: block;}
    .i-news-box .i-news-tit{width: 100%; text-align: left;}
    .i-news-box .i-news-txt{width: 100%}

    .i-zxun .txt .txt-box p.tit{font-size: 16px; margin-bottom: 16px}
    .i-zxun .txt .txt-box p.tit:after{bottom: -5px}
    .i-zxun .txt .txt-box .inputs{width: 80%; display: block;}
    .i-zxun .txt .txt-box .inputs input{width: 92%}
    .i-zxun .txt .txt-box .zxtxt{width: 80%; margin-top: 5px; padding: 6px 0}
    .i-zxun .txt .txt-box .subtim{margin-top: 10px}

    .zproduct{padding: 4rem 12px}
    .zproduct .container{width: 100%};
    .zp-box{display: block;}
    .zp-box .thumb{width: 100%}
    .zp-box .txt{padding-top: 2rem; width: 100%}
    .zp-box .txt .subtit{padding: 10px 0 1rem 0}
    .z-ab-btm{padding-top: 2rem}

    .zp-tit{padding-bottom: 3rem}
    .zpackage{padding: 3rem 12px}
    .zpa-box .zpa-box01 .item span{top: 0; left: 3px}

    .nav-box{padding: 3rem 12px 1rem 12px}
    .intro-con{padding: 3rem 12px 0 12px}
    .z-ac-listbox{display: block;}
    .z-ac-listbox .thumb{width: 100%}
    .z-ac-listbox .txt{width: 100%}
    .z-ac-listbox .txt h3{padding-top: 2rem; font-size: 16px}
    .z-ac-listbox .txt .subtit{padding-top: 0}

    .znews-intro{padding: 3rem 12px 4rem 12px; width: initial;}
    .znews-intro-box{display: block;}
    .znews-intro-box .left{width: 100%}
    .znews-intro-box .right{width: 100%; padding-top: 2rem}

    .intro-body{display: block;}
    .intro-body .ableft{width: 100%}
    .intro-body .abright{width: 100%; padding-top: 2rem}

    .zidata{display: block; padding-top: 4rem}
    .zidata .zid-left{width: 100%; display: flex;}
    .zidata .zid-left .zid-dbox{width: 50%}
    .zidata .zid-right{width: 100%;}

    .z-install{padding: 0 12px;}
    .zin-box{display: block; padding-bottom: 3rem}
    .zin-box .left{width: 100%; border: 0}
    .zin-box .left p{width: initial;}
    .zin-box .right{width: 90%; padding: 0; margin: 0 auto;}

    .wnxc-box{padding: 0 12px}
    .wnxc-box h3{font-size: 26px}
    .wnxc-box .subtit{font-size: 14px}
    .wnxc-box .wnuan{font-size: 14px; bottom: -14px}
    .wnxc-box .wnuan span{width: 40px}

    .z-contact{padding: 3rem 12px}
    .z-cont-box{width: 100%}
    .zcb-list svg{width: 50px}
    .z-cont-box .zcb-list p{font-size: 14px}


    .footer{padding: 4rem 12px 2rem 12px}
    .footer-box{display: block;}
    .footer-left{width: 100%}
    .footer-right{width: 100%; padding-top: 20px}
    .footer-right .mall .media{width: 53%}


    
}

@media (max-width:767px) {
	.pc{display: none!important;}
    .m{display: block;}
    .container{width: 100%;}

    .mtd-header{position: fixed; z-index: 99; top: 0; width: 100%; background-color: #FFF; box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);}
    .mtd-header .mlogo{padding: 15px 12px 5px 15px; float: left;}
    .mtd-header .mlogo img{width: 190px;}
    .mtd-header-info {position: relative;z-index: 10;height: 70px;}
    .mtd-header-info .nav_btn{float: right;margin: 20px 20px 0 0;cursor:pointer;height: 32px;width: 25px;position: relative;}
    .mtd-header-info .nav_btn span{display: inline-block;width: 25px;height: 2px;background-color: #333;position: absolute;top: 16px;left: 0px;transition:background-color 0.3s ease-out 0.1s}
    .mtd-header-info .nav_btn span:after{content:'';display: inline-block;width: 25px;height: 2px;background-color: #333;position: absolute;top: 8px;left:0px;transition:transform 0.3s ease-out,top 0.5s ease 0.4s;transform: rotate(0deg)}
    .mtd-header-info .nav_btn span:before{content:'';display: inline-block;width: 25px;height: 2px;background-color: #333;position: absolute;top: -8px;left:0px;transition:transform 0.3s ease-out,top 0.5s ease 0.4s;transform: rotate(0deg)}
    .mtd-header-info.btn_click .nav_btn span{background-color: transparent;}
    .mtd-header-info.btn_click .nav_btn span:after{transition: top 0.5s ease, transform 0.3s ease-out 0.4s;transform: rotate(-45deg);top: 0px }
    .mtd-header-info.btn_click .nav_btn span:before{transition: top 0.5s ease, transform 0.3s ease-out 0.4s;transform: rotate(45deg);top: 0px}
    .mtd-header-info .nav {position: fixed;top: 65px;left: 0px;right: 0px;bottom: 0px;background: #fff;visibility: hidden;filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0;transition: all 0.5s;overflow: auto;}
    .mtd-header-info.btn_click .nav{visibility: visible;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;top:70px;transition: all 0.5s;}
    .mtd-header-info .nav>ul {overflow-y: auto}
    .mtd-header-info .nav>ul>li{border-top: 1px solid #dcdcdc}
    .mtd-header-info .nav>ul>li:last-child{border-bottom: 1px solid #dcdcdc}
    .mtd-header-info .nav li a{color: #333;display:block;text-align: center;height: 100%}
    .mtd-header-info .nav li>a{padding:15px 25px }
    .mtd-header-info .nav>ul>li>a{font-size: 16px; text-align: left;}
    .mtd-header-info .nav>ul>li>a em{font-size: 14px;padding-left: 5px;color: #333}

    .navPhone-li{display: none;transition: all 0.5s;}
    .navPhone-li ul li a{text-align: left !important;position: relative;font-size: 14px !important;padding-left: 43px !important;}
    .nav>ul li a i{display: inline-block;width: 9px;height: 6px;background: url(../images/icon-2.png) no-repeat;margin-left: 5px;-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;-ms-transition: all .3s;transition: all .3s}
    .nav.nav-phone>ul li.active a i{ background: url(../images/icon-2.png) no-repeat;transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); }
    
    .lang{position: absolute;right: 60px;color: #555;font-size: 14px; top:28px}
    .lang a{color: #555}

    .ibanner{margin-top: 70px}

    
}