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