html,body {
background-color: #000;
}
.w_100 {
width: 100%;
}
.fl {
float: left;
}
.fr {
float: right;
}
.yy-pc {
display: block;
}
.yy-wap {
display: none;
}
.yy-spe {
opacity: 0;
z-index: -1;
}
.swiper-slide .yy-wap{
display:none;
}
@media screen and (max-width:1000px){
.swiper-slide .yy-wap{
display:block;
}
.yy-pc {
display: none !important;
}
.yy-wap {
display: block;
}
}
/* kv */
.yy-container {}
/* video */
.yy-videoContainer {
position: relative;
overflow: hidden;
cursor: pointer;
}
.yy-videoContainer #video1 {
width: 100%;
}
.yy-videoContainer .yy-playBtn {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
pointer-events: none;
opacity: .5;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width:1000px){
.yy-videoContainer .yy-playBtn {
position: absolute;
left: 0 !important;
right: 0;
top: 0 !important;
bottom: 0;
margin: auto;
cursor: pointer;
width: 15%;
opacity: 1;
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
-o-transform: translateX(0) translateY(0);
}
}
/* 360 */
.yy-360Container {
position: relative;
}
.yy-360Container .yy-360Bg {
}
.yy-360Container .yy-360Content {
width: 62.5%;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
/* 临时 */
.yy-360Container .yy-360Content .d-carframes {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.yy-360Container .yy-360Content {
width: 100%;
height: 100%;
top: 0;
}
.yy-360Container .yy-360Content #carframes {
position: absolute;
width: 50%;
left: 0;
right: 0;
margin: auto;
top: 17%;
}
.yy-360Container .yy-cardContainer{
padding-left: 0 !important;
}
.yy-360Container .yy-cardContainer .yy-360Icon{
display: none;
}
.yy-360Container .yy-cardContainer ul li{
margin-left: 5.51%;
margin-right: 0 !important;
}
@media screen and (max-width:1000px){
.yy-360Container .yy-360Content #carframes {
position: absolute;
width: 86%;
top: 4%;
}
.yy-360Container .yy-cardContainer{
padding-left: 0% !important;
}
}
.yy-360Container .yy-360Content #carframes img {
width: 100%;
}
/* 临时 End */
.yy-360Container .yy-cardContainer {
max-width: 675px;
width: 60vw;
position: absolute;
left: 0;
right: 0;
bottom: 5%;
margin: auto;
background-color: rgba(255, 255, 255, .7);
border: 1px solid #fff;
padding-top: 0.5%;
padding-left: 1.5%;
padding-bottom: 0.5%;
}
.yy-360Container .yy-cardContainer ul {}
.yy-360Container .yy-cardContainer ul li {
float: left;
width: 8%;
margin-right: 5%;
cursor: pointer;
text-align: center;
}
.yy-360Container .yy-cardContainer ul li img {
width: 90%;
}
.yy-360Container .yy-cardContainer ul li.yy-act img {
border: 2px solid #8a8a8a;
}
.yy-360Container .yy-cardContainer .yy-360Icon {
position: absolute;
width: 9.44%;
top: -31%;
bottom: 0;
margin: auto;
right: 2%;
}
.yy-360Container .yy-cardContainer ul li p {
text-align: center;
color: #000;
font-weight: bold;
display: none;
font-size: 0.5vw;
}
.yy-360Container .yy-cardContainer ul li.yy-act p {
display: block;
margin-top: 10%;
}
@media screen and (max-width:1000px){
.yy-360Container .yy-cardContainer ul li p {
font-size: 1.5vw;
}
.d-carframes {
margin-top: 45%;
}
.yy-360Container .yy-360Content {
width: 100%;
}
.yy-360Container .yy-cardContainer {
width: 90%;
}
}
/* light */
.yy-lightContainer {
position: relative;
}
.yy-lightContainer .yy-lightTitContainer {
position: absolute;
width: 30%;
}
.yy-lightContainer .yy-lightTitContainer .yy-moreLightBtn {
cursor: pointer;
/* position: absolute; */
width: 38%;
/* bottom: -28%; */
/* right: 0%; */
margin-top: 88px;
animation: opacity-animation 2s infinite;
-webkit-animation: opacity-animation 2s infinite;
/* padding-top: 20px; */
font-size: 15px;
color: #1b1b1b;
letter-spacing: 1px;
}
.yy-lightContainer .yy-lightTitContainer .yy-moreLightBtn img {
height: 32px !important;
margin-right: 7px;
}
/* 1 */
.yy-light1Container .yy-light1TitContainer {
/* left: 0; */
right: 10%;
/* margin: auto; */
top: 11%;
}
/* .yy-light1Container .yy-light1TitContainer .yy-moreLightBtn {
position: absolute;
bottom: -28%;
right: 0%;
} */
.dongli {
/*position: absolute;*/
/*width: 80%;*/
top: 65%;
left: 13%;
}
.keji{
/*position: absolute;*/
/*width: 80%;*/
top: 4%;
right: 6%;
}
.kongyi{
/*position: absolute;*/
/*width: 80%;*/
top: 34%;
left: 38%;
background: radial-gradient(circle at center, #5151518f, #00000000);
}
.anquan{
/*position: absolute;*/
/*width: 80%;*/
top: 10%;
left: 10%;
background: radial-gradient(circle at center, #5151518f, #00000000);
}
.zhineng{
/*position: absolute;*/
/*width: 80%;*/
top: 10%;
right: 10%;
background: radial-gradient(circle at center, #5151518f, #00000000);
}
.jinggong{
/*position: absolute;*/
/*width: 80%;*/
top: 10%;
left: 10%;
/* background: radial-gradient(circle at center, #5151518f, #00000000); */
}
@media screen and (max-width:1000px){
.yy-lightContainer .yy-lightTitContainer .yy-moreLightBtn{
margin-top: 70px;
}
.yy-lightContainer .yy-lightTitContainer {
position: absolute;
width: 80%;
}
.dongli {
position: absolute;
width: 80%;
top: 15%;
left: 6%;
}
.keji{
position: absolute;
width: 80%;
top: 15%;
left: 6%;
}
.kongyi{
position: absolute;
width: 80%;
top: 15%;
left: 6%;
background: radial-gradient(circle at center, #7777778f, #00000000);
}
}
/* 2 */
.yy-light2Container .yy-light2TitContainer {
left: 8%;
top: 27%;
}
.yy-light2Container .yy-light2TitContainer .yy-moreLightBtn {
margin-left: 5%;
}
/* 3 */
.yy-light3Container .yy-light3TitContainer {
left: 60%;
top: 13%;
}
.yy-light3Container .yy-light3TitContainer .yy-moreLightBtn {
margin-left: 5%;
}
/* 4 */
.yy-light4Container .yy-light4TitContainer {
left: 8%;
top: 16%;
}
.yy-light4Container .yy-light4TitContainer .yy-moreLightBtn {
margin-left: 5%;
}
/* 5 */
.yy-light4Container .yy-light4TitContainer {
left: 8%;
top: 16%;
}
.yy-light4Container .yy-light4TitContainer .yy-moreLightBtn {
margin-left: 5%;
}
@media screen and (max-width:1000px){
.yy-light1Container .yy-light1TitContainer {
width: 80%;
top: 15%;
left: 6%;
}
/* .yy-light1Container .yy-light1TitContainer .yy-moreLightBtn {
right: auto;
left: 3%;
bottom: auto;
top: 105%;
} */
.yy-light2Container .yy-light2TitContainer {
width: 80%;
top: 10%;
}
.yy-light2Container .yy-light1TitContainer .yy-moreLightBtn {
right: auto;
left: 3%;
bottom: auto;
top: 105%;
}
.yy-light3Container .yy-light3TitContainer {
width: 80%;
top: 10%;
left: 8%;
}
.yy-light3Container .yy-light3TitContainer .yy-moreLightBtn {
right: auto;
left: 3%;
bottom: auto;
top: 105%;
}
.yy-light4Container .yy-light4TitContainer {
width: 80%;
top: 10%;
}
.yy-light4Container .yy-light4TitContainer .yy-moreLightBtn {
right: auto;
left: 3%;
bottom: auto;
top: 105%;
}
}
/* 配置表 */
.yy-configContainer {
position: relative;
}
.yy-configContainer .yy-configContent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
overflow: hidden;
}
.yy-configContainer .yy-configContent .yy-configTit {
text-align: center;
font-size: 2.4vw;
color: #fff;
position: absolute;
top: 2%;
width: 100%;
line-height: 1;
}
.yy-configContainer .yy-configContent .yy-configTab {
position: absolute;
top: 10%;
right: 29%;
width: 36%;
font-size: 1vw;
color: #fff;
}
.yy-configContainer .yy-configContent .yy-configTab span {
display: inline-block;
width: 17%;
padding-top: 2%;
padding-bottom: 2%;
text-align: center;
border: 1px solid #fff;
box-sizing: border-box;
cursor: pointer;
margin-left: 3.5%;
}
.yy-configContainer .yy-rightBtn {
position: absolute;
width: 3%;
top: 50%;
right: 6%;
cursor: pointer;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.yy-configContainer .yy-leftBtn {
position: absolute;
width: 3%;
top: 50%;
left: 6%;
cursor: pointer;
display: none;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
@media screen and (max-width:1000px){
.yy-configContainer .yy-configContent .yy-configTit {
font-size: 5vw;
}
.yy-configContainer .yy-configContent .yy-configTab {
width: 93%;
left:7%;
right: 0;
margin: auto;
top: 12%;
}
.yy-configContainer .yy-configContent .yy-configTab span {
font-size: 3vw;
}
}
.yy-configContainer .yy-configContent .yy-configTab span.yy-act {
background-color: #cc0211;
border-color: #cc0211;
}
.yy-configContainer .yy-configBox {
position: absolute;
width: 80%;
left: 0;
right: 0;
margin: auto;
top: 19%;
/* min-width: 990px; */
}
.yy-configContainer .yy-configBox .yy-pcSwiper {
position: relative;
}
.yy-configContainer .yy-configBox .yy-pcSwiper>div {
position: absolute;
width: 99%;
left: 0;
top: 0;
}
.yy-pcSwiper>div.yy-none {
opacity: 0;
z-index: -1;
}
.yy-pcSwiper>div.yy-init {
opacity: 0;
}
.yy-pcSwiper .swiper-slide {
padding-bottom: 0.3%;
}
.yy-pcSwiper .swiper-slide .yy-carType {
width: 28.5%;
margin-right: 4.8%;
background-color: #fff;
text-align: center;
padding: 3% 1%;
float: left;
}
.yy-pcSwiper .swiper-slide .yy-carType:hover {
box-shadow: 7px 7px 10px #899292;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-carTypeTit {
font-size: 2vw;
font-weight: bold;
padding-bottom: 5%;
border-bottom: 1px solid #d2d2d2;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-carTypePrice {
font-size: 1.2vw;
padding-bottom: 5%;
padding-top: 5%;
border-bottom: 1px solid #d2d2d2;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-carTypePrice span {
font-size: 1.9vw;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-carTypeContent {
font-size: 1vw;
padding-top: 5%;
padding-bottom: 8%;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-carTypeContent p {
line-height: 2em;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toConfigBtn {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toLhConfigBtn {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toConfigBtn:hover {
background-color: #cc0211;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toLhConfigBtn:hover {
background-color: #cc0211;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toBuyCar {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toBuyCar3 {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toBuyCar:hover {
background-color: #cc0211;
}
.yy-pcSwiper .swiper-slide .yy-carType .yy-toBuyCar3:hover {
background-color: #cc0211;
}
.yy-pcSwiper .yy-pcSwiperPoint {
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: -5%;
}
/* wap */
.yy-configContainer .yy-configBox .yy-wapSwiper {
position: relative;
}
.yy-configContainer .yy-configBox .yy-wapSwiper>div {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.yy-wapSwiper>div.yy-none {
opacity: 0;
z-index: -1;
}
.yy-wapSwiper>div.yy-init {
opacity: 0;
}
.yy-wapSwiper .swiper-slide {
padding-bottom: 0.3%;
}
.yy-wapSwiper .swiper-slide .yy-carType {
width: 90%;
margin:0 auto;
background-color: #fff;
text-align: center;
padding: 5% 3%;
}
.yy-wapSwiper .swiper-slide .yy-carType:hover {
box-shadow: 7px 7px 10px #899292;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-carTypeTit {
font-size: 5vw;
font-weight: bold;
padding-bottom: 5%;
border-bottom: 1px solid #d2d2d2;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-carTypePrice {
font-size: 3vw;
padding-bottom: 5%;
padding-top: 5%;
border-bottom: 1px solid #d2d2d2;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-carTypePrice span {
font-size: 5vw;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-carTypeContent {
font-size: 3vw;
padding-top: 5%;
padding-bottom: 8%;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-carTypeContent p {
line-height: 3em;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toConfigBtn {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toLhConfigBtn {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toConfigBtn:hover {
background-color: #cc0211;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toLhConfigBtn:hover {
background-color: #cc0211;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toBuyCar {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toBuyCar3 {
text-align: center;
font-size: 1vw;
color: #fff;
width: 70%;
background-color: #1f2832;
margin: 0 auto;
padding: 3% 0;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toBuyCar:hover {
background-color: #cc0211;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toBuyCar3:hover {
background-color: #cc0211;
}
.yy-wapSwiper .yy-wapSwiperPoint {
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: -5%;
}
@media screen and (max-width:1000px){
.yy-configContainer .yy-configBox {
top: 22%;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toConfigBtn {
font-size: 3vw;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toBuyCar {
font-size: 3vw;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toBuyCar3 {
font-size: 3vw;
}
.yy-wapSwiper .swiper-slide .yy-carType .yy-toLhConfigBtn {
font-size: 3vw;
}
}
.swiper-pagination-switch {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
}
.swiper-active-switch {
width: 3%;
border-radius: 20px;
}
/* 配置表弹层 */
.screen-design5-box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: -100%;
background: #000;
z-index: 99;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
z-index: 1000;
}
.left {
right: 0;
}
.screen-design5-box .close{
width: 2.6%;
height: 2.6vw;
position: absolute;
right: 5%;
top: 4%;
cursor: pointer;
}
.screen-design5-box .box-title{
width: 100%;
height: 100px;
background: #000;
}
.screen-design5-box .box-title .car-type-title{
width: 305px;
margin: 30px 5%;
height: 40px;
}
.screen-design5-box .box-con{
width: 100%;
height: calc(100vh - 100px);
overflow: auto;
overscroll-behavior: contain;
-ms-scroll-chaining: contain;
}
.screen-design6-box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: -100%;
background: #000;
z-index: 99;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
z-index: 1000;
}
.screen-design8-box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: -100%;
background: #000;
z-index: 99;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
z-index: 1000;
}
.screen-design7-box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: -100%;
background: #000;
z-index: 99;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
z-index: 1000;
}
.left {
right: 0;
}
.screen-design6-box .close{
width: 2.6%;
height: 2.6vw;
position: absolute;
right: 5%;
top: 4%;
cursor: pointer;
}
.screen-design6-box .box-title{
width: 100%;
height: 100px;
background: #000;
}
.screen-design6-box .box-title .car-type-title{
width: 305px;
margin: 30px 5%;
height: 40px;
}
.screen-design6-box .box-con{
width: 100%;
height: calc(100vh - 100px);
overflow: auto;
overscroll-behavior: contain;
-ms-scroll-chaining: contain;
}
.screen-design8-box .close{
width: 2.6%;
height: 2.6vw;
position: absolute;
right: 5%;
top: 4%;
cursor: pointer;
}
.screen-design8-box .box-title{
width: 100%;
height: 100px;
background: #000;
}
.screen-design8-box .box-title .car-type-title{
width: 305px;
margin: 30px 5%;
height: 40px;
}
.screen-design8-box .box-con{
width: 100%;
height: calc(100vh - 100px);
overflow: auto;
overscroll-behavior: contain;
-ms-scroll-chaining: contain;
}
.screen-design7-box .close{
width: 2.6%;
height: 2.6vw;
position: absolute;
right: 5%;
top: 4%;
cursor: pointer;
}
.screen-design7-box .box-title{
width: 100%;
height: 100px;
background: #000;
}
.screen-design7-box .box-title .car-type-title{
width: 305px;
margin: 30px 5%;
height: 40px;
}
.screen-design7-box .box-con{
width: 100%;
height: calc(100vh - 100px);
overflow: auto;
overscroll-behavior: contain;
-ms-scroll-chaining: contain;
}
tr {
/*line-height: 36px;*/
background: #fff;
}
.table>thead>tr>th {
padding: 20px 0;
border: none;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
min-width: 100px;
}
.table>tbody>tr:first-child>td {
text-align: left;
border-top: 1px solid #ccc;
}
.table>thead>tr>th:not(:first-child) {
text-align: center;
}
.table>thead>tr>td {
font-size: 14px;
color: #333;
padding: 8px;
text-align: center;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.table>tbody>tr>td {
font-size: 14px;
color: #333;
padding: 8px;
border-left: 1px solid #ccc;
vertical-align: middle;
border-bottom: 1px solid #ccc;
min-width: 100px;
}
.table>tbody>tr>td:not(:only-child):first-child,
.table>thead>tr>th:first-child {
text-align: left;
border-right: 1px solid #ddd;
}
.table>thead>tr>th:not(:first-child) {
border-left: 1px solid #ddd;
}
.table>tbody>tr>td:not(:first-child) {
text-align: center;
border-left: 1px solid #ddd;
}
.b-border~tr td {
border-top-color: #333 !important;
}
.tr,
.tr1,
.tr2,
.tr3,
.tr4,
.tr5,
.tr6 {
display: none;
background-color: #fff;
}
.click.cut~.tr,
.click1.cut~.tr1,
.click2.cut~.tr2,
.click3.cut~.tr3,
.click4.cut~.tr4,
.click5.cut~.tr5,
.click6.cut~.tr6 {
display: table-row;
}
.click td:nth-child(1),
.click1 td:nth-child(1),
.click2 td:nth-child(1),
.click3 td:nth-child(1),
.click4 td:nth-child(1),
.click5 td:nth-child(1),
.click6 td:nth-child(1) {
padding-left: 8px;
background: url(/images/all-new-MAX/img/close_sta.png) no-repeat;
background-position: 94.2% center;
background-size: 16px;
cursor: pointer;
}
.click.cut td:nth-child(1),
.click1.cut td:nth-child(1),
.click2.cut td:nth-child(1),
.click3.cut td:nth-child(1),
.click4.cut td:nth-child(1),
.click5.cut td:nth-child(1),
.click6.cut td:nth-child(1) {
padding-left: 8px;
background: url(/images/all-new-MAX/img/open_sta.png) no-repeat;
background-position: 94.2% center;
background-size: 16px;
background-color: #4a4647;
color: #fff;
}
.container {
width: 100%;
background: #f3f3f3;
position: relative;
margin: 0 auto;
}
.container .text-center {
font-size: 2em;
padding: 3% 0;
text-align: center;
}
.container .cxtab {
position: absolute;
top: 50px;
right: 4%;
width: 23%;
}
.container .cxtab a {
display: inline-block;
width: 49%;
font-size: 12px;
padding: 3% 2%;
text-align: center;
background: #fff;
}
.container .cxtab .active_a {
background: #d30404;
color: #fff;
}
.container .table {
display: none;
}
.container .table thead {
width: 100%;
}
.container .table tbody {
width: 100%;
}
.container .active {
display: table;
}
.table_js {
padding-bottom: 1%;
}
.table_js .left {
float: left;
font-size: 12px;
color: #666;
}
.table_js .right {
width: 20%;
float: right;
font-size: 12px;
color: #666;
}
.table_js .right span {
margin-left: 10%;
}
@media screen and (max-width:1000px){
.screen-design5-box .close{
width: 30px;
height: 30px;
top: 5px;
right: 3%;
}
.screen-design5-box .box-title{
height: 40px;
}
.screen-design5-box .box-title .car-type-title{
width: auto;
height: 35px;
margin: 0;
margin-top: 3px;
}
.screen-design5-box .box-con{
height: calc(100vh - 40px);
}
.screen-design6-box .close{
width: 30px;
height: 30px;
top: 5px;
right: 3%;
}
.screen-design6-box .box-title{
height: 40px;
}
.screen-design6-box .box-title .car-type-title{
width: auto;
height: 35px;
margin: 0;
margin-top: 3px;
}
.screen-design6-box .box-con{
height: calc(100vh - 40px);
}
.screen-design8-box .close{
width: 30px;
height: 30px;
top: 5px;
right: 3%;
}
.screen-design8-box .box-title{
height: 40px;
}
.screen-design8-box .box-title .car-type-title{
width: auto;
height: 35px;
margin: 0;
margin-top: 3px;
}
.screen-design8-box .box-con{
height: calc(100vh - 40px);
}
.screen-design7-box .close{
width: 30px;
height: 30px;
top: 5px;
right: 3%;
}
.screen-design7-box .box-title{
height: 40px;
}
.screen-design7-box .box-title .car-type-title{
width: auto;
height: 35px;
margin: 0;
margin-top: 3px;
}
.screen-design7-box .box-con{
height: calc(100vh - 40px);
}
}
/* 弹层 */
.yy-shadowContainer {
position: fixed;
width: 100%;
height: 100%;
left: 100%;
top: 0;
background-color: #000;
transition: left 1s;
z-index: 9999;
}
@media screen and (max-width:768px){
.yy-shadowContainer {
background-color: #000;
}
}
.yy-shadowContainer .row1{
width: 100%;
overflow: hidden;
}
.yy-shadowContainer .row1 .text-box{
color: #fff;
width: 20%;
position: absolute;
top: 50%;
left: 0;
text-align: left;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.yy-shadowContainer .row1 .yy-pc-img{
width: 78%;
float: right;
}
.yy-shadowContainer .row1 .yy-text{
font-size: 1.5vw;
letter-spacing: 2px;
margin-top: 25px;
}
.yy-shadowContainer .row1 .text-con{
width: 80%;
font-size: .8vw;
line-height: 1.5vw;
letter-spacing: 1px;
}
.yy-shadowContainer .row1 .line{
width: 8%;
height: 1px;
background: #fff;
margin: 30px 0;
}
.yy-shadowContainer .row2 .row3-slide{
width: 40%;
margin-left: 5%;
}
.yy-shadowContainer .row4 .row3-slide{
width: 23.5%;
margin-right: 2%;
}
.yy-shadowContainer .row4 .row4-slide4{
margin-right: 0;
}
.yy-shadowContainer .row3{
width: 100%;
}
.yy-shadowContainer .row3-slide{
width: 29.5%;
float: left;
color: #fff;
text-align: left;
margin-right: 5%;
}
.yy-shadowContainer .row3-slide2 .text-box{
margin-left: 10%;
margin-bottom: 50px;
}
.yy-shadowContainer .row3 .row3-slide2 .yy-con{
width: 90%;
}
.yy-shadowContainer .row3 .row3-slide2 .yy-text{
margin-top: 0;
}
.yy-shadowContainer .row3-slide3{
margin-right: 0;
}
.yy-shadowContainer .row3 .yy-text{
font-size: 1.5vw;
letter-spacing: 2px;
margin-top: 25px;
}
.yy-shadowContainer .row4 .yy-text{
margin-top: 80px;
}
.yy-shadowContainer .row4 .row4-slide2 .yy-text,
.yy-shadowContainer .row4 .row4-slide4 .yy-text{
margin-top: 0;
}
.yy-shadowContainer .row4 .row4-slide2 .text-con,
.yy-shadowContainer .row4 .row4-slide4 .text-con {
margin-bottom: 100px;
}
.yy-shadowContainer .row3 .text-con{
width: 80%;
font-size: .8vw;
line-height: 1.5vw;
letter-spacing: 1px;
}
.yy-shadowContainer .row3 .line{
width: 8%;
height: 1px;
background: #fff;
margin: 30px 0;
}
.yy-shadowContainer.yy-act {
left: 0;
}
.yy-shadowContainer .yy-shadowContent {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.yy-shadowContainer .yy-close {
position: absolute;
width: 2%;
top: 10%;
left: 5%;
cursor: pointer;
z-index: 5;
}
.yy-shadowContainer .yy-leftBtn {
position: absolute;
width: 2%;
bottom: 5%;
left: 1%;
cursor: pointer;
display: none;
}
.yy-shadowContainer .yy-rightBtn {
position: absolute;
width: 2%;
bottom: 5%;
right: 1%;
cursor: pointer;
}
/* 视频弹层 */
.yy-videoShadow {}
.yy-videoShadow .yy-videoContent {
width: 100%;
}
.yy-videoShadow .yy-videoContent video {
width: 100%;
}
/* 亮点弹层 */
.yy-ligntShadowContainer {}
.yy-ligntShadowContainer .yy-lightBg-m {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
}
.yy-ligntShadowContainer .yy-lightBg-m-top {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.yy-ligntShadowContainer .yy-ligntShadowContent {}
.yy-ligntShadowContainer .yy-ligntShadowContent .swiper-slide {
text-align: center;
}
.yy-ligntShadowContainer .yy-ligntShadowContent img {
width: 100%;
margin: 0 auto;
margin-right: 1%;
}
.yy-lightShadowPoint {
text-align: center;
position: absolute;
bottom: 5%;
width: 100%;
left: 0;
display: none;
}
@media screen and (max-width:1000px){
/* 弹层 */
.yy-shadowContainer .yy-shadowContent {
width: 100%;
}
.yy-shadowContainer .yy-close {
width: 7%;
}
.yy-ligntShadowContainer .yy-ligntShadowContent img {
width: 100%;
}
.yy-ligntShadowContainer .yy-ligntShadowContent {
top: 50%;
left: 0;
right: auto;
bottom: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-box{
text-align: left;
margin-left: 5%;
}
/* .yy-ligntShadowContainer .yy-ligntShadowContent .yy-text {
font-size: 5vw;
color: #fff;
margin-top: 5%;
letter-spacing: 2px;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-con{
width: 80%;
font-size: 3vw;
color: #fff;
letter-spacing: 1px;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-box .line{
width: 5%;
height: 1px;
background: #fff;
margin: 5% 0;
} */
.swiper-active-switch {
width: 6%;
border-radius: 20px;
}
.yy-lightShadowPoint{
display: block;
}
}
@media screen and (min-width:768px) and (max-width:1000px){
.yy-shadowContainer .yy-close {
width: 4%;
}
.yy-ligntShadowContainer .yy-ligntShadowContent {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
top: 0;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .yy-text {
font-size: 2vw;
color: #fff;
margin-top: 1%;
letter-spacing: 2px;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-con{
width: 95%;
font-size: 1.5vw;
color: #fff;
letter-spacing: 1px;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-box .line{
width: 5%;
height: 1px;
background: #fff;
margin: 2% 0;
}
}
@media screen and (max-width:768px){
.yy-ligntShadowContainer .yy-ligntShadowContent .yy-text {
font-size: 5vw;
color: #fff;
margin-top: 5%;
letter-spacing: 2px;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-con{
width: 80%;
font-size: 3vw;
color: #fff;
letter-spacing: 1px;
}
.yy-ligntShadowContainer .yy-ligntShadowContent .text-box .line{
width: 5%;
height: 1px;
background: #fff;
margin: 5% 0;
}
}
/* 左侧导航栏 */
.tab-left{
width: 5%;
position: fixed;
left: 1%;
bottom: 10%;
color: #fff;
z-index: 91;
display: none;
}
.tab-left.show{
display: inherit;
}
.tab-left ul {}
.tab-left ul li {
position: relative;
width: 18px;
height: 18px;
margin: 7px;
margin-top: 18px;
}
.tab-left ul li a {
display: -webkit-box;
/* display: -ms-flexbox;
display: -webkit-flex;
display: flex; */
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.tab-left ul li a.active {
background-color: transparent;
overflow: hidden;
border-radius: 50%;
}
.tab-left ul li a img {
width: 100%;
}
.tab-left ul li a img.yy-navPoint {}
.tab-left ul li a img.yy-navPointAct {
display: none;
}
.tab-left ul li a.active img.yy-navPoint {
display: none;
}
.tab-left ul li a.active img.yy-navPointAct {
display: block;
}
/* .tab-left ul li a span {
height: 6px;
width: 6px;
background-color: #fff;
border-radius: 50%;
position: absolute;
z-index: 1;
border: 0;
transition: all 0.2s ease-in-out;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
} */
/* 左下角导航动画 */
/* .tab-left ul li a.active span {
border: 16px solid #fff;
box-sizing: content-box;
animation: fs-nav-animation 1s linear normal infinite;
border-radius: 50%;
box-shadow: 0 0 5px 5px rgb(255 255 255 / 15%);
} */
/* .tab-left ul li a.active span {
width: 10px;
height: 10px;
border: 3px solid #fff;
box-sizing: content-box;
border-radius: 50%;
box-shadow: 0 0 5px 5px rgb(255 255 255 / 15%);
background-color: transparent;
} */
.tab-left ul li>span {
position: absolute;
top: -1px;
left: 28px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
cursor: pointer;
}
@keyframes fs-nav-animation {
0% {
background-color:#fff;
border:0px solid #fff
}
39.9% {
background-color:#fff;
border:16px solid #fff
}
40% {
width:0;
height:0;
background-color:transparent;
border:16px solid #fff
}
100% {
width:16px;
height:16px;
background-color:transparent;
}
}
@keyframes opacity-animation{
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/* color */
/* color */
.yy-colorContainer {
padding-bottom: 10%;
background-color: #000;
position: relative;
}
.yy-colorContainer .yy-colorContent {}
.yy-colorContainer .yy-colorContent .yy-colorBox {
position: relative;
width: 14.28%;
/* margin-left: -7.835%; */
overflow: hidden;
transition: all 1s;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-whiteCar {
z-index: 1;
margin-left: 0;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-yellowCar {
z-index: 2;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-grayCar {
z-index: 3;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-orangeCar {
z-index: 4;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-blackCar {
z-index: 5;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-blueCar {
z-index: 6;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-yinCar {
z-index: 7;
}
.yy-colorContainer .yy-colorContent .yy-colorBox img {
transition: all 1s;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-act {
z-index: 8;
box-shadow: 0px 0px 20px 5px #333333;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.yy-colorContainer .yy-colorContent .yy-colorBox img.yy-colorShadowText {
position: absolute;
width: 100%;
left: 0;
right: 0;
opacity: 0;
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-act img.yy-colorShadowText {
opacity: 1;
/* transform: scale(1.3); */
}
.yy-colorContainer .yy-colorContent .yy-colorBox.yy-act img {
/* transform: scale(1.2); */
}
/* 色块 */
.yy-colorContainer .yy-cardContainer2{
padding-left: 0 !important;
z-index: 8;
}
.yy-colorContainer .yy-cardContainer2 .yy-360Icon{
display: none;
}
.yy-colorContainer .yy-cardContainer2 ul li{
margin-left: 5.51%;
margin-right: 0 !important;
}
.yy-colorContainer .yy-cardContainer2 {
max-width: 950px;
width: 60vw;
position: absolute;
left: 0;
right: 0;
bottom: 5%;
margin: auto;
background-color: rgba(255, 255, 255, .7);
background: linear-gradient(to right, #000, #b3b3b3 10%, #b3b3b3 90%, #000);
/* border: 1px solid #fff; */
padding-top: 0.5%;
padding-left: 1.5%;
padding-bottom: 0.5%;
}
.yy-colorContainer .yy-cardContainer2 ul {}
.yy-colorContainer .yy-cardContainer2 ul li {
float: left;
width: 8%;
margin-right: 5%;
cursor: pointer;
text-align: center;
}
.yy-colorContainer .yy-cardContainer2 ul li img {
width: 90%;
}
.yy-colorContainer .yy-cardContainer2 ul li.yy-act img {
border: 2px solid #8a8a8a;
/* border: 2px solid #fff; */
}
.yy-colorContainer .yy-cardContainer2 .yy-360Icon {
position: absolute;
width: 9.44%;
top: -31%;
bottom: 0;
margin: auto;
right: 2%;
}
.yy-colorContainer .yy-cardContainer2 ul li p {
text-align: center;
color: #000;
font-weight: bold;
display: none;
font-size: 0.5vw;
}
.yy-colorContainer .yy-cardContainer2 ul li.yy-act p {
display: block;
margin-top: 10%;
}
.yy-colorContainer_wap {
position: relative;
}
.yy-colorContainer_wap .yy-carColorPoint {
position: absolute;
width: 100%;
left: 0;
bottom: 0%;
text-align: center;
/*z-index: 3;*/
background-color: #000;
}
.table-fixed{
width: 99.11%;
position:fixed;
display:table;
transform:translate(0,-100%);
}