/* =================================
   争鸣视听 V3 高级视觉系统
================================= */


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


html{
    scroll-behavior:smooth;
}


body{

    background:#030504;

    color:#fff;

    font-family:

    "Microsoft YaHei",
    Arial,
    sans-serif;

    overflow-x:hidden;

}


a{

    color:white;

    text-decoration:none;

}



section{

    padding:120px 8%;

}




/* ===============================
背景动态光
================================ */


.bg-light{

    position:fixed;

    width:700px;

    height:700px;

    right:-200px;

    top:100px;

    background:

    radial-gradient(

    circle,

    rgba(0,230,168,.35),

    transparent 65%

    );


    filter:blur(80px);

    z-index:-1;

}






/* ===============================
顶部导航
================================ */


header{


height:90px;

padding:0 8%;

display:flex;

align-items:center;

justify-content:space-between;

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;


background:

rgba(0,0,0,.0);


backdrop-filter:blur(20px);


}




.logo{


font-size:30px;

font-weight:600;

letter-spacing:5px;


}



.logo span{


display:block;

font-size:11px;

letter-spacing:5px;

color:#00e6a8;


}




nav{


display:flex;

gap:45px;


}


nav a{


font-size:16px;

color:#ddd;

transition:.3s;


}



nav a:hover{


color:#00e6a8;


}







/* ===============================
Hero首屏
================================ */


.hero{


min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;


}




.hero-text{


width:45%;


}



.hero-text h1{


font-size:22px;


line-height:1.15;


font-weight:300;


letter-spacing:10px;


background:

linear-gradient(

120deg,

#fff,

#00e6a8

);


-webkit-background-clip:text;

color:transparent;


}




.hero-text p{


margin-top:40px;

font-size:22px;

color:#aaa;

letter-spacing:3px;


}




.ai-tags{


display:flex;

gap:15px;

margin:45px 0;


}




.ai-tags span{


border:1px solid rgba(0,230,168,.5);

padding:12px 25px;

border-radius:50px;

font-size:14px;

color:#00e6a8;


background:

rgba(0,230,168,.05);


}





button{


padding:18px 55px;

border:0;

border-radius:50px;


background:#00e6a8;


font-size:18px;


cursor:pointer;


transition:.3s;


}



button:hover{


transform:translateY(-5px);


box-shadow:

0 20px 40px

rgba(0,230,168,.3);


}








/* ===============================
AI工作台
================================ */


.ai-console{


width:30%;

position:relative;


}




.screen{


padding:25px;


background:

rgba(255,255,255,.08);


border-radius:30px;


border:

1px solid rgba(255,255,255,.15);


box-shadow:


0 50px 100px

rgba(0,0,0,.8);



backdrop-filter:blur(20px);



transform:

perspective(1000px)

rotateY(-10deg);



animation:

float 6s infinite ease-in-out;


}



.screen img{


width:100%;


}




@keyframes float{


0%,100%{

transform:

translateY(0)

perspective(1000px)

rotateY(-10deg);

}


50%{


transform:

translateY(-20px)

perspective(1000px)

rotateY(-10deg);


}


}




.float-card{


position:absolute;


padding:20px 35px;


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.2);


border-radius:15px;


backdrop-filter:blur(15px);


color:#00e6a8;


box-shadow:

0 20px 40px rgba(0,0,0,.5);


}





.card1{


top:10%;

right:-30px;


}


.card2{


bottom:25%;

left:-50px;


}


.card3{


bottom:5%;

right:30px;


}







/* ===============================
产品生态
================================ */


.product{


background:

linear-gradient(

180deg,

transparent,

#080b09

);


}




.product h2,

.works h2,

.voice h2,

.service h2{


font-size:18px;

font-weight:300;

letter-spacing:8px;

text-align:center;

margin-bottom:80px;


}



.product-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:30px;


}



.product-grid div{


padding:45px 35px;


height:280px;


border-radius:25px;


background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.1);


transition:.5s;


}




.product-grid div:hover{


transform:

translateY(-20px);


border-color:#00e6a8;


background:

rgba(0,230,168,.08);


}




