/* Dropdown submenu styles with GSAP animation support */
.gnavul li.has-submenu { 
    position: relative; 
}

.gnavul li .submenu { 
    display: block; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    min-width: 220px; 
    background: #fff; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
    border: 1px solid #eee; 
    z-index: 999; 
    list-style: none; 
    margin: 0; 
    padding: 8px 0; 
    /* Let GSAP control visibility, but set fallback for no-JS */
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
}

.gnavul li .submenu li { 
    margin: 0; 
    padding: 0; 
}

.gnavul li .submenu a { 
    display: block; 
    height: auto; 
    padding: 10px 16px; 
    white-space: nowrap; 
    text-align: left; 
    line-height: 1.6; 
}

.gnavul li .submenu a:hover { 
    background: #f5f8fb; 
    color: #1E50FF; 
}

/* Fallback for when GSAP sets .open class */
.gnavul li.has-submenu.open > .submenu { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
}

/* Override for mobile */
@media screen and (max-width: 800px){
    .gnavul li.has-submenu { 
        width: 100%; 
        position: relative;
    }
    
    /* 移动端完全隐藏子菜单 */
    .gnavul li.has-submenu > .submenu { 
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 移动端移除主菜单项的箭头指示 */
    .gnavul li.has-submenu > a::after {
        display: none !important;
    }
    
    /* 让主菜单项在移动端可以正常点击跳转 */
    .gnavul li.has-submenu > a {
        pointer-events: auto !important;
    }
}

/* Additional mobile styles for smaller screens */
@media screen and (max-width: 480px){
    .gnavul li.has-submenu > .submenu a { 
        padding: 10px 15px !important;
        font-size: 13px !important;
    }
    
    .gnavul li.has-submenu > .submenu a:hover { 
        padding-left: 20px !important;
    }
}

/* Force submenu anchors not to inherit header flex/height styles */
.head-r .gnavul li.has-submenu > .submenu a{ 
    display:block !important; 
    height:auto !important; 
    align-items: initial !important; 
    justify-content: initial !important; 
    line-height: 1.5; 
}

/* Company name styling */
.company-name {
    font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeitiSC-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #0f2164;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.company-name:hover {
    color: #0a3fcc;
    text-decoration: none;
}

/* Mobile adaptations for company name */
@media screen and (max-width: 1200px){
    .company-name {
        font-size: 16px;
        letter-spacing: 0.3px;
    }
}

@media screen and (max-width: 800px){
    .company-name {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.2px;
        line-height: 1.3;
    }
}

@media screen and (max-width: 480px){
    .company-name {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1px;
        line-height: 1.4;
    }
}

/* 集团介绍卡片样式 */
.group-intro-wrap {
    margin-top: 80px;
    padding: 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

/* 动态背景层 */
.group-intro-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(119, 198, 255, 0.3) 0%, transparent 50%);
    animation: floatingBg 20s ease-in-out infinite;
}

/* 添加粒子效果 */
.group-intro-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.4), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: particles 15s linear infinite;
}

@keyframes particles {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200px, -100px);
    }
}

@keyframes floatingBg {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        filter: hue-rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(1deg);
        filter: hue-rotate(30deg);
    }
    66% {
        transform: translateY(10px) rotate(-1deg);
        filter: hue-rotate(-30deg);
    }
}

.group-intro-wrap .inner1080 {
    position: relative;
    z-index: 2;
}

.group-intro-wrap h2,
.group-intro-wrap h3 {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 1201px){
.group-intro-wrap h2 {
    animation: titleGlow 3s ease-in-out infinite alternate;
}

.group-intro-wrap h3 {
    animation: titleFloat 4s ease-in-out infinite;
}

}


@keyframes titleGlow {
    0% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.2);
    }
    100% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2);
    }
}

@keyframes titleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.group-desc {
    margin-bottom: 60px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.company-cards-wrap {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    perspective: 1000px;
}

.company-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    flex: 0 0 calc(33.333% - 20px);
    max-width: 400px;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 16px;
    position: relative;
    transform-style: preserve-3d;
}

/* 拼图突起悬浮效果 */
.company-card:hover {
    transform: translateY(-20px) rotateX(3deg) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 15px 35px rgba(0, 0, 0, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

/* 卡片边缘光效 */
.company-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.company-card:hover::before {
    opacity: 1;
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
    100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
}

.company-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.company-img img {
    width: 90%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.company-card:hover .company-img img {
    transform: scale(1.05);
}

.company-info {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.company-name {
    margin-bottom: 8px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    text-align: center;
}

.company-location {
    text-align: center;
    margin-bottom: 15px;
    color: #888;
    font-weight: 500;
}

.company-details {
    margin-bottom: 25px;
    line-height: 1.6;
    color: #000;
}

.company-details p {
    margin-bottom: 5px;
}

.company-btn-wrap {
    text-align: center;
}

.company-btn {
    display: inline-block;
    padding: 10px 25px;
    background: #1E50FF;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid #1E50FF;
}

.company-btn:hover {
    background: transparent;
    color: #1E50FF;
    transform: translateY(-2px);
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
    .company-cards-wrap {
        gap: 25px;
    }
    
    .company-card {
        flex: 0 0 calc(50% - 15px);
    }
    
    /* 减少移动端的3D效果强度 */
    .company-card:hover {
        transform: translateY(-15px) rotateX(4deg) rotateY(2deg) scale(1.01);
    }
}

@media screen and (max-width: 768px) {
    .group-intro-wrap {
        margin-top: 40px;
        padding: 60px 0;
    }
    
    /* 简化背景动画以提升性能 */
    .group-intro-wrap::before {
        animation: floatingBg 30s ease-in-out infinite;
    }
    
    .group-intro-wrap::after {
        opacity: 0.5;
        animation: particles 20s linear infinite;
    }
    
    .company-cards-wrap {
        gap: 20px;
        perspective: 800px;
    }
    
    .company-card {
        flex: 0 0 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .company-card:hover {
        transform: translateY(-10px) rotateX(2deg) scale(1.01);
    }
    
    .company-img {
        height: 180px;
    }
    
    .company-info {
        padding: 20px;
    }
}

@media screen and (max-width: 480px) {
    .group-desc {
        font-size: 14px;
        margin-bottom: 40px;
    }
    
    .company-img {
        height: 160px;
    }
    
    .company-info {
        padding: 18px;
    }
    
    .company-name {
        font-size: 16px;
    }
    
    .company-details {
        font-size: 13px;
    }
}