.dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setBetween { display: flex; justify-content: space-between; } .setRowCenter { display: flex; justify-content: center; } .setColumnCenter { display: flex; align-items: center; } .setCenter { display: flex; flex-direction: column; align-items: center; justify-content: center; } .ra { border-radius: 0.2rem; overflow: hidden; } .bs { box-shadow: 0 0 0.5rem #ebebeb; } .box-shadow { box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1); } .btn { padding: 0.3rem 1.3rem; background-color: #3b52f6; color: #fff; border-radius: 2rem; font-size: 0.9rem; } .btn.s1 { background-color: transparent; border: 1px solid #3b52f6; color: #3b52f6; } .a-hover:hover { color: #3b52f6; } .list-banner { position: relative; } .about-banner{ background-color: #07cd6a; padding: 2.5rem 0; } .about-banner .main-center{ justify-content: flex-start !important; max-width: 76rem; height: auto !important; } .about-banner .about-banner-txt h2{ font-size: 2rem; color: #fff; } .about-banner .about-banner-txt span{ display: inline-block; font-size: 1rem; margin-top: 0.5rem; } .about-banner>img{ height: 100%; position: absolute; top: 0; right: 0; z-index: 1; } .about .main-title { margin-bottom: 2rem; } .about .main-title * { text-align: left; } .about .main-title h2 { margin-bottom: 0; line-height: 1.4; } .about .main-title p { color: #333; max-width: 100%; margin-top: 0 !important; } .about .container { margin-bottom: 2rem; } .about .container b { } .about .container h4 { font-size: 2rem; } .about .container p { margin-top: 1.3rem; font-size: 0.9rem; } .about .container span.c1 { color: #3b52f6; } .about .container em { font-size: 1.3rem; } .about .container .f-img img { float: right; max-width: 23rem; } .about .main-1{ padding: 5.5rem 0 0; background-image: url(../images/about-bg.jpg); background-repeat: no-repeat; background-size: 100% 36.9rem; text-align: center; } .about .main-1 .main-center{ max-width: 70rem; } .about .main-1 .container h2 { font-size: 1.9rem; line-height: 1.2; text-align: center; } .about .main-1 .container h6 { font-size: 1.25rem; color: #00db6d; margin-bottom: 0.8rem; } .about .main-1 .container p{ font-size: 0.85rem; line-height: 1.8; } .about .main-1 .our-goal{ background-color: #ffff1b; padding: 3.5rem 3rem 5rem; margin-top: 5rem; } .about .main-1 .our-goal p{ color: #505050; } .about .main-1 .our-goal p:nth-of-type(2){ font-family: "HarmonyOS_Sans_Regular" !important; line-height: 1.8; } .about .main-4 { padding-top: 2.2rem; padding-bottom: 0; } .about .main-4 .main-center { max-width: 84.5rem; display: flex; justify-content: space-between; margin-bottom: 0; } .about .main-4 .item{ width: calc(50% - 0.75rem); height: 40rem; background-color: #2847db; padding: 5.5rem; color: #ffffff; position: relative; } .about .main-4 .item h3{ font-size: 1.9rem; line-height: 1.1; margin-bottom: 4rem; } .about .main-4 .item h4{ font-size: 0.85rem; line-height: 1.8; } .about .main-4 .item p{ font-family: "HarmonyOS_Sans_Regular" !important; font-size: 0.85rem; line-height: 1.8; } .about .main-4 .item p>span{ display: block; } .about .main-4 .item p>span:before{ content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 100%; background-color: #fff; margin-right: 2rem; margin-left: -2.7rem; } .about .main-4 .item:nth-of-type(1){ padding-left: 7rem; } .about .main-4 .item em{ display: block; width: 1.5rem; height: 1.5rem; border-radius: 100%; background-color: #f7f74c; position: absolute; right: 2.1rem; bottom: 1.8rem; } .about .main-2 { padding-top: 18.8rem; padding-bottom: 4.3rem; background-color: #07cd6a; margin-top: -12.25rem; position: relative; z-index: -1; } .about .main-2 .main-center{ max-width: 64rem; } .about .main-2 h2{ text-align: center; color: #ffff1b; margin-bottom: 1.6rem; } .about .main-2 .main-title p{ text-align: center; } .about .main-2 .main-list{ display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 1.2rem; } .about .main-2 .item{ width: calc(50% - 2.5rem); } .about .main-2 .item p{ display: none !important; } .about .main-2 .item h6{ font-size: 1rem; line-height: 1.5; color: #ffffff; margin-top: 1.8rem; } .about .main-2 .item h6:before{ content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 100%; background-color: #ffffff; margin-right: 0.6rem; } .about-swiper{ padding: 0 0 5.5rem; } .about-swiper .swiper-slide{ position: relative; height: 45.5rem; } .about-swiper .swiper-slide>img{ width: 100%; min-height: 45.5rem; } .about-swiper-txt{ display: flex; align-items: center; width: 53.75%; height: 16.35rem; background-image: linear-gradient(to right,rgba(0,0,0,1),rgba(0,0,0,.1)); position: absolute; left: 0; bottom: 0; } .about-swiper-txt>img{ max-width: 10rem; margin: 0 5rem 0 4rem; } .about-swiper-txt>span{ font-size: 0.85rem; line-height: 1.8; max-width: 22rem; color: #ffffff; } .about .main-3 { background-color: #3b52f6; } .about .main-3 * { color: #fff; } .about .main-3 h2 { color: #fff; } .about .main-5 { background-color: #fafafb; } .about .main-6 { padding-top: 0; } .about .main-7 { padding: 5rem 0 3.7rem; } .about .main-7 .main-title h2{ text-align: center !important; } .about .main-7 .container { display: flex; flex-wrap: wrap; } .about .main-7 .container .item { width: calc((100% - (5 - 1) * 1.3rem) / 5); margin-right: 1.3rem; margin-bottom: 1.3rem; text-align: center; } .about .main-7 .container .item:nth-of-type(5n) { margin-right: 0; } .about .main-7 .container .item { height: 5rem; display: flex; } .about .main-7 .container .item img { margin: auto; } @media screen and (max-width: 1024px) { .about .main-4 .container .img-wrap .img img { max-width: 13rem; } } @media screen and (max-width: 820px) { .about .main-4 .container .img-wrap .img img { max-width: 18rem; } } @media screen and (max-width: 768px) { .list-banner > .img { width: 50%; padding: 1.3rem; } .about .container { margin-bottom: 0; } .about .main-1 .container h2 br { display: none; } .about .main-1 .container .img { display: none; } .about .main-2 .container .item { align-items: flex-start; } .about .main-2 .container .item .i { width: 3rem; height: 3rem; } .about .main-4 { padding-bottom: 2rem; } .about .main-4 .container .img-wrap { flex-direction: column; } .about .main-4 .container .img-wrap .img h4 br { display: none; } .about .main-4 .container .img-wrap .img img { display: none; } .about .main-5 .container { flex-wrap: nowrap; overflow-x: scroll; } .about .main-5 .container .item { width: 100%; flex-shrink: 0; } .about .main-6 .container { padding: 0; } .about .main-6 .container .swiper-slide { flex-direction: column; } .about .main-6 .container .swiper-slide .img { width: 100%; height: 12rem; } .about .main-6 .container .swiper-button { display: none; } .about .main-7 .container { margin-bottom: 0; } .about .main-7 .container .item { width: calc((100% - 1.3rem) / 3); margin-right: 0.5rem !important; } .about .main-7 .container .item:nth-of-type(4n) { margin-right: 0 !important; } }