.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 0.9rem; 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; } .join-us-banner{ background-color: #284dfd; padding: 4.35rem 0; text-align: center; } .join-us-banner h2{ font-size: 2rem; color: #ffffff; } .join-us-banner span{ display: block; font-size: 1rem; line-height: 1.2; color: #f2f429; margin-top: 0.45rem; } .coo .main-center{ max-width: 60.1%; } .coo .main-4{ padding: 0 0 6.4rem; } .coo .main-4 h1{ display: flex; justify-content: center; align-items: center; width: 100%; height: 3.2rem; background-color: #284dfd; font-size: 1.9rem; color: #ffffff; margin-top: 8.25rem; } .coo .main-4 h1:nth-of-type(2){ margin-top: 10.3rem; } .coo .main-4 h1:nth-of-type(){ margin-top: 15.2rem; } .coo .main-4 h2 { margin-top: 3.8rem; } .coo .main-4 h3, .coo .main-4 h6{ display: flex; font-size: 0.85rem; line-height: 1.47; margin-top: 1.4rem; color: #505050; } .coo .main-4 h5{ font-size: 0.85rem; line-height: 1.47; } .coo .main-4 h6:before{ content: ""; display: block; width: 0.65rem; height: 0.65rem; border-radius: 100%; background-color: #505050; margin: 0.3rem 0.7rem 0 0; } .coo .main-4 p{ font-family: "HarmonyOS_Sans_Medium" !important; font-size: 0.85rem; line-height: 1.47; margin-bottom: 0 !important; margin-top: 1.4rem; } .coo .main-4 p>span{ font-family: "HarmonyOS_Sans_Medium" !important; max-width: calc(100% - 1.35rem); } .coo .main-4 .p-box-2 p, .coo .main-4 .p-box-4 p, .coo .main-4 .p-box-5 p, .coo .main-4 .p-box-6 p, .coo .main-4 .p-box-7 p{ display: flex; } .coo .main-4 .p-box-2 p:before, .coo .main-4 .p-box-4 p:before, .coo .main-4 .p-box-5 p:before, .coo .main-4 .p-box-6 p:before, .coo .main-4 .p-box-7 p:before{ content: ""; display: block; width: 0.65rem; height: 0.65rem; border-radius: 100%; background-color: #505050; margin: 0.3rem 0.7rem 0 0; } .coo .main-4 .p-box-4{ padding: 0.9rem 3.2rem; background-color: #d9d9d9; margin: 0.5rem 0; } .coo .main-4 .p-box-4 p, .coo .main-4 .p-box-5 p, .coo .main-4 .p-box-7 p{ margin: 0.7rem 0; } .coo .main-4 .p-box-5, .coo .main-4 .p-box-7{ margin-top: 1.4rem; } .coo .main-4 .p-box-5 p, .coo .main-4 .p-box-5 p>span{ font-family: "HarmonyOS_Sans_Black" !important; } .coo .main-4 .more-btn1{ box-sizing: border-box; height: 2.4rem; padding: 0 0.8rem; border: 0.1rem solid #18d777; border-radius: 0.5rem; float: right; transition: all .6s; } .coo .main-4 .item::after{ content: ""; display: block; width: 0; height: 0; overflow: hidden; clear: both; } .coo .main-4 .more-btn1 a{ display: flex; align-items: center; border: 0; height: 100%; color: #18d777; padding-right: 1rem; font-size: 0.9rem; position: relative; transition: all .6s; } .coo .main-4 .more-btn1 em{ font-family: "HarmonyOS_Sans_Regular" !important; margin-left: 0.3rem; margin-top: 0.1rem; transition: all .6s; position: absolute; right: 0; top: 50%; transform: scaleY(1.8) translateY(-32.5%); } .coo .main-4 .more-btn1:hover{ opacity: .6; } .coo .main-4 .more-btn1:hover em{ right: -0.3rem; } .coo p.p { position: relative; padding-left: 0.9rem; } .coo p.p::after { content: ""; position: absolute; top: 50%; left: 0; width: 0.3rem; height: 0.3rem; border-radius: 50%; background-color: #3b52f6; transform: translateY(-50%); } .coo .main-1 { padding-top: 0; } .coo .main-1 .container div { margin-bottom: 0.9rem; } .coo .main-2 { padding-top: 0; } .coo .main-2 .t { margin-bottom: 3rem; } .coo .main-2 .t * { text-align: left; } .coo .main-2 .t p { margin-top: 2rem; line-height: 2; color: #999; } .coo .main-2 h2 { text-align: center; margin-bottom: 0.5rem; } .coo .main-2 h2 span { font: inherit; font-weight: 100; } .coo .main-2 h3 { max-width: 60rem; margin: 0.5rem auto; text-align: center; font-size: 0.9rem; font-weight: normal; } .coo .main-2 .container .swiper-slide { border-radius: 0.9rem; position: relative; border-radius: 3rem; overflow: hidden; } .coo .main-2 .container .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .coo .main-2 .container .swiper-slide .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0.9rem; padding-top: 5rem; background-color: rgba(0, 0, 0, 0.5); } .coo .main-2 .container .swiper-slide .text * { color: #fff; text-align: center; } .coo .main-2 .container .swiper-slide .text h6 { font-size: 0.9rem; margin-bottom: 2rem; } .coo .main-2 .container .swiper-slide .text p { font-weight: 100; line-height: 1.6; } .coo .main-3 { padding-top: 0; } .coo .main-3 .container { position: relative; } .coo .main-3 .container .t { position: absolute; top: 0; right: 0; max-width: 16.5rem; } .coo .main-3 .container>.img { height: 15rem; margin-bottom: 3rem; background-color: #ccc; } .coo .main-3 .container h4 { font-size: 1.3rem; margin-bottom: 2rem; } .coo .main-3 .container p { line-height: 1.8; font-size: 0.9rem; margin-bottom: 2rem; word-break: break-word; } .coo .main-3 .container p.p { margin-bottom: 0; } .coo .main-3 .container h5 { font-size: 1.0.9rem; color: #343434; padding-top: 0.9rem; padding-bottom: 0.9rem; } .coo .main-3 .container h6 { font-size: 1.3rem; font-weight: 100; margin-bottom: 2rem; } .coo .main-3 .container>div>p { font-weight: bold; color: #3b52f6; } .coo .main-3 .container .con { margin-top: 3rem; } .coo .main-3 .container .con .item { margin-bottom: 3rem; } .coo .main-3 .container .con .item:last-of-type { margin-bottom: 0; } .coo .main-3 .container .con .item h4 { margin-right: 3rem; margin-bottom: 0.9rem; } @media screen and (max-width: 1024px) { .coo .main-4 .container .img1 img { max-width: 20rem; width: 75%; left: 125%; .coo .main-4 .container .img2 img { max-width: 17rem; } } @media screen and (max-width: 768px) { .coo { margin-top: 2rem; } .coo .main-3 .container>img { display: none; } .coo .main-4 h2 { font-size: 1.3rem; } .coo .main-4 .title>img { display: none; } .coo .main-4 .title div p { font-size: 1.3rem; } .coo .main-4 .container .item { margin-bottom: 2rem; } .coo .main-4 .container .img1 ul, .coo .main-4 .container .img2 ul { max-width: 100%; } .coo .main-4 .container .img1 ul li, .coo .main-4 .container .img2 ul li { padding-right: 1rem; } .coo .main-4 .container .img1 img, .coo .main-4 .container .img2 img, .coo .main-4 .container .img1 i, .coo .main-4 .container .img2 i { display: none; } .coo .main-4 .container .img2 { margin-bottom: 2rem; } .coo .main-4 .container .img3 { display: none !important; } .coo .main-4 .container .img3-wrap { flex-direction: column; } .coo .main-4 .container .shadow { flex-direction: column; } .coo .main-4 .container .shadow .right { margin-left: 0; } .coo .main-4 .container h5 br { display: none; } }