.product-grid h3{


font-size:28px;

margin-bottom:30px;


}



.product-grid p{


color:#aaa;

line-height:2;


}








/* ===============================
视频作品
================================ */


.video-show{


max-width:1100px;

margin:auto;


}



.video-show video{


width:100%;


border-radius:30px;


box-shadow:

0 40px 80px

rgba(0,0,0,.8);


}








/* ===============================
声音实验室
================================ */


.voice{


text-align:center;


}




.audio-box{


max-width:700px;

margin:auto;


padding:50px;


background:

rgba(255,255,255,.05);


border-radius:30px;


}



.wave{


font-size:50px;

color:#00e6a8;

letter-spacing:10px;


animation:

wave 2s infinite;


}



@keyframes wave{


50%{

transform:scaleY(1.4);

}


}



audio{

width:100%;

margin-top:30px;

}








/* ===============================
服务流程
================================ */


.service{


text-align:center;


}



.service div{


display:flex;

justify-content:center;

gap:50px;


font-size:22px;


}


.service span{


display:block;

color:#00e6a8;

font-size:45px;


}






/* ===============================
关于
================================ */


.about{


text-align:center;


background:#080808;


}



.about h2{


font-size:60px;


}



.about p{


margin-top:30px;

font-size:22px;

color:#aaa;


}




footer{


padding:40px;

text-align:center;

color:#777;


}







/* ===============================
手机端
================================ */


@media(max-width:900px){



header{

padding:0 5%;

}



nav{

display:none;

}



.hero{


flex-direction:column;

padding-top:150px;


}




.hero-text,

.ai-console{


width:100%;


}



.hero-text h1{


font-size:45px;


}




.ai-tags{


flex-wrap:wrap;


}



.product-grid{


grid-template-columns:

1fr;


}




.product h2,

.works h2,

.voice h2,

.service h2{


font-size:18px;


}




.float-card{


display:none;


}



.service div{


flex-direction:column;


}


}


@media(max-width:768px){


.work-card{


width:100%;


}


.work-card img{


width:100%;


height:auto;


aspect-ratio:3 / 4;


}


}

/* ===============================
高级进入动画
================================ */


.animate{

opacity:0;

transform:

translateY(60px);


transition:

all 1s ease;

}



.animate.active{


opacity:1;


transform:

translateY(0);


}

.works-grid{

display:grid;

grid-template-columns:

repeat(4,300px);

justify-content:center;

gap:35px;

}



.work-card{


width:300px;


background:#111;


border-radius:20px;


overflow:hidden;


transition:.4s;


}



.product-card img{


width:100%;

height:400px;


object-fit:contain;


background:#080808;


border-radius:15px;


}




.work-card:hover{


transform:

translateY(-15px);


box-shadow:

0 25px 60px

rgba(0,230,168,.25);


}




.work-info{


padding:25px;


}



.work-info h3{


font-size:22px;


margin-bottom:12px;


}



.work-info p{


color:#999;

font-size:14px;


}



.work-info a{


display:block;

margin-top:20px;

color:#00e6a8;


}



/* =================================
   创始人公益倡导
================================= */


.founder-charity{


position:relative;


height:720px;


background-image:

url("../images/home_2.jpg");


background-size:cover;


background-position:center;


display:flex;


align-items:center;


justify-content:center;


overflow:hidden;


}



/* 黑色渐变层 */

.charity-overlay{


position:absolute;


inset:0;


background:


linear-gradient(

90deg,

rgba(0,0,0,.75),

rgba(0,0,0,.45)

);


}



/* 内容 */

.charity-content{


position:relative;


z-index:2;


max-width:800px;


text-align:center;


color:#fff;


padding:40px;


}



.charity-content h2{


font-size:48px;


letter-spacing:6px;


margin-bottom:25px;


}



.charity-content h3{


font-size:28px;


font-weight:400;


color:#8ed8b0;


margin-bottom:35px;


}



.charity-content p{


font-size:14px;


line-height:40px;


opacity:.9;


}



