@charset "utf-8";

.position{
    background: #fff;
    line-height: 5rem;
    font-size: 1.6rem;
}
.position a{
    margin: 0 5px;
}


.nynav{
    margin: 0 auto 3rem;
    display: table;
}
.nynav a{
    display: inline-block;
    /* width: 165px; */
    height: 62px;
    line-height: 62px;
    background-color: #ffffff;
    border-radius: 6px;
    text-align: center;
    margin-right: 13px;
    margin-bottom: 10px;
    font-size: 18px;
    padding: 0 25px;
    position:relative;
}
.nynav a.active:before {
    content: '';
    width: 0;
    height: 0;
    border: 16px solid;
    position: absolute;
    bottom: -30px;
    left: 50%;
    border-color: #0088ff transparent transparent;
    transform: translate(-50%, 0px);
}
.nynav a:hover,.nynav a.active{
    background: #0088ff;
    color: #fff;
}





.nypronav{
    margin: 0 auto 3rem;
    /* 替换原来 display:table */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 13px; /* 上下间距10px，左右间距13px，替代margin */
    max-width: 100%;
}
.nypronav a{
    /* 去掉 display: inline-block; */
    flex: 0 0 calc((100% - 13px * 7) / 8); /* 一行8个，减去7个间隔 */
    height: 62px;
    line-height: 62px;
    background-color: #ffffff;
    border-radius: 6px;
    text-align: center;
    /* 删掉 margin-right、margin-bottom，改用gap控制间距 */
    font-size: 18px;
    padding: 0 10px; /* 缩小内边距，防止文字挤压，原来padding:0 25px太宽 */
    box-sizing: border-box;
    position:relative;
    white-space: nowrap; /* 文字不换行 */
}
.nypronav a.active:before {
    content: '';
    width: 0;
    height: 0;
    border: 16px solid;
    position: absolute;
    bottom: -30px;
    left: 50%;
    border-color: #0088ff transparent transparent;
    transform: translate(-50%, 0px);
    z-index: 9;
}
.nypronav a:hover,.nypronav a.active{
    background: #0088ff;
    color: #fff;
}



.nypro ul{
    margin-right: -1rem;
    margin-left: -1rem;
}
.nypro ul li{
    padding: 0 1rem 2rem 1rem;
}
.nypro .list{
    background: #fff;
    border-radius: 10px;
    position: relative;
}
.nypro .list:nth-child(4n){
    margin-right: 0px!important;
}
.nypro .list .bigimg {
  height: 260px;      /* 改成你想要的统一固定高度 */
  overflow: hidden;
}
.nypro .list .bigimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 核心：保持比例，填满容器，超出部分裁剪 */
  object-position: center; /* 图片居中展示 */
}

.nypro .list:hover img{
    transform: scale(1.05,1.05);
    -ms-transform: scale(1.05,1.05);    /* IE 9 */
    -webkit-transform: scale(1.05,1.05);    /* Safari 和 Chrome */
    -o-transform: scale(1.05,1.05); /* Opera */
    -moz-transform: scale(1.05,1.05);   /* Firefox */
}

.nypro .list .bt,.nypro .list p{
    text-align: center;
    padding: 1.5rem;
    font-weight: bold;
}
.nypro .list .brief{
    color: #999;
    padding: 0 1.5rem 2rem;
}
.nypro .list span{
    position: absolute;
    top: 1rem;
    background: #eee;
    color: #999;
    left: 1rem;
    padding: 5px;
    border-radius: 30px;
    font-size: 12px;
}





/*产品详情*/
.pro-bar{
    border-bottom: 1px solid #ccc;
    padding: 1.5rem 0;
    display: flex;
    position: sticky;
    top: 10rem;
    z-index: 999;
    background: #fff;
}
.pro-bar .pro-bt{
    float: left;
    font-weight: bold;
    font-size: 2rem;
    line-height: 4rem;
}
.pro-bar .pro-inner{
    float: right;
    line-height: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.pro-bar .pro-inner a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 1.6rem;
}
.pro-bar .pro-inner a:hover,.pro-bar .pro-inner a.active{
    color: #ffffff;
    background: #0088ff;
}

.pd-parameter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}


.pd-parameter-grid article {
    min-height: 86px;
    padding: 3rem;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #ececf0;
    box-shadow: none;
}

