/* ==========================================================
   contact-us.css — /contact-us/ 就医指引页（含五国语言版）
   2026-10-26：从 index_article_jyzy.html 的内联 <style> 抽出，
               成为唯一来源，禁止再写回内联。
   适用模板：
     index_article_jyzy.html                        （英文 /contact-us/）
     russian/Russian_jyzy.html                      （/russian/address/）
     portuguese/Portuguese_jyzy.html                （/portuguese/address/）
     japanese/Japanese_jyzy.html                    （/japanese/address/）
     korean/Korean_jyzy.html                        （/korean/address/）
     arabic/Arabic_jyzy.html                        （/arabic/address/）
   命名空间：jc-（避免与 base.css 的裸标签选择器冲突）
   结构：① hero 主标题 ② 联系方式 + 地图 ③ 表单 ④ 8 家分院
   改动提示：这里改一次，六个页面同时生效。
   加载顺序：本文件必须放在 intlTelInput.min.css 之后（见各模板 head）。
   ========================================================== */

/* ==========================================================
   Contact Us 页面（/contact-us/）
   样式全部内联、统一 jc- 命名空间，不依赖旧版 jyzy 样式表
   ========================================================== */
.jc-main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic", "Malgun Gothic",
                     "Noto Sans Arabic", Arial, sans-serif;
    color: #1a1a1a;
    background: #fff;
}

/* ---------- ① 页面主标题 ---------- */
.jc-hero {
    padding: 46px 20px 30px;
}
.jc-title {
    max-width: 900px;
    margin: 0 auto;
    font-size: 36px;
    line-height: 1.42;
    font-weight: 600;
    text-align: center;
    color: #1a1a1a;
    letter-spacing: 0.2px;
}
.jc-title u {
    text-decoration: underline;
    text-decoration-color: #169BFF;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}
.jc-br {
    display: inline;
}

/* ---------- ② 联系方式 + 地图 ---------- */
.jc-info {
    padding: 10px 20px 54px;
}
.jc-info-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center; /* 内容整体居中，左右留出对称空白 */
    gap: 60px;
}
.jc-info-left {
    flex: 0 0 420px;  /* 固定列宽：占容器约 35.6%，与设计稿 35.8% 一致 */
    min-width: 0;
}
.jc-info-right {
    flex: 0 0 540px;  /* 地图固定 540px：占容器约 45.8%，与设计稿 45.5% 一致 */
    min-width: 0;
}

.jc-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.jc-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
.jc-list li:last-child {
    margin-bottom: 0;
}
.jc-list .jc-ico {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: block;
}
.jc-list h3 {
    margin: 1px 0 5px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}
.jc-list p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #5d6b78;
    word-break: break-word;
}
.jc-list a {
    color: #5d6b78;
    text-decoration: none;
}
.jc-list a:hover {
    color: #169BFF;
}

.jc-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---------- 按钮 ---------- */
.jc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
    box-sizing: border-box;
}
.jc-btn-outline {
    border: 1.5px solid #169BFF;
    background: #fff;
    color: #169BFF;
}
.jc-btn-outline:hover {
    background: #169BFF;
    color: #fff;
}
.jc-btn-fill {
    border: 1.5px solid #00A8F3;
    background: #00A8F3;
    color: #fff;
}
.jc-btn-fill:hover {
    background: #0090d2;
    border-color: #0090d2;
}