.charity-line{


width:80px;


height:2px;


background:#fff;


margin:45px auto;


}



/* 创始人签名 */


.founder-sign{


display:flex;


justify-content:center;


align-items:center;


gap:25px;


}



.founder-sign img{


width:160px;


height:auto;


filter:

brightness(0)

invert(1);


}



.founder-sign span{


display:block;


font-size:22px;


}



.founder-sign small{


display:block;


margin-top:8px;


opacity:.7;


}




@media(max-width:768px){


.founder-charity{


height:600px;


}



.charity-content h2{


font-size:34px;


}



.charity-content h3{


font-size:22px;


}



.charity-content p{


font-size:16px;


}



}

//* =====================================
   商务合作二维码区域
===================================== */


.contact-section{


position:relative;


padding:120px 0;


}





.contact-container{


width:1200px;


max-width:90%;


margin:auto;


}




.contact-title{


text-align:center;


margin-bottom:70px;


}



.contact-title h2{


font-size:22px;


font-weight:500;


letter-spacing:2px;


margin-bottom:20px;


}



.contact-title p{


font-size:16px;


color:rgba(255,255,255,.65);


}






/* 大卡片 */


.contact-panel{


display:flex;


align-items:center;


justify-content:center;


gap:100px;


padding:70px;



background:


rgba(255,255,255,.06);



border:


1px solid rgba(255,255,255,.12);



border-radius:35px;



backdrop-filter:blur(25px);



box-shadow:


0 30px 80px rgba(0,0,0,.35);



}









/* 二维码 */




.qrcode-area{


display:flex;


gap:45px;


}




.qrcode-item{


text-align:center;


}



.qrcode-item img{


width:160px;


height:160px;


padding:10px;


background:#fff;


border-radius:20px;



box-shadow:


0 15px 40px rgba(0,0,0,.3);



transition:.4s;


}



.qrcode-item img:hover{


transform:

translateY(-10px);


}





.qrcode-item h4{


font-size:14px;


font-weight:500;


margin-top:25px;


}



.qrcode-item p{


font-size:12px;


color:

rgba(255,255,255,.6);


}







/* 联系信息 */


.contact-info{


min-width:300px;


}



.contact-info h3{


font-size:32px;


font-weight:500;


margin-bottom:25px;


}



.phone{


font-size:22px;


font-weight:600;


color:#4eac7a;


letter-spacing:2px;


margin-bottom:25px;


}



.contact-info p{


font-size:12px;


line-height:30px;


color:

rgba(255,255,255,.75);


}



.contact-info a{


display:inline-block;


margin-top:25px;


padding:12px 35px;


border-radius:30px;



background:#4eac7a;



color:#fff;


text-decoration:none;


transition:.3s;


}



.contact-info a:hover{


transform:translateY(-5px);


}









/* ===============================
手机端
================================ */


@media(max-width:768px){



.contact-section{


padding:70px 0;


}




.contact-title h2{


font-size:12px;


}




.contact-panel{


flex-direction:column;


padding:40px 20px;


gap:50px;


}





.qrcode-area{


gap:20px;


}




.qrcode-item img{


width:120px;


height:120px;


}



.contact-info{


text-align:center;


min-width:auto;


}



.phone{


font-size:22px;


}



}

/* ==================================
   争鸣视听 AI星河背景 V2
================================== */


body{

background:#050816;

}



/* 背景容器 */

.ai-space-bg{


position:fixed;

left:0;

top:0;

width:100%;

height:100%;


overflow:hidden;


pointer-events:none;


z-index:-2;


}



/* 星云光 */


.space-glow{


position:absolute;


width:600px;

height:600px;


left:50%;

top:30%;


transform:translate(-50%,-50%);



background:

radial-gradient(

circle,

rgba(78,172,122,.18),

transparent 70%

);



animation:

glowMove 12s infinite alternate;


}




@keyframes glowMove{


from{

transform:

translate(-55%,-50%)

scale(1);


}


to{


transform:

translate(-45%,-45%)

scale(1.3);


}


}



/* 粒子 */


