/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom color variables */
:root {
    --primary-blue: #0078FF;
    --primary-dark: #003CF1;
    --secondary-blue: #0A82FF;
    --background-dark: #0A0E27;
    --text-white: #FFFFFF;
    --text-gray: #666666;
    --text-light: #A2A2A2;
    --gradient-start: #0A82FF;
    --gradient-end: #133CE9;
}

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



body {
    font-family: 'PingFang SC Regular';
    background-color: #000212;
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* 流星背景效果 */
.background-visuals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

.background-visuals.meteor-background {
    background: transparent;
}

#meteorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* 主容器 - 限制最大宽度并居中 */
.main-container {
    position: relative;
    max-width: 1414px;
    margin: 0 auto;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* Banner Section - 等比例缩放: 1414px宽度对应900px总高度（包括header的80px） */
.banner-section {
    position: relative;
    width: 100%;
    /* 使用padding-bottom实现等比例缩放: (900-80)/1414 = 820/1414 = 58.00% */
    padding-bottom: 58.00%;
    background: #000;
    overflow: hidden;
    padding-top: 80px;
    z-index: 1;
    box-sizing: border-box;
}

/* Banner 流星效果容器 */
.banner-meteor-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

#bannerMeteorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.banner-scroll-icon {
    position: absolute;
    bottom: min(63px, calc(63 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: min(30px, calc(30 / 1414 * 100vw));
    height: min(33px, calc(33 / 1414 * 100vw));
    z-index: 20;
    cursor: pointer;
}

.banner-scroll-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.3);
    transform-origin: top center;
}

.glow-effect {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    left: 0;
    top: 0;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 130, 255, 0.20) 0%, rgba(168, 55, 255, 0) 100%);
    border-radius: 9999px;
    z-index: 0;
    pointer-events: none;
}

.glow-effect-right {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    right: min(-350px, calc(-350 / 1414 * 100vw));
    top: min(353px, calc(353 / 1414 * 100vw));
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(168.41, 55.17, 255, 0.20) 0%, rgba(168, 55, 255, 0) 100%);
    border-radius: 9999px;
    z-index: 0;
    pointer-events: none;
}

.bg-decoration {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.bg-decoration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.water-wave {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0.5;
}

.water-wave img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    filter: url(#waterRipple);
    opacity: 0.7;
}

.banner-content {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    max-width: 1414px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
}

.banner-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* 1414px设计稿：top: 150px, left: 125px */
    /* banner-content top: 80px, padding: 0 40px */
    /* padding-top: 150px - 80px = 70px */
    /* margin-left: 125px - 40px = 85px */
    padding-top: min(70px, calc(70 / 1414 * 100vw));
    margin-left: min(85px, calc(85 / 1414 * 100vw));
}

.banner-title {
    font-family: 'PingFang SC Semibold';
    /* 等比缩放：45px / 1414px * 100vw = 3.18vw，最大45px */
    font-size: min(45px, calc(45 / 1414 * 100vw));
    /*font-weight: 600;*/
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 0%, rgba(255, 255, 255, 1) 66.83%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-align: left;
    margin-bottom: min(23px, calc(23 / 1414 * 100vw)); /* 第一个和第二个间距23px */
}

.banner-subtitle {
    font-family: 'PingFang SC Regular';
    /* 等比缩放：25px / 1414px * 100vw = 1.77vw，最大25px */
    font-size: min(25px, calc(25 / 1414 * 100vw));
    /*font-weight: 600;*/
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 0%, rgba(255, 255, 255, 1) 51.44%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-align: left;
    margin-top: 0;
    margin-bottom: min(38px, calc(38 / 1414 * 100vw)); /* 第二个和第三个间距34px */
}

.contact-float {
    margin-top: 0;
}

