150 lines
6.6 KiB
CSS
Executable File
150 lines
6.6 KiB
CSS
Executable File
/*公共样式*/
|
|
.transparent_title{font-size: 3em; line-height: 1.5em;}
|
|
.transparent_subtitle{font-size: 1.75em; margin-top:5%; line-height: 1.5em;}
|
|
.transparent_text{font-size: 1em; margin-top:1.8%; padding-top: 2em; line-height: 1.8em;}
|
|
@media screen and (max-width:1440px){
|
|
.transparent_title{font-size: 2.125em; line-height: 1.3em;}
|
|
.transparent_subtitle{font-size: 1.5em; margin-top:2%; line-height: 1.5em;}
|
|
.transparent_text{font-size: 1em; margin-top:2%; line-height: 1.8em;}
|
|
}
|
|
@media screen and (max-width:768px){
|
|
.transparent_title{font-size: 2em; line-height: 1.3em;}
|
|
.transparent_subtitle{font-size: 1.125em; margin-top:2%; line-height: 1.5em;}
|
|
.transparent_text{font-size: 0.9em; margin-top:2%; line-height: 1.8em;}
|
|
}
|
|
@media screen and (max-width:1024px){
|
|
.transparent_text{display: none;}
|
|
}
|
|
/*第一屏*/
|
|
.transparent_01{position: absolute; width:100%; color:#FFF; top:17%; font-size: 2em}
|
|
.transparent_01 .title{font-size: 2.125em; line-height: 2.5em;}
|
|
.transparent_01 .text{font-size: 1em;}
|
|
@media screen and (max-width:1440px){
|
|
.transparent_01{font-size: 1.5em}
|
|
}
|
|
@media screen and (max-width:768px){
|
|
.transparent_01{font-size: 1em; top:10%; left:5%;}
|
|
.transparent_01 .title{line-height: 1.875em;}
|
|
}
|
|
/*第二屏*/
|
|
.transparent_02_bg{width:100%; background:url(../../images/transparent/transparent_02.jpg) no-repeat; padding-top:5%; padding-bottom: 5%; overflow: hidden;}
|
|
.transparent_02{width:100%;}
|
|
.transparent_02 .left{width:29%; float: left;}
|
|
.transparent_02 .right{width:69%; float: right; position: relative}
|
|
.transparent_02 .right img{opacity: 0;}
|
|
@media screen and (max-width:768px){
|
|
.transparent_02 .left{width:100%; text-align: center; margin-bottom: 3%;}
|
|
.transparent_02 .right{width:100%; float: left; }
|
|
}
|
|
.transparent_02 video{position: absolute; top:0; left:0; width:100%; }
|
|
/*第三屏*/
|
|
.transparent_03{position: absolute; top:11.5%; width:100%;}
|
|
.transparent_03_alltext{width:46%;}
|
|
@media screen and (max-width:768px){
|
|
.transparent_03_alltext{width:90%;}
|
|
|
|
}
|
|
.transparent_03 .transparent_subtitle{margin-top:3.5%}
|
|
/*第四屏*/
|
|
.transparent_04{position: absolute; top:30%; width:100%;}
|
|
.transparent_04_alltext{width:34%;}
|
|
|
|
/*第五屏*/
|
|
.transparent_05{position: absolute; top:12%; width:100%;}
|
|
.transparent_05_alltext{width:27%; float:right; text-right:right; margin-right:10%;}
|
|
|
|
/*第六屏*/
|
|
.transparent_06_text{font-size: 1.25em; color:#333333;}
|
|
.transparent_06{background-color:#f2f2f2; overflow: hidden; padding-top:3.5%; padding-bottom: 3.5%;}
|
|
.transparent_06_four{width:100%; margin-top:3%;}
|
|
.transparent_06_two{width:100%;}
|
|
.transparent_06_four li{width:24.1%; margin-right:1.2%; float: left; position: relative; overflow: hidden; margin-bottom: 3.5%;}
|
|
.transparent_06_four li:hover{box-shadow: 0px 5px 15px rgba(0,0,0,0.2)}
|
|
.transparent_06_four .text{position: absolute; width:96%; text-align: center; top:14%; left:2%}
|
|
@media screen and (min-width:461px){
|
|
.transparent_06_four li .transparent_buy{position: absolute; bottom:-30%;}
|
|
.transparent_06_four li:hover .transparent_buy{display: none; background-color:rgba(255,255,255,0.5); overflow: hidden; position: absolute; bottom:0px; width:100%; height: 30%; transition: 0.5s;}
|
|
|
|
}
|
|
.transparent_buy .transparent_buy_button{position: relative; top:50%; margin-top:-1.5em; width:100%; text-align: center;}
|
|
.transparent_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: 1em; }
|
|
.transparent_buy a:hover{background-color:#009fe0; color:#FFF; border:1px solid transparent; }
|
|
.transparent_06_four li:hover .transparent_buy{display: block;}
|
|
|
|
.transparent_06_two li{width:49.3%; margin-right:1.2%; float: left; position: relative; margin-bottom: 2%}
|
|
.transparent_06_two li:last-child{margin-right: 0;}
|
|
.transparent_06_two .all_text{position: absolute; top:27%; left:5%; width:50%;}
|
|
.transparent_06_two .title, .transparent_06_one .title{margin-bottom: 5%;}
|
|
.transparent_06_two .subtitle, .transparent_06_one .subtitle{font-size: 1.25em; color:#333333; margin-bottom: 10%;}
|
|
.transparent_06_two .transparent_buy a, .transparent_06_one .transparent_buy a{margin-left:0;}
|
|
|
|
.transparent_06_one{width:100%; position: relative; overflow: hidden; background-color:#FFF; margin-bottom: 2.5%;}
|
|
.transparent_06_one .all_text{position: absolute; top:26%; left:10%; width:30%;}
|
|
@media screen and (min-width:991px){
|
|
.transparent_06_four li:nth-child(4n){margin-right:0;}
|
|
}
|
|
|
|
@media screen and (max-width:1400px){
|
|
.transparent_06_text{font-size: 1.2em}
|
|
.transparent_buy a{font-size: 1em;}
|
|
.transparent_06_two .subtitle, .transparent_06_one .subtitle{font-size: 1em;}
|
|
}
|
|
@media screen and (min-width:768px) and (max-width:990px){
|
|
.transparent_06_four li{width:32%; margin-right:2%}
|
|
.transparent_06_four li:nth-child(3n){margin-right:0px;}
|
|
.transparent_06_two li:last-child{margin-right: 0;}
|
|
|
|
}
|
|
@media screen and (min-width:768px) and (max-width:960px){
|
|
.transparent_06_two .subtitle, .transparent_06_one .subtitle{display: none;}
|
|
.transparent_06_two .transparent_buy, .transparent_06_one .transparent_buy{margin-top:15%;}
|
|
}
|
|
@media screen and (max-width:767px){
|
|
.transparent_06_four li{width:46%; margin-left:2%; margin-right:2%;}
|
|
.transparent_06_four li:nth-child(2n){margin-right:0}
|
|
.transparent_06_two li{width:96%; margin-left:2%; margin-right:2%;}
|
|
.transparent_06_one{width:96%; margin-left:auto; margin-right: auto;}
|
|
.transparent_06_one .all_text{left:5%; width:50%; top:20%;}
|
|
.transparent_06_two .title, .transparent_06_one .title{margin-bottom: 5%;}
|
|
.transparent_06_one .subtitle{margin-bottom: 5%; display: none;}
|
|
|
|
.transparent_06_four li{background-color:#FFF; overflow: visible;}
|
|
|
|
}
|
|
@media screen and (max-width:460px){
|
|
.transparent_buy a{margin-left:1.5%; margin-right:1.5%; padding-left:3%; padding-right: 3%;}
|
|
.transparent_06_four .text{top:8%;}
|
|
.transparent_06_one .all_text{top:12%;}
|
|
.transparent_06_four li .transparent_buy{bottom: 0;}
|
|
.transparent_06_two .subtitle{display: none;}
|
|
.transparent_06_four li .transparent_buy{height: 20%;}
|
|
.transparent_06_four li:hover .transparent_buy{height: 20%;}
|
|
.transparent_06_four li .transparent_buy{margin-bottom:1em}
|
|
.transparent_06_four li:hover .transparent_buy{margin-bottom:1em}
|
|
|
|
}
|
|
@media screen and (min-width:461px) and (max-width:768px){
|
|
.transparent_06_four li .transparent_buy{overflow: hidden; position: absolute; bottom:0px; width:100%; height: 30%; transition: 0.5s;}
|
|
.transparent_06_four li .transparent_buy{height: 16%;}
|
|
.transparent_06_four li:hover .transparent_buy{height: 16%;}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|