html,body{width: 100%;height: 100%;overflow: hidden;}
.wrap{width: 100%;min-width: 1200px;max-width: 3840px;height:calc(100% - 45px);position: relative;margin: 0 auto;/* max-width: 1920px;max-height: 1080px; */}
.swiper-container{position: relative;width: 100%;height: 100%;}
.swiper-slide{position: relative;width: 100%;height: 100%;overflow: hidden;}
.swiper_bottom{height: 160px;}
.logo{z-index: 999;position:absolute;top: 0.19rem;left:50%;margin-left: -6rem;width:1.10rem;height:1.45rem;background:url(http://image.gyyxcdn.cn/upload/pic/logo/wd_logoNeu.png) no-repeat;background-size: 100% 100%;}
.nav{z-index: 999;position: absolute;top: 0.39rem;right: 50%;margin-right: -6rem;color: #2b4478;width: 3.32rem;height: 0.32rem;background: rgba(248,249,255,0.9);text-align: center;line-height: 0.32rem;font-size: 0.14rem; box-sizing: border-box;border-radius: 0.14rem;}
.nav a{font-size: 0.14rem;color: #2b4478;margin: 0 0.1rem;}
.nav a:hover{color: #d95914;}
.down{width: 1.36rem;height: 0.47rem;position: absolute;bottom: 0.35rem;left: 50%;z-index: 9;margin-left:-0.68rem;}
.down img{width: 100%;height: 100%;animation: bounce 1s ease-in-out infinite alternate;}
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-0.2rem);
    }
}
.index-container{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/bg02.jpg) no-repeat center / cover;}
.swiper-slide01{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/bg01.jpg) no-repeat center / cover;}
.main{width: 12.00rem;height: 10.80rem;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.canvas{width: 100%;height: 100%;position: absolute;pointer-events: none;z-index: 999;top: 0;}
/* 第一屏 */
.swiper-slide01 img{width: 100%;height: 100%;}
.swiper-slide01 .sl{width: 4.56rem;height: 6.75rem;position: absolute;top: 1.99rem;left: 0rem;}
.swiper-slide01 .sy_role{width: 100%;height: 100%;position: absolute;}
.swiper-slide01 .sy_y{width: 100%;height: 100%;position: absolute;}
.swiper-slide01 .sy_h{width: 100%;height: 100%;position: absolute;}
.swiper-slide01 .sy_g{width: 100%;height: 100%;position: absolute;}
.swiper-slide01 .sy_n01{width: 4.63rem;height: 4.4rem;position: absolute;right: 0;top: 50%;margin-top: -1rem;}
.swiper-slide01 .sy_n02{width: 1.2rem;height: 0.96rem;position: absolute;top: 1.5rem;left: 50%;}
.swiper-slide01 img{object-fit: cover;}
.swiper-slide01 .expect{width: 0.6rem;height: 2.18rem;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/expect.png) no-repeat;background-size: 1.2rem 2.18rem;position: absolute;left: 0.56rem;top: 5.25rem;font-size: 0;}
.swiper-slide01 .expect:hover{background-position:-0.6rem 0 ;}
.swiper-slide01 .sy_g{animation: sy_g 1.5s 0s ease-in-out infinite alternate;}
@keyframes sy_g{
	0%{
		opacity: 0.4;
	}
	100%{
		opacity: 1;
	}
}
.swiper-slide01 .sy_y{animation: sy_y 4s 0s ease-in-out infinite alternate;}
@keyframes sy_y{
	0%{
		transform: scale(1.04);
	}
	100%{
		transform: scale(1.08);
	}
}
.swiper-slide01 .sy_role{animation: sy_role 0.8s 0.3s ease-out forwards;opacity: 0;}
@keyframes sy_role{
	0%{
		opacity: 0;
		transform: translateY(-80px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}
.swiper-slide01 .sl{animation: sl 0.8s 0.3s ease-out forwards;opacity: 0;}
.swiper-slide01 .expect{animation: sl 0.8s 0.3s ease-out forwards;opacity: 0;}
@keyframes sl{
	0%{
		opacity: 0;
		transform: translateX(80px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}
.swiper-slide01 .sy_role img{animation: sy_roleimg 1.5s ease-in-out infinite alternate;}
@keyframes sy_roleimg {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-0.15rem);
    }
}
.swiper-slide01 .sy_n01 img{animation: sy_n01img 3s ease-in-out infinite alternate;}
@keyframes sy_n01img {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0.15rem);
    }
}
.swiper-slide01 .sy_n02 img{animation: sy_n02img 3s ease-in-out infinite alternate;}
@keyframes sy_n02img {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-0.15rem);
    }
}


