@charset "utf-8";
/*
 * 华瑞滤纸 · 落地修补样式
 * 只做「叠加修正」，不改参考站原有样式表（bootstrap / app / main），
 * 所以这里每一项都要能和原规则叠加后不打架，且必须能被手机断点复用。
 */

/* ---------- 1. 入场动画兜底 ----------
   参考站 aos.js 这个构建里 scroll 回调不触发，且一旦触发会把 .aos-animate 移除，
   元素就永久停在 opacity:0（首页 banner 下方整块空白就是这个原因）。
   现在改为：JS 未就绪时一律可见，JS 加上 html.aos-ready 后才进入动画初始态。 */
html:not(.aos-ready) [aos] {
    opacity: 1 !important;
    transform: none !important;
}
html.aos-ready [aos] {
    transition-duration: .7s;
    transition-timing-function: ease;
}

/* ---------- 2. 产品列表网格 ----------
   原样式靠 vertical-align:bottom 排版，卡片高度由「图片原比例 + 摘要行数」决定，
   高度一不同就底对齐、顶部参差（中文摘要长短差异比英文更大，问题更明显）。
   改为顶部对齐 + 统一图片区高度 + 摘要固定两行，四列就齐了。 */
.xypg-product-list.xypg-product-list2 li {
    vertical-align: top;
}
.xypg-product-list2 li .img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xypg-product-list2 li .img img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.xypg-product-list2 li h4 {
    height: 52px;
}
@media (max-width: 768px) {
    .xypg-product-list2 li .img {
        height: 132px;
    }
}

/* ---------- 3. 富文本图文 ----------
   证书图在桌面上统一 400px 高（不同分辨率的证书才会等高），手机屏放不下就还原成自适应。 */
@media (max-width: 768px) {
    .xypg-right-content img {
        height: auto !important;
        max-width: 100% !important;
    }

    /* 适用领域卡片：桌面三列，手机上按两列收，否则 230px 的最小宽度会把它们挤成一列、页面拉得很长 */
    .xypg-right-content [style*="box-shadow"][style*="1 1 30%"] {
        flex: 1 1 42% !important;
        min-width: 0 !important;
        padding: 24px 10px !important;
    }
}

/* ---------- 4. 手机端底部工具条 ----------
   图标来自 iconfont 字体（cdn.xyptcdn.com/fonts/iconfont_6011343213.*），
   字体文件缺失时图标会显示成豆腐块。字体已补齐，这里不再改动排版，免得和参考站原版不一致。 */

/* ---------- 5. 主导航下拉菜单 ----------
   原样式把子菜单写成「父项宽度的 300%」并让文字居中，产品中心有 14 个二级项，
   下拉就摊成一条 600 多像素宽的白板，行与行之间没有任何分隔，看着像一坨。
   改成：比导航项略宽一点（200px，父项 160px）并居中挂在父项下方、文字居中、
   行间 1px 虚线、悬停整行浅绿。 */
.x-menu > li .x-sub-menu,
.x-menu > li:nth-child(3) .x-sub-menu {
    width: 200px;
    left: 50%;
    margin-left: -100px;
    padding: 6px 0;
    border-top: 2px solid #019252;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
.x-menu > li .x-sub-menu > li {
    border-top: 1px dashed #ececec;
}
.x-menu > li .x-sub-menu > li:first-child {
    border-top: 0;
}
.x-menu > li .x-sub-menu > li > a,
.x-menu > li:hover .x-sub-menu li a {
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 32px;
    color: #444;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .2s ease, color .2s ease;
}
.x-menu > li .x-sub-menu > li > a:hover,
.x-menu > li.active .x-sub-menu li a:hover {
    background: #f1f8f4;
    color: #019252;
}
/* 14 个二级项要在一屏内放下，行高收到 30px；文字一律单行，超长省略，
   否则「商用车空气滤纸（内芯）」这类名字会把某一行撑成两行高、整列参差。 */
.x-menu > li .x-sub-menu > li > a {
    line-height: 30px;
}

/* 5.1 西语菜单放宽
   中文两个字的栏目名换成西语就成了一句话：「Papel filtrante de aire para maquinaria
   de minería y construcción」。200px 的板子只露出「Papel filtrante de aire par…」，
   十四项里有七八项看起来一模一样，导航等于失效。
   这里只对西语界面放宽到 400px 并允许折行：最长的那两条自然排成两行，其余仍是单行；
   中文界面继续走上面的 200px 单行方案，不受影响。
   排版与中文站保持一致：文字居中、面板正挂在父项下方（left:50% + 半个宽度）。
   折行的两项用 text-wrap:balance 把两行匀开，否则第二行只剩一两个词、居中对得像孤儿。 */
body[data-locale="es"] .x-menu > li .x-sub-menu,
body[data-locale="es"] .x-menu > li:nth-child(3) .x-sub-menu {
    width: 400px;
    margin-left: -200px;
}
body[data-locale="es"] .x-menu > li .x-sub-menu > li > a,
body[data-locale="es"] .x-menu > li:hover .x-sub-menu li a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    text-wrap: balance;
    line-height: 1.45;
    padding: 7px 16px;
}

