@charset "UTF-8";
.kv {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-bg.webp");
  height: 57vw;
  background-size: cover;
  background-position: 50% 75%;
}
.kv .container {
  bottom: auto;
  padding-top: 17em;
}
.kv .container::after {
  content: "";
  font-size: 1vw;
  display: block;
  position: absolute;
  top: 34em;
  right: 1em;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 30em;
  height: 3.5em;
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-tw.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
.kv .slogan h1 {
  position: relative;
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-tw.webp");
  width: 100vw;
  height: 16em;
  background-position: 21% 20%;
  margin-bottom: 8em;
}

#news {
  min-height: 25vw;
}
#news .container {
  margin-top: -8.5vw;
}
#news .title {
  -webkit-filter: drop-shadow(0em 0.1em 0.1em #FFF);
          filter: drop-shadow(0em 0.1em 0.1em #FFF);
}
@media screen and (min-width: 1025px) {
  #news .title {
    -webkit-filter: drop-shadow(0em 0.1em 0.1em #27105c);
            filter: drop-shadow(0em 0.1em 0.1em #27105c);
  }
  #news .title h2 {
    color: #FFF;
  }
  #news .title h2::before {
    -webkit-filter: brightness(3);
            filter: brightness(3);
  }
  #news .title h2 span {
    -webkit-filter: brightness(3);
            filter: brightness(3);
  }
}

