html,body,.swiper{ width: 100%; height: 100%; max-width: 750px; margin:0 auto;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);box-sizing: border-box;webkit-text-size-adjust: none!important;text-size-adjust:none !important; font-size: 4.2vw;}
*{ outline: none;}
.whdt_bg1{ width: 100%; height: 100%; background: url(../images/whdt_6.jpg) no-repeat; background-size: cover; position: relative; overflow: hidden;}
.whdt_bg2{ width: 100%; height: 100%; background: url(../images/whdt_7.jpg) no-repeat; background-size: cover; position: relative; overflow: hidden;}



.whdt_banner{ width: 96%; margin: 13vh 2vw; height: auto;}
.whdt_p1_1{ width: 100%; margin-bottom: 5px;}
.whdt_p1_2{ margin-top: 20vh; padding: 0 2vw;}
.whdt_p1_2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 第1个独占一行 */
.whdt_p1_2 ul li:first-child {
  width: 100%;
}

/* 第2到第5个：一行2个 */
.whdt_p1_2 ul li:nth-child(n+2) {
  width: calc(50% - 5px);
}

.whdt_p1_2 ul img {
  width: 100%;
  height: auto;
  display: block;
}

.dtimg{ height: 100%; overflow-y:auto}
.dtimg img{ width: 100%;}
.whdt_fanhui{ display: none; position: fixed; right: 2vw; top: 80vh; font-size: 4vw; font-weight: bold; background-color: #80BDF9; color: #fff; padding: 5px 10px; border-radius: 10px; z-index: 999;}

@keyframes slide-up-guide{
    0%{transform:translateY(0);opacity:.3;}
    40%{transform:translateY(-20px);opacity:1;}
    100%{transform:translateY(-20px);opacity:0;}
}
.whdt_xs{animation:slide-up-guide 1.5s ease-in-out infinite;display:inline-block; position: absolute; left: calc(50% - 6vw); bottom: 2vh; opacity: 0; width: 12vw;}


@keyframes on_in{
    30% {
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(2);
    }
	70% {
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%) scale(2);
	}
	100%{
		left: 50%;
		top: -50%;
		transform: translate(-50%,-50%) scale(2);
	}
}


.swiper-slide-active .fIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.swiper-slide-active .rInUpR{
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

.swiper-slide-active .fInY {
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

.swiper-slide-active .fzInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

.swiper-slide-active .shake2 {
    -webkit-animation-name: shake;
    animation-name: shake;
}


.swiper-slide-active .fzIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.swiper-slide-active .fUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.swiper-slide-active .fLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.swiper-slide-active .fRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.swiper-slide-active .fDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.del_1{ animation-delay: 0.3s;}
.del_2{ animation-delay: 0.6s;}
.del_3{ animation-delay: 0.9s;}
.del_4{ animation-delay: 1.2s;}
.del_5{ animation-delay: 1.5s;}


@keyframes aaa{
	0%{
		transform: translateX(-50px);
	},
	100%{
		transform: translateX(50px);
	}
}



.music.play {
    width: 7vw;
    height: 7vw;
    background: url(../images/music-play.png) no-repeat;
    background-size: 7vw auto;
    position: fixed;
    left: 3vw;
    top: 3vw;
    z-index: 10;
}
.music.pause {
    width: 7vw;
    height: 7vw;
    display: block;
    background: url(../images/music-pause.png) no-repeat;
    background-size: 7vw auto;
    position: fixed;
    left: 3vw;
    top: 3vw;
    z-index: 10;
}