/* 加载动画样式 */

.loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    transition: opacity 0.5s;

}



.loader {

    display: flex;

    gap: 10px;

}



.circle {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #fff;

    animation: bounce 0.5s alternate infinite;

}



.circle:nth-child(2) {

    animation-delay: 0.2s;

}



.circle:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes bounce {

    from {

        transform: translateY(0);

    }

    to {

        transform: translateY(-20px);

    }

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: Arial, sans-serif;

    background-color: #000;

    color: #fff;

    overflow-x: hidden;

    width: 100%;

}



.container {

    max-width: 1080px;

    margin: 0 auto;

    padding: 0 15px;

}



/* 导航栏样式 */

.navbar {

    background: #000;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;

    z-index: 10;

}



.navbar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo img {

    height: 100%;

}



.nav-links {

    display: flex;

    gap: 20px;

}



.nav-item {

    display: flex;

    align-items: center;

    color: #fff;

    text-decoration: none;

    font-size: 20px;

    padding: 8px 15px;

    transition: opacity 0.3s;

}



.nav-item:hover {

    opacity: 0.8;

}



.nav-icon {

    width: 42px;

    height: 42px;

    margin-right: 8px;

    background-size: contain;

    background-repeat: no-repeat;

}



.intro-icon {

    background-image: url('imgs/intro-icon.png');

}



.news-icon {

    background-image: url('imgs/news-icon.png');

}



.play-icon {

    background-image: url('imgs/iplay-icon.png');

}



.try-icon {

    background-image: url('imgs/try-icon.png');

}



/* 内容包装器样式 */

.content-wrapper {

    position: relative;

    background: url('./imgs/company.jpg') top center no-repeat;

    background-size: auto auto;

    margin-top: -1px;

    overflow-x: hidden;

    width: 100%;

}



/* 介绍部分样式 */

.intro {

    padding: 30px 0;

    text-align: center;

}



.intro h1 {

    color: #ffffff;

    margin-bottom: 20px;

}



.intro p {

    max-width: 800px;

    margin: 0 auto;

    line-height: 1.6;

    color: #bbbbbb;

}



/* 轮播图样式 */

.slider {

    width: 100%;

    max-width: 1300px;

    height: 100vh;

    position: relative;

    margin: 0 auto;

    overflow: hidden;

    perspective: 1000px;

    touch-action: pan-y pinch-zoom;

}



.slides {

    width: 100%;

    height: 100%;

    position: relative;

    transform-style: preserve-3d;

    transition: transform 0.5s ease-in-out;

}



.slide {

    position: absolute;

    width: 60%;

    height: 100%;

    left: 20%;

    opacity: 0;

    transition: all 0.5s ease-in-out;

    pointer-events: none;

}



.slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    box-shadow: 0 10px 20px rgba(0,0,0,0.3);

}



.slide.prev {

    transform: translateX(-100%) translateZ(-200px) rotateY(35deg);

    opacity: 0.6;

    z-index: 2;

}



.slide.active {

    transform: translateX(0) translateZ(0) rotateY(0);

    opacity: 1;

    pointer-events: auto;

    z-index: 3;

}



.slide.next {

    transform: translateX(100%) translateZ(-200px) rotateY(-35deg);

    opacity: 0.6;

    z-index: 2;

}



/* 渐变遮罩 */

.slide::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(90deg, 
        rgba(0,0,0,0.5) 0%, 
        rgba(0,0,0,0) 20%, 
        rgba(0,0,0,0) 80%, 
        rgba(0,0,0,0.5) 100%
    );

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.5s;

}



.slide.prev::after,
.slide.next::after {

    opacity: 1;

}



/* 导航按钮 */

.slider-nav {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

    z-index: 4;

}



.slider-nav button {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: none;

    background: rgba(255,255,255,0.5);

    cursor: pointer;

    transition: all 0.3s;

}



.slider-nav button.active {

    background: #fff;

    transform: scale(1.2);

}



/* 左右切换按钮 */

.slider-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.432);

    border: none;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    cursor: pointer;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 36px;

    transition: all 0.3s;

}



