/* ============================================================
   wap-style.css — 移动端 / 平板端响应式适配 (max-width: 1080px)
   ============================================================ */

/* ===== 全局容器 ===== */
.g-wrap {
    margin-left: 1rem;
    margin-right: 1rem;
}


/* ===== Section 标题 ===== */
.index-main .section-title {
    margin-bottom: var(--fontSize20);
    font-size: var(--fontSize28);
}

/* ===== 全局按钮适配 ===== */
.g-btn {
    padding: 0.8rem 2rem;
}

/* =========================================
   1. Header 头部导航
   ========================================= */
.g-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
}

.g-header.show_menu {
    background: var(--primaryColor);
}

.g-header .g-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.g-header .logo {
    width: 10rem;
}

/* 移动端菜单默认隐藏 */
.g-header .main-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--primaryColor);
    padding: var(--fontSize20);
    gap: var(--fontSize14);
}

.g-header .main-menu .menu-bar {
    width: 100%;
    flex-direction: column;
    gap: var(--fontSize14);
    text-align: center;
}

.g-header .main-menu .menu-bar li a {
    display: block;
    padding: var(--fontSize12) 0;
}

.g-header .main-menu .menu-bar li:hover a{
    font-weight: 300;
}

/* 移动端子菜单 */
.g-header .main-menu .menu-bar .has-submenu{
    display: block;
    width: 100%;
}
.g-header .main-menu .menu-bar .submenu::before{
    top: 4.1rem;
}
.g-header .main-menu .menu-bar .has-submenu .submenu {
    display: none;
    margin: 0.3rem 0;
    padding: 0.3rem 0;
    visibility: visible;
}

.g-header .main-menu .menu-bar .has-submenu.open .submenu {
    display: block;
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;;
}


.g-header .main-menu .top-phone {
    text-align: center;
    font-size: var(--fontSize20);
    padding-top: var(--fontSize12);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}


/* 激活菜单展开 */
.g-header.show_menu .main-menu {
    display: flex;
    height: calc(100vh - 5rem);
    overflow: auto;
}

/* 汉堡菜单图标 */
.g-header .wap-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    position: relative;
}

.g-header .wap-icon .icon-menu,
.g-header .wap-icon .icon-close {
    width: 1.8rem;
    height: 1.8rem;
    position: absolute;
}

.g-header .wap-icon .icon-menu {
    top: 0.75rem;
}

.g-header .wap-icon .icon-menu::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0.5rem 0 #fff, 0 1rem 0 #fff;
    transition: all 300ms;
}

.g-header .wap-icon .icon-close {
    display: none;
}

.g-header .wap-icon .icon-close::before,
.g-header .wap-icon .icon-close::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
}

.g-header .wap-icon .icon-close::before {
    transform: rotate(45deg);
}

.g-header .wap-icon .icon-close::after {
    transform: rotate(-45deg);
}

.g-header.show_menu .wap-icon .icon-menu {
    display: none;
}

.g-header.show_menu .wap-icon .icon-close {
    display: block;
}

/* =========================================
   2. Hero 主视觉区
   ========================================= */
.index-main .hero {
    margin-top: 5.6rem;
}

.index-main .hero .container a {
    width: 80%;
}

.index-main .hero .container p {
    font-size: var(--fontSize28);
}

.index-main .hero .container span {
    margin-top: 1.2rem;
    font-size: var(--fontSize16);
}

.index-main .hero .pagination {
    bottom: 0.5rem;
}

.index-main .hero .pagination span {
    width: 6px;
    height: 6px;
}

/* =========================================
   3. 产品推荐
   ========================================= */
.index-main .product-card {
    flex-direction: column;
}

.index-main .product-card .card-info {
    width: 100%;
    order: 2;
}

.index-main .product-card .card-picture {
    order: 1;
    width: 100%;
}

.index-main .product-card .product-name {
    margin: var(--fontSize24) 0 var(--fontSize18);
    font-size: var(--fontSize20);
}

.index-main .product-card .product-btns {
    flex-wrap: wrap;
    gap: var(--fontSize12);
}


/* 产品标签换行 */
.index-main .product-label {
    flex-wrap: wrap;
    gap: var(--fontSize12);
}

