.replacement {
	position: absolute;
	z-index:2;
}
.deleteAll{
	display:block;
	width:133px;
	position:absolute;
	left:16px;
	bottom:21px;
	z-index:2;
	cursor: pointer;
}
.bg_pic {
	width: 100vw;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}

.bg_pic img {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bg_pic img.active {
	display: block;
}

.endReplacement {
	display: block;
	width: 133px;
	position: absolute;
	z-index: 5;
	right: 18px;
	bottom: 21px;
	cursor: pointer;
}

.replaceMain {
	width: 100%;
	height: 100%;
	position: absolute;
  top:75px;
  left:0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.character {
  width:480px;
  /* height:448px; */
	position: relative;
}
/* .characterResult.active:after{
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	background: url(../images/character/tjh1.png) no-repeat center;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index:4;
}
.characterResult.active:before{
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	background: url(../images/character/tjh.png) no-repeat center;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index:7;
} */
.characterResult .tjh{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index:7;
	object-fit: cover;
	display: none;
}
.characterResult .tjh1{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index:4;
	object-fit: cover;
	display: none;
}

.character .role {
	display: block;
	width: 100%;
	position: relative;
	z-index:1;
}

.character .role img {
	display: none;
	width: 100%;
	position:relative;
}

.character .role img.active {
	display: block;
}
.character .role.active:after{
	display:block;
	width:100%;
	height:100%;
	content:'';
	background:url('https://cdnstatic.yingxiong.com/dna/double_helix_bright/images/character/tjh.png') no-repeat center;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
}
.character .pet {
	width: 152px;
	position: absolute;
	right: 42px;
	top: 52px;
	z-index:8;
}

.character .pet img {
	display: none;
	width: 100%;
}

.character .pet img.active {
	display: block;
}

.character .accessory {
	width: 420px;
	position: absolute;
	left: 42px;
	top: 70px;
	z-index: 7;
}

.character .accessory img {
	display: none;
	width: 100%;
}

.character .accessory img.active {
	display: block;
}

.character .eyebrow {
	width: 150px;
	position: absolute;
	left: 146px;
	top: 190px;
	z-index: 6;
}

.character .eyebrow img {
	display: none;
	width: 100%;
}

.character .eyebrow img.active {
	display: block;
}

/*
	1 - 0
	2 - 1
	3 - 0
	4 - 2
	5 - 2
	6 - 0
	7 - 2
	8 - 1,2,3
	9 - 2
	10 - 1,2,3
	11 - 2,3
	12 - 0,1
	13 - 2,3
*/
.character .jewelry {
	width: 227px;
	position: absolute;
	left: 120px;
	top: 38px;
	z-index: 5;
}
.character .jewelry.size1 {
	width: 226px;
	left: 121px;
    top: 40px;
}
.character .jewelry.size2 {
	width: 225px;
	left: 121px;
	top: 41px;
}
.character .jewelry.size3 {
	width: 228px;
	left: 119px;
	top: 37px;
}

.character .jewelry img {
	display: none;
	width: 100%;
}

.character .jewelry img.active {
	display: block;
}
.character .jewelry img:nth-child(4){
	position:absolute;
	left:0;
}
.character .jewelry img:nth-child(4).on{
	position:absolute;
	left:4px;
}
.character .hair {
	width: 276px;
	position: absolute;
	left: 77px;
	top: 10px;
	z-index: 3;
}

.character .hair img {
	display: none;
	width: 100%;
}

.character .hair img.active {
	display: block;
}

.character .face {
	width: 183px;
	position: absolute;
	left: 141px;
	top: 223px;
	z-index: 3;
}

.character .face img {
	display: none;
	width: 100%;
}

.character .face img.active {
	display: block;
}

.character .combat {
	width: 338px;
	position: absolute;
	left: 78px;
	top: 292px;
	z-index: 2;
}

.character .combat img {
	display: none;
	width: 100%;
}

.character .combat img.active {
	display: block;
}

.character .remote{
	width: 381px;
	position: absolute;
	left: 69px;
	top: 232px;
}
.character .remote1 {
	width: 335px;
	position: absolute;
	left: 138px;
	top: 232px;
}
.character .remote.active{
	top: 233px;
  left: 60px;
}
.character .remote.active,.character .remote1.active {
	z-index:1;
}
.character .remote img,.character .remote1 img {
	display: none;
	width: 100%;
}

.character .remote img.active,.character .remote1 img.active {
	display: block;
}

.character .cover {
	display: block;
	width: 190px;
	position: absolute;
	left: 50%;
	margin-left: -90px;
	bottom: 10px;
}

/* .character .chMao {
	display: block;
	width: 3rem;
	position: absolute;
	right: .4rem;
	bottom: -.7rem;
} */

.character .st1 {
	display: block;
	width: 71px;
	position: absolute;
	left: 0;
	top: 38px;
	animation: star 1s linear infinite;
	-webkit-animation: star 1s linear infinite;
}

/* .character .st2 {
	display: block;
	width: 1.36rem;
	position: absolute;
	left: 9rem;
	top: -1.7rem;
	animation: star 2s linear infinite;
	-webkit-animation: star 2s linear infinite;
} */

.character .st3 {
	display: block;
	width: 81px;
	position: absolute;
	left: 444px;
	top: 48px;
	animation: star 3s linear infinite;
	-webkit-animation: star 3s linear infinite;
}

.character .st4 {
	display: block;
	width: 57px;
	position: absolute;
	left: 399px;
	top: 356px;
	animation: star 2s linear infinite;
	-webkit-animation: star 2s linear infinite;
}

.character .st5 {
	display: block;
	width: 57px;
	position: absolute;
	left: -48px;
	top: 378px;
	animation: star 3s linear infinite;
	-webkit-animation: star 3s linear infinite;
}

.showList {
	width: 100%;
	height: 436px;
  padding: 0 17px;
  box-sizing: border-box;
	overflow: hidden;
	position: relative;
  margin-top:28px;
}

.showList>div {
	display: none;
	width: 100%;
	height: 100%;
	background: url('https://cdnstatic.yingxiong.com/dna/double_helix_bright/images/hua.png') no-repeat center;
	background-size: 100% 100%;
	position: relative;
  border-radius: 45px;
  padding:22px 18px 26px 0;
  box-sizing: border-box;
}

/* .showList>div:after{
	display: block;
	width:100%;
	height:20vh;
	content:'';
	background:url(../images/zz.png) no-repeat center;
	background-size:100%;
	position:absolute;
	right:0;
	bottom:0;
	z-index:2;
  border-radius: 45px;
} */
.showList>div.active {
	display: block;
}


.showBody {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	padding:0 22px;
  box-sizing: border-box;
	
}

.showBodyContent{
	display: flex;
	flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 10px;
}

.showBodyContent>div {
	width: 150px;
	height: 188px;
	background: url('https://cdnstatic.yingxiong.com/dna/double_helix_bright/images/w.png') no-repeat center;
	background-size: cover;
	position: relative;
	cursor: pointer;
}

.showBodyContent>div.active {
	background: url('https://cdnstatic.yingxiong.com/dna/double_helix_bright/images/y.png') no-repeat center;
	background-size: cover;
}

.showBodyContent>div img {
	display: block;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.showBody.showBg .showBodyContent>div img {
	width: 100%;
}

.showBodyContent>div img:nth-child(2) {
	display: none;
}
.showBodyContent>div.active i{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:5;
}
.showBodyContent>div i {
	display:none;
}
.showBodyContent>div.active img:nth-child(1) {
	display: none;
}

.showBodyContent>div.active img:nth-child(2) {
	display: block;
}


.tabMain {
	width: 100%;
	height: 116px;
	position: relative;
	overflow: hidden;
  padding: 0 60px;
  box-sizing: border-box;
  margin-top:10px;
}

.tabRole {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.tabRole .swiper-slide.active .tabRolePic img:nth-child(1) {
	display:none;
}
.tabRole .tabRolePic {
	width: 115px;
  margin: 0 auto;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.tabRole .tabRolePic img {
	display: block;
	width: 100%;
}

.tabMain .tabPrevButton {
	width: 40px;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	left: 17px;
	cursor: pointer;
  margin-top:5px;
}

.tabMain .tabPrevButton img {
	display: block;
	width: 100%;
}

.tabMain .tabNextButton {
	width: 40px;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 17px;
	cursor: pointer;
  margin-top:5px;
}

.tabMain .tabPrevButton img {
	display: block;
	width: 100%;
}
.tabMain .tabNextButton img {
	display: block;
	width: 100%;
}