@charset "utf-8";
/* CSS Document */
.rechargeable_conetnt2 {width: 100%; height: auto;float: left; padding: 50px 0 50px 0; position: relative;}
.wrapper {margin: 0 auto;max-width: 994px; width: 95%;}	

.rechargeable-box1{width: 100%; height: auto;float: left; display: block;}
.rechargeable-box1 h2{width: 100%; height: auto;float: left; display: block; position: relative; z-index: 1; }
.rechargeable-box1 h2:after{ content: '';width: 100%; height: 1px; position: absolute; left: 0; right: 0; top: 50%;  display: block;  background: rgb(228,49,52);
background: -moz-linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
background: linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e43134",endColorstr="#392a2a",GradientType=1);}

.rechargeable-box1 h2 aside{ width: auto; height: auto; margin: 0 auto; display: table; background:#fff;; padding: 0 10px; font-size: 16px; font-weight: 400; color: #1e1d1d;  line-height: 24px; text-align: center; position: relative; z-index: 2;}
.rechargeable-box1 h2 aside strong{font-weight: 600;}
.rechargeable-box1 h3{width: 100%; height: auto;float: left; display: block;  padding: 30px 0 30px 0; box-sizing: border-box; margin-bottom: 30px; position: relative; font-size: 36px; font-weight: 600; color: #1e1d1d;  line-height: 40px; text-align: center;  }
.rechargeable-box1 h3:after{ content: '';width: 100%; height: 1px; position: absolute; left: 0; right: 0; bottom: 0; display: block;  background: rgb(228,49,52);
background: -moz-linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
background: linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e43134",endColorstr="#392a2a",GradientType=1);}


.rechargeable-box1 p{width: 100%; max-width: 800px; margin: 0 auto; height: auto; display: block;  padding: 0px 0 20px 0; box-sizing: border-box;  position: relative; font-size: 16px; font-weight: 400; color: #1f1f1f;  line-height: 24px; text-align: center;  }



/*.rechargeable-box2{ width: 100%; height: auto; float: left; display: block; -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15); padding: 50px 25px 125px 25px; box-sizing: border-box; margin: 50px 0; background: url(../images/rechargeable-boxbg.jpg) no-repeat right bottom;}

.rechargeable-box2 h2{width: 100%; height: auto;float: left; display: block;  padding: 0px 0 30px 0; box-sizing: border-box; position: relative; font-size: 18px; font-weight: 600; color: #2b2b2b;  line-height: 22px; text-align: center;  }

.box-overflow{width: 100%; height: auto;float: left; display: block; overflow: hidden; }
.rechargeable-box2 ul{width: 100%; height: auto;float: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin-bottom: -26px;}
.rechargeable-box2 ul li{width: 33.3333%; height: auto;float: left; padding: 0 3%; box-sizing: border-box; margin-bottom: 25px;}
.rechargeable-box2 ul li aside{width: 100%; height: 100%;float: left; border-bottom: 1px solid #d9d9d9; padding-bottom: 10px; padding-left: 20px;  position: relative;}
.rechargeable-box2 ul li aside:after{ content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 9px; background: url(../images/tick-arrow.png) no-repeat left top;}
.rechargeable-box2 ul li aside p{font-size: 14px; font-weight: 400; color: #2b2b2b;  line-height: 20px;}*/


.rechargeable-box2{ width: 100%; height: auto; float: left; display: block; -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.15); padding: 50px 25px 125px 25px; box-sizing: border-box; margin: 50px 0; background:#f2f2f2 url(../images/rechargeable-boxbg2.jpg) no-repeat right bottom;}

.rechargeable-box2 h2{width: 100%; height: auto;float: left; display: block;  padding: 0px 0 30px 0; box-sizing: border-box; position: relative; font-size: 18px; font-weight: 600; color: #2b2b2b;  line-height: 22px; text-align: center;  }

.box-overflow{width: 100%; height: auto;float: left; display: block; overflow: hidden; padding: 0 60px; }
.rechargeable-box2 ul{width: 100%; height: auto;float: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.rechargeable-box2 ul li{width: 33.3333%; height: auto;float: left; padding: 0 18px; box-sizing: border-box; margin-bottom: 25px;}
.rechargeable-box2 ul li aside{width: 100%; height: 100%;float: left; background: #FFF; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);     position: relative; padding: 25px 15px 25px 35px; display: table;}
.rechargeable-box2 ul li aside:after{ content: ''; position: absolute; left: -20px; top: 50%; width: 40px; height: 40px; background:#fff url(../images/tick-arrow.png) no-repeat center center; border: 1px solid #e81b1b; border-radius: 50%; margin-top: -20px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15); }
.rechargeable-box2 ul li aside p{font-size: 16px; font-weight: 400; color: #252525;  line-height: 20px; vertical-align: middle; display: table-cell;}









/*
.rechargeable-box3{ width: 100%; height: auto; float: left; display: block;}

.rechargeable-box3 h2{width: 100%; height: auto;float: left; display: block;  padding: 0px 0 30px 0; box-sizing: border-box; position: relative; font-size: 18px; font-weight: 600; color: #2b2b2b;  line-height: 22px; text-align: center;  }
.rechargeable-box3 ul{width: auto; height: auto; margin: 0 auto;  display: table; font-size: 0; line-height: 0; text-align: center;}
.rechargeable-box3 ul li{width:auto; height: auto; display: inline-block; box-sizing: border-box; padding: 0px; }
.rechargeable-box3 ul li section{width: 156px; height: 156px; display: table; margin: 0 auto; background: url(../images/usages-bg.png) no-repeat center center; }
.rechargeable-box3 ul li section aside{ width: 100%; height: 100%;  display: table-cell; vertical-align: middle; text-align: center; justify-content: center;}
.rechargeable-box3 ul li section aside figure{ width: auto; display: block;}*/

.rechargeable-box4{ width: 100%; height: auto; float: left; display: block; border-top: 1px solid #e5e5e5;}
.rechargeable-box4 section{ margin: 0 auto; width: 100%; max-width: 735px; }


.rechargeable-box4 section ul{float: left; width: 100%; height: auto; display: block;  margin-top: 40px;  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
.rechargeable-box4 section ul li{float: left; width: 50%;   border-right: 1px solid #dedede; padding: 0 30px;  }

.rechargeable-box4 section ul li:last-child{border-right:0px solid #dedede;}
.rechargeable-box4 section ul li aside{width: 100%; height: 100%; float: left; display: block; }
.rechargeable-box4 section ul li aside a{width: 100%; height: 100%; float: left; display: block; padding: 0 0px 25px 70px; position: relative; }
.rechargeable-box4 section ul li aside a span{ position: absolute; left: 0px; top: 0; width: 70px; height: 70px;}
.rechargeable-box4 section ul li aside a h2{width: 100%; height: auto;float: left; display: block;  padding: 0px 0 5px 0; box-sizing: border-box; position: relative; font-size: 16px; font-weight: 600; color: #1c1c1c;  line-height: 22px;  }
.rechargeable-box4 section ul li aside a p{width: 100%; height: auto;float: left; display: block;  padding: 0px 0 5px 0; box-sizing: border-box; position: relative; font-size: 14px; font-weight: 400; color: #505050;  line-height: 16px; text-transform: none;  }

.rechargeable-box4 section ul li aside a small{position: absolute; left: 70px; bottom: 0; font-size: 12px; color: #ea2628; font-weight:400; text-transform: uppercase; padding: 0 25px 0 0; margin-top: 10px; float: left; }
.rechargeable-box4 section ul li aside a small:after{content:''; position: absolute; right: 0px; bottom: 2px; width: 11px; height: 10px; background: url(../images/arrow-set1.png) no-repeat -22px 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer;}
.rechargeable-box4 section ul li aside a:hover small:after{background: url(../images/arrow-set1.png) no-repeat 0 0; }




.rechargeable-box3{ width: 100%; height: auto; float: left; display: block; }

.rechargeable-box3 h2{width: 100%; height: auto;float: left; display: block; position: relative; z-index: 1; margin-bottom: 30px; }
.rechargeable-box3 h2:after{ content: '';width: 100%; height: 1px; position: absolute; left: 0; right: 0; top: 50%;  display: block;  background: rgb(228,49,52);
background: -moz-linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
background: linear-gradient(90deg, rgba(228,49,52,1) 0%, rgba(223,48,51,1) 25%, rgba(202,48,50,1) 50%, rgba(166,46,48,1) 75%, rgba(57,42,42,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e43134",endColorstr="#392a2a",GradientType=1);}

.rechargeable-box3 h2 aside{ width: auto; height: auto; margin: 0 auto; display: table; background:#fff;; padding: 0 10px; font-size: 22px; font-weight: 600; color: #2b2b2b;  line-height: 24px; text-align: center; position: relative; z-index: 2;}
.rechargeable-box3 h2 aside strong{font-weight: 600;}










.usages-box2{ width: 100%;float: left; display: block;   }
.usages-box2a{margin-left: -8px; margin-right: -8px;}
.usages-box3{ width: 100%; height: 335px;float: left; display: block;  margin-top: 40px; margin-bottom: 40px;    }
.usages-box3 li{ padding: 0px;   }
.usages-box3 li section{ padding: 10px 8px;  }
.usages-box3 li section figure{ width: 100%; height: 100%;position: relative; -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25); overflow: hidden;    }


.usages-box3 li section figure img{ border-radius: 3px; width: 100%;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;}


.usages-box3 li section figure img:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}








.usages-box3 li section figure aside { position: absolute; left: 25px; bottom: 25px; height: auto;  width: auto;   }
.usages-box3 li section figure h5 { position: absolute; left: 25px; top: 25px; height: auto;  width: auto; font-size: 18px; font-weight: 600; color: #FFF;  line-height: 20px;   }

.events_next5{ position:absolute; top:-45px; left: 50%;  margin:auto; z-index:1; width:42px; height:37px; text-indent:-99999px; cursor:pointer;  -webkit-transition: all .3s ease-out;   -moz-transition: all .3s ease-out; transition: all .3s ease-out; padding-left:5px; }
.events_prev5{ position:absolute; top:-45px; right: 50%;  margin:auto; z-index:1; width:41px; height:37px; text-indent:-99999px; cursor:pointer;  -webkit-transition: all .3s ease-out;   -moz-transition: all .3s ease-out; transition: all .3s ease-out; padding-right: 5px;}
.events_prev5{    background: url(../images/arrow55.png) no-repeat left 50%;  }
.events_next5{    background:url(../images/arrow55.png) no-repeat -43px 50%;  margin-right:0px;}

.pic-box30{width: 100%; height: auto;float: left; display: block; margin: 0px 0 30px 0;}
.pic-box30 img{width: 100%; }


.more-box{width: auto; height: auto; margin: 40px auto 60px; display: table; border: 1px solid #e8e8e8; border-radius: 4px; }
.more-box a{width: 100%; height: auto;float: left; display: block; }
.more-box a aside{ width: auto; height: auto; float: left; display: block; background: #dc0000; margin-right: 70px; position: relative; padding: 15px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #fff;  line-height: 16px; text-align: right; position: relative; background-image:linear-gradient(0, #fac832, #fac832); background-size: 0; transition: .8s; background-repeat: no-repeat; border-bottom-left-radius: 4px; border-top-left-radius: 4px;}
.more-box a:hover aside{ background-size:100%;}

.more-box a aside:after{content: ''; position: absolute; right:-44px; top: 50%; width: 28px; height: 28px; margin-top: -14px;  background: #dd0000 url(../images/rechargeable-usages-arrow.png ) no-repeat center center; border-radius: 50%; }
.more-box a:hover aside:after{background: #fac832 url(../images/rechargeable-usages-arrow.png ) no-repeat center center;}




@media screen and (max-width: 1024px) {
	.usages-box3 li section figure {
		width: auto; margin: 0 auto; display: table;}
}



@media screen and (max-width: 1000px) {
.rechargeable-box2 ul li {width: 50%;}

}
@media screen and (max-width: 650px) {
.rechargeable-box2 ul li {width: 100%;}

}

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

	.rechargeable-box1 h3 br{ display: none;}
	.rechargeable-box4 section ul li { width: 100%;border-right: 0px solid #dedede; margin-bottom: 30px;}
	.box-overflow { padding: 0 2px;}
}

/*section 3 css start*/