﻿/*公共样式*/
.charger_title{font-size: 3em;}
.charger_subtitle{font-size: 1.75em; }
.charger_text{font-size: 1em;}
.charger_buy .charger_buy_button{position: relative; top:50%; margin-top:-1.5em; width:100%; text-align: center;}
.charger_buy a{padding-left:5%; padding-right:5%; height: 2em; margin-left:2%; margin-right:2%; border:1px solid #5c5c5c; display: inline-block; line-height: 2em; color:#333; font-size: 1.125em; }
.charger_buy a:hover{background-color:#2dccd2; color:#FFF; border:1px solid #2dccd2; }
@media screen and (max-width:1280px){
	.charger_title{font-size: 2.5em;}
}
@media screen and (max-width:769px){
	.charger_title{font-size: 2em;}
	.charger_subtitle{font-size: 1.5em; }
	.charger_text{font-size: 1.125em;}
	.charger_buy a{font-size: 1em;}
}
@media screen and (max-width:480px){
	.charger_title{font-size: 1.5em;}
	.charger_subtitle{font-size: 1.125em; }
	.charger_text{font-size: 1em;}
}
/*第一屏*/
.charger_01{position: absolute; width:100%; color:#FFFFFF; top:23%; font-size: 2em}
.charger_01 .title{font-size: 2.125em; line-height: 2.3em; width:60%; margin-left:0%;}
.charger_01 .text{font-size: 1em; width:60%; margin-left:0%;}
@media screen and (max-width:1440px){
	.charger_01{font-size: 1.5em}
}
@media screen and (max-width:960px){
	.charger_01{top:12%;}
	.charger_01 .title, .charger_01 .text{width:70%; margin-left:0%;}
}
@media screen and (max-width:768px){
	.charger_01{font-size: 1em; top:30%; left:5%;}
	.charger_01 .title{line-height: 1.2em;}
}
/*视频*/
.charger_02_bg{width:100%; padding-top:5%; padding-bottom: 5%; overflow: hidden; background-color:#f2f2f2; }
.charger_02{width:100%; color:#333;}
.charger_02 .left{width:29%; float: left;}
.charger_02 .right{width:69%; float: right; position: relative}
.charger_02 .right img{opacity: 0;}
@media screen and (max-width:769px){
	.charger_02 .left{width:100%; text-align: center; margin-bottom: 3%;}
	.charger_02 .right{width:100%; float: left; }
}
.charger_02 video{position: absolute; top:0; left:0; width:100%; }
.charger_02 .charger_title{line-height: 1.1em;}
.charger_02 .charger_subtitle{line-height: 1.7em; margin-top:1.4vw;}
.charger_02 .charger_text{line-height: 1.7em; margin-top:2.3vw; }
@media screen and (max-width:960px){
	.charger_02 .charger_text{display: none;}
}
/*产品一*/
.charger_03{width:100%; background-color:#f2f2f2; overflow: hidden; padding-bottom: 5%;}
.charger_03 li{width:23.95%; margin-right:1.4%; float: left; position: relative; overflow: hidden; border-top:5px solid #2dccd2;}
.charger_03 li:last-child{margin-right:0;}
.charger_03 .title{font-size: 1.75em; text-align: center; color:#333; position: absolute; top:13%; width:100%; left:0;}
@media screen and (min-width:769px){
	.charger_03 .charger_buy{position: absolute; bottom:-30%; width:100%;}
	.charger_03 li:hover .charger_buy{background-color:rgba(255,255,255,0.5); overflow: hidden; position: absolute; bottom:0px; width:100%; height: 30%; transition: 0.5s;}
}
@media screen and (max-width:768px){
	.charger_03 li{width:49%; margin-right:2%; background-color:#FFF; margin-bottom: 2vw; text-align: center;}
	.charger_03 li:nth-child(2n){margin-right:0;}
	.charger_03 .title{font-size: 1.5em}
	.charger_03 .charger_buy{position: relative; margin-bottom: 3vw;}
	.charger_03 li:hover .charger_buy{position: relative;}
}

/*第四屏*/
.charger_04{position: relative;}
.charger_04 .text{position: absolute; right:0; width:100%; top:10vw; color:#FFFFFF; }
.charger_04 .charger_04_word{width:35%; float: right;}
.charger_04 .charger_title{line-height: 1.2em;}
.charger_04 .charger_subtitle{ margin-top:1.8vw; line-height: 1.2em;}
.charger_04 .charger_text{ line-height: 1.6em; margin-top:2.7vw;}

.charger_04 li{width:19.16%; margin-right:1.05%; float: left; position: relative; overflow: hidden; border-top:5px solid #2dccd2;}
.charger_04 li:last-child{margin-right:0;}

.charger_04 .title{font-size: 1.5em; text-align: center; color:#333; position: absolute; top:13%; width:100%; left:0;}
.charger_04 .charger_buy{position: absolute; bottom:-30%; width:100%;}
.charger_04 li:hover .charger_buy{background-color:rgba(255,255,255,0.5); overflow: hidden; position: absolute; bottom:0px; width:100%; height: 30%; transition: 0.5s;}
.charger_04 .charger_buy a{font-size: 1em;}
.charger_04 .all_text{position: absolute; bottom:4.5vw; left:0; width:100%;}

@media screen and (min-width:961px){
	.charger_04_PC{display: block}
	.charger_04_M{display: none;}
}

@media screen and (max-width:1280px){
	.charger_04 .text{top:6vw;}
}

@media screen and (max-width:960px){
	.charger_04_PC{display: none}
	.charger_04_M{display: block;}
	.charger_buy a{margin-left:1%; margin-right:1%; height: 24%;}
	.charger_04 li{width:24.25%; margin-right:1%; margin-bottom: 1vw; border-top:5px solid #2dccd2;}
	.charger_04 .all_text{background:url(../../images/charger/charger-04-bg.jpg) repeat; position: relative; top:0; overflow: hidden; padding-top:0vw; padding-bottom: 4vw;}
}
@media screen and (min-width:769px) and (max-width:960px){
	.charger_04 li:nth-child(4n){margin-right:0;}
}
@media screen and (max-width:768px){
	.charger_04 li{width:32.3%; margin-right:1%; margin-bottom: 1vw; overflow: hidden; background-color:#FFF;}
	.charger_04 .charger_text{display: none;}
	.charger_04 li:nth-child(3n){margin-right:0;}
	.charger_04 .charger_buy{position: relative; margin-bottom: 3vw; bottom: 0;}
	.charger_04 li:hover .charger_buy{overflow:visible; position: relative; bottom:0px; width:100%; height: 30%; transition: 0.5s;}
	.charger_04 .text{top:15vw;}
}
@media screen and (max-width:640px){
	.charger_04 li:first-child{display: none;}
	.charger_04 li{width:49%; margin-right:2%; background-color:#FFF; margin-bottom: 2vw; margin-left:0;}
}
/*第五屏*/
.charger_05{position: relative;}
.charger_05 .all_text{position: absolute; width:100%; bottom:6vw; color:#FFF;}
.charger_05 .title{font-size: 3em; line-height: 1.2em;}
.charger_05 .sub_title{font-size: 1.875em; line-height: 1.5em; margin-top:1.4vw;}
.charger_05 .des{font-size:1.125em; line-height: 1.6em; margin-top:2.5vw; width:45%;}
@media screen and (max-width:1280px){
	.charger_05 .title{font-size: 2.5em;}
	.charger_05 .des{width:70%;}
}
@media screen and (max-width:769px){
	.charger_05 .all_text{bottom:6vw;}
	.charger_05 .title{font-size: 2em;}
	.charger_05 .sub_title{font-size: 1.5em;}
	.charger_05 .des{width:100%; display: none;}
}
@media screen and (max-width:480px){
	.charger_05 .all_text{bottom:3vw;}
	.charger_05 .title{font-size: 1.5em;}
	.charger_05 .sub_title{font-size: 1.125em;}
	.charger_05 .des{width:100%; display: none;}
}

/*第六屏*/
.charger_06{background-color:#020204; overflow: hidden; position: relative;}
.charger_06_bg{background:url(../../images/charger/charger-06.jpg) no-repeat; overflow: hidden;background-position:0% 100%; background-size:100%; }
.charger_06 .all{width:100%; margin-top:5%; margin-bottom:5.5%; overflow: hidden;}
.charger_06 .all_text{width:40%; position: relative; right:0; color:#FFF; vertical-align: middle;}
.charger_06 .main_title{font-size: 3em; line-height: 1.2em;}
.charger_06 .sub_title{font-size: 1.875em; line-height: 1.5em; margin-top:1.4vw;}
.charger_06 .des{font-size: 1.125em; line-height: 1.6em; margin-top:2.5vw;}
.charger_06 .all_text .all_img{margin-top:3vw; margin-bottom: 3vw;}
.charger_06 .all_text li{width:48%; float: left; margin-right:4%; position: relative; overflow: hidden;}
.charger_06 .all_text li:last-child{margin-right:0;}
.charger_06 .charger_buy{position: absolute; bottom:-22%; width:100%;}
.charger_06 li:hover .charger_buy{background-color:rgba(255,255,255,0.5); position: absolute; bottom:0px; width:100%; height: 29%; transition: 0.5s;}
.charger_06 .charger_buy a{font-size: 1em;}
.charger_06 .title{font-size: 1.5em; text-align: center; color:#333; position: absolute; top:12%; width:100%; left:0;}
.charger_06 .charger_buy .charger_buy_button{top:50%;}

@media screen and (min-width:1281px){
	.charger_06 .center_M{display: none;}
	.charger_06 .center{display: block;}
}
@media screen and (max-width:1280px){
	.charger_06 .center_M{display: block; color:#FFF; text-align: center; margin-top:5vw; margin-bottom: 5vw;}
	.charger_06 .center_M .des{width:80%; margin:auto;}
	.charger_06 .center{display: none;}
}
@media screen and (max-width:1280px){
	.charger_06 .main_title{font-size: 2.5em;}
}
@media screen and (max-width:769px){
	.charger_06 .main_title{font-size: 2em;}
	.charger_06 .sub_title{font-size: 1.5em; }
	.charger_06 .des{font-size: 1.125em;}
}
@media screen and (max-width:480px){
	.charger_06 .main_title{font-size: 1.5em;}
	.charger_06 .sub_title{font-size: 1.125em; }
	.charger_06 .des{font-size: 1em;}
}
@media screen and (min-width:961px){
	.charger_06_img_M{display: none;}
	.charger_06 .all_text{float: right; }
}
@media screen and (max-width:960px){
	.charger_06_img_M{display: block;}
	.charger_06_bg{background:none;}
	.charger_06 .all_text{width:540px; margin:auto;}
	.charger_06 .all{margin-top:0;}
}
@media screen and (max-width:768px){
	.charger_06 .des{display: none;}
}
@media screen and (max-width:540px){
	.charger_06 .all_text{width:100%;}
}
@media screen and (min-width:769px){
	.charger_06 .charger_buy{position: absolute; bottom:-30%; width:100%;}
	.charger_06 li:hover .charger_buy{background-color:rgba(255,255,255,0.5);overflow:visible; position: absolute; bottom:0px; width:100%; height: 30%; transition: 0.5s;}
}
@media screen and (max-width:768px){
	.charger_06 li{width:49%; margin-right:2%; background-color:#FFF; margin-bottom: 2vw; text-align: center;}
	.charger_06 li:nth-child(2n){margin-right:0;}
	.charger_06 .title{font-size: 1.5em; top:8%;}
	.charger_06 .charger_buy{position: relative; margin-bottom: 3vw; bottom:0;}
	.charger_06 li:hover .charger_buy{position: relative;}
}





















