/*
 * 官网响应式适配层
 * 桌面端继续沿用原有 1200px 设计稿；屏幕变窄时，本文件在页面内联样式之后加载，
 * 统一覆盖固定宽高，避免每个 Thymeleaf 页面维护一套重复的手机样式。
 */

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.mobile-menu-toggle {
    display: none;
}

/* 移动标题仅用于窄屏重新组织 IPO/交易卡片，桌面端仍显示原有并排栏目标题。 */
.mobile-card-heading {
    display: none;
}

/* 合法的卡片内容容器同时服务桌面双列和手机单列，附件链接不会再破坏父级结构。 */
.ipo-card-body {
    display: flex;
    width: 100%;
}

/* 桌面端继续使用在线交易区原有背景图，独立截图只在手机端启用。 */
.online-visual {
    display: none;
}

@media (max-width: 1240px) {
    /* 平板及窄屏桌面先收缩公共内容区，不改变原有桌面信息密度。 */
    .head-center,
    .contactus-text,
    .footer-box,
    .comarea,
    .news-content,
    .page-skip-box,
    .solgan01,
    .ourservices-content,
    .report-content,
    .report-list,
    .ad,
    #zSlider,
    .research-txt,
    .article,
    .article-content,
    .bro-content,
    .bro-server-list,
    .notics,
    .file,
    .download,
    .news-warp,
    .tab,
    .content,
    .ipo,
    .deals,
    .news-page,
    .ipo-page,
    .deals-page,
    .search-box,
    .research-list,
    .page,
    .team-content,
    .team-warp,
    .trade-content,
    .mobile-content,
    .mobile-list,
    .online-box,
    .gts-content,
    .privacypolicy,
    .privacypolicy-content {
        width: calc(100% - 40px);
        max-width: 1200px;
    }

    .services .w1200 {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    .services .w1200 ul li {
        width: calc((100% - 32px) / 3);
        padding-right: 24px;
        padding-left: 24px;
    }

    .ipo-box,
    .deals-box {
        width: calc(50% - 10px);
    }
}

@media (max-width: 900px) {
    body.mobile-menu-open {
        overflow: hidden;
    }

    .head-top,
    .head-center {
        height: 64px;
    }

    .head-top {
        position: relative;
        z-index: 1000;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
    }

    .head-center {
        width: 100%;
        padding: 0 16px;
        align-items: center;
    }

    .logo {
        width: auto;
        height: 56px;
        object-fit: contain;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 1002;
        display: flex;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #333;
        transition: transform .2s ease, opacity .2s ease;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .menu-box {
        position: fixed;
        z-index: 1001;
        top: 64px;
        right: 0;
        bottom: 0;
        width: min(82vw, 340px);
        margin: 0;
        padding: 12px 0 88px;
        overflow-y: auto;
        text-align: left;
        background: #fff;
        box-shadow: -8px 12px 24px rgba(0, 0, 0, .16);
        transform: translateX(110%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
    }

    .menu-box.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .menu-box > a {
        display: block;
        height: auto;
    }

    .menu-li-content {
        display: flex;
        width: 100%;
        height: 52px;
        padding: 0 24px;
        font-size: 15px;
    }

    .head-language {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        padding: 16px 24px;
        border-top: 1px solid #eee;
    }

    .head-language > a {
        display: inline-block;
        height: auto;
    }

    .select-language {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 8px;
        box-shadow: none;
        border: 1px solid #eee;
    }

    /* 大图用 cover 保留视觉重点，内容块则改为自适应高度，避免手机端文字被裁切。 */
    .slider,
    .slider ul li img {
        height: 440px;
    }

    .slider ul li img {
        object-fit: cover;
    }

    .slider ul li .slider-txt {
        top: 18%;
        left: 24px;
        width: calc(100% - 48px);
    }

    .slider ul li .slider-txt .title {
        font-size: 32px;
    }

    .slider ul li .slider-txt .sub-title {
        width: 100%;
        padding-bottom: 36px;
        font-size: 18px;
    }

    .services {
        height: auto;
        padding: 24px 0;
    }

    .services .w1200 ul {
        position: static;
        gap: 16px;
    }

    .services .w1200 ul li {
        width: calc((100% - 32px) / 3);
        height: auto;
        min-height: 240px;
    }

    .page-skip,
    .page-skip-box {
        height: auto;
    }

    .page-skip-box {
        flex-wrap: wrap;
        padding: 16px 0;
    }

    .page-skip-list {
        width: 50%;
    }

    .footer-l {
        width: calc(100% - 210px);
    }

    .footer-r {
        width: 180px;
        margin-left: 30px;
    }

    .bro-server-content {
        height: auto;
        padding-bottom: 32px;
    }

    .b-s-l-c {
        width: calc(50% - 18px);
    }

    .article-l {
        width: calc(100% - 260px);
    }

    .article-r-pic {
        width: 240px;
    }

    .asset img,
    .investment img,
    .immigration img,
    .products img {
        max-width: 42vw;
        object-fit: contain;
    }

    .mobile-box {
        width: calc(50% - 10px);
    }
}

@media (max-width: 640px) {
    .head-center,
    .contactus-text,
    .footer-box,
    .comarea,
    .news-content,
    .page-skip-box,
    .solgan01,
    .ourservices-content,
    .report-content,
    .report-list,
    .ad,
    #zSlider,
    .research-txt,
    .article,
    .article-content,
    .bro-content,
    .bro-server-list,
    .notics,
    .file,
    .download,
    .news-warp,
    .tab,
    .content,
    .ipo,
    .deals,
    .news-page,
    .ipo-page,
    .deals-page,
    .search-box,
    .research-list,
    .page,
    .team-content,
    .team-warp,
    .trade-content,
    .mobile-content,
    .mobile-list,
    .online-box,
    .gts-content,
    .privacypolicy,
    .privacypolicy-content {
        width: calc(100% - 32px);
    }

    .slider,
    .slider ul li img {
        height: 360px;
    }

    .slider .arrow {
        display: none;
    }

    .slider ul li .slider-txt {
        left: 16px;
        width: calc(100% - 32px);
    }

    .slider ul li .slider-txt .title {
        font-size: 26px;
        line-height: 1.25;
    }

    .slider ul li .slider-txt .sub-title {
        font-size: 15px;
        line-height: 1.6;
    }

    .slider ul li .slider-txt a.btn {
        padding: 9px 22px;
        font-size: 16px;
    }

    .services .w1200 {
        width: calc(100% - 32px);
    }

    .services .w1200 ul {
        display: block;
    }

    .services .w1200 ul li {
        width: 100%;
        min-height: 0;
        margin-bottom: 16px;
        padding: 24px 20px;
    }

    .page-skip-list {
        width: 100%;
    }

    .qr-layer {
        left: 0;
        right: auto;
        width: calc(100vw - 32px);
        height: auto;
    }

    .qr-layer img {
        width: 100%;
    }

    .news-content,
    .ourservices-content,
    .report-content,
    .notics,
    .download,
    .mobile-content {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .news-title,
    .ourservices-title,
    .report-title,
    .notics-content,
    .download-content,
    .mobile-title,
    .privacypolicy-title {
        font-size: 28px;
    }

    /* 首页 IPO 与交易区域在手机端改成“栏目标题 + 独立卡片”，避免两个标题先出现、内容后出现。 */
    .news-content > .news-box {
        display: none;
    }

    .mobile-card-heading {
        display: block;
        margin-bottom: 16px;
    }

    .mobile-card-heading .news-title {
        font-size: 26px;
        line-height: 1.25;
    }

    .mobile-card-heading .news-title-line {
        width: 80px;
        margin-top: 10px;
        background-size: 80px 5px;
    }

    .ipo-deal,
    .ipo,
    .deals {
        display: block;
    }

    .deal {
        margin-left: 0;
    }

    .ipo-box,
    .deals-box,
    .ipo-box:nth-child(2n),
    .deals-box:nth-child(2n) {
        display: block;
        width: 100%;
        margin: 0 0 28px;
        background: transparent;
    }

    .ipo-box > .ipo-card-body,
    .deals-box > .ipo-card-body {
        display: grid;
        width: 100%;
        padding: 18px 16px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
    }

    .ipo-c-r-t a,
    .deals-c-r-t a {
        color: inherit;
    }

    .ipo-c-l,
    .deals-c-l {
        margin: 0;
    }

    .ipo-c-l img,
    .deals-c-l img,
    .ipo-c-l img[style],
    .deals-c-l img[style] {
        width: 64px !important;
        height: 64px !important;
        object-fit: contain;
    }

    .ipo-c-r,
    .deals-c-r {
        min-width: 0;
        margin: 0;
    }

    .ipo-c-r-t,
    .deals-c-r-t {
        margin-bottom: 10px;
        font-size: 18px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .ipo-info,
    .deals-info {
        display: grid;
        align-items: start;
        margin-top: 5px;
        line-height: 1.45;
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .label-l {
        width: auto;
        padding-right: 8px;
        font-size: 13px;
        text-align: left;
    }

    .info-r {
        width: auto;
        min-width: 0;
        font-size: 14px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .westbull-solgan01 {
        height: auto;
        min-height: 200px;
        padding: 24px 0;
    }

    .solgan01-title {
        margin-top: 0;
        font-size: 26px;
    }

    #zSlider {
        display: flex;
        margin: 40px auto;
        flex-direction: column;
    }

    #select_btn,
    #picshow,
    #picshow_img,
    #picshow_img li,
    #picshow_img img {
        float: none;
        width: 100%;
    }

    #select_btn {
        order: 2;
        height: auto;
    }

    #select_btn li {
        width: 100%;
        height: auto;
        min-height: 88px;
        padding: 16px 14px 14px 72px;
    }

    #picshow,
    #picshow_img,
    #picshow_img li,
    #picshow_img img {
        height: 170px;
    }

    #picshow_img img {
        object-fit: cover;
    }

    #select_btn .select_text {
        font-size: 18px;
        line-height: 1.35;
    }

    #select_btn .select_date {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .report-list-title,
    .news-newslist-titile {
        font-size: 20px;
    }

    .contactus {
        height: auto;
        padding: 24px 0;
    }

    .contactus-text {
        display: block;
        text-align: center;
    }

    .contact-l {
        line-height: 1.5;
        font-size: 20px;
    }

    .contact-r {
        margin-top: 20px;
    }

    .contact-r a {
        display: inline-block;
    }

    .footer-box,
    .footer-l {
        display: block;
    }

    .footer-l,
    .footer-r {
        width: 100%;
    }

    .footer-l dl {
        margin-top: 28px;
    }

    .footer-l dl dt {
        margin-bottom: 8px;
    }

    .footer-r {
        margin-left: 0;
    }

    .qr-pic {
        width: 100%;
    }

    .comarea {
        margin-top: 24px;
    }

    .copyright {
        height: auto;
        margin-top: 28px;
        padding: 0 16px 24px;
    }

    .research-banner,
    .news-banner {
        height: 150px;
        background-position: center;
        overflow: hidden;
    }

    .research-txt {
        display: flex;
        height: 150px;
        align-items: center;
        font-size: 26px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .article {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .article-content {
        padding: 20px 16px;
    }

    /* 后台富文本可能带有 1200px 行内宽度，手机端必须强制回收，正文才不会撑破页面。 */
    .article-content p,
    .article-content div,
    .article-content table {
        width: auto !important;
        max-width: 100% !important;
    }

    /* 协议富文本带有 300px 高度和内部滚动条；手机端改用页面自然滚动，避免多层滚动难以操作。 */
    .article-content p {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .article-content h3 {
        font-size: 21px;
        line-height: 1.5;
    }

    .art-info {
        width: 100%;
        line-height: 1.6;
    }

    .bro-banner,
    .team-banner,
    .trade-banner {
        height: 420px;
        background-position: center;
    }

    /* 经纪业务介绍文字较长，使用内容撑高而不是固定高度，防止正文压到下一栏目。 */
    .bro-banner {
        height: auto;
        min-height: 500px;
        padding: 1px 0 36px;
        background-color: rgba(0, 0, 0, .34);
        background-blend-mode: multiply;
    }

    .bro-content {
        padding-top: 64px;
    }

    .bro-content h3 {
        font-size: 28px;
        line-height: 1.3;
    }

    .bro-content p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.75;
    }

    .team-banner {
        height: 330px;
        background-position: center;
    }

    .team-content {
        padding-top: 105px;
        font-size: 28px;
        line-height: 1.3;
    }

    /* 交易平台首屏同时保留产品介绍和三个下载入口；通过增加区域高度容纳二维码，不能以隐藏功能换取排版空间。 */
    .trade-banner {
        height: 620px;
        background-color: rgba(0, 0, 0, .32);
        background-blend-mode: multiply;
    }

    .trade-content {
        padding-top: 70px;
    }

    .banner-text p:nth-child(1) {
        font-size: 30px;
        line-height: 1.05;
    }

    .banner-text p:nth-child(2) {
        display: -webkit-box;
        margin-top: 24px;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.75;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
    }

    .trade-banner .trade-qr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: min(100%, 420px);
        margin-top: 28px;
        align-items: start;
    }

    .trade-banner .trade-qr > div {
        min-width: 0;
    }

    .trade-banner .trade-qr a {
        display: block;
    }

    .trade-banner .trade-qr img {
        display: block;
        width: 100%;
        max-width: 120px;
        height: auto;
        margin: 0 auto;
    }

    .trade-banner .trade-qr p {
        margin-top: 8px !important;
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
    }

    .bro-content,
    .team-content,
    .trade-content {
        padding-top: 110px;
        font-size: 30px;
    }

    .bro-server-list {
        display: block;
        margin-top: 28px;
    }

    .b-s-l-c {
        width: 100%;
        height: 140px;
        margin-right: 0;
    }

    .b-s-l-c img {
        padding-top: 38px;
    }

    .account {
        height: auto;
        min-height: 400px;
        padding: 1px 16px 40px;
        background-size: cover;
    }

    .account h3 {
        font-size: 28px;
    }

    .account p {
        width: 100%;
        margin-top: 24px;
    }

    .file-list {
        height: auto;
        min-height: 54px;
        line-height: 1.5;
        padding-top: 14px;
        padding-bottom: 14px;
        gap: 12px;
    }

    .news-content {
        padding-top: 50px;
        font-size: 30px;
    }

    .tab {
        margin-top: 28px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .tab li,
    .tab_on {
        flex: 0 0 auto;
        padding: 7px 16px;
        font-size: 16px;
    }

    .article-content {
        display: block;
    }

    /* 新闻卡片在手机端展示摘要而非整篇正文，卡片高度可预测，滚动浏览更高效。 */
    .news-warp .article {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 20px 18px;
        border-radius: 8px;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
    }

    /* content 同时被通用容器规则命中会二次缩窄，这里恢复为新闻区的完整可用宽度。 */
    .news-warp > .content {
        width: 100%;
    }

    .news-warp .article-title {
        font-size: 18px;
        line-height: 1.5;
    }

    .news-warp .article-content {
        display: grid;
        padding: 0;
        align-items: start;
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 14px;
    }

    /* 图片加载失败后图片区会被隐藏，此时取消预留的缩略图列，让摘要使用完整宽度。 */
    .news-warp .article-content:has(.article-r-pic[style*="display: none"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-warp .article-l {
        margin-top: 12px;
        min-width: 0;
        font-size: 14px;
        line-height: 1.7;
    }

    .news-warp .article-summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .news-warp .art-data {
        position: static;
        display: block;
        margin-top: 12px;
        font-size: 13px;
    }

    .article-l,
    .article-r-pic {
        width: 100%;
    }

    .article-r-pic {
        width: 88px;
        margin-top: 12px;
        padding-left: 0 !important;
    }

    .article-r-pic img {
        width: 88px;
        height: 88px;
        border-radius: 6px;
        object-fit: cover;
    }

    .news-page,
    .ipo-page,
    .deals-page,
    .page {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
    }

    .search-box {
        height: auto;
        padding: 12px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .search-box input:nth-child(1),
    .search-box input:nth-child(2) {
        width: calc(50% - 5px);
        margin-left: 0;
    }

    .search-box input:nth-child(3) {
        width: 100%;
        margin-left: 0;
    }

    .research-list {
        display: block;
        margin-right: auto;
        margin-bottom: 14px;
        margin-left: auto;
        border-radius: 8px;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
    }

    .research-list-l,
    .research-list-r {
        width: auto;
        margin: 0;
    }

    .research-list-l {
        padding: 20px 18px;
    }

    .research-list-l .r-title {
        font-size: 19px;
        line-height: 1.45;
        text-align: center;
    }

    .research-list-l .r-act {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.65;
    }

    .research-list .info {
        display: grid;
        margin-top: 12px;
        align-items: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .research-list .comname,
    .research-list .analystname {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .research-list-r img {
        width: 100%;
        height: auto;
        max-height: 240px;
        object-fit: cover;
    }

    .tip,
    .info {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .research-list .tip {
        margin-top: 14px;
        justify-content: center;
    }

    .research-list .timer {
        padding-left: 0;
        font-size: 13px;
        text-align: center;
    }

    .research-list .pdf-box {
        text-align: center;
    }

    .research-list .pdf-overfollow {
        margin-right: auto;
        margin-left: auto;
    }

    .asset,
    .investment,
    .immigration,
    .products {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .team-warp > .asset,
    .team-warp > .investment,
    .team-warp > .immigration,
    .team-warp > .products {
        margin-top: 16px;
        padding: 20px 18px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .05);
    }

    .a-l-t,
    .i-l-a,
    .g-l-a,
    .p-l-t {
        font-size: 20px;
        line-height: 1.4;
    }

    .a-l-t-a,
    .i-l-t-a,
    .g-l-t-a,
    .p-l-a {
        font-size: 14px;
        line-height: 1.75;
    }

    .investment .i-r,
    .immigration .g-r {
        order: 2;
        padding-left: 0;
    }

    .p-l {
        padding-right: 0;
    }

    .a-l-t-a,
    .i-l-t-a,
    .g-l-t-a,
    .p-l-a {
        margin-right: 0;
    }

    .asset img,
    .investment img,
    .immigration img,
    .products img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .mobile-list {
        display: block;
    }

    .mobile-box {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 96px;
        margin-right: 0;
        line-height: normal;
    }

    .mobile-box img {
        margin: 12px 20px;
    }

    /* 手机端把说明和产品图拆成上下两块，保证标题、正文与交易界面都清晰可读。 */
    .online-bg {
        height: auto;
        padding: 40px 0;
        background: #fff;
    }

    .online {
        height: auto;
        min-height: 0;
        background: none;
    }

    .online-box {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .online-text {
        width: 100%;
        border: 0;
    }

    .online-text p:nth-child(1) {
        margin-top: 0;
        font-size: 28px;
        line-height: 1.3;
        color: #222;
    }

    .online-text p:nth-child(2) {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.75;
        color: #777;
    }

    .online-visual {
        display: block;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    }

    .online-visual img {
        display: block;
        width: 100%;
        height: auto;
    }

    .gts {
        height: auto;
        min-height: 320px;
        padding-bottom: 40px;
    }

    .gts-text {
        font-size: 26px;
        line-height: 1.45;
    }

    .privacypolicy-content {
        height: 420px;
        margin-top: 28px;
    }

    .privacypolicy-box {
        padding: 20px 16px;
    }

    .trade-qr {
        width: 100%;
        flex-wrap: wrap;
    }

    .banner-text {
        width: 100%;
    }

    .trade-qr img {
        width: 140px;
    }

    /* 关于页面的 Logo 是品牌标识，不应按通栏图片放大；正文恢复普通字重以提升长文阅读性。 */
    .aboutus {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.85;
    }

    .aboutus > img {
        display: block;
        width: 190px;
        margin: 0 auto 24px !important;
    }

    .aboutus > div:not(:first-of-type) {
        line-height: 1.65;
        overflow-wrap: anywhere;
    }
}