* {
    margin: 0;
    padding: 0;
}
html , body {
    width: 100%;
    height: 100%;
    /* overflow: auto; */
}
.warp {
    width: 100%;
    height: 100%;
}
.music_bg {
    position: fixed;
    right: 5vw;
    top: 2vw;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    z-index: 9999;
    background: url("../img/stop.png") center center no-repeat;
    background-size: 100%
}

.music_bg.play {
    background: url("../img/play.png") center center no-repeat;
    background-size: 100%;
    animation: play linear 3s infinite;
    -webkit-animation: play linear 3s infinite
}

.music_bg.stop {
    animation: play linear 3s infinite;
    -webkit-animation: play linear 3s infinite
}

@keyframes play {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg)
    }
}

/* 第一屏 */
.page1 {
    width: 100%;
    height: 100%;
    background: url('../img/page1-bg-zc.jpg') no-repeat center top;
    background-size: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: animationpage1 2s forwards 2s;
}
@keyframes animationpage1 {  
    from { 
        background: url('../img/page1-bg-zc.jpg') no-repeat center top; 
        background-size: 100%;
    }  
    to { 
        background: url('../img/page1-bg-zc.jpg') no-repeat center bottom;
        background-size: 100%;
    }  
}
.loading {
    width: 78vw;
    position: absolute;
}
.logo {
    width: 60vw;
    height: auto;
    position: absolute;
    top: 5vw;
    left: 5vw;
}
.title {
    width: 63vw;
    height: auto;
    opacity: 0;
    animation: animation 2s forwards 3.8s;
}
.text {
    width: 177vw;
    height: auto;
    margin-top: 5vw;
    opacity: 0;
    animation: animation 2s forwards 4.8s;
}
.gobtn {
    width: 28vw;
    height: auto;
    margin-top: 5vw;
    opacity: 0;
    animation-delay: 5.8s;
}
@keyframes animation {  
    from { 
        opacity: 0;  
    }  
    to { 
        opacity: 1; 
    }  
}
.isgobtn {
    opacity: 1;
}
/* 第二屏 */
.page2 {
    width: 100%;
    height: 100%;
    /* position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: 100% 100% !important; */
}
.qian , .last {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: 100% 100% !important;
}
.text1 {
    opacity: 0;
    position: absolute;
}
.lastimg {
    width: 160vw;
    opacity: 0;
    animation: animation2 2s forwards;
}
.iswdshow1 {
    animation: animation2 2s forwards;
}
.text2 {
    opacity: 0;
    position: absolute;
}
.iswdshow2 {
    animation: animation2 2s forwards 1s;
}
@keyframes animation2 {  
    from { 
        opacity: 0;  
    }  
    to { 
        opacity: 1; 
    }  
}
.wd-box {
    width: 170vw;
    height: 80vw;
    background: url('../img/dlog-bg.png') no-repeat left center;
    background-size: 100% 100%;
    z-index: 111;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s;
}
.ans-box {
    width: 100%;
    display: flex;
    justify-content: center;
}
.anst {
    width: 100%;
    line-height: 2;
    font-size: 6.4vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5.333vw;
}
.ans {
    width: 66vw;
    height: 10vw;
    line-height: 10vw;
    background: url('../img/tmbg.png') no-repeat left center;
    background-size: 100% 100%;
    margin: 0 5vw;
    padding: 0 2vw;
    box-sizing: border-box;
    font-size: 3.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ans img {
    height: 6vw;
}
.xz {
    background: url('../img/xzbg.png') no-repeat left center;
    background-size: 100% 100%;
    color: #fff;
}
.error {
    background: url('../img/errorbg.png') no-repeat left center;
    background-size: 100% 100%;
    color: #fff;
}
.right {
    background: url('../img/rightbg.png') no-repeat left center;
    background-size: 100% 100%;
    color: #fff;
}
.submit {
    width: 30vw;
    margin-top: 10vw;
}
.closebtn {
    width: 30vw;
    margin-top: 10vw;
}
.num-box {
    width: 140vw;
    text-align: right;
}
.num-box span {
    color: #FF6908;
}
.zm {
    width: 140vw;
    line-height: 1.8;
    text-align: justify;
    color: #404040;
}
.ansBtn {
    width: 35vw;
    position: absolute;
    bottom: 10vw;
    opacity: 0;
}
.iswdshow3 {
    animation: animation2 2s forwards 2s;
}

/* 轮播图 */
.gd {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: url('../img/page1-bg.png') no-repeat left center;
    background-size: 100% 100%; */
}
.carousel-container {
    perspective: 500vw;
    width: 80%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.carousel {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.film-strip {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.film-item {
    position: absolute;
    width: 40vw;
    height: 25vw;
    border-radius: 8px;
    /* overflow: hidden; */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); */
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    background-color: #000;
    border: 2px solid transparent;
    /* opacity: 0.6; */
}

.film-item:hover {
    transform: translateZ(2.667vw) scale(1.05);
}

.film-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.film-item.active {
    width: 65vw;
    height: 45vw;
    z-index: 10;
    /* box-shadow: 0 20px 50px rgba(255, 107, 107, 0.5); */
    border-color: #ff6b6b;
    opacity: 1;
}
.film-item.active.fdimg {
    width: 65vw;
    height: 45vw;
    animation: animationimg 2s forwards 1s;
}

.film-item.active img {
    /* transform: scale(1.05); */
    border-radius: 8px;
}
.film-item.active img.fdimg {
    width: 65vw;
    height: 45vw;
    animation: animationimg 2s forwards 1s;
}
@keyframes animationimg {  
    from { 
        width: 65vw;
        height: 45vw;
        opacity: 1;  
    }  
    to { 
        width: 200vw;
        height: 138vw;
        opacity: 0; 
    }  
}

.film-item .titleimg {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 20px 10px 10px;
    text-align: center;
    font-size: 6vw;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 8px;
}