/* ===================== 基础样式重置 ===================== */

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 4px;
    /* scrollbar-thin */
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    /* scrollbar-thumb-gray-300 */
    border-radius: 2px;
}

::-webkit-scrollbar-track {
    background-color: #f3f4f6;
    /* scrollbar-track-gray-100 */
    border-radius: 2px;
}

/* ===================== 自定义通用样式 ===================== */

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 全屏宽度容器 */
.full-width-container {
    width: 100%;
    margin: 0 auto;
}

/* 模块间距 */
.section {
    padding: 32px 0;
    /* py-8 */
}

/* 缩略图遮罩层 */
.thumbnail-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    transition: opacity 0.3s ease;
}

/* 激活的缩略图 - 隐藏遮罩 */
.thumbnail-active .thumbnail-overlay {
    opacity: 0;
}

/* 滚动进度条容器 */
.progress-bar-container {
    position: relative;
    width: 100%;
    height: 2px;
    /* h-0.5 */
    background-color: #e5e7eb;
    /* bg-gray-200 */
    margin-bottom: 8px;
    /* mb-2 */
}

/* 滚动进度条 */
.scroll-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #1d569d;
    transition: width 0.3s ease;
    width: 0;
}

/* 标签激活状态 */
.tab-active {
    background-color: #1d569d;
    color: #ffffff;
}

/* 标签未激活状态 */
.tab-inactive {
    background-color: #eeeeee;
    color: #1d569d;
}

/* 表单错误提示 */
.form-error {
    color: #dc2626;
    /* text-red-600 */
    font-size: 12px;
    /* text-sm */
    margin-top: 4px;
    /* mt-1 */
    display: none;
}

/* 隐藏元素 */
.hidden {
    display: none;
}

/* 块级显示 */
.block {
    display: block;
}

/* ===================== 模块一：全图背景 ===================== */
.hero-banner {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===================== 模块二：面包屑导航 ===================== */
.breadcrumb-section {
    background-color: #f5f6f89e;
    padding: 16px 24px;
    /* py-4 px-6 */

}

.breadcrumb-text {
    font-family: Poppins;
    margin-left: 10%;
    font-size: 18px;
    /* text-sm */
    color: #4b5563;
    /* text-gray-600 */
}

.breadcrumb-link {
    color: #1d569d;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

/* ===================== 模块三：产品图片+右侧信息 ===================== */
.product-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* gap-8 */
}

/* 左侧主图+缩略图区域 */
.product-gallery {
    width: 100%;
}

.gallery-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* gap-4 */
}

/* 主图容器 */
.main-img-container {
    width: 100%;
    position: relative;
}

.main-product-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    /* rounded-lg */
}

/* 缩略图容器 */
.thumbnail-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.thumbnail-title {
    font-weight: 600;
    /* font-semibold */
    font-size: 18px;
    /* text-lg */
    margin-bottom: 8px;
    /* mb-2 */
}

.thumbnail-container {
    height: 600px;
    overflow-y: auto;
    padding-right: 8px;
    /* pr-2 */
}

.thumbnail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* space-y-2 */
    padding-bottom: 16px;
    /* pb-4 */
}

.thumbnail-item {
    position: relative;
    width: 100%;
    border-radius: 8px;
    /* rounded-md */
    overflow: hidden;
    cursor: pointer;
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右侧信息区域 */
.product-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    /*gap: 24px;*/
    /* gap-6 */
}

.product-title {
    font-size: 24px;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
}

/* 分享区域 */
.share-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* gap-2 */
}

.share-text {

    font-size: 18px;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
}

.share-icons {
    display: flex;
    gap: 12px;
    /* gap-3 */
    flex-wrap: wrap;
}

.share-icon {
    width: 32px;
    /* w-8 */
    height: 32px;
    /* h-8 */
    border-radius: 50%;
    /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* 各分享图标背景色 */
.icon-facebook {
    background-color: #1877f2;
}

.icon-facebook:hover {
    background-color: #166fe5;
}

.icon-instagram {
    background-color: #e4405f;
}

.icon-instagram:hover {
    background-color: #d83356;
}

.icon-wechat {
    background-color: #07c160;
}

.icon-wechat:hover {
    background-color: #06b058;
}

.icon-whatsapp {
    background-color: #25d366;
}

.icon-whatsapp:hover {
    background-color: #21b858;
}

.icon-twitter {
    background-color: #1da1f2;
}

.icon-twitter:hover {
    background-color: #1a91da;
}

.icon-linkedin {
    background-color: #0088cc;
}

.icon-linkedin:hover {
    background-color: #007bb5;
}

.icon-youtube {
    background-color: #ff0000;
}

.icon-youtube:hover {
    background-color: #e60000;
}

.icon-pinterest {
    background-color: #bd081c;
}

.icon-pinterest:hover {
    background-color: #a70717;
}

.icon-google {
    background-color: #4285f4;
}

.icon-google:hover {
    background-color: #3367d6;
}

.icon-reddit {
    background-color: #f26522;
}

.icon-reddit:hover {
    background-color: #e05a1b;
}

/* 产品特点 */
.feature-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* space-y-1 */
}

