.banner {
    height: 51.25rem;
    overflow: hidden;
}

.banner .banner-img{
    max-height: 51.25rem;
}

.company-info{
    padding: 3rem 0;
    /*min-width: 1200px;*/
    background: #000;
}

.company-info .company-info-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    height: 10.25rem;
    color: #d6b53c;
    margin-bottom: 5rem;
}

/* .company-info .company-info-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 5rem;
    min-height: 10.5rem;
    color: #ffcd2e;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    flex-wrap: wrap;
}

.company-info .company-info-content .company-info-wrap {
    width: 21rem;
} */
.company-info .company-info-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 5rem;
    min-height: 10.5rem;
    color: #ffcd2e;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    flex-wrap: wrap;
    gap: 1rem; /* 增加间距，防止挤在一起 */
}

.company-info .company-info-content .company-info-wrap {
    width: 21rem;
    flex-shrink: 0; /* 禁止宽度被压缩，核心修复 */
}

/* 统一 1 billion 样式，禁止换行 */
.company-info-content > .d-flex.flex-column.align-items-center {
    width: 21rem;
    flex-shrink: 0;
    color: #ffcd2e;
    font-size: 5rem;
    font-weight: 600;
    white-space: nowrap; /* 永远不换行 */
}

.company-info .company-info-content .tips{
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 700;
}

.counter {
    transition: all 2s ease-in-out;
}


.trendy-product-N01{
    background-image: url("/template/static/images/202603/index/bg-1.jpg");
    text-align: center;
    height: 1122px;

    /* 核心：让背景图等比例缩放 */
    background-size: cover;       /* 等比例铺满 */
    background-position: center;  /* 居中显示 */
    background-repeat: no-repeat; /* 不重复 */
}
.trendy-product-N01 h1 {
    font-size: 3.75rem;
    font-weight: 700;
    padding-top: 10rem;
}
.trendy-product-N01 p {
    font-size: 24px;
}

