.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 { background-color: #ffff1b; font-size: 2rem; line-height: 3.5rem !important; padding: 5rem 0; text-align: center; position: relative; } .contact-banner h1>span{ position: relative; z-index: 1; } .contact-banner h1>img{ width: 4.2rem; position: absolute; left: 50%; top: 50%; z-index: 0; transform: translate(-50%,-50%); animation: scale_name 1s linear alternate infinite; } @keyframes scale_name { from { transform: translate(-50%,-50%) scale(.9); } to { transform: translate(-50%,-50%) scale(1.1); } } .contact-banner h5 { background-color: #284dfd; padding: 3.5rem 0; height: 39.2rem; 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: -24.5rem; position: relative; z-index: 1; } .contact-container section{ padding: 0; margin-bottom: 1.5rem; } .contact-container .main-center{ max-width: 70.21%; } .contact-container .container .item-bg{ width: 100%; height: 15rem; 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 .container .item .left span{ display: flex; justify-content: center; width: 7.25rem; line-height: 1.8rem; background-color: #00db6d; margin-top: 1.4rem; border-radius: .4rem; cursor: pointer; transition: all .6s; } .contact-container section:nth-of-type(even) .container .item h6 { color: #ffff1b !important; } .contact-container section:nth-of-type(even) .container .item .left span{ background-color: #ffff1b; color: #333333; } .contact-container .container .item .left span:hover{ background-color: #2fe78b; color: rgba(255,255,255,.8); } .contact-container section:nth-of-type(even) .container .item .left span:hover{ background-color: #f8f84f; color: rgba(51,51,51,.8); } .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 { font-family: "HarmonyOS_Sans_Bold" !important; display: flex; font-size: 0.85rem; line-height: 1.8; margin-bottom: 0 !important; } .container .item .text p>em{ width: 1rem; } .md-m-content { width: 28.4rem; padding: 2.5rem; background: #FFFFFF; box-shadow: 0px 3px 16px 0px rgba(32, 30, 29, 0.35); border-radius: 0.75rem; position: relative; background: white; } .md-m-content img { width: 6.5rem; position: absolute; top: -0.8rem; left: -2rem; } .me-text { font-size: 1rem; color: #1b1b1b; text-align: center; line-height: 1.3; } .me-text span { display: block; font-size: 0.95rem; font-family: "HarmonyOS_Sans_Medium" !important; margin-top: 0.5rem; } .me-btn { display: flex; justify-content: center; align-items: center; width: 19.4rem; height: 1.8rem; border-radius: 6px; font-size: 1rem; background-color: #18d777; color: #ffffff; text-align: center; margin: 0.8rem auto 0; cursor: pointer; } @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; } }