html,body{width: 100%;height: 100%;}
.wrap img{width: 100%;height: 100%;object-fit: cover;}
.wrap{width: 100%;height: calc(100% - 45px);min-width: 1200px;min-height: 1080px;background: url(http://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/bg.jpg) no-repeat center / cover;overflow: hidden;position: relative;}
.main{width: 1200px;height: 100%;margin: 0 auto;position: relative;}
.logo{position:absolute;width:110px;height:145px;background:url(http://image.gyyxcdn.cn/upload/pic/logo/wd_logoLight.png) no-repeat;left: 13px;top: 22px;}
.nav{color: #984e37;font-size: 14px;position: absolute;right: 0px;top: 30px;width: 348px;height: 28px;line-height: 28px;text-align: center;background: url(http://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/nav.png) no-repeat;z-index:999;}
.nav a{margin:0 11px;color: #984e37;}
.nav a:hover{color: #dd442f;}
.role{width: 1486px;height: 1072px;position: absolute;bottom: 0;left: -318px;}
.sl{width: 925px;height: 287px;position: absolute;bottom: 315px;left: 210px;}
.btn{height: 219px;width: 100%;text-align: center;font-size: 0;position: absolute;bottom: 65px;box-sizing: border-box;padding-left: 75px;}
.btn li{width: 217px;height: 219px;display: inline-block;margin: 0 17px;transition: 0.6s;}
.btn li:hover{transform: translateY(-10px);}
.btn li a{display: block;width: 217px;height: 219px;background: url(http://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/btn.png) no-repeat;}
.btn li:nth-child(1) a{background-position: 0px 0px;}
.btn li:nth-child(2) a{background-position: -250px 0px;}
.btn li:nth-child(3) a{background-position: -500px 0px;}
.btn li:nth-child(4) a{background-position: -750px 0px;}
.btn li:nth-child(1):hover a{background-position: 0px -230px;}
.btn li:nth-child(2):hover a{background-position: -250px -230px;}
.btn li:nth-child(3):hover a{background-position: -500px -230px;}
.btn li:nth-child(4):hover a{background-position: -750px -230px;}
.mask{width: 100%;height: 100%;position: absolute;top: 0;pointer-events: none;}
.mask img{transform: scale(1.02);}
.role img{opacity: 0;animation: role 0.6s 0.3s ease-in-out forwards;}
@keyframes role{
	0%{
		opacity: 0;
		transform: translateY(100px);
	}
	100%{
		opacity: 1;
		transform: translateY(-0px);
	}
}
.sl img{opacity: 0;animation: sl 0.6s 0.3s ease-in-out forwards;}
@keyframes sl{
	0%{
		opacity: 0;
		transform: translateY(-30px);
	}
	100%{
		opacity: 1;
		transform: translateY(-0px);
	}
}
.btn li:nth-child(1) a{opacity: 0;animation: btn 0.6s 0.6s ease-in-out forwards;}
.btn li:nth-child(2) a{opacity: 0;animation: btn 0.6s 0.8s ease-in-out forwards;}
.btn li:nth-child(3) a{opacity: 0;animation: btn 0.6s 1s ease-in-out forwards;}
.btn li:nth-child(4) a{opacity: 0;animation: btn 0.6s 1.2s ease-in-out forwards;}
@keyframes btn{
	0%{
		opacity: 0;
		transform: translateY(10px);
	}
	100%{
		opacity: 1;
		transform: translateY(-0px);
	}
}