.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; } .coo h2 { margin-bottom: 2rem; } .coo h2 span { font: inherit; font-weight: 100; } .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; } .coo .main-4 { padding-top: 0; } .coo .main-4 .container .shadow { display: flex; justify-content: space-between; padding: 0.9rem; margin: 0.9rem 0; box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); } .coo .main-4 .container .shadow.block { display: block; } .coo .main-4 .container .shadow .left i { display: block; width: 1.3rem; height: 1.3rem; margin-bottom: 0.9rem; background-color: #3b52f6; } .coo .main-4 .container .shadow .right { margin-left: 4rem; } .coo .main-4 .container ul li { margin-bottom: 0.9rem; position: relative; } .coo .main-4 .container ul li::before { content: ""; position: absolute; top: 0; right: calc(100% + 0.9rem); width: 1.3rem; height: 1.3rem; background-color: #3b52f6; } .coo .main-4 .container ol li { position: relative; } .coo .main-4 .container ol li::before { content: "•"; position: absolute; top: 0; right: calc(100% + 0.9rem); line-height: 1.4; color: #3b52f6; font-size: 1.3rem; } .coo .main-4 .container p a { text-decoration: underline; color: #3b52f6; } .coo .main-4 .container .setBetween .left { margin-right: 2rem; flex-shrink: 0; } .coo .main-4 .container .img1 { position: relative; display: inline-block !important; } .coo .main-4 .container .img1 img { position: absolute; top: 0; left:125%; } .coo .main-4 .container .img2 { position: relative; z-index: 1; margin-bottom: 4rem; } .coo .main-4 .container .img2 ul { max-width: 70%; position: relative; z-index: 1; } .coo .main-4 .container .img2 ul li { background-color: #fff; padding-right: 3rem; } .coo .main-4 .container .img2 i { position: absolute; bottom: -2rem; right: 0; display: block; width: 20.65rem; height: 14.95rem; border: 1px solid #3b52f6; z-index: -1; } .coo .main-4 .container .img2 img { position: absolute; bottom: -2rem; right: 0; z-index: 2; width: 35%; } @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; } }