/* 产品列表卡片：4列→2列 */
.index-main .product-list-card {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.index-main .product-list-card .item-card {
    width: calc(50% - (var(--fontSize20) / 2));
    flex: none;
    padding: var(--fontSize20);
}

.index-main .product-list-card .product-name {
    font-size: var(--fontSize16);
}

/* =========================================
   4. 技术与支持
   ========================================= */
.index-main .tech-section .g-wrap {
    flex-direction: column;
    gap: 1rem;
}

.index-main .tech-section .tech-left {
    width: 100%;
    padding: var(--fontSize20);
}

.index-main .tech-section .tech-left-title {
    font-size: var(--fontSize20);
    margin-bottom: var(--fontSize20);
}

.index-main .tech-section .tech-grid {
    gap: var(--fontSize12);
}

.index-main .tech-section .tech-right {
    flex-direction: column;
    gap: 1rem;
}

.index-main .tech-section .tech-right a {
    width: 100%;
    padding: var(--fontSize20);
}


.index-main .tech-section .tech-right i {
    font-size: var(--fontSize28);
}

/* =========================================
   5. 关于我们
   ========================================= */
.index-main .about-section .g-wrap {
    flex-direction: column;
    gap: 1rem;
    ;
}

.index-main .about-section .about-picture {
    width: 100%;
    flex: none;
}

.index-main .about-section .about-card {
    width: 100%;
    padding: var(--fontSize20);
}


.index-main .about-section .btn-bar {
    margin-top: var(--fontSize24);
}

/* =========================================
   6. 新闻动态
   ========================================= */
.index-main .news-section .g-wrap {
    flex-direction: column;
    gap: 1rem;
    ;
}

.index-main .news-section .news-list {
    gap: var(--fontSize12);
    order: 2;
}


.index-main .news-section .news-list a:first-child {
    margin-bottom: 0;
}

.index-main .news-section .news-list .news-date {
    padding: 0 var(--fontSize14) 0 0;
}

.index-main .news-section .news-list a{
    padding: 1rem;
}

.index-main .news-section .news-list .news-date:after {
    right: 0.8rem;
    width: var(--fontSize50);
    height: var(--fontSize50);
}

.index-main .news-section .news-list .title {
    margin-bottom: var(--fontSize14);
}

.index-main .news-section .news-list .desc {
    font-size: var(--fontSize12);
}

.index-main .news-section .highlight-news-bar {
    width: 100%;
    padding: var(--fontSize20);
    order: 1;
}

.index-main .news-section .highlight-news-bar .new-info {
    flex-direction: column;
}

.index-main .news-section .highlight-news-bar .news-title {
    width: 100%;
}

.index-main .news-section .highlight-news-bar .news-picture {
    width: 100%;
    margin-top: var(--fontSize14);
}


/* =========================================
   7. Footer 页脚
   ========================================= */
.g-footer {
    padding-top: var(--fontSize40);
}

.g-footer .logo {
    margin-left: auto;
    margin-right: auto;
}

.g-footer .logo~.item-title span {
    display: inline;
}

.g-footer .logo~.item-title span::before {
    content: '\e60c';
    margin-right: 0.5rem;
    font-family: 'iconfont';
    color: var(--iconGreyColor);
    ;
    font-size: var(--fontSize14);
}

.g-footer .foot-list {
    flex-direction: column;
    gap: var(--fontSize30);
    text-align: center;
}

.g-footer .foot-item .item-title {
    font-size: var(--fontSize16);
    margin-bottom: var(--fontSize14);
}

.g-footer .nav-bar a {
    width: 33%;
    line-height: 1.8;
}

.g-footer .foot-item .tel {
    font-size: var(--fontSize24);
}

.g-footer .foot-item .tel-info {
    text-align: center;
}

.g-footer .qrcode-bar {
    justify-content: center;
}

.g-footer .qrcode-bar .picture {
    width: 14rem;
    height: 14rem;
    top: -15rem;
    left: -6rem;
}


.g-footer .address-bar:before {
    display: none;
}

.g-footer .address-bar p {
    line-height: 1.8;
}

.g-footer .copyright {
    margin-top: var(--fontSize30);
    padding: var(--fontSize14) 0;
    font-size: var(--fontSize12);
    line-height: 1.8;
}

.g-footer .copyright a {
    display: inline-block;
}

.g-footer .contact-fixed {
    bottom: 22vh;
    right: 1rem;
    width: 8rem;
    height: 8rem;
}

/* =========================================
   11. 通用组件移动端适配
   ========================================= */

/* 面包屑导航 */
.g-breadcrumb {
    padding-top: 6rem;
    margin-bottom: 1rem;
}

.g-breadcrumb .g-wrap {
    gap: 0.5rem;
}

.g-breadcrumb .breadcrumb {
    width: 46%;
    white-space: nowrap;
    font-size: var(--fontSize12);
    overflow: auto;
}


.g-breadcrumb .search-bar {
    width: 50%;
}


/* 分页 */
.g-pagination {
    gap: 0.36rem;
    margin-top: var(--fontSize30);
}

.g-pagination a {
    min-width: 2.14rem;
    height: 2.14rem;
    font-size: var(--fontSize12);
    padding: 0 0.57rem;
}

/* =========================================
   12. product-main 产品列表页
   ========================================= */

/* 筛选侧边栏整体 */
.product-main .product-page {
    display: flex;
    flex-direction: column;
}

.product-main .filter-sidebar-bar {
    padding: var(--fontSize20);
    margin-bottom: var(--fontSize14);
}

/* 筛选块 */
.product-main .filter-block {
    flex-direction: column;
    gap: 0.36rem;
    margin-bottom: var(--fontSize14);
}

.product-main .filter-block .filter-title {
    width: auto;
}

.product-main .filter-block .filter-list {
    gap: 0.36rem;
}



/* 排序栏 */

.product-main .toolbar-sort {
    gap: var(--fontSize20);
}


.product-main .toolbar-sort .sort-item.sort:before,
.product-main .toolbar-sort .sort-item.sort:after {
    font-size: var(--fontSize20);
}

/* 产品卡片网格：3列→2列 */
.product-main .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fontSize14);
}