.feature-title,
.dimension-title,
.color-title {
    font-weight: 600;
    /* font-semibold */
    font-size: 18px;
    /* text-lg */
}

.feature-desc,
.dimension-desc {
    color: #4b5563;
    /* text-gray-700 */
}

/* 尺寸介绍 */
.dimension-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* space-y-1 */
    margin-top: 16px;
    /* mt-4 */
}

/* 颜色选择 */
.color-section {
    margin-top: 16px;
    /* mt-4 */
}

.color-title {
    margin-bottom: 8px;
    /* mb-2 */
}

.color-options {
    display: flex;
    gap: 12px;
    /* gap-3 */
    flex-wrap: wrap;
}

.color-option {
    width: 48px;
    /* w-12 */
    height: 48px;
    /* h-12 */
    border-radius: 8px;
    /* rounded-md */
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.color-option:hover {
    border-color: #1d569d;
}

.color-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================== 模块四：产品详情标签页 ===================== */
.tab-section {}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #548dd4;
    color: white;
}

/* 标签切换栏 */
.tab-nav {
    margin: 0 auto;
    width: 1600px;
    border-bottom: 1px solid #e5e7eb;
    /* border-gray-200 */
}

.tab-buttons {
    display: flex;
    width: 100%;
}

.tab-btn {
    padding: 16px 32px;
    /* py-4 px-8 */
    font-size: 18px;
    /* text-lg */
    font-weight: 500;
    /* font-medium */
    width: 50%;
    /* w-1/2 */
    text-align: center;
}

/* 标签内容区 */
.tab-content {
    padding: 32px 16px;
    /* py-8 px-4 */
}

/* 产品描述 - 左图右文 */
.desc-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* gap-8 */
    margin-bottom: 48px;
    /* mb-12 */
}

.desc-img-container {
    width: 100%;
}

.desc-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* rounded-lg */
}

.desc-text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.desc-subtitle {
    font-size: 24px;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 16px;
    /* mb-4 */
}

.desc-text {
    color: #4b5563;
    /* text-gray-700 */
    margin-bottom: 12px;
    /* mb-3 */
}

/* Features折叠面板 */
.features-section {
    margin-bottom: 48px;
    /* mb-12 */
}

.features-title {
    text-align: center;
    font-size: 35px;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 24px;
    /* mb-6 */
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* space-y-4 */
}

.accordion-item {
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
    border-radius: 8px;
    /* rounded-lg */
    overflow: hidden;
}

.accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 40px;
    background-color: #ffffff;
}

.accordion-toggle:hover {
    background-color: #f9fafb;
    /* bg-gray-50 */
}

.accordion-title {
    font-size: 24px;
    font-weight: 800;
    /* font-semibold */
}

.accordion-icon {
    color: #1d569d;
    transition: transform 0.3s ease;
}

.accordion-content {
    font-size: 18px;
    padding: 16px;
    /* p-4 */
    background-color: #f9fafb;
    /* bg-gray-50 */
    color: #666;
    /* text-gray-700 */
    display: none;
}

/* 大图区域 */
.large-img-container {
    margin-bottom: 24px;
    /* mb-6 */
}

.large-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* rounded-lg */
}

/* 产品参数 */
.params-card {
    padding: 32px;
    /* p-8 */
    background-color: #ffffff;
    border-radius: 8px;
    /* rounded-lg */
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
}

.params-title {
    font-size: 24px;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 24px;
    /* mb-6 */
}

.params-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    /* gap-6 */
}

.param-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    /* py-2 */
    border-bottom: 1px solid #e5e7eb;
    /* border-gray-200 */
}

.param-label {
    font-weight: 500;
    /* font-medium */
}

.dashed-line {
    border-bottom: 3px dashed #666;
    width: 50%;
}

.text-gray-600 {
    font-size: 18px;
    font-family: Poppins;
    color: #666;
}

