/* Robotcis Institute Styles */

/* =========================
   滚动渐入动画（参考首页风格）
   ========================= */

/* 基础动画类：初始隐藏状态 */
.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 {
    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.visible,
.scroll-animate-left.visible,
.scroll-animate-right.visible {
    opacity: 1;
    transform: translate(0);
}

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

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   全局样式
   ========================= */
:root {
    --primary-blue: #0078FF;
    --primary-dark: #003CF1;
    --secondary-blue: #0A82FF;
    --background-dark: #000000;
    --background-alt: #0A0E27;
    --text-white: #FFFFFF;
    --text-gray: rgba(255, 255, 255, 0.92);
    --text-light: rgba(255, 255, 255, 0.65);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    font-family: 'PingFang SC Light';
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

.robotics-page {
    min-height: 100vh;
    position: relative;
}

/* 页面缩放容器 - 限制最大宽度1414px并居中 */
.page-scale {
    position: relative;
    width: 100%;
    max-width: 1414px;
    margin: 0 auto;
}

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

.background-visuals .gradient-1 {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    left: min(-300px, calc(-300 / 1414 * 100vw));
    top: min(-300px, calc(-300 / 1414 * 100vw));
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 130, 255, 0.15) 0%, rgba(168, 55, 255, 0) 100%);
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
}

.background-visuals .gradient-2 {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    right: min(-400px, calc(-400 / 1414 * 100vw));
    top: min(200px, calc(200 / 1414 * 100vw));
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(168, 55, 255, 0.1) 0%, rgba(168, 55, 255, 0) 100%);
    animation: float 25s ease-in-out infinite;
    animation-delay: 5s;
    pointer-events: none;
}

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(min(20px, calc(20 / 1414 * 100vw)), min(-20px, calc(-20 / 1414 * 100vw))) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* =========================
   Banner Section
   ========================= */
.banner-section {
    /* padding: min(40px, calc(40 / 1414 * 100vw)) 0 min(80px, calc(80 / 1414 * 100vw)); */
    position: relative;
    background: transparent;
    margin-top: min(100px, calc(100 / 1414 * 100vw));
}

.banner-title {
    text-align: center;
    /* margin-bottom: min(54px, calc(54 / 1414 * 100vw)); */
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.banner-title h1{
    font-size: min(45px, calc(45 / 1414 * 100vw));
    font-weight: 600;
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 10.096153616905212%, rgba(255, 255, 255, 1) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
    letter-spacing: 0;
}
.banner-title p {
    font-size: min(25px, calc(25 / 1414 * 100vw));
    font-weight: 600;
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 10.096153616905212%, rgba(255, 255, 255, 1) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
    letter-spacing: 0;
}
.banner-container {
    position: relative;
    width: min(896px, calc(860 / 1414 * 100vw));
    height: min(520px, calc(520 / 1414 * 100vw));
    margin: 0 auto;
}

/* 左右两侧的容器区域（按设计稿定位） */
.banner-left-section,
.banner-right-section {
    position: absolute;
    top: 50%;
    width: min(320px, calc(320 / 1414 * 100vw));
    height: min(420px, calc(420 / 1414 * 100vw));
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
}

.banner-left-section {
    left: 0;
}

.banner-right-section {
    right: 0;
}

/* icon+line容器 */
.icon-line-container {
    position: absolute;
    display: flex;
    align-items: center;
    gap: min(-14px, calc(-14 / 1414 * 100vw));
    pointer-events: auto;
}

/* 左侧容器：icon在左，line在右 */
.banner-left-section .icon-line-container {
    left: 0;
    flex-direction: row;
}

/* 右侧容器：line在左，icon在右 */
.banner-right-section .icon-line-container {
    right: 0;
    flex-direction: row;
}

/* 三组图标的横向位置为不规则排布（按设计稿微调，差距加大） */
.banner-left-section .icon-line-container-1 { top: min(30px, calc(30 / 1414 * 100vw)); left: 0; }
/* 2号相对1号更靠中间（向右） */
.banner-left-section .icon-line-container-2 { top: min(170px, calc(170 / 1414 * 100vw)); left: min(52px, calc(52 / 1414 * 100vw)); }
/* 3号相对1号更靠外侧（向左） */
.banner-left-section .icon-line-container-3 { top: min(315px, calc(315 / 1414 * 100vw)); left: max(-24px, calc(-24 / 1414 * 100vw)); }

/* 右侧以2号为基准：1号更靠左；3号比1号更靠右但仍比2号靠左 */
.banner-right-section .icon-line-container-1 { top: min(40px, calc(40 / 1414 * 100vw)); right: min(78px, calc(78 / 1414 * 100vw)); }
.banner-right-section .icon-line-container-2 { top: min(160px, calc(160 / 1414 * 100vw)); right: 0; }
.banner-right-section .icon-line-container-3 { top: min(300px, calc(300 / 1414 * 100vw)); right: min(90px, calc(90 / 1414 * 100vw)); }
.banner-right-section .icon-line-container-2 .line-img{
    width: min(192px, calc(192 / 1414 * 100vw));
}

/* 图标样式 */
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-align: center;
    width: min(115px, calc(115 / 1414 * 100vw));
    opacity: 0;
    transform: translateY(30px);
    animation: iconFadeInUp 0.6s ease forwards;
}