.product-main .product-grid .product-item {
    padding: var(--fontSize20);
}

.product-main .product-grid .product-pic img {
    width: 100%;
}


.product-main .product-grid .product-btns .g-btn {
    padding: 0.3rem 1.2rem;
    font-size: var(--fontSize12);
}

.product-main .g-label-tags a {
    margin-right: var(--fontSize12);
}

/* 移动端筛选按钮隐藏 */
.product-main .filter-toggle-btn {
    display: none;
}

.product-main .filter-close-btn {
    display: none;
}

/* =========================================
   13. detail-page 详情页（产品详情 + 新闻详情）
   ========================================= */

/* 产品详情主区域 */
.detail-page .detail-main {
    flex-direction: column;
    gap: var(--fontSize14);
    padding: var(--fontSize20);
}

.detail-page .detail-main .base-info {
    margin-top: 2rem;
    margin-right: 0;
    order: 2;
}

.detail-page .detail-main .head-info {
    margin-bottom: var(--fontSize20);
}

.detail-page .detail-main .product-name {
    margin-bottom: 2rem;
    font-size: var(--fontSize20);
}

.detail-page .detail-main .g-tags {
    position: static;
    margin-top: var(--fontSize12);
}

.detail-page .detail-main .detail-attrs .attr-item {
    width: 100%;
}

.detail-page .detail-main .detail-attrs a {
    margin-right: 0.5rem;
}

.detail-page .detail-main .detail-btns {
    flex-wrap: wrap;
    margin-top: var(--fontSize40);
}

.detail-page .detail-main .detail-btns .g-btn {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 1.4rem;
    text-align: center;
}

.detail-page .detail-main .detail-picture {
    width: 100%;
    order: 1;
}

/* 详情页左右两列 */
.g-main.detail-page .detail-grid-content {
    flex-direction: column;
    gap: var(--fontSize14);
    margin-top: var(--fontSize14);
}

.g-main.detail-page .detail-grid-content .detail-content {
    padding: var(--fontSize20);
    padding-bottom: var(--fontSize30);
}

.g-main.detail-page .detail-grid-content .section-title {
    font-size: var(--fontSize18);
}

.g-main.detail-page .detail-grid-content .detail-side-bar {
    width: 100%;
}

.g-main.detail-page .detail-grid-content .detail-related-cards {
    padding: var(--fontSize20);
}

.g-main.detail-page .detail-grid-content .section-head .news-title {
    font-size: var(--fontSize20);
}

.g-main.detail-page .detail-grid-content .section-head .news-label {
    font-size: var(--fontSize12);
}

