html,body{width: 100%;height: 100%;}
.wrap{position: relative;max-width: 1920px;min-width: 1200px;height: calc(100% - 45px);max-height: 1035px;margin: 0 auto;overflow: hidden;}

.logo{z-index: 999;position:absolute;top:11px;left: 50%;margin-left: -578px;width:110px;height:145px;background:url(http://image.gyyxcdn.cn/upload/pic/logo/wd_logoLight.png) no-repeat;}
.wd_nav{z-index: 999;position: absolute;top:28px;right: 50%;margin-right: -598px;color:#4e1c05;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/nav.png) no-repeat;width: 406px;height: 28px;line-height: 28px;box-sizing: border-box;padding-left: 57px;}
.wd_nav a{margin:0 13px;font-size:14px;color:#4e1c05;}
.wd_nav a:hover{color:#a0462e;}

.content{width: 1920px;height: 1035px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/details_bg.jpg) no-repeat 50% 100%;}
.swiper-container{width: 1920px;height: 1035px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%)}

.swiper-container .swiper-slide{width: 100%;height: 100%;}
.main{width: 1200px;height: 1000px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

.round{width: 877px;height: 876px;position: absolute;top: 50%;left: 50%;transform: translate(-452px, -392px)}
.round img{width: 100%;height: 100%;}
.pt_icon{position: absolute;right: -23px;bottom: 9px;width: 38px;height: 92px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/pt_icon.png) no-repeat;}
.jd_icon{position: absolute;right: -23px;bottom: 9px;width: 38px;height: 92px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/jd_icon.png) no-repeat;}
.sj_icon{position: absolute;right: -23px;bottom: 9px;width: 38px;height: 92px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/sj_icon.png) no-repeat;}


.tab_btn{width: 1200px;height: 102px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 7%;z-index: 999;font-size: 0;text-align: center;padding-right: 25px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/navLine.png) no-repeat 50% 50%;}
.tab_btn li{width: 95px;height: 102px;display: inline-block;margin: 0 25px;position: relative;}
.tab_btn li i{position: absolute;right:-24px;top: 49px;width: 6px;height: 6px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/navDot.png) no-repeat;}
.tab_btn li a{display: block;width: 100%;height: 100%;}

.tab_btn li a.sy_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/sy_nav_btn.png) no-repeat;}
.tab_btn li a.syll_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/syll_nav_btn.png) no-repeat;}
.tab_btn li a.ctzs_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/ctzs_nav_btn.png) no-repeat;}
.tab_btn li a.sld_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/sld_nav_btn.png) no-repeat;}
.tab_btn li a.kfpw_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/kfpw_nav_btn.png) no-repeat;}
.tab_btn li a.gdjc_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjc_nav_btn.png) no-repeat;}
.tab_btn li a.mhys_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/mhys_nav_btn.png) no-repeat;}
.tab_btn li a.fszj_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/fszj_nav_btn.png) no-repeat;}
.tab_btn li a.bpqd_nav_btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/bpqd_nav_btn.png) no-repeat;}

.tab_btn li:hover a{background-position: 0px -102px;}
.tab_btn li.on a{background-position: 0px -102px;}



.ad .btn{width: 144px;height: 143px;position: absolute;}
.ad .btn span{display: block;width: 100%;height: 100%;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/btn.png) no-repeat;}
.ad .btn:hover span{background-position: 0px -143px;}
.ad img{width: 100%;height: 100%;}