.classes-item:nth-child(1) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-12-bg.webp");
}
.classes-item:nth-child(1) .classes-name {
  color: #374489;
}
.classes-item:nth-child(1) .classes-type {
  background-color: #374489;
}
.classes-item:nth-child(1) .classes-type::after {
  border-color: #374489 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(1) .classes-type::before {
    border-color: transparent transparent #374489 transparent;
  }
}
.classes-item:nth-child(1) .classes-character {
  width: 37.8vw;
}
.classes-item:nth-child(2) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-11-bg.webp");
}
.classes-item:nth-child(2) .classes-name {
  color: #51ace6;
}
.classes-item:nth-child(2) .classes-type {
  background-color: #51ace6;
}
.classes-item:nth-child(2) .classes-type::after {
  border-color: #51ace6 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(2) .classes-type::before {
    border-color: transparent transparent #51ace6 transparent;
  }
}
.classes-item:nth-child(2) .classes-character {
  width: 37.8vw;
}
.classes-item:nth-child(3) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-10-bg.webp");
}
.classes-item:nth-child(3) .classes-name {
  color: #d54d45;
}
.classes-item:nth-child(3) .classes-type {
  background-color: #d54d45;
}
.classes-item:nth-child(3) .classes-type::after {
  border-color: #d54d45 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(3) .classes-type::before {
    border-color: transparent transparent #d54d45 transparent;
  }
}
.classes-item:nth-child(3) .classes-character {
  width: 37.8vw;
}
.classes-item:nth-child(4) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-9-bg.webp");
}
.classes-item:nth-child(4) .classes-name {
  color: #8c1636;
}
.classes-item:nth-child(4) .classes-type {
  background-color: #8c1636;
}
.classes-item:nth-child(4) .classes-type::after {
  border-color: #8c1636 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(4) .classes-type::before {
    border-color: transparent transparent #8c1636 transparent;
  }
}
.classes-item:nth-child(4) .classes-character {
  width: 37.8vw;
}
.classes-item:nth-child(5) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-8-bg.webp");
}
.classes-item:nth-child(5) .classes-name {
  color: #1754bc;
}
.classes-item:nth-child(5) .classes-type {
  background-color: #1754bc;
}
.classes-item:nth-child(5) .classes-type::after {
  border-color: #1754bc transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(5) .classes-type::before {
    border-color: transparent transparent #1754bc transparent;
  }
}
.classes-item:nth-child(5) .classes-character {
  width: 36.7vw;
}
.classes-item:nth-child(6) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-7-bg.webp");
}
.classes-item:nth-child(6) .classes-name {
  color: #3a8ea4;
}
.classes-item:nth-child(6) .classes-type {
  background-color: #3a8ea4;
}
.classes-item:nth-child(6) .classes-type::after {
  border-color: #3a8ea4 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(6) .classes-type::before {
    border-color: transparent transparent #3a8ea4 transparent;
  }
}
.classes-item:nth-child(6) .classes-character {
  width: 31.3vw;
}
.classes-item:nth-child(7) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-6-bg.webp");
}
.classes-item:nth-child(7) .classes-name {
  color: #ff9a45;
}
.classes-item:nth-child(7) .classes-type {
  background-color: #ff9a45;
}
.classes-item:nth-child(7) .classes-type::after {
  border-color: #ff9a45 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(7) .classes-type::before {
    border-color: transparent transparent #ff9a45 transparent;
  }
}
.classes-item:nth-child(7) .classes-character {
  width: 32.6vw;
}
.classes-item:nth-child(8) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-5-bg.webp");
}
.classes-item:nth-child(8) .classes-name {
  color: #00b7ec;
}
.classes-item:nth-child(8) .classes-type {
  background-color: #00b7ec;
}
.classes-item:nth-child(8) .classes-type::after {
  border-color: #00b7ec transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(8) .classes-type::before {
    border-color: transparent transparent #00b7ec transparent;
  }
}
.classes-item:nth-child(8) .classes-character {
  width: 41.1vw;
}
.classes-item:nth-child(9) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-4-bg.webp");
}
.classes-item:nth-child(9) .classes-name {
  color: #7060b0;
}
.classes-item:nth-child(9) .classes-type {
  background-color: #7060b0;
}
.classes-item:nth-child(9) .classes-type::after {
  border-color: #7060b0 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(9) .classes-type::before {
    border-color: transparent transparent #7060b0 transparent;
  }
}
.classes-item:nth-child(9) .classes-character {
  width: 33.1vw;
}
.classes-item:nth-child(10) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-3-bg.webp");
}
.classes-item:nth-child(10) .classes-name {
  color: #845e49;
}
.classes-item:nth-child(10) .classes-type {
  background-color: #845e49;
}
.classes-item:nth-child(10) .classes-type::after {
  border-color: #845e49 transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(10) .classes-type::before {
    border-color: transparent transparent #845e49 transparent;
  }
}
.classes-item:nth-child(10) .classes-character {
  width: 30.3vw;
}
.classes-item:nth-child(11) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-2-bg.webp");
}
.classes-item:nth-child(11) .classes-name {
  color: #cf544d;
}
.classes-item:nth-child(11) .classes-type {
  background-color: #cf544d;
}
.classes-item:nth-child(11) .classes-type::after {
  border-color: #cf544d transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(11) .classes-type::before {
    border-color: transparent transparent #cf544d transparent;
  }
}
.classes-item:nth-child(11) .classes-character {
  width: 34.4vw;
}
.classes-item:nth-child(12) .classes-bg {
  background-image: url("/online/astraltale/assets/images/index/classes/reverse-bg/classes-1-bg.webp");
}
.classes-item:nth-child(12) .classes-name {
  color: #ee5e8a;
}
.classes-item:nth-child(12) .classes-type {
  background-color: #ee5e8a;
}
.classes-item:nth-child(12) .classes-type::after {
  border-color: #ee5e8a transparent transparent transparent;
}
@media screen and (orientation: portrait) {
  .classes-item:nth-child(12) .classes-type::before {
    border-color: transparent transparent #ee5e8a transparent;
  }
}
.classes-item:nth-child(12) .classes-character {
  width: 39.1vw;
}
@media screen and (orientation: portrait) and (max-width: 1024px) {
  .classes-item.Gunslinger .classes-character img {
    max-height: 95%;
    max-height: 100%;
  }
}
@media screen and (orientation: portrait) and (max-width: 1024px) and (max-width: 480px) {
  .classes-item.Gunslinger .classes-character img {
    max-height: 98%;
    max-height: 100%;
  }
}
@media screen and (orientation: portrait) and (max-width: 1024px) {
  .classes-item.Mage .classes-character img, .classes-item.Swordmaster .classes-character img {
    max-height: 98%;
    max-height: 100%;
  }
  .classes-item.Paladin .classes-character img {
    max-height: 95%;
  }
}
@media screen and (orientation: portrait) and (max-width: 1024px) and (max-width: 480px) {
  .classes-item.Paladin .classes-character img {
    max-height: 98%;
  }
}
@media screen and (orientation: portrait) and (max-width: 1024px) {
  .classes-item.Mage .classes-character img, .classes-item.Gunslinger .classes-character img {
    max-height: 98%;
  }
  .classes-item.Dragon-Puppeteer .classes-character picture {
    width: 100%;
  }
}