.pd-parameter-name {
    margin: 0 0 14px;
    color: #8b8b91;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.pd-parameter-value {
    margin: 0;
    color: #1d1d1f;
    font-size: 2rem;
    line-height: 1.55;
    word-break: break-word;
}




.prodetailc-list ul li .biank{
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #0088ff;
    margin-bottom: 3rem;
}
.prodetailc-list ul li .bigimg{
    width: 45%;
}
.pd-feature-story {
    display: flex;
    align-items: stretch;
    height: auto;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #ececf0;
    box-shadow: none;
    margin-bottom: 3rem;
}

.pd-feature-story-reverse {
    justify-content: flex-start;
}

.pd-feature-copy-block {
    width: 55%;
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    background: transparent;
}

.pd-story-index {
    display: inline-block;
    margin-bottom: 22px;
    color: #8b8b91;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.pd-feature-copy-block h3 {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.12;
    color: #1d1d1f;
}

.pd-feature-copy-block p {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: #515154;
}



/* ========== 手机自适应 媒体查询 ========== */
@media screen and (max-width:768px) {
    .position{
        line-height: 3rem;
        font-size: 1.4rem;
    }

    .nynav{
        max-width: 100%;
        width: 100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }
    .nynav a{
        height: 48px;
        line-height: 48px;
        font-size:16px;
        padding:0 18px;
        margin-right:8px;
        margin-bottom:8px;
    }
    .nynav a.active:before{
        bottom:-22px;
        border-width:12px;
    }

    /* 二级产品导航 nypronav 移动端 */
    .nypronav{
        gap:8px 8px;
    }
    .nypronav a{
        /* 手机一行4个 */
        flex:0 0 calc((100% - 8px * 3) / 4);
        height:48px;
        line-height:48px;
        font-size:15px;
        padding:0 6px;
    }
    .nypronav a.active:before{
        bottom:-22px;
        border-width:12px;
    }

    /* 产品列表 */
    .nypro ul{
        margin-left:-0.5rem;
        margin-right:-0.5rem;
    }
    .nypro ul li{
        padding:0 0.5rem 1.2rem;
    }
    .nypro .list .bt, .nypro .list p{
        padding:1rem 0.8rem;
    }
    .nypro .list .brief{
        padding:0 0.8rem 1rem;
    }

    /* 产品详情顶部固定tab */
    .pro-bar{
        padding:1rem 0;
        top: 0;
        flex-direction:column;
        gap:10px;
    }
    .pro-bar .pro-bt{
        float:none;
        line-height:2.4rem;
        font-size:1.6rem;
    }
    .pro-bar .pro-inner{
        float:none;
        justify-content:flex-start;
        line-height:2rem;
    }
    .pro-bar .pro-inner a{
        height:3rem;
        padding:0 12px;
        font-size:1.4rem;
    }
    .pro-bar .pro-inner a:hover{
        background:none;
        color:#333;
    }
    .pro-bar .pro-inner a.active{
        color: #ffffff!important;
        background: #0088ff!important;
    }

    /* 参数网格：3列改1列 */
    .pd-parameter-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:10px;
    }
    .pd-parameter-grid article{
        min-height:auto;
        padding:1.8rem 1.2rem;
    }
    .pd-parameter-name{
        font-size:1.5rem;
    }
    .pd-parameter-value{
        font-size:1.7rem;
    }

    /* 图文模块：左右布局改成上下 */
    .prodetailc-list ul li .biank{
        /* flex-direction:column; */
    }
    .prodetailc-list ul li .bigimg img{
        width:100%;
        height:100%;
    }
    .pd-feature-story{
        flex-direction:column !important;
    }
    .pd-feature-story-reverse{
        flex-direction:column-reverse !important;
    }
    .pd-feature-copy-block{
        /* width:100%; */
        padding: 2rem 1rem;
    }
    .pd-story-index{
        font-size:1.6rem;
        margin-bottom:14px;
    }
    .pd-feature-copy-block h3{
        font-size: 1.8rem;
    }
    .pd-feature-copy-block p{
        font-size: 14px;
    }
}

/* 小手机 480px以下 进一步缩小，nypronav一行2个 */
@media screen and (max-width:480px) {
    .nypronav a{
        flex:0 0 calc((100% - 8px * 1) / 2);
    }
}




.reveal-up {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}