.contact-btn {
    /* 等比缩放按钮尺寸 */
    width: min(98px, calc(98 / 1414 * 100vw));
    height: min(31px, calc(31 / 1414 * 100vw));
    background: linear-gradient(180deg, #0A82FF 0%, #133CE9 100%);
    border-radius: calc(73.71 / 1414 * 100vw);
    /* 等比缩放字体：12px / 1414px * 100vw = 0.85vw，最大12px */
    font-size: min(12px, calc(12 / 1414 * 100vw));
    /* font-weight: 400; */
    color: var(--text-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: "pingfangsc-light";
    font-weight: 100;
}

.contact-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(10, 130, 255, 0.4);
}

.banner-right {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 100%;
    padding-top: min(280px, calc(280 / 1414 * 100vw)); /* 530px - banner-content的top:80px = 450px */
    padding-right: min(230px, calc(230 / 1414 * 100vw)); /* 距离右侧边界330px */
}

.ip-character {
    position: relative;
    width: min(180px, calc(180 / 1414 * 100vw));
    height: min(180px, calc(180 / 1414 * 100vw));
    animation: float 3s ease-in-out infinite;
}

.ip-character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(-161deg);
    transform-origin: center center;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(-161deg);
    }
    50% {
        transform: translateY(-20px) rotate(-161deg);
    }
}

/* Video Section */
.video-section {
    height: min(898px, calc(898 / 1414 * 100vw));
    padding: 0 0 min(76px, calc(76 / 1414 * 100vw));
    position: relative;
    overflow: visible;
    z-index: 1;
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-card-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.video-content-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #081744;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 视频切换动画 */
.video-thumbnail.slide-out-left {
    animation: slideOutLeft 0.6s ease forwards;
}

.video-thumbnail.slide-out-right {
    animation: slideOutRight 0.6s ease forwards;
}

.video-thumbnail.slide-in-left {
    animation: slideInLeft 0.6s ease forwards;
}

.video-thumbnail.slide-in-right {
    animation: slideInRight 0.6s ease forwards;
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.video-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: transparent;
}

.video-title {
    position: absolute;
    top: min(31px, calc(31 / 1414 * 100vw));
    left: min(115px, calc(115 / 1414 * 100vw));
    z-index: 10;
}

.title-en {
    font-size: min(60px, calc(60 / 1414 * 100vw));
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-white);
    line-height: 1;
}