.classes-name {
  position: relative;
}
.classes-name.new::before {
  content: "NEW";
  display: block;
  position: absolute;
  top: 25%;
  right: calc(6.2em + 30px);
  font-size: 0.5em;
  font-weight: 600;
  color: #ed484e;
}
@media screen and (max-width: 1024px) {
  .classes-name.new {
    padding-top: 0.5em;
  }
  .classes-name.new::before {
    right: 50%;
    top: 0%;
    -webkit-transform: translate(50%, 0%);
            transform: translate(50%, 0%);
  }
}
.classes-type {
  display: block;
}
@media screen and (max-width: 1024px) {
  .classes-type {
    width: auto;
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
            transform: none;
    margin: 0 auto;
    padding: 0 1.5em;
  }
}

@media screen and (max-width: 1440px) {
  .kv {
    min-height: auto;
  }
}
@media screen and (max-width: 1024px) {
  .kv {
    height: 144.5vw;
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-bg-m.webp");
  }
  .kv .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-bottom: 0;
    bottom: auto;
    padding-top: 0;
  }
  .kv .container::after {
    top: 10%;
    right: 2%;
    width: 47vw;
    height: 8em;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-tw-m.png");
  }
  .kv .game-logo {
    position: relative;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(-117%, 33%);
            transform: translate(-117%, 33%);
    width: 32vw;
    opacity: 1;
  }
  .kv .game-logo img {
    width: 100%;
  }
  .kv .slogan {
    padding-top: 55vw;
  }
  .kv .slogan h1 {
    font-size: 2.2vw;
    background-position: 50% 50%;
    margin-bottom: 0;
  }
  #news {
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/p2-news-bg-m.jpg");
  }
  #news .container {
    margin-top: 0;
  }
  #news h2 {
    margin-bottom: 0.2em;
    margin-top: 0.3em;
  }
  .classes-content {
    width: 80%;
  }
}
@media screen and (max-width: 820px) {
  .kv .container::after {
    top: 7%;
  }
  .kv .game-logo {
    -webkit-transform: translate(-113%, 6%);
            transform: translate(-113%, 6%);
  }
}
@media screen and (max-width: 480px) {
  .kv {
    height: 180vw;
  }
  .kv .container::after {
    height: 10em;
  }
  .kv .slogan {
    padding-top: 81vw;
  }
  .kv .slogan h1 {
    font-size: 3vw;
  }
}
/* ======= 長螢幕畫面 - 客製化 =======*/
/* Sumsung Note10 Lite */
/* Pixel 2 XL */
/* iPhone 16 (393x852)*/
@media screen and (max-width: 430px) and (min-height: 812px) {
  .kv {
    height: 210vw;
  }
  .kv .slogan {
    padding-top: 100vw;
  }
}
body.class_Astrologer.zh-hant .kv .container::after {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-tw.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.zh-hant .kv .container::after {
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-tw-m.png");
  }
}
body.class_Astrologer.zh-hant .kv .slogan h1 {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-tw.webp");
}
body.class_Astrologer.zh-hans .kv .container::after {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-cn.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.zh-hans .kv .container::after {
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-cn-m.png");
  }
}
body.class_Astrologer.zh-hans .kv .slogan h1 {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-cn.webp");
}
body.class_Astrologer.JP .kv .container::after {
  height: 12em;
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-ja.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.JP .kv .container::after {
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-ja-m.png");
  }
}
@media screen and (max-width: 1024px) and (min-width: 481px) {
  body.class_Astrologer.JP .kv .slogan {
    padding-top: 60vw;
  }
}
body.class_Astrologer.JP .kv .slogan h1 {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-ja.webp");
  font-size: 1vw;
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.JP .kv .slogan h1 {
    font-size: 2vw;
  }
}
@media screen and (max-width: 820px) {
  body.class_Astrologer.JP .kv .slogan h1 {
    font-size: 2.3vw;
  }
}
@media screen and (max-width: 480px) {
  body.class_Astrologer.JP .kv .slogan h1 {
    font-size: 3vw;
  }
}
body.class_Astrologer.JP .classes-name.new::before {
  right: calc(8.2em + 30px);
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.JP .classes-name.new::before {
    right: 50%;
    top: 0%;
    -webkit-transform: translate(50%, 0%);
            transform: translate(50%, 0%);
  }
}
body.class_Astrologer.JP .classes-content {
  width: 23em;
}
body.class_Astrologer.EN .kv .container::after {
  height: 12em;
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-en.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.EN .kv .container::after {
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-sub-en-m.png");
  }
}
body.class_Astrologer.EN .kv .slogan h1 {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-en.webp");
  font-size: 1vw;
  height: 11em;
  margin-top: 2em;
}
@media screen and (min-width: 1025px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    margin-bottom: 11em;
  }
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    font-size: 2vw;
    height: 14em;
  }
}
@media screen and (max-width: 820px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    height: 13em;
    margin-top: 4em;
  }
}
@media screen and (max-width: 480px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    font-size: 2.5vw;
  }
}
body.class_Astrologer.EN .classes-name.new::before {
  right: calc(14em + 30px);
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.EN .classes-name.new::before {
    right: 50%;
    top: 0%;
    -webkit-transform: translate(50%, 0%);
            transform: translate(50%, 0%);
  }
}