.slider-btn:hover {

    background: rgba(255,255,255,0.4);

}



.prev-btn {

    left: 20px;

}



.next-btn {

    right: 20px;

}



/* 底部图片区域样式 */

.bottom-image {

    width: 100%;

    height: 506px;

    background: url('./imgs/lottery_class.jpg') top center no-repeat;

    background-size: cover;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

}



/* 文字样式 */

.bottom-text {

    text-align: center;

    color: #fff;

    position: relative;

    z-index: 2;

    padding-top: 10px;

}



/* 小图片容器样式 */

.lottery-icons {

    display: flex;

    justify-content: center;

    gap: 20px;

    padding: 0 20px 40px;

    width: 100%;

    max-width: 1200px;

    z-index: 2;

}



.lottery-icons img {

    width: 160px;

    height: 160px;

    object-fit: contain;

    transition: transform 0.3s;

}



.lottery-icons img:hover {

    transform: scale(1.1);

}



.bottom-text h2 {

    font-size: 48px;

    margin-bottom: 15px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



.bottom-text p {

    font-size: 24px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



/* 页脚样式 */

footer {

    background: #051421;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    padding: 30px 0;

    text-align: center;

}



.footer-logo {

    height: 40px;

    margin-bottom: 15px;

}



footer p {

    margin: 5px 0;

    color: #999;

}



/* 弹窗样式 */

.popup-iframe {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    display: none;

    z-index: 9999;

}



.popup-content {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.popup-close {

    position: fixed;

    right: 30px;

    top: -5px;

    width: 60px;

    height: 60px;

    border: none;

    background: none;

    color: #fff;

    font-size: 48px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    z-index: 101;

}



.popup-close:hover {

    opacity: 0.8;

}



.popup-content iframe {

    width: 100%;

    height: 100%;

    border: none;

}



/* 移动端适配 */

@media (max-width: 768px) {

    .popup-content {

        width: 100%;

        height: 100vh;

        margin: 0;

        border-radius: 0;

    }



    .navbar .container {

        flex-direction: column;

        align-items: center;

    }



    .logo {

        margin-bottom: 15px;

    }



    .nav-links {

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px;

    }



    .nav-item {

        font-size: 18px;

        padding: 6px 12px;

    }



    .nav-icon {

        display: none;

    }



    /* 轮播模块移动端适配 */

    .slider {

        height: 70vh;

    }



    .slide {

        width: 80%;

        left: 10%;

    }



    .slide.prev {

        transform: translateX(-80%) translateZ(-100px) rotateY(25deg);

    }



    .slide.next {

        transform: translateX(80%) translateZ(-100px) rotateY(-25deg);

    }



    .slider-btn {

        width: 40px;

        height: 40px;

        font-size: 24px;

    }



    .prev-btn {

        left: 10px;

    }



    .next-btn {

        right: 10px;

    }



    .slider-nav {

        bottom: 10px;

    }



    .slider-nav button {

        width: 8px;

        height: 8px;

    }



    .bottom-image {

        height: 300px;

        margin-top: 30px;

    }



    .bottom-text h2 {

        font-size: 36px;

    }



    .bottom-text p {

        font-size: 18px;

    }



    .lottery-icons {

        width: 100%;

        display: flex;

        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scroll-behavior: smooth;

        gap: 15px;

        padding: 0 15px 20px;

        scrollbar-width: none;

        -ms-overflow-style: none;

        max-width: 100%;

        box-sizing: border-box;

    }



    .lottery-icons::-webkit-scrollbar {

        display: none;

    }



    .lottery-icons img {

        width: 80px;

        height: 80px;

        flex: 0 0 auto;

        object-fit: contain;

    }



    .container {

        width: 100%;

        max-width: 100%;

        padding: 0 15px;

        box-sizing: border-box;

        overflow: hidden;

    }



    .popup-close {

        right: 20px;

        top: -5px;

        width: 50px;

        height: 50px;

        font-size: 40px;

    }

}



/* 平板设备适配 */

@media (min-width: 769px) and (max-width: 1300px) {

    .slider {

        width: 95%;

        height: 80vh;

    }



    .slide {

        width: 70%;

    }

}