/*
 * 老站 ssm 模板内联样式的集中版本。
 *
 * 老站每个页面模板各带一份 <style>（页面内页签高亮、分类高亮、留言表单），
 * 内容重复且按栏目写死了 hv6/hv13/hv21 等类名；这里合并成按状态生效的规则：
 * 页签/分类当前项统一加 .on，样式与老站逐条对齐，页面模板不再各写一份。
 */

/* 页签当前项（老站 #mkpcr .hvN） */
#mkpcr a.on {
    color: #fff;
    font-weight: 200;
    background: #af997d;
}

/* 产品侧栏当前分类（老站 .pmaa .hvN） */
.pmaa .on {
    background: #af9a7d;
    color: #fff;
}

/* —— 留言 / 询盘表单（关于我们-联系我们、产品详情-Product Inquiry） —— */
.xzlx_wp {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.xzlx_1 {
    width: 45%;
    float: left;
}

.xzlx_2 {
    width: 45%;
    float: right;
}

.lxb1 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-indent: 15px;
    border: #888 1px solid;
}

.lxb2 {
    width: 100%;
    height: 200px;
    line-height: 30px;
    font-size: 16px;
    box-sizing: border-box;
    padding: 10px 15px 0px 15px;
    border: #888 1px solid;
}

.lxb3 {
    width: 100%;
    height: 50px;
    display: block;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    border: #d0af8c 1px solid;
    background: #d0af8c;
    transition: 0.5s;
}

.lxb3:hover {
    opacity: 0.9;
}

.lxtable1 td {
    padding: 8px 0px 8px 0px;
}

.lxb4 {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    border: #e5e5e5 1px solid;
}

.dingdan_table1 {
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    margin-top: 10px;
    border: #e5e5e5 1px solid;
}

.dingdan_table1 td {
    border: #e5e5e5 1px solid;
    padding: 15px 0px 15px 0px;
}

.dingdan_table1 .tr1 {
    background: #fcfcfc;
    font-weight: bold;
    font-size: 16px;
}

/* ==========================================================================
   栏目页相册（service 证书页等）：图片可带说明，点击弹出大图可放大查看
   ========================================================================== */
.album {
    margin-top: 30px;
}

.album_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.album_item {
    background: #fff;
    border: #e5e5e5 1px solid;
    padding: 8px;
    text-align: center;
}

.album_item .album_link {
    display: block;
    position: relative;
    overflow: hidden;
}

.album_item .album_link img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #fcfcfc;
    transition: transform 0.3s ease;
}

.album_item .album_link:hover img {
    transform: scale(1.04);
}

.album_item .album_zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.album_item .album_link:hover .album_zoom {
    opacity: 1;
}

.album_note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* 放大弹层 */
.album_viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.86);
    align-items: center;
    justify-content: center;
}

.album_viewer.on {
    display: flex;
}

.album_viewer_figure {
    margin: 0;
    max-width: 86%;
    max-height: 88%;
    text-align: center;
}

.album_viewer_figure img {
    max-width: 100%;
    max-height: 80vh;
    background: #fff;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}

.album_viewer_note {
    margin-top: 12px;
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
}

.album_viewer_close,
.album_viewer_prev,
.album_viewer_next {
    position: absolute;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.album_viewer_close {
    top: 18px;
    right: 26px;
    font-size: 40px;
    line-height: 1;
    opacity: 0.75;
}

.album_viewer_prev,
.album_viewer_next {
    top: 50%;
    margin-top: -28px;
    width: 56px;
    height: 56px;
    font-size: 34px;
    line-height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.album_viewer_prev {
    left: 24px;
}

.album_viewer_next {
    right: 24px;
}

.album_viewer_close:hover,
.album_viewer_prev:hover,
.album_viewer_next:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.24);
}

.album_viewer_count {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

/* ==========================================================================
   产品详情：左侧主图 hover 局部放大（右侧浮动视窗），缩略图左右滚动切图
   ========================================================================== */
.preview {
    position: relative;
}

.bigImg #midimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: crosshair;
}

/* 放大视窗：跟着主图右侧浮动，样式独立于老站 #bigView */
#zoomPanel {
    display: none;
    position: absolute;
    left: calc(100% + 12px);
    top: 0;
    width: 360px;
    height: 360px;
    overflow: hidden;
    background: #fff;
    border: #e5e5e5 1px solid;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    z-index: 20;
}

#zoomPanel img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    border: 0;
}

.smallImg .scrollbutton {
    user-select: none;
}

.smallImg .scrollbutton.disabled {
    cursor: default;
    opacity: 0.45;
}

#imageMenu ul {
    transition: margin-left 0.45s ease;
}

#imageMenu li img {
    cursor: pointer;
}

/* ==========================================================================
   产品详情：触屏点主图看大图（桌面用 hover 局部放大，此弹层只在移动端被脚本打开）
   DOM 由 ssm/js/mobile.js 动态生成
   ========================================================================== */
.photo_viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
}

.photo_viewer.on {
    display: flex;
}

.photo_viewer img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
}

.photo_viewer_close,
.photo_viewer_prev,
.photo_viewer_next {
    position: absolute;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.photo_viewer_close {
    top: 12px;
    right: 16px;
    font-size: 38px;
    line-height: 1;
    opacity: 0.8;
}

.photo_viewer_prev,
.photo_viewer_next {
    top: 50%;
    margin-top: -22px;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.photo_viewer_prev {
    left: 10px;
}

.photo_viewer_next {
    right: 10px;
}

.photo_viewer_close:active,
.photo_viewer_prev:active,
.photo_viewer_next:active {
    background: rgba(255, 255, 255, 0.28);
}

.photo_viewer_count {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

/* 前台分页：Prev / Next 按钮与省略号（style.css 里 #nextpage / #nx_pg 的 a 样式沿用）
   按钮类名不能用 .prev / .next：poposlides.css 有一组全局的 .prev,.next（首页轮播左右箭头，
   position:absolute; top:50%; left:0; width:30px; height:70px; background:#000），
   分页一旦用了同名类，Prev 就会被甩到列表左侧外面。 */
#nextpage .pg-prev,
#nx_pg .pg-prev,
#nextpage .pg-next,
#nx_pg .pg-next {
    color: #333;
    font-weight: 600;
}

#nextpage .gap,
#nx_pg .gap {
    display: inline-block;
    padding: 5px 6px;
    color: #999;
    font-size: 14px;
}