/* ================= 基础响应式布局 ================= */
.trendy-product-N02 {
    background: url("/template/static/images/202603/index/bg-2.jpg") center/cover no-repeat;
    min-height: 1122px; /* 桌面保持视觉高度，内容多时自动撑开 */
    padding: 4rem 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trendy-product-N02-text{
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中，更美观 */
    width: 100%;
    max-width: 1200px; /* 跟页面整体宽度统一 */
    gap: 2rem; /* 左右间距 */
}

.trendy-product-N02-text-2{
    margin-top: auto; /* ✅ 关键代码 */
    display: flex;
    gap: 1rem;
}

.trendy-product-N02 h1,
.trendy-product-N02 p {
    width: 100%;
    max-width: 1200px;
    text-align: left;
    padding-left: clamp(1.5rem, 6vw, 11.68rem); 
    box-sizing: border-box;
    margin: 0 auto;
}

.trendy-product-N02 h1 {
    color: #ffcd2e;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.trendy-product-N02 p {
    color: #ffffff;
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* 针对 {{ template "202603/lb2.tmpl" . }} 渲染内容的通用适配 */
.trendy-product-N02 > *:last-child {
    width: 100%;
    max-width: 1200px;
    margin-top: 2.5rem;
    box-sizing: border-box;
}

/* ================= 移动端适配 (≤768px) ================= */
@media (max-width: 768px) {
    .trendy-product-N02 {
        min-height: auto;
        height: auto;
        padding: 2.5rem 1rem;
        justify-content: center;
        background-position: center 30%; /* 移动端可微调背景焦点，避免关键内容被裁 */
    }

    .trendy-product-N02 h1,
    .trendy-product-N02 p {
        padding-left: 0;
        text-align: center; /* 移动端居中阅读体验更佳 */
        max-width: 100%;
    }

    .trendy-product-N02 p {
        white-space: normal; /* 允许段落自动换行，避免横向滚动 */
    }
}
/*==========================================================*/
/*==========================================================*/
/*==========================================================*/

/* ================= 基础自适应 ================= */
/* 图片第三段 BEGIN */
.trendy-product-N03 {
    background: url("/template/static/images/202603/index/bg-3.jpg") center/cover no-repeat;
    text-align: center;
    min-height: 1122px;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.trendy-product-N03 h1 {
    color: #ffcd2e;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding-top: 0;
}

.trendy-product-N03 h1 .ht-2 {
    line-height: 1.2;
}

/* ================= 核心等高布局 ================= */
.no3-center {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 🔑 关键：强制左右两列高度一致 */
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.no3-c-l,
.no3-c-r {
    flex: 1;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

/* 左侧图片：撑满父容器计算出的高度 */
.no3-c-l img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填充，避免拉伸变形 */
    display: block;
}

/* 右侧容器：垂直排列，自动分配高度 */
.no3-c-r {
    gap: 1.4rem; /* 替代原 margin-top，间距更精准 */
}

.no3-c-r-1,
.no3-c-r-2 {
    flex: 1;           /* 🔑 均分右侧可用高度 */
    min-height: 0;     /* 🔑 解除 Flex 默认最小高度限制，允许收缩 */
    display: flex;
}

/* 右侧图片：撑满各自分配到的区域 */
.no3-c-r-1 img,
.no3-c-r-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================= 移动端适配 ================= */
@media (max-width: 768px) {
    .trendy-product-N03 {
        min-height: auto;
        height: auto;
        padding: 1.5rem 1rem;
    }

    .no3-center {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* 移动端取消等高限制，恢复图片自然高度 */
    .no3-c-l,
    .no3-c-r {
        width: 100%;
        max-width: 100%;
        flex: none;
        height: auto;
    }

    .no3-c-l img,
    .no3-c-r-1 img,
    .no3-c-r-2 img {
        height: auto;
        object-fit: unset;
    }

    .no3-c-r-1,
    .no3-c-r-2 {
        flex: none;
        min-height: auto;
        height: auto;
    }

    .no3-c-r {
        gap: 0.75rem;
    }
}



/*==========================================================*/
/*==========================================================*/
/*==========================================================*/


.store-info {
    margin: 0 2.5rem 3.125rem;
}

.store-info .store-title {
    width: 100%;
    color: #d6b53c;
    display: flex;
    justify-content: space-between;
    padding-top: 5.25rem;
    padding-bottom: 3.125rem;
}

.store-info .store-title .left {
    font-size: 2.5rem;
    font-family: MuliBold, sans-serif;
}

.store-info .store-title .right {
    display: flex;
    align-items: flex-end;
    padding-right: 15px;
    min-width: 40%;
}

.store-info .store-title .right .nav{
    width: 100%;
}

.store-info .store-title .right .active{
    border-bottom: 2px solid;
    color: #06cecb;
}

.store-info .store-title .right .active a{
    font-family: MuliBold, sans-serif;
}

.store-info .store-title .right .nav-item {
    margin: 0 auto;
}

.store-info .store-title .right a {
    color: #d6b53c;
    cursor: pointer;
    font-size: 1.5rem;
}

.store-info .store-content {
    max-height: 31.75rem;
    display: flex;
    flex-wrap: nowrap;
}

.store-info .wap-store{
    display: none;
}

.store-info .store-content .store-content-image{
    overflow: hidden;
}

.store-info .store-content .store-content-image img {
    transition: transform 0.3s ease;
    max-height: 27.5rem;
    max-width: 36.625rem /*586px*/;
    width: 100%;
    height: auto;
}

.store-info .store-content .store-content-image img:hover {
    transform: scale(1.1);
}

.store-info .store-content .store-content-tips{
    color: #808080;
    font-size: 1.6rem;
}

.store-info .store-content .card-body{
    max-height: 5rem;
}

.news {
    padding-top: 3.125rem;
    padding-bottom: 5rem;
    background: #fefefc url("/template/static/images/v2/home/news/news_bg.png") no-repeat right;
}

.news .news-title {
    width: 100%;
    color: #d6b53c;
    height: 3.75rem;
    display: flex;
    justify-content: center;
    margin-bottom: 3.125rem;
    font-size: 2.5rem;
    font-family: MuliBold, sans-serif;
}

.news .news-content {
    width: 95%;
    margin: 0 auto;
}

.news .news-content .card-img-top .imgdiv{
    max-height: 36.25rem;
    overflow: hidden;
}

.news .news-content .card-img-top .imgdiv img{
    max-height: 36.25rem;
    max-width:31.875rem ;
    overflow: hidden;
}

.news .news-content .card-img-top .moments-text{
    left: 20px;
    bottom: 20px;
    color: #fefefc;
    z-index: 1;
}

.news .news-content .new-img-wrap {
    max-width: 31.875rem;
}

.news .news-content .card-img-top:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("/template/static/images/v2/home/news/shadow.png")  ;
    background-size: contain;
    max-width: 31.875rem;
}

.news .news-content .card-img-top img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.news .news-content .card-img-top:hover .imgdiv img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1)
}

.news .news-content .news-card-title{
    font-size: 2.0rem;
}

.news .news-content .news-card-tips{
    font-size: 1.25rem;
}

@media screen and (max-width: 768px) {

    .banner {
        height: auto;
        overflow: hidden;
    }

    .banner .banner-img {
        max-height: 51.25rem;
    }

    .carousel-control-prev {
        opacity: .8;
    }

    .carousel-control-next {
        opacity: .8;
    }

    .company-info {
        padding: 2rem 0;
    }

    .company-info .company-info-title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        height: 6.25rem;
        color: #d6b53c;
        margin-bottom: 0;
    }

    .company-info .company-icon{
        width: 3.75rem;
    }

    .company-info .company-info-content {
        font-size: 3.75rem;
        min-height: 10.5rem;
        margin: 0;
    }

    /* .company-info .company-info-content .company-info-wrap {
        width: 15.5rem;
        padding: 1.5rem 0;
    } */
    .company-info .company-info-content .company-info-wrap {
        width: 15.5rem;
        flex-shrink: 0;
        padding: 1.5rem 0;
    }
    
    /* 移动端统一 1 billion */
    .company-info-content > .d-flex.flex-column.align-items-center {
        width: 15.5rem;
        flex-shrink: 0;
        font-size: 3.75rem;
        white-space: nowrap;
    }

    .company-info .company-info-content .tips {
        font-size: 1.25rem;
        color: #999;
    }

    .counter {
        transition: all 2s ease-in-out;
    }

    .vedio {
        max-height: 51.25rem;
        background: url("/template/static/images/v2/vedio_background.jpg");
        background-size: 100%;
    }

    .vedio .vedio-content {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .ip-info{
        padding-top: 2rem;
        display: flex;
        justify-content: center;
    }

    .ip-info .web-ip {
        display: none !important;
    }

    .ip-info .wap-ip{
        display: flex;
        margin: 0 1.5rem;
        width: 100%;
    }

    .ip-info .wap-ip .title{
        font-size: 2.5rem;
        color: #d6b53c;
        margin-bottom: 2rem;
    }

    .store-info {
        margin: 0 1.5rem 3.125rem;
    }

    .store-info .store-title {
        width: 100%;
        color: #d6b53c;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-top: 3.25rem;
        padding-bottom: 3.125rem;
        text-align: center;
    }

    .store-info .store-title .right {
        display: flex;
        align-items: flex-end;
        padding-right: 15px;
        min-width: 40%;
    }

    .store-info .store-title .right .nav-item{
        width: 33%;
    }

    .store-info .store-content {
        max-height: 31.75rem;
        display: none;
        flex-wrap: nowrap;
    }

    .store-info .wap-store{
        display: block;
    }

    .news .news-title {
        width: 100%;
        color: #d6b53c;
        height: 3.75rem;
        display: flex;
        justify-content: center;
        margin-bottom: 0.125rem;
        font-size: 2rem;
        font-family: MuliBold, sans-serif;
    }

    .news .news-content .new-img-wrap {
        max-width: 31.875rem;
        flex: auto;
        padding-top: 2rem;
    }

    .wap-col-2{
        flex: 0 0 auto;
        width: 50%;
    }

}