/* 页面加载时依次由下往上渐变出现动画 */
@keyframes iconFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左侧 icon-item 依次出现 */
.banner-left-section .icon-line-container:nth-child(1) .icon-item {
    animation-delay: 0.1s;
}
.banner-left-section .icon-line-container:nth-child(2) .icon-item {
    animation-delay: 0.3s;
}
.banner-left-section .icon-line-container:nth-child(3) .icon-item {
    animation-delay: 0.5s;
}

/* 右侧 icon-item 依次出现 */
.banner-right-section .icon-line-container:nth-child(1) .icon-item {
    animation-delay: 0.7s;
}
.banner-right-section .icon-line-container:nth-child(2) .icon-item {
    animation-delay: 0.9s;
}
.banner-right-section .icon-line-container:nth-child(3) .icon-item {
    animation-delay: 1.1s;
}

.icon-item:hover {
    transform: translateY(min(-6px, calc(-6 / 1414 * 100vw)));
}

.icon-item.active {
    transform: scale(1.05);
}

.icon-img {
    width: min(52px, calc(52 / 1414 * 100vw));
    height: min(52px, calc(52 / 1414 * 100vw));
    margin-bottom: min(8px, calc(8 / 1414 * 100vw));
    transition: transform 0.3s ease;
}

.icon-item:hover .icon-img {
    transform: scale(1.05);
}

.icon-text {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: #fff;
    text-align: center;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
    min-width: min(140px, calc(140 / 1414 * 100vw));
}

/* 中间内容区域 */
.banner-content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(520px, calc(520 / 1414 * 100vw));
    height: min(520px, calc(520 / 1414 * 100vw));
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* 背景视频（bananer-bg.mp4）：放大并保持居中，边缘渐隐融合 */
.banner-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(400px, calc(400 / 1414 * 100vw));
    height:min(400px, calc(400 / 1414 * 100vw));
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) scale(1.5);
    transform-origin: center;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 58%, rgba(0,0,0,0.85) 68%, rgba(0,0,0,0.2) 82%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 58%, rgba(0,0,0,0.85) 68%, rgba(0,0,0,0.2) 82%, rgba(0,0,0,0) 100%);
}

/* 详细文字展示区域（圆形对齐） */
.detail-display {
    position: absolute;
    left: 50%;
    /* 下移一点，避免覆盖上方标题 */
    top: 46%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: min(480px, calc(480 / 1414 * 100vw));
    height: min(480px, calc(480 / 1414 * 100vw));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* 去掉背景遮罩 */
    /* background: transparent; */
    padding: min(30px, calc(30 / 1414 * 100vw));
    box-sizing: border-box;
}

/* 线条样式 */
.line-img {
    display: block;
    width: min(116px, calc(116 / 1414 * 100vw));
    height: auto;
    z-index: 1;
    opacity: 1;
    flex-shrink: 0;
}

.banner-left-section .line-img {
    margin-left: min(-10px, calc(-10 / 1414 * 100vw));
}

.banner-right-section .line-img {
    margin-right: min(-10px, calc(-10 / 1414 * 100vw));
}
.banner-left-section .icon-line-container-1 .line-img {

    width: min(181px, calc(181 / 1414 * 100vw));

}
.banner-left-section .icon-line-container-3 .line-img {

    width: min(203px, calc(203 / 1414 * 100vw));

}

.detail-text {
    font-size: min(24px, calc(24 / 1414 * 100vw));
    color: #fff;
    text-align: center;
    line-height: 1.1;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 默认显示的图片 */
.detail-default-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(267px, calc(267 / 1414 * 100vw));
    height: min(67px, calc(67 / 1414 * 100vw));
    object-fit: contain;
    z-index: 2;
}

