@font-face {
  font-family: 'iconfont';  /* project id 864302 */
  src: url('font_864302_1q7mkgjrocv.eot');
  src: url('font_864302_1q7mkgjrocv.eot?#iefix') format('embedded-opentype'),
  url('font_864302_1q7mkgjrocv.woff') format('woff'),
  url('font_864302_1q7mkgjrocv.ttf') format('truetype'),
  url('font_864302_1q7mkgjrocv.svg#iconfont') format('svg');
}
.mt15{margin-top: 15px;}
.mt30{margin-top: 30px;}
.mt50{margin-top: 50px;}
.icon:before{font-family: iconfont;}
i.icon{font-style: normal;}
.icon-prev:before{content: '\e61a';}
.icon-next:before{content: '\e625';}
.icon-prev,.icon-next{padding: 0 5px;color: #888888;cursor: pointer;}
.icon-prev:hover,.icon-next:hover{color: #333333;}
.icon-menu:before{content: '\e61e';font-size: 28px;}
body{padding-top: 100px;}
a,a:hover{color: #333333;text-decoration: none;}
ul,li{list-style: none;padding: 0;margin: 0;}
.animate{transition: all linear 0.4s;}
.header{height: 100px;/*border-bottom: solid 1px #f1f1f1;*/background: rgba(255,255,255,0.9);line-height: 100px;overflow: hidden;}
.header img.logo{height: 100px;}
body.scrollTop{padding-top: 60px;}
body.scrollTop .header{height: 60px;line-height: 60px;}
body.scrollTop .header img.logo{height: 60px;}
.nav-top li{display: inline-block;line-height: 100px;font-size: 16px;}
body.scrollTop .nav-top li{line-height: 60px;}
.nav-top li a{display: inline-block;padding: 0 20px;}
.nav-top li.active a,.nav-top li a:hover{background: #2196f3;color: #ffffff;}
.swiper-container-banner{height: 500px;text-align: center;}
.swiper-container-banner .swiper-slide{background-position: center center;background-repeat: no-repeat;background-size: auto 100%;}
.banner-content{position: absolute;z-index: 200;left: 50%;color: #ffffff;text-align: left;transform: translateX(-50%);margin-top: 30px;}
.banner-content h2{letter-spacing: 3px;}
.form-container{width: 363px;box-sizing: border-box;background-color:  #1e4763;-webkit-box-shadow: inset 0px 0px 0px 3px #4080ad;
    -moz-box-shadow: inset 0px 0px 0px 3px #4080ad;
    box-shadow: inset 0px 0px 0px 3px #4080ad;margin-top: 15px;}
.form-title{color: #333333;font-size: 16px;height: 68px;background: url(http://www.clean28.com/templets/default/images/contact-heading.png) center top no-repeat;padding-top: 15px;line-height: 20px;}
.form-title span{display: block;color: #000000;opacity: 0.5;font-size: 16px;}
.form-container h3{font-size: 16px;}
.form-row{margin-left: -5px;margin-right: -5px;padding: 20px 5px;}
.form-row>div{padding: 10px 10px;}
.title{font-size: 20px;background: url(http://www.clean28.com/templets/default/images/sep-icon.png) left center no-repeat;padding-left: 50px;}
.title a.pull-right{color: #888888;font-size: 14px;}
.container-service{background: rgb(255,255,255);padding-bottom: 70px;margin-bottom: 50px;
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 85%, rgba(144,202,249,0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(85%,rgba(255,255,255,0.1)), color-stop(100%,rgba(144,202,249,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 85%,rgba(144,202,249,0.1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 85%,rgba(144,202,249,0.1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 85%,rgba(144,202,249,0.1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 85%,rgba(144,202,249,0.1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#90caf9',GradientType=0 );
}
.swiper-container-service{padding-bottom: 5px;}
.swiper-container-service img{margin-left: auto;margin-right: auto;width: 80%;}
.service-title{box-shadow: 0 0 5px rgba(0,0,0,0.15);display: block;width: 100%;margin-top: -70px;height: 200px;overflow: hidden;}
.service-title h4{margin-top: 100px;font-size: 15px;}
.service-title-detail{display: inline-block;background: #2196f3;color: #ffffff;padding: 5px 15px;margin-top: 25px;}
.about-content{line-height: 25px;color: #666666;padding-top: 15px;}
.about-content-btn{display: inline-block;padding: 5px 25px;border: solid 2px #2196f3;color: #787878;margin-top: 20px;}
.about-content-item{margin-top: 50px;}
.about-content-item h4{margin-top: 40px;}
.container-ads{box-sizing: border-box;padding-top: 90px;height: 248px;overflow: hidden;background: url(http://www.clean28.com/templets/default/images/statistics-bg.png) center center no-repeat;color: #ffffff;}
.ads-item-img{background: url(http://www.clean28.com/templets/default/images/brush.png) left bottom no-repeat;padding-bottom: 20px;}
.ads-item-img span{font-size: 20px;vertical-align: bottom;padding-left: 30px;}
.customer-descripton{padding-left: 50px;margin-top: 20px;letter-spacing: 2px;line-height: 25px;}
.customer-btns{font-size: 25px;margin-top: 50px;padding-left: 50px;}
.customer-btns i{padding: 0 10px;}
.swiper-container-customer .swiper-slide{position: relative;}
.customer-title{opacity: 0;cursor: pointer;position: absolute;width: 100%;height: 100%;left: 0;top: 0;display:flex;justify-content: space-around;align-items: center; background-color: rgba(33,150,243,0.8);box-sizing: border-box;border: 4px solid #f3e721;}
.customer-title h4{background: url(http://www.clean28.com/templets/default/images/team-icon.png) center top no-repeat;padding-top: 60px;}
.customer-title a{color: #ffffff;}
.customer-title:hover{opacity: 1;}
.article-home-description{color: #888888;}
.home-article-item>a{line-height: 30px;border-bottom: dashed 1px #e1e1e1;display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.home-article-item>a:before{content: '\ec1e';font-family: iconfont;}
.swiper-container-zs{height: 380px;}
.swiper-container-zs img{box-sizing: border-box;}

.footer{margin-top: 30px;background: url(http://www.clean28.com/templets/default/images/footer-bg.jpg) center top no-repeat;color: #ffffff;padding-bottom: 30px;}
.container-footer{height: 108px;background: url(http://www.clean28.com/templets/default/images/footer-heading.png) center top no-repeat;line-height: 108px;font-size: 15px;}
.container-footer a{display: inline-block;padding: 0 10px;}
.footer a{color: #ffffff;}
.powerby{padding-top: 15px;}
.flink{margin-top: 10px;}

.banner{height: 350px;background-position: center top;background-repeat: no-repeat;background-size: auto 100%;}
.banner-about{background-image: url(http://www.clean28.com/templets/default/images/banner-about.jpg);}
.banner-article{background-image: url(http://www.clean28.com/templets/default/images/banner-article.jpg);}
.banner-service{background-image: url(http://www.clean28.com/templets/default/images/banner-service.jpg);}

.position{background: #f5f5f5;line-height: 45px;}
.position span{color: #888888;}
.container-position>div:before{content: '\e610';font-family: iconfont;font-size: 15px;}
.slide-title{background: #2196f3;color: #ffffff;padding: 0 15px;box-sizing: border-box;}
.slide-title span.slide-f{display: inline-block;font-size: 40px;}
.slide-title h4{display: inline-block;font-size: 20px;padding-left: 5px;}
.slide-title h4 small{color: #ffffff;display: block;font-size: 18px;}
.slide-nav li{display: block;line-height: 45px;border-bottom: solid 1px #f1f1f1;margin-top: 5px;}
.slide-nav li a{display: block;width: 100%;height: 100%;padding:0 15px;box-sizing: border-box;}
.slide-nav li a:after{content: '\e625';font-family: iconfont;float: right;color: #aaaaaa}
.slide-nav li.active a,.slide-nav li a:hover,.slide-nav li.active a:after,.slide-nav li a:hover:after{color: #2196f3;}
.contact-item{padding: 0 15px 5px 15px;box-sizing: border-box;}
.slide-article a{display: block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px 5px;box-sizing: border-box;border-bottom: dashed 1px #f1f1f1;margin-top: 5px;}
.slide-article a:before{content: '\ec1e';font-family: iconfont;}
.h-title{border-bottom: solid 1px #f1f1f1;text-align: center;padding-bottom: 15px;position: relative;}
.h-title:after{content: '';display: block;height: 4px;background: #2196f3;width: 60px;position: absolute;left: 50%;margin-left: -30px;bottom: -2px;}
.service-item{margin-top: 15px;padding-bottom: 3px;}
.service-item h4{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;}
.service-item:hover{transform: translateY(-10px);box-shadow: 3px 3px 15px #cccccc;}
.service-item a{overflow: hidden;display: block;width: 100%;}
.service-item:hover img{transform: scale(1.1);}
.contacter,.mobile,.booking{margin-top: 10px;}
.icon-contacter:before{content: '\e645';color: #0080ff;}
.icon-mobile:before{content: '\e60b';color: #ff8040;}
.icon-booking:before{content: '\e8a2';color: #008000;}
.icon-contacter:before,.icon-mobile:before,.icon-booking:before{font-size: 18px;padding-right: 8px;}
.description{color: #888888;margin-top: 7px;}
.prev{line-height: 25px;}
.icon-view:before{content: '\e60f';padding-right: 5px;padding-left: 15px;}
.icon-time:before{content: '\e65f';padding-right: 5px;}
.article-other{color: #888888;}
.btn-more{color: #2196f3;display: block;margin-top: 4px;}
.article-list>div{border-bottom: solid 1px #f1f1f1;padding: 15px 0;cursor: pointer;}
.article-list>div:hover{background: #2196f3;color: #ffffff;}
.article-list>div:hover .article-other,.article-list>div:hover .description,.article-list>div:hover .btn-more,.article-list>div:hover a{color: #ffffff;}
.article-other-border{border-bottom: solid 1px #f1f1f1;padding-bottom: 10px;}
.article-img img{margin-left: auto;margin-right: auto;}

.container-product-item>a{float: left;width: 25%;display: block;position: relative;border: solid 1px #ffffff;box-sizing: border-box;overflow: hidden;}
.container-product-item>a>img{width: 100%;display: block;}
.container-product-item>a>h4{text-align: center;font-size: 16px;position: absolute;left:0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.1);margin: 0;z-index: 1;color: #ffffff;box-sizing: border-box;padding-top: 180px;}
.container-product-item>a>span.icon-look:before{content: '\e63c';font-style: normal;width: 60px;height: 60px;font-size: 20px;color: #2196f3;font-weight: bold;}
.container-product-item>a>span{display: block;text-align: center;line-height: 60px;width: 60px;height: 60px;position: absolute;opacity: 0;margin-left: -30px;left: 50%;bottom: 35px;background: #ffffff;border-radius: 50%;z-index: 2;}
.container-product-item>a:hover>img{transform: scale(1.08);}
.container-product-item>a:hover>h4{padding-top: 60px;}
.container-product-item>a:hover>span{opacity: 1;}

.list-title{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;}
.sitemap-title{height: 40px;line-height: 40px;border-bottom: solid 1px #f0f0f0;}
.sitemap-title>a{display: inline-block;border-bottom: solid 2px #2196f3;padding-left: 15px;padding-right: 15px;margin-left: -15px;box-sizing: border-box;}
.sitemap-list{padding-top: 15px;padding-bottom: 15px;line-height: 25px;}
.sitemap-list .typename{display: block;line-height: 30px;}
.sitemap-list .arclist{color: #777777;display: inline-block;white-space: nowrap;margin-right: 20px;}

@media screen and (max-width:768px){
  body{padding-top: 60px;}
  .header{height: 60px;line-height: 60px;}
  .header img.logo{height: 60px;}
  .nav-top li{line-height: 60px;}
  .swiper-container-banner{height: 200px;}
  .container-ads{padding-top: 40px;}
  .customer-descripton{margin-top: 10px;margin-bottom: 10px;padding-left: 0;}
  .container-footer{line-height: 30px;padding-top: 25px;}
  .swiper-container-zs{height: 255px;}
  .container-service{padding-bottom: 20px;margin-bottom: 0;}
  .mm-menu{width: 45%;}
  .container-bottom{position: fixed;height: 50px;z-index: 77;bottom: 0;right: 0;left: 0;background: #2196f3;display: flex!important;justify-content:space-around;algin-items:center;}
  .container-bottom a{color: #ffffff;display: inline-block;padding: 5px 20px;text-align: center;}
  .container-bottom a:before{font-family: iconfont;display: block;font-size:18px; }
  .icon-home:before{content: '\e620';}
  .icon-tel:before{content: '\e60b';}
  .icon-address:before{content: '\e610';}
  .banner{height: 180px;}
  .mt30,.mt50{margin-top: 15px;}
  .service-title{height: 160px;}
  .service-title h4{margin-top: 85px;}
  .service-title-detail{margin-top: 0;}
  .about-content-item{margin-top: 15px;}
  .about-content-item h4{margin-top: 15px;}
  
  .container-product-item>a{width: 50%;}
  .container-product-item>a>h4{padding-top: 60%;}
  .container-product-item>a:hover>h4{padding-top: 10%;}
  .container-product-item>a>span{bottom: 15px;}
}