@charset "utf-8";
/* CSS Document + 全套动画 */
/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "微软雅黑", sans-serif; }

body { overflow-x: hidden; }


/* 页面整体入场动画 */
.bigContainer {
    display: block;
    width: 1920px;
    height: 1110px;
    background: url("bg.jpg") no-repeat top center;
    animation: pageFadeIn 1s ease forwards; /* 页面淡入 */
}

/* 淡入动画关键帧 */
@keyframes pageFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.container {
    position: absolute;
    left: 481px;
    top: 118px;
    display: block;
    width: 950px;
    height: 960px;
    animation: containerSlide 0.8s 0.2s ease forwards;
    opacity: 0;
}

/* 中间容器滑入动画 */
@keyframes containerSlide {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

.line1 {
    position: absolute;
    display: block;
    width: 950px;
    height: 320px;
}

.bigbtn {
    position: absolute;
    display: block;
    width: 220px;
    height: 320px;
    animation: btnGroupFade 0.6s 0.4s ease forwards;
    opacity: 0;
}

@keyframes btnGroupFade {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------- 红色按钮：悬浮放大动画 ---------- */
.btn1, .btn2, .btn3, .btn4 {
    display: block;
    width: 218px;
    height: 73px;
    transition: all 0.3s ease;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
    transform: scale(1.04); /* 悬浮放大 */
}

.btn1 { background: url("../images/btn/1.png"); }
.btn1:hover{ background: url("../images/btn/2.png"); }
.btn2 { background: url("../images/btn/3.png"); margin-top: 8px; }
.btn2:hover{ background: url("../images/btn/4.png"); margin-top: 8px; }
.btn3 { background: url("../images/btn/5.png"); margin-top: 8px; }
.btn3:hover{ background: url("../images/btn/6.png"); margin-top: 8px; }
.btn4 { background: url("../images/btn/7.png"); margin-top: 8px; }
.btn4:hover{ background: url("../images/btn/8.png"); margin-top: 8px; }

/* ---------- 游戏风轮播图（无按钮） ---------- */
.area-lunbo {
    width: 717px;
    height: 320px;
    position: relative;
    overflow: hidden;
    margin-left: 230px;
    border-radius: 12px;
    border: 3px solid transparent;
    background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
                linear-gradient(180deg, #FFD700, #B8860B, #8B6914) border-box;
    box-shadow: 
        0 0 20px rgba(255,215,0,0.3),
        0 0 40px rgba(139,105,20,0.2),
        inset 0 0 50px rgba(0,0,0,0.8);
    animation: lunboFade 0.7s 0.5s ease forwards;
    opacity: 0;
}
@keyframes lunboFade {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* 顶部装饰角标 */
.area-lunbo::before {
    content: "◆";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFD700;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(255,215,0,0.8);
    z-index: 100;
    animation: starPulse 2s ease-in-out infinite;
}
@keyframes starPulse {
    0%, 100% { opacity: 0.6; text-shadow: 0 0 10px rgba(255,215,0,0.8); }
    50% { opacity: 1; text-shadow: 0 0 20px rgba(255,215,0,1); }
}

.banner-wrap {
    width: 100%; height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}
.banner-item {
    width: 100%; height: 100%;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: scale(1.1);
}
.banner-item.active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}
.banner-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 轮播指示器 */
.banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 100;
}
.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(139,105,20,0.6);
    border: 2px solid #B8860B;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.banner-dot:hover {
    background: rgba(255,215,0,0.6);
    border-color: #FFD700;
}
.banner-dot.active {
    background: linear-gradient(145deg, #FFD700, #B8860B);
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255,215,0,0.8);
    transform: scale(1.2);
}

/* 滚动文字 */
.area-textgd {
	height:45px;
	overflow:hidden;
	position:relative;
	width:680px;
	margin-left:240px;
	margin-top:353px;
}
.marquee-text {
	position:absolute;
	white-space:nowrap;
	line-height:45px;
	font-size:24px;
	font-weight:bold;
	color:#fff;
	animation:textScroll 40s linear infinite;
}
@keyframes textScroll {
	0%{ transform:translateX(0); }
	100%{ transform:translateX(-100%); }
}

/* ---------- 内容切换区域 ---------- */
.line3 {
    position: absolute;
    display: flex;
    width: 950px;
    height: 485px;
    margin-top: 73px;
    animation: line3Slide 0.8s 0.6s ease forwards;
    opacity: 0;
}
@keyframes line3Slide {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.qhbtn {
    width: 220px;
    height: 485px;
    display: block;
}

/* 蓝色按钮：悬浮 + 点击动画 */
#blue-btn1,#blue-btn2,#blue-btn3,#blue-btn4,#blue-btn5 {
    width: 219px;
    height: 49px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    font-size: clamp(14px, 1.5vw, 20px);
    transition: all 0.25s ease;
    border: none;
    text-align: center;
    line-height: 49px;
}
#blue-btn1:hover,#blue-btn2:hover,#blue-btn3:hover,#blue-btn4:hover,#blue-btn5:hover {
    transform: translateX(6px); /* 右滑微动 */
}

#blue-btn1 { background:url("../images/btn/9.png"); }
#blue-btn1:hover { background:url("../images/btn/10.png"); }

#blue-btn2 { background:url("../images/btn/11.png"); margin-top:5px; }
#blue-btn2:hover { background:url("../images/btn/12.png"); margin-top:5px; }

#blue-btn3 { background:url("../images/btn/13.png"); margin-top:5px; }
#blue-btn3:hover { background:url("../images/btn/14.png"); margin-top:5px; }

#blue-btn4 { background:url("../images/btn/15.png"); margin-top:5px; }
#blue-btn4:hover { background:url("../images/btn/16.png"); margin-top:5px; }

#blue-btn5 { background:url("../images/btn/17.png"); margin-top:5px; }
#blue-btn5:hover { background:url("../images/btn/18.png"); margin-top:5px; }

/* 内容区域：淡入动画 */
.area-neirong {
    width: 717px;
    height: 485px;
    position: relative;
    overflow: hidden;
    margin-left: 12px;
    border-radius: 5px;
    background: rgba(255,255,255,0.3);
    animation: contentFade 0.7s 0.7s ease forwards;
    opacity: 0;
}
@keyframes contentFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#contentFrame {
    width: 100%; height: 100%;
    border: none;
}

.footer { margin:0px 0 0 0; background:#000;}
.footer_1 { margin:0 auto; width:1200px; overflow:hidden;}