@charset "utf-8";

body {
 background: url(/skin/cleaning/images/wood-grain-1.webp);}

/* banner start*/
.c-banner{
 width: 100%;
 position: relative;
 background: #ffffff;}
.c-banner img{
 width: 100%;}
.c-banner .banner ul{
 list-style: none;
 padding-left: 0px;
 margin-bottom: 0px;}
.c-banner .banner ul li{
 position: absolute
 display: none;
 opacity: 0;}
.c-banner .banner ul li:nth-child(1){
 opacity: 1;
 display: block;}
.c-banner .banner ul li img{
 width: 100%;
 position: absolute;
 top: 0px;}
.c-banner .banner ul li:first-child img{
 position: relative;}
.c-banner .nexImg,.c-banner .preImg{
 padding: 25px 10px 25px 10px;
 position: absolute;
 top: 50%;
 margin-top: -53px;
 background: #000000;
 opacity: 0.5;
 border-radius: 5px;
 z-index: 10;}
.c-banner .nexImg:hover,.c-banner .preImg:hover{
 opacity: 0.8;}
.c-banner .nexImg{
 right: 0px;}
.c-banner .jumpBtn{
 width: 100%;
 position: absolute;
 bottom: 20px;
 text-align: center;}
.c-banner .jumpBtn ul{
 margin-bottom: 0px;
 padding: 0px;}
.c-banner .jumpBtn ul li{
 width: 30px;
 height: 30px;
 border-radius: 50%;
 display: inline-block;
 background-color: white;
 opacity: 0.9;
 margin-left: 10px;}
.c-banner .jumpBtn ul li:first-child{
 margin-left: 0px;}
@media screen and (max-width:768px) {
 .c-banner{
 width: 100%;
 height: auto;
 overflow: hidden;
 line-height: 50%;}
.c-banner .nexImg, .c-banner .preImg {
 padding: 5px;
 margin-top: -23px;}
.c-banner .nexImg img, .c-banner .preImg img {
 max-width: initial;
 width: 6px;}
.c-banner .banner ul li img{
 width: 100%;
 height: auto;
 position: absolute;}
.c-banner .jumpBtn ul {
 margin-bottom: -15px;}
.c-banner .jumpBtn ul li {
 width: 10px;
 height: 10px;}
 }
/*banner end*/

.custom, .advantage ul {
 font-size: 0;}

.wrapper div {
 overflow: hidden;}
.custom {
 padding-top: 10px;
 height: 384px;
 background: #fff url(/skin/cleaning/images/cleaning-product-purchase-process.jpg) no-repeat center;}
.custom .nk {
 width: 1200px;
 margin: 30px auto;}
.custom .left {
 margin-top: 110px;
 display: inline-block;
 width: 25%;
 text-align: center;
 line-height: 20px;
 float: left;}
.custom .left span {
 font-size: 14px;}
.custom .right {
 background: url(/skin/cleaning/images/dian.png) repeat-y left;
 display: inline-block;
 width: 75%;
 padding-top: 30px;
 text-align: center;}
.custom ul li {
 font-size: 14px;
 display: inline-block;
 height: 120px;
 width: 33.333%;}
.custom .left h2 {
 font-size: 50px;}
.advantage {
 margin-top: 12px;}
.advantage ul li {
 display: inline-block;
 width: 25%;
 font-size: 14px;}
.advantage ul li img {
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;}
.advantage ul li strong, .advantage ul li span {
 display: block;
 text-align: center;}
.advantage ul li div {
 margin: 5px;
 position: relative;
 height: 200px;}
.advantage ul li strong {
 font-size: 20px;
 margin-top: 15px;
 margin-bottom: 10px;}
.advantage ul li span {
 padding: 5px;}
.wrapper .products {
 background: #fff;
 font-size: 0;}
.wrapper .products h1, .wrapper .products h2 {
 color: #fff;
 font-size: 18px;
 background: #1f53b9;}
.wrapper .reason {
 background: #fff url(/skin/cleaning/images/sweeping-mopping.webp) no-repeat right;}
.wrapper .products li {
 display: inline-block;
 text-align: center;
 width: 25%;}
.wrapper .products li a {
 font-size: 14px;
 display: block;
 margin: 10px;}
.wrapper .products li a:hover {
 box-shadow: 0px 0 5px 0 #ccc;}

.reasonMain1,.reasonMain2,.reasonMain3,.reasonMain4,.reasonMain5 {
 display:none;}
.reason .reason4 .reasonChecked {
 display: block;}
.reason .reason4 ul.reasonList {
 width: 32%;
 float: left;
 padding-top: 5px;
 position: relative;
 z-index: 999;
 right: -2px;}
.reason .fourreasons {
 width: 40%;}
.reason .fourreasons .xia {
 color: #0000008a;}
.reason .fourreasons .xia font {
 display: block;
 width: 30px;
 background: url(/skin/cleaning/images/dian.png) repeat-x left 10px;
 height: 40px;
 float: left;
 margin-right: 10px;}
.reason .fourreasons .shang {
 font-size: 115%;
 color: #1f53b9;}
.reason .reason4 .reasonList li {
 padding-top: 10px;
 padding-bottom: 10px;
 font-size: 12px;
 border-bottom: 1px solid #ccc;
 color: #5087D7;
 cursor:pointer;}
.reason .reason4 .reasonList li.reasonChecked{
 background: url(/skin/cleaning/images/arrow_right.gif) no-repeat right;}
.reason .reason4 .reasonMain {
 width: 63%;
 border: 2px #1f53b94f solid;
 background-color: rgb(255, 255, 255, 0.6);
 height: 180px;}
.reason .reason4 .reasonMain p {
 padding: 0;}
.reason .reason4 .reasonMain  div {
 padding-top: 25px;
 padding-left: 30px;
 padding-right: 30px;}
.reason .reason4 .reasonMain strong {
 font-size: 16px;
 border-bottom: solid 1px #555;
 padding-bottom: 5px;
 line-height: 55px;}