.g-main.detail-page .detail-grid-content .section-head .news-label span {
    display: block;
    margin: auto;
}

/* 相关产品小卡片 */

.detail-page .related-small-grid .related-small-item .related-pic {
    width: 30%;
}

.detail-page .related-small-grid .related-small-item .related-text {
    padding-left: 0.8rem;
}



/* 新闻详情侧栏 */
.g-main.detail-page .detail-side-bar .news-small-list .item {
    padding-bottom: var(--fontSize14);
    margin-top: var(--fontSize14);
}


.g-main.detail-page .detail-content .attachment-bar {
    margin-top: var(--fontSize30);
}

.g-main.detail-page .detail-content .attachment-bar a {
    display: block;
    font-size: var(--fontSize12);
}

/* =========================================
   14. scheme-main 产品方案页
   ========================================= */

.scheme-main {
    padding-top: 7rem;
}

.scheme-main .g-section {
    margin-top: var(--fontSize30);
}

.scheme-main .section-head {
    margin-bottom: 2rem;
}

.scheme-main .section-head .section-title {
    font-size: var(--fontSize24);
}

.scheme-main .section-head .section-subtitle {
    font-size: var(--fontSize16);
}

.scheme-main .grid-flex-bar {
    flex-direction: column;
}

.scheme-main .grid-flex-bar .video {
    width: 100%;
}

.scheme-main .grid-flex-bar .scheme-intro {
    padding: var(--fontSize20);
}

.scheme-main .grid-flex-bar .scheme-intro .title,
.scheme-main .head-bar .title {
    font-size: var(--fontSize18);
    margin-bottom: var(--fontSize18);
}

.scheme-main .grid-flex-bar .scheme-intro ul {
    margin-left: 1.2rem;
}

.scheme-main .grid-flex-bar .scheme-intro li {
    margin-top: var(--fontSize14);
    font-size: var(--fontSize14);
}

/* 方案页产品 Swiper */
.scheme-main .product-swiper .swiper-haft {
    top: 50%;
    width: 2.14rem;
    height: 2.14rem;
    line-height: 2.14rem;
    font-size: var(--fontSize20);
}

.scheme-main .product-swiper .swiper-haft.prev {
    left: -1rem;
}

.scheme-main .product-swiper .swiper-haft.next {
    right: -1rem;
}

.scheme-main .swiper-container .product-grid {
    display: flex;
    gap: 0;
}

.scheme-main .swiper-container .product-grid .product-item {
    flex-shrink: 0;
    padding: var(--fontSize14);
}

.scheme-main .swiper-container .product-grid .product-pic img {
    width: 100%;
}

.scheme-main .swiper-container .product-grid .product-title {
    font-size: var(--fontSize14);
}


.scheme-main .swiper-container .product-grid .g-btn {
    padding: 0.3rem 1.2rem;
    font-size: var(--fontSize12);
}

/* =========================================
   15. news-main 新闻列表 / 技术列表
   ========================================= */


.news-main .grid-flex-wrap {
    flex-direction: column;
    gap: var(--fontSize14);
}

.news-main .grid-flex-wrap .grid-side {
    width: 100%;
}

.news-main .grid-flex-wrap .nav-bar {
    padding: var(--fontSize14) var(--fontSize20);
}

.news-main .grid-flex-wrap .nav-bar .title {
    padding: 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    font-size: var(--fontSize20);
}

.news-main .grid-flex-wrap .nav-bar .nav-list {
    display: flex;
    gap: 1rem;
    padding: 0;
    flex-wrap: wrap;
}

.news-main .grid-flex-wrap .nav-bar a {
    line-height: var(--fontSize32);
    font-size: var(--fontSize14);
    padding-left: 0;
    font-weight: 300;
}

.news-main .grid-flex-wrap .nav-bar a:before {
    display: none;
}

.news-main .grid-flex-wrap .nav-bar a.active:after {
    display: none;
}

