@charset "utf-8";
/* =========================================================================
   锦辉国际搬家 · 站点主样式（重构版）
   设计还原自原站视觉：1200 定宽 / 深红导航 / 橙色强调 / 三栏白底卡片
   仅本站使用，类名统一 yn- 前缀
   ========================================================================= */

/* ---------- 1. 基础重置 ---------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, dl, dt, dd, form, fieldset, legend, table, tr, td, th {
    margin: 0; padding: 0; border: 0; outline: 0;
}
ul, ol, li { list-style: none; }
img { border: 0; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; }
html, body { width: 100%; min-width: 1200px; color: #333; background: #fff; }
body { font: 13px/20px "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimSun, sans-serif; }
a { color: #333; text-decoration: none; }
a:hover { color: #ff4f00; }
em, i { font-style: normal; }
input, button, select, textarea { font-family: inherit; font-size: inherit; outline: none; }

/* 通用工具类 */
.yn-wrap { width: 1200px; margin: 0 auto; }
.yn-fl { float: left; }
.yn-fr { float: right; }
.yn-clear { clear: both; height: 0; overflow: hidden; font-size: 0; line-height: 0; }
.yn-clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.yn-hide { display: none !important; }

/* ---------- 2. 顶部信息条 ---------- */
.yn-top { height: 34px; background: #f1f1f1; font-size: 12px; color: #333; }
.yn-top-in { width: 1010px; margin: 0 auto; height: 34px; display: flex; align-items: center; justify-content: space-between; }
.yn-top a { font-size: 12px; color: #333; }
.yn-top a:hover { color: #c51c21; }
.yn-top-r { display: flex; align-items: center; gap: 10px; }
.yn-top-r a { display: inline-flex; align-items: center; gap: 4px; }
.yn-top-r img { width: 23px; height: 16px; }

/* ---------- 3. 头部：logo / 搜索 / 电话 ---------- */
/* 头部用 flex 而非 float：Chrome 在「前邻 float 块 + 后继 flex 容器」的初始布局有 bug，会把导航压缩成竖排 */
.yn-head { background: #fff; }
.yn-head-in { width: 1200px; margin: 0 auto; height: 95px; display: flex; align-items: flex-start; }
.yn-logo { padding-top: 16px; }
.yn-logo img { display: block; }
.yn-tel { order: 3; width: 210px; padding-top: 25px; color: #ff4203; font-weight: bold; font-size: 16px; letter-spacing: 1px; line-height: 25px; }
.yn-mtel { display: none; }
.yn-tel img { float: left; padding: 3px 16px 0 0; }
.yn-search { order: 2; width: 319px; height: 55px; margin: 25px 120px 0 auto; }
.yn-search-form { height: 26px; background: url(../images/search_bg_1.png) center center no-repeat; display: flex; }
.yn-search-input { flex: 1; min-width: 0; height: 26px; padding: 0 0 0 14px; border: 0; background: transparent; font-size: 13px; color: #666; }
.yn-search-btn { flex: none; width: 64px; height: 26px; border: 0; background: #d20202; color: #fff; font-size: 14px; cursor: pointer; }
.yn-hotkeys { margin-top: 8px; height: 20px; overflow: hidden; color: #999; font-size: 12px; }
.yn-hotkeys a { color: #999; }
.yn-hotkeys a:hover { color: #d20202; }

/* ---------- 4. 主导航 ---------- */
/* 桌面端吸顶：向下滚动时红色导航条固定在窗口顶部（移动端在 ycnh-responsive.css 里另行处理） */
.yn-nav { position: sticky; position: -webkit-sticky; top: 0; z-index: 500; height: 45px; background: #d20202; }
/* 注意：外层用 block 而非 flex——Chrome 在 flex 容器上有初始布局偏移怪癖；菜单横排由内层 .yn-nav-list 的 flex 实现 */
.yn-nav-in { width: 1200px; margin: 0 auto; }
.yn-nav-list { display: flex; flex-wrap: nowrap; }
.yn-nav-item { position: static; border-left: 1px solid #e50505; }
.yn-nav-item:first-child { border-left: 0; }
/* :link/:visited 提升特异度，防止被 qbgj/base1.css 的 a:link,a:visited 覆盖 */
.yn-nav-item > a, .yn-nav-item > a:link, .yn-nav-item > a:visited { display: block; height: 45px; padding: 0 20px; color: #fff; font-size: 14px; line-height: 45px; }
.yn-nav-item.on > a, .yn-nav-item:hover > a, .yn-nav-item.on > a:link, .yn-nav-item.on > a:visited, .yn-nav-item:hover > a:link, .yn-nav-item:hover > a:visited { background: #fff; color: #F96105; }
.yn-nav-sub { display: none; position: absolute; left: 0; top: 45px; width: 100%; height: 45px; background: #fff; box-shadow: 0 3px 5px rgba(0, 0, 0, .08); }
.yn-nav-item:hover .yn-nav-sub { display: block; }
.yn-nav-sub-in { width: 1200px; margin: 0 auto; display: flex; }
.yn-nav-sub a, .yn-nav-sub a:link, .yn-nav-sub a:visited { display: block; height: 45px; padding: 0 14px 0 14px; color: #787878; font-size: 15px; line-height: 45px; background: url(../images/icon.png) 0 16px no-repeat; }
.yn-nav-sub a:hover { color: #e50505; }
.yn-nav-toggle { display: none; }
/* 手风琴展开按钮仅移动端使用 */
.yn-nav-plus { display: none; }

/* ---------- 5. 首页：焦点图 + 右侧动态 ---------- */
.yn-main { padding-top: 15px; }
.yn-hero { display: flex; justify-content: space-between; }
.yn-slider { position: relative; width: 930px; height: 349px; overflow: hidden; background: #f0f0f0; }
.yn-slides { display: flex; height: 349px; position: absolute; left: 0; top: 0; transition: transform .5s ease; }
.yn-slide { position: relative; flex: 0 0 930px; width: 930px; height: 349px; overflow: hidden; }
.yn-slide img { display: block; width: 930px; min-height: 349px; }
.yn-slide-cap { position: absolute; left: 0; bottom: 0; width: 930px; height: 45px; background: url(../images/huandengbg.png) center center repeat; }
.yn-slide-cap a { display: block; padding: 0 15px; color: #fff; font-size: 16px; line-height: 45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yn-slide-cap a:hover { color: #ffff00; }
.yn-dots { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.yn-dot { width: 13px; height: 13px; border-radius: 50%; background: #fff; opacity: .9; cursor: pointer; }
.yn-dot.on { background: #ffff00; }

.yn-side { display: flex; flex-direction: column; width: 255px; height: 349px; justify-content: space-between; }
.yn-side-card { height: 167px; padding: 0 10px; background: #fff; }
.yn-side-hd { position: relative; height: 40px; border-bottom: 1px solid #ddd; }
.yn-side-hd h2 { display: inline-block; height: 40px; color: #333; font-size: 14px; font-weight: 600; line-height: 40px; position: absolute; left: 0; bottom: -1px; border-bottom: 1px solid #ff6f3d; }
.yn-side-hd a { float: right; color: #999; font-size: 12px; line-height: 40px; }
.yn-side-hd a:hover { color: #ff6f3d; }
.yn-side-list { margin-top: 12px; }
.yn-side-list li { height: 22px; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.yn-side-list a { font-size: 13px; line-height: 22px; }

/* ---------- 6. 通用色块 / 标题条 ---------- */
.yn-sec { margin: 20px 0; background: #fff; }
.yn-sec-in { width: 1200px; margin: 0 auto; }
.yn-hd { position: relative; height: 45px; border-bottom: 1px solid #ddd; }
.yn-hd h2 { display: inline-block; height: 45px; padding: 0; color: #333; font-size: 16px; font-weight: 600; line-height: 45px; position: absolute; left: 0; bottom: -1px; border-bottom: 1px solid #ff6f3d; }
.yn-hd-more { float: right; color: #999; font-size: 12px; line-height: 45px; }
.yn-hd-more:hover { color: #ff6f3d; }

/* ---------- 7. 主要服务 ---------- */
.yn-services { display: flex; padding: 15px 0 20px; }
.yn-svc { width: 400px; padding: 0 15px 0 0; }
.yn-svc dt { height: 40px; color: #9c9c9c; font-family: Arial, sans-serif; font-size: 14px; line-height: 28px; }
.yn-svc dt u { padding-right: 10px; color: #ff4f00; font-family: "Microsoft YaHei", sans-serif; font-size: 18px; text-decoration: none; }
.yn-svc img { display: block; width: 378px; margin-bottom: 18px; }
.yn-svc p { width: 370px; height: 100px; overflow: hidden; color: #7b7a78; font-size: 14px; line-height: 24px; }
.yn-svc .yn-more { display: block; color: #ff4f00; font-size: 14px; line-height: 18px; }

/* ---------- 8. 选择我们 ---------- */
.yn-why { margin: 20px 0; background: #fff; }
.yn-why-in { display: flex; width: 1200px; height: 580px; margin: 0 auto; }
.yn-why-l { width: 755px; height: 580px; }
.yn-why-top { width: 650px; height: 110px; padding: 54px 0 0 95px; background: url(../images/s_r24_c4_1.gif) no-repeat 0 54px; }
.yn-why-title { width: 648px; height: 30px; padding: 10px 0 0 2px; color: #2a2b2c; font-size: 30px; font-weight: bold; line-height: 30px; }
.yn-why-desc { width: 648px; height: 40px; padding-left: 2px; font-size: 12px; line-height: 20px; }
.yn-why-feats { display: flex; }
.yn-feat { width: 242px; }
.yn-feat img { display: block; padding-bottom: 17px; }
.yn-feat p { width: 242px; height: 63px; line-height: 24px; }
.yn-why-slogan { height: 62px; padding: 14px 0 0 22px; }
.yn-why-slogan .yn-star { font-size: 16px; letter-spacing: 2px; }
.yn-why-slogan b { color: #2a2b2c; font-size: 28px; font-weight: bold; line-height: 28px; }
.yn-why-slogan span { color: #2a2b2c; font-size: 18px; }
.yn-why-flow { height: 105px; padding-left: 22px; }
.yn-flow-m { display: none; }
.yn-why-r { width: 440px; height: 580px; }
.yn-why-r-head { width: 440px; min-height: 42px; padding-top: 138px; background: url(../images/r19_c21_1.jpg) no-repeat left top; font-size: 13px; line-height: 20px; }
.yn-why-map { position: relative; width: 440px; height: 400px; background: url(../images/r20_c21_1.jpg) no-repeat 110px top; }
.yn-map-label { position: absolute; font-size: 18px; line-height: 24px; }
.yn-map-1 { top: 38px; left: 5px; width: 120px; color: #B898C1; }
.yn-map-2 { top: 225px; left: 40px; width: 110px; height: 56px; color: #F79357; font-size: 20px; }
.yn-map-3 { top: 94px; right: 34px; width: 80px; color: #89A8C4; }
.yn-map-4 { top: 192px; right: 13px; width: 120px; height: 48px; color: #9F3968; font-size: 20px; }

/* ---------- 9. 客户案例（横向滚动） ---------- */
.yn-cases { margin: 20px 0; background: #fff; }
.yn-case-wrap { display: flex; align-items: center; margin: 15px 0; }
.yn-case-arrow { flex: 0 0 15px; height: 23px; margin-top: -85px; cursor: pointer; }
.yn-case-prev { background: url(../images/left_1.png) no-repeat; }
.yn-case-next { background: url(../images/right_1.png) no-repeat; }
.yn-case-view { flex: 1; overflow: hidden; }
.yn-case-track { display: flex; transition: transform .45s ease; }
.yn-case { flex: 0 0 257px; width: 257px; padding: 0 13px 7px; text-align: center; background: url(../images/heiying_1.png) no-repeat center bottom; }
.yn-case > a { display: block; padding: 15px; background: #e4e4e4; }
.yn-case > a:hover { background: #F04B38; }
.yn-case img { display: block; width: 227px; }
.yn-case p { height: 28px; padding: 0; margin: 0; overflow: hidden; background: #F04B38; color: #fff; font-weight: bold; line-height: 28px; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- 10. 资讯三栏（含 tab 切换） ---------- */
.yn-news3 { display: flex; width: 1200px; margin: 20px auto; }
.yn-news-col { position: relative; width: 373px; padding-right: 8px; background: #fff; }
.yn-news-col .yn-hd { height: 45px; }
.yn-news-col .yn-hd h2 { font-size: 16px; }
.yn-tabs { position: absolute; right: 8px; bottom: -1px; display: flex; gap: 10px; }
.yn-tab { height: 32px; padding: 0 15px; border: 1px solid #ddd; background: #fff; color: #333; font-size: 14px; line-height: 30px; cursor: pointer; }
.yn-tab.on { border-bottom-color: #fff; color: #333; }
.yn-tab:hover { color: #F04B38; }
.yn-news-list { padding: 10px 0; }
.yn-news-list li { height: 30px; overflow: hidden; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; }
.yn-news-list a { color: #777; font-size: 13px; }
.yn-news-list a:hover { color: #F04B38; }
.yn-news-list .yn-date { float: right; margin-left: 8px; color: #999; font-size: 12px; }
.yn-panel { display: none; }
.yn-panel.on { display: block; }

/* ---------- 11. 内页公共：面包屑 / 两栏 ---------- */
.yn-crumb { height: 45px; color: #888; line-height: 45px; }
.yn-crumb a { color: #888; }
.yn-crumb a:hover { color: #ff4f00; }
.yn-crumb .yn-crumb-cur { color: #d20202; }
.yn-cols { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 30px; }
.yn-list-main { width: 815px; min-height: 420px; padding: 20px 0; background: #fff; }
.yn-list-side { width: 330px; }
.yn-side-box { padding: 15px; background: #fff; margin-bottom: 15px; }
.yn-side-box .yn-side-hd { height: 40px; }
.yn-side-box .yn-side-hd h2 { font-size: 16px; }
.yn-side-nav dd { height: 50px; line-height: 50px; text-align: center; border-bottom: 1px dashed #ddd; }
.yn-side-nav dd a { display: block; font-size: 16px; letter-spacing: 2px; }
.yn-side-nav dd a:hover { background: #f1f2f3; color: #d20202; }
.yn-side-nav dd.on a { color: #d20202; font-weight: bold; }
.yn-side-news li { height: 30px; overflow: hidden; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; }
.yn-side-news a { color: #777; font-size: 13px; }
.yn-side-news a:hover { color: #F04B38; }

/* ---------- 12. 资讯列表 ---------- */
.yn-news-item { padding: 18px 0; border-bottom: 1px dashed #e5e5e5; overflow: hidden; }
.yn-news-item:last-child { border-bottom: 0; }
.yn-news-thumb { float: left; width: 200px; height: 137px; overflow: hidden; background: #f2f2f2; }
.yn-news-thumb img { width: 200px; height: 137px; object-fit: cover; }
.yn-news-body { float: right; width: 585px; }
.yn-news-body h3 { height: 32px; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 32px; white-space: nowrap; text-overflow: ellipsis; }
.yn-news-body h3 a { color: #333; }
.yn-news-body h3 a:hover { color: #F04B38; }
.yn-news-meta { margin: 6px 0 8px; color: #bbb; font-size: 12px; }
.yn-news-meta span { margin-right: 14px; }
.yn-news-desc { height: 44px; overflow: hidden; color: #888; font-size: 13px; line-height: 22px; }
.yn-news-more { display: inline-block; margin-top: 8px; padding: 0 12px; height: 24px; border: 1px solid #eee; color: #ff4f00; font-size: 12px; line-height: 22px; }
.yn-news-more:hover { border-color: #ff4f00; }

/* ---------- 13. 分页 ---------- */
.yn-pager { padding: 25px 0 10px; text-align: center; }
.yn-pager ul { display: inline-block; }
.yn-pager li { display: inline-block; margin: 0; }
.yn-pager a, .yn-pager span { display: inline-block; min-width: 30px; height: 30px; margin: 0 4px; padding: 0 10px; border: 1px solid #eee; color: #666; font-size: 13px; line-height: 28px; }
.yn-pager a:hover { border-color: #ff4f00; color: #ff4f00; }
.yn-pager .on { background: #f1f2f3; }

/* ---------- 14. 详情页 ---------- */
.yn-article { width: 815px; min-height: 420px; padding: 20px 0 30px; background: #fff; }
.yn-article-title { padding: 10px 0 16px; color: #222; font-size: 22px; font-weight: 600; line-height: 1.6; text-align: center; }
.yn-article-meta { padding-bottom: 14px; border-bottom: 1px dashed #ddd; color: #999; font-size: 12px; text-align: center; }
.yn-article-meta span { margin: 0 8px; }
.yn-article-body { padding: 20px 7px 10px; color: #333; font-size: 14px; line-height: 2; }
.yn-article-body p { margin-bottom: 10px; }
.yn-article-body img { max-width: 100%; height: auto; padding: 3px; border: 1px solid #e0e0e0; background: #fff; }
.yn-article-body a { color: #2975B3; }
.yn-article-body a:hover { text-decoration: underline; }
.yn-art-nav { margin-top: 24px; padding: 10px 7px; border-top: 1px dashed #ededed; border-bottom: 1px dashed #ddd; }
.yn-art-nav p { height: 28px; overflow: hidden; font-size: 14px; line-height: 28px; white-space: nowrap; text-overflow: ellipsis; }
.yn-art-nav a { color: #2975B3; }
.yn-art-nav a:hover { text-decoration: underline; }

/* ---------- 15. 案例列表 ---------- */
.yn-case-grid { display: flex; flex-wrap: wrap; padding: 10px 0 20px; }
.yn-case-cell { width: 260px; margin: 0 12px 20px 0; text-align: center; }
.yn-case-cell:nth-child(3n) { margin-right: 0; }
.yn-case-cell a { display: block; border: 6px solid #f1f2f3; }
.yn-case-cell a:hover { border-color: #d1d2d3; }
.yn-case-cell img { display: block; width: 248px; height: 175px; object-fit: cover; }
.yn-case-cell p { height: 40px; overflow: hidden; color: #333; font-size: 13px; line-height: 40px; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- 16. 页脚：流程条 / 信息 / 版权 ---------- */
.yn-foot { margin-top: 20px; padding-top: 20px; border-top: 2px solid #F04B38; background: #fff; }
.yn-foot-steps { width: 1200px; margin: 0 auto; display: flex; align-items: center; overflow: hidden; }
.yn-step-list { display: flex; align-items: center; flex: 1 1 auto; }
.yn-step { display: flex; align-items: center; height: 40px; padding-right: 38px; margin-right: 38px; border-right: 1px solid #ccd0d9; }
.yn-step:last-child { border-right: 0; }
.yn-step b { width: 30px; color: #333; font-family: Arial, sans-serif; font-size: 42px; font-weight: normal; line-height: 40px; }
.yn-step span { color: #333; font-size: 14px; line-height: 18px; }
.yn-step-label { border-right: 0; padding-right: 20px; margin-right: 20px; }
.yn-step-label em { color: #333; font-size: 18px; }
.yn-foot-main { width: 1200px; margin: 17px auto 0; padding-top: 0; border-top: 1px solid #e1e1e1; display: flex; }
.yn-foot-brand { width: 181px; height: 140px; margin-top: 75px; background: url(../images/topandfooter2015.v1_1.png) no-repeat 0 -140px; }
.yn-foot-about { width: 480px; padding: 65px 0 0 40px; }
.yn-foot-about p { color: #333; font-size: 14px; line-height: 24px; letter-spacing: .5px; }
.yn-foot-about .yn-qq { display: inline-block; width: 112px; height: 36px; margin: 15px 23px 0 5px; vertical-align: -6px; background: url(../images/topandfooter2015.v1_1.png) no-repeat -42px 0; }
.yn-foot-links { width: 228px; margin-top: 64px; padding-left: 57px; border-left: 1px solid #aaa; border-right: 1px solid #aaa; }
.yn-foot-links dt { padding-bottom: 25px; font-size: 18px; line-height: 18px; }
.yn-foot-links dd { float: left; width: 110px; line-height: 28px; }
.yn-foot-safe { margin-top: 64px; padding-left: 57px; }
.yn-foot-safe dt { padding-bottom: 25px; font-size: 18px; line-height: 18px; }
.yn-foot-safe dd { width: 142px; height: 47px; margin-bottom: 10px; }
.yn-foot-safe .yn-aqlm { background: url(../images/topandfooter2015.v1_1.png) no-repeat -42px -40px; }
.yn-foot-safe .yn-sjs { background: url(../images/topandfooter2015.v1_1.png) no-repeat -42px -89px; }
.yn-copy { margin-top: 10px; height: 82px; background: #565656; color: #aaa; font-size: 12px; }
.yn-copy-in { width: 1200px; margin: 0 auto; padding-top: 16px; }
.yn-copy-links { color: #aaa; line-height: 24px; }
.yn-copy-links a { margin-right: 10px; color: #aaa; }
.yn-copy-links a:hover { color: #fff; }
.yn-copy-info { line-height: 24px; color: #aaa; }
.yn-copy-info a { color: #aaa; }

/* ---------- 移动端顶部按钮（PC 隐藏，≤768 显示） ---------- */
.yn-mbtns { display: none; }
.yn-mpanel { display: none; }

/* ---------- 右侧浮动客服（PC） ---------- */
.yn-float { position: fixed; right: 12px; bottom: 90px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.yn-float-item { position: relative; width: 48px; height: 48px; border-radius: 10px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.yn-float-ico { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; }
.yn-ico-wx { background: #09bb07; }
.yn-ico-tel { background: #f39c12; }
.yn-ico-top { background: #f2f2f2; }
.yn-ico-bottom { background: #f2f2f2; }
.yn-float-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
.yn-float-pop { display: none; position: absolute; right: 58px; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, .22); padding: 10px; text-align: center; white-space: nowrap; width: max-content; }
.yn-float-pop::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.yn-float-pop img { display: block; width: 150px; height: 150px; border-radius: 8px; background: #fff; }
.yn-float-pop p { margin: 8px 0 2px; font-size: 14px; color: #333; line-height: 1.6; white-space: nowrap; }
.yn-float-pop-tel { padding: 14px 20px; text-align: left; }
.yn-float-pop-tel p { margin: 0; }
.yn-float-pop-tel .yn-pop-label { font-size: 13px; color: #999; }
.yn-float-pop-tel .yn-pop-num { display: block; margin-top: 4px; font-size: 22px; font-weight: bold; color: #F96105; letter-spacing: .5px; }
.yn-float-wx:hover .yn-float-pop, .yn-float-tel:hover .yn-float-pop { display: block; }
.yn-float-top { display: flex; }