@charset "UTF-8";
.app-contact-wrapper { position: relative; padding: var(--app-fs-192) 0; overflow: hidden; }
.app-contact-wrapper .backend { position: absolute; top: 0; font-size: var(--app-fs-280); font-weight: normal; color: rgba(51,51,51,.03); white-space: nowrap; animation: marquee 60s linear infinite; }
.app-contact-wrapper .wrap { align-items: end; }
.app-contact-wrapper .wrap .left { width: 50%; padding-right: var(--app-fs-60); }
.app-contact-wrapper .wrap .tel { font-size: var(--app-fs-38); color: #333; }
.app-contact-wrapper .wrap .other { font-size: var(--app-fs-16); color: #333; }
.app-contact-wrapper .wrap .qrcode { width: var(--app-fs-128); height: var(--app-fs-128); padding: 10px; margin-left: var(--app-fs-60);; border-radius: 8px; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px; }
.app-contact-wrapper .wrap .qrcode .img { width: 100%; }
.app-contact-wrapper .wrap .right { width: 50%; padding-left: var(--app-fs-60); }
.app-contact-wrapper .wrap .right .image-wrap { position: relative; }
.app-contact-wrapper .wrap .right .image-wrap:after { content: ""; position: absolute; top: var(--app-fs-24); left: 0;
    width: 100%; height: 100%; border-radius: 14px; background: #f3f3f3; transform: rotate(-10deg); }
.app-contact-wrapper .wrap .right .image-wrap .image-box { position: relative; z-index: 10; width: 100%; height: 0; padding-bottom: 56.4%; border-radius: 14px; overflow: hidden; }
.app-contact-wrapper .wrap .right .image-wrap .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

@media (hover:hover) {
    .app-contact-wrapper .wrap .right .image-wrap:hover .image { transform: scale(1.1); }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 1024px) {  }

@media (max-width: 992px) {
    .app-contact-wrapper .wrap {
        flex-direction: column;
        align-items: normal;
    }

    .app-contact-wrapper .wrap .left {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .app-contact-wrapper .wrap .other {
        line-height: 1.7;
    }

    .app-contact-wrapper .wrap .qrcode {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        margin-left: 0;
    }

    .app-contact-wrapper .wrap .right {
        width: 100%;
        padding-left: 0;
        margin-top: 30px;
    }
}

@media (max-width: 768px) { }

@media (max-width: 600px) {  }

@media (max-width: 375px) {  }