.role img{width: 100%;height: 100%;}
.syll .ad{width: 670px;height: 215px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.syll .ad .btn{top: 55px;right: -30px;}
.syll .role{width: 888px;height: 521px;position: absolute;top: 263px;left: 90px;}

.ctzs .ad{width: 656px;height: 209px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.ctzs .ad .btn{top: 55px;right: -30px;}
.ctzs .role{width: 1102px;height: 755px;position: absolute;top: 183px;left: 55px;}

.sld .ad{width: 608px;height: 214px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.sld .ad .btn{top: 55px;right: -30px;}
.sld .role{width: 1095px;height: 805px;position: absolute;top: 123px;left: 60px;}

.kfpw .ad{width: 688px;height: 202px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.kfpw .ad .btn{top: 55px;right: -30px;}
.kfpw .role{width: 1043px;height: 868px;position: absolute;top: 156px;left: 43px;}


.mhys .ad{width: 656px;height: 213px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.mhys .ad .btn{top: 55px;right: -30px;}
.mhys .role{width: 1095px;height: 726px;position: absolute;top: 176px;left: 56px;}

.fszj .ad{width: 656px;height: 216px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.fszj .ad .btn{top: 55px;right: -30px;}
.fszj .role{width: 1143px;height: 708px;position: absolute;top: 176px;left: 56px;}

.bpqd .ad{width: 656px;height: 197px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.bpqd .ad .btn{top: 55px;right: -30px;}
.bpqd .role{width: 1198px;height: 952px;position: absolute;top: 21px;left: 0px;}


.gdjc .ad{width: 688px;height: 202px;position: absolute;left: 50%;transform: translateX(-50%);top: 25px;z-index: 1;}
.gdjc .accordion{width: 100%;font-size: 0;text-align: center;position: absolute;top: 240px;}
.gdjc .accordion .li{position: relative;overflow: hidden;width: 67px;height: 464px;margin:0 3px;zoom:1;display: inline-block;}
.gdjc .accordion.li_last{margin-right: 0;}
.gdjc .accordion .li a.btn{z-index: 999;display: block;position: absolute;top: 0;left: 0;width: 67px;height: 464px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjs_btn.png) no-repeat;text-indent: -9999px;overflow: hidden;}
.gdjc .accordion .li a{background-position: 0 0;}
.gdjc .accordion .li.on a{background-position: 0 -464px;}
.gdjc .accordion .li:hover a{background-position: 0 -464px;}
.gdjc .accordion .li .slide{display: none;position: absolute;top: 5px;left: 66px;width: 541px;height: 453px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjc_imgBg.png) no-repeat;}
.gdjc .accordion .li .slide .slidebox{position: absolute;top: 38px;left: 8px;width: 511px;height: 385px;display: none;overflow: hidden;box-sizing: border-box;padding: 3px;border: 1px solid #ee7126;}
.gdjc .accordion .li .slide .slidebox img{width: 100%;height: 100%;}
.gdjc .accordion .li .slide .slidenum{z-index: 999;position: absolute;bottom: 50px;right: 40px;height: 18px;}
.gdjc .accordion .li .slide .slidenum li{width: 18px;height: 18px;float: left;margin-left: 6px;}
.gdjc .accordion .li .slide .slidenum li a{display: block;width: 18px;height: 18px;background:#fffce5;border-radius: 50%;}
.gdjc .accordion .li .slide .slidenum li.on a{background: #ac3e38;}
.gdjc .scrollcontent{position: absolute;top: 650px;left: 202px;width: 800px;height: 112px;padding-top: 66px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjc_txtBg.png) no-repeat 0 100%;overflow: hidden;}
.gdjc .line{position: absolute;top: 0;left: 50px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjc_line.png) no-repeat;width: 13px;height: 65px;}
.gdjc .vcontent{position: relative;width: 755px;height: 83px;margin: 15px 0 13px 15px;overflow: hidden;}
.gdjc .vcont{position: absolute;top: 0;left: 0;height: auto;}
.gdjc .sub{display: none;clear: both;}
.gdjc .sub h3{font-size: 16px;color: #f5ebc2;line-height: 20px;padding-bottom: 3px;}
.gdjc .sub p{font-size: 14px;color: #f5ebc2;line-height: 20px;}

.gdjc .vcontent{overflow: hidden;overflow-y: auto;padding-right: 17px;}
.gdjc .vcont{width: 100%;}
.gdjc .vcontent::-webkit-scrollbar {
    width: 7px;
    display: block;
}
.gdjc .vcontent::-webkit-scrollbar-thumb {
	
    background-color: #dec7b8;
    border-radius: 7px;
}
.gdjc .vcontent::-webkit-scrollbar-track {
    border-radius: 4px;
	background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/soll_line.png) no-repeat 50% 50%;
}



.text{width: 1920px;height: 1035px;position: absolute;left: 0%;top: 0%;}
.text img{position: absolute;opacity: 0;}
.text span{position: absolute;}
.text span:nth-child(1){animation: trans 4s 4s ease-in-out infinite alternate;}
.text span:nth-child(2){animation: trans 4s ease-in-out infinite alternate;}
.text span:nth-child(3){animation: trans 4s 4s ease-in-out infinite alternate;}
.text span:nth-child(4){animation: trans 4s ease-in-out infinite alternate;}
.text span:nth-child(5){animation: trans 4s 4s ease-in-out infinite alternate;}
.text span:nth-child(6){animation: trans 4s ease-in-out infinite alternate;}
.text span:nth-child(7){animation: trans 4s 4s ease-in-out infinite alternate;}
.text span:nth-child(8){animation: trans 4s ease-in-out infinite alternate;}
.text span:nth-child(9){animation: trans 4s 4s ease-in-out infinite alternate;}

.text span:nth-child(1) img{width: 53px;height: 1079px;left: 250px;top: 0;animation: color 2s 2s ease-in-out infinite alternate;}
.text span:nth-child(2) img{width: 54px;height: 1000px;left: 370px;top: 35px;animation: color 2s ease-in-out infinite alternate;}
.text span:nth-child(3) img{width: 52px;height: 819px;left: 486px;top: 35px;animation: color 2s 2s ease-in-out infinite alternate;}
.text span:nth-child(4) img{width: 54px;height: 522px;left: 616px;top: 35px;animation: color 2s ease-in-out infinite alternate;}
.text span:nth-child(5) img{width: 46px;height: 483px;left: 1302px;top: 35px;animation: color 2s 2s ease-in-out infinite alternate;}
.text span:nth-child(6) img{width: 48px;height: 750px;left: 1405px;top: 35px;animation: color 2s ease-in-out infinite alternate;}
.text span:nth-child(7) img{width: 50px;height: 499px;left: 1511px;top: 35px;animation: color 2s 2s ease-in-out infinite alternate;}
.text span:nth-child(8) img{width: 49px;height: 1018px;left: 1630px;top: 35px;animation: color 2s ease-in-out infinite alternate;}
.text span:nth-child(9) img{width: 46px;height: 564px;left: 1745px;top: 35px;animation: color 2s 2s ease-in-out infinite alternate;}

.round img{animation: spin 25s linear infinite;}
.tab_btn{animation: trans1 0.8s 0s ease-in-out forwards;opacity: 0;}


.text{animation: scale 1s 0s linear forwards;}
.ad .btn span{opacity: 0;}
.ad img,.role{opacity: 0;}
.swiper-slide-active .ad .btn span{animation: color1 0.5s 1s linear forwards;}
.swiper-slide-active .ad img{opacity: 1;pointer-events: none;mask: url("http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/nature-sprite(1).png");mask-size: 2300% 100%;animation: ani 0.8s 0.8s steps(22) forwards;}
.swiper-slide-active .role,.swiper-slide-active .accordion,.swiper-slide-active .scrollcontent{opacity: 1;mask: url("http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/natureSmaller.png");mask-size: 7100% 100%;animation: ani2 0.8s steps(70) forwards;}

@keyframes trans1{
	0%{
		opacity: 0;
		transform: translate(-50%,100%);
	}
	100%{
		opacity: 1;
		transform: translate(-50%,0%);
	}
}


@keyframes ani {
        from {
            -webkit-mask-position: 0 0;
             mask-position: 0 0;
        }

        to {
            -webkit-mask-position: 100% 0;
             mask-position: 100% 0;
        }
}
@keyframes ani2 {
        from {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
        }

        to {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }
}


@keyframes color1{
	0%{
		opacity: 0;
		
	}
	100%{
		opacity: 1;
		
	}
}
@keyframes spin {
    0% { 
		transform: rotate(0deg); 
		}
    100% { 
		transform: rotate(-360deg); 
	}
  }
@keyframes color{
	0%{
		opacity: 0.2;
		
	}
	100%{
		opacity: 1;
		
	}
}
@keyframes trans{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(30px);
	}
}

@keyframes scale{
	0%{
		transform: scale(2);
	}
	100%{
		transform: scale(1);
	}
}

.tc{width: 891px;height: 560px;position: absolute;top: 240px;left: 50%;transform: translateX(-50%);text-align: center;}
.tc h3{color: #fff3c8;font-size: 20px;height: 20px;line-height: 20px;text-align: left;font-weight: bold;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/tc_icon.png) no-repeat 0% 50%;padding-left: 23px;margin: 15px 0;}
.tc p{color: #eebb73;font-size: 16px;position: relative;padding-left: 24px;line-height: 24px;margin: 10px 0;text-align: left;}
.tc p span{position: absolute;left: 0;top: 4px;width: 17px;height: 17px;background: #6e4d1e;border-radius: 50%;color: #ffd9a3;font-size: 14px;text-align: center;line-height: 14px;}

.tc table{width: 100%;text-align: center;margin: 15px 0;}
.tc table tr th{height: 32px;border: 1px solid #836854;background: #5e390e;color: #f3da8d;font-size: 16px;}
.tc table tr td{border: 1px solid #836854;color: #d4bc9a;font-size: 14px;padding: 8px 0;background: #27150d;}
.tc img{border: 1px solid #8c5426;padding: 4px;margin: 15px 0;}

.tc .tc_cont{width: 891px;height: 100%;overflow: hidden;overflow-y: auto;}
.tc .tc_tab{width: 851px;display: none;}
.tc .tc_tab.on{display: block;}

.tc .tc_cont::-webkit-scrollbar {
    width: 6px;
    display: block;
}
.tc .tc_cont::-webkit-scrollbar-thumb {
    background-color: #bf9a69;
    border-radius: 6px;
}
.tc .tc_cont::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #552f23;
}

.tc_btn{width: 150px;position: absolute;right: -171px;top: 7px;}
.tc_btn li{width: 150px;height: 30px;background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/tc_tab.png) no-repeat;cursor: pointer;margin-bottom: 25px;text-align: center;line-height: 28px;color: #fae3a7;font-size: 16px;}
.tc_btn li:hover{background-position: 0 -30px}
.tc_btn li.on{background-position: 0 -30px}

.tc{transform: translate(-50%,30px);opacity: 0;visibility: hidden;}

.ad,.tc,.role_box,.ad .btn,.round{transition: 0.5s;}

.role_box{width: 100%;height: 100%;}

.main.on .ad{transform: translate(-50%,-30px);}
.main.on .role_box{transform: translateY(-30px) scale(1.1);opacity: 0;}
.main.on .tc{visibility: initial;transform: translate(-50%,0px);opacity: 1;}
.main.on .ad .btn{opacity: 0;visibility: hidden;}

.round.on img{animation-play-state:paused;}	
.round.on{background: radial-gradient(#1b0d06,transparent);}
	

	
.gdjc .accordion.pt .li a.btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjs_btn_pt.png) no-repeat;}
.gdjc .accordion.pt .li:nth-child(1) a.btn{background-position: 0px 0px;}
.gdjc .accordion.pt .li:nth-child(2) a.btn{background-position: -80px 0px;}
.gdjc .accordion.pt .li:nth-child(3) a.btn{background-position: -161px 0px;}
.gdjc .accordion.pt .li:nth-child(4) a.btn{background-position: -241px 0px;}
.gdjc .accordion.pt .li:nth-child(5) a.btn{background-position: -321px 0px;}
.gdjc .accordion.pt .li:nth-child(6) a.btn{background-position: -401px 0px;}
.gdjc .accordion.pt .li:nth-child(1).on a.btn{background-position: 0px -464px;}
.gdjc .accordion.pt .li:nth-child(2).on a.btn{background-position: -80px -464px;}
.gdjc .accordion.pt .li:nth-child(3).on a.btn{background-position: -161px -464px;}
.gdjc .accordion.pt .li:nth-child(4).on a.btn{background-position: -241px -464px;}
.gdjc .accordion.pt .li:nth-child(5).on a.btn{background-position: -321px -464px;}
.gdjc .accordion.pt .li:nth-child(6).on a.btn{background-position: -401px -464px;}

.gdjc .accordion.jd .li a.btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjs_btn_jd.png) no-repeat;}
.gdjc .accordion.jd .li:nth-child(1) a.btn{background-position: 0px 0px;}
.gdjc .accordion.jd .li:nth-child(2) a.btn{background-position: -80px 0px;}
.gdjc .accordion.jd .li:nth-child(3) a.btn{background-position: -161px 0px;}
.gdjc .accordion.jd .li:nth-child(4) a.btn{background-position: -241px 0px;}
.gdjc .accordion.jd .li:nth-child(5) a.btn{background-position: -321px 0px;}
.gdjc .accordion.jd .li:nth-child(1).on a.btn{background-position: 0px -464px;}
.gdjc .accordion.jd .li:nth-child(2).on a.btn{background-position: -80px -464px;}
.gdjc .accordion.jd .li:nth-child(3).on a.btn{background-position: -160px -464px;}
.gdjc .accordion.jd .li:nth-child(4).on a.btn{background-position: -240px -464px;}
.gdjc .accordion.jd .li:nth-child(5).on a.btn{background-position: -321px -464px;}

.gdjc .accordion.sj .li a.btn{background: url(http://image.gyyxcdn.cn/upload/wd/action/p/1.77/images/gdjs_btn_sj.png) no-repeat;}
.gdjc .accordion.sj .li:nth-child(1) a.btn{background-position: 0px 0px;}
.gdjc .accordion.sj .li:nth-child(2) a.btn{background-position: -80px 0px;}
.gdjc .accordion.sj .li:nth-child(3) a.btn{background-position: -161px 0px;}
.gdjc .accordion.sj .li:nth-child(1).on a.btn{background-position: 0px -464px;}
.gdjc .accordion.sj .li:nth-child(2).on a.btn{background-position: -80px -464px;}
.gdjc .accordion.sj .li:nth-child(3).on a.btn{background-position: -160px -464px;}