.en .menu li:nth-of-type(1) {
  background-image: url(../images/header/tt_btn_1.webp);
}
.en .menu li:nth-of-type(2) {
  background-image: url(../images/header/tt_btn_2.webp);
}
.en .menu li:nth-of-type(3) {
  background-image: url(../images/header/tt_btn_3.webp);
}
.en .menu li:nth-of-type(4) {
  background-image: url(../images/header/tt_btn_4.webp);
}
.en .menu li:nth-of-type(5) {
  background-image: url(../images/header/tt_btn_5.webp);
}
.en .menu li:nth-of-type(6) {
  background-image: url(../images/header/tt_btn_6.webp);
}
.en .menu li:nth-of-type(7) {
  background-image: url(../images/header/tt_btn_7.webp);
}

.en .menu li:nth-of-type(1):hover,
.en .menu li:nth-of-type(1).active {
  background-image: url(../images/header/tt_btn_1_ov.webp);
}
.en .menu li:nth-of-type(2):hover,
.en .menu li:nth-of-type(2).active {
  background-image: url(../images/header/tt_btn_2_ov.webp);
}
.en .menu li:nth-of-type(3):hover,
.en .menu li:nth-of-type(3).active {
  background-image: url(../images/header/tt_btn_3_ov.webp);
}
.en .menu li:nth-of-type(4):hover,
.en .menu li:nth-of-type(4).active {
  background-image: url(../images/header/tt_btn_4_ov.webp);
}
.en .menu li:nth-of-type(5):hover,
.en .menu li:nth-of-type(5).active {
  background-image: url(../images/header/tt_btn_5_ov.webp);
}
.en .menu li:nth-of-type(6):hover,
.en .menu li:nth-of-type(6).active {
  background-image: url(../images/header/tt_btn_6_ov.webp);
}
.en .menu li:nth-of-type(7):hover,
.en .menu li:nth-of-type(7).active {
  background-image: url(../images/header/tt_btn_7_ov.webp);
}

.classify li:nth-of-type(1) {
  background-image: url(../images/sec_news/classify1.png) !important;
}
.classify li:nth-of-type(2) {
  background-image: url(../images/sec_news/classify2.png) !important;
}
.classify li:nth-of-type(3) {
  background-image: url(../images/sec_news/classify3.png) !important;
}
.classify li:nth-of-type(4) {
  background-image: url(../images/sec_news/classify4.png) !important;
}

.classify li:nth-of-type(1):hover,
.classify li:nth-of-type(1):active,
.classify li:nth-of-type(1).active {
  background-image: url(../images/sec_news/classify1_ov.png) !important;
}
.classify li:nth-of-type(2):hover,
.classify li:nth-of-type(2):active,
.classify li:nth-of-type(2).active {
  background-image: url(../images/sec_news/classify2_ov.png) !important;
}
.classify li:nth-of-type(3):hover,
.classify li:nth-of-type(3):active,
.classify li:nth-of-type(3).active {
  background-image: url(../images/sec_news/classify3_ov.png) !important;
}
.classify li:nth-of-type(4):hover,
.classify li:nth-of-type(4):active,
.classify li:nth-of-type(4).active {
  background-image: url(../images/sec_news/classify4_ov.png) !important;
}

#section03 .char-desc::before {
  top: 15.8% !important;
}

/* 英雄的種類 */
#section03 li.nav-item:nth-of-type(1) .nav-link:hover::before,
#section03 li.nav-item:nth-of-type(1) .nav-link.active::before {
  content: 'Human' !important;
  position: absolute;
  left: 110%;
  top: 10% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

#section03 li.nav-item:nth-of-type(2) .nav-link:hover,
#section03 li.nav-item:nth-of-type(2) .nav-link.active {
  background-image: url(../images/sec3_hero/ethnicity_mark_2_active.png);
  margin-top: -2.5px;
}
#section03 li.nav-item:nth-of-type(2) .nav-link:hover::before,
#section03 li.nav-item:nth-of-type(2) .nav-link.active::before {
  content: 'WoodFolk' !important;
  position: absolute;
  left: 110%;
  top: 0% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

#section03 li.nav-item:nth-of-type(3) .nav-link:hover,
#section03 li.nav-item:nth-of-type(3) .nav-link.active {
  background-image: url(../images/sec3_hero/ethnicity_mark_3_active.png);
  margin-top: -2.5px;
}
#section03 li.nav-item:nth-of-type(3) .nav-link:hover::before,
#section03 li.nav-item:nth-of-type(3) .nav-link.active::before {
  content: 'Gnome' !important;
  position: absolute;
  left: 110%;
  top: 10% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

