@charset "utf-8"; @import "./top-nav.css"; @import "./intelligent-nav.css"; @import "./banner-list.css"; @import "./car-policy.css"; @import "./car-equity.css"; @import "./buy-some.css"; @import "./highlight-overview.css"; @import "./page-explore.css"; @import "./page-config.css"; @import "./wonder-appr.css"; @import "./test-drive.css"; /* 公共样式 */ .levelindex { z-index: 0; position: relative; } .bgfilter { -webkit-filter: blur(15px); filter: blur(15px); -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; pointer-events: none; } .bodyswiper { height: -webkit-calc(var(--vh) * 100); height: -moz-calc(var(--vh) * 100); height: calc(var(--vh) * 100); } .bodyswiper .section-title { font-size: 0.48rem; color: #000000; line-height: 0.53rem; top: 12%; width: 100%; text-align: center; position: absolute; z-index: 3; } .bodyswiper .section-title sup { font-size: 0.24rem; line-height: 0.24rem; vertical-align: top; } .bodyswiper .swiper-scroll { overflow-y: auto; } .bodyswiper .swiper-slide { opacity: 1; } .loading { position: fixed; top: 0; width: 100%; height: -webkit-calc(var(--vh) * 100); height: -moz-calc(var(--vh) * 100); height: calc(var(--vh) * 100); left: 0; z-index: 90; } .loading.cur { -webkit-animation: zindex 0.1s 2.7s ease both; -moz-animation: zindex 0.1s 2.7s ease both; -o-animation: zindex 0.1s 2.7s ease both; animation: zindex 0.1s 2.7s ease both; } .loading.cur .white-bg { -webkit-animation: loading 1.2s 1.5s ease-in-out both; -moz-animation: loading 1.2s 1.5s ease-in-out both; -o-animation: loading 1.2s 1.5s ease-in-out both; animation: loading 1.2s 1.5s ease-in-out both; } .loading.cur .imgloading { -webkit-animation: numscale 1.4s 1.5s ease-in-out both; -moz-animation: numscale 1.4s 1.5s ease-in-out both; -o-animation: numscale 1.4s 1.5s ease-in-out both; animation: numscale 1.4s 1.5s ease-in-out both; } .loading .imgloading { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); height: 100%; -o-object-fit: cover; object-fit: cover; } .loading .white-bg { background-color: #fff; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } @-webkit-keyframes numscale { 0% { -webkit-transform: scale(1.4); transform: scale(1.4); } 100% { -webkit-transform: scale(18); transform: scale(18); } } @-moz-keyframes numscale { 0% { -moz-transform: scale(1.4); transform: scale(1.4); } 100% { -moz-transform: scale(18); transform: scale(18); } } @-o-keyframes numscale { 0% { -o-transform: scale(1.4); transform: scale(1.4); } 100% { -o-transform: scale(18); transform: scale(18); } } @keyframes numscale { 0% { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); } 100% { -webkit-transform: scale(18); -moz-transform: scale(18); -o-transform: scale(18); transform: scale(18); } } @-webkit-keyframes zindex { 100% { z-index: -1; } } @-moz-keyframes zindex { 100% { z-index: -1; } } @-o-keyframes zindex { 100% { z-index: -1; } } @keyframes zindex { 100% { z-index: -1; } } @-webkit-keyframes loading { 0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 70% { -webkit-transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4); } 100% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } } @-moz-keyframes loading { 0% { -moz-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 70% { -moz-transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4); } 100% { -moz-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } } @-o-keyframes loading { 0% { -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 70% { -o-transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4); } 100% { -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } } @keyframes loading { 0% { -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 70% { -webkit-transform: translate(-50%, -50%) scale(4); -moz-transform: translate(-50%, -50%) scale(4); -o-transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4); } 100% { -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } } .anitop { -webkit-transform: translatey(50px); -moz-transform: translatey(50px); -ms-transform: translatey(50px); -o-transform: translatey(50px); transform: translatey(50px); opacity: 0; -webkit-transition: all 0.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .anitop:nth-child(2) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .anitop:nth-child(3) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .anitop:nth-child(4) { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .anitop:nth-child(5) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .cur .anitop { -webkit-transform: translatey(0); -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); transform: translatey(0); opacity: 1; } @media (max-width: 768px) { .bodyswiper .section-title { top: 11.6%; } }