.page_banner { padding-top: 23.9583333333%; background-size: cover; position: relative; } @media (max-width: 767.98px) { .page_banner { padding-top: 50%; } } .page_banner .banner-content { position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%); } .page_banner .tit { font-size: 42px; font-weight: bold; color: #fff; margin-bottom: 5px; line-height: 1.5; } @media (max-width: 767.98px) { .page_banner .tit { font-size: 32px; text-align: center; } } .page_banner .en-tit { font-size: 16px; color: #fff; font-family: Arial, sans-serif; padding-left: 62px; position: relative; text-transform: uppercase; } @media (max-width: 767.98px) { .page_banner .en-tit { font-size: 12px; text-align: center; padding-left: 0; } } .page_banner .en-tit::before { content: ""; display: block; width: 50px; height: 1px; background-color: #fff; position: absolute; top: 50%; left: 0; margin-top: -1px; } @media (max-width: 767.98px) { .page_banner .en-tit::before { content: none; } } @charset "UTF-8"; .contact-wrap { display: flex; flex-wrap: wrap; background-color: #fff; border-radius: 8px; justify-content: space-between; align-items: center; margin-top: calc(-80px - 4.5rem); margin-bottom: 30px; padding: 50px 80px; } @media (max-width: 991.98px) { .contact-wrap { margin-top: 0; padding: 30px 40px; } } @media (max-width: 767.98px) { .contact-wrap { margin-top: 20px; } } .contact-wrap .block-it { display: flex; align-items: center; } @media (min-width: 768px) and (max-width: 991.98px) { .contact-wrap .block-it { flex-direction: column; } } @media (max-width: 767.98px) { .contact-wrap .block-it:not(:last-child) { margin-bottom: 20px; } } .contact-wrap .block-it:nth-child(1) .inf { font-size: 30px; font-family: Arial, sans-serif; color: #0f4db0; } @media (max-width: 991.98px) { .contact-wrap .block-it:nth-child(1) .inf { font-size: 18px; font-family: "Microsoft Yahei", "微软雅黑细体", "PingFang SC", sans-serif, "Helvetica", "Arial", sans-serif; } } .contact-wrap .block-it:nth-child(2) .inf, .contact-wrap .block-it:nth-child(3) .inf { font-size: 18px; color: #0f4db0; } .contact-wrap .img { -webkit-box-flex: 0; -ms-flex: 0 0 60px; flex: 0 0 60px; max-width: 60px; } @media (min-width: 768px) and (max-width: 991.98px) { .contact-wrap .img { margin-bottom: 15px; } } .contact-wrap .txt { padding-left: 20px; } @media (min-width: 768px) and (max-width: 991.98px) { .contact-wrap .txt { padding-left: 0; text-align: center; } } .contact-wrap .txt h5 { font-size: 16px; color: #666666; font-weight: normal; line-height: 1.5; margin-bottom: 5px; } .contact-qr { min-height: 600px; padding: 75px 15px; display: flex; justify-content: center; border-radius: 8px; background-color: #fff; text-align: center; } @media (max-width: 991.98px) { .contact-qr { min-height: 0; } } @media (max-width: 767.98px) { .contact-qr { padding: 20px 15px; } } .contact-qr img { margin-bottom: 20px; } .contact-qr p { font-size: 16px; line-height: 1.5; color: #666; }