body {
    border: none;  

}


a {
	outline: none;

	text-decoration:none;

}

.pn {
    border: none;  
	background-repeat: no-repeat;
	background-position: top
}



.wrapper-index .pn {
    border: none;  
	margin-top: 20px
}











.wrapper-index .pn4 {
    border: none;  
	height: 347px;
	background: #ffffff;
	background-image: url(../images/bg4.png);
	overflow: hidden;
	position: relative
}

.wrapper-index .pn4 .pn-in {
	position: relative
}

.wrapper-index .pn4 .tab {
	position: absolute;
	top: 0px;
	/*left: 300px;*/
	z-index: 55;
	    display: flex;
    flex-direction: column;   /* 竖着 */
    align-items: flex-start;  /* 靠左 */
}

.wrapper-index .pn4 .tab a {
    border: none;  
	position: relative;
	display: block;
	float: left;
	padding: 0 20px;
	width: 180px;
	font-size: 16px;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	color: #a3a3a3
}

.wrapper-index .pn4 .tab a:before {
	content: "";
	display: inline-block;
	vertical-align: middle
}

.wrapper-index .pn4 .tab a.tab1:before {
	background-position: 0 0px
}


.wrapper-index .pn4 .tab a.tab1:before,.wrapper-index .pn4 .tab a.tab2:before {
	background-image: url(../images/1-2.png);
	background-size: contain; 
	background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;  
}

.wrapper-index .pn4 .tab a.tab1.current::before {
    background-image: url(../images/1-2-1.png);
    background-size: contain; 
    background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;  
}

.wrapper-index .pn4 .tab a.tab2:before {
	background-position: 0 0px
}

.wrapper-index .pn4 .tab a.tab2:before,.wrapper-index .pn4 .tab a.tab2:before {
	background-image: url(../images/2-2.png);
	background-size: contain; 
	background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block; 
}

.wrapper-index .pn4 .tab a.tab2.current::before {
    background-image: url(../images/2-2-1.png);
    background-size: contain; 
    background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;  
}


.wrapper-index .pn4 .tab a.tab3:before {
	background-image: url(../images/3-2.png);
	background-size: contain; 
	background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;
}

.wrapper-index .pn4 .tab a.tab3.current::before {
    background-image: url(../images/3-2-1.png);
    background-size: contain; 
    background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;  
}

.wrapper-index .pn4 .tab a.tab4:before {
	background-image: url(../images/4-2.png);
	background-size: contain; 
	background-position: 0 0px;
	background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;
}

.wrapper-index .pn4 .tab a.tab4.current::before {
    background-image: url(../images/4-2-1.png);
    background-size: contain; 
    background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;  
}

.wrapper-index .pn4 .tab a.tab5:before {
	background-image: url(../images/5-2.png);
	background-size: contain; 
	background-position: 0 0px;
	background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;
}

.wrapper-index .pn4 .tab a.tab5.current::before {
    background-image: url(../images/5-2-1.png);
    background-repeat: no-repeat;
	margin-right: 10px;
	height: 70px;
	content: "";
	display: block;  
}

.wrapper-index .pn4 .tab a.current,.wrapper-index .pn4 .tab a:hover {
    border: none;  
	color: #fff
}

.wrapper-index .pn4 .tab-pn {
    border: none;  
	z-index: 55
}

.wrapper-index .pn4 .tab-pn-item {
    border: none;  
	position: relative
}

.wrapper-index .pn4 .tab-pn-in {
	padding-top: 50px;
	padding-left: 570px;
	height: 347px;
	/*background: rgba(0,0,0,.3);*/
	z-index: -1
}

.wrapper-index .pn4 .role-name {
	padding-top: 90px;
	position: relative
}

/*.wrapper-index .pn4 .role-name img {*/
/*	position: absolute;*/
/*	bottom: 0;*/
/*	margin: auto 0*/
/*}*/

.wrapper-index .pn4 .role-desc {
	font-size: 14px;
	color: #ffffff;
	line-height: 2;
	overflow: hidden;
	padding-right: 50px;
	padding-top: 30px
}

.wrapper-index .pn4 .role {
	position: relative
}

.wrapper-index .pn4 .role:before {
    border: none;  
	content: "";
	height: 347px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1
}

.wrapper-index .pn4 .role:after {
    border: none;  
	content: "";
	position: absolute;
	top: 60px;
	right: 10px
}

.wrapper-index .pn4 .role1 {
    border: none;  
	overflow: hidden
}

.wrapper-index .pn4 .role1:before {
	background: url(../images/1.png) top no-repeat;
	width: 1000px;
	left: 0px
}

.wrapper-index .pn4 .role1:after {
    border: none;  
	width: 68px;
	height: 70px;
	/*background-image: url(../images/1-1.png);*/
	background-position: 0 0px;
	background-repeat: no-repeat
}

.wrapper-index .pn4 .role2:before {
	background: url(../images/2.png) top no-repeat;
	width: 1000px;
	left: 0px
}

.wrapper-index .pn4 .role2:after {
	width: 57px;
	height: 75px;
	/*background-image: url(../images/2-1.png);*/
	background-position: 0 0px;
	background-repeat: no-repeat
}

.wrapper-index .pn4 .role3:before {
	background: url(../images/3.png) top no-repeat;
	width: 1000px;
	left: 0px
}

.wrapper-index .pn4 .role3:after {
width: 110px;
	width: 73px;
	height: 73px;
	/*background-image: url(../images/3-1.png);*/
	background-position: 0 0px;
	background-repeat: no-repeat
}

.wrapper-index .pn4 .role4:before {
	background: url(../images/4.png) top no-repeat;
	width: 1000px;
	left: 0px
}

.wrapper-index .pn4 .role4:after {
width: 110px;
	width: 54px;
	height: 69px;
	/*background-image: url(../images/4-1.png);*/
	background-position: 0 0px;
	background-repeat: no-repeat
}

.wrapper-index .pn4 .role5:before {
	background: url(../images/5.png) top no-repeat;
	width: 1000px;
	left: 0px
}

.wrapper-index .pn4 .role5:after {
	width: 87px;
	height: 85px;
	/*background-image: url(../images/5-1.png);*/
	background-position: 0 0px;
	background-repeat: no-repeat
}