#section_roles,
#section_roles_content {
  width: 100%;
  height: 100%;

  position: relative;
}
#section_roles_ani {
  position: relative;
}

#section_roles .pc_continer_overflow_bg {
  background: url(https://lilithimage.lilithcdn.com/allgames-official-web/pgame/cn_new/images/pc/home/roles/section_roles_bg.png)
    no-repeat center/cover;
}

#role_name {
  height: 181px;
  position: absolute;
  left: 76px;
  top: 99px;
}
#role_name img {
  height: 100%;
  width: auto;
}
#role_description {
  font-size: 24px;
  font-weight: 500;
  color: #6b3f00;
  line-height: 36px;
  width: 446px;
  position: absolute;
  left: 148px;
  top: 286px;
}
#role_list_sub {
  position: absolute;
  top: 151px;
  right: 128px;
  display: flex;
  gap: 56px;
  align-items: center;
}
.role_list_sub_item {
  width: 118px;
  height: 121px;
}
.role_list_sub_item.active {
  transform: scale(1.29);
}
#role_main {
  width: 609px;
  height: 625px;
  background: url(https://lilithimage.lilithcdn.com/allgames-official-web/pgame/cn_new/images/pc/home/roles/role_center_bg.png)
    no-repeat center/contain;
  position: absolute;
  top: 252px;
  left: 686px;
  z-index: 11;
}

#role_main > img {
  width: 702px;
  height: 553px;
  position: absolute;
  /* top: 62px;
  left: 84px; */
  max-width: 100%;
  max-height: 100%;
  /*top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  top: 20px;
  left: -20px;
  object-fit: contain;
}
#role_list {
  position: absolute;
  top: 591px;
  left: 120px;
  right: 113px;
  z-index: 10;
  height: 226px;
}
.role_list_item {
  width: 264px;
  height: 226px;
  position: absolute;
  top: 0;
  transition: all 0.3s ease;
}
.role_list_item:active {
  transform: scale(0.9);
}
.role_list_item:nth-of-type(1) {
  left: 0;
}
.role_list_item:nth-of-type(2) {
  left: 241px;
}
.role_list_item:nth-of-type(3) {
  left: 1185px;
}
.role_list_item:nth-of-type(4) {
  left: 1425px;
}