.header { background: #1d1d1d url(https://yh.wanmei.com/images/cover240718/header.png) no-repeat right top; background-size: auto 125%; color: #aaaaaa; padding: 0 1.56vw 0 6.77vw; display: flex; align-items: center; justify-content: space-between; height: 4.43vw; position: sticky; top: 0; z-index: 99; } .header .logo img { width: 4.69vw; } .header ul.menu { display: flex; align-items: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .header ul.menu a { display: flex; align-items: center; justify-content: center; position: relative; width: 9.38vw; height: 4.43vw; font-size: 0.94vw; } .header ul.menu a:hover { color: white; } .header ul.menu li.active a { color: var(--themeColor); } .header ul.menu li.active a::after { content: ""; position: absolute; top: 100%; width: 100%; height: 3.65vw; background-image: url(../images/header-active.png); background-position: bottom center; background-size: 100% auto; } .header a.aki-music img { width: 2.71vw; height: 2.71vw; } .header a.aki-music img.open, .header a.aki-music.active img.close { display: none; } .header a.aki-music img.close, .header a.aki-music.active img.open { display: block; } /* 首页样式 */ .index-banner { position: relative; } .index-banner video { display: block; width: 100%; height: calc(100vh - 4.43vw); object-fit: cover; } .index-banner img.indexNet { position: absolute; left: 2.60vw; bottom: 6.25vw; z-index: 2; width: 21.00vw; height: auto; } .index-banner .guide { position: absolute; right: 1.56vw; bottom: 6.25vw; z-index: 2; } .index-banner .guide img { height: 3.44vw; width: auto; } .index-banner .guide:hover img { transform: scale(1.05); } .index-banner .content-box { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10.42vw; z-index: 2; } .index-banner .content-box a.link1 { display: block; width: 28.85vw; height: 7.66vw; background-image: url(../images/banner-link11.png); background-repeat: no-repeat; background-size: 100% 100%; } .index-banner .content-box a.link1:hover { background-image: url(../images/banner-link12.png); transform: scale(1.05); } .index-banner .content-box a.link2 { position: absolute; right: -3.65vw; top: -3.13vw; width: 7.81vw; height: 5.21vw; background-image: url(../images/banner-link21.png); background-repeat: no-repeat; background-size: 100% 100%; display: flex; align-items: center; justify-content: center; transition: none; } .index-banner .content-box a.link2:hover { background-image: url(../images/banner-link22.png); } .index-banner .content-box a.link2 img { width: 2.50vw; height: 2.50vw; animation: aki 1s linear infinite; transition: none; } .index-banner .content-box a.link2:hover img { display: none; } @keyframes aki { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .footer { position: fixed; left: 0; bottom: 0; width: 100%; height: 5.21vw; display: flex; align-items: center; justify-content: space-between; background: #1d1d1d url(../images/footer.png) no-repeat bottom center; background-size: auto 100%; padding: 0 1.56vw 0 2.34vw; } .footer .app-all { display: flex; align-items: center; } .footer .app-all a { display: flex; align-items: center; justify-content: center; width: 2.60vw; height: 2.60vw; border-radius: 50%; border: 0.15vw solid #c1c1c1; margin-right: 0.78vw; color: #c1c1c1; } .footer .app-all a:hover { color: var(--themeColor); border-color: var(--themeColor); } .footer .app-all a .iconfont { font-size: 1.56vw; } .footer .neverness img { height: 3.33vw; width: auto; } .footer .neverness:hover img { transform: scale(1.05); } /* 角色介绍 */ .page-character { position: relative; height: calc(100vh - 4.43vw); overflow: hidden; } .page-character .swiper-slide { position: relative; } .page-character video { display: block; width: 100%; height: calc(100vh - 4.43vw); object-fit: cover; } .page-character .aki-item { position: absolute; bottom: 6.77vw; left: 0; width: 45.31vw; z-index: 2; } .page-character .aki-item .b-title { position: relative; margin-bottom: 3.65vw; margin-left: 11.98vw; } .page-character .swiper-slide-active .aki-item .b-title { animation: bounceInLeft 1s ease both; } .page-character .aki-item .b-title .img1 { height: 6.25vw; width: auto; } .page-character .aki-item .b-title .img2 { height: 2.71vw; width: auto; position: absolute; top: 0.10vw; left: 13.02vw; } .page-character .aki-item .name img { height: 9.48vw; width: auto; margin-left: 11.98vw; } .page-character .swiper-slide-active .aki-item .name { animation: bounceInLeft 1s ease 0.2s both; } .page-character .aki-item .lines img { height: 4.17vw; width: auto; margin-left: 11.77vw; margin-top: 1.56vw; } .page-character .swiper-slide-active .aki-item .lines { animation: bounceInLeft 1s ease 0.3s both; } .page-character .aki-item .content { position: relative; margin-top: 1.04vw; border-top: 0.05vw solid #636363; padding: 0.52vw 0 0.52vw 11.98vw; color: #afafaf; line-height: 1.5; font-size: 0.73vw; height: 4.38vw; } .page-character .swiper-slide-active .aki-item .content { animation: bounceInLeft 1s ease 0.4s both; } .page-character .aki-item .content::before { content: ""; position: absolute; top: -0.78vw; left: 9.64vw; background-image: url(../images/roleDesSwitch.png); background-repeat: no-repeat; background-size: 100% auto; background-position: top center; width: 1.56vw; height: 1.56vw; z-index: 5; } .page-character .aki-item .content:hover::before { background-position: bottom center; } .page-character .aki-item .content:hover .box { padding: 2.60vw 1.56vw; -webkit-line-clamp: 10; background: #212121; border: 0.05vw solid #636363; position: absolute; right: 0; bottom: 0; width: calc(100% - 10.42vw); } @keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-156.25vw, 0, 0); -ms-transform: translate3d(-156.25vw, 0, 0); transform: translate3d(-156.25vw, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(1.30vw, 0, 0); -ms-transform: translate3d(1.30vw, 0, 0); transform: translate3d(1.30vw, 0, 0) } 75% { -webkit-transform: translate3d(-0.52vw, 0, 0); -ms-transform: translate3d(-0.52vw, 0, 0); transform: translate3d(-0.52vw, 0, 0) } 90% { -webkit-transform: translate3d(0.26vw, 0, 0); -ms-transform: translate3d(0.26vw, 0, 0); transform: translate3d(0.26vw, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } /* 角色介绍小图 */ .page-character .swiper_small { position: absolute; left: 11.98vw; bottom: 2.60vw; width: 26.98vw; z-index: 10; } .page-character .swiper_small .role { width: 100%; height: 3.91vw; background-image: url(../images/role_bullet1.png); background-repeat: no-repeat; background-size: 100% 200%; background-position: top center; cursor: pointer; } .page-character .swiper_small .role2 { background-image: url(../images/role_bullet2.png); } .page-character .swiper_small .role3 { background-image: url(../images/role_bullet3.png); } .page-character .swiper_small .role:hover, .page-character .swiper_small .swiper-slide-thumb-active .role { background-position: bottom center; } /* 都市映像 */ .page-city { position: relative; height: calc(100vh - 4.43vw); overflow: hidden; background: url(../images/page_city.jpg) no-repeat center center; background-size: cover; } .page-city .tape { position: absolute; top: 1.25vw; left: 12.50vw; width: 52.81vw; height: 31.88vw; z-index: 1; perspective: 104.17vw; } .page-city .tape .tapeA, .page-city .tape .tapeB { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/tape.png) no-repeat; background-size: 100% 200%; background-position: top center; transition: all 1s ease; backface-visibility: hidden; } .page-city .tape .tapeB { background-position: bottom center; } .page-city .tape .tapeB { transform: rotateY(180deg); opacity: 0; } .page-city .tape.active .tapeA { transform: rotateY(-180deg); opacity: 0; } .page-city .tape.active .tapeB { transform: rotateY(0deg); opacity: 1; } .page-city .tape .tapeA::before, .page-city .tape .tapeA::after, .page-city .tape .tapeB::before, .page-city .tape .tapeB::after { content: ""; position: absolute; left: 9.17vw; top: 10.31vw; width: 8.13vw; height: 8.13vw; background: url(../images/tapeAxle.png) no-repeat; background-size: 100% 200%; background-position: top center; animation: tapeRotate 6s linear infinite; } .page-city .tape .tapeA::after { left: unset; right: 8.65vw; } .page-city .tape .tapeB::before { background-position: bottom center; } .page-city .tape .tapeB::after { background-position: bottom center; left: unset; right: 8.65vw; } @keyframes tapeRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* 欢迎词 */ .page-city .tape .wel { position: absolute; right: -15.63vw; top: 2.86vw; } .page-city .tape .wel img { height: 4.17vw; } .page-city .tape .wel .img1, .page-city .tape.active .wel .img2 { display: block; } .page-city .tape .wel .img2, .page-city .tape.active .wel .img1 { display: none; } .page-city .content-box { position: absolute; top: 9.27vw; right: 9.38vw; z-index: 3; } .page-city .content-box .aki-lbt { position: relative; z-index: 2; display: flex; align-items: center; } .page-city .content-box .aki-lbt::after { content: ""; position: absolute; top: -2.71vw; right: -1.67vw; width: 18.49vw; height: 16.67vw; background-image: url(../images/tapeA_ornament2.png); background-repeat: no-repeat; background-size: 100% 100%; } .page-city .content-box .aki-lbt.active::after { background-image: url(../images/tapeB_ornament2.png); } .page-city .content-box .akiswiper { width: 55.21vw; border: 0.52vw solid #585858; margin: 0 0.78vw; } .page-city .content-box .akiswiper a img.thumb { width: 100%; height: 25vw; } .page-city .content-box .akiswiper a img.num, .page-city .content-box .akiswiper a img.title { display: none; } .page-city .aki-lbt .swiper-button-prev::after, .page-city .aki-lbt .swiper-button-next::after { display: none; } .page-city .aki-lbt .swiper-button-prev, .page-city .aki-lbt .swiper-button-next { margin: 0; border-radius: 0 !important; position: static; width: 3.65vw; height: 12.92vw; background: url(../images/citySlidePrev.png) no-repeat; background-size: 200% 200%; background-position: top left; } .page-city .aki-lbt .swiper-button-next { background-image: url(../images/citySlideNext.png); } .page-city .aki-lbt .swiper-button-prev:hover, .page-city .aki-lbt .swiper-button-next:hover { background-position: top right; } .page-city .aki-lbt.active .swiper-button-prev, .page-city .aki-lbt.active .swiper-button-next { background-position: bottom left; } .page-city .aki-lbt.active .swiper-button-prev:hover, .page-city .aki-lbt.active .swiper-button-next:hover { background-position: bottom right; } .page-city .aki-lbt .swiper-pagination { position: absolute; top: calc(100% + 5.99vw); left: 0; right: unset; bottom: unset; width: 100%; display: flex; align-items: center; justify-content: center; } .page-city .aki-lbt .swiper-pagination span { margin: 0 0.42vw; display: block; width: 3.85vw; height: 0.63vw; border: 0.05vw solid white; opacity: 1; background: none; border-radius: 0; transition: all 0.2s ease; } .page-city .aki-lbt .swiper-pagination span.swiper-pagination-bullet-active { background: white; } .page-city .aki-lbt .aki-txt { position: absolute; left: 0; top: 100%; width: 100%; } .page-city .aki-lbt .aki-txt .num { position: absolute; top: -1.25vw; right: calc(100% - 2.19vw); width: 14.27vw; } .page-city .aki-lbt .aki-txt .num img { width: 100%; height: auto; } .page-city .aki-lbt .aki-txt .title img { height: 4.43vw; width: auto; margin: 0.42vw 0 0 4.43vw; } /* 都市映像 */ .page-intelligence { position: relative; height: calc(100vh - 4.43vw); overflow: hidden; background: url(../images/page_bg.jpg) no-repeat center center; background-size: cover; padding-left: 15.63vw; } .page-intelligence .intelligence-title { display: flex; align-items: center; margin-top: 2.34vw; } .page-intelligence .intelligence-title .img1, .page-intelligence .intelligence-title .img3 { height: 2.92vw; margin-right: 1.04vw; } .page-intelligence .intelligence-title .img2 { height: 5.21vw; margin-right: 1.04vw; } .intelligence-content { position: relative; display: flex; align-items: flex-start; height: 19.79vw; margin-top: 0.78vw; background-image: url(../images/intelPlate.png); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* 装饰图1 */ .intelligence-content img.zs1 { position: absolute; top: 0.31vw; left: -0.78vw; height: 0.94vw; width: auto; } /* 装饰图2 */ .intelligence-content img.zs2 { position: absolute; top: 0; left: 48.44vw; height: 1.67vw; width: auto; } .intelligence-content .left-sec { position: relative; left: -4.17vw; top: 1.82vw; z-index: 2; width: 40.63vw; height: 100%; background-image: url(../images/intelSlides.png); background-repeat: no-repeat; background-size: 100% 100%; padding: 0.52vw 1.82vw; } .intelligence-content .left-sec .akiswiper { background: #ddd; } .intelligence-content .left-sec .akiswiper a img { width: 100%; height: 100%; object-fit: cover; } .intelligence-content .right-sec { width: calc(100% - 40.63vw); color: #313131; position: relative; padding-bottom: 0.52vw; } .intelligence-content .right-sec .item { display: none; } .intelligence-content .right-sec .item.active { display: block; } .intelligence-content .right-sec .title { margin-top: 3.65vw; font-size: 2.08vw; font-weight: bold; } .intelligence-content .right-sec .title span { position: relative; display: inline-block; white-space: nowrap; padding-right: 2.60vw; padding-bottom: 0.52vw; } .intelligence-content .right-sec .title span::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(100% + 5.21vw); height: 0.10vw; background: #313131; } .intelligence-content .right-sec .desc { font-size: 0.73vw; margin-top: 0.78vw; line-height: 1.5; width: 22.66vw; } .intelligence-content .right-sec .btn { display: flex; align-items: center; justify-content: space-between; width: 8.59vw; height: 1.04vw; margin-top: 0.52vw; background: #313131; color: #b1b1b1; font-size: 0.73vw; padding: 0 0.52vw; } .intelligence-content .right-sec .btn .iconfont { font-size: 0.73vw; } .intelligence-content .right-sec .btn:hover { background: #e8e8e8; color: #313131; } .intelligence-content .right-sec .time { font-size: 1.88vw; margin-top: 4.17vw; font-weight: bold; } .intelligence-content .right-sec .btn-all { position: absolute; left: 15.36vw; bottom: 0; display: flex; align-content: center; gap: 0.31vw; } .intelligence-content .right-sec .btn-all .swiper-button-prev::after, .intelligence-content .right-sec .btn-all .swiper-button-next::after { display: none; } .intelligence-content .right-sec .btn-all .swiper-button-prev, .intelligence-content .right-sec .btn-all .swiper-button-next { margin: 0; position: static; background: #313131; width: 3.44vw; height: 2.50vw; display: flex; align-items: center; justify-content: center; color: var(--themeColor); border-radius: 1.30vw 0 0 1.30vw; transition: all 0.2s ease; } .intelligence-content .right-sec .btn-all .iconfont { font-size: 1.15vw; transform: rotate(180deg); } .intelligence-content .right-sec .btn-all .swiper-button-next { transform: rotate(180deg); } .intelligence-content .right-sec .btn-all .swiper-button-prev:hover, .intelligence-content .right-sec .btn-all .swiper-button-next:hover { color: var(--themeColor); background: #ff5995; } .intelligence-title2 { margin: 2.60vw 0 0 0.78vw; } .intelligence-title2 img { height: 6.51vw; width: auto; } .page-intelligence .swiper-pagination { position: absolute; left: 0; bottom: 4.95vw; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 2.34vw; } .page-intelligence .swiper-pagination span { margin: 0 0.42vw !important; display: block; width: 3.85vw; height: 0.63vw; border: 0.05vw solid white; opacity: 1; background: none; border-radius: 0; transition: all 0.2s ease; } .page-intelligence .swiper-pagination span.swiper-pagination-bullet-active { background: var(--themeColor); border-color: var(--themeColor); } /* 角色介绍 */ .page-join { position: relative; background-image: url(../images/articlePage.jpg); background-repeat: no-repeat; background-size: 100% auto; height: calc(100vh - 4.43vw); overflow: hidden; } .page-join .join-main { padding-top: 9.64vw; width: 100%; height: 100%; overflow-y: auto; } .page-join .aki-container { margin: auto; width: 50vw; } .page-join .join-title { position: relative; } .page-join .join-title img.bg { width: 100%; height: auto; } .page-join .join-title h1 { position: absolute; left: 8.85vw; bottom: 3.13vw; font-size: 2.08vw; } .page-join .join-title .route { position: absolute; left: 0; bottom: 0; width: 100%; height: 2.60vw; z-index: 2; color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 1.56vw; font-size: 1.04vw; } .page-join .join-title .route .link { display: flex; align-items: center; } .page-join .join-title .route .iconfont { font-size: 0.73vw; margin: 0 0.52vw; } .page-join .join-title .route a:hover { color: var(--themeColor); } .page-join .content-box { margin-top: 2.08vw; position: relative; } .page-join .content-box .title { position: absolute; right: calc(100% + 1.04vw); top: 0; width: 8.23vw; } .page-join .content-box .title img { width: 100%; height: auto; } .page-join .content-box .thumb { padding: 0 0.78vw 4.17vw; color: #313131; } .page-join .content-box .thumb img { width: 100%; margin: auto; } .page-join .content-box .thumb p { margin-bottom: 0.78vw; font-size: 0.83vw; line-height: 1.5; } .page-join .content-box .thumb p:last-child { margin: 0; } .page-join .content-box .thumb a:hover { text-decoration: underline !important; }