* {
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
}

a {
    text-decoration: none;
}

body {
    font-family: 'MyCustomFont', sans-serif;
    /* 使用自定义字体 */
}

.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../img/public-img/fonts/times.ttf') format('woff2'),
        /* 支持现代浏览器 */
        url('../img/public-img/fonts/times.ttf') format('woff');
    /* 支持旧版浏览器 */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
    /* 使用自定义字体 */
}

:root {
    /* 主色调 */
    --primary-color: #e70012;
    --normall-color: #111E36;
    --orange-color: #FF8300
}

.main-bg {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.mid-words {
    width: 100%;
    /* height: calc(100% - 0.38rem); */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0.1rem;
    z-index: 6;

    p {
        font-size: 0.48rem;
        color: #fff;
        text-align: center;
    }

    .button-ban {
        width: 3.4rem;
        height: 0.6rem;
        background-color: white;
        border-radius: 0.08rem;
        margin: 0.4rem auto;
        text-align: center;

        a {
            width: 100%;
            text-decoration: none;
            display: inline-block;

            span {
                font-size: 0.26rem;
                color: #aaa;
                line-height: 0.6rem;
                position: relative;

                &::before {
                    width: 0.26rem;
                    height: 0.26rem;
                    background: url(../img/top-fd.png) no-repeat center 100%/ 100% 100%;
                    position: absolute;
                    left: -0.4rem;
                    top: 0.02rem;
                    content: '';
                }
            }
        }
    }
}

.header {
    /* 导航栏自身高度 50px + 安全距离 */
    min-height: calc(50px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-top: constant(safe-area-inset-top);
    /* 让内容在安全距离下方居中 */
    display: flex;
    align-items: center;
    /* 垂直居中（包含安全距离的总高度内） */
    justify-content: center;
    /* 水平居中 */
    width: 100%;
    background: url(../img/top-img.png) no-repeat center;
    background-size: contain;
    background-color: #000;
}

@layer utilities {
    .banner-container {
        width: 100%;
        /* 宽度设为容器的100% */
        height: 5rem;
        overflow: hidden;
        position: relative;
        z-index:9;
    }

    .banner-wrapper {
        display: flex;
        transition: transform 0.5s ease;
        height: 100%;
    }

    .banner-slide {
        width: 100%;
        /* 每个轮播项宽度也设为100% */
        height: 5rem;
        flex-shrink: 0;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .dot-active {
        background-color: #fff;
    }
}

/* 指示器单一class样式 */
.banner-dot {
    width: 0.3rem;
    height: 2px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 1);
    margin: 0 0.06rem;
    transition: background-color 0.3s ease;
}

/* 激活状态通过添加/移除同一个class实现 */
.banner-dot.active {
    background-color: var(--primary-color);
}

.hd-zs {
    position: absolute;
    left: 0;
    bottom: 0.3rem;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 999;
}

.core-three {
    width: 100%;
    margin: 0.3rem 0;
    padding: 0 0.3rem;

    ul {
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            width: 32%;

            img {
                width: 100%;
                height: 100%;
            }

            span {
                position: absolute;
                bottom: 0.16rem;
                font-size: 0.24rem;
                color: #fff;
                left: 0;
                display: block;
                text-align: center;
                width: 100%;
            }
        }
    }
}

.all-categories {
    width: 100%;
    padding: 0 0.3rem;
    margin-bottom: 0.3rem;

    .categories-bg {
        width: 100%;
        margin-bottom: 0.3rem;

        ul {
            border-collapse: collapse;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #eee;
            border-radius: 4px;
        }

        li {
            border: 1px solid #eee;
            color: #333;
            width: 50%;

            a {
                width: 100%;
                height: 100%;
                display: flex;
                text-decoration: none;
                padding: 0.22rem 0.2rem;
            }

            img {
                width: 0.36rem;
                height: 0.36rem;
                margin-right: 0.08rem;
            }

            span {
                width: calc(100% - 0.44rem);
                font-size: 0.24rem;
                color: #333;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 0.36rem;
            }
        }
    }
}

.top-list {
    padding-left: 0.3rem !important;
}

.hot-Products {
    width: 100%;
    padding: 0.3rem;
    background-color: #f6f6f6;
}

.list-title {
    width: 100%;
    height: 0.64rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;

    .title-lf {
        img {
            width: 0.22rem;
            height: 0.22rem;
            margin-right: 0.1rem;
            display: inline-block;
            vertical-align: middle;
        }

        span {
            font-size: 0.28rem;
            display: inline-block;
            vertical-align: middle;
            line-height: 0.64rem;
            color: #333;
        }
    }

    .title-rt {

        img {
            width: 0.2rem;
            height: 0.2rem;
            display: inline-block;
            vertical-align: middle;
        }

        span {
            font-size: 0.22rem;
            color: #666;
            display: inline-block;
            vertical-align: sub;
            line-height: 0.64rem;
        }
    }
}

.product-list {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;

    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
        height: 0.1rem;
        /* 滚动条宽度 */
        border-radius: 0.05rem;
    }

    /* 滚动条轨道（灰色） */
    &::-webkit-scrollbar-track {
        background-color: #E4E6E6;
    }

    /* 滚动条滑块（红色） */
    &::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        border-radius: 0.05rem;
    }

    ul {
        width: 100%;
        height: 100%;
        position: relative;
        list-style: none;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;

        li {
            width: 1.7rem;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 0.1rem;

            a {
                text-decoration: none;

                img {
                    width: 1.7rem;
                    height: 1.7rem;
                    background-color: #fff;
                    border-radius: 4px;
                    border: 1px solid #eee;
                }

                p {
                    text-align: center;
                    font-size: 0.22rem;
                    line-height: 0.35rem;
                    font-weight: normal;
                    color: #000;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

        }
    }
}

.product-list-two {
    width: 100%;

    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;

        li {
            width: 48%;
            flex-shrink: 0;
            margin-bottom: 0.1rem;

            img {
                width: 100%;
                height: 2.6rem;
                border: 1px solid #eee;
                border-radius: 4px;
                object-fit: contain;
                background-color: #fff;
            }

            p {
                font-size: 0.24rem;
                color: #333;
                line-height: 0.4rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 0.1rem;
            }
        }
    }
}

