.section-banner{ position: relative; width: 100%; /* height: 96.46rem; */ height: 100vh; color: #fff; } .section-banner .banner-box{ width: 100%; height: 100%; } .section-banner .banner-box .banner-item{ width: 100%; height: 100%; } .section-banner .banner-box .banner-item .bgel{ width: 100%; height: 100%; } .section-banner .banner-box .banner-item .banner-mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner-mask .banner-mask-content{ width: 100%; height: 100%; position: relative; } .section-banner .banner-box .banner-item .banner1{ width: 100%; height: 100%; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } /* .banner-mask .banner-mask-content .banner1-car{ position: absolute; top: 25%; left: 12.3%; width: 78.125%; height: 58.7%; background-image: ; background-repeat: no-repeat; background-size: cover; } */ .banner-mask .banner-mask-content .banner1-text-top, .banner-mask .banner-mask-content .banner1-text-bottom{ width: 40%; height: 8.7%; border: none; border-top: 1px solid rgba(255,255,255,0.34); border-bottom: 1px solid rgba(255,255,255,0.34); display: flex; justify-content: center; align-items: center; } .banner-mask .banner-mask-content .banner1-text-top{ position: absolute; top: 17.5%; left: 33.5%; width: 42.5%; } .banner-mask .banner-mask-content .banner1-text-bottom{ position: absolute; top: 68.8%; left: 12.3%; } .banner-mask .banner-mask-content .banner1-text-top .banner1-text, .banner-mask .banner-mask-content .banner1-text-bottom .banner1-text{ width: 100%; /* font-size: 34px; */ font-size: 3.6rem; display: inline-block; white-space: nowrap; text-align: justify; font-family: 'alibaba_puhui_medium'; } .banner-mask .banner-mask-content .banner1-text-top .banner1-text::after, .banner-mask .banner-mask-content .banner1-text-bottom .banner1-text::after{ content: ''; display: inline-block; width: 100%; } .section-banner .banner-box .banner-item .banner2{ width: 100%; height: 100%; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; } .banner2-car{ position: absolute; left: 21%; top: 33%; width: 109.3rem; height: 49.6rem; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .banner2-text-top, .banner2-text-bottom{ font-family: 'alibaba_puhui_medium'; font-size: 5.8rem; line-height: 72px; color: #fff; padding-left: 10px; } .banner2-text-top{ position: absolute; left: 10.9375%; top: 13.5%; } .banner2-text-bottom{ position: absolute; left: 10.9375%; top: 20%; } .banner2-item1,.banner2-item2,.banner2-item3{ position: absolute; color: #cdd0d9; font-size: 1.8rem; } .banner2-item1{ top: 47.5%; left: 72%; } .banner2-item2{ top: 77.5%; left: 25.8%; } .banner2-item3{ top: 54.5%; left: 22.3%; } .section-banner .banner-box .banner-item .banner3{ width: 100%; height: 100%; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .banner3-text{ width: 61%; position: absolute; left: 19.5%; top: 33%; } .banner3-text-top{ /* width: 61%; height: 23rem; position: absolute; left: 19.5%; top: 33%; */ width: 100%; height: 23rem; margin-bottom: 1rem; background-image: ; background-size: cover; background-repeat: no-repeat; /* font-size: 232px; */ /* font-size: 23.5rem; letter-spacing: 1.6rem; text-shadow: 0 1.4rem 5.4rem rgba(3,11,21,0.14); */ } .banner3-text-bottom{ width: 100%; font-size: 4.8rem; letter-spacing: .2rem; display: inline-block; text-align: justify; font-family: "oswald_stencil_bold"; } .banner3-text-bottom::after{ content: ''; display: inline-block; width: 100%; } .banner3-text-img{ width: 1114px; height: 227px; background-image: ; background-repeat: no-repeat; background-size: cover; } .section-banner .banner-nav{ position: absolute; left: 10.9375%; bottom: 8.3%; width: 78.125%; height: 36px; padding-bottom: 20px; display: flex; justify-content: space-between; z-index: 10; } .section-banner .banner-nav .banner-nav-item{ position: relative; width: 27.5%; height: 100%; cursor: pointer; } .section-banner .banner-nav .banner-nav-item .nav-item{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; } .section-banner .banner-nav .banner-nav-item .nav-active{ opacity: 1; } .nav-item .nav-icon{ display: inline-block; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.18); display: flex; flex-shrink: 0; justify-content: center; align-items: center; /* font-size: 14px; */ font-size: 1.5rem; opacity: 0.7; } .nav-item .nav-text{ padding-left: 10px; padding-right: 5px; flex: 1; opacity: 0.67; /* font-size: 14px; */ font-size: 1.5rem; font-family: 'alibaba_puhui_regular'; } .nav-item .nav-next{ width: 12px; height: 8px; flex-shrink: 0; background-image: ; background-repeat: no-repeat; background-size: cover; opacity: 0.35; } .section-banner .banner-nav .banner-nav-item .prossbar{ margin-top: 20px; width: 100%; height: 1px; background: #fff; } .section-banner .banner-nav .banner-nav-item .prossbar-normal{ opacity: 0.2; } .section-banner .banner-nav .banner-nav-item .prossbar-active{ margin-top: 20px; width: 100%; height: 1px; background: #fff; opacity: 1; } .section-video{ width: 100%; height: 97rem; /* height: 100vh; */ position: relative; background-image: ; background-repeat: no-repeat; background-size: cover; } .video-mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: ; background-repeat: no-repeat; background-size: cover; } .section-video .video-intro{ width: 100%; height: 5rem; color: #000; margin: 0 auto; position: absolute; top: 5%; display: flex; align-items: center; justify-content: center; } .section-video .video-intro .intro-text{ width: fit-content; /* font-size: 30px; */ font-size: 3.2rem; font-weight: 600; } .section-video .video-box{ width: 136.3rem; height: 76.8rem; position: absolute; top: 12%; left: 14.5%; border-radius: 10px; background: #06090c; overflow: hidden; } .section-video .video-box .mongolia-video{ width: 100%; height: 100%; object-fit: cover; } .section-video .video-box .video-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; background-image: ; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .section-video .video-box .video-mask{ width: 100%; height: 100%; background-image: ; background-repeat: no-repeat; background-size: cover; }