/* =========================
   Intro / Experience / Dishes / Franchise / Footer
   ========================= */
.intro-section {
    position: relative;
    width: min(1436px, calc(1436 / 1414 * 100vw));
    height: min(755px, calc(755 / 1414 * 100vw));
    margin: min(166px, calc(166 / 1414 * 100vw)) auto 0;
}

.intro-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.intro-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 视频播放遮罩层 */
.intro-video-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.intro-video-overlay.active {
    display: flex;
}

.intro-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro-video-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 101;
    transition: opacity 0.3s ease;
}

.intro-video-close:hover {
    opacity: 0.7;
}

.intro-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: min(25px, calc(25 / 1414 * 100vw));
}

.intro-logo {
    position: absolute;
    left: min(25px, calc(25 / 1414 * 100vw));
    top: min(25px, calc(25 / 1414 * 100vw));
    width: min(295px, calc(295 / 1414 * 100vw));
    height: auto;
}

.intro-text {
    position: absolute;
    left: min(344px, calc(344 / 1414 * 100vw));
    top: min(36px, calc(36 / 1414 * 100vw));
    right: min(60px, calc(60 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.85);
    font-size: min(16px, calc(16 / 1414 * 100vw));
    line-height: 1.4;
    text-align: left;
    font-weight: 200;
    margin: 0;
    color: #ffffff;
}

/* 播放视频按钮 */
.intro-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(10px, calc(10 / 1414 * 100vw));
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}

.intro-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.intro-play-icon {
    width: min(80px, calc(80 / 1414 * 100vw));
    height: auto;
}

.intro-play-text {
    color: #fff;
    font-size: min(14px, calc(14 / 1414 * 100vw));
    font-weight: 500;
}

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

.section-title {
    font-size: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 500;
    color: #fff;
}

.section-subtitle {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    color: #A2A2A2;
}

.experience-section {
    position: relative;
    padding: min(40px, calc(40 / 1414 * 100vw)) 0 min(80px, calc(80 / 1414 * 100vw));
}

.experience-stage {
    position: relative;
    width: min(1180px, calc(1180 / 1414 * 100vw));
    margin: 0 auto;
}

/* Swiper 容器 */
.experience-swiper {
    width: 100%;
    padding: min(20px, calc(20 / 1414 * 100vw)) 0;
}

.experience-swiper .swiper-slide {
    width: min(264px, calc(264 / 1414 * 100vw));
    height: min(306px, calc(306 / 1414 * 100vw));
}

.experience-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(10, 130, 255, 0.7);
    padding: min(18px, calc(18 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw));
    color: #fff;
    z-index: 2;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.experience-card:hover {
    border-color: #fff;
    box-shadow: 0 min(16px, calc(16 / 1414 * 100vw)) min(40px, calc(40 / 1414 * 100vw)) rgba(0, 0, 0, 0.45);
}

/* 黑色遮罩层 - 默认显示 */
.experience-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: opacity 0.3s ease;
}

.experience-card:hover::before {
    opacity: 0;
}

/* hover 提示文字 - 默认隐藏，hover时显示 */
.experience-card::after {
    content: attr(data-hover);
    position: absolute;
    left: 50%;
    bottom: min(20px, calc(20 / 1414 * 100vw));
    transform: translateX(-50%);
    background: #006BFF;
    padding: min(8px, calc(8 / 1414 * 100vw)) min(18px, calc(18 / 1414 * 100vw));
    border-radius: min(30px, calc(30 / 1414 * 100vw));
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.experience-card:hover::after {
    opacity: 1;
}

/* 文字内容 - 默认显示白色，hover时隐藏 */
.experience-card h3 {
    position: relative;
    z-index: 2;
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    margin: min(100px, calc(100 / 1414 * 100vw)) auto min(10px, calc(10 / 1414 * 100vw));
    color: #ffffff;
    opacity: 1;
    transition: opacity 0.3s ease;
    width: min(186px, calc(186 / 1414 * 100vw));
    text-align: center;
}

.experience-card:hover h3 {
    opacity: 0;
}

.experience-card p {
    position: relative;
    z-index: 2;
    font-size: min(14px, calc(14 / 1414 * 100vw));
    line-height: 1.6;
    color: #ffffff;
    opacity: 1;
    transition: opacity 0.3s ease;
    width: min(186px, calc(186 / 1414 * 100vw));
    margin: 0 auto;
    text-align: left;
}

.experience-card:hover p {
    opacity: 0;
}

.experience-card-icon {
    position: relative;
    z-index: 2;
    width: min(38px, calc(38 / 1414 * 100vw));
    height: min(38px, calc(38 / 1414 * 100vw));
    opacity: 1;
    transition: opacity 0.3s ease;
}

.experience-card:hover .experience-card-icon {
    opacity: 0;
}

.experience-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.9;
}