.Community-Forum {
    width: 100%;
    padding: 0.3rem;

    ul {
        list-style: none;
        padding: 0;

        li {
            width: 100%;
            margin-bottom: 0.2rem;

            a {
                width: 100%;
                height: 100%;
                margin-bottom: 0.2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-decoration: none;

                img {
                    width: 1.6rem;
                    height: 1.6rem;
                    margin-right: 0.2rem;
                    border-radius: 0.08rem;
                    overflow: hidden;
                    border: 1px solid #E4E6E6;
                }

                .forum-urt {
                    width: calc(100% - 1.8rem);
                    height: 1.6rem;
                    padding: 0.04rem 0;

                    .urt-title {
                        height: 0.64rem;
                        margin-bottom: 0.63rem;

                        p {
                            font-size: 0.26rem;
                            line-height: 0.32rem;
                            color: #333;
                            display: inline-block;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    .urt-detail {
                        height: 0.32rem;
                        margin-bottom: 0.52rem;

                        p {
                            font-size: 0.24rem;
                            line-height: 0.32rem;
                            color: #333;
                            display: inline-block;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    .urt-date {
                        height: 0.32rem;

                        p {
                            font-size: 0.24rem;
                            line-height: 0.32rem;
                            display: inline-block;
                            display: -webkit-box;
                            color: #999;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
}

.service-overview {
    background-color: #f6f6f6;
    padding: 0.3rem 0;
    padding-bottom: 0;

    >.list-title {
        padding: 0 0.3rem;
        border-bottom: 1px solid rgba(204, 204, 204, 0.8);
        ;
        margin-bottom: 0;
        padding-bottom: 0.2rem;
    }

    .service-list {
        width: 100%;

        ul {
            width: 100%;

            li {
                width: 100%;
                height: 0.8rem;
                border-bottom: 1px solid #ebebeb;
                padding: 0 0.3rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            img {
                width: 0.24rem;
                height: 0.12rem;
            }

            p {
                color: #666;
                font-size: 0.26rem;
                text-transform: uppercase;
            }
        }
    }
}

.dropdown {
    width: 100%;
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6);
    padding: 0.2rem 0.3rem;
    width: 100%;
    font-size: 0.26rem;
    color: #333;
}

.dropdown-content {
    display: none;
    border-bottom: 1px solid rgba(204, 204, 204, 0.8);
    border-top: none;
    width: 100%;
    font-size: 0.24rem;
    line-height: 0.48rem;

    a {
        border-bottom: 1px solid rgba(204, 204, 204, 0.6);
        width: 100%;
        background-color: #fafafa;
        height: 100%;
        display: inline-block;
        padding: 0.1rem 0.4rem;

        &:last-child {
            border-bottom: 0;
        }
    }

    p {
        color: #333;
        display: inline-block;


        &:last-child {
            border-bottom: 0;
        }
    }

    span {
        display: inline-block;
    }
}

.arrow {
    width: 0.2rem;
    height: 0.1rem;
    background: url(../img/xialas.png) no-repeat center 100%/ 100% 100%;
    transition: transform 0.3s ease;
}

.arrow.rotated {
    transform: rotate(180deg);
}

.last-list {
    width: 100%;
    height: 0.8rem;
    background-color: #fff;
    text-align: center;
    padding: 0 0.3rem;

    p {
        font-size: 0.22rem;
        color: #333;
        line-height: 0.8rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.bottom-zw {
    position: relative;
    width: 100%;
    height: 0.88rem;
}

.top-list-placeholder {
    width: 100%;
    height: 0.8rem !important;
    /* 保持与导航栏过渡同步 */
}