/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

a{
    text-decoration: none;
    color:#333;
}

ol{
    font-size: 16px;
    margin: 15px 0;
    padding-left: 20px;
}
ul {
    font-size: 16px;
    margin: 15px 0;
    padding-left: 20px;
}
li{
    margin-bottom: 10px;
    color: #555;
}

h2{
    font-size: 24px;
    font-weight: bold;
    color: #1e88e5;
    margin-bottom: 15px;
    margin-top: 40px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e3f2fd;
    display: flex;
    align-items: center;
}


h2::before {
    content: "🎯";
    margin-right: 15px;
    font-size: 28px;
}

/* 确保所有图片和表格不会超出容器 */
img, video, iframe, table {
    max-width: 100%;
    height: auto;
}

/* 表格横向滚动处理 */
table {
    width: 100%;
    max-width: 100%;
    overflow:scroll !important;
}

th {
    background: #1e88e5;
    color: white;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #e3f2fd;
}

td{
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #e3f2fd;
}

h3{
    margin-top: 15px;
    margin-bottom: 5px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Header Styles */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    background: white;
}

.header-top {
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    height: 90px;
    display: flex;
    align-items: center;
}

.header-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-section {
    display: flex;
    gap: 20px;
    max-width: 40%;
    align-items: center;
    justify-content: space-between;
}

.logo-title {
    font-size: 28px;
    font-weight: bold;
    color: #1e88e5;
    margin: 0;
}

.logo-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.logo-separator {
    width: 1px;
    height: 30px;
    background: #ddd;
}