/* ---------- 6. 发展历程：横向时间轴 ----------
   正文只保留「标题 + 一个包装 div + 6 个节点 div」，每个节点内是「图片盒 + 文字」。
   桌面：六列横排，奇数节点图在上、偶数节点文在上（flex-direction 反转），
   图片自带年份缎带（参考站原图就是「照片 + 箭头 + 年份」的合成图）。
   手机：改成一列，图片在左、文字在右，左侧一条竖线串起所有节点。 */
.pg-history .xypg-right-content > h3:first-child {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: #2c3e50;
    letter-spacing: 1px;
    text-align: left;
}
.pg-history .xypg-right-content > h3:first-child::after {
    content: "";
    display: block;
    width: 80px;
    height: 0;
    border-bottom: 2px solid #2ecc71;
    margin: 12px 0 34px;
}
.pg-history .xypg-right-content {
    padding-bottom: 16px;
}
.pg-history .xypg-right-content > div:last-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 -6px;
}
.pg-history .xypg-right-content > div:last-of-type > div {
    box-sizing: border-box;
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pg-history .xypg-right-content > div:last-of-type > div > p {
    width: 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #555;
}
.pg-history .xypg-right-content > div:last-of-type > div > div {
    width: 100%;
    line-height: 0;
    font-size: 0;
}
.pg-history .xypg-right-content > div:last-of-type > div > div img {
    display: block;
    width: 100%;
    max-width: 165px;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}
/* 图在上：图片 → 短竖线 → 文字 */
.pg-history .xypg-right-content > div:last-of-type > div:nth-child(odd) > div::after {
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    margin: 0 auto 8px;
    background: #5bbccf;
}
/* 文在上：文字 → 图片 */
.pg-history .xypg-right-content > div:last-of-type > div:nth-child(even) {
    flex-direction: column-reverse;
}
.pg-history .xypg-right-content > div:last-of-type > div:nth-child(even) > p {
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .pg-history .xypg-right-content > h3:first-child {
        font-size: 22px;
    }
    .pg-history .xypg-right-content > h3:first-child::after {
        margin: 10px 0 24px;
    }
    .pg-history .xypg-right-content > div:last-of-type {
        display: block;
        margin: 0;
    }
    .pg-history .xypg-right-content > div:last-of-type > div,
    .pg-history .xypg-right-content > div:last-of-type > div:nth-child(even) {
        flex-direction: row;
        align-items: center;
        max-width: 100%;
        padding: 0 0 0 20px;
        margin-bottom: 26px;
        position: relative;
        text-align: left;
    }
    .pg-history .xypg-right-content > div:last-of-type > div:last-child {
        margin-bottom: 0;
    }
    .pg-history .xypg-right-content > div:last-of-type > div::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 10px;
        bottom: -26px;
        width: 2px;
        background: #d5e6ea;
    }
    .pg-history .xypg-right-content > div:last-of-type > div:last-child::before {
        display: none;
    }
    .pg-history .xypg-right-content > div:last-of-type > div > div {
        order: 1;
        flex: 0 0 112px;
        max-width: 112px;
    }
    .pg-history .xypg-right-content > div:last-of-type > div > div::after {
        display: none;
    }
    .pg-history .xypg-right-content > div:last-of-type > div > p,
    .pg-history .xypg-right-content > div:last-of-type > div:nth-child(even) > p {
        order: 2;
        flex: 1;
        margin: 0 0 0 16px;
        font-size: 14px;
        line-height: 1.85;
    }
}

/* ---------- 7. 企业文化：浅蓝底 + 四张白卡 ----------
   参考站英文版就是「Mission / Vision / Core Values / Business Philosophy」四张卡，
   图标是绿色实心 SVG（assets/huarui/culture/*.svg）。 */