/* ===================== 模块五：询价表单 ===================== */
.form-section {
    padding: 32px 0;
}

.form-container {
    background-color: #f9fafb;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    /* border-gray-300 */
}

.form-title {
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    /* font-bold */
    margin-bottom: 24px;
    /* mb-6 */
}

.inquiry-form {
    background-color: #f9fafb;
    padding: 32px;
    /* p-8 */
    border-radius: 8px;
    /* rounded-lg */

}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    /* gap-6 */
    margin-bottom: 24px;
    /* mb-6 */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    font-size: 14px;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    color: #374151;
    /* text-gray-700 */
    margin-bottom: 4px;
    /* mb-1 */
}

.form-required {
    color: #dc2626;
    /* text-red-600 */
}

.form-input,
.form-textarea {
    font-size: 18px;
    width: 100%;
    padding: 16px 16px;
    /* px-4 py-2 */
    border: 1px solid #d1d5db;
    /* border-gray-300 */
    color: #374151;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af;
    /* 占位符文字颜色 */
    opacity: 1;
}

.form-input:focus,
.form-textarea:focus {
    outline: 2px solid #1d569d;
    border-color: #1d569d;
}

.form-textarea {
    min-height: 120px;
    /* rows-5 */
    resize: none;
}

/* 提交按钮容器 - 居中显示 */
.submit-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.submit-btn {
    padding: 12px 48px;
    /* 增加左右内边距 */
    background-color: #1d569d;
    color: #ffffff;
    font-weight: 500;
    /* font-medium */
    border-radius: 8px;
    /* rounded-md */
    transition: background-color 0.3s ease;
    font-size: 16px;
}

.submit-btn:hover {
    background-color: #dc2626;
    /* bg-red-600 */
}

/* ===================== 模块六：相关新闻 ===================== */
.news-section {
    padding: 32px 0;
}

.news-title {
    text-align: center;
    font-size: 35px;
    margin-bottom: 24px;
    /* mb-6 */
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    /* gap-8 */
}

.news-card {
    background-color: #ffffff;
    border-radius: 8px;
    /* rounded-lg */
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    transition: box-shadow 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-md */
}

.news-img {
    width: 100%;
    height: 192px;
    /* h-48 */
    object-fit: cover;
}

.news-content {
    padding: 16px;
    /* p-4 */
}

.news-subtitle {
    font-weight: 600;
    /* font-semibold */
    font-size: 18px;
    /* text-lg */
    margin-bottom: 8px;
    /* mb-2 */
    transition: color 0.3s ease;
}

.news-subtitle:hover {
    color: #1d569d;
}

/* ===================== 响应式样式 (大屏适配) ===================== */
@media (min-width: 768px) {

    /* 模块三：大屏布局 */
    .product-main {
        flex-direction: row;
    }

    .product-gallery {
        width: 66.666%;
        /* lg:w-2/3 */
    }

    .gallery-layout {
        flex-direction: row;
    }

    .main-img-container {
        width: 83.333%;
        /* md:w-5/6 */
    }

    .thumbnail-wrapper {
        width: 16.666%;
        /* md:w-1/6 */
    }

    .product-info {
        width: 33.333%;
        /* lg:w-1/3 */
    }

    /* 模块四：大屏布局 */
    .desc-layout {
        flex-direction: row;
    }

    .desc-img-container {
        width: 50%;
        /* lg:w-1/2 */
    }

    .desc-text-container {
        width: 50%;
        /* lg:w-1/2 */
    }

    .params-grid {
        grid-template-columns: 1fr 1fr;
        /* md:grid-cols-2 */
    }

    /* 模块五：表单大屏布局 */
    .form-row {
        grid-template-columns: 1fr 1fr;
        /* md:grid-cols-2 */
    }

    /* 模块六：新闻大屏布局 */
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
        /* md:grid-cols-3 */
    }
}

img.logo1 {
    display: inline-block;
}

.app-container {
    background-color: rgba(221, 220, 219, 1);
}