.ai-particles span{


position:absolute;


width:4px;

height:4px;


background:#fff;


border-radius:50%;


box-shadow:

0 0 15px #fff;


animation:

particleMove 15s infinite;


opacity:.6;


}




.ai-particles span:nth-child(1){

left:10%;

top:20%;

animation-delay:0s;

}



.ai-particles span:nth-child(2){

left:25%;

top:70%;

animation-delay:2s;

}



.ai-particles span:nth-child(3){

left:40%;

top:35%;

animation-delay:5s;

}



.ai-particles span:nth-child(4){

left:60%;

top:80%;

animation-delay:3s;

}



.ai-particles span:nth-child(5){

left:75%;

top:25%;

animation-delay:6s;

}



.ai-particles span:nth-child(6){

left:90%;

top:65%;

animation-delay:4s;

}



.ai-particles span:nth-child(7){

left:50%;

top:15%;

animation-delay:7s;

}



.ai-particles span:nth-child(8){

left:35%;

top:90%;

animation-delay:8s;

}





@keyframes particleMove{


0%{


transform:

translateY(0);


opacity:.2;


}


50%{


transform:

translateY(-120px);


opacity:1;


}


100%{


transform:

translateY(0);


opacity:.2;


}



}





/* AI数据波纹 */


.wave-line{


position:absolute;


left:-20%;


bottom:25%;


width:140%;


height:200px;



background:


linear-gradient(

90deg,

transparent,

rgba(78,172,122,.15),

transparent

);



filter:blur(30px);



animation:

waveMove 8s linear infinite;



}




@keyframes waveMove{


0%{


transform:translateX(-20%);


}


100%{


transform:translateX(20%);


}


}





/* 手机降低动画 */

@media(max-width:768px){


.space-glow{


width:350px;

height:350px;


}



.wave-line{


display:none;


}


}

/* =========================
   顶部导航修复
========================= */


/* 保证顶部导航显示 */

#Top_bar{

    display:block !important;

    position:relative;

    z-index:9999 !important;

}



/* 导航菜单层级 */

#Top_bar .menu_wrapper,
#Top_bar .menu,

#Top_bar .logo{

    position:relative;

    z-index:10000 !important;

}



/* 如果是固定顶部 */

.is-sticky #Top_bar{

    z-index:99999 !important;

}



/* AI背景放到底层 */

.ai-space-bg{

    z-index:-1 !important;

}

/* =====================
手机导航
===================== */


@media(max-width:768px){



.menu-btn{

display:block;

cursor:pointer;

z-index:10001;

}



.mobile-nav{


position:fixed;


top:0;


right:-320px;


width:300px;


height:100vh;


z-index:10000;


background:

rgba(5,8,22,.96);



display:flex;


flex-direction:column;


align-items:center;


padding-top:90px;


gap:20px;



transition:.4s;


}



.mobile-nav.active{


right:0;


}




.mobile-nav a{


display:block;


width:80%;


padding:15px;


text-align:center;


color:#fff;


font-size:18px;


text-decoration:none;


}



.mobile-nav a:hover{


color:#4eac7a;


}





.nav-close{


display:block;


position:absolute;


top:20px;


right:25px;


font-size:38px;


color:#fff;


cursor:pointer;


z-index:10002;


}



}

/* ===========================
   手机抽屉导航
=========================== */


.menu-btn{


display:none;

}