/* 第二屏后公共样式 */
/* 导航 */
.nav_list{width:1.56rem;position:absolute;top:50%;right:-2rem;transform:translateY(-50%);z-index:999;transition:all .5s ease; background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/nav_line.png) no-repeat 50% 0;background-size: 0.13rem 5.54rem;  height: 5.54rem; padding-top: 0.8rem; box-sizing:border-box;}
.nav_list.on{right:0.2rem;}
.nav_list li{margin-bottom: 0.24rem;}
.nav_list li a{display:block;width: 1.56rem;color:#017090; background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/nav_bg.png) no-repeat; background-size: 3.12rem 0.59rem; font-size:0.2rem;height:0.59rem;text-align:center;box-sizing:border-box;line-height:0.59rem;font-weight: bold;}
.nav_list li.on a{background-position: -1.56rem 0; color:#e04b0a;}

.wd_02_bg{width: 100%; height: 100%; position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);}
.wd_02_bg div{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.wd_02_bg div:nth-child(1){background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_02_bg02.png) no-repeat center / cover;z-index:1;animation: sy_y 4s 0s ease-in-out infinite alternate;}
.wd_02_bg div:nth-child(2){z-index:2; transform: scale(1.012);}
.wd_02_bg img{width: 100%; height: 100%;object-fit: cover;object-position:center center;}
.details{position: absolute;top: 0;left: 0;z-index: 999; width: 100%; height: 100%;}
.wd_02_circle{position:absolute;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_02_circle.png) no-repeat;width:10.09rem; height:7.85rem;background-size: 100% 100%;left: 50%; top: 50%; margin-left: -3.8rem;margin-top: -4.13rem;}
@keyframes rotateCircle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.wd_02_cont{position: absolute; width: 12rem; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.wd_02_cont.ani{animation: In ease-in-out 1s both;}
@keyframes In {
	0% {
	    opacity: 0;
		transition: scale(0.1);
	}
	100% {
	    opacity: 1;
		transition: scale(1);
	}
}
.wd_02_cont h2{position: absolute;left:0rem; top: 50%;transform: translateY(-50%);z-index: 50;}
.wd_02_cont img{width: 100%; height: 100%;}
.wd_02_cont a{position: absolute;text-indent: -999999px; overflow: hidden;width: 1.73rem; height: 1.78rem; top: 50%;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_02_btn.png) no-repeat; background-size: 1.73rem 3.56rem;z-index: 99;}
.wd_02_cont a:hover{background-position: 0 -1.78rem;}
.wd_02_cont div.man img {animation: 4s ease-in-out 0s infinite normal both running wobble01;}
@keyframes wobble01{
	0% {
	    transform: perspective(2400px) translate3d(0%, 0, 20px) rotate3d(0, 0, 1, 0deg);
	}
	50% {
	    transform: perspective(2400px) translate3d(1.5%, 0, 20px) rotate3d(0, 1, 0, 5deg);
	}
	100% {
    transform: perspective(2400px) translate3d(0%, 0, 20px) rotate3d(0, 0, 1, 0deg);
}
}

/* 第二屏-天衍决 */
.wd_02_cont h2{width: 3.3rem;height: 6.54rem;left:-0.7rem;transform: translateY(-57%);}
.wd_02_cont div.wd_02_man{position: absolute; left: 3.7rem; top: 53%; width: 6.99rem; height: 8.12rem;transform: translate(2rem,-6rem);transition: 1s;opacity: 0;}
.wd_02_cont a{left: 1.9rem;transform: translateY(-52%);}
.wd_02_cont.ani div.wd_02_man{transform: translate(0,-54%);opacity: 1;}

