/* v3 统一样式 — 基于 pc_v2 视觉，增加响应式与组件化 */
@import url('../../pc_v2/css/base.css');

:root {
    --primary: #004681;
    --primary-dark: #00325c;
    --gray-bg: #eeeeee;
    --container: 1280px;
    --container-wide: 1440px;
}

/* 通用容器 */
.container {
    width: var(--container);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.container-wide {
    width: var(--container-wide);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ========== 头部 ========== */
.header-box {
    width: var(--container);
    max-width: 100%;
    height: 125px;
    display: flex;
    margin: auto;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
}
.header-box .left {
    display: flex;
    align-items: center;
}
.header-box .left .image-box {
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    width: 300px;
    justify-content: center;
}
.header-box .left .image-box .img {
    height: 35%;
    width: auto;
    max-width: 100%;
}
.header-box .left .text {
    font-size: 1.2rem;
}

/* ========== 导航 ========== */
.menu-box {
    background: var(--gray-bg);
}
.menu-box .menu {
    width: var(--container-wide);
    max-width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
}
.menu-box .menu .left {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 16px;
    flex-wrap: wrap;
}
.menu-box .menu .left .menu-item {
    display: block;
    white-space: nowrap;
    height: 100%;
    color: #000;
    background: var(--gray-bg);
    line-height: 60px;
    position: relative;
    z-index: 1;
}
.menu-box .menu .left .menu-item:hover {
    color: var(--primary);
    background: #dedede;
    z-index: 10;
}
.menu-box .button {
    margin: 0 20px;
    color: inherit;
}
.menu-box .children-box {
    z-index: 0;
    position: absolute;
    min-width: 100%;
    border: 1px solid #ddd;
    transition: all 0.3s;
    opacity: 0;
    margin-top: 10px;
    background: #fff;
}
.menu-box .children-box-right {
    position: absolute;
    left: 100%;
    top: 0;
}
.menu-box .search-form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.menu-box .search-form input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 10px;
    width: 160px;
}
.menu-box .search-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
}

/* ========== 横幅 ========== */
.shop-sign-box {
    background: var(--primary);
    height: 300px;
    color: #fff;
    background-image: url("/public/static/pc_v2/images/背景2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.shop-sign-box .title1 {
    font-weight: 600;
    font-size: 3rem;
}
.shop-sign-box .title2 {
    font-weight: 100;
    font-size: 2rem;
    line-height: 5rem;
}

/* ========== 侧栏菜单 ========== */
.menu-column-box {
    width: 100%;
    border: 1px #ddd solid;
    min-height: 200px;
}
.menu-column-box .table-box {
    background-color: #000;
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
    padding: 1rem;
}
.menu-column-box .menu-item {
    padding: 0 10px;
    cursor: pointer;
}
.menu-column-box .children-box {
    z-index: 10;
    min-width: 100%;
    transition: all 0.3s;
    overflow: hidden;
}
.menu-column-box .button {
    padding: 10px 8px;
    margin: 0;
}
.menu-column-box .depth-1 {
    background-color: #3E6795;
    color: #fff;
    line-height: 1.5rem;
}

/* ========== 两栏布局 ========== */
.column {
    width: var(--container);
    max-width: 100%;
    margin: 20px auto 2rem;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    z-index: 5;
    position: relative;
}
.column .left {
    width: 20%;
    margin-right: 20px;
    flex-shrink: 0;
}
.column .right {
    width: 80%;
    flex: 1;
    min-width: 0;
}

/* ========== 首页轮播 ========== */
.swiper { width: 100%; }
.swiper-wrapper { height: auto; }
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* ========== 首页行业应用 ========== */
.display-plate-1-box {
    width: var(--container);
    max-width: 100%;
    margin: auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.display-plate-1-box > .title {
    font-size: 2rem;
    color: var(--primary);
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    border-bottom: 5px var(--primary) solid;
}
.display-plate-1-box .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
    gap: 10px;
}
.display-plate-1-box .list .item {
    background: #e2e6e9;
    color: #000;
    flex: 1 1 22%;
    min-width: 200px;
}
.display-plate-1-box .list .item:hover {
    color: #fff;
    background: var(--primary);
}
.display-plate-1-box .list .item .title {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    line-height: 30px;
    height: auto;
    border: none;
}
.display-plate-1-box .list .item .img img {
    width: 100%;
    height: 153px;
    object-fit: cover;
}
.display-plate-1-box .list .item .info {
    padding: 10px;
    line-height: 30px;
    text-align: center;
}

.big-title {
    width: var(--container);
    max-width: calc(100% - 32px);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    padding: 20px 0;
    margin: 20px auto;
}

/* ========== 产品网格 ========== */
.product-box {
    width: var(--container);
    max-width: 100%;
    margin: 20px auto 0;
    text-align: center;
    background: #eee;
    padding: 0 16px;
    box-sizing: border-box;
}
.product-box .product .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #000;
    padding: 25px;
}
.product-box .product .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
    padding-bottom: 20px;
}
.product-box .product .list .item {
    flex: 0 0 18%;
    min-width: 140px;
    padding: 10px;
    border-radius: 10px;
}
.product-box .product .list .item .img {
    width: 100%;
    aspect-ratio: 1;
    background: #fff;
    border: 1px #ddd solid;
    margin-bottom: 10px;
    object-fit: cover;
}

