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; } @media screen and (max-width:1000px){ .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%; } } .colorBox{ position: relative; } .colorGroup{ width:100%; position: absolute; top: 0; height: 120px; display: flex; align-items: center; justify-content: center; /* padding-left: 20px; */ /* background-color: rgb(245 245 245 / 90%); */ } .yy-switchBtn{ width:180px; height:40px; line-height:40px; color:white; border:1px solid #fff; background-color:transparent; } .lingtuoColor{ display:none; } .activeColor{ background-color:#cc0211 !important; color:white !important; border:1px solid #cc0211; } #switchColorBtn2{ margin-left: 20px; } .switchColorBtn1,.switchColorBtn2{ border: 1px solid #cc0211; color: #cc0211; font-size: 16px; } /* light */ .yy-lightContainer { position: relative; } .yy-lightContainer .yy-lightTitContainer { position: absolute; width: 34%; height: 28%; top: 65%; left: 19%; } .yy-lightContainer .yy-lightTitContainer .yy-moreLightBtn { cursor: pointer; width: 38%; top: 80%; animation: opacity-animation 2s infinite; -webkit-animation: opacity-animation 2s infinite; } .yy-lightContainer .yy-lightTitContainer .more-gongyi { cursor: pointer; width: 38%; top: 78%; animation: opacity-animation 2s infinite; -webkit-animation: opacity-animation 2s infinite; } .yy-lightContainer .yy-lightGongyiTitContainer { position: absolute; width: 29.16%; top: 55%; } .yy-lightContainer .yy-lightGongyiTitContainer .yy-moreLightBtn { cursor: pointer; width: 38%; animation: opacity-animation 2s infinite; -webkit-animation: opacity-animation 2s infinite; } /* 1 */ .yy-light1Container .yy-light1TitContainer { left: 0; right: 0; margin: auto; top: -31%; left: -63%; display: flex; flex-direction: column; } .yy-light1Container .yy-light1TitContainer .yy-moreLightBtn { /* position: absolute; width: 38%; bottom: -5%; right: 3%; */ /* display: flex; justify-content: flex-start; padding-left: 53px; padding-top: 18px; */ display: flex; /* justify-content: center; */ /* padding-top: 4%; */ padding-left: 3%; } /* 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%; } .yy-lightContainer .yy-neishiTitContainer{ top: 65%; left: 63%; } .yy-lightContainer .yy-xingnengTitContainer{ top: 15%; left: 3%; } .yy-lightContainer .yy-anquanTitContainer{ top: 70%; left: 4%; } .yy-lightContainer .yy-kejiTitContainer{ top: 63%; left: 60%; } @media screen and (max-width:1000px){ .colorGroup{ width: 100%; display: flex; height: 70px; position: absolute; top: 0; z-index: 2; right: 0; left:0; margin: 0 auto; justify-content: center; } .yy-light1Container .yy-light1TitContainer { width: 80%; top: 10%; } /* .yy-light1Container .yy-light1TitContainer .yy-moreLightBtn { right: auto; left: 17%; bottom: auto; top: 67%; } */ .yy-lightContainer .yy-lightTitContainer .yy-moreLightBtn { cursor: pointer; width: 38%; top: 68%; animation: opacity-animation 2s infinite; -webkit-animation: opacity-animation 2s infinite; } .yy-lightContainer .yy-lightTitContainer{ width: 80%; top: 77%; left: 50%; transform: translateX(-50%); margin: auto; height: 24%; /* padding: 20px 0; */ } .yy-light2Container .yy-light2TitContainer { width: 80%; top: 10%; } .yy-light2Container .yy-light1TitContainer .yy-moreLightBtn { right: auto; left: 12%; bottom: auto; top: 65%; } .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: 3%; width: 100%; line-height: 1; } .yy-configContainer .yy-configContent .yy-configTab { position: absolute; top: 11%; right: 26%; width: 35%; font-size: 1vw; color: #fff; } .yy-configContainer .yy-configContent .yy-configTab span { display: inline-block; width: 30%; padding-top: 2%; padding-bottom: 2%; text-align: center; border: 1px solid #fff; box-sizing: border-box; cursor: pointer; /* margin-left: 25.5%; */ } /* @media screen and (min-width: 474px) { .yy-configContainer .yy-configContent .yy-configTab span:nth-child(1) { padding-left:6%!important; padding-right:6%!important; } } */ @media (max-width:768px){ .yy-configContainer .yy-configContent .yy-configTab span { display: inline-block; width: 35%; padding-top: 2%; padding-bottom: 2%; text-align: center; border: 1px solid #fff; box-sizing: border-box; cursor: pointer; /* margin-left: 25.5%; */ } .yy-configContainer .yy-configContent .yy-configTab span:nth-child(2) { margin: 0 6%!important; } } @media screen and (min-width: 769px){ .yy-configContainer .yy-configContent .yy-configTab span:nth-child(3) { padding-left:6%!important; padding-right:6%!important; } } @media screen and (min-width: 1001px) { /* .yy-configContainer .yy-configContent .yy-configTab span:nth-child(1) { padding-left:0!important; padding-right:0!important; } */ .yy-configContainer .yy-configContent .yy-configTab span:nth-child(2) { padding-left:0!important; padding-right:0!important; } .yy-configContainer .yy-configContent .yy-configTab span:nth-child(3) { padding-left:0!important; padding-right:0!important; } } .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: 100%; left: 13%; right: 0; margin: auto; top: 9%; } .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: 22%; /* min-width: 990px; */ } .yy-configContainer .yy-configBox .yy-pcSwiper { position: relative; } .yy-configContainer .yy-configBox .yy-pcSwiper>div { position: absolute; width: 100%; 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%; height: 100%; margin-right: 6.5%; background-color: #fff; text-align: center; padding: 1% 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-toConfigBtn: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-toBuyCar:hover { background-color: #cc0211; } .yy-pcSwiper .swiper-slide .yy-carType .yy-basicPayment { 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-basicPayment:hover { background-color: #cc0211; } .yy-pcSwiper .yy-pcSwiperPoint { text-align: center; position: absolute; left: 0; right: 0; bottom: -16%; } /* 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-toConfigBtn: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-toBuyCar:hover { background-color: #cc0211; } .yy-wapSwiper .swiper-slide .yy-carType .yy-basicPayment { 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-basicPayment: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: 17%; } .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-basicPayment { 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-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: 323px; margin: 40px 5%; height:20px; } .screen-design5-box .box-con{ width: 100%; height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; -ms-scroll-chaining: contain; } .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-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; } .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; } .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; } 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, .tr7 { 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, .click7.cut~.tr7 { 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), .click7 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), .click7.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: 18px; margin: 0; margin-top: 10px; } .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-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 .row4 .line{ width: 8%; height: 1px; background: #fff; margin: 30px 0; } .yy-shadowContainer .row2 .row3-slide{ width: 40%; margin-left: 5%; } .yy-shadowContainer .row4 .row4-slide{ width: 22.5%; margin-right: 3%; float: left; color: #fff; text-align: left; /* margin-right: 5%; */ } .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.2vw; letter-spacing: 2px; margin-top: 25px; } .yy-lignt1ShadowContainer .row3 .yy-text{ font-weight: 600; } .yy-shadowContainer .row4 .yy-text{ font-size: 1.2vw; letter-spacing: 2px; 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: 12.38%; /* 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.yy-jinCar { z-index: 8; } .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: 9; } .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: 1080px; width: 70vw; 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 { display: flex; justify-content: center; padding-right: 45px; } .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: 3%; text-align: center; z-index: 3; } .table-fixed{ width: 99.11%; position:fixed; display:table; transform:translate(0,-100%); } .more{ font-size:14px; color: #fff; display: flex; padding-left: 3%; /* padding-top: 4%; */ } .more img{ margin-right:5px; } .view360 .sub-title span.current { background: url(../images/ruimai/360/line.jpg) center bottom repeat-x } .changeCar-color { position: relative; } .changeCar-color .col-main-title { width: 100%; position: absolute; left: 0; top: 2%; font-size: 2em; text-align: center; } .changeCar-color .wrapCol { position: absolute; left: 40%; top: 10%; width: 20%; } .changeCar-color .wrapCol .cir { float: left; width: 24%; margin-right: 1%; cursor: pointer; } .changeCar-color .wrapCol .cir .img img { width: 100%; display: block; } .changeCar-color .wrapCol .cir .txt { display: none; font-size: 1em; text-align: center; } .changeCar-color .wrapCol .active .txt { display: block; } .changeCar-color .wrapCol .cir04 { margin: 0; } .changeCar-color .BlueCar { position: absolute; left: 50%; top: 40%; width: 56.18%; transform: translateX(-50%); } .changeCar-color .BlueCar img { width: 100%; } .changeCar-color .changeCar-colorbg img { width: 100%; display: block; } .jdtip360 p, .tip360 p { color: #0c0c0c; text-align: center; font-size: 18px; margin-bottom: 2.1%; } .jdtip360 ul, .tip360 ul { width: 90%; margin: 0 auto; display: flex; justify-content: space-between; } .jd .jdtip360 ul li { width: 10%; float: left; position: relative; } .no-jd .tip360 ul li { width: 16%; float: left; position: relative; } .jdtip360 ul li div, .tip360 ul li div { width: 75%; margin: 0 auto; height: 23px; border: 3px solid transparent; cursor: pointer } .jdtip360 ul li div.actColor, .tip360 ul li div.actColor { border-color: #dd0b1a; } .jdtip360 ul li span, .tip360 ul li span { display: block; text-align: center; font-size: 14px; margin-top: 9.6% } .jdtip360 { width: 78.5%; position: absolute; top: 15%; left: 50%; transform: translateX(-50%); } /* 朝日岳白 */ .asahiyueBai { background: #c3c3c5 } /* 贝加尔蓝 */ .baikalBlue { background: #2d4452 } /* 阿尔泰金 */ .altaijin { background: #917b66 } /* 橙色 */ .orange { background: #ed5a2a } /* 雷尼斯黑 */ .renesBlack { background: #282930 } .lan { background: #7c8eb4 } /* 纳艾卡银 */ .naikaSilver { background: #7a818b; } /* 卡奈斯灰 */ .kanasGrey { background: #4b4e55; } /* 瓦地伦黄 */ .waldenYellow { background: #d78b01 } /* 心悦蓝 */ .heartBlue { background: #85a5cc } /* 雅致银 */ .elegantSilver { background: #737984 } /* 深邃蓝 */ .deepBlue { background: #1F377E } /* 卡奈斯灰 */ .kanasGrey { background: #4A4D54 } /* 简约白 */ .simpleWhite { background: #B6B5BA } /* 工程黄 */ .engineeringYellow { background: #d78b01 } /* 伯爵黑 */ .countBlack { background: #23282F } .btn360 { position: absolute; top: 58%; left: 0; cursor: default; } .btn360.right360 { left: auto; right: 0 } .yy-lightContainer .yy-lightTitContainer .more-dongli{ /* position: absolute; width: 100%; left: 60px;top: 75%; */ } .more-gongyi{ font-size:16px; color: #fff; position: absolute; width: 100%; left: 64px;top: 180px; } .kongjian-dongli{ /* background: radial-gradient(circle at center, #000000a3, #00000000); */ height: 240px; left: 164px;bottom: 220px; padding: 20px 10px; } .kongjian{ height: 240px; left: 164px;bottom: 220px; /* background: radial-gradient(circle at center, #000000a3, #00000000); */ padding: 20px 10px; } .kongjian-gongyi{ /* background: radial-gradient(circle at center, #000000a3, #00000000); */ padding: 20px 10px; height: 240px; left: 34%; position: absolute; width: 29.16%; top: 20%; } @media screen and (max-width:1250px) { .more { left: 46px; top: 132px; } .yy-lightContainer .yy-lightTitContainer .more-dongli{ top: 124px; left: 46px; } .kongjian{ height: 180px; left: 164px;bottom: 220px; /* background: radial-gradient(circle at center, #000000a3, #00000000); */ padding: 20px 10px; } .kongjian-gongyi{ height: 180px; } .kongjian-dongli{ height: 180px; } .more-gongyi{ font-size:16px; color: #fff; position: absolute; width: 100%; left: 40px;top: 120px; } } @media screen and (max-width:1650px){ .yy-lightContainer .yy-lightTitContainer .more-gongyi{ top: 83%; left: 50px; } .more { left: 20px; top: 122px; } .more-dongli{ top: 168px; left: 40px; } .kongjian-dongli{ height: 200px; } .kongjian{ height: 200px; left: 164px;bottom: 220px; /* background: radial-gradient(circle at center, #000000a3, #00000000); */ padding: 20px 10px; } .kongjian-gongyi{ height: 160px; } .more-keji{ left: 46px; top: 142px; } .more-anquan{ left: 46px; top: 152px; } .more-kongjian{ left: 46px; top: 152px; } .more-xingge{ left: 60px; top: 152px; } .more-gongyi{ font-size:16px; color: #fff; position: absolute; width: 100%; left: 40px;top: 130px; } } @media screen and (max-width:1000px){ .changeCar-color .changeCar-colorbg img { width: 100%; height: 362px; display: block; } .yy-lightContainer .yy-lightTitContainer .more-gongyi { cursor: pointer; width: 38%; top: 73%; animation: opacity-animation 2s infinite; -webkit-animation: opacity-animation 2s infinite; } .more { left: 20px; top: 122px; } .more-dongli{ top: 168px; left: 40px; } .kongjian-dongli{ height: 200px; } .kongjian{ height: 200px; left: 164px;bottom: 220px; /* background: radial-gradient(circle at center, #000000a3, #00000000); */ padding: 20px 10px; } .kongjian-gongyi{ height: 160px; } .more-keji{ left: 46px; top: 142px; } .more-anquan{ left: 46px; top: 152px; } .more-kongjian{ left: 46px; top: 152px; } .more-xingge{ left: 60px; top: 152px; } .more-gongyi{ font-size:16px; color: #fff; position: absolute; width: 100%; left: 40px;top: 130px; } .view360 .cti-content { margin-left: 4%; width: 92% } .changeCar-color .col-main-title { font-size: 1em; } .changeCar-color .BlueCar { position: absolute; left: 50%; top: 58%; width: 70.18%; transform: translateX(-50%); } .jdtip360 ul { width: 93%; display: flex ; justify-content: center; } /*360 start*/ .jdtip360 { width: 100%; position: absolute; top: 20%; left: 50%; } .jdtip360 ul { width: 100%; display: flex; justify-content: center; } .jdtip360 p { font-size: 16px; margin-bottom: 4%; } .jdtip360 ul li div { width: 34px; height: 20px; } .jdtip360 ul li span { font-size: 12px; writing-mode: vertical-rl; letter-spacing: 5px; width: 40px; text-align: center; writing-mode: vertical-lr; max-width: 5ch; word-break: keep-all; white-space: nowrap; display: flex; align-items: center; justify-content: center; padding: 5px; } .view360 .cti-content { margin-left: 4%; width: 92% } .yy-switchBtn{ width: 162px; height: 30px; line-height: 30px; } .yy-wap_text div{ color: #fff; font-size: 5vw; } } .swiperText{ margin-bottom: 108px; } .swiperText span{ font-size:36px; color:#fff; font-weight:bold; margin:0 100px; } /* .sjSwilerText{ position: relative; } */ /* .sjText{ position: fixed; top: -34%; left: 50%; } */ .topText{ display: flex; justify-content: center; } .topText img{ width: 80px !important; height: 52px; margin:0 !important; } .swiper-slide{ overflow: visible !important; }