/* 第三屏-螯魔封印 */
.wd_03_cont h2{width: 3.6rem; height: 7.13rem;left:-0.7rem; transform: translateY(-52%);}
.wd_03_cont div.wd_03_man{ position: absolute; left: 3.6rem; top: 48%; width: 7.63rem; height: 4.9rem;transform: translate(2rem,-6rem);transition: 1s;opacity: 0;}
.wd_03_cont div.wd_03_zs{position: absolute; width: 3.59rem; height: 6.41rem; left:5.5rem; top: 50%; transform: translateY(-61%);}
.wd_03_cont a{left: 1.9rem;transform: translateY(-52%);}
.wd_02_cont.ani div.wd_03_man{transform: translate(0,-58%);transition: 1s;opacity: 1;}

/* 第四屏-跨服瑶池演武 */
.wd_04_cont h2{width: 3.52rem; height: 7.17rem; left:-0.4rem; transform: translateY(-58%);}
.wd_04_cont div.wd_04_man{ position: absolute; left: 2.4rem; top: 50%; width: 8.2rem; height: 8.2rem;transform: translate(2rem,-6rem);transition: 1s;opacity: 0;}
.wd_04_cont a{left: 2.3rem;transform: translateY(-65%);}
.wd_02_cont.ani div.wd_04_man{transform: translate(0,-50%);transition: 1s;opacity: 1;}

/* 第五屏-一键战斗 */
.wd_06_cont h2{width: 5.4rem; height: 7.39rem; left:-0.9rem; transform: translateY(-60%);}
.wd_06_cont div.wd_06_man{ position: absolute; left: 3.4rem; top: 50%; width: 6.35rem; height: 8.66rem;transform: translate(2rem,-6rem);transition: 1s;opacity: 0;}
.wd_06_cont a{left: 1.9rem;transform: translateY(-65%);}
.wd_02_cont.ani div.wd_06_man{transform: translate(0,-50%);transition: 1s;opacity: 1;}

/* 第六屏-更多精彩 */
.wd_05_cont h2{width: 7.79rem;height:3.2rem;left:1.6rem;transform: translateY(-5rem);}
.wd_05_cont ul.btn{width: 100%;font-size: 0;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-2.1rem);}
.wd_05_cont ul.btn li{display: inline-block;overflow: hidden;width: 5.6rem;height: 2.82rem;margin: 0 0.2rem;cursor: pointer;transition:transform 0.6s;}
.wd_05_cont ul.btn li:nth-child(1){background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_btn01.png) no-repeat center;background-size: 5.3rem 2.79rem;}
.wd_05_cont ul.btn li:nth-child(2){background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_btn02.png) no-repeat center;background-size: 5.6rem 2.82rem;}
.wd_05_cont ul.btn li:nth-child(3){background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_btn03.png) no-repeat center;background-size: 5.3rem 2.8rem;}
.wd_05_cont ul.btn li:nth-child(4){background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_btn04.png) no-repeat center;background-size: 5.29rem 2.75rem;}
.wd_05_cont ul.btn li:hover{transform: translateY(-10px);}

.wd_05_cont .text{width: 8.95rem;height: 0rem;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_text.png) no-repeat;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-1.7rem);background-size: 100% 6.33rem;overflow: hidden;transition:height 0.8s;}
.wd_05_cont .text.on{height: 6.33rem;}
.wd_05_cont .text ul{width: 100%;height: 100%;}
.wd_05_cont .text li{display: none;overflow: hidden;width: 100%;height: 100%;position: relative;}
.wd_05_cont .text li.on{display: block;}
.wd_05_cont .text li img{width: 4.9rem;height: 3.08rem;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_imgbg.png) no-repeat;padding: 0.12rem 0.11rem;margin: 0.1rem auto 0.13rem;display: block;}
.wd_05_cont .text li h3 {width: 4.75rem;height: 1.07rem;margin: 0.07rem auto;padding-right: 0.2rem;}
.wd_05_cont .text li h3 img{background: none;width: 4.75rem;height: 1.07rem;margin: 0;padding: 0;}
.wd_05_cont .text li p{width: 6.3rem;height: 0.8rem;color: #316192;font-size: 0.16rem;line-height: 0.26rem;margin: 0 auto;font-weight: bold;overscroll-behavior:none;overflow: hidden;overflow-y: scroll;}
.wd_05_cont .text .up{display: block;width: 2.54rem;height: 1.36rem;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_up.png) no-repeat;background-size: 2.54rem 2.72rem;position: absolute;top: -0.1rem;right: 0.1rem;cursor: pointer;z-index: 9;}
.wd_05_cont .text .up:hover{background-position: 0 -1.36rem;}