/* ---------- ③ 表单 ---------- */
.jc-form-sec {
    padding: 6px 20px 62px;
}
.jc-h2 {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 600;
    text-align: center;
    color: #1a1a1a;
    letter-spacing: 2.5px;
}
.jc-h2 span {
    color: #169BFF;
}
.jc-sub {
    margin: 0 0 34px;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: #8a8f95;
}
.jc-form {
    max-width: 820px;
    margin: 0 auto;
}
.jc-row {
    display: flex;
    gap: 34px;
    margin-bottom: 16px;
}
.jc-fg {
    flex: 1 1 0;
    min-width: 0;
}
.jc-fg label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    color: #333;
}
.jc-fg input,
.jc-fg select,
.jc-fg textarea {
    width: 100%;
    box-sizing: border-box;
    /* 统一块级：inline-block 会让控件在行盒里下沉一个基线间隙（约 7px），
       与 WhatsApp 组件（块级）并排时两列就对不齐 */
    display: block;
    border: 1px solid #d3e2ef;
    border-radius: 5px;
    background: #fff;
    padding: 11px 14px;
    font-size: 15px;
    color: #1a1a1a;
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.jc-fg select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.jc-fg input:focus,
.jc-fg select:focus,
.jc-fg textarea:focus {
    border-color: #169BFF;
    box-shadow: 0 0 0 3px rgba(22, 155, 255, .1);
}
.jc-fg textarea {
    height: 98px;
    resize: vertical;
    line-height: 1.55;
}
.jc-fg textarea::placeholder {
    color: #b6bec7;
}

/* WhatsApp：国旗国家/地区选择（intl-tel-input v25）
   小屏走全屏弹层时下拉会被移到 <body> 下，故变量与旗帜尺寸必须写在
   根元素 / .iti__flag 这一层，不能只挂在 .jc-phone 上。
   注意：库自己的样式表也在 :root 里声明了同名变量（含旗帜图片路径），
   这里用 html:root 提一级权重，避免依赖文件先后顺序。 */
html:root {
    --iti-border-color: #d3e2ef;
    --iti-hover-color: #eef7ff;
    --iti-dialcode-color: #1a1a1a;
    --iti-dropdown-bg: #ffffff;
    --iti-arrow-color: #64748b;
    --iti-path-flags-1x: url("/skin/libs/intl-tel-input/flags.webp");
    --iti-path-flags-2x: url("/skin/libs/intl-tel-input/flags@2x.webp");
    --iti-path-globe-1x: url("/skin/libs/intl-tel-input/globe.webp");
    --iti-path-globe-2x: url("/skin/libs/intl-tel-input/globe@2x.webp");
}
/* 内联模式下让组件撑满表单列宽。
   注意：库的 .iti 与内部 input 默认都是 inline-block，容器会多出约 7px
   基线间隙（实测组件高 51px，而同排原生 select 为 44px），旗帜与号码
   因此相对左侧控件整体偏上 7px。两者都改块级后高度自然相等。 */
.jc-phone .iti {
    display: block;
    width: 100%;
}
.jc-phone .iti__tel-input {
    display: block;
}
.iti .iti__selected-dial-code {
    font-size: 15px;
    color: #1a1a1a;
}
/* 旗帜放大到 20×15：雪碧图原为 16×12，整体 ×1.25，偏移量同步缩放 */
.iti .iti__flag {
    width: 20px;
    height: 15px;
    background-size: calc(var(--iti-flag-sprite-width) * 1.25) calc(var(--iti-flag-sprite-height) * 1.25);
    background-position: calc(var(--iti-flag-offset) * 1.25) 0;
}
/* 下拉面板（内联与全屏通用） */
.iti .iti__dropdown-content {
    width: 100%;
    min-width: 300px;
    font-size: 15px;
}
.iti .iti__country-list {
    max-height: 300px;
}
.iti .iti__country {
    padding: 9px 12px;
    cursor: pointer;
}
.iti .iti__country-name {
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iti .iti__dial-code {
    color: #8a8f95;
    margin-left: auto;
    padding-left: 10px;
}
/* 全屏国家选择器（小屏）：库默认 justify-content: flex-start + 30px 内边距，
   弹层贴顶会压住页头菜单。改为垂直居中，并放宽高度让 244 项一屏看得更多。
   注意：这三条不放进媒体查询 —— .iti--fullscreen-popup 这个类本身只在
   全屏模式下出现，带上它就是精确命中，不必再赌库的触发宽度。 */
.iti--fullscreen-popup.iti--container {
    justify-content: center;
    padding: 16px 14px;
}
.iti--fullscreen-popup.iti--container .iti__dropdown-content {
    max-height: 76vh;
    border-radius: 14px;
    overflow: hidden;
}
.iti--fullscreen-popup.iti--container .iti__country-list {
    max-height: none;
    flex: 1 1 auto;
}
/* 搜索框：需压过 .jc-fg input 的通用输入样式（内联模式在 .jc-fg 内，
   全屏模式在 body 下的 .iti--container 内，两处都要覆盖） */
.jc-phone .iti__search-input,
.iti--container .iti__search-input {
    border: 0;
    border-bottom: 1px solid #eaf0f6;
    border-radius: 0;
    padding: 10px 12px;
    font-size: 15px;
    box-shadow: none;
}
/* 打开下拉时搜索框会被自动聚焦：去掉 Chrome 默认黑框，改品牌蓝焦点框 */
.jc-phone .iti__search-input:focus,
.iti--container .iti__search-input:focus {
    outline: 2px solid rgba(22, 155, 255, .5);
    outline-offset: -2px;
    background: #f8fcff;
}
.jc-hint {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9aa5b1;
}

.jc-btns {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.jc-btns .jc-btn {
    width: 240px;
    max-width: 100%;
}

/* ---------- ④ 八家分院 ---------- */
.jc-branch {
    background: #f7f8f9 url(/skin/images/jyzy/local-bg.webp) no-repeat center top;
    background-size: 100% auto;
    padding: 54px 20px 68px;
}
.jc-branch-inner {
    max-width: 1240px;
    margin: 0 auto;
}
.jc-branch h2 {
    margin: 0 0 12px;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: #1F2223;
    letter-spacing: 0.2px;
}
.jc-branch-sub {
    margin: 0 0 8px;
    text-align: center;
    font-size: 15px;
    line-height: 1.65;
    color: #717171;
}
.jc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 22px;
    margin-top: 100px;
}
.jc-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.jc-card h3 {
    margin: 14px 0 6px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #2E414D;
}
.jc-card p {
    margin: 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.6;
    color: #5b6b76;
    word-break: break-word;
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 1100px) {
    .jc-info-inner {
        gap: 5%;
    }
    .jc-info-left {
        flex: 0 1 33%;
    }
    .jc-info-right {
        flex: 0 1 40%;
    }
    .jc-title {
        font-size: 30px;
    }
    .jc-grid {
        gap: 32px 18px;
    }
}

@media screen and (max-width: 768px) {
    /* 移动端：地图在上，联系方式在下 */
    .jc-info-inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 28px;
    }
    .jc-info-left {
        flex: none;
        width: 100%;
    }
    .jc-info-right {
        flex: none;
        width: 100%;
    }
    .jc-hero {
        padding: 32px 18px 22px;
    }
    .jc-title {
        max-width: 620px;
        font-size: 22px;
        line-height: 1.5;
    }
    .jc-br {
        display: none;
    }
    .jc-title u {
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }
    .jc-info {
        padding: 4px 18px 40px;
    }
    .jc-list h3 {
        font-size: 17px;
    }
    .jc-list p {
        font-size: 14px;
    }
    .jc-list .jc-ico {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }
    .jc-h2 {
        font-size: 28px;
        letter-spacing: 1.5px;
    }
    .jc-sub {
        font-size: 14px;
        margin-bottom: 26px;
    }
    .jc-form-sec {
        padding: 6px 18px 46px;
    }
    .jc-row {
        gap: 20px;
    }
    .jc-branch {
        padding: 40px 16px 50px;
        background-size: auto 260px;
        background-position: center 32px;
    }
    .jc-branch h2 {
        font-size: 23px;
    }
    .jc-branch-sub {
        font-size: 13.5px;
    }
    .jc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 14px;
        margin-top: 32px;
    }
    .jc-card h3 {
        font-size: 15px;
        margin: 10px 0 5px;
    }
    .jc-card p {
        font-size: 12.5px;
        line-height: 1.5;
    }
}

@media screen and (max-width: 425px) {
    .jc-title {
        max-width: 320px;
        font-size: 20px;
    }
    .jc-h2 {
        font-size: 25px;
    }
    .jc-row {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 14px;
    }
    .jc-fg textarea {
        height: 92px;
    }
    .jc-btns {
        margin-top: 24px;
    }
    .jc-btns .jc-btn {
        width: 100%;
    }
    .jc-btn-outline.jc-btn-schedule {
        width: 100%;
    }
    .jc-branch h2 {
        font-size: 21px;
    }
    /* 小屏：世界地图装饰整体下移到副标题下方，避免文字被 pin 压住 */
    .jc-branch {
        background-position: center 86px;
    }
    .jc-grid {
        margin-top: 96px;
    }
}

/* 语义化：页脚「营业时间」由 h5 升 h2，补回原 h5 的浏览器默认外边距 */
.foot_contect_wrap .oncall h2 {
    margin: 1.67em 0;
}