@media(max-width:768px){



.menu-btn{


display:block;


width:34px;


}



.menu-btn span{


display:block;


height:3px;


margin:7px 0;


background:#fff;


border-radius:5px;


}





.mobile-nav{


position:fixed;


top:0;


right:-320px;


width:300px;


height:100vh;


z-index:9999;


padding-top:80px;



display:flex;


flex-direction:column;


align-items:center;


gap:25px;



background:


linear-gradient(

180deg,

rgba(5,8,22,.95),

rgba(10,25,40,.92)

);



border-left:

1px solid rgba(255,255,255,.15);



box-shadow:

-20px 0 60px rgba(0,0,0,.5);



backdrop-filter:blur(20px);



transition:.5s;


}





.mobile-nav.active{


right:0;


}





.mobile-nav a{


width:100%;


padding:15px;


text-align:center;


font-size:18px;


letter-spacing:3px;


color:#fff;


text-decoration:none;



border-bottom:

1px solid rgba(255,255,255,.1);



transition:.3s;


}





.mobile-nav a:hover{


color:#4eac7a;


background:

rgba(78,172,122,.1);


border-radius:10px;


}




.menu-btn{

display:none;

}



.nav-close{

display:none;

}



@media(max-width:768px){


.menu-btn{


display:block;


position:relative;


z-index:10001;


}



.mobile-nav{


position:fixed;


top:0;


right:-320px;


width:300px;


height:100vh;


background:

rgba(5,8,22,.96);


z-index:10000;


transition:.35s;


padding-top:90px;


}



.mobile-nav.active{


right:0;


}



.nav-close{


display:block;


position:absolute;


right:25px;


top:15px;


font-size:40px;


color:white;


cursor:pointer;


}



.mobile-nav a{


display:block;


text-align:center;


padding:18px;


color:#fff;


text-decoration:none;


font-size:18px;


}



}




.mobile-nav{


position:fixed;


top:0;


right:-320px;


width:300px;


height:100vh;


background:

rgba(5,8,22,.96);


z-index:10000;


transition:.35s;


padding-top:90px;


}



.mobile-nav.active{


right:0;


}



.nav-close{


display:block;


position:absolute;


right:25px;


top:15px;


font-size:40px;


color:white;


cursor:pointer;


}



.mobile-nav a{


display:block;


text-align:center;


padding:18px;


color:#fff;


text-decoration:none;


font-size:18px;


}



}





.nav-bottom{


position:absolute;


bottom:80px;


font-size:12px;


letter-spacing:5px;


color:rgba(255,255,255,.35);


}



}

/* ==================================
   首页首屏 V4
================================== */


.hero{


min-height:100vh;


display:flex;


align-items:center;


position:relative;


overflow:hidden;


}




.hero-container{


width:1200px;


max-width:90%;


margin:auto;


display:flex;


align-items:center;


justify-content:space-between;


}





/* 左侧 */


.hero-text{


width:45%;


}



.hero-tag{


font-size:13px;


letter-spacing:6px;


color:#4eac7a;


margin-bottom:25px;


}



.hero-text h1{


font-size:px;


font-weight:600;


letter-spacing:3px;


margin:0;


}




.hero-text h2{


font-size:30px;


font-weight:400;


margin:20px 0;


}




.hero-text p{


font-size:16px;


line-height:32px;


color:rgba(255,255,255,.7);


max-width:430px;


}





.hero-btn{


display:flex;


gap:20px;


margin-top:40px;


}



.hero-btn a{


padding:13px 35px;


border-radius:30px;


text-decoration:none;


font-size:15px;


}



.hero-btn a:first-child{


background:#4eac7a;


color:#fff;


}



.hero-btn a:last-child{


border:1px solid rgba(255,255,255,.3);


color:#fff;


}








/* 产品区域 */


.hero-products{


display:flex;


gap:35px;


align-items:center;


}



.product-card{


width:300px;


height:400px;


position:relative;


border-radius:24px;


overflow:hidden;


background:#111;


box-shadow:

0 30px 80px rgba(0,0,0,.45);


transition:.4s;


}




.product-card:hover{


transform:

translateY(-15px);


}





.product-card img{


width:300px;


height:400px;


object-fit:cover;


}





.product-mask{


position:absolute;


left:0;


bottom:0;


width:100%;


padding:30px 20px;


box-sizing:border-box;



background:

linear-gradient(

transparent,

rgba(0,0,0,.85)

);



}



.product-mask h3{


font-size:20px;


color:#fff;


margin:0 0 10px;


}



.product-mask p{


font-size:14px;


color:#4eac7a;


}







/* 手机 */

