/* psite.css - 适配卜二卜简体繁体字转换器首页 作为psnav.css补充 */
/* 图片原始尺寸 450x480，两图合计 900px */

/* ========== smad广告区域核心样式 ========== */
ul.smad {
    list-style: none;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #0783ac; /* 全幅宽蓝底 */
    color: #ffffff;
    /* 【关键】ul作为flex column容器，所有li作为一个整体贴底 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 背景图通用样式 —— 固定 450x480 原始尺寸，不拉伸 */
ul.smad::before,
ul.smad::after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: 450px 480px;
    z-index: 0;
}

/* ========== PC端样式（≥769px，和psnav断点保持一致） ========== */
@media (min-width: 769px) {
    ul.smad {
        height: 480px;
        /* border-box 下 padding-top 200px → 剩余 280px 内容区正好=左图下半部 */
        padding-top: 200px;
        box-sizing: border-box;
        /* li 组在底部 280px 区域内垂直居中 */
        justify-content: center;
    }
    /* 左图 sad1l.jpg —— 在 960px 内容栏内靠左（屏窄于 960px 时贴左不溢出） */
    ul.smad::before {
        top: 0;
        left: max(0px, calc(50% - 480px));
        width: 450px;
        height: 100%;
        background-position: left top;
        background-image: url('res/sad1l.jpg');
    }
    /* 右图 sad1r.jpg —— 在 960px 内容栏内靠右 */
    ul.smad::after {
        top: 0;
        right: max(0px, calc(50% - 480px));
        width: 450px;
        height: 100%;
        background-position: right top;
        background-image: url('res/sad1r.jpg');
    }
    /* li内容：限定在左图区域内，整体居中，文字靠左 */
    ul.smad li {
        position: relative;
        z-index: 1;
        width: 450px;              /* 与左图等宽 */
        margin: 0 0 0 max(0px, calc(50% - 480px)); /* 左对齐左图；屏窄时贴左防溢出 */
        padding: 0 40px 0 40px;
        line-height: 1.6;
        font-size: 15px;
        text-align: left;
    }
}

/* ========== 平板端适配（769px~999px，和psnav断点一致） ========== */
@media (max-width: 999px) and (min-width: 769px) {
    ul.smad li {
        padding: 0 30px 30px 30px;
    }
}

/* ========== 移动端样式（≤768px） ========== */
@media (max-width: 768px) {
    ul.smad {
        height: 960px; /* 总高 960px，上下各 480px */
        /* border-box 下 padding-top 680px → 剩余 280px 正好是下半 sad1l.jpg 底部区域 */
        padding-top: 680px;
        box-sizing: border-box;
        /* li 组在底部 280px 区域内垂直居中 */
        justify-content: center;
    }
    /* 上半部分 sad1r.jpg —— 完整显示不拉伸 */
    ul.smad::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 480px;
        background-image: url('res/sad1r.jpg');
        background-position: center center;
        background-size: contain;
    }
    /* 下半部分 sad1l.jpg —— 完整显示不拉伸 */
    ul.smad::after {
        top: 480px;
        left: 0;
        width: 100%;
        height: 480px;
        background-image: url('res/sad1l.jpg');
        background-position: center center;
        background-size: contain;
    }
    /* li内容：全部作为一个group贴底，居中 */
    ul.smad li {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 0 25px 30px 25px; /* 底部 30px 安全区 */
        line-height: 0.6;
        font-size: 14px;
    }
}

/* ========== 小屏手机适配（≤480px，和psnav断点一致） ========== */
@media (max-width: 480px) {
    ul.smad li {
        padding: 0 20px 25px 20px;
        font-size: 13px;
        line-height: 0.6;
    }
}

