.aboutus-page{ overflow-x: hidden; } /* 轮播图 */ .aboutus-page .swiper { width: 100%; height: 100%; } .aboutus-page .swiper-slide { font-size: 18px; } .aboutus-page .swiper-slide img { height: 41.66vw; width: 100%; } .aboutus-page .box1 { width: 100%; height: 41.666vw; position: absolute; top: 0; left: 0; z-index: 100; display: flex; align-items: center; } .aboutus-page .box1-content { margin: 0 0 0 12.5vw; } .aboutus-page .box1-title { width: 597px; font-size: 60px; font-family: Gilroy, Gilroy-Light; font-weight: 300; text-align: left; color: #ffffff; line-height: 70px; } .aboutus-page .box1-tip { width: 592px; font-size: 24px; font-family: Gilroy, Gilroy-Light; font-weight: 300; text-align: left; color: #ffffff; line-height: 36px; margin: 20px 0 43px 0; } .aboutus-page .box1-content button { background: transparent; width: 180px; height: 54px; border: 2px solid #ffffff; border-radius: 29px; background-image: url("../../images/about_us/btn1.png"); background-repeat: no-repeat; background-position: center; background-size: 105px auto; cursor: pointer; } .aboutus-page .box2-content { text-align: center; margin: 41px 0 83px 0; } .aboutus-page .box2-content img { width: 23.07vw; height: 13.22vw; margin-right: 43px; } .aboutus-page .box2-content div { display: inline-block; width: 39.63vw; height: 8.95vw; font-size: 24px; font-family: Gilroy, Gilroy-Bold; font-weight: 700; text-align: left; color: #8e9daa; line-height: 30px; } .aboutus-page .box2 { height: 41.666vw; background-image: url("../../images/about_us/bg3.png"); background-position: top; background-size: cover; display: flex; align-items: center; justify-content: space-between; padding: 0 2.6vw 0 12.5vw; } .aboutus-page .box2 .box1-content { margin-top: 0; margin-left: 0; } .aboutus-page .box2 .box1-content .logo { width: 7.18vw; height: 2.08vw; margin-bottom: 2.08vw; } .aboutus-page .box3-content { display: flex; width: 40%; } .aboutus-page .box3-content .num { opacity: 0.7; font-size: 72px; font-family: Gilroy, Gilroy-Thin; font-weight: 200; text-align: left; color: #ffffff; } .aboutus-page .box3-content .box3-title { opacity: 0.7; font-size: 24px; font-family: Gilroy, Gilroy-Medium; font-weight: 500; text-align: left; color: #ffffff; margin: 25px 0 18px 0; } .aboutus-page .box3-content .box3-tip { opacity: 0.7; font-size: 15px; font-family: Myriad Pro, Myriad Pro-Regular; font-weight: 400; text-align: left; color: #ffffff; } .aboutus-page .box3-content img { width: 20px; height: 12px; margin-top: 60px; } .aboutus-page .box4-content { height: 38.54vw; background-image: url("../../images/about_us/bg4.png"); background-size: 100% 100%; display: flex; justify-content: space-evenly; align-items: center; } .aboutus-page .box4-content .box4 .title { font-size: 72px; font-family: Gilroy, Gilroy-Light; font-weight: 300; text-align: left; color: #018dff; margin-bottom: 43px; } .aboutus-page .box4-content .box4 .cards { width: calc(25vw + 100px); display: flex; justify-content: space-around; } .aboutus-page .box4-content .box4 .card { position: relative; display: flex; align-items: center; width: 8.33vw; height: 8.33vw; background: white; border-radius: 25px; box-shadow: 7.98px 15.01px 32px 0px rgba(232, 243, 255, 0.66); padding: 7px 10px; } .aboutus-page .box4-content .box4 .card .num { font-size: 48px; font-family: SamsungSharpSans, SamsungSharpSans-Medium; font-weight: 500; text-align: left; color: #008cff; line-height: 23px; } .aboutus-page .box4-content .box4.pic { width: 38.64vw; height: 31.3vw; background-image: url("../../images/about_us/bg5.png"); background-size: 100% 100%; margin-top: 2.08vw; } .aboutus-page .box4-content .box4 img { position: absolute; top: 0.85vw; right: 0.85vw; width: 1.8vw; object-fit: fill; } .aboutus-page .box5-content { height: 48.59vw; padding: 6.25vw 0; text-align: center; position: relative; } .aboutus-page .box5-content .title{ font-size: 72px; font-family: Gilroy, Gilroy-Light; font-weight: 300; color: #018cff; text-align: center; } .aboutus-page .box5-content .page-box { text-align: right; padding-right: 12.5vw; } .aboutus-page .box5-content .page-box .img{ width: 3.125vw; height: 3.125vw; margin-bottom: 2.08vw; display: inline-block; } .aboutus-page .box5-content .page-box .first{ margin-right: 10px; background-image: url("../../../assets/images/about_us/arrow2.png"); background-size: 100% 100%; } .aboutus-page .box5-content .page-box .last{ background-image: url("../../../assets/images/about_us/arrow2.png"); background-size: 100% 100%; transform: rotate(180deg); } .aboutus-page .box5-content .page-box .active{ background-image: url("../../../assets/images/about_us/arrow3.png")!important; background-size: 100% 100%; transform: rotate(180deg); } .aboutus-page .box5-content .page-box .last.active{ transform: rotate(0deg); } .aboutus-page .box5-content .cards{ position: absolute; top: 17.34vw; margin: 0 12.5vw; white-space: nowrap; width: 100%; vertical-align: top; overflow-x: auto; padding-bottom: 12px; } /* 隐藏滚动条 */ .aboutus-page .box5-content .cards::-webkit-scrollbar { width: 0; height: 0; } .aboutus-page .box5-content .card{ transition: all 0.3s; width: 25vw; background: #ffffff; border-radius: 24px; margin-right: 20px; padding: 3.8vw 2.34vw 2.03vw 2.34vw; box-sizing: border-box; text-align: left; position: relative; display: inline-block; white-space: normal; } .aboutus-page .box5-content .card:hover{ box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); } .aboutus-page .box5-content .card .card-title{ font-size: 42px; font-family: DINPro, DINPro-Bold; font-weight: 700; color: #242A30; margin-bottom: 2.18vw; } .aboutus-page .box5-content .split{ width: 100%; height: 1px; background: #e5e5e5; position: absolute; top: 24.895vw; left: 0; } .aboutus-page .box5-content .card .split{ position: absolute; top: 7.55vw; left: 0; } .aboutus-page .box5-content .card .dot{ background: #e5e5e5; position: absolute; top: calc(7.55vw - 1.7px); left: 2.34vw; border-radius: 50%; width: 5px; height: 5px; } .aboutus-page .box5-content .card .name{ font-size: 24px; font-family: Gilroy, Gilroy-Bold; font-weight: 700; color: #242A30; margin-bottom: 0.46vw; } .aboutus-page .box5-content .card .desc{ font-size: 16px; font-family: Gilroy, Gilroy-Medium; font-weight: 500; color: #242a30; margin-bottom: 2.08vw; } .aboutus-page .box5-content .card:hover .card-title{ color: #008bff; } .aboutus-page .box5-content .card:hover .split,.dot{ background: #008bff; } .aboutus-page .box5-content .card:hover .dot{ background: #008bff; } .aboutus-page .box5-content .card:hover .name{ color: #008bff; }