#section03 li.nav-item:nth-of-type(4) .nav-link:hover,
#section03 li.nav-item:nth-of-type(4) .nav-link.active {
  background-image: url(../images/sec3_hero/ethnicity_mark_4_active.png);
  margin-top: -2.5px;
}
#section03 li.nav-item:nth-of-type(4) .nav-link:hover::before,
#section03 li.nav-item:nth-of-type(4) .nav-link.active::before {
  content: 'Darkelf' !important;
  position: absolute;
  left: 110%;
  top: 10% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

#section03 li.nav-item:nth-of-type(5) .nav-link:hover,
#section03 li.nav-item:nth-of-type(5) .nav-link.active {
  background-image: url(../images/sec3_hero/ethnicity_mark_5_active.png);
  margin-top: -2.5px;
}
#section03 li.nav-item:nth-of-type(5) .nav-link:hover::before,
#section03 li.nav-item:nth-of-type(5) .nav-link.active::before {
  content: 'Orc' !important;
  position: absolute;
  left: 110%;
  top: 35% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

#section03 li.nav-item:nth-of-type(6) .nav-link:hover,
#section03 li.nav-item:nth-of-type(6) .nav-link.active {
  background-image: url(../images/sec3_hero/ethnicity_mark_6_active.png);
  margin-top: -2.5px;
}
#section03 li.nav-item:nth-of-type(6) .nav-link:hover::before,
#section03 li.nav-item:nth-of-type(6) .nav-link.active::before {
  content: 'Dragon';
  position: absolute;
  left: 110%;
  top: 25%;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

/* 英雄的種類 Modal版本 */