.pg-culture .xypg-right-content > div {
    background: #eaf4fc;
    padding: 56px 24px;
    box-sizing: border-box;
}
.pg-culture .xypg-right-content > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    max-width: 1120px;
    margin: 0 auto;
}
.pg-culture .xypg-right-content > div > div > div {
    box-sizing: border-box;
    flex: 1 1 200px;
    max-width: 258px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    padding: 36px 24px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.pg-culture .xypg-right-content > div > div > div:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
}
.pg-culture .xypg-right-content img {
    display: inline-block;
    width: 46px;
    height: 46px;
    margin: 0 auto 16px;
    border: 0;
    box-shadow: none;
}
.pg-culture .xypg-right-content h3 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #1f2933;
}
.pg-culture .xypg-right-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: #5c6773;
    text-align: center;
}
@media (max-width: 768px) {
    .pg-culture .xypg-right-content > div {
        padding: 26px 16px;
    }
    .pg-culture .xypg-right-content > div > div {
        gap: 16px;
    }
    .pg-culture .xypg-right-content > div > div > div {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 28px 20px;
    }
}

/* ---------- 8. 网站地图 ----------
   分组标题条、条目虚线分隔沿用参考站原样式（.xypg-sitemap），
   这里只补两处：二级条目改成行内块并留出行距（否则一条新闻标题能顶满一行），
   链接悬停改成站点主色。 */
.xypg-sitemap .map_list .layer2 {
    padding: 2px 0 6px 12px;
    line-height: 28px;
}
.xypg-sitemap .map_list .layer2 a {
    display: inline-block;
    margin: 0 18px 0 0;
    padding: 2px 0;
    color: #8a949e;
}
.xypg-sitemap .map_list a:hover {
    color: #019252;
}
.xypg-sitemap .map_list .layer1 h3 a {
    color: #444;
}
.xypg-sitemap .map_list .layer1 h3 a:hover {
    color: #019252;
}

/* ---------- 9. 页脚版权条 ----------
   参考站版权条的文字是直接贴在绿底上的（.fl-all 那段是隐藏的），
   这里补上下留白 + 行距，改成「产品内链 / 版权 / 技术支持」三行。
   字号 14px：比正文小一号，三行排在一起才不压过上面的公司信息。 */
.hm-floor .w1200 {
    padding: 20px 0 22px;
}
.hm-floor p {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: #fff;
}
.hm-floor p.foot-copy {
    letter-spacing: 0.02em;
}
/* 关键词之间的竖线用伪元素画，避免把分隔符写进 HTML 影响复制粘贴 */
.hm-floor .foot-links a + a::before {
    content: "|";
    display: inline-block;
    margin: 0 12px;
    color: #fff;
    opacity: 0.7;
}
.hm-floor .foot-links a:hover,
.hm-floor .foot-support a:hover {
    color: #d6f3e4;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .hm-floor .w1200 {
        padding: 14px 16px 16px;
    }
    .hm-floor p {
        font-size: 13px;
        line-height: 1.9;
    }
    /* 手机上第一行会折成两行，保留竖线会出现「行尾一根孤立竖线」，改成纯间距 */
    .hm-floor .foot-links a + a::before {
        content: none;
    }
    .hm-floor .foot-links a {
        margin-right: 14px;
    }
}

/* ---------- 10. 产品分类页签（手机端） ----------
   主题在手机上把 .nynav1 改成两列 flex，但给每个 a 写死 height:66px、行高 22px，
   一行字撑出近 70px 的空白；两列各自 1px 边框还会叠成 2px 双线，
   加上 align-items:flex-start，同一行里高度不等的单元格下方就空出一截。
   这里改成「等高等宽的小卡片」：高度由内容决定、上下只有 6px 内边距，
   行之间留 8px 缝，边框合成一条；当前栏目高亮成主色。 */
/* 当前栏目高亮：桌面端沿用主题的绿色实底，手机端在下面的断点里再调成圆角卡片 */
.nynav1 .nynav1li.on {
    background-color: #019252;
    border-color: #019252;
}
.nynav1 .nynav1li.on a {
    color: #fff;
}

@media (max-width: 768px) {
    .nynav1 {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        margin: 0 0 20px;
    }
    .nynav1 .nynav1li {
        display: flex;
        width: calc(50% - 4px);
        min-width: 0;
        margin: 0 8px 8px 0;
        padding: 0;
        border: 1px solid #e3e8e5;
        border-radius: 4px;
        background: #fbfcfb;
    }
    .nynav1 .nynav1li:nth-child(2n) {
        margin-right: 0;
    }
    .nynav1 .nynav1li a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 40px;
        padding: 6px 8px;
        line-height: 1.35;
        font-size: 13px;
        white-space: normal;
        box-sizing: border-box;
    }
    .nynav1 .nynav1li.on {
        border-radius: 4px;
    }
    .nynav1 .nynav1li.on a {
        color: #fff;
    }
}