.grid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.grid-list .item {
    display: block;
    background: #fff;
    flex: 0 0 calc(20% - 16px);
    min-width: 160px;
    padding: 10px;
    border: 1px #ddd solid;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
}
.grid-list .item .img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* ========== 关于我们 ========== */
.about-us-box {
    width: 100%;
    background: var(--primary);
    margin-top: 25px;
    color: #fff;
    background-image: url("/public/static/pc_v2/images/背景图.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 415px;
}
.about-us-box .about-us {
    width: var(--container);
    max-width: 100%;
    margin: auto;
    padding: 20px 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
}
.about-us-box .about-us .left { width: 40%; }
.about-us-box .about-us .left .title {
    margin-top: 20px;
    font-weight: 600;
    font-size: 2rem;
}
.about-us-box .about-us .left .info {
    margin-top: 20px;
    font-size: 16px;
    line-height: 35px;
    text-indent: 24px;
}
.about-us-box .about-us .right {
    flex: 1;
}
.about-us-box .about-us .right img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========== 技术能力 ========== */
.display-plate-2-box {
    width: var(--container);
    max-width: 100%;
    margin: auto;
    text-align: center;
    padding: 0 16px 40px;
    box-sizing: border-box;
}
.display-plate-2-box > .title {
    font-weight: 600;
    font-size: 3rem;
    color: var(--primary);
    border-bottom: 3px var(--primary) solid;
    display: inline-block;
    line-height: 4rem;
    margin-top: 25px;
}
.display-plate-2-box .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 16px;
}
.display-plate-2-box .list .item {
    width: 18%;
    min-width: 160px;
    flex: 1 1 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.display-plate-2-box .list .item .img-box {
    width: 13rem;
    max-width: 100%;
    padding: 10px;
    border-radius: 50%;
    overflow: hidden;
    background: #ddd;
}
.display-plate-2-box .list .item .img-box:hover {
    background: var(--primary);
}
.display-plate-2-box .list .item .img-box .img {
    border-radius: 50%;
}
.display-plate-2-box .list .item .title {
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 10px;
}
.display-plate-2-box .list .item .info {
    margin-top: 15px;
    line-height: 30px;
    font-size: 14px;
}

/* ========== 页脚 ========== */
.footer {
    padding: 30px 16px;
    width: 100%;
    background: var(--primary);
    color: #fff;
    box-sizing: border-box;
}
.footer a { color: #fff; }
.footer .column {
    min-height: auto;
    width: var(--container-wide);
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
}
.footer .column > .left {
    width: 70%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.footer .column .right {
    width: 25%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .column .right .img {
    width: 50%;
    max-width: 180px;
    aspect-ratio: 1;
    margin-bottom: 10px;
    border: 5px solid #fff;
    object-fit: cover;
}
.lump { width: 100%; min-width: 140px; flex: 1; }
.lump .title {
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid #fff;
    padding-bottom: 11px;
    width: 90%;
}
.lump .children-box { padding: 10px 0; }
.lump .children-item {
    padding: 5px 0;
    display: block;
}
.lump .children-item:hover { text-decoration: underline; }
.footer .bidding {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* ========== 产品详情 ========== */
.overview {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.overview .left { width: 40%; min-width: 280px; }
.overview .left .img {
    border: 1px solid #ddd;
    width: 100%;
    aspect-ratio: 1;
}
.overview .right { flex: 1; min-width: 280px; }
.overview .title {
    font-size: 2.5rem;
    font-weight: 600;
}
.dividing-line {
    width: 100%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    color: #343434;
    cursor: pointer;
    margin-top: 20px;
}
.product-detail .mySwiper2 { height: 80%; width: 100%; }
.product-detail .mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}
.product-detail .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
.product-detail .mySwiper .swiper-slide-thumb-active { opacity: 1; }

/* ========== 搜索页 ========== */
.search-page .search-header {
    background: var(--primary);
    color: #fff;
    padding: 40px 16px;
    text-align: center;
}
.search-page .search-header h1 {
    font-size: 2rem;
    margin-bottom: 16px;
}
.search-page .search-header form {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 600px;
    margin: 0 auto;
}
.search-page .search-header input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
}
.search-page .search-header button {
    background: #fff;
    color: var(--primary);
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
}
.search-page .search-results {
    width: var(--container);
    max-width: 100%;
    margin: 30px auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.search-page .result-item {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}
.search-page .result-item:hover {
    background: #f5f5f5;
}
.search-page .result-item .title {
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: 600;
}
.search-page .result-item .desc {
    color: #666;
    margin-top: 6px;
    font-size: 14px;
}
.search-page .empty-tip {
    text-align: center;
    color: #999;
    padding: 60px 0;
}

/* ========== 留言表单 ========== */
.guestbook-form-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
}
.guestbook-title {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 8px;
}
.guestbook-desc {
    color: #666;
    margin-bottom: 24px;
}
.guestbook-form .form-row {
    margin-bottom: 18px;
}
.guestbook-form .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}
.guestbook-form .form-label .required {
    color: #c00;
    font-style: normal;
}
.guestbook-form .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
.guestbook-form textarea.form-input {
    resize: vertical;
    min-height: 120px;
}
.guestbook-form .captcha-box {
    display: flex;
    align-items: center;
    gap: 12px;
}
.guestbook-form .captcha-input {
    max-width: 160px;
}
.guestbook-form .captcha-img {
    width: 120px;
    height: 40px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.guestbook-form .form-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
}
.guestbook-form .btn-submit {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 32px;
    font-size: 16px;
    cursor: pointer;
}
.guestbook-form .btn-submit:hover {
    background: var(--primary-dark);
}
.guestbook-form .btn-reset {
    background: #eee;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
}

/* ========== 内容页 ========== */
.content img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========== 响应式 ========== */
@media (max-width: 992px) {
    .column { flex-direction: column; }
    .column .left,
    .column .right { width: 100%; margin-right: 0; }
    .about-us-box .about-us { flex-direction: column; }
    .about-us-box .about-us .left { width: 100%; }
    .footer .column > .left { width: 100%; }
    .footer .column .right { width: 100%; margin-top: 20px; }
    .overview .left, .overview .right { width: 100%; }
    .grid-list .item { flex: 0 0 calc(33% - 16px); }
    .product-box .product .list .item { flex: 0 0 30%; }
    .display-plate-2-box .list .item { width: 45%; flex: 1 1 45%; }
    .shop-sign-box .title1 { font-size: 2rem; }
    .shop-sign-box .title2 { font-size: 1.2rem; line-height: 2rem; }
    .menu-box .menu .left .menu-item { line-height: 44px; }
    .header-box { height: auto; min-height: 80px; flex-wrap: wrap; padding: 10px 16px; }
}

@media (max-width: 576px) {
    .grid-list .item { flex: 0 0 calc(50% - 16px); }
    .product-box .product .list .item { flex: 0 0 45%; }
    .display-plate-1-box .list .item { flex: 1 1 100%; }
    .display-plate-2-box .list .item { width: 100%; flex: 1 1 100%; }
    .menu-box .search-form input { width: 100px; }
}