/* 轮播图 */ .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.mobile{ display: none; padding: 0; } .aboutus-page .box2.mobile .swiper-slide{ display: flex; align-items: center; } .aboutus-page .box2.mobile .box1-content{ margin: 16.93vw auto 0 auto; } .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: 3.75vw; font-family: Gilroy, Gilroy-Thin; font-weight: 200; text-align: left; color: #ffffff; } .aboutus-page .box3-content .tip{ font-size: 1.14vw; font-family: NexaBold, NexaBold-Regular; font-weight: 400; text-align: left; color: #333333; line-height: 1.19vw; } .aboutus-page .box3-content .box3-title { opacity: 0.7; font-size: 1.25vw; 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: 0.78vw; 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: 3.75vw; 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; flex-flow: column; justify-content: center; width: 8.33vw; height: 8.33vw; background: white; border-radius: 1.3vw; box-shadow: 7.98px 15.01px 32px 0px rgba(232, 243, 255, 0.66); padding: 7px 10px; border: none; } .aboutus-page .box4-content .box4 .card .num { font-size: 2.34vw; font-family: SamsungSharpSans, SamsungSharpSans-Medium; font-weight: 500; text-align: left; color: #008cff; line-height: 23px; margin: 1vw 0 0.7vw 0; } .aboutus-page .box4-content .box4 .card .tip { font-size: 1vw; line-height: 1; font-family: NexaBold, NexaBold-Regular; } .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.mobile{ display: none; } .aboutus-page .box5-content .title{ font-size: 3.75vw; font-family: Gilroy, Gilroy-Light; font-weight: 300; color: #018cff; text-align: center; } /* 分页 */ .aboutus-page .page-box { text-align: right; padding-right: 12.5vw; } .aboutus-page .page-box .img{ width: 3.125vw; height: 3.125vw; margin-bottom: 2.08vw; display: inline-block; cursor: pointer; background-size: 100% 100%; line-height: 3.125vw; } /*白色背景*/ .aboutus-page .page-box .first1{ margin-right: 10px; background-image: url("../../../assets/images/about_us/arrow2.png"); } .aboutus-page .page-box .last1{ background-image: url("../../../assets/images/about_us/arrow2.png"); transform: rotate(180deg); } .aboutus-page .page-box .first1.active{ background-image: url("../../../assets/images/about_us/arrow3.png")!important; transform: rotate(180deg); } .aboutus-page .page-box .last1.active{ background-image: url("../../../assets/images/about_us/arrow3.png")!important; transform: rotate(180deg); } .aboutus-page .page-box .last1.active{ transform: rotate(0deg); } /*蓝色背景*/ .aboutus-page .page-box .first2{ margin-right: 10px; background-image: url("../../../assets/images/about_us/arrow4.png"); } .aboutus-page .page-box .last2{ background-image: url("../../../assets/images/about_us/arrow4.png"); transform: rotate(180deg); } .aboutus-page .page-box .first2.active{ background-image: url("../../../assets/images/about_us/arrow5.png")!important; transform: rotate(180deg); } .aboutus-page .page-box .last2.active{ background-image: url("../../../assets/images/about_us/arrow5.png")!important; transform: rotate(180deg); } .aboutus-page .page-box .last2.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; text-align: left; } /* 隐藏滚动条 */ .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; border: none; } .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: 2.18vw; 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: calc(24.895vw + 1px); left: 0; } .aboutus-page .box5-content .card .split{ position: absolute; top: 7.55vw; left: 0; transition: all 0.5s; width: 0; } .aboutus-page .box5-content .card .dot{ background: #e5e5e5; position: absolute; top: 7.55vw; left: 2.34vw; border-radius: 50%; width: 0; height: 5px; transform: translateY(-50%); } .aboutus-page .box5-content .card .logo{ width: 2.08vw; height: 1.66vw; position: absolute; top: 3vw; right: 2vw; display: none; } .aboutus-page .box5-content .card .name{ font-size: 1.25vw; font-family: Gilroy, Gilroy-Bold; font-weight: 700; color: #242A30; margin-bottom: 0.46vw; } .aboutus-page .box5-content .card .desc{ font-size: 0.83vw; 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; width: 100%; } .aboutus-page .box5-content .card:hover .dot{ background: #008bff; width: 5px; } .aboutus-page .box5-content .card:hover .name{ color: #008bff; } .aboutus-page .box5-content .card:hover .logo{ display: block; } .aboutus-page .box6-content{ width: 100%; height: calc(36.45vw + 6.97vw); background: #008cff; padding: 0 12.5vw; box-sizing: border-box; } .aboutus-page .box6-content .tool{ padding-top: 4.68vw; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.91vw; } .aboutus-page .box6-content .tool .title{ font-size: 4.479vw; font-family: Gilroy, Gilroy-Light; font-weight: 300; text-align: center; color: #ffffff; } .aboutus-page .box6-content .tool .page-box{ padding-right: 0; } .aboutus-page .box6-content .tool .page-box .img{ margin-bottom: 0; } .aboutus-page .box6-content .cards-box{ width: 100%; position: relative; } .aboutus-page .box6-content .cards{ width: 100%; display: flex; justify-content: space-between; position: absolute; top: 0; left: 0; transform-origin:left bottom; } .aboutus-page .box6-content .cards{ } .aboutus-page .box6-content .card{ position: relative; width: 17.8vw; min-height: 17.8vw; background: #ffffff; border-radius: 24px; padding: 3.17vw 1.56vw; box-sizing: border-box; z-index: 1; cursor: default; } .aboutus-page .box6-content .card:after{ content: ''; position: absolute; top: -1px; left: 1.56vw; width: 3.12vw; height: 4px; background: #40d5fa; border-radius: 2px; transition: width 0.5s; } .aboutus-page .box6-content .card:hover:after{ width: calc(100% - 1.56vw * 2); } .aboutus-page .box6-content .card:hover .bg{ opacity: 0.2; transition: transform 0.8s; transform-origin: left bottom; transform: rotate(-10deg); position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background: white; border-radius: 24px; } .aboutus-page .box6-content .cards .card .date{ font-size: 0.729vw; font-family: Gilroy, Gilroy-Bold; font-weight: 700; text-align: left; color: #242a30; margin-bottom: 0.93vw; } .aboutus-page .box6-content .card:hover .date{ color: #008bff; } .aboutus-page .box6-content .cards .card .card-title{ font-size: 1.25vw; font-family: Gilroy, Gilroy-Bold; font-weight: 700; text-align: left; margin-bottom: 2.34vw; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; } .aboutus-page .box6-content .card:hover .card-title{ color: #008bff; } .aboutus-page .box6-content .cards .card .desc{ font-size: 0.83vw; font-family: Gilroy, Gilroy-Medium; font-weight: 500; text-align: left; color: #242A30; margin-bottom: 1.4vw; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; } .aboutus-page .box6-content .cards .card .arrow{ font-size: 0.729vw; font-family: Gilroy, Gilroy-Bold; font-weight: 700; text-align: left; color: #242A30; } .aboutus-page .box6-content .cards .card .arrow i{ margin-left: 10px; } .aboutus-page .box6-content .card:hover .arrow{ color: #008bff; } /*移动端*/ @media screen and (max-width: 960px) { .aboutus-page .swiper-slide img { height: 90.66vw; object-fit: cover; } .aboutus-page .box1 { height: 90.66vw; } .aboutus-page .box1-content { margin: 16.93vw auto 0 auto; width: 82.4vw; text-align: center; } .aboutus-page .box1-title { font-size: 8vw; width: 100%; line-height: 1; text-align: center; } .aboutus-page .box1-tip { font-size: 5.33vw; margin: 4vw 0; width: 100%; text-align: center; line-height: 5.33vw; } .aboutus-page .box1-content button { width: 40vw; height: 10.8vw; } .aboutus-page .box2-content img { width: 59.06vw; height: 33.86vw; } .aboutus-page .box2-content div { font-size: 3.7vw; line-height: 4.5vw; display: block; width: 88vw; margin: 4vw auto 8vw auto; height: auto; word-break: break-all; } .aboutus-page .box2-content { margin: 9.33vw auto 8vw auto; } .aboutus-page .box2.mobile { display: block; } .aboutus-page .box2.pc { display: none; } .aboutus-page .box2 { height: 106vw; position: relative; } .aboutus-page .box2 .box1-content .logo { width: 26.8vw; height: 7.73vw; position: absolute; top: 10.53vw; left: 4vw; } .aboutus-page .box3-content { width: 100%; height: 100%; } .aboutus-page .box3-content .box3 { display: flex; align-items: center; flex-flow: column; width: 50vw; } .aboutus-page .box3-content .num { font-size: 14vw; margin-top: 18vw; } .aboutus-page .box3-content .box3-title { font-size: 6.5vw; line-height: 1; text-align: center; margin: 3vw 0; padding: 0 1vw; } .aboutus-page .box3-content .box3-tip { font-size: 5vw; line-height: 1.2; text-align: center; margin: 3vw 0; padding: 0 1vw; } .aboutus-page .box3-content img { height: auto; margin-top: 0; } .aboutus-page .box4-content { display: block; height: auto; background-position: top; background-size: contain; background-repeat: no-repeat; } .aboutus-page .box4-content .box4 .cards { width: 100%; } .aboutus-page .box4-content .box4 .title { font-family: NexaBold, NexaBold-Regular; font-size: 6.4vw; padding: 15.46vw 0 5.33vw 0; margin: 0; text-align: center; } .aboutus-page .box4-content .box4 .card { width: 28vw; height: 28vw; border-radius: 3vw; padding: 4vw 2.66vw; } .aboutus-page .box4-content .box4 img { width: 5.33vw; height: 5.33vw; top: 2.66vw; right: 2.66vw; } .aboutus-page .box4-content .box4 .card .num { font-size: 8vw; font-family: NexaBold, NexaBold-Regular; } .aboutus-page .box4-content .box4 .card .tip { font-size: 2.93vw; margin-top: 3.73vw; } .aboutus-page .box4-content .box4.pic { height: 77.6vw; width: 100%; margin-top: 8vw; } .aboutus-page .box5-content.pc { display: none; } .aboutus-page .box5-content.mobile { display: block; } .aboutus-page .box5-content .title { font-size: 6.3vw; font-family: NexaBold, NexaBold-Regular; font-weight: 400; text-align: center; color: #008bff; margin-bottom: 5.33vw; } .aboutus-page .box5-content .nav { height: 12.4vw; background: #f2f2f2; padding: 0 8vw; white-space: nowrap; display: block; overflow-y: auto; } .aboutus-page .box5-content .nav::-webkit-scrollbar { width: 0; height: 0; } .aboutus-page .box5-content .nav .nav-title{ line-height: 12.4vw; font-size: 4.8vw; font-family: Gilroy, Gilroy-Bold; font-weight: 700; color: #999999; margin-right: 8.66vw; position: relative; display: inline-block; } .aboutus-page .box5-content .nav .nav-title:nth-last-child(1){ margin-right: 0; } .aboutus-page .box5-content .nav .nav-title:hover:after{ content: ''; position: absolute; bottom: 1.85vw; left: 50%; transform: translateX(-50%); height: 3px; width: 60%; background: #008bff; } .aboutus-page .box5-content .nav .nav-title:hover{ color: #008bff; } .aboutus-page .box5-content .content{ text-align: left; padding: 1.33vw 8vw 16vw 8vw; } .aboutus-page .box5-content .content .name{ font-size: 4.8vw; font-family: NexaBold, NexaBold-Regular; font-weight: 400; text-align: left; color: #333333; margin: 4vw 0 0 0; } .aboutus-page .box5-content .content .desc{ font-size: 3.73vw; font-family: Myriad Pro, Myriad Pro-Regular; font-weight: 400; text-align: left; color: #242a30; margin-top: 2.66vw 0 0 0; } .aboutus-page .box6-content{ display: none; } .aboutus-page footer{ display: none; } }