/* Swiper 容器定位 */
.experience-swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: min(60px, calc(60 / 1414 * 100vw));
}

.experience-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* Swiper 分页指示器 */
.experience-dots {
    bottom: min(20px, calc(20 / 1414 * 100vw)) !important;
    left: 0 !important;
    text-align: left !important;
    transform: none !important;
    width: auto !important;
}

.experience-dots .swiper-pagination-bullet {
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    margin: 0 min(5px, calc(5 / 1414 * 100vw)) !important;
}

.experience-dots .swiper-pagination-bullet-active {
    background: #006BFF;
}

/* 左右翻页按钮 */
.experience-nav-prev,
.experience-nav-next {
    width: min(40px, calc(40 / 1414 * 100vw));
    height: min(40px, calc(40 / 1414 * 100vw));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: min(10px, calc(10 / 1414 * 100vw));
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.experience-nav-prev {
    background-image: url('/assets/design/RoboticsInstitute/left.png');
    right: min(50px, calc(50 / 1414 * 100vw));
    left: auto !important;
}

.experience-nav-prev:hover {
    background-image: url('/assets/design/RoboticsInstitute/left-hover.png');
}

.experience-nav-next {
    background-image: url('/assets/design/RoboticsInstitute/right.png');
    right: 0;
}

.experience-nav-next:hover {
    background-image: url('/assets/design/RoboticsInstitute/right-hover.png');
}

/* 隐藏默认的 Swiper 导航按钮样式 */
.experience-nav-prev::after,
.experience-nav-next::after {
    display: none;
}

.dishes-section {
    position: relative;
    padding: min(40px, calc(40 / 1414 * 100vw)) 0 min(80px, calc(80 / 1414 * 100vw));
}

.dishes-hero {
    width: min(980px, calc(980 / 1414 * 100vw));
    margin: 0 auto min(46px, calc(46 / 1414 * 100vw));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(24px, calc(24 / 1414 * 100vw));
}

.dish-item {
    text-align: center;
}

.dish-item img {
    width: min(220px, calc(220 / 1414 * 100vw));
    height: min(183px, calc(183 / 1414 * 100vw));
    object-fit: cover;
    border-radius: min(8px, calc(8 / 1414 * 100vw));
    box-shadow: 0 min(12px, calc(12 / 1414 * 100vw)) min(30px, calc(30 / 1414 * 100vw)) rgba(0, 0, 0, 0.35);
}

.dish-item span {
    display: block;
    margin-top: min(12px, calc(12 / 1414 * 100vw));
    font-size: min(18px, calc(18 / 1414 * 100vw));
    color: #fff;
}

.dish-features-container {
    width: min(1170px, calc(1170 / 1414 * 100vw));
    margin: 0 auto;
}

/* 5个及以下网格布局 */
.dish-features-grid {
    display: flex;
    justify-content: center;
    gap: min(16px, calc(16 / 1414 * 100vw));
}

/* Swiper容器 */
.dish-feature-swiper {
    width: 100%;
    padding: min(20px, calc(20 / 1414 * 100vw)) 0 min(60px, calc(60 / 1414 * 100vw));
}

.dish-feature-swiper .swiper-slide {
    width: min(195px, calc(195 / 1414 * 100vw));
    height: min(234px, calc(234 / 1414 * 100vw));
}

.dish-feature-item {
    background: rgba(255, 255, 255, 0.06);
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    width: min(195px, calc(195 / 1414 * 100vw));
    height: min(234px, calc(234 / 1414 * 100vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 黑色透明蒙版 - 默认显示 */
.dish-feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* 选中时蒙版隐藏 */
.dish-feature-item:hover::before {
    opacity: 0;
}

.dish-feature-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

/* Swiper分页指示器 */
.dish-feature-dots {
    bottom: min(20px, calc(20 / 1414 * 100vw)) !important;
}

.dish-feature-dots .swiper-pagination-bullet {
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    margin: 0 min(5px, calc(5 / 1414 * 100vw)) !important;
}

.dish-feature-dots .swiper-pagination-bullet-active {
    background: #006BFF;
}

/* Swiper导航按钮 */
.dish-feature-nav-prev,
.dish-feature-nav-next {
    width: min(40px, calc(40 / 1414 * 100vw));
    height: min(40px, calc(40 / 1414 * 100vw));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: min(10px, calc(10 / 1414 * 100vw));
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.dish-feature-nav-prev {
    background-image: url('/assets/design/RoboticsInstitute/left.png');
    right: min(50px, calc(50 / 1414 * 100vw));
    left: auto !important;
}

.dish-feature-nav-prev:hover {
    background-image: url('/assets/design/RoboticsInstitute/left-hover.png');
}

.dish-feature-nav-next {
    background-image: url('/assets/design/RoboticsInstitute/right.png');
    right: 0;
}

.dish-feature-nav-next:hover {
    background-image: url('/assets/design/RoboticsInstitute/right-hover.png');
}

.dish-feature-nav-prev::after,
.dish-feature-nav-next::after {
    display: none;
}

.franchise-section {
    position: relative;
    padding: min(40px, calc(40 / 1414 * 100vw)) 0 min(100px, calc(100 / 1414 * 100vw));
}

.franchise-stage {
    position: relative;
    width: min(1189px, calc(1189 / 1414 * 100vw));
    height: min(760px, calc(760 / 1414 * 100vw));
    margin: 0 auto;
}

.franchise-bg {
    position: absolute;
    left: 0;
    top: min(66px, calc(66 / 1414 * 100vw));
    width: min(1189px, calc(1189 / 1414 * 100vw));
    height: min(696px, calc(696 / 1414 * 100vw));
    object-fit: contain;
}

.franchise-node {
    position: absolute;
    width: min(160px, calc(160 / 1414 * 100vw));
    text-align: left;
    color: #fff;
    font-size: min(14px, calc(14 / 1414 * 100vw));
}

.franchise-node .node-title {
    display: block;
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
}

.franchise-node .node-desc {
    display: block;
    margin-top: min(6px, calc(6 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.85);
}

.franchise-node.node-1 { left: min(325px, calc(325 / 1414 * 100vw)); top: min(210px, calc(210 / 1414 * 100vw)); }
.franchise-node.node-2 { left: min(150px, calc(150 / 1414 * 100vw)); top: min(450px, calc(450 / 1414 * 100vw)); }
.franchise-node.node-3 { left: min(350px, calc(350 / 1414 * 100vw)); top: min(725px, calc(725 / 1414 * 100vw)); }
.franchise-node.node-4 { right: min(140px, calc(140 / 1414 * 100vw)); top: min(700px, calc(700 / 1414 * 100vw)); }
.franchise-node.node-5 { right: min(180px, calc(180 / 1414 * 100vw)); top: min(250px, calc(250 / 1414 * 100vw)); text-align: right; }
.franchise-node.node-6 { right: min(00px, calc(00 / 1414 * 100vw)); top: min(80px, calc(80 / 1414 * 100vw)); }

.franchise-keyword {
    position: absolute;
    font-size: min(18px, calc(18 / 1414 * 100vw));
    color: #fff;
    font-weight: 600;
}

.franchise-keyword.keyword-1 { left: min(620px, calc(620 / 1414 * 100vw)); top: min(320px, calc(320 / 1414 * 100vw)); }
.franchise-keyword.keyword-2 { left: min(680px, calc(680 / 1414 * 100vw)); top: min(455px, calc(455 / 1414 * 100vw)); }
.franchise-keyword.keyword-3 { left: min(520px, calc(520 / 1414 * 100vw)); top: min(420px, calc(420 / 1414 * 100vw)); }

.franchise-cta {
    position: absolute;
    left: 50%;
    bottom: min(36px, calc(36 / 1414 * 100vw));
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.4);
    padding: min(10px, calc(10 / 1414 * 100vw)) min(22px, calc(22 / 1414 * 100vw));
    border-radius: min(18px, calc(18 / 1414 * 100vw));
    cursor: pointer;
}

/* =========================
   响应式设计
   ========================= */
@media (max-width: 1280px) {
    .banner-container {
        width: 100%;
        padding: 0 min(24px, calc(24 / 1414 * 100vw));
        height: min(520px, calc(520 / 1414 * 100vw));
    }

    .banner-left-section,
    .banner-right-section {
        width: min(280px, calc(280 / 1414 * 100vw));
        height: min(400px, calc(400 / 1414 * 100vw));
    }

    .line-img {
        width: min(200px, calc(200 / 1414 * 100vw));
    }

    .banner-content {
        width: min(460px, calc(460 / 1414 * 100vw));
        height: min(460px, calc(460 / 1414 * 100vw));
    }

    .detail-display {
        width: min(340px, calc(340 / 1414 * 100vw));
        height: min(340px, calc(340 / 1414 * 100vw));
    }

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

    .icon-text {
        font-size: min(13px, calc(13 / 1414 * 100vw));
    }
}

@media (max-width: 900px) {
    .banner-container {
        height: min(460px, calc(460 / 1414 * 100vw));
    }

    .banner-left-section,
    .banner-right-section {
        width: min(240px, calc(240 / 1414 * 100vw));
        height: min(360px, calc(360 / 1414 * 100vw));
    }

    .line-img {
        width: min(180px, calc(180 / 1414 * 100vw));
    }

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

    .icon-text {
        font-size: min(13px, calc(13 / 1414 * 100vw));
    }

    .banner-content {
        width: min(400px, calc(400 / 1414 * 100vw));
        height: min(400px, calc(400 / 1414 * 100vw));
    }

    .detail-display {
        width: min(310px, calc(310 / 1414 * 100vw));
        height: min(310px, calc(310 / 1414 * 100vw));
        padding: min(22px, calc(22 / 1414 * 100vw));
    }
}

@media (max-width: 768px) {
    .banner-main-title {
        font-size: min(32px, calc(32 / 1414 * 100vw));
    }

    .banner-container {
        width: 100%;
        height: auto;
        padding: 0 min(16px, calc(16 / 1414 * 100vw));
    }

    .banner-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: min(320px, calc(320 / 1414 * 100vw));
        height: min(320px, calc(320 / 1414 * 100vw));
        margin: 0 auto;
    }

    .banner-left-section,
    .banner-right-section {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        gap: min(16px, calc(16 / 1414 * 100vw));
        margin-top: min(18px, calc(18 / 1414 * 100vw));
        pointer-events: auto;
    }

    .icon-line-container {
        position: static;
        flex-direction: column;
        gap: min(6px, calc(6 / 1414 * 100vw));
    }

    .line-img {
        display: none;
    }

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

    .icon-text {
        font-size: min(11px, calc(11 / 1414 * 100vw));
        min-width: auto;
    }

    .detail-display {
        width: min(260px, calc(260 / 1414 * 100vw));
        height: min(260px, calc(260 / 1414 * 100vw));
    }

    .detail-text {
        font-size: min(12px, calc(12 / 1414 * 100vw));
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .banner-section {
        padding: min(32px, calc(32 / 1414 * 100vw)) 0 min(50px, calc(50 / 1414 * 100vw));
    }

    .banner-main-title {
        font-size: min(26px, calc(26 / 1414 * 100vw));
    }

    .banner-content {
        width: min(260px, calc(260 / 1414 * 100vw));
        height: min(260px, calc(260 / 1414 * 100vw));
    }

    .detail-display {
        width: min(230px, calc(230 / 1414 * 100vw));
        height: min(230px, calc(230 / 1414 * 100vw));
        padding: min(18px, calc(18 / 1414 * 100vw));
    }

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

/* 确保所有内容在背景之上 */
section {
    position: relative;
    z-index: 10;
}

/* =========================
   联系信息面板 - 位置样式
   ========================= */
/* 注意: 基础样式已在 contact-panel.css 中定义，此处只保留位置相关样式 */

/* 机器人图标触发器位置 */
.robotics-page .robot-icon-trigger {
    position: absolute;
    top: min(609px, calc(609 / 1414 * 100vw));
    right: min(161px, calc(161 / 1414 * 100vw));
}

/* 联系信息面板位置 */
.robotics-page .contact-panel {
    position: absolute;
    top: min(680px, calc(680 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
}

/* 初始状态为显示（active） */
.robotics-page .contact-panel.active {
    transform: translateX(-50%) translateY(0);
}

/* 响应式位置调整 */
@media (max-width: 768px) {
    .robotics-page .robot-icon-trigger {
        position: absolute;
        top: min(600px, calc(600 / 1414 * 100vw));
        right: 20px;
    }

    .robotics-page .contact-panel {
        position: absolute;
        top: min(650px, calc(650 / 1414 * 100vw));
    }
}