/* ---------- 11. 页脚联系方式 ----------
   原来靠两个全角空格分隔，手机上换行会从词中间断开（「网」/「址：…」），
   现在每项独立成块：桌面并排、手机各占一行。 */
.hm-footer .fr-lx .fi {
    display: inline-block;
    margin-right: 2em;
}
@media (max-width: 768px) {
    .hm-footer .fr-lx h5 p {
        font-size: 13px;
        line-height: 1.9;
    }
    .hm-footer .fr-lx .fi {
        display: block;
        margin-right: 0;
    }
}

/* ---------- 12. 产品详情：联系信息（原「立即询价」按钮位） ----------
   三行固定标签：电话 / 在线咨询（QQ 交谈按钮）/ E-mail。
   数据全部来自后台站点设置，不用 page-product-inquiry 那个类，
   免得被主题的绿底白字按钮样式带跑。 */
.product-contact-box {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}
.product-contact-box p {
    margin: 0 0 14px;
}
.product-contact-box p:last-child {
    margin-bottom: 0;
}
.product-contact-box .pcb-label,
.product-contact-box .pcb-tel {
    color: #333;
}
.product-contact-box .pcb-mail {
    color: #333;
    text-decoration: none;
}
.product-contact-box .pcb-mail:hover {
    color: #019252;
    text-decoration: underline;
}
/* QQ 交谈：仿经典浅蓝小按钮 */
.product-contact-box .pcb-qq {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    padding: 2px 10px 2px 6px;
    margin-left: 2px;
    border: 1px solid #8ab9d6;
    border-radius: 3px;
    background: linear-gradient(#f4fbff, #cde6f8);
    box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, .06);
    color: #0d5c93;
    font-size: 13px;
    line-height: 22px;
    text-decoration: none;
}
.product-contact-box .pcb-qq:hover {
    background: linear-gradient(#ffffff, #dcf0ff);
    color: #0a4a78;
}
.product-contact-box .pcb-qq-icon {
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    flex: none;
}
@media (max-width: 640px) {
    .product-contact-box {
        margin-top: 18px;
        font-size: 14px;
    }
    .product-contact-box p {
        margin-bottom: 12px;
    }
}

/* ---------- 13. 联系方式链接（页脚 / 侧栏） ----------
   电话、邮箱改成可点（tel: / mailto:）之后，页脚是绿底，必须显式给白色，
   否则会掉回主题的默认链接色（蓝紫），在深绿上几乎看不清。 */
.hm-footer .fr-lx .foot-line a {
    color: #fff;
    text-decoration: none;
}
.hm-footer .fr-lx .foot-line a:hover {
    text-decoration: underline;
}
.page-wrap-contact a {
    color: inherit;
    text-decoration: none;
}
.page-wrap-contact a:hover {
    color: #019252;
}
.page-wrap-contact .sq-qq {
    vertical-align: -3px;
}

/* ---------- 14. 站内搜索 ----------
   首页「热门关键词」改成链接后，主题原有的 .gjc span a 带 20px 左内边距，
   多个词并排会散开；这里收掉内边距改成右外边距，词与词之间用顿号由模板保证。
   搜索页的输入框/按钮不复用首页 .sousuo（那是浮在 banner 下方的绝对定位块），单独写一套。 */
.gjc span a {
    padding-left: 0;
    margin-right: 0;
    color: #888;
}
.gjc span a:hover {
    color: #019252;
}
.gjc span .kw-sep {
    margin: 0 2px;
    color: #888;
    font-style: normal;
}
.search-page .page-search-form {
    margin-bottom: 22px;
}
.page-search-form input[type="text"] {
    float: left;
    box-sizing: border-box;
    width: 78%;
    height: 42px;
    line-height: 42px;
    padding: 0 14px;
    border: 1px solid #e5e5e5;
    border-right: 0;
    background: #fff;
    color: #333;
    font-size: 14px;
    outline: none;
}
.page-search-form button {
    float: left;
    width: 22%;
    height: 42px;
    border: 0;
    background: #019252;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    cursor: pointer;
}
.page-search-form button:hover {
    background: #017a45;
}
.search-empty {
    padding: 70px 0;
    text-align: center;
    color: #999;
    font-size: 16px;
}
.search-list .type-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 0 6px;
    border: 1px solid #cfe8dc;
    border-radius: 2px;
    color: #019252;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    vertical-align: 2px;
}
.xypg-search-result .search-tag a {
    padding: 0 18px;
}
@media (max-width: 768px) {
    .xypg-search-result .search-tag {
        display: flex;
        flex-wrap: wrap;
    }
    .xypg-search-result .search-tag a {
        padding: 0 10px;
        font-size: 14px;
        line-height: 36px;
    }
    .page-search-form input[type="text"] {
        width: 72%;
    }
    .page-search-form button {
        width: 28%;
    }
    .gjc span .kw-sep {
        margin: 0 2px;
    }
}

