138 lines
6.3 KiB
CSS
Executable File
138 lines
6.3 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}
|
|
.banner .button{
|
|
font-size: 1.5em;
|
|
margin-top:7.6vw;
|
|
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; opacity: 0.85; }
|
|
.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; margin-top:1.9vw}
|
|
.backuper_03 {width:16.25%; left:7%; top:7.5vw; padding:7vw 8vw;}
|
|
.backuper_03 .text{line-height: 1.5em; margin-top:4vw;}
|
|
|
|
.backuper_04{background-color:#000e20; overflow: hidden; padding-top:5.2%; padding-bottom: 5.2%;}
|
|
.backuper_04 .all_content{width:79.3%; margin:auto;}
|
|
.backuper_04 .button{
|
|
width:100%;
|
|
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);
|
|
text-align: center;
|
|
color:#FFF;
|
|
font-size: 4em;
|
|
line-height: 1.93em;
|
|
border-radius: 1.93em;
|
|
font-weight: 600;
|
|
}
|
|
.backuper_04 .contentAll p{color:#FFF;}
|
|
.backuper_04 .contentAll .sub_title{font-size: 3em; margin-top: 3.2vw; line-height: 1.5em;}
|
|
.backuper_04 .contentAll .text{font-size: 1.5em; margin-top:1.3vw; line-height: 1.5em;}
|
|
.contentAll ul{width:100%}
|
|
.contentAll li{float: left; text-align: center; position: relative;}
|
|
.contentAll .line{background-color:#1f97ff; width:2.6vw; height:4px; display: inline-block;}
|
|
.contentAll li:nth-child(1){width:36%; margin-right: 8%; margin-left:13%; margin-bottom: 1vw;}
|
|
.contentAll li:nth-child(2){width:30%; margin-right:13%; margin-bottom: 1vw}
|
|
.contentAll li:nth-child(3){width:34%; margin-right: 2%;}
|
|
.contentAll li:nth-child(4){width:29%; margin-right: 2%;}
|
|
.contentAll li:nth-child(5){width:29%; margin-right: 0;}
|
|
.backuper_05{color:#1d1d1d; position: absolute; top:10vw; left:10%; 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:10%; padding:5vw 3vw; top:9vw;}
|
|
.backuper_07 .title{line-height: 1.125em;}
|
|
.backuper_07 .text{width:85%; margin-top:2.5vw;}
|
|
.backuper_08{width:22%; left:10%; padding:5vw 3vw; top:9vw;}
|
|
.backuper_08 .title{line-height: 1.125em;}
|
|
.backuper_08 .text{width:85%; margin-top:2.5vw;}
|
|
.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{left:7%; width:28%;}
|
|
.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){
|
|
.title{font-size: 2em;}
|
|
.backuper_03 {width:28%; left:7%; top:7.5vw; padding:4vw 4vw;}
|
|
.backuper .text{font-size: 1.25em;}
|
|
.backuper_06 .sub_title{font-size: 1.25em;}
|
|
.backuper_07{top:6vw;}
|
|
.backuper_08{top:6vw;}
|
|
.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%;}
|
|
}
|
|
@media screen and (max-width:900px){
|
|
.backuper_03 {width:34%; left:7%; top:5vw; 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:38%;}
|
|
.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; }
|
|
}
|
|
video{width:100%; display: block;} |