.logo-description {
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.logo{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.logo img {
    display: flex;
    justify-content: flex-start;
    height: 60px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-primary {
    background: rgb(255, 255, 255);
    color: #1e88e5;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 140px;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-primary:hover {
    color:#2c3e50
}

.search-icon {
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

/* Navigation Styles */
.navigation {
    background: #fff;
    padding: 10px 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin:0px;
    padding:0px;
    gap: 30px;
    justify-content: space-around;
}

.nav-menu li{
    margin:0px;
    padding:0px;
}

.nav-item {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    padding: 10px 0;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #1976d2;
}

.nav-item.active .nav-link {
    color: #1976d2;
    border-bottom: 2px solid #0256fe;
}

/* Main Content Styles */
.main-content {
    margin-top: 20px; /* 根据header高度调整 */
}

/* Hero Banner */
.hero-banner {
        color: white;
    border-radius: 10px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}
.banner-img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    min-height: 120px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
}

.hero-illustration {
    position: relative;
    width: 200px;
    height: 150px;
}

.illustration-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
}

.coin-large {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.coin-stack {
    position: absolute;
    bottom: 30px;
    right: 60px;
    width: 40px;
    height: 30px;
    background: #ffd700;
    border-radius: 5px;
}

.document-chart {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 40px;
    background: #fff;
    border-radius: 5px;
    border: 2px solid #ddd;
}

/* Fixed Actions */
.fixed-actions {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.fixed-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 10px;
    color: white;
    transition: transform 0.3s;
    gap: 2px;
}

.fixed-btn i {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-consultation {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>');
}

.icon-cooperation {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H17c-.8 0-1.54.37-2.01 1l-1.99 2.5V22h6zm-8-6c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 6v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 10.54 8H9c-.8 0-1.54.37-2.01 1L5 11.5V22h7z"/></svg>');
}

.fixed-btn:hover {
    transform: scale(1.1);
}

.consultation {
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    font-size: x-small;
}

.kaihu {
    background: linear-gradient(135deg, #fff9b0, #fced63, #ffe600);
    color: #333;
    font-weight: bold;
}

.btn-kaihu:hover {
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

.back-to-top.fixed-btn {
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    font-size: x-small;
    color: #fff;
}

.icon-top {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12 12 4 4 12z"/></svg>');
}

/* Content Layout */
.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* Left Column */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Section Title Icons */
.section-title i {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.icon-broker {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231e88e5"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zM12 20.99c-4.15-1.18-7-5.51-7-9.99V8.3l7-3.11 7 3.11v2.7c0 4.48-2.85 8.81-7 9.99z"/><path d="M12 6.5l-4 1.78v2.7c0 2.24 1.42 4.31 3.5 5.06V15h1v-2.96c2.08-.75 3.5-2.82 3.5-5.06V8.28L12 6.5z"/></svg>');
}

.icon-faq {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff9800"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>');
}

.icon-news {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234caf50"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z"/></svg>');
}

.icon-trading {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239c27b0"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>');
}

.broker-name-tags{
    display: flex;
    gap: 5px;
}

/* Broker Cards */
.brokers-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.broker-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.broker-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.broker-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.broker-logo {
    font-weight: bold;
    color: #1e88e5;
    width: 25%;
}

.broker-logo img {
    width: 100%;
    padding: 10px;
    height: 120px;
    object-fit: contain;
}

.broker-info-content {
    font-size: 18px;
    margin: 0px 15px 0px 15px;
    color: #333;
    width: 55%;
}

.broker-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    font-size:large;
    
}

.broker-name-link {
    text-decoration: none;
    color: #333;
}

.tag-recommend {
    background: linear-gradient(135deg, #ff5722, #f44336);
    color: #ffffff;
    font-weight: bold;
    font-size: small;
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
}

.tag-brand {
    background: linear-gradient(135deg, #fff9b0, #fced63, #ffe600);
    font-weight: bold;
    font-size: small;
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
}

.tag-mainland {
    background: linear-gradient(135deg, #85d400, #8BC34A);
    font-weight: bold;
    font-size: small;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
}

.tag-oversea {
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    font-weight: bold;
    font-size: small;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
}

.tag-origin {
    border: 1px solid #73a2ff;
    color: #73a2ff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
}

.tag-popular {
    border: 1px solid #ff5722;
    color: #ff5722;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.broker-description {
    color: #666;
    font-size: small;
    line-height: 1.5;
    text-align: left;
    padding-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.broker-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 18%;
    min-height: 100px;
}

.btn-secondary {
    background: #ffffff;
    color: #333;
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: smaller;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
}

.btn-secondary:hover {
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

.btn-kaihu {
    flex: 1;
    background: linear-gradient(135deg, #fff9b0, #fced63, #ffe600);
    color: #333;
    border: none;
    padding: 8px 15px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    font-size: smaller;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Button Icons */
.btn-secondary i,
.btn-kaihu i {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-details {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
}

.icon-register {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
}
/* FAQ Section */
.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #e3f2fd;
    overflow: hidden;
}

.faq-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-right: 5px;
}

.faq-question h5{
    margin-top: 0px !important;
}

.faq-question h5::before{
    content: '?';
    color: #F44336;
    font-size: 20px;
    font-weight: bold;
    margin-right: 5px;
}

.faq-more {
    text-align: right;
    margin-top: 20px;
}

.btn-more {
    background: #1e88e5;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.icon-more {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
}

/* Right Column - Sticky Sidebar */
.right-column {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-to-top {
    color: #1e88e5;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.icon-top {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>');
}

/* News Section */
.broker-news-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.broker-news-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.broker-news-item {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.broker-news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.broker-news-img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: fill;
    padding-bottom: 10px;
}

.broker-news-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
}

.broker-news-time {
    font-size: 12px;
    color: #999;
}

/* 美股资讯样式 */
.us-stock-news-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.us-stock-news-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.us-stock-news-item {
    display: flex;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.us-stock-news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.us-stock-news-img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    max-width: 150px;
    flex-shrink: 0;
}

.us-stock-news-content {
    flex: 1;
    padding: 0 5px 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.us-stock-news-title {
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.us-stock-news-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.us-stock-news-time {
    font-size: 12px;
    color: #999;
}

/* Promo Banner */
.promo-banner {
    background: linear-gradient(135deg, #ff5722, #f44336);
    color: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.promo-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-promo {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e91e63"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}

.promo-subtitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}

.promo-illustration {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.chart-rising {
    width: 60px;
    height: 40px;
    background: #ffd700;
    border-radius: 50%;
    position: relative;
}

.chart-rising::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 10px;
    width: 40px;
    height: 20px;
    background: #fff;
    border-radius: 20px 20px 0 0;
}

/* Trading Intro */
.trading-intro {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.intro-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.intro-item {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.intro-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.intro-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.intro-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    line-height: 1.4;
}

.intro-time {
    font-size: 12px;
    color: #999;
}

/* Footer Styles */
.footer {
    background: #2c3e50;
    color: white;
    padding: 30px 0 40px;
    margin-top: 35px;
}

.footer-top {
    margin-bottom: 15px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    height: 50px;
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.footer-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.footer-nav-link {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-nav-link:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: 10px;
}

.risk-warning {
    margin-bottom: 10px;
}

.warning-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #e74c3c;
}

.warning-text {
    font-size: 14px;
    line-height: 1.6;
    color: #bdc3c7;
}

.copyright {
    text-align: center;
    font-size: 14px;
    color: #95a5a6;
}


/* 在现有样式后添加汉堡菜单相关样式 */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin:0;
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* 移动端侧边菜单 */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: white;
    z-index: 10001; /* 提高z-index */
    transition: left 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-nav.active {
    left: 0;
}

.mobile-nav-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e88e5;
    color: white;
}


.mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    background-color: #ffffff ;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* X形状的关闭按钮 */
.close-line {
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s ease;
}

.close-line:first-child {
    transform: rotate(45deg);
}

.close-line:last-child {
    transform: rotate(-45deg);
}

.mobile-nav-close:hover .close-line {
    background-color: #1e88e5;
}


.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid #f5f5f5;
}

.mobile-nav-link {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s;
}

.mobile-nav-link:hover {
    background-color: #f8f9fa;
}

.mobile-nav-link.active {
    background-color: #1e88e5;
    color: white;
}

/* 遮罩层 */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 股票行情样式 - 修改版本 */
.stock-ticker {
    background: #ffffff;
    color: #333333;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    top: auto;
    z-index: 10000;
}

.stock-ticker-content {
    display: flex;
    animation: scroll-left 100s linear infinite;
    width: max-content;
    /* 移除transform: translateX(100%)，让内容从左侧开始显示 */
}

.stock-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-right: 1px solid #e2e2e299; /* 深灰色分隔符 */
    min-width: 200px;
}

.stock-symbol {
    font-weight: bold;
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
}

.stock-price {
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
}

.stock-change {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.stock-change.positive {
    color: #28a745; /* 绿色，表示上涨 */
}

.stock-change.negative {
    color: #dc3545; /* 红色，表示下跌 */
}

.stock-change.unchanged {
    color: #6c757d; /* 深灰色，表示无变化 */
}

.change-arrow {
    margin-right: 4px;
    font-size: 14px;
    font-weight: bold;
}

/* 修改动画，让内容从左侧开始，无缝循环 */
@keyframes scroll-left {
    0% { 
        transform: translateX(0); /* 从左侧开始 */
    }
    100% { 
        transform: translateX(-50%); /* 移动到一半位置，实现无缝循环 */
    }
}
    


/* 新增：主题导航和正文内容样式 */
.page-title {
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #1e88e5;
}

/*  
.page-title::before {
    content: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13" fill="white" stroke="%23003366" stroke-width="3"/><polygon points="14,5 17,14 14,15 11,14" fill="red" transform="rotate(45 14 14)"/><polygon points="14,23 11,14 14,13 17,14" fill="blue" transform="rotate(45 14 14)"/><circle cx="14" cy="14" r="3" fill="lightgray" stroke="white" stroke-width="1"/></svg>');
    margin-right: 15px;
    font-size: 28px;
}
*/
.topic-navigation {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    border-left: 4px solid #1e88e5;
}

.nav-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.nav-title::before {
    content: "📚";
    margin-right: 10px;
    font-size: 24px;
}

.topic-nav-list {
    list-style: none;
    padding: 0;
}


.topic-nav-link {
    display: block;
    padding: 5px 10px;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.topic-nav-link:hover {
    background: #f0f8ff;
    color: #1e88e5;
    transform: translateX(5px);
}

.content-articles {
    margin-top: 40px;
}

.topic-content img{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.topic-section {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 3px 20px rgba(0,0,0,0.08);
}


.topic-section img{
    width:100%;
}


.topic-title {
    font-size: 24px;
    font-weight: bold;
    color: #1e88e5;
    margin-bottom: 15px;
    margin-top: 40px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e3f2fd;
    display: flex;
    align-items: center;
}

.topic-content h3{
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 0px;
    margin-bottom: 0px;
}



.topic-title::before {
    content: "🎯";
    margin-right: 15px;
    font-size: 28px;
}

.topic-content {
    line-height: 1.8;
}

.topic-content h4 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 25px 0 15px 0;
    display: flex;
    align-items: center;
}

.topic-content h4::before {
    content: "💡";
    color: #1e88e5;
    margin-right: 10px;
}

.topic-content p {
    margin-bottom: 15px;
    color: #555;
}

.topic-content img.img-fluid{
    width: 50%;
    height: auto;
}

.topic-content ul {
    font-size: 16px;
    margin: 15px 0;
    padding-left: 20px;
}

.topic-content li {
    margin-bottom: 10px;
    color: #555;
}

.topic-content strong {
    color: #333;
}

/* 产品网格 */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 20px 0;
    justify-content: center;
    flex-direction: row;
}

.product-item {
    background: #f8f9fa;
    /* padding: 20px; */
    margin: 5px;
    border-radius: 10px;
    text-align: center;
    width: 18%;
    min-width: 100px;
    border: 2px solid #e3f2fd;
    transition: all 0.3s ease;
}

.product-item:hover {
    border-color: #1e88e5;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(30,136,229,0.2);
}

.product-icon {
    font-size: 32px;
    display: block;
}

.product-name {
    font-weight: bold;
    color: #333;
}

/* 要求网格 */
.requirements-grid {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    flex-direction: column;
}

.requirement-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #e3f2fd;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s ease;
}

.requirement-item:hover {
    border-color: #1e88e5;
    box-shadow: 0 5px 15px rgba(30,136,229,0.1);
}

.requirement-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.requirement-text strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.requirement-text p {
    margin: 0;
    color: #666;
    font-size: 14px;
}


.step-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #1e88e5;
}

.step-number {
    background: #1e88e5;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 20px;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.step-content p {
    margin: 0;
    color: #555;
}

.step-content img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* 费用表格 */
.fee-table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    border: 1px solid #e3f2fd;
    width: 100%;
    border-collapse: collapse;
}


.fee-table th,
.fee-table td {
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #e3f2fd;
}

.fee-table th:last-child,
.fee-table td:last-child {
    border-right: none;
}

.fee-table thead th {
    background: #1e88e5;
    color: white;
    font-weight: bold;
}

.fee-table th{
    background: #f8f9fa;
    color: #333;
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #e3f2fd;
}

.fee-table tbody tr:last-child td {
    border-bottom: none;
}

/* 保持原有的响应式样式 */
.fee-row {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    border-bottom: 1px solid #e3f2fd;
}

.fee-row:last-child {
    border-bottom: none;
}

.fee-row.fee-header {
    background: #1e88e5;
    color: white;
    font-weight: bold;
}



.fee-item {
    padding: 15px;
    display: flex;
    align-items: center;
}


/* 通知框和提示框 */
.notice-box, .tip-box {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.tip-box {
    background: #d1ecf1;
    border-color: #bee5eb;
}

.notice-box h5, .tip-box h5 {
    color: #856404;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.tip-box h5 {
    color: #0c5460;
}

.notice-box p, .tip-box p {
    margin: 0;
    color: #856404;
}

.tip-box p {
    color: #0c5460;
}

/* 操作框 */
.action-box {
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin: 30px 0;
}

.action-box h4 {
    font-size: 24px;
    margin-bottom: 15px;
    color: white;
}

.action-box p {
    margin-bottom: 25px;
    font-size: 16px;
    opacity: 0.9;
}
/* 文章信息栏样式 */
.article-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    color: #666;
    margin: 10px 0 0 0;
    justify-content: flex-start;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.meta-item i {
    color: #1e88e5;
    font-size: 16px;
}

.meta-item span {
    color: #333;
    font-weight: 500;
}
.action-box .btn-primary {
    background: white;
    color: #1e88e5;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-box .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


.faq-question {
    background: #f8f9fa;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #e3f2fd;
}


.faq-question h4 {
    margin: 0;
    color: #333;
}

.faq-answer {
    padding: 10px;
    border-top: 1px solid #e3f2fd;
}

.faq-answer p {
    margin: 0;
    color: #555;
}

/* 联系框 */
.contact-box {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;
    text-align: center;
    border: 2px solid #e3f2fd;
}

.contact-box h4 {
    color: #333;
    margin-bottom: 15px;
}

.contact-box p {
    color: #555;
    margin-bottom: 20px;
}

.contact-methods {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
}

.contact-icon {
    font-size: 20px;
}

.platform-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 15px 20px;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.platform-box .left {
    display: flex;
    align-items: center;
    gap: 15px;
    align-items: flex-start;
}

.platform-box .left i {
    font-size: 25px;
    color: #4CAF50;
}

.platform-box .platform-title{
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.platform-box .platform-desc{
    font-size: 12px;
    color: #666;
}

.platform-box .platform-title-desc{
    display: flex;
    flex-direction: column;
}

.platform-box .right {
    display: flex;
    gap: 10px;
}

.platform-box .icon-btn {
    background-color: #f5f5f5;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-direction: column;
    font-size: 12px;
    gap: 5px;
    color: #666;
    border: none;
    cursor: pointer;
}

.platform-box .icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.platform-box .icon-btn i {
    font-size: 25px;
}

/* 为不同图标设置不同颜色 */
.platform-box .icon-btn .fa-desktop {
    color: #2196F3; /* 蓝色 - 桌面版 */
}

.platform-box .icon-btn .fa-apple {
    color: #000000; /* 黑色 - 苹果版 */
}

.platform-box .icon-btn .fa-mac {
    color: #000000; /* 黑色 - 苹果版 */
}

.platform-box .icon-btn .fa-android {
    color: #4CAF50; /* 绿色 - 安卓版 */
}

.platform-box .icon-btn .fa-chart-line {
    color: #FF9800; /* 橙色 - 图表功能 */
}

.platform-box .left img{
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-bottom:0px;
}

.topic-content h5{
    margin-top: 10px;
    font-size: 16px;
}

.pagination-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    flex-wrap: wrap;
}

.pagination-nav a{
    color: #1e88e5;
    padding: 3px 5px;
    border: 1px solid;
    text-align: center;
}

@media (max-width: 1050px) {
    
    .content-layout{
        display: flex;
        flex-direction: column;
    }
    .broker-news-img{
        display: none;
    }

    .nav-menu {
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-menu {
        gap: 15px;
        padding-left: 15px;
    }


}


/* Responsive Design */
/* 修复移动端样式冲突 */
@media (max-width: 768px) {
    [id] {
        scroll-margin-top: 80px; /* 60px头部高度 + 额外间距 */
    }
    .stock-ticker{
        display: none;
    }
    .header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }
    
    .header-top{
        border-bottom: none;
        height: 60px;
    }

    .footer{
        margin-bottom: 15px;   /* 固定底部高度 */
    }

    .main-content{
        margin-top: 80px;
    }
    .logo img{
        height: 45px;
        width: 100%;
        object-fit: contain;
        
    }

    .hamburger-menu{
        display: flex;
    }
    .container {
        padding: 0 15px;
    }

    .header-actions .btn-primary{
        display: none;
    }
    
    .navigation {
        display: none;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .content-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .right-column {
        position: static;
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .broker-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .broker-actions {
        justify-content: center;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .fixed-actions {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0px;
        top: auto;
        transform: none;
        justify-content: center;
        gap:0px; 
    }

    .fixed-btn { 
        margin-bottom: 0; 
        width: 100%;
        height: 45px;
        font-size: 14px;
        border-radius: 0;
        flex-direction:row; 
    }
    .us-stock-news-desc{
        font-size: 14px;
    }
    .fixed-btn.back-to-top{
        display: none;
    }

    .fixed-btn:hover{
        transform: none;
    }

    .footer-menu {
        gap: 15px;
        padding-left: 0px;
    }    .page-title {
        font-size: 24px;
        margin: 20px 0;
    }
    
    .topic-navigation {
        padding: 20px;
        margin: 20px 0;
    }
    
    .topic-section {
        padding: 20px;
    }
    
    .topic-title {
        font-size: 20px;
    }
    
    .product-grid,
    .requirements-grid {
        grid-template-columns: 1fr;
    }
    
    .fee-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .step-number {
        margin: 0 0 15px 0;
    }
    
    .contact-methods {
        flex-direction: column;
        gap: 15px;
    }
    
    .action-box {
        padding: 20px;
    }
    
    .action-box .btn-primary {
        width: 100%;
    }

    .platform-box{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        margin: 20px auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .platform-box .left{
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }

    .platform-box .right{
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-around;
    }

    .platform-box .icon-btn{
        width: 20%;
        min-width: 60px;
    }

    .us-stock-news-title{
        font-size: 16px;
    }

    .broker-news-title{
        font-size: 16px;
    }

    .intro-title{
        font-size: 16px;
    }
    
        
    .topic-content img.img-fluid{
        width: 100%;
        height: auto;
    }

    
}



@media (max-width: 550px) {

    
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS流畅滚动 */
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    table{
        display: block;
    }


    .broker-info{
        flex-direction: column;
        gap:10px;
    }

    .logo-description {
        display: none;
    }

    .logo-separator{
        display: none;
    }
    .broker-news-img{
        display: block;
    }
    .broker-logo{
        width: 100%;
    }

    .broker-logo img{   
        height: 80px;
        padding: 10px 0px 0px 0px;
    }

    .broker-actions{
        width: 100%;
    }
    .broker-info-content{
        width: 100%;

    }
    .broker-card{
        flex-direction: row;
        text-align: left;
        gap: 15px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .broker-name{
        justify-content: center;
        align-items: center;
        text-align: center;

    }

    .broker-name-tags{
        justify-content: center;
        align-items: center;
        text-align: center;

    }
    .btn-kaihu{
        height: 100%;
    }
    .btn-secondary{
        height: 100%;
    }
    .logo-title {
        font-size: 24px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .nav-menu {
        gap: 10px;
    }
    
    .nav-link {
        font-size: 14px;
    }

    .us-stock-news-item{
        flex-direction: column;

    }

    .us-stock-news-img{
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        object-fit: cover;
        max-width: 100%;
    }

    
}