/* ======================== */
/* 0. 根变量和通用样式 */
/* ======================== */
:root {
    --color-primary: #CABF91;
    --color-dark: #262626;
    --color-white: #FFFFFF;
    --color-gray-text: #7B7B7B;
    --color-light-gray-bg: #EFEFEF;
    --container-width: 1120px;
    --header-height: 50px;
    --main-text-color: #000000;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: var(--main-text-color);
    background-color: var(--color-white);
    min-width: 320px; /* 保证移动端兼容性 */
}

/* 容器居中和内边距 */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px; /* 侧边内边距 */
    box-sizing: border-box;
}

.section-spacing {
    padding: 80px 0;
}

/* 按钮样式 */
.btn-dark {
    display: inline-block;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    width: 218px; /* Figma 宽度 */
    height: 48px; /* Figma 高度 */
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.btn-dark:hover {
    background-color: #4a4a4a;
}

/* 字体通用样式 */
.main-title-lg {
    font-weight: 500;
    font-size: 48px;
    line-height: 1.16;
}
.sub-title-lg {
    font-weight: 500;
    font-size: 48px;
    line-height: 1.16;
}


/* ======================== */
/* 1. Header 导航栏 (所有页面通用) */
/* ======================== */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    background: var(--color-white);
    border-bottom: 1px solid #f0f0f0;
    padding: 0 40px;
    box-sizing: border-box;
}

.logo-area {
    display: flex;
    align-items: center;
}

.logo-wrd {
    /* WRD 样式 */
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: #00A95A;
    margin-right: 5px;
}

.logo-text {
    /* トレード株式会社 样式 */
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: var(--main-text-color);
}

.nav-menu a {
    /* 导航链接 样式 */
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.14;
    color: var(--main-text-color);
    text-decoration: none;
    margin-left: 20px;
    padding-bottom: 5px;
    position: relative;
}

.nav-menu a.active {
    font-weight: 700; /* 当前页面可能高亮 */
}

/* 导航底部的小黑线 (矩形 17, 18, 19, 20, 21 隐藏后使用伪元素模拟) */
.nav-menu a:hover::after,
.nav-menu a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    background: var(--color-dark);
    border-radius: 50px;
    visibility: visible;
}

.nav-menu a.btn-contact {
    /* 联系按钮样式 */
    /* 在导航栏中通常不显示为按钮，仅做链接，这里保持链接样式 */
    font-weight: 400;
    padding: 0;
    line-height: 1;
    margin-left: 30px;
}

.menu-toggle {
    display: none; /* 默认隐藏，在移动端显示 */
}


/* ======================== */
/* 2. Footer 底部 (所有页面通用) */
/* ======================== */
.footer {
    background-color: var(--color-dark); /* 底部版权区域使用深色背景 */
    padding: 20px 0;
    text-align: center;
}

.footer-divider {
    /* 模仿 Figma 中的 Vector 1 样式，但通常放在 Contact 部分结束 */
    display: none; 
}

.contact-section + .footer {
    /* 如果 Contact Section 和 Footer 相连，则使用 Contact Section 中的分隔线 */
    background-color: var(--color-white); 
    padding: 0;
    margin-top: 50px; /* 调整版权区域上方间距 */
}

.contact-section + .footer .footer-divider {
    display: block;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    border-top: 1px solid #D2D2D2;
}

.copyright {
    /* Copyright © 2025 WRD Co., Ltd. All Rights Reserved. 样式 */
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.14;
    text-align: center;
    color: #868686;
    margin: 30px 0;
}


