@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box}
body{position:relative;min-width:1920px;padding-top:70px;color:#cfc3a5;font-family:"Microsoft YaHei",sans-serif;background:linear-gradient(180deg,#000a10 0,#000a10 1200px,#0b0d10 2600px,#0e121a 3800px,#0b0d10 4800px,#060709)}
ul{list-style:none}
a{text-decoration:none}
img{display:block}
section{position:relative;width:1920px;margin:0 auto;padding-bottom:90px}

/* 贯通背景图:banner 下方淡入,向下渐隐 */
.page-bg{position:absolute;top:1150px;left:50%;width:1920px;height:1400px;margin-left:-960px;z-index:-1;pointer-events:none;background:url(../img/bg.jpg) center top/100% 100% no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent,#000 200px,#000 850px,transparent);mask-image:linear-gradient(180deg,transparent,#000 200px,#000 850px,transparent)}

/* 顶部 Header */
.header{position:fixed;top:0;left:0;width:100%;height:70px;z-index:100;background:#fff;border-bottom:1px solid rgba(201,168,106,.35)}
.header-inner{width:1920px;height:100%;margin:0 auto;padding:0 60px;display:flex;align-items:center;justify-content:space-between}
.logo{height:44px}
.nav{display:flex;align-items:center}
.nav a{width:92px;height:20px;margin-left:58px}
.txt-swap{position:relative;display:block}
.txt-swap img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.txt-swap .hov{opacity:0}
.txt-swap:hover img{opacity:0}
.txt-swap:hover .hov{opacity:1}

/* 标题:PS 渲染文字图(汇文明朝体) */
.title{padding:80px 0 50px;text-align:center}
.title img{display:inline-block;vertical-align:middle;height:40px;width:auto}
.title::before,.title::after{content:"";display:inline-block;width:140px;height:1px;margin:0 36px;vertical-align:middle;background:linear-gradient(90deg,transparent,#a8874f)}
.title::after{background:linear-gradient(90deg,#a8874f,transparent)}

/* 第一层:banner */
.banner{position:relative;width:1920px;height:1080px;margin:0 auto;overflow:hidden;padding-bottom:0}
.banner-layers img{width:1920px;height:216px;opacity:0;animation:fadeIn .9s ease forwards}
.banner-layers img:nth-child(1){animation-delay:0s}
.banner-layers img:nth-child(2){animation-delay:.15s}
.banner-layers img:nth-child(3){animation-delay:.3s}
.banner-layers img:nth-child(4){animation-delay:.45s}
.banner-layers img:nth-child(5){animation-delay:.6s}
@keyframes fadeIn{to{opacity:1}}
.banner-btns{position:absolute;left:0;bottom:96px;width:100%;text-align:center;z-index:2}
.btn{display:inline-block;margin:0 20px;padding:18px 58px;border:1px solid #a8874f;background:rgba(8,8,10,.55);transition:.3s}
.btn-txt{width:126px;height:25px}
.btn:hover{background:linear-gradient(180deg,#e6c888,#b8935a);box-shadow:0 0 24px rgba(230,200,136,.45)}

/* 第二层:介绍(左人物右文字) */
.intro-main{display:flex;align-items:center;width:1600px;margin:0 auto}
.intro-role{flex-shrink:0;width:780px}
.intro-text{position:relative;z-index:1;flex:1;margin-left:-140px}
.intro-text img{display:block;height:25px;width:auto;margin-bottom:37px}
.intro-text img:last-child{margin-bottom:0}

/* 第三层:专属装备(左右两列+中央剑客) */
.showcase-main{display:flex;justify-content:center;align-items:center;width:1600px;margin:0 auto}
.icon-grid{display:grid;grid-template-columns:repeat(5,64px);gap:10px}
.icon-grid li{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:rgba(22,26,32,.85);border:1px solid #332c1e;cursor:pointer;transition:.25s}
.icon-grid li img{width:44px;height:44px}
.icon-grid li:hover{border-color:#e6c888;box-shadow:0 0 14px rgba(230,200,136,.35);transform:translateY(-3px)}
.swordsman{height:730px;width:auto;margin:0 20px}
.tooltip{position:fixed;display:none;z-index:200;pointer-events:none;padding:8px;background:rgba(10,12,16,.95);border:1px solid #a8874f;box-shadow:0 8px 30px rgba(0,0,0,.7)}
.tooltip img{max-width:280px;max-height:520px}

/* 第四层:跑马灯(1600px 背景框) */
.marquee-frame{width:1600px;margin:0 auto;padding:30px 34px;background-color:rgba(16,19,25,.55);border:1px solid #3a3325;box-shadow:inset 0 0 40px rgba(0,0,0,.5);background-image:linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a),linear-gradient(#c9a86a,#c9a86a);background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;background-size:28px 2px,2px 28px,28px 2px,2px 28px,28px 2px,2px 28px,28px 2px,2px 28px;background-repeat:no-repeat}
.marquee{width:100%;overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:scroll 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{flex-shrink:0;margin-right:36px;padding:14px;background:#14181e;border:1px solid #332c1e}
.marquee-item img{height:340px;width:auto}
@keyframes scroll{to{transform:translateX(-50%)}}

/* 第五层:淡入淡出 */
.fade-box{position:relative;width:1190px;height:700px;margin:0 auto;border:1px solid #332c1e;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.fade-box>img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.fade-box>img.on{opacity:1}

/* 第六层:大图左右切换 */
.carousel{position:relative;width:1044px;height:539px;margin:0 auto;overflow:hidden;border:1px solid #332c1e;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.carousel-track{display:flex;height:100%;transition:transform .6s ease}
.carousel-track img{flex-shrink:0;width:1044px;height:539px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;line-height:54px;text-align:center;font-size:28px;color:#e6c888;background:rgba(8,8,10,.55);border:1px solid #a8874f;border-radius:50%;cursor:pointer;transition:.3s;z-index:2}
.arrow:hover{color:#1a1206;background:#e6c888}
.arrow.prev{left:22px}
.arrow.next{right:22px}

/* 圆点 */
.dots{position:absolute;left:0;bottom:16px;width:100%;text-align:center;z-index:2}
.dots span{display:inline-block;width:12px;height:12px;margin:0 7px;border:1px solid #e6c888;border-radius:50%;cursor:pointer;transition:.3s}
.dots span.on{background:#e6c888}

/* footer */
footer{width:100%;height:120px;background:#000}
.footer-inner{width:1920px;height:100%;margin:0 auto;padding:0 60px;display:flex;align-items:center;justify-content:space-between}
.footer-logo{height:48px}
.footer-text img{height:40px;width:auto}