.title-cn {
    font-size: min(40px, calc(40 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-white);
    /* margin-top: 10px; */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button img {
    width: 62px;
    height: 62px;
}

.play-button-text {
    position: absolute;
    top: calc(50% + 35px);
    left: 50%;
    transform: translateX(-50%);
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-white);
    /* text-transform: uppercase; */
    letter-spacing: 2px;
    z-index: 10;
    pointer-events: none;
}

.about-overlay {
    position: absolute;
    bottom: min(60px, calc(60 / 1414 * 100vw));
    left: min(115px, calc(115 / 1414 * 100vw));
    width: min(365px, calc(365 / 1414 * 100vw));
    border-radius: 15px;
    padding: 20px 20px 20px 20px;
    z-index: 10;
}

.about-icon {
    display: block;
    width: 53px;
    height: 53px;
    margin-bottom: 12px;
    margin-left: 0;
}

.about-text {
    font-family: 'PingFang SC Medium';
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.1;
    margin: 0;
}

.contact-glass-card {
    position: absolute;
    bottom: min(143px, calc(143 / 1414 * 100vw));
    right: min(140px, calc(140 / 1414 * 100vw));
    width: min(296px, calc(296 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
}

.learn-more-btn-container {
    position: absolute;
    bottom: min(80px, calc(80 / 1414 * 100vw));
    right: min(171px, calc(171 / 1414 * 100vw));
    width: min(200px, calc(200 / 1414 * 100vw));
    display: flex;
    justify-content: center;
    z-index: 10;
}


/* Video Section 中的 Contact 样式 */
.contact-glass-card .contact-item {
    display: flex;
    gap: min(15px, calc(15 / 1414 * 100vw));
    align-items: flex-start;
    padding-left: min(20px, calc(20 / 1414 * 100vw));
    padding-right: min(20px, calc(20 / 1414 * 100vw));
}

.contact-glass-card .contact-info {
    display: flex;
    flex-direction: column;
    gap: min(8px, calc(8 / 1414 * 100vw));
}

/* 联系信息行 - 图标+文字 */
.contact-glass-card .contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: min(10px, calc(10 / 1414 * 100vw));
}

.contact-glass-card .contact-info-icon {
    width: min(25px, calc(25 / 1414 * 100vw));
    height: min(25px, calc(25 / 1414 * 100vw));
    flex-shrink: 0;
    margin-top: min(3px, calc(3 / 1414 * 100vw));
}

.contact-glass-card .contact-info-icon.phone-icon {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    margin-left: min(5px, calc(5 / 1414 * 100vw));
}

.contact-glass-card .contact-location {
    font-family: 'PingFang SC Regular';
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

.contact-glass-card .contact-phone {
    font-family: 'PingFang SC Medium';
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.5;
}

.contact-glass-card .contact-qr {
    display: flex;
    justify-content: center;
}

.contact-glass-card .contact-qr img {
    width: min(228px, calc(228 / 1414 * 100vw));
    height: min(148px, calc(148 / 1414 * 100vw));
    border-radius: 10px;
}

.learn-more-btn {
    font-family: 'PingFang SC Medium';
    width: min(200px, calc(200 / 1414 * 100vw));
    height: min(45px, calc(45 / 1414 * 100vw));
    background: radial-gradient(ellipse 202.21% 953.83% at 116.99% -22.22%, #0A82FF 0%, #003CF1 100%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(27px, calc(27 / 1414 * 100vw));
    font-size: min(20px, calc(20 / 1414 * 100vw));
    /* font-family: 'PingFang SC', sans-serif; */
    font-weight: 400;
    color: var(--text-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    z-index: 10;
}

.learn-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 130, 255, 0.3);
}

.learn-more-btn img {
    width: min(18px, calc(18 / 1414 * 100vw));
    height: min(15px, calc(15 / 1414 * 100vw));
}






.video-indicators {
    position: absolute;
    bottom: min(38px, calc(38 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 31px;
    z-index: 10;
}

.indicator {
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: var(--primary-blue);
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    border-radius: 0;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.video-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    background: #FFFFFF;
    border: min(1px, calc(1 / 1414 * 100vw)) solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}

.video-arrow:hover {
    background: #006BFF;
    border-color: #FFFFFF;
    transform: translateY(-50%);
}

.video-arrow img {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    object-fit: contain;
}

/* 左箭头 - 默认图标 */
.arrow-left img {
    content: url('/assets/design/home/home-left.png');
}

/* 右箭头 - 默认图标 */
.arrow-right img {
    content: url('/assets/design/home/home-right.png');
}

/* 左箭头 - hover图标 */
.arrow-left:hover img {
    content: url('/assets/design/home/home-left-hover.png');
}

/* 右箭头 - hover图标 */
.arrow-right:hover img {
    content: url('/assets/design/home/home-right-hover.png');
}

.arrow-left {
    left: min(30px, calc(30 / 1414 * 100vw));
}

.arrow-right {
    right: min(30px, calc(30 / 1414 * 100vw));
}

.arrow-left img {
    /* transform: rotate(180deg); */
    width: min(29px, calc(29 / 1414 * 100vw));
    height: min(27px, calc(27 / 1414 * 100vw));
}

.arrow-right img {
    width: min(29px, calc(29 / 1414 * 100vw));
    height: min(27px, calc(27 / 1414 * 100vw));
}

.close-video-btn {
    position: absolute;
    top: min(30px, calc(30 / 1414 * 100vw));
    right: min(30px, calc(30 / 1414 * 100vw));
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(min(10px, calc(10 / 1414 * 100vw)));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    transition: all 0.3s ease;
}

.close-video-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.close-video-btn img {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    transform: rotate(90deg);
}

/* About Section */
.about-section {
    max-width: 1414px;
    margin: 0 auto;
    padding: min(40px, calc(40 / 1414 * 100vw)) min(80px, calc(80 / 1414 * 100vw));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: min(40px, calc(40 / 1414 * 100vw));
    align-items: start;
    position: relative;
    z-index: 1;
}

.about-wrapper {
    max-width: 1414px;
    margin: 0 auto;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-icon {
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
}

.about-icon img {
    width: 100%;
    height: 100%;
}

.about-text {
    font-family: 'PingFang SC Medium', 'PingFang SC', sans-serif;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 400;
    color: var(--text-white);
    line-height: 1.1;
    width: min(365px, calc(365 / 1414 * 100vw));
}

.about-contact-card {
    width: min(266px, calc(266 / 1414 * 100vw));
}

.contact-card-img {
    width: 100%;
    height: auto;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
}

/* Business Section */
.business-section {
    padding: min(33px, calc(33 / 1414 * 100vw)) min(113px, calc(113 / 1414 * 100vw)) 0;
    position: relative;
    z-index: 1;
    background-image: url(/assets/design/middle-bg.png);
    background-position: left bottom;
    background-repeat: no-repeat;
}

.business-wrapper {
    max-width: 1414px;
    margin: 0 auto;
    /* padding: 0 80px; */
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 20px; */
    /* margin-bottom: min(30px, calc(30 / 1414 * 100vw)); */
}

.business-card {
    position: relative;
    height: min(552px, calc(552 / 1414 * 100vw));
    overflow: hidden;
    /* border-radius: 10px; */
    cursor: pointer;
}

.business-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.business-card:hover .business-card-bg {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 30px; */
    text-align: center;
}

.card-title {
    margin-top: min(217px, calc(217 / 1414 * 100vw));
    /* margin-bottom: auto; */
}

.card-icon {
    position: absolute;
    bottom: min(33px, calc(33 / 1414 * 100vw));
    right: min(33px, calc(33 / 1414 * 100vw));
    width: min(40px, calc(40 / 1414 * 100vw));
    height: min(40px, calc(40 / 1414 * 100vw));
}

.card-icon img {
    width: 100%;
    height: 100%;
}

.card-title {
    font-size: min(40px, calc(40 / 1414 * 100vw));
    /*font-weight: 600;*/
    color: var(--text-white);
    line-height: 1;
     margin-bottom: min(10px, calc(10 / 1414 * 100vw));
    font-family: 'PingFang SC Semibold';
}

.card-subtitle {
    font-size: min(14px, calc(14 / 1414 * 100vw));
     font-weight:100;
    font-family: "PingFang SC Regular";
    /*font-family: 'Inter', sans-serif;*/
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
}

.card-description {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    /*font-weight: 200;*/
    color: var(--text-white);
    line-height: 1.6;
    font-family: 'PingFang SC Semibold';
}

/* News Section */
.news-section {
    padding: min(68px, calc(68 / 1414 * 100vw)) 0 0;
    position: relative;
    z-index: 1;
}

.news-wrapper {
    max-width: 1414px;
    margin: 0 auto;
    padding: 0 min(65px, calc(65 / 1414 * 100vw));
}

.section-header {
    text-align: center;
    /* margin-bottom: min(50px, calc(50 / 1414 * 100vw)); */
}

.section-title {
    font-size: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: min(11px, calc(11 / 1414 * 100vw));
    line-height: 1.1;
}

.section-subtitle {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 400;
    color: var(--text-light);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, min(296px, calc(296 / 1414 * 100vw)));
    gap: min(26px, calc(26 / 1414 * 100vw));
}

.news-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    backdrop-filter: blur(min(23.57px, calc(23.57 / 1414 * 100vw)));
    box-shadow: 0 0 min(94.26px, calc(94.26 / 1414 * 100vw)) rgba(35, 42, 62, 0.5);
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 155.27% 239.57% at 3.01% -18.86%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: -1;
    pointer-events: none;
}

.news-swiper .swiper-slide:hover .news-card::before {
    opacity: 1;
}

.news-swiper .swiper-slide:hover .news-card {
    outline: min(2px, calc(2 / 1414 * 100vw)) solid rgba(10, 130, 255, 1);
    background: rgba(10, 130, 255, 0.3);
}

.news-card:hover::before {
    opacity: 1;
}

.news-card:hover {
    outline: min(2px, calc(2 / 1414 * 100vw)) solid rgba(10, 130, 255, 1);
    background: rgba(10, 130, 255, 0.3);
}

.news-card-inner {
    position: relative;
    padding: min(20px, calc(20 / 1414 * 100vw));
}

.news-card-featured .news-card-inner {
    padding: min(19px, calc(19 / 1414 * 100vw)) min(15px, calc(15 / 1414 * 100vw));
}

.news-image {
    width: 100%;
    height: min(281px, calc(281 / 1414 * 100vw));
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    object-fit: cover;
    margin-bottom: min(20px, calc(20 / 1414 * 100vw));
}

.news-card:not(.news-card-featured) .news-image {
    height: min(282px, calc(282 / 1414 * 100vw));
}

.news-card-info {
    display: flex;
    flex-direction: column;
    gap: min(15px, calc(15 / 1414 * 100vw));
}

.news-title {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 500;
    font-family: "PingFang SC Semibold";
    color: var(--text-white);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.news-author {
    font-size: min(13px, calc(13 / 1414 * 100vw));
    font-weight: 400;
    font-family: 'Manrope', sans-serif;
    color: var(--text-white);
}

.news-date {
    font-size: min(15px, calc(15 / 1414 * 100vw));
    font-weight: 300;
    font-family: 'Manrope', sans-serif;
    color: var(--text-white);
}



@media (max-width: 992px) {
    .header-content {
        padding: 15px 30px;
    }
}

@media (max-width: 768px) {
    .business-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .banner-content {
        /* padding: 60px 20px 40px; */
        /* flex-direction: column; */
        text-align: center;
    }

    .news-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        padding: 30px 20px;
    }

    .section-title {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    
}

/* ============================================
   滚动渐入动画效果
   ============================================ */

/* 基础动画类：初始隐藏状�?*/
.scroll-animate-left {
    opacity: 0;
    transform: translateX(-220px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 400ms;
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(220px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 800ms;
}

.scroll-animate-up {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 300ms;
}

/* 激活状态：显示并移除偏�?*/
.scroll-animate-left.visible,
.scroll-animate-right.visible,
.scroll-animate-up.visible {
    opacity: 1;
    transform: translate(0);
}

/* ============================================
   小屏幕（1127px及以下）响应式样�?
   ============================================ */
@media (max-width: 1127px) {
    .search-box {
        display: none;
    }
}

/* ============================================
   H5小屏幕（480px及以下）响应式样�?
   ============================================ */
@media (max-width: 480px) {
    /* 修复整体布局，确保没有右侧空�?*/
    body {
        overflow-x: hidden;
        width: 100%;
        min-width: 100vw;
    }

    /* 确保所有主要容器占满宽�?*/
    .banner-section,
    .video-section,
    .business-section,
    .news-section,
    .footer {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        left: 0;
    }

    /* 新闻Swiper移动端适配 */
    .news-swiper {
        padding: 10px 40px; 
        /* overflow: visible; */
    }

    .news-swiper .swiper-button-next,
    .news-swiper .swiper-button-prev {
        width: 32px;
        height: 32px;
    }

    .news-swiper .swiper-button-next:after,
    .news-swiper .swiper-button-prev:after {
        font-size: 14px;
    }

    .news-swiper-controls {
        padding: 0 40px;
    }

    /* Banner区域调整 */
    .banner-section {
        overflow: hidden;
    }

    .banner-background {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .bg-decoration {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .bg-decoration img {
        width: 100%;
        max-width: 100%;
    }

    .glow-effect,
    .glow-effect-right {
        display: none;
    }

    /* 背景视觉效果调整 */
    .background-visuals {
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
    }

    .background-visuals .gradient-1,
    .background-visuals .gradient-2 {
        display: none;
    }

    .banner-left {
        padding-top: 60px;
    }

    .banner-right {
        display: none;
    }

    .banner-content {
        padding: 40px 15px;
        flex-direction: column;
        text-align: left;
        width: 100%;
        max-width: 100%;
    }

    .banner-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .banner-subtitle {
        font-size: 16px;
        line-height: 1.4;
    }

    .contact-float {
        margin-top: 15px;
    }

    /* 视频卡片区域调整 */
    .video-section {
        height: auto;
        /* min-height: 100vh; */
        padding: 20px 0;
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .video-container {
        /* min-height: 100vh; */
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .video-card-wrapper {
        /* min-height: 100vh; */
        display: block;
        width: 100%;
        max-width: 100%;
    }

    /* 确保视频内容可见 */
    .video-content-layer {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .video-thumbnail {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    /* 移动端视频箭头调整 */
    .video-arrow {
        width: 40px;
        height: 40px;
        border-width: 1px;
    }

    .video-arrow img {
        width: 16px;
        height: 16px;
    }

    .arrow-left {
        left: 10px;
    }

    .arrow-right {
        right: 10px;
    }

    /* 播放按钮调整 */
    .play-button {
        width: 60px;
        height: 60px;
    }

    .play-button img {
        width: 60px;
        height: 60px;
    }

    /* 隐藏右侧浮动的联系卡片和了解更多按钮 */
    .contact-glass-card {
        display: none;
    }

    .learn-more-btn-container {
        display: none;
    }

    /* 调整视频标题位置和大�?*/
    .video-title {
        position: relative;
        top: auto;
        left: auto;
        margin: 20px 15px;
        text-align: center;
        z-index: 10;
        width: calc(100% - 30px);
    }

    .title-en {
        font-size: 28px;
        line-height: 1.3;
    }

    .title-cn {
        font-size: 20px;
        margin-top: 8px;
    }

    /* 调整about-overlay位置和大�?*/
    .about-overlay {
        position: relative;
        bottom: auto;
        left: auto;
        width: calc(100% - 30px);
        margin: 20px 15px;
        padding: 15px;
    }

    .about-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .about-text {
        font-family: 'PingFang SC Medium', 'PingFang SC', sans-serif;
        font-size: 14px;
        line-height: 1.5;
    }

    /* 调整video-indicators */
    .video-indicators {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        width: auto;
        max-width: calc(100% - 30px);
    }

    /* 确保视频卡片区域在小屏幕上占满宽�?*/
    .video-card-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* 移除任何可能导致右侧空白的样�?*/
    .video-section,
    .video-container,
    .video-card-wrapper,
    .video-content-layer {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        padding: 0;
        margin: 0;
    }

    .video-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 60px;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   新闻Swiper样式 - 控制器独立在Swiper外部
   ============================================ */
.news-swiper-container {
    width: 100%;
    max-width: 1414px;
    margin: 0 auto;
    padding: 10px 0;
}

.news-swiper-container .news-swiper {
    width: 100%;
    padding: 40px 20px;
    position: relative;
}

.news-swiper .swiper-wrapper {
    align-items: stretch;
}

.news-swiper .swiper-slide {
    width: min(296px, calc(296 / 1414 * 100vw));
    height: min(392px, calc(392 / 1414 * 100vw));
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 悬停时当前 slide 放大，以中心为基准 */
.news-swiper .swiper-slide:hover {
    transform: scale(1.08);
    z-index: 100;
}

.news-swiper {
    overflow: visible;
}

.news-swiper-container {
    overflow: visible;
}

.news-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Swiper控制器 - 独立在Swiper下方 */
.news-swiper-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(40px, calc(40 / 1414 * 100vw));
    margin-top: min(20px, calc(20 / 1414 * 100vw));
    padding: 0 60px;
}

/* 自定义导航按钮 */
.swiper-custom-prev,
.swiper-custom-next {
    width: min(44px, calc(44 / 1414 * 100vw));
    height: min(44px, calc(44 / 1414 * 100vw));
    background: rgba(10, 130, 255, 0.8);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.swiper-custom-prev:hover,
.swiper-custom-next:hover {
    background: rgba(10, 130, 255, 1);
    transform: scale(1.1);
}

.swiper-custom-prev:after,
.swiper-custom-next:after {
    font-family: swiper-icons;
    font-size: min(18px, calc(18 / 1414 * 100vw));
    font-weight: bold;
}

.swiper-custom-prev:after {
    content: 'prev';
}

.swiper-custom-next:after {
    content: 'next';
}

.swiper-custom-prev.swiper-button-disabled,
.swiper-custom-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 自定义分页器 */
.swiper-custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(12px, calc(12 / 1414 * 100vw));
}

.swiper-custom-pagination .swiper-pagination-bullet {
    width: min(10px, calc(10 / 1414 * 100vw));
    height: min(10px, calc(10 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-custom-pagination .swiper-pagination-bullet-active {
    background: #0A82FF;
    width: min(24px, calc(24 / 1414 * 100vw));
    border-radius: min(5px, calc(5 / 1414 * 100vw));
}

/* ============================================
   查看更多按钮样式
   ============================================ */
.news-view-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #0A82FF 0%, #133CE9 100%);
    border: none;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(10, 130, 255, 0.3);
}

.btn-view-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(10, 130, 255, 0.5);
}

.btn-view-more .arrow-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.btn-view-more:hover .arrow-icon {
    transform: translateX(4px);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .news-swiper {
        padding: 20px 40px;
    }

    .news-swiper-controls {
        padding: 0 40px;
        gap: 20px;
    }

    .swiper-custom-prev,
    .swiper-custom-next {
        width: 36px;
        height: 36px;
    }

    .swiper-custom-prev:after,
    .swiper-custom-next:after {
        font-size: 14px;
    }

    .swiper-custom-pagination {
        gap: 8px;
    }

    .swiper-custom-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .swiper-custom-pagination .swiper-pagination-bullet-active {
        width: 20px;
    }

    .btn-view-more {
        padding: 14px 32px;
        font-size: 14px;
    }

    .btn-view-more .arrow-icon {
        width: 16px;
        height: 16px;
    }
}