.modal-profession {
  box-shadow: 0 0 0px #1d1c1b94 !important;
  filter: drop-shadow(0 0 15px #000);
}

.modal-profession h4,
.modal-hero-role h5.text-warning {
  margin-bottom: 0;
  color: #e2c291 !important;
  line-height: 1.5;
  font-size: 1rem !important;
  margin-bottom: 0.5rem;
}

.modal-profession span,
.modal-hero-tags .text-info {
  background: linear-gradient(to bottom, #dbc08e, #bda26d);
  border-radius: 10px 5px 10px 5px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
  /* width: 180px; */
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.5;
  padding: 1px 0.5rem;
  margin-bottom: 0;
  position: relative;
  display: block;
  color: #fff !important;
  font-size: 0.9rem;
}

.modal-body li.nav-item:nth-of-type(1) .nav-link:hover,
.modal-body li.nav-item:nth-of-type(1) .nav-link.active {
  background-image: url(../images/sec_hero/ethnic_1_active.png);
}
.modal-body li.nav-item:nth-of-type(1) .nav-link:hover::before,
.modal-body li.nav-item:nth-of-type(1) .nav-link.active::before {
  content: 'Human';
  top: 25%;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

.modal-body li.nav-item:nth-of-type(2) .nav-link:hover,
.modal-body li.nav-item:nth-of-type(2) .nav-link.active {
  background-image: url(../images/sec_hero/ethnic_2_active.png);
}
.modal-body li.nav-item:nth-of-type(2) .nav-link:hover::before,
.modal-body li.nav-item:nth-of-type(2) .nav-link.active::before {
  content: 'WoodFolk';
  position: absolute;
  left: 105%;
  top: -10% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

.modal-body li.nav-item:nth-of-type(3) .nav-link:hover,
.modal-body li.nav-item:nth-of-type(3) .nav-link.active {
  background-image: url(../images/sec_hero/ethnic_3_active.png);
  margin-top: -2.5px;
}
.modal-body li.nav-item:nth-of-type(3) .nav-link:hover::before,
.modal-body li.nav-item:nth-of-type(3) .nav-link.active::before {
  content: 'Gnome';
  position: absolute;
  left: 105%;
  top: 25%;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}
.modal-body li.nav-item:nth-of-type(4) .nav-link:hover,
.modal-body li.nav-item:nth-of-type(4) .nav-link.active {
  background-image: url(../images/sec_hero/ethnic_4_active.png);
  margin-top: -2.5px;
}
.modal-body li.nav-item:nth-of-type(4) .nav-link:hover::before,
.modal-body li.nav-item:nth-of-type(4) .nav-link.active::before {
  content: 'Darkelf';
  position: absolute;
  left: 105%;
  top: 8%;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}
.modal-body li.nav-item:nth-of-type(5) .nav-link:hover,
.modal-body li.nav-item:nth-of-type(5) .nav-link.active {
  background-image: url(../images/sec_hero/ethnic_5_active.png);
}
.modal-body li.nav-item:nth-of-type(5) .nav-link:hover::before,
.modal-body li.nav-item:nth-of-type(5) .nav-link.active::before {
  content: 'Orc';
  position: absolute;
  left: 105%;
  top: 30% !important;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}

.modal-body li.nav-item:nth-of-type(6) .nav-link:hover,
.modal-body li.nav-item:nth-of-type(6) .nav-link.active {
  background-image: url(../images/sec_hero/ethnic_6_active.png);
  margin-top: -2.5px;
}
.modal-body li.nav-item:nth-of-type(6) .nav-link:hover::before,
.modal-body li.nav-item:nth-of-type(6) .nav-link.active::before {
  content: 'Dragon';
  position: absolute;
  left: 105%;
  top: 25%;
  font-size: larger;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  writing-mode: vertical-lr !important;
}
/* footer  */
.app_gp li:first-child,
.social_gp li:first-child {
  width: 60px;
  margin: 1rem 0.5rem;
  text-wrap: nowrap;
}

/* News 公告的list頁面 */
.classify li:nth-of-type(1) {
  background-image: url(../images/sec_news/classify1.png) !important;
}
.classify li:nth-of-type(2) {
  background-image: url(../images/sec_news/classify2.png) !important;
}
.classify li:nth-of-type(3) {
  background-image: url(../images/sec_news/classify3.png) !important;
}
.classify li:nth-of-type(4) {
  background-image: url(../images/sec_news/classify4.png) !important;
}

.classify li:nth-of-type(1):hover,
.classify li:nth-of-type(1):active,
.classify li:nth-of-type(1).active {
  background-image: url(../images/sec_news/classify1_ov.png) !important;
}
.classify li:nth-of-type(2):hover,
.classify li:nth-of-type(2):active,
.classify li:nth-of-type(2).active {
  background-image: url(../images/sec_news/classify2_ov.png) !important;
}
.classify li:nth-of-type(3):hover,
.classify li:nth-of-type(3):active,
.classify li:nth-of-type(3).active {
  background-image: url(../images/sec_news/classify3_ov.png) !important;
}
.classify li:nth-of-type(4):hover,
.classify li:nth-of-type(4):active,
.classify li:nth-of-type(4).active {
  background-image: url(../images/sec_news/classify4_ov.png) !important;
}

#section03 .profession::before {
  width: 65px !important;
  height: 65px !important;
  /* top: 0px !important; */
  left: -2rem !important;
}

#section03 .profession h4 {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
}

#section03 .profession span {
  font-size: 0.9rem !important;
  font-weight: normal !important;
}

@media screen and (max-width: 1600px) {
  #section02 .mySwiper2 h4 {
    max-height: 404px !important;
  }

  #section03 .char-desc::before {
    top: 14.8% !important;
  }

  #section03 .profession::before {
    left: -2.8rem !important;
  }

  #section03 .enar-desc::before {
    top: 14.8% !important;
  }

  #section03 .en-description {
    top: 6% !important;
  }
}

@media (max-width: 1025px) {
  #section03 .profession::before {
    display: none !important;
  }

  #section03 .en-description {
    position: absolute;
    bottom: 13%;
    left: 8%;
    top: unset !important;
    width: 85%;
    max-width: unset;
  }
}