.QX-132140715 {
    display: flex;
    padding: 30px 10px;
    background-image: url('/skin/static/image/weixintupian_20241223210557.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.QX-132140715 .left {
    width: 33.3333%;
    height: 1180px;
}

.QX-132140715 .center {
    width: 33.3333%;
    height: 1180px;
}

.QX-132140715 .right {
    width: 33.3333%;
    height: 1180px;
}
.QX-132140715 .title {
    width: 100%;
    height: 33.3333%;
    display: flex;
    align-items: center;
}
.QX-132140715 .ro-item {
    width: 100%;
    height: 33.3333%;
    position: relative;
    perspective: 1000px;
    overflow: hidden;
    word-break: break-word;
}
.QX-132140715 .front {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    -webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    -o-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0px 50px;
    position: absolute;
    height: 100%;
}
.QX-132140715 .inner {
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: stretch;
    justify-content: center;
    min-width: 100%;
    z-index: 2;
    height: 100%;
}
.QX-132140715 .num {
    color: #9470b1;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.83em;
    text-align: left;
    margin-bottom: 15px;
    display: inline-block;
}
.QX-132140715 .nr {
    color: #3d3d3d;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8;
    text-align: left;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.QX-132140715 .back {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    -webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    -o-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    background-color: rgba(61, 61, 61, 0.8);
    padding: 0px 50px;
    position: absolute;
    height: 100%;
}
.QX-132140715 .backer {
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: stretch;
    justify-content: center;
    min-width: 100%;
    z-index: 2;
    height: 100%;
}
.QX-132140715 .ro-item:hover .back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    -o-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
}
.QX-132140715 .ro-item:hover .front {
    /* -webkit-transform: rotateY(180deg); */
    transform: rotateY(180deg);
    -webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    -o-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
}
.QX-132140715 .backer .nr {
    color: #fff;
}
.QX-132140715 .ro-item.bg3 .front {
    background: #9470b1;
}
.QX-132140715 .num.hs {
    color: #fff !important;
}
.QX-132140715 .nr.ms3, .QX-132140715 .nr.ms5 {
    color: #fff;
}
.QX-132140715 .ro-item.bg3 .back {
    background: #53b7c7;
}
.QX-132140715 .ro-item.bg5 .front {
    background: #53b7c7;
}
.QX-132140715 .ro-item.bg5 .back {
    background: #9470b1;
}
.QX-132140715 .none {
    width: 100%;
    height: 33.3333%;
}
.app-title {
    padding: 95px 0;
    color: #fff;
    font-size: 46px;
    text-align: center;
}
.app-container .blockFoot{
    padding: 40px 0;
}
.QX-wrapper {
    width: 100%;
    margin: auto;
    display: flex;
}
.QX-wrapper .tile:first-child {
    border-right: 0.5px solid #eee;
}
.QX-wrapper .tile {
    width: 50%;
    box-sizing: border-box;
}
.QX-wrapper .imgWra {
    width: 100%;
    position: relative;
}
.QX-wrapper .imgBox {
    width: 100%;
}
.QX-wrapper .imgBox .backstage-componet-bd, .QX-wrapper .imgBox .backstage-componet {
    width: 100%;
    height: 100%;
    display: block;
}
.QX-wrapper .imgBox .backstage-componet-bd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.QX-wrapper .title {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 43px;
    color: #fff;
    width: calc(100% - 20px);
    text-align: center;
}
.QX-wrapper .textBox {
    padding: 60px 0;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.QX-wrapper .text {
    margin-bottom: 38px;
    text-align: center;
    padding: 0 20px;
    font-size: 20px;
    color: #676767;
}
.qiaoxin15564 {
    width: 100%;
    margin: 0 auto;
    padding: 20px 10px;
    background-color: #fff;
}
.qiaoxin15564 .main {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.qiaoxin15564 .main_one {
    width: calc(100% / 4 - 20px);
    position: relative;
}
.qiaoxin15564 .main_img {
    width: 100%;
    height: 380px;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
.qiaoxin15564 .main_img .backstage-blocksEditor-wrap {
    width: 100%;
    height: 100%;
}
.qiaoxin15564 .main_img .backstage-componet {
    width: 100%;
    height: 100%;
}
.qiaoxin15564 .main_img .backstage-componet-bd {
    width: 100%;
    height: 100%;
}
.qiaoxin15564 .main_img .blocks-image {
    display: block;
    width: 100%;
    height: 100%;
}
.qiaoxin15564 .main_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: all 1s;
}
.qiaoxin15564 .main_img:hover .blocks-image img {
    transform: scale(1.1);
}
.qiaoxin15564 .main_text {
    background: #fff;
    text-align: center;
    padding: 20px 10px;
    width: 80%;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
    z-index: 2;
    margin: 300px auto 0;
    position: relative;
}
.qiaoxin15564 .txt_top {
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
}
.qiaoxin15564 .txt_bottom {
    font-size: 14px;
    color: #aaa;
    line-height: 32px;
}