.wd_05_cont .text li p::-webkit-scrollbar {
   width: 0.07rem;
}
.wd_05_cont .text li p::-webkit-scrollbar-thumb {
    background-color: #1868ba;
	border-radius: 0.07rem;
	cursor: pointer;
}
.wd_05_cont .text li p.has-scroll::-webkit-scrollbar-track {
    background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_05_soll.png) no-repeat;
    background-size: 0.07rem 0.8rem;
}


/* 弹层 */
.tc{display:none;position:absolute;width:10.92rem;height:7.63rem;background:url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_tc_bg.png) no-repeat; background-size:100% 100%; z-index:999;padding:0.2rem 0.86rem 0.6rem 0.84rem; box-sizing: border-box;z-index: 1000012;}
.tc .close{position:absolute;top:-0.07rem;right:-0.75rem;display:block;width:0.59rem;height:0.66rem; text-indent:-999px;overflow:hidden;background:url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_tc_close.png) no-repeat; background-size: 100% 100%;}
.tc_box{overflow:hidden;}
.tc.tc h2{width: 9.5rem; height: 1.36rem;margin: 0 auto 0.07rem;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_tc_tit.png) no-repeat center / cover;font-size: 0.36rem;color: #0e6da9;font-weight: bold;text-align: center;line-height: 1.38rem;}
.tc_btn{position:absolute;right:-1.01rem; top:1.17rem;overflow:hidden;}
.tc_btn li{width:1.74rem;height: 0.38rem;margin-bottom:0.18rem;}
.tc_btn li a{display:block;width:100%;height:100%; background:url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_tc_tabbg.png) no-repeat 0 0; background-size: 1.74rem 0.76rem; color: #f5fffc;font-size:0.18rem;text-align:center; line-height:0.38rem;} 
.tc_btn li.on a{background-position:0 -0.38rem;color: #c64c2f;}
.tc_cont{height:5.37rem;}
.soll{overflow-y: auto;height:100%;line-height:0.24rem;padding-right: 0.2rem;}
.soll span{color:#ce731a;}
.soll p{position:relative;padding:0 0 0.09rem 0.28rem;overflow:hidden;line-height:0.24rem;font-size:0.16rem;color:#2c6a90;}
.soll p i{position:absolute;top:0.02rem;left:0px;float:left;width:0.18rem;height:0.18rem; border-radius: 0.09rem; background: #216087; font-size:0.14rem;color:#e4f9fb;line-height:0.18rem;text-align:center;font-style:normal;}
.soll p span{color:#F00;}
.wd_tc_img{text-align: center;}
.wd_tc_img img{padding:0.02rem;border:0.02rem solid #4b677f;margin:0.2rem auto;}
.soll h3{padding-left:0.22rem;background:url(http://image.gyyxcdn.cn/upload/wd/action/p/1.811/images/wd_tc_icon.png) no-repeat 0 50%; background-size: 0.17rem 0.17rem; font-size:0.2rem;font-weight:bold;color:#10689f;line-height:0.46rem;}
.soll table{width:8.93rem;margin:0.12rem 0;text-align:center;background:#f9feff;}
.soll table tr th{height:0.32rem;background:#4b7aa3;border:1px solid #cadfec;font-size:16px;color:#ffffff; padding: 0 0.1rem;}
.soll table tr td{padding:0.1rem;border:1px solid #cadfec;font-size:14px;color:#4b677f;line-height:22px;}
.soll::-webkit-scrollbar{position:relative;top:0;width:0.06rem;height:100%;float:right;}
.soll::-webkit-scrollbar-track{position:relative;left:0.01rem;width:0.04rem;height:100%;background:#accae5;border-radius:0.06rem;}
.soll::-webkit-scrollbar-thumb{ position:absolute;width:0.06rem;left:0;top:0;height:0.5rem;background:#4b7aa3;cursor:pointer;border-radius:0.05rem;}
.tc{left: 0;top: 0;bottom: 0;right: 0;margin: auto;}
.tc_mask{width: 100%;height: 100%;position: absolute;background: rgba(0,0,0,0.8);top: 0;left: 0;z-index: 99999;display: none;}