@media(max-width:768px){


.hero{


padding:120px 0 60px;


}



.hero-container{


flex-direction:column;


}



.hero-text{


width:100%;


text-align:center;


}



.hero-text h1{


font-size:25px;


}



.hero-text h2{


font-size:22px;


}



.hero-products{


margin-top:50px;


gap:15px;


}



.product-card{


width:150px;


height:200px;


}



.product-card img{


width:150px;


height:200px;


}



}

@media(max-width:768px){

.call-btn{

font-size:10px !important;

padding:0 10px !important;

height:34px !important;

}


.call-icon{

font-size:10px !important;

}

}

/* 顶部致电按钮最终覆盖 */
.header .call-btn,
.call-btn{

    height:32px !important;

    min-height:32px !important;

    padding:0 12px !important;

    font-size:12px !important;

    line-height:32px !important;

    border-radius:16px !important;

    gap:5px !important;

}


/* 电话图标 */
.header .call-btn .call-icon,
.call-icon{

    width:16px !important;

    height:16px !important;

    font-size:12px !important;

}


.call-btn{

background:
linear-gradient(135deg,#22d66f,#0ca956);

color:#fff;

border-radius:22px;

padding:8px 16px;

box-shadow:
0 8px 25px rgba(24,201,100,.45);

}

.call-btn:hover{

transform:translateY(-2px);

box-shadow:
0 12px 30px rgba(24,201,100,.55);

}

/* 音频 */

.voice-lab{

max-width:1200px;

margin:auto;

padding:80px 20px;

}



.voice-panel{

display:flex;

align-items:center;

gap:60px;


padding:45px;


background:

rgba(255,255,255,.06);


border-radius:35px;


backdrop-filter:blur(25px);


border:

1px solid rgba(255,255,255,.1);


}



/* 封面 */


.voice-art{

position:relative;

flex-shrink:0;

}



.voice-art img{


width:320px;

height:320px;


object-fit:cover;


border-radius:30px;


box-shadow:

0 30px 80px rgba(0,0,0,.5);


}




.light{


position:absolute;

inset:-30px;


background:

radial-gradient(
circle,
rgba(0,200,255,.35),
transparent 65%
);


z-index:-1;


}



/* 信息 */


.voice-info{

flex:1;

min-width:0;

}



.voice-info h2{


font-size:42px;

margin:0 0 15px;


}



.voice-author{


color:#00c6ff;

font-size:16px;


}



.voice-info p{


color:#aaa;


}



.voice-info audio{


width:100%;

margin:25px 0;


}



/* 专辑列表 */


.voice-album{


display:flex;

flex-direction:column;

gap:12px;


}



.voice-item{


display:flex;

align-items:center;

gap:15px;


padding:15px 20px;


border-radius:18px;


background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.08);


cursor:pointer;


transition:.3s;


}



.voice-item span{


color:#888;

font-size:13px;


}



.voice-item:hover{


background:

rgba(255,255,255,.1);


}



.voice-item.active{


background:

linear-gradient(
90deg,
rgba(0,198,255,.25),
rgba(255,255,255,.05)
);


border-color:

rgba(0,198,255,.5);


}





/* 手机 */

@media(max-width:768px){


.voice-lab{

padding:40px 15px;

}



.voice-panel{


display:block;


padding:25px;


}



.voice-art{


text-align:center;

}



.voice-art img{


width:220px;

height:220px;


}



.voice-info{


margin-top:30px;

text-align:center;


}



.voice-info h2{


font-size:30px;


}



.voice-item{


text-align:left;


}



}





function switchVoice(
element,
title,
author,
desc,
cover,
audio
){


document.getElementById("voiceTitle")
.innerHTML=title;


document.getElementById("voiceAuthor")
.innerHTML=author;


document.getElementById("voiceDesc")
.innerHTML=desc;



document.getElementById("voiceCover")
.src=cover;



let player=
document.getElementById("voicePlayer");


player.src=audio;


player.load();


// 用户点击后播放

player.play();



// 状态切换

document
.querySelectorAll(".voice-item")
.forEach(item=>{

item.classList.remove("active");

});


element.classList.add("active");


}

@media(max-width:768px){

.hero-btn{

    width:100%;

    justify-content:center;

    gap:15px;

}

}