.dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setBetween { display: flex; justify-content: space-between; } .setRowCenter { display: flex; align-items: 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 !important; border-radius: 2rem; font-size: 0.9rem; display: inline-block; width: auto; } .btn.s1 { background-color: transparent; border: 1px solid #3b52f6; color: #3b52f6 !important; } .a-hover:hover { color: #3b52f6; } .contact-banner{ position: relative; } .contact-banner .main-center { max-width: 100%; } .contact-banner h1 { font-family: "HarmonyOS_Sans_Black" !important; background-color: #ffff1b; font-size: 2.4rem; font-size: 2rem; line-height: 1.2; padding: 5.4rem 0; text-align: center; } .contact-banner h5 { background-color: #284dfd; padding: 6.5rem 0; height: 46.45rem; font-size: 1.9rem; line-height: 1.45; color: #ffffff; text-align: center; } .contact-right-bg{ width: 14.5rem; position: absolute; right: 0; top: 3rem; z-index: 1; } .contact-left-bg{ width: 10.75rem; position: absolute; left: 0; bottom: -10.35rem; z-index: 1; } /* .contact-container section:not(:first-of-type) { padding-top: 0; } */ .contact-container{ padding-bottom: 2rem; margin-top: -27.5rem; position: relative; z-index: 1; } .contact-container section{ padding: 0; margin-bottom: 1.5rem; } .contact-container .main-center{ max-width: 67.4rem; } .contact-container .container .item-bg{ width: 100%; height: 17.25rem; background-size: 100%; } .contact-container .container .item { height: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2.5rem 1rem 4.5rem; background-color: rgba(0,0,0,.7); color: #fff; } .contact-container .container .item>.left{ width: 50%; } .contact-container .container .item h6 { font-size: 1.3rem; position: relative; } .contact-container section:nth-of-type(even) .container .item h6 { color: #ffff1b !important; } .contact-container .container .item .left p{ font-size: 1.25rem; line-height: 1.5; margin-bottom: 0 !important; } .contact-container .container .item .text { width: 45%; border-radius: 0.25rem; } .contact-container .container .item .text img { position: absolute; } .contact-container .container .item.item1 .text img { bottom: -12%; left: 45%; } .contact-container .container .item.item2 .text img { bottom: -12%; left: 83%; } .contact-container .container .item.item3 .text img { bottom: -110%; left: 90%; } .contact-container .container .item .mail { text-align: center; padding-top: 2rem; } .contact-container .container .item .mail a { display: inline-block; font-size: 0.9rem; font-weight: bold; color: #3b52f6; padding: 0.6rem; padding-bottom: 0.9rem; padding-left: 4rem; padding-right: 0.9rem; background-image: url("../images/jx2.png"); background-repeat: no-repeat; background-size: 100% 100%; } .container .item .text p { display: flex; font-size: 0.85rem; line-height: 1.8; margin-bottom: 0 !important; } .container .item .text p>em{ width: 1rem; } @media screen and (max-width: 1024px) { .contact-container .container .item.item2 .text img { max-width: 13rem; } .contact-container .container .item.item3 .text img { max-width: 18rem; } } @media screen and (max-width: 768px) { .main-center { padding-left: 2%; padding-right: 2%; } .contact-container .container .item .text img, .contact-container .container .item h6::before { display: none; } .contact-container .container .item .mail a { font-size: 1.1em; } .contact-container .container .item .text { width: 100%; padding: 1rem !important; } }