/* ======================== */
/* 3. 通用 Banner 样式 (ABOUT, TOP, Real Estate) */
/* ======================== */
.about-banner, 
.real-estate-banner,
.top-banner {
    /* Group 12 / Group 10 样式 */
    background: var(--color-primary); /* #CABF91 */
    padding: 60px 0;
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.banner-title-en {
    /* ABOUT / TOP / Real Estate 样式 */
    font-weight: 700;
    font-size: 48px;
    line-height: 1.16;
    color: var(--color-white);
    margin-bottom: 0;
}

.banner-link {
    /* 企業情報を見る / 不動産事業 / トップ 样式 */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.18;
    color: var(--color-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.arrow-right {
    /* 模仿 Figma 中的 Vector 箭头 */
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--color-white);
}


/* ======================== */
/* 4. 通用 Contact 样式 */
/* ======================== */
.contact-section {
    padding: 100px 40px;
    text-align: center;
}

.contact-title-en {
    /* CONTACT 样式 */
    font-weight: 700;
    font-size: 40px;
    line-height: 1.17;
    color: var(--color-dark);
    margin-bottom: 20px;
}

.contact-description {
    /* クリエイターの採用や... 样式 */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5; /* 24px / 16px */
    color: var(--color-gray-text);
    max-width: 430px;
    margin: 0 auto 30px auto;
}


/* ======================== */
/* 5. 首页特定样式 (index.html) */
/* ======================== */

/* Hero 部分 */
.hero-section {
    position: relative;
    text-align: center;
    padding-top: 0;
}

.hero-image-overlay {
    background-image: url('./assets/images/hero-bg.jpg'); /* 替换为您的图片路径 */
    background-size: cover;
    background-position: center;
    height: 480px; /* 根据设计图估算或调整 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.hero-title {
    /* 当社はクリエイティブが... 样式 */
    font-weight: 400;
    font-size: 24px;
    line-height: 1.6;
    color: var(--color-white);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 800px;
}

.hero-sub-text {
    /* 【採用情報のお知らせ】... 样式 */
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-gray-text);
    margin: 20px 0;
}

/* Business 部分 */
.business-title-en {
    /* Business 样式 */
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    color: var(--color-dark);
    margin-bottom: 5px;
}

.business-title-ja {
    /* 事業内容 样式 */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-gray-text);
    margin-top: 0;
    margin-bottom: 50px;
}

