/*
 * @Author: xiejun
 * @Date: 2024-10-23 17:09:47
 * @LastEditors: xiejun
 * @LastEditTime: 2025-02-07 17:33:29
 * @Description:
 * @FilePath: \Gubesto-website\css\applications.css
 */
.app_anchor {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background: #fafafa;
    z-index: 50;
    box-shadow: inset 0px -0.5px 0px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease-out;

    scrollbar-width: none; /* 隐藏滚动条（对于 Firefox） */
    -ms-overflow-style: none; /* 隐藏滚动条（对于 IE 和 Edge） */
    overflow-x: auto; /* 当内容溢出时允许水平滚动 */
    white-space: nowrap; /* 保持内容不换行 */
    -webkit-overflow-scrolling: touch; /* 提升手机端的滚动体验 */
    scroll-snap-type: x mandatory; /* 添加滚动捕捉效果 */
}

.app_page_wraper {
    position: relative;
    z-index: 2;
}

#app_anchor::-webkit-scrollbar {
    display: none; /* 隐藏滚动条（对于 Chrome、Safari） */
}
.app_anchor_up {
    transition: 0.35s ease-out;

    top: 123px;
}
.app_anchor_text {
    font-family: MiSans_Normal;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 16px;
    cursor: pointer;
    position: relative;
    padding: 0 60px;
    flex-shrink: 0;
    scroll-snap-align: start; /* 在滚动结束时捕捉到每个链接的起始位置 */
    transition: color 0.3s;
}

.app_anchor_text:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0; /* 分割线的水平位置 */
    top: 50%;
    transform: translateY(-50%);
    width: 1px; /* 分割线的宽度 */
    height: 14px; /* 分割线的高度 */
    background-color: rgba(153, 153, 153, 0.5); /* 分割线颜色 */
}

.app_anchor_active {
    color: #001a70;
}

.app_page {
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
    background-position-x: right;
    background-position-y: bottom;
    height: 100vh;
    background-color: #ffffff;
}
.app_page_1 {
    background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_1.png);
}
.app_page_2 {
    background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_2.png);
}
.app_page_3 {
    background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_3.png);
}

.app_page_4 {
    background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_4.png);
}

.app_aside_top {
    position: absolute;
    left: 8.3333vw;
    top: 32.1276vh;
    z-index: 5;
}

.app_aside_top_1 {
    font-family: MiSans_Normal;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    line-height: 27px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 0.1563vw;
}

.app_aside_top_2 {
    font-family: MiSans_Semibold;
    /* font-weight: 600; */
    font-size: 70px;
    color: #333333;
    line-height: 93px;
    letter-spacing: 2px;
}

.app_aside_top_3 {
    font-family: GothamSSm_XLight;
    font-weight: 300;
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    text-transform: uppercase;
    margin-left: 0.1563vw;
}

.app_page_img {
    display: none;
    width: 100%;
}
.app_aside_bottom {
    position: absolute;
    left: 8.3333vw;
    bottom: 14.8936vh;
    z-index: 5;
}
.app_aside_bottom_1 {
    max-width: 309px;
    font-family: MiSans_Light;
    font-weight: 300;
    font-size: 12px;
    color: #999999;
    line-height: 16px;
}

.app_aside_bottom_2 {
    max-width: 492px;
    font-family: GothamSSm_Medium;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 16px;
    text-transform: uppercase;
    margin-top: 8px;
}

.app_goods_aside {
    width: 100%;
    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    padding: 17vh 0;
    background: #ffffff;
}

.app_goods_aside_ul {
    max-width: 1160px;
    width: 60.4167vw;
    margin: 0 auto;
}
.app_goods_aside_li1 {
    padding-top: 0 !important;
}
.app_goods_aside_li1 > span {
    font-family: MiSans_Light;
    font-weight: 300;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
}

.app_goods_aside_ul > li {
    position: relative;
    padding: 6.38297vh 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.app_goods_aside_li_div_l > p:first-child {
    font-family: GothamSSm_Medium;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    line-height: 24px;
}

.app_goods_aside_li_div_l > p:last-child {
    font-family: MiSans_Normal;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 19px;
    margin-top: 24px;
}
.app_goods_aside_li_div_r {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

/*========== MEDIA QUERIES ==========*/

@media (max-width: 768px) {
    .app_anchor {
        top: 44px;
        height: 40px;
    }
    .app_anchor_up {
        /* top: 0; */
    }
    .app_anchor_text {
        padding: 0 24px;
    }

    .app_page {
        background-color: #fafafa;
        height: 176vw;
        padding-top: 16vw;
    }
    .app_page_1 {
        height: calc(176vw + 84px);
        padding-top: calc(16vw + 84px);
        background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_1_s.png);
    }
    .app_page_2 {
        background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_2_s.png);
    }
    .app_page_3 {
        background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_3_s.png);
    }
    .app_page_4 {
        background-image: url(https://gubesto.oss-cn-shanghai.aliyuncs.com/gubesto/img/product_img_banner_4_s.png);
    }
    /* .app_page_1,
    .app_page_2,
    .app_page_3,
    .app_page_4 {
        background-image: none;
    } */

    .app_aside_top {
        position: static;
        padding-left: 6.4vw;
    }

    .app_aside_top_1 {
        font-size: 3.2vw;
        line-height: 4.2667vw;
        letter-spacing: 0.2667vw;
        margin-left: 0.5333vw;
    }

    .app_aside_top_2 {
        font-size: 9.0667vw;
        line-height: 12vw;
        letter-spacing: 0.5333vw;
        margin-top: 2.1333vw;
    }

    .app_aside_top_3 {
        font-size: 3.2vw;
        line-height: 4vw;
        text-transform: uppercase;
        margin-left: 0.5333vw;
        margin-top: 1.0667vw;
    }

    .app_page_img {
        display: block;
        margin-top: 38.9333vw;
        width: 93.6vw;
        height: 67.4667vw;
    }

    .app_aside_bottom {
        display: none;
        position: static;
        padding-left: 6.4vw;
        margin-top: 9.6vw;
    }
    .app_aside_bottom_1 {
        max-width: 51.4667vw;
        font-size: 2.1333vw;
        line-height: 2.6667vw;
    }

    .app_aside_bottom_2 {
        font-size: 2.4vw;
        line-height: 2.9333vw;
        margin-top: 1.0667vw;
    }

    .app_goods_aside {
        padding: 0 0 16vw;
    }

    .app_goods_aside_ul {
        width: 87.2vw;
    }

    .app_goods_aside_li1 > span {
        font-size: 3.7333vw;
        color: #999999;
        line-height: 5.3333vw;
    }

    .app_goods_aside_ul > li {
        padding: 12.2667vw 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .app_goods_aside_li1 {
        text-align: justify;
        padding: 16vw 0 !important;
    }
    .app_goods_aside_li_div_l > p:first-child {
        font-size: 4.2667vw;
        line-height: 5.0667vw;
    }

    .app_goods_aside_li_div_l > p:last-child {
        font-size: 3.2vw;
        line-height: 4.2667vw;
        margin-top: 3.7333vw;
    }
    .app_goods_aside_li_div_r {
        width: 9.6vw;
        height: 9.6vw;
        position: static;
        transform: none;
        margin-top: 3.7333vw;
    }
}

@media (max-width: 446px) {
    .app_anchor {
        justify-content: flex-start;
    }
}