.banner { position: relative; } .page { width: 100%; height: 100vh; } .page .item{position:absolute;top:0;height:100%;width:100%;} .item .bg { background-image: url('../../Images/brand/index/brand2.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; width: 100%; } .content-wrap { color: #fff; position: absolute; top: 55%; left: 20%; z-index: 100; } .slide-content p{font-size:3rem;width:max-content;} .slide-content {position:absolute;top:0;width: max-content;} .desc { margin-top: 1rem; line-height: 2; font-size: 1.25rem; display:inline-block } .arrow-down { position: absolute; width: 2px; z-index: 10; left: 50%; height: 60px; border-radius: 10px; bottom: 0; background: rgba(255,255,255,.3); margin-left: -1px; overflow:hidden; } .down-line { display: inline-block; height: 60px; width: 2px; background: #fff; animation: arrow 1.5s ease-in-out infinite; } @keyframes arrow { 0% { transform: translateY(-100%); -webkit-transform: translateY(-100%); } to { transform: translateY(100%); -webkit-transform: translateY(100%); } } .company { padding: 15rem 0 25rem; background: #fff; } .company-left { width: 50%; padding-right: 8.3333%; display: inline-block; text-align: right; } .company-left .wuyistar{ font-size:2.5rem; font-weight:bold; color: red; display: inline-block; text-align: left; margin-bottom: 13rem; } .company-right { width: 50%; float: right; padding-right: 16.666%; } .company-info{margin-bottom:15rem} .company-info .info-item{margin-bottom:2rem;} .company-img { position: absolute; width: 33.333%; bottom: 10rem; } .history { background: #fafafa; width: 100%; top: 0; height: 100vh; } .section-title { font-size: 2.5rem; font-weight:900; margin-bottom: 1rem; } .history-date { font-size: 2.5rem; color: red; display: inline-block; position: relative; height: 93%; line-height: 32rem; z-index: 1; margin-top: 7rem; font-family: "AlibabaSans-Heavy"; } .history-date::after{ content: ""; position: absolute; height: 1rem; width: 1rem; background: red; border-radius: 50%; left: 38%; margin-left: -.5rem; top: 44%; } .history-date::before{ content: ""; height: 100%; display: inline-block; border-left: 1px dashed #ccc; position: absolute; left: 38%; z-index: -1; } .history-date .year{display:inline-block;padding-top:20rem} .history-content { position: absolute; top: 55%; width: 68%; left: 12.5%; } .history-title { font-size: 1.5rem; font-family: PingFang Heavy; margin-bottom: 1.5rem; } .history .content-text .part{margin-bottom:1rem} .history-wrap { padding: 0 8.3333% 0 25%; height: 100vh; } .history-img { position: absolute; top: 16%; right: 19.5%; text-align: right; } .history-img img{height:23rem} .history-2001{width:40rem;} .history-show3{height:50%;bottom:0} .honour{padding:10rem 0;background:#fff} .honour .section-title{ padding-left: 25%; margin-bottom: 5rem; } .honour-img { position: relative; padding: 0 21.3333%; text-align: center; line-height: 0; } .left-img div, .right-img div { position: absolute; height: calc(50% - 1px); width: max-content; } .left-img img,.right-img img{height:100%;} .left-img1,.right-img1{top:0} .left-img2,.right-img2{bottom:0} .left-img div { right: calc(59.5% + 1px); } .right-img div { left: calc(59.5% + 1px); } .center-img{width:32.5%;margin:auto;position:relative} .center-img img{width:100%;} .honour-img .mask{position:absolute;opacity:0.5;display:none;top:0;left:0;height:100%;width:100%;} .honour-img .title { position: absolute; width: 100%; text-align: center; color: #fff; opacity: 0; transition: opacity .5s linear; -webkit-transition: opacity .5s linear; top: 47%; z-index: 101 } .show-honour:hover .title{opacity:1} .show-honour:hover .mask{display:block;} .idea { line-height: 0; } .idea .section-title{ position: absolute; left: 25%; z-index: 2; color: #fff; top: 27%; } .idea .swiper-slide img{width:100%;} .idea .idea-content{ position: absolute; left: 25%; top: 23%; color: #fff; } .idea .idea-title{ font-size: 2.5rem; font-family: PingFang Heavy; margin-bottom: 5rem; } .idea .idea-desc{font-size:1.25rem} .swiper-idea .swiper-button-next, .swiper-idea .swiper-button-prev { top: 65%; width: 10px; height: 15px; background-size: 10px 15px; } .swiper-idea .swiper-button-next, .swiper-idea .swiper-container-rtl .swiper-button-prev{ right:auto; left:28%; } .swiper-idea .swiper-button-prev, .swiper-idea .swiper-container-rtl .swiper-button-next{ left:25%; } .company-info.fix{ position:fixed; top:15rem; width:33.333%; } .history .swiper-pagination-bullet-active{ background:#000; } .history .swiper-pagination-bullet { border-radius: unset; height: 100px; width: 2px; } .history .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{margin:0} .history >.section-title{position:absolute;left:25%;top:9rem} .cover{ position:absolute; height:100%; width:100%; top:0; z-index:100; display:none; } .history-img .show2004 { width: 28rem; height:auto; } .section{position:relative} .circle { position: absolute; height: 2rem; width: 2rem; background: red; border-radius: 50%; left: 38%; margin-top: -.5rem; margin-left: -1rem; top: 44%; opacity: .5; } .fixed{position:fixed;z-index:10;top:0;} .history-wrap > .swiper-scrollbar{ right: 16.9%; height: 60%; top: 20%; } .history-wrap .history-part{position:relative;padding-bottom:10rem} .history-wrap .swiper-slide {padding: 9rem 0 5rem 0;} .history-wrap > .swiper-pagination-bullets { right: 8.333%; } .swiper-honour .swiper-slide{text-align:center;margin-bottom:3rem} .imh{ height:28.5vw; } .swiper-honour .swiper-pagination-bullet-active{background:#e70310}