.business-card {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

/* 首页 - 开发业务图片区域样式 */
.business-dev .card-image-wrapper {
    /* 启用 Flex 布局，使其子元素（图片）并排显示 */
    display: flex;
    
    /* 确保图片能够填满容器，并在图片之间均匀分配空间 */
    justify-content: space-between; 
    
    /* 允许换行，虽然通常在桌面上不会换行 */
    flex-wrap: wrap; 
    
    /* 可选：增加图片之间的间距 */
    gap: 5px; 
    
    /* 可选：限制整个图片容器的最大宽度，居中 */
    max-width: 450px; 
    margin: 0 auto; 
}

/* 并列显示的单个图片样式 */
.dev-preview-image {
    /* 设置每个图片宽度略小于 33.33% 以适应 gap 间距 */
    width: calc(33.33% - 5px); 
    height: auto;
    object-fit: cover; /* 确保图片覆盖空间 */
    border-radius: 8px; /* 可选：增加圆角效果 */
}

/* 国际贸易卡片布局：图片在左，文字在右 */
.business-trade {
    display: flex; /* 启用 Flexbox */
    align-items: center; /* 垂直居中对齐 */
    gap: 50px; /* 图片和文字之间的间距 */
    /* 添加其他边距和样式 */
}

/* 图片容器的样式 */
.business-trade .card-image-wrapper {
    position: relative; /* 用于定位 .wrd-box */
    flex-basis: 45%; /* 图片占据左侧大约 45% 的空间 */
    /* 确保图片自适应容器 */
    overflow: hidden; 
    border-radius: 12px;
}

/* 红色 WRD 盒子样式 */
.business-trade .wrd-box {
    position: absolute;
    top: 50%; /* 根据设计图调整位置 */
    left: 50px; /* 根据设计图调整位置 */
    transform: translateY(-50%);
    /* 根据设计图设置 WRD 的样式 */
    background-color: #FF5858;
    color: white;
    font-size: 40px;
    padding: 10px 20px;
    /* ...其他字体样式 */
}

/* 文字容器的样式 */
.business-trade .card-text {
    flex-basis: 55%; /* 文字占据右侧大约 55% 的空间 */
}

.wrd-box {
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    font-size: 80px;
    color: var(--color-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-title-en {
    /* Product Vision / International 样式 */
    font-weight: 500;
    font-size: 26px;
    line-height: 1.77;
    margin-bottom: 5px;
}

.card-title-ja {
    /* 受託開発事業 / 国際貿易 样式 */
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    margin-top: 0;
}

.card-description {
    /* 描述文字 样式 */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray-text);
    max-width: 480px;
}

.card-link {
    /* 詳細を見る 样式 */
    font-weight: 700;
    font-size: 16px;
    color: var(--color-dark);
    text-decoration: none;
    margin-top: 20px;
    display: block;
}

/* WRD for BUSINESS 区域：实现页面居中和白色卡片样式 */
.business-wrd-for-business {
    /* **1. 居中设置（关键修正）** */
    max-width: 1120px; /* 根据设计图确定最大宽度 */
    margin: 80px auto;  /* 上下留白，左右自动居中 */
    
    /* **2. 左右 Flexbox 布局** */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 40px; /* 图片和文字的间距 */

    /* **3. 卡片外观** */
    background-color: #FFFFFF; /* 确保背景是白色 */
    border: 1px solid #ADADAD; /* 根据设计图调整边框颜色 */
    border-radius: 16px; /* 添加圆角 */
    padding: 60px; /* 内部留白，比 40px 更宽敞 */
}

/* 图片容器 (左侧) - 删除重复且错误的固定尺寸 */
.business-wrd-for-business .wrd-for-business-image {
    flex-basis: 45%; /* 占据 45% 宽度 */
    flex-shrink: 0; 
}

/* 文字容器 (右侧) */
.business-wrd-for-business .wrd-for-business-text {
    flex-basis: 55%; /* 占据 55% 宽度 */
}

/* 标题样式 */
.wrd-for-business-title {
    /* 修正：确保 for 有不同的样式，可能需要 span 标签配合 */
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 10px;
}

/* 描述文本样式 */
.wrd-for-business-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    /* color: var(--color-gray-text); */ /* 使用您的变量 */
    margin-bottom: 20px;
    /* max-width: 400px; */ /* 在 flex-basis 下可以省略 */
}

/* 按钮的调整 */
.business-wrd-for-business .btn-dark {
    margin-top: 20px;
    display: inline-block; 
}

/* ======================== */
/* 6. 开发业务特定样式 (dev_business.html) */
/* ======================== */

.dev-hero-title {
    padding-top: 100px;
    padding-bottom: 80px;
}

.dev-intro-area {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
}

.dev-description {
    /* 描述文字 */
    font-weight: 400;
    font-size: 16px;
    line-height: 2; /* 200% */
    flex: 1;
}

.dev-image-wrapper {
    /* 图片 */
    width: 560px;
    height: 315px;
    background-color: #f0f0f0; /* 占位 */
    flex-shrink: 0;
}

/* 特点行 */
.dev-feature-section {
    padding: 60px 0 100px 0;
}

.dev-feature-section .feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.dev-feature-section .feature-image-wrapper {
    width: 500px;
    height: 280px;
    flex-shrink: 0;
    background-color: #e5e5e5; /* 占位 */
}

.dev-feature-section .feature-text {
    flex: 1;
}

.dev-feature-section .feature-title-ja {
    font-weight: 500;
    font-size: 26px;
    line-height: 1.77;
    margin-bottom: 10px;
}

.dev-feature-section .feature-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: var(--color-gray-text);
}

/* 特点二: 文本在左，图片在右 */
.feature-hiring {
    flex-direction: row-reverse;
}

.feature-hiring .feature-image-wrapper {
    margin-left: 0;
}

/* 技能区域 */
.dev-skills-section {
    padding: 40px 0 100px 0;
    text-align: center;
}

.skills-title {
    /* 対応スキル・職域 样式 */
    font-weight: 500;
    font-size: 26px;
    margin-bottom: 5px;
}

.skills-subtitle {
    /* 必要でよく使われるテクノロジー 样式 */
    font-weight: 400;
    font-size: 16px;
    color: var(--color-gray-text);
    margin-top: 0;
    margin-bottom: 40px;
}

/* 技能网格容器：调整为简单居中 */
.skills-grid {
    text-align: center; /* 确保图片居中 */
    padding: 20px 0;
}

/* 新增：合并后的技能图片样式 */
.skills-merged-image {
    /* 假设合并图是宽图，设置最大宽度并保持居中 */
    max-width: 800px; /* 根据您的实际图片尺寸调整此值 */
    width: 100%; /* 确保在小屏上可以收缩 */
    height: auto;
    display: block; /* 使图片块状化，便于居中 */
    margin: 0 auto;
}