/* ---------- 15. 顶部语言条：文字胶囊（不再用国旗） ----------
   原主题把 .hyr a 写成灰字 + 右侧短横线，hover 还变白字（浅灰底上等于看不见），
   这里整套覆盖成圆角文字标签；当前语言用主题绿高亮。 */
.x-top .hyz span {
    color: #8c8c8c;
    font-size: 13px;
    letter-spacing: .5px;
}
/* .hyr 被外层 flex 拉到与顶栏等高；不写这一条时 <p> 只有 28px 高、
   从 .hyr 的 top:0 起排，胶囊会贴住顶栏上沿，比左侧「语言 / Languages」高 16px。 */
.x-top .hyr {
    display: flex;
    align-items: center;
}
.hyr .lang-switch {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    /* 右侧固定客服条压在顶条上，留一段空白，别让最后一个胶囊被盖住圆角 */
    padding-right: 46px;
    gap: 6px;
    margin: 0;
    line-height: 28px;
}
.hyr .lang-switch a {
    display: inline-block;
    margin: 0;
    padding: 0 13px;
    border: 1px solid #dcdcdc;
    border-radius: 14px;
    background: #fff;
    color: #7a7a7a;
    font-size: 13px;
    line-height: 26px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s, border-color .15s;
}
/* 主题会在除最后一个之外的链接右侧画一条 5px 短横线，胶囊布局不需要 */
.hyr .lang-switch a:not(:last-child)::before {
    display: none;
}
.hyr .lang-switch a:hover,
.hyr .lang-switch a.on {
    border-color: #019252;
    background: #019252;
    color: #fff;
}
/* 手机抽屉是深绿底：用半透明白描边，当前语言反白 */
.xymob-lang {
    padding: 14px 0 10px;
}
.xymob-lang > span {
    display: block;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
}
.xymob-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xymob-lang-list a {
    padding: 3px 13px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 14px;
    color: #fff;
    font-size: 13px;
    line-height: 24px;
    text-decoration: none;
}
.xymob-lang-list a.on {
    border-color: #fff;
    background: #fff;
    color: #006a3b;
}

/* ---- 产品详情：型号 / 价格 / 库存 ---- */
.product-detail-meta {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.product-detail-meta li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    line-height: 30px;
    color: #7a7a7a;
    border-bottom: 1px dashed #e5e5e5;
}
.product-detail-meta li:last-child {
    border-bottom: 0;
}
.product-detail-meta li span {
    color: #222;
    font-weight: 600;
    font-size: 15px;
    text-align: right;
    word-break: break-word;
}
.product-detail-meta li.product-price-row span {
    color: #c8102e;
    font-size: 18px;
}

/* ---- 首页搜索框：白底输入框 + 绿色按钮 ----
   主题样式把输入框写成 `.sousuo #keyword`，但首页模板里的输入框 id 是
   `home-keyword`（同页手机抽屉还要用 #keyword，不能重名），选择器打不中，
   输入框就只吃到了 `.sousuo .fl` 的绿底白字，整条搜索框变成一块绿色。
   这里按 `#home-keyword` / `#home-search-submit` 补一套，恢复原设计。 */
.sousuo {
    /* 右侧悬浮客服条固定 46px，搜索框贴右会被压住 */
    margin-right: 46px;
}
.sousuo input#home-keyword {
    float: left;
    box-sizing: border-box;
    width: 72%;
    height: 36px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-right: 0;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 34px;
    text-indent: 20px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.sousuo input#home-keyword::placeholder {
    color: #999;
}
.sousuo input#home-search-submit {
    float: left;
    box-sizing: border-box;
    width: 28%;
    height: 36px;
    /* 右侧留给放大镜：图标是独立 <img>，绝对定位压在按钮里 */
    padding: 0 24px 0 0;
    border: 0;
    background: #019252;
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.sousuo input#home-search-submit:hover {
    background: #017f47;
}
/* 放大镜图标压在按钮里，位置跟着 36px 的高度走 */
.sousuo img {
    top: 50%;
    right: 10px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    pointer-events: none;
}