@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
fieldset,img,abbr,acronym{border:0;}
/*页面样式*/
.c:before,.c:after {content:"";display:table;}
.c:after{clear:both;}
.c{zoom:1;}
.none{display:none;}
.pr{position:relative;}
.pa{position:absolute;}
.t{font-size: 0;}
body{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1'; text-align:justify;min-width:1200px;}
a{text-decoration:none;overflow:visible;}
a:hover{text-decoration:none;}
.com, .tab-i, .tit, .tit-s{background:url(../images/com.png) no-repeat;display:block;overflow:hidden;text-align:center;}
.btn{transition:filter 0.5s linear;}
.btn:hover{-webkit-filter: brightness(1.15);}
.xtl_logo_lk{top:20px;left:4px;z-index:101; width: 154px; height: 103px; background-position: -0px -510px;}
.xtl_logo_lk a{display:block; width:100%; height: 100%; z-index:999;}
.bar{width:1200px;margin:0 auto;position:relative;}
.wrap{color:#fff;}
.head{height:931px;background:url(../images/bg-head.png) no-repeat center top;z-index:1;position:relative;}
.cont{height:auto;background:#3a2522 url(../images/bg-con.jpg) no-repeat center top;z-index:2;position:relative; padding-bottom:90px;}
.slogan{ background: url("../images/slogan.png"); width:328px; height: 506px; top: 44px; left:50%; margin-left: -164px; }

/* 顶部 CTA：下载 / 注册 / 介绍 + 今日新区 */
.head-cta{
    position:absolute;
    left:50%;
    top:22px;
    width:820px;
    margin-left:-410px;
    z-index:20;
    text-align:center;
}
.hero-btns{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:26px;
}
.hero-btn{
    position:relative;
    display:inline-block;
    min-width:178px;
    height:52px;
    line-height:52px;
    padding:0 30px;
    box-sizing:border-box;
    font-family:'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1',sans-serif;
    font-size:21px;
    font-weight:700;
    letter-spacing:3px;
    color:#fff6d8;
    text-shadow:
        0 1px 0 #4a1000,
        0 0 12px rgba(255,170,40,.75),
        0 0 2px #ffd080;
    background:
        linear-gradient(180deg, #ffe7a8 0%, #f0b84a 8%, #c62818 28%, #8a1208 62%, #4a0804 100%);
    border:none;
    border-radius:3px;
    box-shadow:
        0 0 0 1px #5a1a00,
        0 0 0 2px #f5d078,
        0 0 0 3px #8a4a10,
        0 10px 22px rgba(0,0,0,.55),
        0 0 28px rgba(255,90,20,.4);
    overflow:hidden;
    transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.hero-btn:before{
    content:'';
    position:absolute;
    left:6px; right:6px; top:4px;
    height:14px;
    border-radius:2px;
    background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
    pointer-events:none;
}
.hero-btn:after{
    content:'';
    position:absolute;
    left:-45%;
    top:0;
    width:40%;
    height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .4s ease;
    pointer-events:none;
}
.hero-btn:hover{
    color:#fff;
    filter:brightness(1.14) saturate(1.08);
    transform:translateY(-3px) scale(1.03);
    box-shadow:
        0 0 0 1px #5a1a00,
        0 0 0 2px #ffe39a,
        0 0 0 3px #b86a18,
        0 14px 28px rgba(0,0,0,.6),
        0 0 36px rgba(255,140,40,.65);
}
.hero-btn:hover:after{left:125%;}
.hero-btn-down{
    background:
        linear-gradient(180deg, #ffe7a8 0%, #f0b84a 8%, #e03a18 28%, #a8180a 62%, #5c0804 100%);
}
.hero-btn-reg{
    background:
        linear-gradient(180deg, #fff0c0 0%, #f5d06a 8%, #c99818 28%, #8a5a08 62%, #4a3004 100%);
    color:#fffdf0;
}
.hero-btn-intro{
    background:
        linear-gradient(180deg, #ffe7a8 0%, #e8a848 8%, #9a1c14 28%, #5c0e0a 62%, #2e0604 100%);
}
.open-date{
    margin:18px auto 0;
    display:inline-block;
    padding:8px 34px;
    font-size:19px;
    font-weight:700;
    letter-spacing:2px;
    color:#ffe9b0;
    text-shadow:0 0 10px rgba(255,140,40,.85), 0 2px 6px rgba(0,0,0,.9);
    background:linear-gradient(180deg, rgba(80,18,8,.72), rgba(28,6,4,.78));
    border:1px solid rgba(245,208,120,.7);
    border-radius:22px;
    box-shadow:
        0 0 22px rgba(255,90,20,.35),
        inset 0 0 14px rgba(0,0,0,.35),
        0 0 0 1px rgba(90,30,0,.5);
}
.open-date span{
    color:#fff4c8;
    margin:0 6px;
}

/* 中部 slogan */
.head-slogan{
    position:absolute;
    left:50%;
    top:200px;
    width:520px;
    margin-left:-260px;
    z-index:18;
    text-align:center;
    font-size:28px;
    font-weight:700;
    letter-spacing:6px;
    color:#fff4c8;
    text-shadow:
        0 0 16px rgba(255,140,40,.95),
        0 2px 8px rgba(0,0,0,.9),
        0 0 2px #ffd080;
}
.head-slogan span{
    display:inline-block;
    margin:0 14px;
    color:#ffd878;
    text-shadow:0 0 12px rgba(255,180,60,.9);
}

/* 下滑引导：轻量金字，贴头图底部 */
.scroll-tip{
    position:absolute;
    left:50%;
    top:258px;
    bottom:auto;
    width:280px;
    margin-left:-140px;
    z-index:30;
    padding:0;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    -webkit-animation:scrollTipFlash 1.8s ease-in-out infinite;
    animation:scrollTipFlash 1.8s ease-in-out infinite;
}
.scroll-tip-text{
    display:block;
    font-size:16px;
    font-weight:700;
    letter-spacing:4px;
    color:#ffe9b0;
    text-shadow:
        0 0 12px rgba(255,140,40,.85),
        0 2px 4px rgba(0,0,0,.9);
}
.scroll-tip-arrow{
    display:block;
    width:14px;
    height:14px;
    margin:8px auto 0;
    border-right:2px solid #ffd878;
    border-bottom:2px solid #ffd878;
    transform:rotate(45deg);
    box-shadow:1px 1px 6px rgba(255,140,40,.55);
    -webkit-animation:scrollTipBounce 1.8s ease-in-out infinite;
    animation:scrollTipBounce 1.8s ease-in-out infinite;
}
.scroll-tip:hover{
    -webkit-animation:none;
    animation:none;
    filter:brightness(1.2);
    background:none;
}
.scroll-tip:hover .scroll-tip-text{color:#fff8e0;}
@-webkit-keyframes scrollTipFlash{
    0%,100%{opacity:.4; transform:translateY(0);}
    50%{opacity:1; transform:translateY(5px);}
}
@keyframes scrollTipFlash{
    0%,100%{opacity:.4; transform:translateY(0);}
    50%{opacity:1; transform:translateY(5px);}
}
@-webkit-keyframes scrollTipBounce{
    0%,100%{margin-top:8px; opacity:.45;}
    50%{margin-top:14px; opacity:1;}
}
@keyframes scrollTipBounce{
    0%,100%{margin-top:8px; opacity:.45;}
    50%{margin-top:14px; opacity:1;}
}

.main-wrap{min-height: 600px; position: relative;}
.main{display:none; opacity: 0; transition: all 0.5s; padding-top: 1px; background: url("../images/bg-main.png"); width:1200px; height: auto; padding-bottom: 40px; margin: 0 auto;}
.main.show{opacity: 1; transition: all 0.3s;}
.main-con{width: 1060px; min-height: 400px; margin: 0 auto; padding-bottom: 30px;}
.main-con::-webkit-scrollbar{
    width: 5px;
    border-radius: 10px;
    background-color: #fef4de;
}
.main-con::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: #fef4de;
}
.main-con::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #885c49;
}
.main-con::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background: #885c49;
}

.tab-wrap{ width:100%; height: auto; margin: 0 auto; }
.tab{width: 1200px; height: 79px; margin: 0 auto; position: relative;}
.tab .tab-i{width:300px; height: 79px; background-position-y: -304px; display: inline-block; float:left;}
.tab .tab-i:hover, .tab .tab-i.active{background-position-y: -412px; }
.tab .tab-i:nth-child(1){background-position-x:-0px;}
.tab .tab-i:nth-child(2){background-position-x:-300px; }
.tab .tab-i:nth-child(3){background-position-x:-600px; }
.tab .tab-i:nth-child(4){background-position-x:-900px; }


.tit{ width:554px; height: 39px; display: block; margin: 40px auto 0px;}
.main1 .tit{ background-position: 0 0;}
.main2 .tit{ background-position: 0 -62px;}
.main3 .tit{ background-position: 0 -124px;}
.main4 .tit{ background-position: 0 -186px;}

.tit-s{ height: 48px; background-position: -725px 0; font-size: 30px; color: #702607; text-indent: 45px; line-height: 48px; text-align: left; margin-top: 54px;}
.tit-s2{background-position-y: -51px;}
.tit-s3{background-position-y: -101px;}
.tit-s4{background-position-y: -151px;}

.art-con{margin: 10px 45px 10px 12px; font-size: 13px; color:#431c0c; line-height: 30px;}
.etrLink{line-height: 36px; border-bottom: 2px solid #ca9675; color:#b13805; display: inline-block;}
.etrLink:hover{color: #b13e23; border-color:#c2743b; }

/* 关键信息条 */
.hl-box{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:16px 45px 8px 12px;
}
.hl-item{
    flex:1;
    min-width:220px;
    padding:12px 16px;
    background:linear-gradient(180deg, #fff6e4, #f7e2c0);
    border:1px solid #d4b08a;
    border-radius:6px;
    color:#7b371a;
    font-size:15px;
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.hl-item span{
    display:inline-block;
    margin-right:8px;
    padding:2px 8px;
    background:#a34f2b;
    color:#f8eacd;
    border-radius:3px;
    font-size:13px;
    font-weight:700;
}
.hl-hot{
    background:linear-gradient(180deg, #ffe8c8, #f5c98a);
    border-color:#c9893a;
}
.hl-hot span{background:#c62818;}

/* 介绍列表 */
.info-list{
    list-style:none;
    margin:8px 45px 10px 12px;
    padding:0;
}
.info-list li{
    position:relative;
    margin:0 0 8px;
    padding:10px 14px 10px 16px;
    background:rgba(254,244,222,.72);
    border:1px solid #e2c9a8;
    border-left:4px solid #a34f2b;
    border-radius:4px;
    color:#431c0c;
    font-size:14px;
    line-height:1.7;
}
.info-list li i{
    display:inline-block;
    min-width:40px;
    margin-right:10px;
    padding:1px 8px;
    background:#885c49;
    color:#fff4de;
    border-radius:3px;
    font-style:normal;
    font-size:12px;
    font-weight:700;
    text-align:center;
    vertical-align:middle;
}
.info-list li i.tag-hot,
.info-list .tag-hot{
    background:#c62818;
}
.info-list.info-num{
    counter-reset:info;
}
.info-list.info-num li{
    padding-left:42px;
}
.info-list.info-num li:before{
    counter-increment:info;
    content:counter(info);
    position:absolute;
    left:12px;
    top:11px;
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    background:#a34f2b;
    color:#f8eacd;
    border-radius:50%;
    font-size:12px;
    font-weight:700;
}
.info-list b{color:#8a2a0a;}

/* 爆率分区：BOSS / 副本 / 活动 */
.rate-block{
    margin:18px 45px 24px 12px;
    padding:14px 14px 8px;
    border-radius:8px;
    border:1px solid #e2c9a8;
    background:rgba(255,248,232,.55);
}
.rate-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    padding:0 0 10px;
    border-bottom:1px dashed #d4b08a;
    color:#702607;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
}
.rate-title em{
    display:inline-block;
    min-width:52px;
    padding:4px 12px;
    border-radius:4px;
    font-style:normal;
    font-size:15px;
    font-weight:700;
    color:#fff8e8;
    text-align:center;
    letter-spacing:2px;
}
.rate-boss{
    border-color:#e8a090;
    background:linear-gradient(180deg, rgba(255,236,230,.85), rgba(254,244,222,.7));
}
.rate-boss .rate-title em{background:#c62818; box-shadow:0 2px 6px rgba(180,40,20,.35);}
.rate-boss .boss-list li{border-left:4px solid #c62818;}
.rate-boss .boss-list b{color:#a01810;}

.rate-fb{
    border-color:#a8c0d8;
    background:linear-gradient(180deg, rgba(232,242,252,.9), rgba(254,244,222,.7));
}
.rate-fb .rate-title em{background:#2f6fad; box-shadow:0 2px 6px rgba(40,90,150,.35);}
.rate-fb .boss-list li{border-left:4px solid #2f6fad;}
.rate-fb .boss-list b{color:#1f4f8a;}

.rate-act{
    border-color:#e0c070;
    background:linear-gradient(180deg, rgba(255,246,220,.95), rgba(254,244,222,.7));
}
.rate-act .rate-title em{background:#b8860b; box-shadow:0 2px 6px rgba(140,100,20,.35);}
.rate-act .boss-list li{border-left:4px solid #b8860b;}
.rate-act .boss-list b{color:#8a5a08;}

/* BOSS 列表 */
.boss-list{
    list-style:none;
    margin:0;
    padding:0;
}
.boss-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:0 0 8px;
    padding:12px 14px;
    background:rgba(255,255,255,.55);
    border:1px solid #e2c9a8;
    border-radius:4px;
}
.boss-list b{
    flex:0 0 200px;
    color:#8a2a0a;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
}
.boss-list span{
    flex:1;
    color:#5a3018;
    font-size:13px;
    line-height:1.6;
}

.art-img{
    margin:18px auto 10px;
    text-align:center;
}
.art-img img{
    max-width:100%;
    height:auto;
    border:1px solid #d4b08a;
    box-shadow:0 4px 14px rgba(90,40,20,.18);
}

/* 本服特色区操作按钮 */
.action-btns{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin:18px 45px 8px 12px;
}
.action-btn{
    position:relative;
    display:inline-block;
    min-width:156px;
    height:46px;
    line-height:46px;
    padding:0 26px;
    box-sizing:border-box;
    text-align:center;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    color:#fff8e8;
    text-shadow:0 1px 0 #4a1608, 0 0 8px rgba(255,160,60,.35);
    border-radius:6px;
    overflow:hidden;
    transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.action-btn:before{
    content:'';
    position:absolute;
    left:6px; right:6px; top:3px;
    height:12px;
    border-radius:3px;
    background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
    pointer-events:none;
}
.action-btn:after{
    content:'';
    position:absolute;
    left:-40%;
    top:0;
    width:35%;
    height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform:skewX(-18deg);
    transition:left .35s ease;
    pointer-events:none;
}
.action-btn:hover{
    filter:brightness(1.1);
    transform:translateY(-2px);
}
.action-btn:hover:after{left:120%;}
.action-btn-pay{
    background:linear-gradient(180deg, #f0c56a 0%, #d4a03a 12%, #b8860b 40%, #8a5a08 100%);
    box-shadow:0 0 0 1px #6a4010, 0 0 0 2px #f5d078, 0 6px 14px rgba(120,60,10,.35);
}
.action-btn-down{
    background:linear-gradient(180deg, #e85a3a 0%, #c62818 18%, #8a1208 55%, #5c0a04 100%);
    box-shadow:0 0 0 1px #5a1a00, 0 0 0 2px #e8b060, 0 6px 14px rgba(120,30,10,.4);
}
.action-btn-reg{
    background:linear-gradient(180deg, #c47a4a 0%, #a34f2b 20%, #7b371a 55%, #5a2812 100%);
    box-shadow:0 0 0 1px #4a2010, 0 0 0 2px #d4a070, 0 6px 14px rgba(90,40,20,.35);
}

.table{width:100%; margin:16px 0 8px; table-layout:fixed;}
.table thead td{background-color: #a34f2b; height: 40px; line-height: 40px; text-align: center; color:#f8eacd; font-size: 18px; border: 1px solid #c3b3a4;}
.table tbody td{background-color: #fbedd3; height: 40px; line-height: 40px; text-align: center; color:#7b371a; font-size: 15px; border: 1px solid #c3b3a4; }
.table tbody td a{color:#b13805; font-weight:700;}
.table tbody td a:hover{color:#c62818; text-decoration:underline;}
.online-num{
    display:inline-block;
    min-width:2.5em;
    color:#1a7a32;
    font-weight:700;
    font-size:16px;
}

.pop{position:relative;width:513px;height:288px;background:transparent no-repeat;color:#3f3e45; display:none;}

.ani .slogan{-webkit-animation:sloganAni .4s 0s linear both;}

@-webkit-keyframes fadeInUp{
    0%{opacity:0; -webkit-transform:translateY(20px)}
    100%{opacity:1; -webkit-transform:translateY(0)}
}
@-webkit-keyframes sloganAni{
    0%{-webkit-transform:scale(1.8);opacity:0;}
    60%{-webkit-transform:scale(1);opacity:1;}
    65%{-webkit-transform:translate(-4px,-4px);}
    70%{-webkit-transform:translate(0,0);}
    75%{-webkit-transform:translate(4px,4px);}
    80%{-webkit-transform:translate(0,0);}
    85%{-webkit-transform:translate(-4px,4px);}
    90%{-webkit-transform:translate(0,0);}
    95%{-webkit-transform:translate(4px,-4px);}
    100%{-webkit-transform:translate(0,0);opacity:1;}
}
/* 新添加 */
.disabled{pointer-events: none;}