/* ======================== */
/* 7. 国际贸易特定样式 (trade.html) */
/* ======================== */

.trade-hero-title {
    padding-top: 100px;
    padding-bottom: 80px;
}

.trade-hero-description {
    /* 輸出・輸入だけでなく... 样式 */
    font-weight: 400;
    font-size: 18px;
    line-height: 2.22; /* 222% */
    margin-top: 30px;
    max-width: 900px; 
}

/* 功能行 (Feature Rows) */
.trade-feature-section {
    padding: 60px 0 100px 0;
}

.trade-feature-section .feature-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 100px;
}

.trade-feature-section .feature-text {
    flex: 1;
}

.trade-feature-section .feature-image-wrapper {
    flex: 0 0 560px; /* 固定图片宽度 */
    max-width: 560px;
    overflow: hidden;
}

.trade-feature-section .feature-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 功能一 (分析报表): 图片在左，文字在右 (默认) */
.feature-analytics {
    flex-direction: row;
}

/* 功能二 (定制): 图片在右，文字在左 */
.feature-customization {
    flex-direction: row-reverse;
}

.feature-customization .feature-text {
    max-width: 440px; 
    margin-left: 20px; 
}

.trade-feature-section .feature-title-ja {
    /* 充実した分析帳票で... 样式 */
    font-weight: 500;
    font-size: 26px;
    line-height: 1.77; 
    margin-bottom: 20px;
}

.trade-feature-section .feature-description {
    /* 描述文字 样式 */
    font-weight: 400;
    font-size: 20px;
    line-height: 2; /* 200% */
}

.trade-about-banner {
    margin-top: 0;
}


/* ======================== */
/* 8. 招聘信息特定样式 (recruit.html) */
/* ======================== */

.recruit-hero-title {
    padding-top: 100px;
    padding-bottom: 80px;
    text-align: center;
}

.recruit-hero-title .sub-title-md {
    /* 採用情報 样式 */
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 40px;
}

.recruit-intro-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recruit-image-wrapper {
    max-width: 700px; 
    margin-bottom: 50px;
    background-color: #f0f0f0; /* 占位 */
    height: 481px;
}

.recruit-hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.recruit-description {
    /* 当社の組織体制強化にあたり... 样式 */
    font-weight: 400;
    font-size: 18px;
    line-height: 2.22; /* 222% */
    max-width: 773px;
    margin: 0 auto;
}

/* 职位列表 */
.recruit-jobs-section {
    padding-top: 60px;
}

.jobs-bg {
    /* 对应 Rectangle 25 */
    background: var(--color-light-gray-bg);
    padding: 60px 0 100px 0;
}

.job-list-content {
    max-width: 1120px;
    margin: 0 auto;
}

.jobs-title-ja {
    /* 募集職種 样式 */
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    text-align: center;
    margin-bottom: 40px;
}

.job-category-block {
    margin-top: 40px;
}

.category-header {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--color-white);
    height: 70px; 
    margin-bottom: 1px;
}

.category-line {
    /* 对应 Rectangle 30 */
    width: 6px;
    height: 70px;
    background: var(--color-primary); 
    flex-shrink: 0;
}

.category-title {
    /* 中途採用 样式 */
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    padding-left: 70px; 
}

.job-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.job-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    height: 65px;
    padding: 0 45px 0 120px;
    margin-bottom: 1px;
    border-top: 1px solid #D1D1D1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.job-item:hover {
    background-color: #f7f7f7;
}

.job-title {
    /* IT開発部／Javaエンジニア 等 样式 */
    font-weight: 500;
    font-size: 16px;
}

.job-link-arrow {
    /* 模仿 Figma 中 Vector 旋转后的箭头 */
    width: 8px;
    height: 8px;
    border-right: 2px solid #D1D1D1;
    border-bottom: 2px solid #D1D1D1;
    transform: rotate(-45deg); 
}

.recruit-footer {
    margin-top: 0; /* 没有 Contact 区域，调整底部留白 */
}


/* ======================== */
/* 9. 公司资料特定样式 (about.html) */
/* ======================== */

.about-hero {
    padding-top: 100px;
    padding-bottom: 80px;
    text-align: center;
}

