.lb{ background: url('../images/role/lb/banner.png') no-repeat center; height: 440px; }
.cw{ background: url('../images/role/cw/banner.png') no-repeat center; height: 440px; }
.dz{ background: url('../images/role/dz/banner.png') no-repeat center; height: 440px; }
.yw{ background: url('../images/role/yw/banner.png') no-repeat center; height: 440px; }
.cg{ background: url('../images/role/cg/banner.png') no-repeat center; height: 440px; }
.banner dl{padding-top:123px; }
.banner dl dt{font-size: 40px;font-weight: 500; line-height: 56px;}
.banner dl dd{margin:12px 0 23px 0;}
.tit{font-size:48px;font-weight: 400;}
.rolecon{ display: flex; align-items: center; justify-content: space-between; }
.roleconimg{width: 630px; overflow: hidden;border-radius: 4px;}
.roleconimg img{width: 630px;height: 472px !important; transition: .3s}
.roleconimg img:hover{ transform: scale(1.1); }
.roleconwz{ width: 430px; }
.time{ font-size: 14px; color: #666; text-indent: 23px; background:url('../images/role/clock.png') no-repeat left 2px}
.do{font-size: 28px;font-weight: 800;color: #212121;margin:1px 0 10px 0 }
.dodep{font-size: 16px;color: #2386EE}
.dodep span{margin: 0 10px; color: #ccc}
.thing{font-size: 14px;color: #666;line-height: 22px;margin: 40px 0 10px 0}
.relate{ display: flex; }
.relate p{margin-right: 10px;}
.roletag{width: 76px;height: 28px;line-height:28px;background: rgb(35,134,238,.08);border-radius: 16px;display: flex;align-items: center;font-size: 14px;color: #666}
.roletag img{ width: 28px; height: 28px; border-radius: 50%;margin-right: 6px;}
.rolebtn{ display: flex;margin-top: 40px; }
.rolebtn a{font-weight: bold}
.rolebtn .btn_w{color: #212121;border: 1px solid #999;}
.roleli{padding: 80px 0}
.role .roleli:nth-child(2){padding-top: 31px;}
.rolebg{ background: #F4F8FB; }
.bannercon{ position: relative; }
.video-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 22.5%;
}
.video-btn img {
    position: relative;
    z-index: 2;
    width: 80px;
}
.video-btn a:before {
    position: absolute;
    border-radius: 50%;
    content: "";
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.5);
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: water 1.5s linear infinite;
    animation: water 1.5s linear infinite;
}
.exp{margin-top: 0}
@keyframes water {
	0% {
		opacity: 0.5;
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%, -50%) scale(2);
		transform: translate(-50%, -50%) scale(2);
	}
}

@-moz-keyframes water {
	0% {
		opacity: 0.5;
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%, -50%) scale(2);
		transform: translate(-50%, -50%) scale(2);
	}
}

@-webkit-keyframes water {
	0% {
		opacity: 0.5;
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%, -50%) scale(2);
		transform: translate(-50%, -50%) scale(2);
	}
}

@-o-keyframes water {
	0% {
		opacity: 0.5;
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%, -50%) scale(2);
		transform: translate(-50%, -50%) scale(2);
	}
}
#videoPopup1 {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.4);
	display: none;
}

#videoPopup1 .video-box {
	width: 60%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

#videoPopup1 .video-box video {
	width: 100%;
}

#videoPopup1 .video-box .close {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
	cursor: pointer;
	text-align: center;
}

#videoPopup1 .video-box .close span {
	font-size: 16px;
	line-height: 40px;
	color: #fff;
}

#videoPopup1 .video-box .close:hover {
	background: rgba(0, 0, 0, 0.5);
}