.news-main .grid-flex-wrap .nav-bar a.active {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

/* 高亮新闻条 */
.news-main .grid-flex-wrap .highlight-news-bar {
    flex-direction: column;
    padding: var(--fontSize20);
}

.news-main .grid-flex-wrap .highlight-news-bar .new-info {
    margin-right: 0;
}

.news-main .grid-flex-wrap .highlight-news-bar .classify {
    margin-bottom: var(--fontSize14);
}


.news-main .grid-flex-wrap .highlight-news-bar .news-picture {
    width: 100%;
    margin-top: var(--fontSize14);
}


.news-main .grid-flex-wrap .highlight-news-bar .g-btn {
    padding: 0.4rem 1.5rem;
    font-size: var(--fontSize12);
}



/* 新闻列表项 */
.news-main .grid-flex-wrap .news-list .item {
    margin-top: var(--fontSize14);
    padding: var(--fontSize14) var(--fontSize20);
}

.news-main .grid-flex-wrap .news-list .item:after {
    top: 0;
    bottom: auto;
    width: 5.5rem;
    height: 6rem;
    background-size: 70%;
}


.news-main .grid-flex-wrap .news-list .title {
    padding-left: 4rem;
    font-size: var(--fontSize16);
}

.news-main .grid-flex-wrap .news-list .classify-bar {
    padding-left: 4rem;
    font-size: var(--fontSize12);
}

.news-main .section-conteant-wrap {
    padding: var(--fontSize20);
}


.news-main .section-conteant-wrap .section-conteant {
    padding: var(--fontSize30) 0;
}

.news-main .section-conteant-wrap .section-conteant .qr-images {
    width: 14rem;
}

/* =========================================
   16. about-main 关于我们
   ========================================= */

.about-main .g-breadcrumb,
.contact-main .g-breadcrumb {
    margin-bottom: var(--fontSize30);
}

.g-inside-header-nav {
    padding: var(--fontSize30) var(--fontSize20);
    margin-bottom: var(--fontSize30);
}


.g-inside-header-nav p {
    font-size: var(--fontSize14);
    margin: 0.3rem 0 var(--fontSize14);
}

.g-inside-header-nav span {
    display: none;
}

.about-main .about-section-content {
    padding: var(--fontSize20);
}

.about-main .about-section-content .about-section {
    margin-bottom: var(--fontSize30);
}

.about-main .about-section-content .section-title {
    font-size: var(--fontSize20);
    margin-bottom: var(--fontSize20);
    padding-bottom: var(--fontSize14);
}


.about-main .about-section-content .grid-flex-bar {
    display: block;
    margin-bottom: var(--fontSize20);
}

.about-main .about-section-content .grid-flex-bar .flex {
    padding: 0;
}

.about-main .about-section-content .grid-flex-bar .picture-bar {
    padding: 0;
    width: 100%;
}

.about-main .about-section-content .grid-flex-bar .picture-bar:first-child {
    padding: 0;
    margin-bottom: var(--fontSize20);
}

.about-main .grid-flex-bar .picture-bar.half {
    width: 100%;
}

.about-main .grid-flex-bar .picture-bar img {
    width: 100%;
}

/* 公司荣誉轮播 */
.scheme-main .product-swiper .swiper-haft,
.about-main .honor-swiper .swiper-haft {
    font-size: var(--fontSize20);
}

.scheme-main .product-swiper .swiper-haft.swiper-prev {
    left: 0;
}

.scheme-main .product-swiper .swiper-haft.swiper-next {
    right: 0;
}

.contact-main .contact-grid {
    display: block;
}

.contact-main .contact-grid .contact-card .picture {
    width: 6rem;
}

.contact-main .contact-grid .contact-card {
    margin-bottom: 1rem;
    padding: 1rem;
}

.contact-main .contact-grid .contact-card h3 {
    font-size: var(--fontSize18);
}

.contact-main .contact-grid .contact-card p {
    font-size: var(--fontSize12);
}

.contact-main .contact-grid .contact-right {
    margin-top: 1rem;
    width: 100%;
}

/* =========================================
   17. 小屏设备进一步适配 (max-width: 480px)
   ========================================= */
@media screen and (max-width: 480px) {

    /* 产品列表卡片：2列→1列 */
    .product-main .product-grid {
        grid-template-columns: 1fr;
    }

    /* 方案页 */
    .scheme-main .section-head .section-title {
        font-size: var(--fontSize20);
    }


    /* 关于我们 */
    .g-inside-header-nav {
        padding: 0;
    }

    .g-inside-header-nav h3 {
        font-size: var(--fontSize20);
    }


    .detail-page .related-small-grid .related-small-item .related-pic {
        width: 25%;
    }
}

/* index */
.index-main .g-section {
    margin-top: var(--fontSize40);
}