/* 桌面端 css */

/**************** 首页 ****************/

.hero-section-mobile {
    display: none;
}

/* if 浏览器宽度 ＞1128；内容宽度 = 1100 */
@media (min-width: 1128px) {
    .hero-section-desktop {
        width: 1100px; /* 设置内容宽度为1100px */
    }
}

/* if 浏览器宽度 ≥ 984 并 ≤ 1128；内容宽度 = 浏览器宽度-左右边距合计 128 */
@media (min-width: 984px) and (max-width: 1128px) {
    .hero-section-desktop {
        width: calc(100% - 128px);
    }
}

.hero-section-desktop {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    height: 100%;
    height: 100vh;
}

/**************** 标题栏 ****************/

.hero-section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 64px;
    flex-shrink: 0;
}

.logo-full {
    width: 116px;
    height: 24px;
}

.text-header {
    color: var(--tap-color-grey-100);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
}

.text-header:hover {
    color: var(--tap-color-function-green-1);
}

.text-header.with-margin {
    margin-left: 40px;
}

/**************** 主体内容 - 左侧 ****************/

.hero-section-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}

.content-left {
    display: flex;
    flex-direction: column;
}

.content-left div {
    background-repeat: no-repeat;
    background-position: center;
}

.content-left-img-1 {
    border: none;
    width: 202px;
    height: 42px;
    background-image: url(../img/logo_full.png);
    background-size: 201.5px 41.5px;

}

.content-left-img-2 {
    width: 198px;
    height: 30px;
    background-image: url(../img/logo_full_desc.png);
    background-size: 198px 21.5px;
    background-repeat: no-repeat;
    background-position: center;
}

.content-left-img-3 {
    width: 523px;
    height: 61px;
    background-image: url(../img/slogan_title.png);
    background-size: 517px 44.5px;
    margin-top: 48px;
}

.content-left-img-4 {
    width: 224px;
    height: 37px;
    background-image: url(../img/slogan_desc.png);
    background-size: 221.5px 26.5px;
    margin-top: 8px;
}

.content-left-container-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: linear-gradient(143deg, #C7FFC7 -0.16%, #D3F7FF 99.84%);
    width: 152px;
    height: 180px;
    margin-top: 48px;
}

.content-left-img-5 {
    width: 120px;
    height: 120.5px;
    background-image: url(../img/mini_program_qr.png);
    background-size: 120px 120.5px;
}

.text-wechat-miniprogram {
    color: var(--tap-color-grey-100);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 8px;
}

/**************** 主体内容 - 右侧 ****************/

.content-right {
    position: relative;
    width: 278px;
    height: 568px;
}

.mobile-screen-bg {
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 40px;
    background: var(--tap-color-primary-1);
    width: 270px;
    height: 560px;
    flex-shrink: 0;
    z-index: 10;
}

.mobile-screen-video {
    position: absolute;
    top: 7.67px;
    left: 9.05px;
    width: 251.243px;
    height: 544.663px;
    flex-shrink: 0;
    border-radius: 33px;
    z-index: 30;
}

.mobile-screen-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 270px;
    height: 560px;
    background-image: url(../img/screen_cover.png);
    background-size: 269.5px 560px;
    z-index: 40;
}

/**************** 页脚 ****************/

.hero-section-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.hero-section-footer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    margin-bottom: 16px;
}

.text-footer {
    color: var(--tap-color-grey-200);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
}

.text-footer.light {
    color: var(--tap-color-grey-300);
    font-weight: 400;
}

.text-footer.with-margin {
    margin-left: 8px;
}

/**************** 微信公众号悬浮框 ****************/

.wechat-offical-account {
    position: absolute;
    top: 56px;
    opacity: 0;
    transition: opacity 0.3s;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--tap-color-grey-800);
    border-radius: 16px;
    width: 152px;
    height: 205px;
    z-index: 1100;
}

/* if 浏览器宽度 ＞1128；内容宽度 = 1100 */
@media (min-width: 1128px) {
    .wechat-offical-account {
        right: calc((100% - 1100px) / 2 + 125px);
    }
}

/* if 浏览器宽度 ≥ 984 并 ≤ 1128；内容宽度 = 浏览器宽度-左右边距合计 128 */
@media (min-width: 984px) and (max-width: 1128px) {
    .wechat-offical-account {
        right: calc(64px + 125px);
    }
}

.text-wechat:hover .wechat-offical-account {
    opacity: 1;
    visibility: visible;
}

.wechat-offical-account-qr {
    width: 120px;
    height: 120px;
    background-image: url(../img/wechat_offical_account.png);
    background-size: 120px 120px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 16px;
}

.text-wechat-title {
    color: var(--tap-color-grey-100);
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    margin-top: 8px;
}

.text-wechat-desc {
    color: var(--tap-color-grey-100);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}