body.class_Astrologer.zh-hant.collab .kv {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-bg-collab.webp");
}
body.class_Astrologer.zh-hant.collab .kv .container {
  padding-top: 8em;
}
body.class_Astrologer.zh-hant.collab .kv .container::after {
  display: none;
}
body.class_Astrologer.zh-hant.collab .slogan h1 {
  background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-slogan-collab-tw.webp");
  background-position: 21% 50%;
  height: 23em;
  margin-bottom: 8em;
}
body.class_Astrologer.zh-hant.collab #news .title {
  -webkit-filter: drop-shadow(0em 0.1em 0.1em #FFF);
          filter: drop-shadow(0em 0.1em 0.1em #FFF);
}
body.class_Astrologer.zh-hant.collab #news .title h2 {
  color: transparent;
}
body.class_Astrologer.zh-hant.collab #news .title h2::before {
  -webkit-filter: brightness(1);
          filter: brightness(1);
}
body.class_Astrologer.zh-hant.collab #news .title h2 span {
  -webkit-filter: brightness(1);
          filter: brightness(1);
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.zh-hant.collab .kv {
    background-image: url("/online/astraltale/assets/images/index/update_Astrologer/kv-bg-collab-m.webp");
  }
  body.class_Astrologer.zh-hant.collab .kv .container {
    padding-top: 4.5em;
  }
  body.class_Astrologer.zh-hant.collab .kv .game-logo {
    -webkit-transform: translate(-5%, 0%);
            transform: translate(-5%, 0%);
    z-index: 1;
  }
  body.class_Astrologer.zh-hant.collab .kv .slogan {
    padding-top: 0;
  }
  body.class_Astrologer.zh-hant.collab .kv .slogan h1 {
    background-position: 18vw 50%;
    margin-top: -6em;
    margin-bottom: 55vw;
    height: 18em;
    z-index: 0;
  }
}
@media screen and (max-width: 820px) {
  body.class_Astrologer.zh-hant.collab .kv .container {
    padding-top: 3em;
  }
}
@media screen and (max-width: 480px) {
  body.class_Astrologer.zh-hant.collab .kv .container {
    padding-top: 2em;
  }
  body.class_Astrologer.zh-hant.collab .kv .game-logo {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
  body.class_Astrologer.zh-hant.collab .kv .slogan {
    padding-top: 0;
  }
  body.class_Astrologer.zh-hant.collab .kv .slogan h1 {
    background-position: 9vw 50%;
    margin-top: -7em;
    margin-bottom: 70vw;
    height: 22em;
  }
}