.bg {
  margin: 0 auto;
  background-position: center 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.inner {
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}
.banner {
  height: 10.71rem;
  background-image: url(../images/pc/banner.jpg);
  position: relative;
}
.banner .logo-dn {
  width: 3.65rem;
  height: 2.89rem;
  background-image: url(../images/pc/logo-dn.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 3.1rem;
}
.banner .btn-game-login {
  display: none;
  width: 2.83rem;
  height: 0.84rem;
  line-height: 0.84rem;
  text-align: center;
  font-size: 0.3rem;
  font-weight: 700;
  color: #795219;
  background-image: linear-gradient(to bottom, #795219 0%, #4B1D11 100%), url(../images/pc/btn_bg.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 100%;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 0.5rem;
  right: 2.08rem;
}
.banner .logged-info {
  display: none;
  position: absolute;
  top: 0.8rem;
  right: 2.08rem;
  display: inline-block;
  color: #fff;
  font-size: 0.24rem;
}
.banner .logged-info a {
  color: #fff;
}
.banner .logged-info a:hover {
  color: #FFC0BA;
}
.banner .btn-open-rules {
  width: 1.4rem;
  height: 1.32rem;
  background-image: url(../images/pc/btn-hdsm.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 1.82rem;
  right: 2.29rem;
}
.banner .banner-tit {
  background-position: center 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(../images/pc/banner-tit.png);
  width: 10.65rem;
  height: 4.88rem;
  position: absolute;
  top: 4.23rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.banner .btn-create-role {
  z-index: 3;
  width: 4.53rem;
  height: 1.53rem;
  background-image: url(../images/pc/btn-create.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 8.06rem;
  left: 50%;
  margin-left: -2.265rem;
}
.banner .yjcjs {
  z-index: 2;
  width: 7.03rem;
  height: 0.7rem;
  line-height: 0.7rem;
  text-align: center;
  background-image: url(../images/pc/ycjjs_bg.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 9.92rem;
  left: 50%;
  transform: translateX(-50%);
  color: #32181A;
  font-size: 0.24rem;
  font-weight: 700;
}
.banner .yjcjs .ycjjs-box {
  position: absolute;
  bottom: 0.02rem;
  left: -0.15rem;
  width: 1.02rem;
  height: auto;
}
.bg1 {
  position: relative;
  z-index: 1;
  margin-top: -5.03rem;
  height: 10.3rem;
  background-image: url(../images/pc/bg1.png);
  padding-top: 5.5rem;
}
.bg1 .tit1 {
  width: 11.67rem;
  height: 0.76rem;
  background-image: url(../images/pc/tit1.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto 0.76rem;
}
.bg1 ul {
  width: 12.66rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.bg1 ul li {
  width: 3.62rem;
  height: 3.44rem;
  background-image: url(../images/pc/time_bg.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.36rem;
}
.bg1 ul li .time {
  font-size: 0.3rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.bg1 ul li .content {
  height: 2.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.24rem;
  line-height: 0.48rem;
}
.bg1 .notice {
  text-align: center;
  font-size: 0.2rem;
  margin-top: 0.58rem;
  word-break: break-all;
}
.bg2 {
  margin-top: -1px;
  height: 9.8rem;
  background-image: url(../images/pc/bg2.jpg);
  padding-top: 1.5rem;
}
.bg2 .tit2 {
  width: 15.32rem;
  height: 0.72rem;
  background-image: url(../images/pc/tit2.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto 0.44rem;
}
.bg2 ul {
  width: 14.6rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bg2 ul li {
  width: 6.95rem;
  height: 3.64rem;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 1.3rem;
  padding-left: 0.6rem;
  position: relative;
}
.bg2 ul li .server_name {
  font-family: 'eykht';
  font-size: 0.3rem;
  margin-bottom: 0.16rem;
}
.bg2 ul li .create_num {
  font-size: 0.24rem;
  margin-bottom: 0.1rem;
}
.bg2 ul li .btn-create-role {
  position: relative;
  z-index: 3;
  width: 2.21rem;
  height: 0.68rem;
  background: url(../images/pc/create_bg.png) no-repeat 0 0 / 100% 100%;
  margin-left: -0.15rem;
  padding-left: 0.18rem;
  color: #fff;
  font-size: 0.24rem;
  font-weight: 700;
}
.bg2 ul li .zb1,
.bg2 ul li .zb2 {
  display: none;
  position: absolute;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bg2 ul li .zb1 {
  z-index: 2;
}
.bg2 ul li .zb2 {
  z-index: 1;
}
.bg2 ul li:nth-child(1) {
  background-image: url(../images/pc/zb-1.png);
}
.bg2 ul li:nth-child(2) {
  background-image: url(../images/pc/zb-2.png);
}
.bg2 ul li:nth-child(3) {
  background-image: url(../images/pc/zb-3.png);
}
.bg2 ul li:nth-child(4) {
  background-image: url(../images/pc/zb-4.png);
}
.bg2 ul li .full {
  position: absolute;
  top: 0.32rem;
  left: 1.08rem;
  width: 2rem;
  height: 2rem;
  background-image: url(../images/pc/full.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bg3 {
  margin-top: -1px;
  height: 9.5rem;
  background-image: url(../images/pc/bg3.jpg);
  padding-top: 0.8rem;
  position: relative;
}
.bg3 .tit3 {
  width: 13.16rem;
  height: 0.76rem;
  background-image: url(../images/pc/tit3.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
}
.bg3 .btn-create {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  margin-left: -2.025rem;
  width: 4.05rem;
  height: 1.01rem;
  font-size: 0.36rem;
  font-weight: 700;
  background-image: linear-gradient(to bottom, #372324 0%, #070400 100%), url(../images/pc/btn_bg2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 100%;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  -webkit-text-fill-color: transparent;
}
.job-area {
  width: 14.34rem;
  height: 6.98rem;
  margin: 0 auto;
  transform: translateX(0.6rem);
  display: flex;
  justify-content: space-between;
  position: relative;
  background-image: url(../images/pc/b4_bg.png);
  background-position: 7.76rem 0.58rem;
  background-size: 5.78rem 5.96rem;
  background-repeat: no-repeat;
  overflow: hidden;
}
.job-area .ja-left {
  padding-top: 0.68rem;
}
.job-area .ja-left .job_name {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.2rem;
}
.job-area .ja-left .job_name .cn {
  font-size: 0.48rem;
  font-family: 'eykht';
  background-image: linear-gradient(to right, #FFFFFF 0%, #FFC0BA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.job-area .ja-left .job_name .en {
  margin-left: 0.16rem;
  font-size: 0.36rem;
  color: rgba(250, 250, 250, 0.31);
}
.job-area .ja-left .job_desc {
  width: 4.84rem;
  word-break: break-all;
  color: #fff;
  font-size: 0.2rem;
  margin-bottom: 0.2rem;
}
.job-area .ja-left .job_difficulty {
  display: inline-block;
  font-size: 0.3rem;
  color: #32181A;
  font-family: 'eykht';
  margin-bottom: 0.2rem;
}
.job-area .ja-left .stars {
  display: flex;
  margin-bottom: 0.25rem;
}
.job-area .ja-left .stars .star {
  width: 0.48rem;
  height: 0.46rem;
  background-image: url(../images/pc/star.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 0.06rem;
}
.job-area .ja-left .stars .star.gray {
  opacity: 0.8;
  filter: grayscale(1);
}
.job-area .ja-left .skills {
  display: flex;
}
.job-area .ja-left .skills li {
  width: 0.63rem;
  height: 0.63rem;
  background-image: url(../images/pc/skill_bg.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 0.14rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: background-image 0.2s ease;
}
.job-area .ja-left .skills li img {
  width: 80%;
  height: auto;
}
.job-area .ja-left .skills li .skill_desc {
  position: absolute;
  left: 0;
  top: calc(100% + 0.16rem);
  transform: translateY(-0.08rem);
  width: 3.5rem;
  padding: 0.14rem 0.2rem;
  border: 1px solid rgba(180, 194, 208, 0.65);
  border-radius: 0.08rem;
  background: rgba(245, 247, 250, 0.96);
  box-shadow: 0 0.06rem 0.18rem rgba(40, 60, 80, 0.12);
  font-size: 0.18rem;
  line-height: 1.5;
  color: #3d4f5f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 5;
}
.job-area .ja-left .skills li .skill_desc span {
  color: #2f6ea8;
  font-weight: 700;
}
.job-area .ja-left .skills li .skill_desc::after {
  content: '';
  position: absolute;
  left: var(--skill-desc-arrow-left, 50%);
  bottom: 100%;
  width: 0.16rem;
  height: 0.16rem;
  background: rgba(245, 247, 250, 0.96);
  border-top: 1px solid rgba(180, 194, 208, 0.65);
  border-left: 1px solid rgba(180, 194, 208, 0.65);
  transform: translate(-50%, 0.08rem) rotate(45deg);
}
.job-area .ja-left .skills li:hover,
.job-area .ja-left .skills li.is-hover {
  z-index: 2;
  background-image: url(../images/pc/skill_bg_hover.png);
}
.job-area .ja-left .skills li:hover .skill_desc,
.job-area .ja-left .skills li.is-hover .skill_desc {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.job-area .ja-right {
  position: absolute;
  top: 0;
  right: 1rem;
  width: 6.98rem;
  height: 6.98rem;
}
.job-area .ja-right img {
  width: 100%;
  height: 100%;
}
.job-area .jobs-btn {
  position: absolute;
  right: 0.4rem;
  top: 0.2rem;
  width: 2.44rem;
  height: 6.05rem;
  transform: rotate(-8.94deg);
}
.job-area .jobs-btn a {
  display: block;
  width: 0.74rem;
  height: 0.82rem;
  position: absolute;
  transition: left 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.18s ease-out;
}
.job-area .jobs-btn a img {
  width: 100%;
  height: 100%;
}
.job-area .jobs-btn a:hover {
  transform: scale(1.2);
}
.job-area .jobs-btn a.active {
  transform: scale(1.1);
}
.job-area .jobs-btn a.active img {
  filter: drop-shadow(0 0 0.05rem rgba(255, 240, 180, 0.95)) drop-shadow(0 0 0.06rem rgba(255, 196, 112, 0.7));
}
.job-area .jobs-btn a.active:hover {
  transform: scale(1.3);
}
.job-area .jobs-btn a:nth-child(1) {
  left: calc((100% - 0.74rem) * 0);
  top: calc((100% - 0.82rem) * 0);
}
.job-area .jobs-btn a:nth-child(2) {
  left: calc((100% - 0.74rem) * 0.43);
  top: calc((100% - 0.82rem) * 0.1);
}
.job-area .jobs-btn a:nth-child(3) {
  left: calc((100% - 0.74rem) * 0.83);
  top: calc((100% - 0.82rem) * 0.24);
}
.job-area .jobs-btn a:nth-child(4) {
  left: calc((100% - 0.74rem) * 1);
  top: calc((100% - 0.82rem) * 0.41);
}
.job-area .jobs-btn a:nth-child(5) {
  left: calc((100% - 0.74rem) * 1);
  top: calc((100% - 0.82rem) * 0.58);
}
.job-area .jobs-btn a:nth-child(6) {
  left: calc((100% - 0.74rem) * 0.82);
  top: calc((100% - 0.82rem) * 0.75);
}
.job-area .jobs-btn a:nth-child(7) {
  left: calc((100% - 0.74rem) * 0.43);
  top: calc((100% - 0.82rem) * 0.9);
}
.job-area .jobs-btn a:nth-child(8) {
  left: calc((100% - 0.74rem) * 0);
  top: calc((100% - 0.82rem) * 1);
}
.bg4 {
  margin-top: -1px;
  height: 10.36rem;
  background-image: url(../images/pc/bg4.jpg);
  padding-top: 0.5rem;
}
.bg4 .tit4 {
  width: 12.14rem;
  height: 0.76rem;
  background-image: url(../images/pc/tit4.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto 0.35rem;
}
.bg4 .ftit {
  font-size: 0.24rem;
  text-align: center;
  color: #090101;
}
.bg4 h1 {
  font-size: 0.24rem;
  color: #462718;
  margin-bottom: 0.48rem;
  text-align: center;
}
.bg4 .rank {
  width: 13.52rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bg4 .rank .rank-item {
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 4.5rem;
  height: 5.23rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.9rem;
}
.bg4 .rank .rank-item p {
  font-size: 0.18rem;
  color: #3F566A;
  position: relative;
}
.bg4 .rank .rank-item p::after,
.bg4 .rank .rank-item p::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.12rem;
  height: 0.12rem;
  background: url(../images/pc/icon-lx1.png) no-repeat 0 0 / 100% 100%;
}
.bg4 .rank .rank-item p::before {
  left: -0.2rem;
}
.bg4 .rank .rank-item p::after {
  right: -0.2rem;
}
.bg4 .rank .rank-item .svg-num {
  user-select: none;
  width: 100%;
  height: 0.6rem;
  display: block;
}
.bg4 .rank .rank-item .ch {
  width: 1.5rem;
  height: auto;
  display: block;
  margin: -0.1rem auto 0;
}
.bg4 .rank .rank-item ul {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1.83rem;
}
.bg4 .rank .rank-item ul li {
  width: 0.805rem;
  height: 0.805rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.17rem;
}
.bg4 .rank .rank-item ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg4 .rank .rank-item ul li p {
  white-space: nowrap;
  font-size: 0.28rem;
  color: #060000;
  margin-top: 0.05rem;
  transform: scale(0.5);
}
.bg4 .rank .rank-item ul li p::before,
.bg4 .rank .rank-item ul li p::after {
  display: none;
}
.bg4 .rank .rank-item:nth-child(1) {
  background-image: url(../images/pc/rank2_bg.png);
}
.bg4 .rank .rank-item:nth-child(2) {
  background-image: url(../images/pc/rank1_bg.png);
  width: 5.9rem;
  height: 6.89rem;
  padding-top: 2.43rem;
}
.bg4 .rank .rank-item:nth-child(2) p {
  font-size: 0.24rem;
  font-weight: 700;
  color: #32181A;
}
.bg4 .rank .rank-item:nth-child(2) p::after,
.bg4 .rank .rank-item:nth-child(2) p::before {
  width: 0.18rem;
  height: 0.18rem;
  background-image: url(../images/pc/icon-lx2.png);
}
.bg4 .rank .rank-item:nth-child(2) p::before {
  left: -0.4rem;
}
.bg4 .rank .rank-item:nth-child(2) p::after {
  right: -0.4rem;
}
.bg4 .rank .rank-item:nth-child(2) .svg-num {
  height: 0.6rem;
  margin: 0.1rem 0;
}
.bg4 .rank .rank-item:nth-child(2) .ch {
  width: 2.2rem;
  margin-top: -0.2rem;
}
.bg4 .rank .rank-item:nth-child(2) ul {
  width: 2.36rem;
}
.bg4 .rank .rank-item:nth-child(2) ul li {
  width: 1.04rem;
  height: 1.04rem;
}
.bg4 .rank .rank-item:nth-child(3) {
  background-image: url(../images/pc/rank3_bg.png);
}
.bg4 .rank .rank-item:nth-child(3) p {
  color: #4A3636;
}
.bg4 .rank .rank-item:nth-child(3) p::after,
.bg4 .rank .rank-item:nth-child(3) p::before {
  background-image: url(../images/pc/icon-lx3.png);
}
.bg4 .rank .rank-item:nth-child(3) ul li p {
  color: #220202;
}
.bg5 {
  margin-top: -1px;
  height: 15.19rem;
  background-image: url(../images/pc/bg5.jpg);
}
.bg5 .qyjl {
  height: 4.15rem;
  background-color: #641A19;
  background-image: url(../images/pc/qyjl_bg.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 0.66rem;
}
.bg5 .qyjl .tit5 {
  width: 5.33rem;
  height: 0.55rem;
  background-image: url(../images/pc/tit5.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto 0.6rem;
}
.bg5 .qyjl ul {
  display: flex;
  justify-content: center;
}
.bg5 .qyjl ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.03rem;
}
.bg5 .qyjl ul li:not(:last-child) {
  margin-right: 1rem;
}
.bg5 .qyjl ul li img {
  width: 1.03rem;
  height: 1.03rem;
  margin-bottom: 0.16rem;
}
.bg5 .qyjl ul li p {
  white-space: nowrap;
  font-size: 0.18rem;
  font-weight: 700;
  color: #fff;
}
.bg5 .tit6 {
  width: 11.67rem;
  height: 0.76rem;
  background-image: url(../images/pc/tit6.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0.75rem auto 0.45rem;
}
.bg5 .swiper-ts {
  width: 14.73rem;
  margin: 0 auto;
}
.bg5 .swiper-ts .swiper-slide {
  width: 11.73rem;
  height: 6.79rem;
  background-image: url(../images/pc/swiper_bg.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0.24rem 0.34rem;
  opacity: 0;
}
.bg5 .swiper-ts .swiper-slide .img {
  position: relative;
}
.bg5 .swiper-ts .swiper-slide .img::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.56);
}
.bg5 .swiper-ts .swiper-slide .img img {
  width: 100%;
  height: 100%;
  display: block;
}
.bg5 .swiper-ts .swiper-slide.swiper-slide-active {
  opacity: 1;
  padding: 0.34rem 0.42rem;
  background-image: url(../images/pc/swiper_active_bg.png);
}
.bg5 .swiper-ts .swiper-slide.swiper-slide-active .img::after {
  display: none;
}
.bg5 .swiper-ts .swiper-slide.swiper-slide-prev,
.bg5 .swiper-ts .swiper-slide.swiper-slide-next {
  opacity: 1;
}
.bg5 .swiper-ts .swiper-button-prev,
.bg5 .swiper-ts .swiper-button-next {
  outline: none;
  border: none;
  width: 0.73rem;
  height: 0.89rem;
  margin-top: -0.445rem;
  background: url(../images/pc/arrow-left.png) no-repeat 0 0 / 100% 100%;
}
.bg5 .swiper-ts .swiper-button-prev::after,
.bg5 .swiper-ts .swiper-button-next::after {
  display: none;
}
.bg5 .swiper-ts .swiper-button-prev:hover,
.bg5 .swiper-ts .swiper-button-next:hover {
  opacity: 0.9;
}
.bg5 .swiper-ts .swiper-button-prev {
  left: 0.65rem;
}
.bg5 .swiper-ts .swiper-button-next {
  right: 0.65rem;
  transform: rotateZ(180deg);
}
.bg5 .outlinks {
  position: relative;
  z-index: 2;
  margin: 0.36rem auto 0;
  width: 6.74rem;
  height: 1.62rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bg5 .outlinks .box {
  width: 1.62rem;
  height: 1.62rem;
  background: url(../images/pc/box_bg.png) no-repeat 0 0 / 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.bg5 .outlinks .box:nth-child(1) img {
  width: 1.03rem;
  height: auto;
}
.bg5 .outlinks .box:nth-child(2) img {
  width: 0.82rem;
  height: auto;
}
.bg5 .outlinks .box:nth-child(3) img {
  width: 0.87rem;
  height: auto;
}
.bg5 .outlinks .box .qrcode {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: -2.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem !important;
  height: 2rem !important;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.bg5 .outlinks .box:hover {
  transform: translateY(-0.03rem);
  filter: drop-shadow(0 0 0.12rem rgba(255, 218, 149, 0.82)) drop-shadow(0 0 0.24rem rgba(255, 170, 82, 0.36));
}
.bg5 .outlinks .box:hover .qrcode {
  opacity: 1;
  visibility: visible;
}
.footer {
  min-height: 1.8rem;
  padding: 0.2rem 0;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.81);
  z-index: 99;
}
.btn-pop-close {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  background: url(../images/pc/btn-close.png) no-repeat 0 0 / 100% 100%;
}
.popup-login {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.94rem;
  height: 3.95rem;
  background: url(../images/pc/pop1_bg.png) no-repeat 0 0 / 100% 100%;
  z-index: 100;
}
.popup-login .btn-pop-close {
  top: -0.8rem;
  right: -0.6rem;
}
.popup-login .popup-login-inner {
  width: 100%;
  height: 100%;
  padding: 0.42rem 1.56rem 0;
}
.popup-login .popup-login-title {
  text-align: center;
  font-size: 0.3rem;
  color: #231815;
  margin-bottom: 0.2rem;
  font-family: 'eykht';
  font-weight: normal;
}
.popup-login .form-item {
  width: 100%;
  height: 0.5rem;
  border: none;
  border-radius: 0.08rem;
  background: #E0D6D6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0.04rem 0.12rem rgba(79, 56, 45, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  margin-top: 0.2rem;
}
.popup-login .form-item:first-child {
  margin-top: 0;
}
.popup-login .form-item:focus-within {
  border-color: rgba(198, 95, 85, 0.88);
  box-shadow: 0 0 0 0.02rem rgba(198, 95, 85, 0.16), 0 0.06rem 0.16rem rgba(80, 57, 48, 0.12);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, #fcf1ec 100%);
}
.popup-login .form-item input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.28rem;
  color: #231815;
  font-size: 0.16rem;
}
.popup-login .form-item input::placeholder {
  color: #7B7A7A;
}
.popup-login .form-item.form-item-code {
  display: flex;
  align-items: center;
}
.popup-login .form-item.form-item-code .ipt-code {
  flex: 1;
  padding-right: 0.1rem;
}
.popup-login .form-item.form-item-code .btn-send-code {
  flex-shrink: 0;
  width: 1.2rem;
  height: 100%;
  font-size: 0.16rem;
  color: #C6251F;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.popup-login .form-item.form-item-code .btn-send-code.is-disabled {
  color: #A9A0A0;
  opacity: 0.7;
  cursor: not-allowed;
}
.popup-login .btn-login-submit {
  display: block;
  width: 2.32rem;
  height: 0.72rem;
  margin: 0.09rem auto 0.16rem;
  background: url(../images/pc/btn-login.png) no-repeat 0 0 / 100% 100%;
}
.popup-login .login-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.popup-login .login-agree input {
  display: none;
}
.popup-login .login-agree input:checked + .agree-icon::after {
  opacity: 1;
}
.popup-login .login-agree .agree-icon {
  width: 0.14rem;
  height: 0.14rem;
  background: #E0D6D6;
  margin-right: 0.15rem;
  position: relative;
}
.popup-login .login-agree .agree-icon::after {
  content: '';
  position: absolute;
  left: 0.05rem;
  bottom: 0;
  width: 0.05rem;
  height: 0.15rem;
  border-right: 2px solid #c65f55;
  border-bottom: 2px solid #c65f55;
  transform: rotate(45deg);
  opacity: 0;
}
.popup-login .login-agree .agree-text {
  font-size: 0.14rem;
  color: #000;
}
.popup-login .login-agree .agree-link {
  font-size: 0.14rem;
  color: #000;
}
.popup-login .login-agree .agree-sep {
  font-size: 0.14rem;
  color: #000;
}
.popup-create {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: 12rem;
  height: 10.19rem;
  z-index: 100;
  overflow: visible;
}
.popup-create .btn-pop-close {
  top: -0.6rem;
  right: -0.45rem;
}
.popup-create .popup-create-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: url(../images/pc/pop2_bg.png) no-repeat 0 0 / 100% 100%;
  padding: 0.9rem 0.975rem 0;
}
.popup-create .popup-create-inner .popup-create-title {
  font-size: 0.3rem;
  font-family: 'eykht';
  margin-bottom: 0.48rem;
  font-weight: normal;
  text-align: center;
  background-image: linear-gradient(to bottom, #372324 0%, #070400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup-create .job-scale-area {
  height: 4.9rem;
  margin-bottom: 0.4rem;
}
.popup-create .job-area {
  transform: scale(0.7);
  transform-origin: 0 0;
  background-color: #E0D6D6;
}
.popup-create .job-area .ja-left {
  padding-left: 0.48rem;
  padding-top: 1.5rem;
}
.popup-create .job-area .ja-left .job_difficulty,
.popup-create .job-area .ja-left .stars,
.popup-create .job-area .ja-left .skills {
  display: none;
}
.popup-create .job-area .ja-left .job_name .cn {
  -webkit-text-fill-color: unset;
  background: unset;
  color: #32181A;
}
.popup-create .job-area .ja-left .job_name .en {
  color: #9C8470;
  font-size: 0.26rem;
  margin-bottom: 0.02rem;
}
.popup-create .job-area .ja-left .job_desc {
  color: #0A0101;
  font-size: 0.24rem;
  width: 5.8rem;
  line-height: 1.8;
}
.popup-create .create-selects {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  margin-top: -0.12rem;
}
.popup-create .create-selects select,
.popup-create .create-selects input {
  flex: 1;
  min-width: 0;
  height: 0.6rem;
  border: none;
  border-radius: 0.08rem;
  background: #E0D6D6;
  font-size: 0.18rem;
  color: #231815;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0.04rem 0.12rem rgba(79, 56, 45, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.popup-create .create-selects input {
  padding: 0 0.2rem;
}
.popup-create .create-selects input::placeholder {
  color: #7B7A7A;
}
.popup-create .create-selects input:hover {
  border-color: rgba(180, 110, 99, 0.72);
}
.popup-create .create-selects input:focus {
  border-color: rgba(198, 95, 85, 0.88);
  box-shadow: 0 0 0 0.02rem rgba(198, 95, 85, 0.16), 0 0.06rem 0.16rem rgba(80, 57, 48, 0.12);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, #fcf1ec 100%);
}
.popup-create .create-selects .select2-container {
  flex: 1;
  min-width: 0;
  width: 100% !important;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .select2-selection--single {
  height: 0.6rem;
  border: none;
  border-radius: 0.08rem;
  background: #E0D6D6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0.04rem 0.12rem rgba(79, 56, 45, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 0.5rem 0 0.2rem;
  line-height: 0.58rem;
  font-size: 0.18rem;
  color: #231815;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .popup-create-select2-placeholder {
  color: #7B7A7A;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #7B7A7A;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 0.4rem;
  height: 0.58rem;
  top: 0;
  right: 0.08rem;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #B46E63 transparent transparent transparent;
  border-width: 0.08rem 0.06rem 0 0.06rem;
  margin-left: -0.06rem;
  margin-top: -0.03rem;
}
.popup-create .create-selects .popup-create-select2.select2-container--default .select2-selection--single:hover {
  border-color: rgba(180, 110, 99, 0.72);
}
.popup-create .create-selects .popup-create-select2.select2-container--default.select2-container--focus .select2-selection--single,
.popup-create .create-selects .popup-create-select2.select2-container--default.select2-container--open .select2-selection--single {
  border-color: rgba(198, 95, 85, 0.88);
  box-shadow: 0 0 0 0.02rem rgba(198, 95, 85, 0.16), 0 0.06rem 0.16rem rgba(80, 57, 48, 0.12);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, #fcf1ec 100%);
}
.popup-create .create-selects .popup-create-select2.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #B46E63 transparent;
  border-width: 0 0.06rem 0.08rem 0.06rem;
}
.popup-create .popup-create-select2-dropdown.select2-dropdown {
  background: rgba(255, 249, 246, 0.98);
  border: 1px solid rgba(180, 194, 208, 0.65);
  border-radius: 0.08rem;
  box-shadow: 0 0.08rem 0.22rem rgba(40, 60, 80, 0.16);
  box-sizing: border-box;
  overflow: hidden;
}
.popup-create .popup-create-select2-dropdown .select2-results > .select2-results__options {
  max-height: 2.4rem;
  padding: 0;
}
.popup-create .popup-create-select2-dropdown .select2-results__option {
  padding: 0.14rem 0.18rem;
  font-size: 0.16rem;
  color: #3D4F5F;
  line-height: 1.5;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.popup-create .popup-create-select2-dropdown .select2-results__option[aria-selected=true] {
  background: rgba(198, 95, 85, 0.08);
  color: #32181A;
}
.popup-create .popup-create-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(to right, #ffece4 0%, #fff5f1 100%);
  color: #32181A;
}
.popup-create .popup-create-select2-dropdown .select2-results__option + .select2-results__option {
  border-top: 1px solid rgba(180, 194, 208, 0.18);
}
.popup-create .btn-create-submit {
  display: block;
  margin: 0.45rem auto 0.25rem;
  width: 2.32rem;
  height: 0.72rem;
  background: url(../images/pc/btn-submit.png) no-repeat 0 0 / 100% 100%;
}
.popup-create .create-tip {
  font-size: 0.14rem;
  color: #000;
  text-align: center;
}
.select2-dropdown.popup-create-select2-dropdown {
  background: rgba(255, 249, 246, 0.98);
  border: 1px solid rgba(180, 194, 208, 0.65);
  border-radius: 0.08rem;
  box-shadow: 0 0.08rem 0.22rem rgba(40, 60, 80, 0.16);
  box-sizing: border-box;
  overflow: hidden;
}
.select2-dropdown.popup-create-select2-dropdown .select2-results > .select2-results__options {
  max-height: 2.4rem;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 110, 99, 0.72) rgba(244, 236, 232, 0.9);
}
.select2-dropdown.popup-create-select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar {
  width: 0.08rem;
}
.select2-dropdown.popup-create-select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-track {
  background: rgba(244, 236, 232, 0.9);
  border-radius: 0.08rem;
}
.select2-dropdown.popup-create-select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(198, 95, 85, 0.92) 0%, rgba(180, 110, 99, 0.92) 100%);
  border-radius: 0.08rem;
  border: 1px solid rgba(255, 249, 246, 0.9);
}
.select2-dropdown.popup-create-select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(208, 108, 97, 0.96) 0%, rgba(190, 120, 109, 0.96) 100%);
}
.select2-dropdown.popup-create-select2-dropdown .select2-results__option {
  padding: 0.14rem 0.18rem;
  font-size: 0.16rem;
  color: #3D4F5F;
  line-height: 1.5;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.select2-dropdown.popup-create-select2-dropdown .select2-results__option[aria-selected=true] {
  background: rgba(198, 95, 85, 0.08);
  color: #32181A;
}
.select2-dropdown.popup-create-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(to right, #ffece4 0%, #fff5f1 100%);
  color: #32181A;
}
.select2-dropdown.popup-create-select2-dropdown .select2-results__option + .select2-results__option {
  border-top: 1px solid rgba(180, 194, 208, 0.18);
}
.select2-container--open.popup-create-select2-open {
  box-sizing: border-box;
}
.popup-create.popup-create-select2-opening .select2-container--open:not(.popup-create-select2) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.popup-create .select2-container--open.popup-create-select2-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popup-create-success,
.popup-created {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.94rem;
  height: 4.68rem;
  z-index: 100;
  overflow: visible;
}
.popup-create-success .btn-pop-close,
.popup-created .btn-pop-close {
  top: -0.8rem;
  right: -0.5rem;
}
.popup-create-success .popup-create-success-inner,
.popup-created .popup-create-success-inner {
  width: 100%;
  height: 100%;
  background-image: url(../images/pc/pop3_bg.png);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 0.24rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-create-success .popup-create-success-inner .popup-create-success-title,
.popup-created .popup-create-success-inner .popup-create-success-title {
  height: 1.1rem;
  line-height: 1.1rem;
  width: 3.33rem;
  text-align: center;
  font-size: 0.3rem;
  font-weight: normal;
  font-family: 'eykht';
  background: url(../images/pc/create-success.png) no-repeat 0 0 / 100% 100%;
}
.popup-create-success .popup-create-success-inner .role-box,
.popup-created .popup-create-success-inner .role-box {
  width: 3.82rem;
  height: 1.2rem;
  background-color: #E0D6D6;
  color: #7B7A7A;
  font-size: 0.16rem;
  padding-left: 1.06rem;
  padding-top: 0.1rem;
  line-height: 2;
  margin-bottom: 0.12rem;
}
.popup-create-success .popup-create-success-inner .create-success-tip,
.popup-created .popup-create-success-inner .create-success-tip {
  color: #0D0102;
  font-size: 0.16rem;
  margin-bottom: 0.05rem;
}
.popup-create-success .popup-create-success-inner .login-agree,
.popup-created .popup-create-success-inner .login-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.popup-create-success .popup-create-success-inner .login-agree input,
.popup-created .popup-create-success-inner .login-agree input {
  display: none;
}
.popup-create-success .popup-create-success-inner .login-agree input:checked + .agree-icon::after,
.popup-created .popup-create-success-inner .login-agree input:checked + .agree-icon::after {
  opacity: 1;
}
.popup-create-success .popup-create-success-inner .login-agree .agree-icon,
.popup-created .popup-create-success-inner .login-agree .agree-icon {
  width: 0.14rem;
  height: 0.14rem;
  background: #E0D6D6;
  margin-right: 0.15rem;
  position: relative;
}
.popup-create-success .popup-create-success-inner .login-agree .agree-icon::after,
.popup-created .popup-create-success-inner .login-agree .agree-icon::after {
  content: '';
  position: absolute;
  left: 0.05rem;
  bottom: 0;
  width: 0.05rem;
  height: 0.15rem;
  border-right: 2px solid #c65f55;
  border-bottom: 2px solid #c65f55;
  transform: rotate(45deg);
  opacity: 0;
}
.popup-create-success .popup-create-success-inner .login-agree .agree-text,
.popup-created .popup-create-success-inner .login-agree .agree-text {
  font-size: 0.14rem;
  color: #A39191;
}
.popup-create-success .popup-create-success-inner .btn-share,
.popup-created .popup-create-success-inner .btn-share {
  margin-top: 0.16rem;
  margin-bottom: 0.06rem;
  display: block;
  width: 2.32rem;
  height: 0.72rem;
  background-image: url(../images/pc/btn-share.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup-create-success .popup-create-success-inner .invite-tip,
.popup-created .popup-create-success-inner .invite-tip {
  color: #A39191;
  font-size: 0.14rem;
}
.popup-created .popup-create-success-inner .popup-create-success-title {
  background-image: linear-gradient(to bottom, #372324 0%, #070400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup-rule {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6rem;
  height: 6.867rem;
  z-index: 100;
  overflow: visible;
}
.popup-rule .btn-pop-close {
  top: -0.7rem;
  right: -0.4rem;
}
.popup-rule .popup-rule-inner {
  width: 100%;
  height: 100%;
  background-image: url(../images/pc/pop4_bg.png);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.4rem 0.5rem 0.5rem;
}
.popup-rule .popup-rule-inner .popup-rule-title {
  font-size: 0.3rem;
  font-family: 'eykht';
  font-weight: normal;
  text-align: center;
  background-image: linear-gradient(to bottom, #372324 0%, #070400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup-rule .popup-rule-inner .rule-content {
  font-size: 0.16rem;
  line-height: 1.8;
  color: #0A0101;
  padding: 0.1rem 0;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 77, 28, 0.72) rgba(255, 244, 220, 0.38);
}
.popup-rule .popup-rule-inner .rule-content h3 {
  margin-top: 0.2rem;
}
.popup-rule .popup-rule-inner .rule-content h3:nth-child(1) {
  margin-top: 0;
}
.popup-rule .popup-rule-inner .rule-content i {
  font-weight: 700;
  margin-left: 0.05rem;
  margin-right: 0.05rem;
}
.popup-rule .popup-rule-inner .rule-content::-webkit-scrollbar {
  width: 0.1rem;
}
.popup-rule .popup-rule-inner .rule-content::-webkit-scrollbar-track {
  border-radius: 0.1rem;
  background: rgba(255, 244, 220, 0.38);
  box-shadow: inset 0 0 0.04rem rgba(84, 46, 16, 0.12);
}
.popup-rule .popup-rule-inner .rule-content::-webkit-scrollbar-thumb {
  border-radius: 0.1rem;
  background: linear-gradient(to bottom, rgba(176, 121, 55, 0.95) 0%, rgba(110, 68, 24, 0.95) 100%);
  border: 1px solid rgba(255, 236, 196, 0.68);
  box-shadow: 0 0 0.04rem rgba(84, 46, 16, 0.18);
}
.popup-rule .popup-rule-inner .rule-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(194, 136, 66, 0.98) 0%, rgba(126, 79, 31, 0.98) 100%);
}
@media screen and (min-width: 1921px) {
  .banner {
    background-image: url(../images/pc/banner-3480.jpg);
    background-size: 34.8rem 10.71rem;
  }
}