/* ========== 通用内容样式 ========== */
ul.smad li {
    list-style: none;
    /* 单个 li 不再设 height / display:flex / justify-content */
}
/* 下载按钮项：按钮加大 */
ul.smad li.itemt {
    padding-bottom: 12px;
}
ul.smad li.itemt img {
    max-height: 70px;
    width: auto;
}
/* 链接样式适配蓝底 */
ul.smad a {
    color: #ffffff;
    text-decoration: underline;
}
ul.smad a:hover {
    color: #ffe100;
}

/* ==================================================================
   首页产品介绍区：复刻公网 https://www.b2bangong.com
   <div class="product"> / <div class="productx"> 的显示效果
   （公网为固定 960px，此处改为 960px 上限 + 移动端单列，兼容窄屏）
   ================================================================== */
.product,
.productx {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;            /* 公网固定 960px，这里自适应且不超 960px */
    margin: 2rem auto;
    text-align: left;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 0.9rem;
    color: #505050;
    line-height: 1.8;
}

/* 产品区：左图 500px + 右侧信息 450px，整体垂直居中 */
.product {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

/* 标题：左侧太阳小图标，蓝色字 */
.product h1 {
    margin-bottom: 2rem;
    padding-left: 30px;
    font-size: 1.5rem;
    color: #0066cc;
    background-image: url('res/small-sun.gif');
    background-repeat: no-repeat;
    background-position: left bottom;
}
.product h2 {
    margin-bottom: 2rem;
    padding-left: 30px;
    font-size: 1.3rem;
    color: #0066cc;
    background-image: url('res/small-sun.gif');
    background-repeat: no-repeat;
    background-position: left bottom;
}

/* 产品截图：宽 500px，高自适应，不拉伸 */
.product img {
    box-sizing: border-box;
    display: block;
    flex: 0 1 auto;
    width: 500px;
    height: auto;
    max-width: 100%;
    margin: 20px auto 20px 0;
}

/* 右侧文字信息块 */
.product .info {
    box-sizing: border-box;
    flex: 0 1 auto;
    width: 450px;
    max-width: 100%;
}
.product .info .name,
.product .info .features {
    margin: 2.5rem 0;
}
.product p,
.productx p {
    margin: 0 0 1rem;            /* psnav.css 全局清空了段落间距，这里补回 */
}

/* 核心功能列表：绿色对勾 */
.features ul {
    list-style: none;
    padding: 0;
}
.features li {
    margin: 0.8rem 0;
    padding-left: 1.2rem;
    position: relative;
}
.features li::before {
    content: "✔";
    color: green;
    position: absolute;
    left: 0;
}

/* 产品延伸区：“为什么选择” + “用户好评”，上下纵向排列，上下细灰线 */
.productx {
    display: flex;
    flex-direction: column;      /* 改为纵向单列：adverts 在上，review 在下 */
    justify-content: flex-start;
    align-items: stretch;        /* 子项撑满宽度 */
    gap: 0;                      /* 子项自带 margin，不再用 gap */
    border: none;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}
.productx h2 {
    color: #0066cc;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.productx .adverts {
    width: 100%;                 /* 纵向排列时占满容器宽 */
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.productx .review {
    width: 100%;                 /* 纵向排列时占满容器宽 */
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.productx .review .item {
    display: flex;
    flex-direction: column;
    padding: 15px;
}
.productx .review .item .uname {
    display: inline-block;
    width: fit-content;
    border: 1px solid #0078D4;
    border-radius: 6px;
    padding: 4px 10px;
    color: #0078D4;
    font-weight: bold;
    margin-bottom: 2rem;
}

/* ---------- 平板：内容栏收窄时按比例缩图，避免两列换行 ---------- */
@media (max-width: 999px) {
    .product,
    .productx {
        padding: 0 15px;         /* 窄屏左右留白，不贴边 */
    }
    .product img {
        max-width: 51.5%;        /* 与 info 之和留 1% 余量，避免亚像素取整导致换行 */
    }
    .product .info {
        max-width: 47.5%;
    }
}

/* ---------- 移动端（≤768px）：横向两列改为纵向单列 ---------- */
@media (max-width: 768px) {
    .product,
    .productx {
        flex-flow: column nowrap;
        align-items: stretch;
        margin: 1.5rem auto;
        font-size: 0.875rem;
    }
    .product img {
        width: 100%;
        max-width: 100%;
        margin: 0 0 1.5rem;
    }
    .product .info {
        width: 100%;
        max-width: 100%;
    }
    .product .info .name,
    .product .info .features {
        margin: 1.5rem 0;
    }
    .product h1 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    .product h2,
    .productx h2 {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }
    .productx {
        gap: 0;
    }
    .productx .adverts,
    .productx .review {
        flex: 0 0 auto;
        width: 100%;
        margin: 1.5rem 0;
    }
    .productx .review .item {
        padding: 10px 0;
    }
    .productx .review .item .uname {
        margin-bottom: 0.8rem;
    }
}

/* ==================================================================
   资源分享 / 合作伙伴区：复刻 liandianshu.com 的 .reshare .exgrid .partners .plinks
   桌面端尺寸间距与公网完全一致，仅增加移动端兼容
   ================================================================== */

/* 资源分享容器 —— 公网 width:960px; padding-bottom:30px; border-bottom */
.reshare {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;               /* 公网固定 960px，窄屏自适应 */
    margin: 30px auto;
    padding-bottom: 30px;           /* 公网仅 padding-bottom，无左右 padding */
    border: none;
    border-bottom: 1px solid #E8E8E8;
}
.reshare .title,
.partners .title {
    margin: 36px auto;
    color: #0066cc;
    font-size: 1.3rem;
    text-align: center;
}

/* 资源分享三列卡片网格 —— 公网 width:960px; space-between */
.exgrid {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    list-style: none;
    text-align: left;
}
/* 卡片：公网 width:268px height:122px padding:16px 20px
   必须 content-box（psnav 全局 border-box），268+20*2=308px 正好
   等于 postcard.gif(308x150) 的宽度，背景图无需缩放 */
.exgrid .itemx {
    box-sizing: content-box;
    width: 268px;
    height: 122px;
    margin: 8px 0;
    padding: 16px 20px;
    background-image: url('res/postcard.gif');
    background-repeat: no-repeat;
    /*overflow: hidden; */               /* 防内容溢出（公网无此项，仅作安全） */
    font-size: 14px;
    line-height: 18px;               /* 匹配公网 body line-height:18px */
}
.exgrid .itemx em {
    display: block;
    padding: 5px 0 0 30px;
    color: #0572be;
}
.exgrid .itemx p {
    margin: 6px 0 0 0;
    padding: 0;
    /*overflow: hidden;*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.exgrid .itemx a {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* 合作伙伴容器 —— 公网仅 margin:30px auto，无宽度 */
.partners {
    margin: 30px auto;
}

/* 合作伙伴链接列表 —— 公网 width:960px; gap:16px */
.plinks {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.plinks .plink {
    text-align: center;
}

/* ---------- 移动端（≤768px）：增加左右内边距，卡片居中环绕 ---------- */
@media (max-width: 768px) {
    .reshare {
        padding: 0 15px 30px 15px;
    }
    .partners {
        padding: 0 15px;
    }
    .exgrid {
        justify-content: space-around;
    }
}

/* ---------- 小屏手机（≤480px）：收窄内边距 ---------- */
@media (max-width: 480px) {
    .reshare {
        padding: 0 10px 24px 10px;
    }
    .partners {
        padding: 0 10px;
    }
}

/* ==================================================================
   "我们的产品"区：复刻 liandianshu.com 的 .hbc2 / .products
   .hbc2 取自 wsx.css，.products 取自 wslds.css
   桌面端尺寸间距与公网完全一致，仅增加移动端兼容
   ================================================================== */

/* 蓝色居中标题（公网 width:960px bold 13px/16px #0572be） */
.hbc2 {
    margin: 18px auto;
    width: 960px;
    text-align: center;
    font: bold 13px/16px "Verdana", "Tahoma", "Arial", sans-serif;
    color: #0572be;
}

/* 产品列表容器 */
.products {
    padding: 0;
    text-align: left;
    list-style: none;
}
/* 每个产品项的内层 div：公网 width:960 height:220 padding:30px 0
   必须 content-box（psnav 全局 border-box），否则 220 会被 padding 吃掉 */
.products div {
    box-sizing: content-box;
    margin: 0 auto;
    width: 960px;
    height: 220px;
    padding: 30px 0;
}

/* ---------- item1：图在左，文字在右 ---------- */
.products .item1 div {
    background-image: url('res/product1.gif');
    background-repeat: no-repeat;
    background-position: center left;
}
.products .item1 .name {
    margin: 39px 0 19px 360px;
    text-align: center;
    font: bold 18px/22px "Verdana", "Tahoma", "Arial", sans-serif;
    color: #41840b;
}
.products .item1 .brief {
    margin: 19px 0 36px 360px;
    font: bold 12px/16px "Verdana", "Tahoma", "Arial", sans-serif;
    color: #505050;
}
.products .item1 .page {
    display: inline;
    margin: 0 0 0 500px;
    padding: 9px 36px;
    border-style: dotted;
    border-color: #f28007;
    font: bold 12px/16px "Verdana", "Tahoma", "Arial", sans-serif;
}
.products .item1 .down {
    display: inline;
    margin: 0 0 0 60px;
    padding: 9px 36px;
    border-style: dotted;
    border-color: #f28007;
    font: bold 12px/16px "Verdana", "Tahoma", "Arial", sans-serif;
}

/* ---------- item2：图在右，文字在左，浅绿底 ---------- */
.products .item2 {
    background-color: #f5fdd5;
}
.products .item2 div {
    background-image: url('res/product2.gif');
    background-repeat: no-repeat;
    background-position: center right;
}
.products .item2 .name {
    margin: 39px 360px 19px 0;
    font: bold 18px/22px "Verdana", "Tahoma", "Arial", sans-serif;
    color: #41840b;
}
.products .item2 .brief {
    margin: 19px 360px 36px 0;
    font: bold 12px/16px "Verdana", "Tahoma", "Arial", sans-serif;
    color: #505050;
}
.products .item2 .page {
    display: inline;
    margin: 0 60px 0 140px;
    padding: 9px 36px;
    border-style: dotted;
    border-color: #f28007;
    font: bold 12px/16px "Verdana", "Tahoma", "Arial", sans-serif;
}
.products .item2 .down {
    display: inline;
    margin: 0;
    padding: 9px 36px;
    border-style: dotted;
    border-color: #f28007;
    font: bold 12px/16px "Verdana", "Tahoma", "Arial", sans-serif;
}

/* ---------- 移动端（≤768px）：产品项改为上图下文，居中 ---------- */
@media (max-width: 768px) {
    .hbc2 {
        width: 100%;
    }
    .products div {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 20px 15px;
    }
    .products .item1 div,
    .products .item2 div {
        background-position: top center;
    }
    /* item1 图高 200px，item2 图高 250px，用 padding-top 留位 */
    .products .item1 div {
        padding-top: 230px;
    }
    .products .item2 div {
        padding-top: 280px;
    }
    .products .item1 .name,
    .products .item1 .brief,
    .products .item2 .name,
    .products .item2 .brief {
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }
    .products .item1 .brief,
    .products .item2 .brief {
        margin-bottom: 20px;
    }
    .products .item1 .page,
    .products .item1 .down,
    .products .item2 .page,
    .products .item2 .down {
        display: block;
        margin: 10px auto;
        text-align: center;
    }
}

/* ---------- 小屏手机（≤480px）：按钮宽度自适应 ---------- */
@media (max-width: 480px) {
    .products .item1 .page,
    .products .item1 .down,
    .products .item2 .page,
    .products .item2 .down {
        display: block;
        width: fit-content;
        margin: 8px auto;
    }
}