.brand-logo-xl {
    /* WRD 样式 */
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    font-size: 96px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--main-text-color);
    margin-bottom: 0;
}

.brand-mission {
    /* Creative, Develop, Assist, Sales... 样式 */
    font-weight: 400;
    font-size: 18px;
    line-height: 2.22; /* 222% */
    color: #899093;
    margin-top: 10px;
    margin-bottom: 80px;
}

.contact-info-block {
    margin-top: 50px;
}

.contact-prompt {
    /* お問い合わせは下記よりお願いいたします。 样式 */
    font-weight: 400;
    font-size: 18px;
    line-height: 2.22; /* 222% */
    color: var(--main-text-color);
    margin-bottom: 5px;
}

.contact-mail {
    /* MAIL: wrdtrade@outlook.com 样式 */
    font-weight: 400;
    font-size: 18px;
    line-height: 2.22; /* 222% */
    color: #899093;
    margin-top: 5px;
}

/* TOP Banner */
.top-banner {
    background: var(--color-primary); 
    padding: 60px 0;
}

/* CONTACT 区域 */
.about-contact-section {
    padding-top: 50px;
    padding-bottom: 60px;
    text-align: center;
}

.about-footer {
    margin-top: 0;
}


/* ========================================================= */
/* 🌐 移动端适配 (Media Queries) */
/* ========================================================= */
@media (max-width: 1024px) {
    .business-card {
        flex-direction: column;
        align-items: center;
    }
    .business-dev .card-image-wrapper {
        margin: 20px 0;
    }
    .business-trade {
        flex-direction: column;
    }
    .business-trade .card-image-wrd {
        margin: 20px 0;
    }
    .business-wrd-for-business {
        flex-direction: column;
        text-align: center;
    }
    .wrd-for-business-image {
        margin: 0 0 20px 0;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    .header {
        padding: 0 20px;
    }
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        right: 0;
        background: var(--color-white);
        width: 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        text-align: center;
    }
    .nav-menu a {
        margin: 5px 0;
    }
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
    }

    /* 首页 */
    .hero-title {
        font-size: 18px;
    }
    .business-title-en {
        font-size: 24px;
    }
    .business-card .card-text {
        text-align: center;
    }
    .business-dev .card-image-wrapper {
        /* 在小屏幕上，也可以让它们并排显示，但可能需要调整宽度 */
        max-width: 100%;
        gap: 2px;
    }
    .dev-preview-image {
        width: calc(33.33% - 2px); 
        /* 如果希望在移动端竖排显示，可以修改为：
           width: 100%; 
           margin-bottom: 10px;
        */
    }
    .business-trade .card-image-wrd {
        width: 100%;
        height: auto;
    }

    /* 开发业务 */
    .dev-hero-title .main-title-lg, .dev-hero-title .sub-title-lg {
        font-size: 28px;
    }
    .dev-intro-area {
        flex-direction: column;
    }
    .dev-feature-section .feature-row {
        flex-direction: column;
        gap: 30px;
    }
    .dev-feature-section .feature-image-wrapper {
        width: 100%;
        height: 200px;
    }
    .feature-hiring {
        flex-direction: column;
    }
    .dev-feature-section .feature-title-ja {
        font-size: 20px;
    }

    /* 国际贸易 */
    .trade-hero-title .main-title-lg, .trade-hero-title .sub-title-lg {
        font-size: 28px;
    }
    .trade-feature-section .feature-row {
        flex-direction: column; 
    }
    .trade-feature-section .feature-image-wrapper {
        flex: auto;
        max-width: 100%;
    }
    .feature-customization .feature-text {
        margin-left: 0;
    }
    .trade-feature-section .feature-description {
        font-size: 16px;
    }

    /* 招聘信息 */
    .recruit-hero-title .main-title-lg {
        font-size: 36px;
    }
    .recruit-image-wrapper {
        height: auto;
    }
    .jobs-title-ja, .category-title {
        font-size: 20px;
    }
    .category-title {
        padding-left: 20px;
    }
    .job-item {
        padding: 0 20px;
    }

    /* 公司资料 */
    .brand-logo-xl {
        font-size: 64px;
    }
    .contact-prompt, .contact-mail {
        font-size: 16px;
    }
    .top-banner .banner-title-en {
        font-size: 36px;
    }
}