/*公共样式*/ .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;} }