.contact-banner-popup { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: right; } .contact-banner-popup .tit-group { margin-top: 17%; display: inline-block; } .contact-banner-popup .tit1 { font-size: 3.75vw; font-weight: bold; line-height: 1.2; color: #333; opacity: 0.36; } .contact-banner-popup .tit2 { font-size: 2.5vw; font-weight: bold; color: #333; line-height: 1.2; text-align: center; margin-top: -0.5em; margin-left: 1.5em; } .contacts { margin-top: 4.27083vw; padding: 0 15%; display: flex; justify-content: space-around; /* align-items: center; */ } .contacts .item { float: left; font-size: 0.18rem; font-weight: 400; color: #333333; /* width: 50%; */ } .contacts .item .tit { font-size: 0.24rem; font-weight: bold; color: #333333; } .contacts .item .ul { margin-top: 0.1rem; } .contacts .item .li { display: flex; align-items: center; margin-top: 0.2rem; } .contacts .item .li span { flex: 1; } .contacts .item .icon { width: 0.24rem; height: 0.24rem; margin-right: 0.16rem; } .contact-map { padding: 4.2708vw 0; } .contact-map .map { width: 100%; } @media screen and (max-width: 1440px) { .contact-banner-popup .tit1 { font-size: 4.25vw; } .contact-banner-popup .tit2 { font-size: 3.2vw; } .contacts .item .tit { font-size: 0.2rem; } .contacts .item { font-size: 0.16rem; } } @media screen and (max-width: 900px) { .contact-banner-popup .tit1 { font-size: 7vw; } .contact-banner-popup .tit2 { font-size: 5.2vw; } .contacts { padding: 0; display: block; } .contacts .item { margin-top: 0.25rem; font-size: 0.14rem; } .contacts .item+.item { margin-bottom: 0.25rem; margin-top: 0; } .contacts .item .li { margin-top: 0.1rem; } .contacts .item .icon { width: 0.24rem; height: 0.24rem; margin-right: 0.1rem; } .contact-map { padding: 0.4rem 0; } }