261 lines
8.6 KiB
CSS
Executable File
261 lines
8.6 KiB
CSS
Executable File
.banner{position: absolute; top:10.4vw; right:10vw; color:#FFF}
|
|
.title{font-size: 4em; text-transform: Uppercase; font-weight: 600; line-height: 1.35em; letter-spacing: -2px;}
|
|
.text{font-size: 1.125em;}
|
|
.banner .sub_title{font-size: 2.25em; margin-top:1.8vw;text-align: center;}
|
|
.banner .button{
|
|
font-size: 1.5em;
|
|
margin-top:5.8vw;
|
|
text-align: center;
|
|
}
|
|
|
|
.banner .button span{
|
|
background: linear-gradient(right,#6d36f5,#3c65ff);
|
|
background: -ms-linear-gradient(right,#6d36f5,#3c65ff);
|
|
background: -webkit-linear-gradient(right,#6d36f5,#3c65ff);
|
|
background: -o-linear-gradient(right,#6d36f5,#3c65ff);
|
|
background: -moz-linear-gradient(right,#6d36f5,#3c65ff);
|
|
padding:2.5% 8%;
|
|
border-radius: 2em;
|
|
color:#FFF;
|
|
}
|
|
@media screen and (max-width:1366px){
|
|
.banner{position: absolute; top:10.4vw; right:6vw; color:#FFF}
|
|
.banner .sub_title{font-size: 1.8em;}
|
|
.title{font-size: 3em;}
|
|
.text{font-size: 1em;}
|
|
.banner .button{font-size: 1em; }
|
|
}
|
|
.backuper{position: absolute; background-color:#1f97ff; color:#FFF; }
|
|
.backuper .text{font-size: 1.5em; line-height: 1.5em;}
|
|
.video{margin-top:5.2vw; margin-bottom: 5.2vw; color: #333; overflow: hidden;}
|
|
.video .left{width:68%; float: left;}
|
|
.video .right{width:27%; float: left; margin-left:5%;}
|
|
.video .text{line-height: 1.7em; font-size: 1.125em;}
|
|
.backuper_03 {width:16.25%; left:7%; top:3.5vw; padding:3vw 8vw;}
|
|
.backuper_03 .title {text-align: center;}
|
|
.backuper-b { padding-top: 1.9vw;}
|
|
.backuper-80 {padding:0.8em 0;}
|
|
.backuper-btn {background: #fff;border-radius:40px; padding:10px 0;color:#1f97ff; font-size: 1.6em;text-align: center;width:70%;margin:1.6vw auto 0;}
|
|
.backuper_03 .icon-text{ margin:4vw auto;width:100%; text-align: center;}
|
|
.backuper_03 .icon-text li {width:48%; display: inline-block; margin-bottom: 2vw;font-size: 1.25em;}
|
|
.backuper_04{}
|
|
.backuper_04 li {display: block;float: left;width:25%;position: relative;}
|
|
.back-abso {width:100%; text-align: center;position: absolute;bottom:3vw; color: #fff;}
|
|
.font-big {font-size: 2em;}
|
|
.font-small {font-size: 1.25em;padding-top:1vw;}
|
|
.backuper-100 {padding-top:2.7em;color: #666;}
|
|
.font-12 {color:#1f97ff;font-size: 1em;}
|
|
|
|
.backuper_05{color:#1d1d1d; position: absolute; top:10vw; left:15%; width:35%;}
|
|
.backuper_05 .text{width:75%; line-height: 1.5em; margin-top:3.5vw;}
|
|
.backuper_06{width:34%; right:10%; top:7.5vw; position: absolute; color:#FFF; text-align: center;}
|
|
.backuper_06 .title{line-height: 1.125em;}
|
|
.backuper_06 .sub_title{font-size: 1.5em; text-align: center; margin-top:1.5vw; line-height: 1.5em;}
|
|
.backuper_06 ul{width:100%; margin-top:3vw;}
|
|
.backuper_06 ul li{background-color:#002755; float: left; width:48%; margin-right: 2%; margin-bottom: 1vw; padding-top:3vw; padding-bottom: 3vw;}
|
|
.backuper_06 ul li:nth-child(2n){margin-right: 0;}
|
|
.backuper_06 .number{color:#1f97ff; font-size: 3em;}
|
|
.backuper_06 .number_text{font-size: 1.5em; color:#FFF; margin-top:1.5vw;}
|
|
.backuper_07{width:24%; right:5%; padding:7vw 2vw; top:9vw;}
|
|
.backuper_07 .title{line-height: 1.125em;padding-left: 1.5em;}
|
|
.backuper_07 .text{width:85%; margin-top:2.5vw;padding-left: 4em;}
|
|
.backuper_08{width:22%; left:35%; padding:5vw 2vw; top:9vw;}
|
|
.backuper_08 .title{line-height: 1.125em;padding-left: 1.5em; }
|
|
.backuper_08 .text{width:85%; margin-top:2.5vw;padding-left: 4em;}
|
|
.backuper_09{width:38%; right:4%; top:4vw; padding:5.5vw 5vw;}
|
|
.backuper_09 .title{line-height: 1.125em;}
|
|
.backuper_09 .text{width:60%; margin-top:4vw;}
|
|
.backuper_09 .button{background-color:#FFF; padding:1vw 3vw; color:#1f97ff; font-size: 1.875em; display: inline-block; margin-top: 3vw;}
|
|
|
|
@media screen and (max-width:1830px) {
|
|
.backuper_09{width:42%}
|
|
}
|
|
@media screen and (max-width:1680px){
|
|
.backuper_03 {width:24%; left:7%; top:7.5vw; padding:5vw 5vw;}
|
|
.backuper_05 {left:7%; top:7vw; width:40%}
|
|
.backuper_06{width:38%; right:7%;}
|
|
.backuper_06 .number{font-size: 2em;}
|
|
.backuper_06 .number_text{font-size: 1.125em;}
|
|
.backuper_06 ul li{padding-top:2vw; padding-bottom: 2vw;}
|
|
.backuper_07{width:28%; right:7%;}
|
|
.backuper_08{ width:28%;top:10vw;}
|
|
.backuper_09{padding:4vw 3vw; width:50%;}
|
|
.backuper_09 .text{margin-top:2vw}
|
|
.backuper_04 .contentAll .sub_title{font-size: 2.5em; margin-top: 3.2vw;}
|
|
.backuper_04 .contentAll .text{font-size: 1.25em; margin-top:1.3vw; }
|
|
.backuper_04 .button{font-size: 3em;}
|
|
}
|
|
@media screen and (max-width:1200px){
|
|
.backuper_03 {width:28%; left:7%; top:0; padding:4vw 4vw;}
|
|
.backuper .text{font-size: 1.25em;}
|
|
.backuper_06 .sub_title{font-size: 1.25em;}
|
|
.backuper_07{top:6vw;}
|
|
.backuper_08{top:10vw;width:24%;}
|
|
.backuper_08 .text{width:95%;}
|
|
.backuper_09 .text{width:70%;}
|
|
.backuper_09 .button{font-size: 1.25em;}
|
|
.backuper_04 .contentAll .sub_title{font-size: 2em; margin-top: 3.2vw;}
|
|
.backuper_04 .contentAll .text{font-size: 1.125em; margin-top:1.3vw; }
|
|
.backuper_04 .button{font-size: 2.53em;}
|
|
.contentAll li:nth-child(3){width:32%; margin-right: 2%;}
|
|
.contentAll li:nth-child(4){width:25%; margin-right: 2%;}
|
|
.contentAll li:nth-child(5){width:34%; margin-right: 0;}
|
|
.backuper_04 .all_content{width:90%;}
|
|
.font-big {font-size: 1.5em;}
|
|
.font-small {font-size: 1em;padding-top:1vw;}
|
|
.backuper-80 {padding:0.6em 0;}
|
|
}
|
|
@media screen and (max-width:900px){
|
|
.backuper_03 {width:34%; left:7%; top:3vw; padding:4vw 4vw;}
|
|
.backuper .text{font-size: 1em;}
|
|
.backuper_05 {left:7%; top:7vw; width:60%}
|
|
.backuper_06 {width:45%; top:5vw}
|
|
.backuper_06 .number{font-size: 1.5em;}
|
|
.backuper_06 .number_text{font-size: 1em;}
|
|
.backuper_06 .sub_title{font-size: 1.25em;}
|
|
.backuper_07{width:35%;}
|
|
.backuper_08{width:28%;}
|
|
.backuper_09 .button{font-size: 1em;}
|
|
.backuper_09 .text{width:100%;}
|
|
.backuper_04 .button{font-size: 2em;}
|
|
.backuper_04 .contentAll .sub_title{font-size: 1.5em; margin-top: 3.2vw;}
|
|
.backuper_04 .contentAll .text{font-size: 1em; margin-top:1.3vw; }
|
|
.font-big {font-size: 1.2em;}
|
|
.font-small {font-size: 0.9em;}
|
|
.back-abso {width:100%; text-align: center;position: absolute;bottom:1.5vw; color: #fff;}
|
|
.backuper_03 .icon-text li {width:48%; display: inline-block; margin-bottom: 0;font-size: 1em;line-height: 1.2em;}
|
|
.backuper_03 .icon-text li img {width: 30%;}
|
|
.backuper-btn {background: #fff;border-radius:40px; color:#1f97ff; font-size: 1.2em;text-align: center;width:40%;margin:1vw auto 0;padding:0;}
|
|
.backuper_03 .icon-text{ margin:1vw auto;width:100%; text-align: center;}
|
|
.video .text{line-height: 1.5em; font-size: 1em;}
|
|
.backuper-80 {padding:0.4em 0;}
|
|
|
|
}
|
|
video{width:100%; display: block; color:}
|
|
/*轮播*/
|
|
.container{
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.preview-backer {
|
|
text-align: center;
|
|
padding: 5px;
|
|
position: absolute;
|
|
width:100%;
|
|
bottom: 20px;
|
|
}
|
|
.preview-backer a {
|
|
display: inline-block;
|
|
margin: 5px;
|
|
width: 290px;
|
|
height: 110px;
|
|
}
|
|
.preview-backer img {
|
|
display: block;
|
|
width: 290px;
|
|
height: 110px;
|
|
border-top: 3px solid #fff;
|
|
border-left: 3px solid #fff;
|
|
border-right: 3px solid #fff;
|
|
}
|
|
.active {
|
|
|
|
}
|
|
.pre-backer-text {background: #ecf6ff; width: 290px;height:30px;color: #333;font-size: 1.2em;padding:10px 0; border-bottom: 3px solid #fff; border-left: 3px solid #fff;border-right: 3px solid #fff;}
|
|
|
|
.slider-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
background-color: #444;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.slider {
|
|
position: relative;
|
|
width: 9999px;
|
|
}
|
|
.slider:before,
|
|
.slider:after {
|
|
display: table;
|
|
content: ' ';
|
|
}
|
|
.slider:after {
|
|
clear: both;
|
|
}
|
|
.slider__item {
|
|
position: relative;
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
.slider__item img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.slider__switch span {
|
|
color: #fff;
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
/* Arrows */
|
|
.slider__switch {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -20px;
|
|
padding: 10px 5px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
border-radius: 1px;
|
|
background: #000;
|
|
opacity: .3;
|
|
transition: opacity .15s ease;
|
|
fill: #fff;
|
|
}
|
|
.slider__switch--prev {
|
|
left: 10px;
|
|
}
|
|
.slider__switch--next {
|
|
right: 10px;
|
|
}
|
|
|
|
.slider__switch:hover {
|
|
opacity: .85;
|
|
}
|
|
.slider__switch[disabled] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider.has-touch {
|
|
cursor: move;
|
|
cursor: -webkit-grabbing;
|
|
cursor: -moz-grabbing;
|
|
}
|
|
@media (max-width: 580px) {
|
|
.slider__switch {
|
|
display: none;
|
|
}
|
|
.slider__caption {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
|