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%); }