@media (max-width: 992px) {
  #section03 .en-description {
    width: 100%;
    left: 0%;
    bottom: 5%;
  }

  #section03 .char-desc::before {
    background-position-y: 70% !important;
  }

  #section03 .enar-desc::before {
    background-position-y: 77% !important;
  }

  #section03 .profession {
    width: 80%;
  }
  #section03 .profession h4 {
    font-size: 1.8rem !important;
  }
  #section03 .profession span {
    width: 350px;
    font-size: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  #section03 .en-description {
    bottom: 7%;
  }

  #section03 .char-desc::before {
    background-position-y: 100% !important;
  }

  #section03 .enar-desc::before {
    background-position-y: 100% !important;
  }

  #section03 .profession {
    padding: 0.7rem 5px 0.7rem 5px;
  }

  #section03 .profession h4 {
    margin-bottom: 0.5rem;
  }
  #section03 .profession span {
    width: 300px;
    font-size: 1.3rem !important;
  }

  #section03 .profession h4 {
    font-size: 1.2rem !important;
  }

  .name_block {
    width: 60%;
    margin-right: 1rem;
  }
  .modal_hero {
    width: 78%;
    top: -6.5rem !important;
    /* left: -1rem; */
  }

  .name_block .name-stroke,
  .name_block .name-fill,
  .name_be h3,
  .name_af h3 {
    font-size: 20px;
    /* text-wrap: nowrap !important; */
  }
}

@media screen and (max-width: 480px) {
  .btn_toggle_sure {
    margin: 0.6rem 1.6rem 0.6rem 0;
  }

  #section03 .en-description {
    bottom: 2% !important;
  }

  /* 英雄的種類 */
  #section03 li.nav-item:nth-of-type(1) .nav-link:hover::before,
  #section03 li.nav-item:nth-of-type(1) .nav-link.active::before {
    content: 'Human' !important;
    position: absolute;
    left: 110%;
    top: -20% !important;
    font-size: larger;
    font-weight: 500;
    line-height: 24px;
    color: #fff;
    writing-mode: vertical-lr !important;
  }

  #section03 li.nav-item:nth-of-type(2) .nav-link:hover,
  #section03 li.nav-item:nth-of-type(2) .nav-link.active {
    background-image: url(../images/sec3_hero/ethnicity_mark_2_active.png);
    margin-top: -2.5px;
  }
  #section03 li.nav-item:nth-of-type(2) .nav-link:hover::before,
  #section03 li.nav-item:nth-of-type(2) .nav-link.active::before {
    content: 'WoodFolk' !important;
    top: -30% !important;
  }

  #section03 li.nav-item:nth-of-type(3) .nav-link:hover,
  #section03 li.nav-item:nth-of-type(3) .nav-link.active {
    background-image: url(../images/sec3_hero/ethnicity_mark_3_active.png);
    margin-top: -2.5px;
  }
  #section03 li.nav-item:nth-of-type(3) .nav-link:hover::before,
  #section03 li.nav-item:nth-of-type(3) .nav-link.active::before {
    content: 'Gnome' !important;
    top: -20% !important;
  }

  #section03 li.nav-item:nth-of-type(4) .nav-link:hover,
  #section03 li.nav-item:nth-of-type(4) .nav-link.active {
    background-image: url(../images/sec3_hero/ethnicity_mark_4_active.png);
    margin-top: -2.5px;
  }
  #section03 li.nav-item:nth-of-type(4) .nav-link:hover::before,
  #section03 li.nav-item:nth-of-type(4) .nav-link.active::before {
    content: 'Darkelf' !important;
    top: -30% !important;
  }

  #section03 li.nav-item:nth-of-type(5) .nav-link:hover,
  #section03 li.nav-item:nth-of-type(5) .nav-link.active {
    background-image: url(../images/sec3_hero/ethnicity_mark_5_active.png);
    margin-top: -2.5px;
  }
  #section03 li.nav-item:nth-of-type(5) .nav-link:hover::before,
  #section03 li.nav-item:nth-of-type(5) .nav-link.active::before {
    content: 'Orc' !important;
    top: 5% !important;
  }

  #section03 li.nav-item:nth-of-type(6) .nav-link:hover,
  #section03 li.nav-item:nth-of-type(6) .nav-link.active {
    background-image: url(../images/sec3_hero/ethnicity_mark_6_active.png);
    margin-top: -2.5px;
  }
  #section03 li.nav-item:nth-of-type(6) .nav-link:hover::before,
  #section03 li.nav-item:nth-of-type(6) .nav-link.active::before {
    content: 'Dragon';
    top: 25%;
  }
}

@media (max-width: 390px) {
  #section03 .profession h4 {
    font-size: 1.2rem;
  }
  #section03 .profession span {
    width: 83%;
    font-size: 1rem;
  }
  #section03 .profession {
    padding: 0.5rem 5px 0.5rem 5px;
  }

  .modal_hero {
    width: 78%;
    top: -4.5rem !important;
    /* left: -1rem; */
  }
}