* {
	margin: 0;
	padding: 0;
}

.page-container {
	position: relative;
}

.page-container .bg-img {
	display: block;
	width: 100%;
}

.page-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.role-bg {
	position: absolute;
	top: 23.2vw;
	width: 93.8vw;
	left: 3.1vw;
}

.role-bg .role-bg-img {
	width: 100%;
}

.role-img-box {
	position: absolute;
	top: -7.2vw;
    right: 0.3vw;
}

.role-img-box .role-img {
	display: none;
}

.role-img-box .role-img.active {
	display: block;
}

.role-img-box img {
	width: 55.2vw;
}

.role-info-box {
	position: absolute;
	top: 9vw;
	left: 7vw;
}

.role-info-box .role-info-item {
	display: none;
}

.role-info-box .role-info-item.active {
	display: block;
}

.role-info-box .info-desc {
	display: flex;
	width: 25.06vw;
	justify-content: right;
	color: #537bcb;
}

.role-info-box .info-desc div{
	writing-mode: tb;
	width: 3.58vw;
	font-size: 1.7vw;
	line-height: 2.38vw;
	letter-spacing: 2px;
}

.role-info-box .info-title {
	position: absolute;
	top: 0;
	right: -10.8vw;
}

.role-info-box .info-title img {
	display: block;
	width: 9.87vw;
}

.role-nav {
	position: absolute;
	bottom: 14vw;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}

.role-nav .role-nav-item {
	margin: 0 .5vw;
	flex: 1;
	position: relative;
	width: 17.34vw;
	height: 17.34vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12.4vw 12.4vw;
}

.role-nav .role-nav-item > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12.4vw;
	height: 12.4vw;
	cursor: pointer;
	z-index: 1;
}

.role-nav .role-nav-item.active {
	background-size: 100% 100%;
}

.role-nav .role-nav-item:nth-child(1) {
	background-image: url(../img/xfhx/role_icon_1.png);
}

.role-nav .role-nav-item.active:nth-child(1) {
	background-image: url(../img/xfhx/role_icon_1_active.png);
}

.role-nav .role-nav-item:nth-child(2) {
	background-image: url(../img/xfhx/role_icon_2.png);
}

.role-nav .role-nav-item.active:nth-child(2) {
	background-image: url(../img/xfhx/role_icon_2_active.png);
}

.role-nav .role-nav-item:nth-child(3) {
	background-image: url(../img/xfhx/role_icon_3.png);
}

.role-nav .role-nav-item.active:nth-child(3) {
	background-image: url(../img/xfhx/role_icon_3_active.png);
}

.role-nav .role-nav-item:nth-child(4) {
	background-image: url(../img/xfhx/role_icon_4.png);
}

.role-nav .role-nav-item.active:nth-child(4) {
	background-image: url(../img/xfhx/role_icon_4_active.png);
}

.spce-container {
	position: absolute;
	top: 19vw;
	width: 100%;
	
}

.spce-container .swiper-slide {
	width: 61.5vw;
}

.spce-container .swiper-slide img {
	display: block;
	width: 100%;
}

.spce-container .spec-arrow {
	position: absolute;
	top: 18vw;
	z-index: 11;
	width: 100%;
}

.spce-container .spec-arrow > div {
	position: absolute;
	top: 0;
	width: 8.27vw;
	height: 8.67vw;
}

.spce-container .spec-arrow .spec-arrow-left {
	left: 4vw;
	background: url(../img/xfhx/L.png) no-repeat center / 100% 100%;
}

.spce-container .spec-arrow .spec-arrow-right {
	right: 4vw;
	background: url(../img/xfhx/R.png) no-repeat center / 100% 100%;
}

.special-pagination {
	margin-top: 5vw;
	text-align: center;
}

.special-pagination .swiper-pagination-bullet {
	width: 4.4vw;
	height: 4.4vw;
	background: url(../img/xfhx/TAB-1.png) no-repeat center / 100% 100%;
	border-radius: 0;
	opacity: 1;
	margin: 0 2vw !important;
}

.special-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-image: url(../img/xfhx/TAB.png);
}