@charset "utf-8";

@import url("https://ids.iwplay.com.tw/includ/footer/footer.css");

*,
a,
span {
  font-family: "Noto Sans TC", Arial, Helvetica, 微軟正黑體, Microsoft JhengHei,
    sans-serif;
}

/*====卷軸===*/
/* 細捲軸開始 */
::-webkit-scrollbar {
  height: 5px;
  overflow: visible;
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #bc8816;
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 0px;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8d8d8d;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:active {
  background-color: #666666;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track {
  background-color: #090102;
}

/* 細捲軸結束 */
html,
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  background-color: #000000;
}

body {
  overflow-y: hidden;
  background-color: #000000;
}

section {
  width: 100%;
  display: inline-block;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}

footer img {
  width: initial;
  height: initial;
}

.wrapper {}

/* ==========================
   浮水印
============================ */
.right_sns_box {
  position: fixed;
  width: 11%;
  height: auto;
  padding-bottom: 31%;
  top: 22%;
  right: -11%;
  z-index: 90;
  opacity: 1;
  transition: all 0.5s ease;
  display: block;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/right_sns_box.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #cf061000;
  /*顏色標記*/
}

.right_sns_box.scroll {
  right: 2%;
  opacity: 1;
  transition: all 0.5s ease;
  display: block;
}

/*--冒頭標籤_star--*/
.nav_btn {
  position: absolute;
  top: 31%;
  left: -14%;
  width: 17%;
  height: auto;
  padding-bottom: 58%;
  padding-top: 5%;

  background-image: url(https://images5.iwplay.com.tw/image/tlbb/os_main/images/nav_btn.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav_btn_tag {
  display: block;
  position: absolute;
  width: 47%;
  height: auto;
  top: 21%;
  left: 33%;
  padding-bottom: 1%;
}

.scroll .nav_btn_tag {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*.nav_btn_tag{
	display: block;
	width: 0;
	height: 0;
	margin: 20px auto 10px;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:0 none;
	border-right:12px solid #fff;
	transition: all ease 0.5s;
}
.nav_show .nav_btn_tag{
	border-left:12px solid #fff;
	border-right:0 none;
}*/

.nav_btn_text {
  position: absolute;
  width: 24px;
  height: 48px;
  top: 44%;
  left: 21%;
  line-height: 122%;
  text-align: center;
  margin: 0 auto;
  font-size: 1vw;
  color: #4d1519;
  transition: all ease 0.5s;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 600;
}

.nav_btn_text:nth-of-type(1) {
  display: none;
}

.scroll .nav_btn_text:nth-of-type(1) {
  display: block;
}

.nav_btn_text:nth-of-type(2) {
  display: block;
}

.scroll .nav_btn_text:nth-of-type(2) {
  display: none;
}

/*--冒頭標籤_end--*/

.right_sns_box .QR_code {
  position: absolute;
  width: 59%;
  height: auto;
  top: 45%;
  left: 22.1%;
  padding-bottom: 0%;
  background-color: #bc871600;
  /*顏色標記*/
}

/*--FB--*/
.right_sns_box .sns_fb {
  position: absolute;
  width: 65%;
  height: auto;
  top: 68%;
  left: 20%;
  padding-bottom: 23%;

  cursor: pointer;
  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 15.8% 70.2%;
  background-repeat: no-repeat;
  background-size: 3501%;
  background-color: rgba(51, 131, 94, 0);
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.right_sns_box .sns_fb:hover {
  transition: all ease 0.5s;
  transform: scale(1.06);
  filter: brightness(1.2);
}

/*--YT--*/
.right_sns_box .sns_yt {
  position: absolute;
  width: 65%;
  height: auto;
  top: 76%;
  left: 20%;
  padding-bottom: 23%;

  cursor: pointer;
  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 15.8% 72.4%;
  background-repeat: no-repeat;
  background-size: 3501%;
  background-color: rgba(51, 131, 94, 0);
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.right_sns_box .sns_yt:hover {
  transition: all ease 0.5s;
  transform: scale(1.06);
  filter: brightness(1.2);
}

/*--TG--*/
.right_sns_box .sns_tg {
  position: absolute;
  width: 65%;
  height: auto;
  top: 84%;
  left: 20%;
  padding-bottom: 23%;

  cursor: pointer;
  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 15.8% 74.7%;
  background-repeat: no-repeat;
  background-size: 3501%;
  background-color: rgba(51, 131, 94, 0);
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.right_sns_box .sns_tg:hover {
  transition: all ease 0.5s;
  transform: scale(1.06);
  filter: brightness(1.2);
}

@media (max-width: 1100px) {
  .right_sns_box {
    display: none;
  }

  .right_sns_box.scroll {
    display: none;
  }
}

/* ==========================
   主視覺區域
============================ */
.kv_zone {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 49%;
  overflow: hidden;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/kv_pc_250717.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #000000;

  z-index: 60;
}

.kv_top_word {
  position: absolute;
  width: 39.583%;
  height: auto;
  padding-bottom: 0%;
  top: 2.5%;
  left: 30%;
  z-index: 62;
  opacity: 1;
  background-color: rgba(51, 131, 94, 0);
  /*顏色標記*/
}

.KV_logo {
  position: absolute;
  width: 15%;
  height: auto;
  padding-bottom: 6%;
  top: 1.5%;
  left: 1%;
  z-index: 62;
  opacity: 0;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/logo_bk.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgba(51, 131, 94, 0);
  /*顏色標記*/

  animation: zoom 0.5s ease-in-out forwards;
  animation-delay: 0.4s;
}

.KV_big_slogan {
  position: absolute;
  width: 44%;
  height: auto;
  padding-bottom: 4.5%;
  top: 61%;
  left: 27.8%;
  z-index: 62;
  opacity: 0;
  pointer-events: none;
  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/KV_big_slogan_250717.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  animation: zoom 0.5s ease-in-out forwards;
  animation-delay: 1s;
}

.KV_YT_btn {
  position: absolute;
  width: 6%;
  height: auto;
  padding-bottom: 5.9%;
  top: 12%;
  left: 76%;
  z-index: 63;
  cursor: pointer;
  background-color: rgba(51, 131, 94, 0);
  /*顏色標記*/

  animation-delay: 1.4s;
}

.KV_YT_btn .play_btn {
  position: absolute;
  width: 50%;
  height: auto;
  padding-bottom: 49%;
  top: 17%;
  left: 22%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 10.15% 6%;
  background-repeat: no-repeat;
  background-size: 7657%;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/

  animation: breath 1.5s infinite;
  -webkit-animation: breath 1.5s infinite;
  -moz-animation: breath 1.5s infinite;
  -ms-animation: breath 1.5s infinite;
}

.KV_YT_btn .btn_bg {
  position: absolute;
  width: 94%;
  height: auto;
  padding-bottom: 94%;
  top: 41%;
  left: 47%;
  z-index: 63;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 11.55% 5.5%;
  background-repeat: no-repeat;
  background-size: 5307%;
  background-color: rgba(131, 103, 51, 0);

  -webkit-animation: rotate 8s linear infinite;
  -moz-animation: rotate 8s linear infinite;
  -ms-animation: rotate 8s linear infinite;
  animation: rotate 8s linear infinite;
}

/*PC 下載*/
.pc_game_zone {
  position: absolute;
  width: 50%;
  height: auto;
  padding-bottom: 11%;
  top: 70%;
  left: 25%;
  z-index: 63;
  display: block;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 14.55% 11.7%;
  background-repeat: no-repeat;
  background-size: 567%;
  background-color: rgba(131, 103, 51, 0);

  animation-delay: 1.8s;
}

.pc_game_zone .app_icon {
  position: absolute;
  width: 17%;
  height: auto;
  padding-bottom: 0%;
  top: 11%;
  left: 12%;
  z-index: 64;
  background-color: rgba(131, 103, 51, 0);
  /*顏色標記*/
}

.pc_game_zone .ios_icon {
  position: absolute;
  width: 19%;
  height: auto;
  padding-bottom: 7.8%;
  top: 17%;
  left: 32%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 6.1% 1.8%;
  background-repeat: no-repeat;
  background-size: 2310%;
  background-color: #33835e00;
  /*顏色標記*/

  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.pc_game_zone .ios_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.pc_game_zone .google_play_icon {
  position: absolute;
  width: 19.5%;
  height: auto;
  padding-bottom: 7.8%;
  top: 17%;
  left: 49.5%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 1% 1.8%;
  background-repeat: no-repeat;
  background-size: 2220%;
  background-color: #33835e00;
  /*顏色標記*/

  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.pc_game_zone .google_play_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.pc_game_zone .pc_icon {
  position: absolute;
  width: 19%;
  height: auto;
  padding-bottom: 6.8%;
  top: 51%;
  left: 49.6%;
  z-index: 63;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 11.7% 1.8%;
  background-repeat: no-repeat;
  background-size: 2240%;
  background-color: #33835e00;
  /*顏色標記*/

  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.pc_game_zone .pc_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.pc_game_zone .simu_icon {
  position: absolute;
  width: 19.4%;
  height: auto;
  padding-bottom: 6.8%;
  top: 51%;
  left: 32.3%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 17.13% 1.8%;
  background-repeat: no-repeat;
  background-size: 2263%;
  background-color: #33835e00;
  /*顏色標記*/

  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.pc_game_zone .simu_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.QR_code_box {
  position: absolute;
  width: 18%;
  height: auto;
  padding-bottom: 14.8%;
  top: 16%;
  left: 72%;
  z-index: 64;

  background-color: rgba(51, 126, 131, 0.685);
  /*顏色標記*/
}

.pc_game_zone .QR_code_box .QR_code {
  position: absolute;
  width: 82.9%;
  height: auto;
  padding-bottom: 1%;
  top: 0%;
  left: 0%;
  z-index: 64;

  background-color: rgba(54, 131, 51, 0);
  /*顏色標記*/
}

.pc_game_zone .QR_code_box .QR_word {
  position: absolute;
  width: 18.3%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 83%;
  z-index: 64;

  background-color: rgba(54, 131, 51, 0.685);
  /*顏色標記*/
}

/*ios手機用*/
.ios_phone_use {
  position: absolute;
  width: 50%;
  height: auto;
  padding-bottom: 11%;
  top: 70%;
  left: 25%;
  z-index: 63;
  display: none;
  background-color: rgba(131, 103, 51, 0);
  /*顏色標記*/
}

.ios_phone_use .ios_icon {
  position: absolute;
  width: 36%;
  height: auto;
  padding-bottom: 11.8%;
  top: 23%;
  left: 37%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 6.2% 1.8%;
  background-repeat: no-repeat;
  background-size: 2220%;
  background-color: #33835e00;
  /*顏色標記*/
}

/*安卓手機用*/
.android_use {
  position: absolute;
  width: 50%;
  height: auto;
  padding-bottom: 11%;
  top: 70%;
  left: 25%;
  z-index: 63;
  display: none;
  background-color: rgba(131, 103, 51, 0);
  /*顏色標記*/
}

.android_use .google_play_icon {
  position: absolute;
  width: 36%;
  height: auto;
  padding-bottom: 11.8%;
  top: 23%;
  left: 32%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 1% 1.8%;
  background-repeat: no-repeat;
  background-size: 2220%;
  background-color: #33835e00;
  /*顏色標記*/
}

/*下壓*/
.LV1_down_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  bottom: 0%;
  z-index: 60;
  display: block;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*壓黑*/
.LV1_dark_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  background-color: #000000;
  opacity: 0;
  z-index: 50;
  display: block;
}

/*無背景影片用視差*/
#scene,
.layout {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  display: block;
}

/*影片背景*/
.kv_zone .videoArea {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
}

.kv_zone .videoArea video {
  object-fit: cover;
  object-position: left top;
  height: 100%;
  width: 100%;
}

@media (max-width: 1100px) {
  .kv_zone {
    padding-bottom: 135%;

    background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/kv_tb_250717.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .kv_top_word {
    width: 81%;
    top: 1%;
    left: 9%;
  }

  .KV_logo {
    width: 36%;
    padding-bottom: 12%;
    top: 2%;
    left: 1%;
  }

  .KV_big_slogan {
    width: 90%;
    padding-bottom: 15%;
    top: 74.5%;
    left: 6%;
  }

  .KV_YT_btn {
    width: 12%;
    padding-bottom: 12.9%;
    top: 17%;
    left: 71%;
  }

  /*PC用*/
  .pc_game_zone {
    width: 88%;
    padding-bottom: 21%;
    top: 82%;
    left: 6%;
  }

  /*ios手機用*/
  .ios_phone_use {
    position: absolute;
    width: 91%;
    height: auto;
    padding-bottom: 18%;
    top: 81%;
    left: 5%;
    z-index: 63;
  }

  /*安卓手機用*/
  .android_use {
    position: absolute;
    width: 89%;
    height: auto;
    padding-bottom: 19%;
    top: 80%;
    left: 6%;
    z-index: 63;
  }

  /*無背景影片用視差*/
  #scene,
  .layout {
    display: none;
  }

  /*背景影片*/
  .kv_zone .videoArea video {
    display: none;
    object-position: center top;
  }
}

@media (max-width: 767px) {
  .kv_zone {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 163%;

    background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/kv_sp_250717.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .kv_top_word {
    width: 89%;
    top: 1%;
    left: 4%;
  }

  .KV_logo {
    width: 40%;
    padding-bottom: 19%;
    top: 6%;
    left: 2%;
  }

  .KV_YT_btn {
    width: 20%;
    padding-bottom: 19.9%;
    top: 13%;
    left: 65%;
  }

  .KV_big_slogan {
    width: 100%;
    padding-bottom: 14%;
    top: 66%;
    left: 0%;
    background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/KV_big_slogan_sp_250717.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .ios_phone_use .ios_icon {
    width: 52%;
    padding-bottom: 17.8%;
    top: 11%;
    left: 31%;
    z-index: 62;
  }

  .android_use .google_play_icon {
    width: 52%;
    padding-bottom: 17.8%;
    top: 11%;
    left: 26%;
    z-index: 62;
  }

  .LV1_down_ink {
    width: 368%;
    padding-bottom: 8.4%;
  }

  /*影片背景*/
  .kv_zone .videoArea {
    display: none;
  }


  /*ios手機用*/
  .ios_phone_use {
    width: 91%;
    padding-bottom: 18%;
    top: 78%;
    left: 5%;
  }

  /*安卓手機用*/
  .android_use {
    width: 89%;
    padding-bottom: 19%;
    top: 78%;
    left: 6%;
  }


}

/*--↑主視覺區域↑--*/

/* ==========================
   開服好禮
============================ */
.open_gift_zone {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 69.4%;
  overflow: hidden;
  background-color: #000000;
  display: none;
}

/*下壓*/
.LV2_down_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  top: 0%;
  z-index: 60;
  display: block;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;

  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}

.open_gift_zone>.title_up {
  position: absolute;
  width: 27%;
  height: auto;
  padding-bottom: 9%;
  top: 5%;
  left: 36.5%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 1.9% 30%;
  background-repeat: no-repeat;
  background-size: 1133%;
  background-color: rgba(51, 126, 131, 0);
}

.open_gift_zone>.six_gift_box {
  position: absolute;
  width: 79%;
  height: auto;
  padding-bottom: 19%;
  top: 14%;
  left: 11%;
  z-index: 64;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
}

.open_gift_zone .gift_box_1 {
  position: absolute;
  width: 13%;
  height: auto;
  padding-bottom: 18%;
  top: 7%;
  left: 11%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 2.2% 38%;
  background-repeat: no-repeat;
  background-size: 2693%;
  background-color: rgba(223, 131, 11, 0);
  /*顏色標記*/

  animation: up-down-1 5s ease-in-out infinite;
  -webkit-animation: up-down-1 5s ease-in-out infinite;
}

.open_gift_zone .gift_box_2 {
  position: absolute;
  width: 13%;
  height: auto;
  padding-bottom: 18%;
  top: 7%;
  left: 24%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 6.8% 38%;
  background-repeat: no-repeat;
  background-size: 2693%;
  background-color: rgba(223, 131, 11, 0);
  /*顏色標記*/

  animation: up-down-2 5s ease-in-out infinite;
  -webkit-animation: up-down-2 5s ease-in-out infinite;
}

.open_gift_zone .gift_box_3 {
  position: absolute;
  width: 13%;
  height: auto;
  padding-bottom: 18%;
  top: 7%;
  left: 37%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 11.45% 37.9%;
  background-repeat: no-repeat;
  background-size: 2693%;
  background-color: rgba(223, 131, 11, 0);
  /*顏色標記*/

  animation: up-down-1 5s ease-in-out infinite;
  -webkit-animation: up-down-1 5s ease-in-out infinite;
}

.open_gift_zone .gift_box_4 {
  position: absolute;
  width: 13%;
  height: auto;
  padding-bottom: 18%;
  top: 7%;
  left: 50%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 16.1% 37.9%;
  background-repeat: no-repeat;
  background-size: 2693%;
  background-color: rgba(223, 131, 11, 0);
  /*顏色標記*/

  animation: up-down-2 5s ease-in-out infinite;
  -webkit-animation: up-down-2 5s ease-in-out infinite;
}

.open_gift_zone .gift_box_5 {
  position: absolute;
  width: 13%;
  height: auto;
  padding-bottom: 18%;
  top: 7%;
  left: 63%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 20.7% 37.9%;
  background-repeat: no-repeat;
  background-size: 2693%;
  background-color: rgba(223, 131, 11, 0);
  /*顏色標記*/

  animation: up-down-1 5s ease-in-out infinite;
  -webkit-animation: up-down-1 5s ease-in-out infinite;
}

.open_gift_zone .gift_box_6 {
  position: absolute;
  width: 13%;
  height: auto;
  padding-bottom: 18%;
  top: 7%;
  left: 76%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 25.3% 37.9%;
  background-repeat: no-repeat;
  background-size: 2693%;
  background-color: rgba(223, 131, 11, 0);
  /*顏色標記*/

  animation: up-down-2 5s ease-in-out infinite;
  -webkit-animation: up-down-2 5s ease-in-out infinite;
}

/*--最新更新內容--*/
.open_gift_zone .title_down {
  position: absolute;
  width: 27%;
  height: auto;
  padding-bottom: 9%;
  top: 38%;
  left: 36.5%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 12.7% 30%;
  background-repeat: no-repeat;
  background-size: 1133%;
  background-color: rgba(51, 126, 131, 0);
}

/*更新內容外框*/
.open_gift_zone .msg_box {
  position: absolute;
  width: 59%;
  height: auto;
  padding-bottom: 33%;
  top: 50%;
  left: 19.5%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 3.4% 57.5%;
  background-repeat: no-repeat;
  background-size: 484%;
  background-color: rgba(51, 126, 131, 0);
}

/*更新內容選項_tab*/
.open_gift_zone .msg_tab_btn_zone {
  position: absolute;
  width: 75%;
  height: auto;
  padding-bottom: 7%;
  top: 10%;
  left: 15.5%;
  z-index: 64;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
  display: block;
}

.open_gift_zone .flex_box_tab {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 1%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: rgba(41, 207, 8, 0);
  /*顏色標記*/

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

/*更新內容詳細*/
.open_gift_zone .msg_cont_zone {
  position: absolute;
  width: 84%;
  height: auto;
  padding-bottom: 35%;
  top: 26%;
  left: 10.5%;
  z-index: 64;
  background-color: rgba(175, 88, 37, 0);
  /*顏色標記*/
}

/*tab*/
.ch_inner_tab_3 {
  display: inline-block;
  background-color: #3e09a100;
  /*顏色標記*/
  width: 19.98%;
  height: auto;
  margin-left: 1%;
  margin-right: 1%;
  padding-bottom: 6%;
}

.ch_inner_tab_3:nth-child(1) {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_off_1.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_3:nth-child(2) {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_off_2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  /*pointer-events: none;/*之後有文章就刪除*/
}

.ch_inner_tab_3:nth-child(3) {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_off_3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  /*pointer-events: none;/*之後有文章就刪除*/
}

.ch_inner_tab_3:nth-child(4) {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_off_4.png);
  background-repeat: no-repeat;
  background-size: 100%;
  /*pointer-events: none;/*之後有文章就刪除*/
}

.ch_inner_tab_3:nth-child(1).now3 {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_on_1.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_3:nth-child(2).now3 {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_on_2.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_3:nth-child(3).now3 {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_on_3.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_3:nth-child(4).now3 {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_230706/images/open_gift/mag_btn_on_4.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_3.now3 {}

.click {}

.click img {
  transition: 0.5s ease-in-out;
}

.after {
  /*pointer-events: none;*/
}

.after img {
  -webkit-filter: grayscale(1.3);
  filter: grayscale(1.3);
  transition: 0.5s ease-in-out;
}

.ch_inner_con_3 {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 41%;
  background-color: #0ff06d00;
  /*顏色標記*/
  display: none;
}

.ch_inner_con_3 .point_img {
  position: absolute;
  width: 44%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 2.5%;
  z-index: 65;
  background-color: rgba(175, 88, 37, 0);
  /*顏色標記*/
}

.ch_inner_con_3 .point_text_box {
  position: absolute;
  width: 48%;
  height: auto;
  padding-bottom: 41%;
  top: 0%;
  left: 51.5%;
  z-index: 65;
  background-color: rgba(37, 51, 175, 0);
  /*顏色標記*/
}

.ch_inner_con_3 .point_txt_title {
  position: absolute;
  width: 100%;
  height: 12%;
  top: 5%;
  left: 0%;
  background-color: #a225eb00;
  /*顏色標記*/
}

.ch_inner_con_3 .point_txt_title p {
  color: #cf060f;
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  text-align: center;
  font-size: 1.4vw;
  letter-spacing: 0.5px;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.ch_inner_con_3 .point_txt {
  position: absolute;
  width: 100%;
  height: 67%;
  top: 23%;
  left: 0%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f3679a00;
  /*顏色標記*/
}

.ch_inner_con_3 .point_txt p {
  color: #222121;
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  text-align: left;
  font-size: 1vw;
  letter-spacing: 0.5px;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.ch_inner_con_3.now3 {
  display: block;
}

/*下壓黑大墨*/
.black_ink2 {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  bottom: 0%;
  z-index: 60;
  display: block;
}

.open_gift_zone .gold_ink {
  position: absolute;
  width: 20%;
  height: auto;
  padding-bottom: 0%;
  top: 47%;
  left: -2.5%;
  z-index: 64;
  pointer-events: none;

  background-color: rgba(51, 126, 131, 0);
}

/*壓紋路*/
.open_gift_zone .mosha_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  opacity: 1;
  z-index: 51;
  background: url(https://images3.iwplay.com.tw/image/tlbb/os_main/images/open_gift/mosha.png) repeat;
  display: block;
  pointer-events: none;
}

/*影片背景*/
.open_gift_zone .videoArea {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.open_gift_zone .videoArea video {
  object-fit: cover;
  object-position: left top;
  height: 100%;
  width: 100%;
}

/*.open_gift_zone #fl_ink {
    position: absolute;
    z-index: 50;
    width: 100%;
    height: 100%;
}*/

@media (max-width: 1100px) {
  .open_gift_zone {
    padding-bottom: 135%;
    background-color: rgb(0, 0, 0);
  }

  .open_gift_zone>.title_up {
    width: 43%;
    padding-bottom: 14%;
    top: 5%;
    left: 29.5%;
  }

  .open_gift_zone>.six_gift_box {
    width: 115%;
    padding-bottom: 19%;
    top: 14%;
    left: -7%;
  }

  .open_gift_zone .title_down {
    width: 43%;
    padding-bottom: 14%;
    top: 35%;
    left: 29.5%;
  }

  .open_gift_zone .msg_box {
    width: 95%;
    padding-bottom: 53%;
    top: 45%;
    left: 2.5%;
  }

  .ch_inner_con_3 .point_txt_title p {
    font-size: 2.4vw;
  }

  .ch_inner_con_3 .point_txt p {
    font-size: 1.6vw;
  }

  .open_gift_zone .gold_ink {
    width: 35%;
    top: 18%;
    left: -8.5%;
    z-index: 63;
  }
}

@media (max-width: 767px) {
  .open_gift_zone {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 300%;
    background-color: #000000;
  }

  .open_gift_zone>.title_up {
    width: 62%;
    padding-bottom: 18%;
    top: 4%;
    left: 21.5%;
  }

  .open_gift_zone>.six_gift_box {
    width: 97%;
    padding-bottom: 82%;
    top: 10%;
    left: 1%;
  }

  .open_gift_zone .gift_box_1 {
    width: 30%;
    padding-bottom: 39%;
    top: 0%;
    left: 5%;
  }

  .open_gift_zone .gift_box_2 {
    width: 30%;
    padding-bottom: 39%;
    top: 0%;
    left: 36%;
  }

  .open_gift_zone .gift_box_3 {
    width: 30%;
    padding-bottom: 39%;
    top: 0%;
    left: 67%;
  }

  .open_gift_zone .gift_box_4 {
    width: 30%;
    padding-bottom: 39%;
    top: 45%;
    left: 5%;
  }

  .open_gift_zone .gift_box_5 {
    width: 30%;
    padding-bottom: 39%;
    top: 45%;
    left: 36%;
  }

  .open_gift_zone .gift_box_6 {
    width: 30%;
    padding-bottom: 39%;
    top: 45%;
    left: 67%;
  }

  .open_gift_zone .title_down {
    width: 62%;
    padding-bottom: 18%;
    top: 40%;
    left: 21.5%;
  }

  .open_gift_zone .msg_box {
    width: 94%;
    padding-bottom: 158%;
    top: 46%;
    left: 3.5%;

    background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
    background-position: 28.4% 74.5%;
    background-repeat: no-repeat;
    background-size: 772%;
    background-color: rgba(51, 126, 131, 0);
  }

  .open_gift_zone .msg_cont_zone {
    width: 84%;
    padding-bottom: 116%;
    top: 26%;
    left: 9.5%;
  }

  .open_gift_zone .msg_tab_btn_zone {
    width: 76%;
    padding-bottom: 23%;
    top: 10%;
    left: 13.5%;
  }

  .open_gift_zone .flex_box_tab {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 26%;
    top: 0%;
    left: 0%;
    z-index: 64;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ch_inner_tab_3 {
    width: 35.98%;
    margin-left: 1%;
    margin-right: 1%;
    padding-bottom: 15%;
  }

  .ch_inner_con_3 {
    width: 100%;
    padding-bottom: 138%;
  }

  .ch_inner_con_3 .point_img {
    width: 91%;
    top: 0%;
    left: 4%;
  }

  .ch_inner_con_3 .point_text_box {
    width: 100%;
    padding-bottom: 60%;
    top: 63%;
    left: 0%;
  }

  .ch_inner_con_3 .point_text_box {
    width: 100%;
    padding-bottom: 60%;
    top: 57%;
    left: 0%;
  }

  .ch_inner_con_3 .point_txt_title {
    width: 100%;
    height: 17%;
  }

  .ch_inner_con_3 .point_txt_title p {
    font-size: 4.4vw;
  }

  .ch_inner_con_3 .point_txt {
    width: 89%;
    height: 68%;
    top: 27%;
    left: 5%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ch_inner_con_3 .point_txt p {
    font-size: 3.6vw;
  }
}

/*--↑open_gift_zone↑--*/

/* ==========================
   新聞區
============================ */
.news {
  position: relative;
  width: 100%;
  height: auto;
  background: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/news/pc_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  padding-bottom: 49%;
}

/*上壓*/
.news .up_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 1.6%;
  top: 0%;
  z-index: 66;
  display: block;
  pointer-events: none;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/down_ink.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

.news>.title_up {
  position: absolute;
  width: 27%;
  height: auto;
  padding-bottom: 9%;
  top: 5%;
  left: 36.5%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 22.4% 29.8%;
  background-repeat: no-repeat;
  background-size: 1133%;
  background-color: rgba(51, 126, 131, 0);
}

/*新聞主體*/
.news_contnet {
  position: absolute;
  width: 57%;
  height: auto;
  padding-bottom: 22.8%;
  top: 24%;
  left: 22%;
  z-index: 64;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
}

/*左BN區*/
.news_left_box {
  position: absolute;
  width: 50%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  background-color: rgb(229, 229, 241);
  /*顏色標記*/
  border: 2px #dabfa4 solid;
}

/*右list區*/
.news_right_box {
  position: absolute;
  width: 50%;
  height: auto;
  padding-bottom: 39.7%;
  top: 0%;
  left: 49.8%;
  background: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/news/news_list_down_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  border: 2px #dabfa4 solid;
}

.news_right_box .news_up_zone {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 13.8%;
  top: 0%;
  left: 0%;

  background: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/news/news_list_up_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  border-bottom: 2px #dabfa4 solid;
}

.news_right_box .news_up_zone .more_btn {
  position: absolute;
  width: 25%;
  height: auto;
  padding-bottom: 0%;
  top: 47%;
  left: 73%;
  background-color: #09a13c00;
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.news_right_box .news_up_zone .more_btn:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

/*新聞list*/
.news .news_right_box .news_list_box {
  position: absolute;
  width: 96%;
  height: auto;
  padding-bottom: 1%;
  top: 20.6%;
  left: 2%;
  z-index: 64;
  background-color: rgba(18, 155, 165, 0);
  /*顏色標記*/

  padding-inline-start: 0px;
}

.news .news_list_box .news_list_m {
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  background-color: rgba(255, 255, 255, 0);
  /*顏色標記*/
  border-bottom: 1px solid #dabfa4;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.news .news_list_box .news_list_m:hover {
  background-color: #a89683a6;
  /*顏色標記*/
}

.news .news_list_m a {
  width: 100%;
}

.news .news_list_box .news_list_m .news_title {
  width: 67%;
  height: auto;
  padding-bottom: 0%;
  background-color: rgba(255, 127, 80, 0);

  padding: 2.5% 0;
  color: #f7f0e4;
  font-size: 0.9vw;
  text-align: left;
  float: left;
  letter-spacing: 0;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.news .news_list_box .news_list_m .t_overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0rem !important;
}

.news .news_list_box .news_list_m .news_deta {
  width: 30%;
  height: auto;
  padding-bottom: 0%;
  background-color: rgba(85, 107, 47, 0);

  padding: 2.5% 0;
  padding-right: 2%;
  color: #f7f0e4;
  font-size: 0.9vw;
  letter-spacing: 0;
  text-align: right;
  float: right;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.news .news_list_box .news_list_m .news_deta p {
  margin-bottom: 0rem !important;
}

.news .fb_btn_n {
  position: absolute;
  width: 12%;
  height: auto;
  padding-bottom: 0%;
  top: 72%;
  left: 31%;
  z-index: 65;
  background-color: rgba(18, 155, 165, 0);
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.news .fb_btn_n:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.news .gamer_btn_n {
  position: absolute;
  width: 12%;
  height: auto;
  padding-bottom: 0%;
  top: 72%;
  left: 45%;
  z-index: 65;
  background-color: rgba(18, 155, 165, 0);
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.news .gamer_btn_n:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.news .YT_btn_n {
  position: absolute;
  width: 12%;
  height: auto;
  padding-bottom: 0%;
  top: 72%;
  left: 59%;
  z-index: 65;
  background-color: rgba(18, 155, 165, 0);
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.news .YT_btn_n:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.news .news_sns_bg {
  position: absolute;
  width: 57%;
  height: auto;
  padding-bottom: 0%;
  top: 70.6%;
  left: 22%;
  z-index: 64;
  display: block;
  background-color: rgba(18, 155, 165, 0);
  /*顏色標記*/
}

/*龍*/
.news .news_dragon {
  position: absolute;
  width: 77%;
  height: auto;
  padding-bottom: 0%;
  top: 7.6%;
  left: 8%;
  z-index: 62;
  display: block;
  background-color: rgba(18, 155, 165, 0);
  /*顏色標記*/

  animation: up-down-5 9s ease-in-out infinite;
  -webkit-animation: up-down-5 9s ease-in-out infinite;
}

/*下壓*/
.news .down_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  bottom: 0%;
  z-index: 60;
  display: block;

  background: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

@media (max-width: 1100px) {
  .news {
    padding-bottom: 135%;
    background: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/news/news_tb_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 135%;
    background-color: #000000;
  }

  .news>.title_up {
    width: 47%;
    padding-bottom: 16%;
    top: 1%;
    left: 26.5%;
  }

  .news_contnet {
    width: 61%;
    padding-bottom: 92.8%;
    top: 13%;
    left: 20%;
  }

  .news_left_box {
    width: 100%;
    padding-bottom: 0%;
    top: 0%;
    left: 0%;
    border: 2px #dabfa4 solid;
  }

  .news_right_box {
    width: 100%;
    padding-bottom: 78.7%;
    top: 55%;
    left: 0%;
  }

  .news .news_list_box .news_list_m .news_title {
    font-size: 2vw;
  }

  .news .news_list_box .news_list_m .news_deta {
    font-size: 2vw;
  }

  .news .news_sns_bg {
    display: none;
  }

  .news .fb_btn_n {
    width: 21%;
    padding-bottom: 0%;
    top: 89%;
    left: 15%;
  }

  .news .gamer_btn_n {
    width: 21%;
    padding-bottom: 0%;
    top: 89%;
    left: 39.5%;
  }

  .news .YT_btn_n {
    width: 21%;
    padding-bottom: 0%;
    top: 89%;
    left: 64%;
  }

  /*龍*/
  .news .news_dragon {
    display: none;
  }
}

@media (max-width: 767px) {
  .news {
    position: relative;
    width: 100%;
    height: auto;

    background: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/news/news_sp_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;

    padding-bottom: 222%;
    background-color: #000000;
  }

  .news>.title_up {
    width: 60%;
    padding-bottom: 19%;
    top: 1%;
    left: 20.5%;
  }

  .news_contnet {
    width: 81%;
    padding-bottom: 144.8%;
    top: 11%;
    left: 10%;
  }

  .news_right_box {
    width: 100%;
    padding-bottom: 89.7%;
    top: 49%;
    left: 0%;

    background-size: cover;
  }

  .news_right_box .news_up_zone .more_btn {
    width: 31%;
    padding-bottom: 0%;
    top: 18%;
    left: 67%;
  }

  .news .news_list_box .news_list_m .news_title {
    font-size: 3.4vw;
  }

  .news .news_list_box .news_list_m .news_deta {
    font-size: 3.4vw;
  }

  .news .fb_btn_n {
    width: 37%;
    padding-bottom: 0%;
    top: 78%;
    left: 10%;
  }

  .news .gamer_btn_n {
    width: 37%;
    padding-bottom: 0%;
    top: 78%;
    left: 53.5%;
  }

  .news .YT_btn_n {
    width: 37%;
    padding-bottom: 0%;
    top: 86%;
    left: 33%;
  }

  .news .down_ink {
    width: 296%;
    padding-bottom: 7.4%;
  }
}

/*--↑news↑--*/

/* ==========================
   代言人專區
============================ */
.endorsement {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 50%;
  display: none;

  background-image: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/endorsement/bg_pc.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(0, 0, 0);
}

/*上壓*/
.endorsement .up_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 1.6%;
  top: 0%;
  z-index: 66;
  display: block;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/job/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;

  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}

.endorsement .e_zone_title {
  position: absolute;
  width: 22%;
  height: auto;
  padding-bottom: 0%;
  top: 4%;
  left: 40%;
  z-index: 66;

  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
}

.endorsement .YT_video_pc_zone {
  position: absolute;
  width: 54%;
  height: auto;
  padding-bottom: 11%;
  top: 74%;
  left: 23%;
  z-index: 66;
  display: block;

  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
}

.endorsement .star_sp_box {
  display: none;
}

/*第1個*/
.endorsement .YT_video_pc_zone .scrn_1 {
  position: absolute;
  width: 23%;
  height: auto;
  padding-bottom: 14.3%;
  top: 4%;
  left: 10%;
  z-index: 66;
  cursor: pointer;
  opacity: 0;

  background: url(https://images5.iwplay.com.tw/image/tlbb/os_main/images/endorsement/scrn_1.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgba(226, 21, 199, 0);
  /*顏色標記*/

  transition: transform 0.45s;
  filter: brightness(1);
}

.endorsement .YT_video_pc_zone .scrn_1 .link_point {
  position: absolute;
  width: 39%;
  height: auto;
  padding-bottom: 0%;
  top: 17%;
  left: 33%;
  z-index: 67;
  cursor: pointer;

  transform: scale(1);
  transition: transform 0.45s ease-in-out;
}

.endorsement .YT_video_pc_zone .scrn_1:hover {
  filter: brightness(1.1);
  transition: transform 0.45s;
}

.endorsement .YT_video_pc_zone .scrn_1:hover .link_point {
  transform: scale(1.1);
  transition: transform 0.45s ease-in-out;
}

/*第2個*/
.endorsement .YT_video_pc_zone .scrn_2 {
  position: absolute;
  width: 23%;
  height: auto;
  padding-bottom: 14.3%;
  top: 4%;
  left: 39%;
  z-index: 66;
  cursor: pointer;
  opacity: 0;

  background: url(https://images5.iwplay.com.tw/image/tlbb/os_main/images/endorsement/scrn_2.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgba(226, 21, 199, 0);
  /*顏色標記*/

  transition: transform 0.45s;
  filter: brightness(1);
}

.endorsement .YT_video_pc_zone .scrn_2 .link_point {
  position: absolute;
  width: 39%;
  height: auto;
  padding-bottom: 0%;
  top: 17%;
  left: 33%;
  z-index: 67;
  cursor: pointer;

  transform: scale(1);
  transition: transform 0.45s ease-in-out;
}

.endorsement .YT_video_pc_zone .scrn_2:hover {
  filter: brightness(1.1);
  transition: transform 0.45s;
}

.endorsement .YT_video_pc_zone .scrn_2:hover .link_point {
  transform: scale(1.1);
  transition: transform 0.45s ease-in-out;
}

/*第3個*/
.endorsement .YT_video_pc_zone .scrn_3 {
  position: absolute;
  width: 23%;
  height: auto;
  padding-bottom: 14.3%;
  top: 4%;
  left: 67%;
  z-index: 66;
  cursor: pointer;
  opacity: 0;

  background: url(https://images5.iwplay.com.tw/image/tlbb/os_main/images/endorsement/scrn_3.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgba(226, 21, 199, 0);
  /*顏色標記*/

  transition: transform 0.45s;
  filter: brightness(1);
}

.endorsement .YT_video_pc_zone .scrn_3 .link_point {
  position: absolute;
  width: 39%;
  height: auto;
  padding-bottom: 0%;
  top: 17%;
  left: 33%;
  z-index: 67;
  cursor: pointer;

  transform: scale(1);
  transition: transform 0.45s ease-in-out;
}

.endorsement .YT_video_pc_zone .scrn_3:hover {
  filter: brightness(1.1);
  transition: transform 0.45s;
}

.endorsement .YT_video_pc_zone .scrn_3:hover .link_point {
  transform: scale(1.1);
  transition: transform 0.45s ease-in-out;
}

/*下壓*/
.endorsement .down_ink {
  position: absolute;
  width: 120%;
  height: auto;
  padding-bottom: 2.1%;
  bottom: 0%;
  z-index: 66;
  display: block;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/job/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

@media (max-width: 1100px) {
  .endorsement {
    padding-bottom: 135%;
    background-image: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/endorsement/bg_tb.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  /*上壓*/
  .endorsement .up_ink {
    width: 226%;
    padding-bottom: 3.6%;
    top: 0%;
    left: -67%;
  }

  .endorsement .e_zone_title {
    width: 46%;
    padding-bottom: 0%;
    top: 4%;
    left: 29%;
  }

  .endorsement .YT_video_pc_zone {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 16%;
    top: 82%;
    left: 0%;
  }

  /*下壓*/
  .endorsement .down_ink {
    width: 241%;
    padding-bottom: 4.1%;
    bottom: 0%;
    left: -58%;
  }
}

@media (max-width: 767px) {
  .endorsement {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 190%;
    background-image: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/endorsement/bg_sp.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #000000;
  }

  .endorsement .e_zone_title {
    width: 68%;
    padding-bottom: 0%;
    top: 3%;
    left: 17%;
  }

  .endorsement .YT_video_pc_zone {
    display: none;
  }

  .endorsement .star_sp_box {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 36%;
    top: 80%;
    left: 0%;
    z-index: 66;
    display: block;

    background-color: rgba(51, 126, 131, 0);
    /*顏色標記*/
  }

  .endorsement .game_view {
    position: absolute;
    width: 50%;
    height: auto;
    top: 5%;
    left: 24%;
    margin: 0 auto;
    background-color: rgba(219, 8, 8, 0);
    /*顏色標記*/
    z-index: 65;
  }

  .endorsement .game_view .link_point {
    position: absolute;
    width: 39%;
    height: auto;
    padding-bottom: 0%;
    top: 17%;
    left: 33%;
    z-index: 67;
  }

  /*--左右按鈕--*/
  .endorsement .prev-arrow_3 {
    position: absolute;
    width: 11%;
    height: auto;
    top: 30%;
    left: 9%;
    z-index: 65;
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
  }

  .endorsement .next-arrow_3 {
    position: absolute;
    width: 11%;
    height: auto;
    top: 30%;
    right: 10%;
    z-index: 65;
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
  }
}

/*--↑代言人專區↑--*/

/* ==========================
   門派介紹
============================ */
.job_zone {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 47.6%;

  background-image: url(https://images3.iwplay.com.tw/image/tlbb/os_main/images/job/job_bg_pc.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(0, 0, 0);

  overflow: hidden;
}

/*上壓*/
.job_zone .up_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 1.6%;
  top: 0%;
  z-index: 66;
  display: block;
  pointer-events: none;
  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/job/up_ink.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

.job_zone .job_zone_title {
  position: absolute;
  width: 22%;
  height: auto;
  padding-bottom: 0%;
  top: 2%;
  left: 40%;
  z-index: 66;

  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
}

/*右石頭*/
.job_zone .rock_1 {
  position: absolute;
  width: 28%;
  height: auto;
  padding-bottom: 0%;
  top: 32%;
  left: 77%;
  z-index: 66;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
  display: block;

  animation: up-down-3 9s ease-in-out infinite;
  -webkit-animation: up-down-3 9s ease-in-out infinite;
}

/*左石頭*/
.job_zone .rock_2 {
  position: absolute;
  width: 22%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 66;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
  display: block;

  animation: up-down-4 9s ease-in-out infinite;
  -webkit-animation: up-down-4 9s ease-in-out infinite;
}

/*門派tab*/
.job_zone .job_tab_btn_zone {
  position: absolute;
  width: 51%;
  height: auto;
  padding-bottom: 7%;
  top: 81%;
  left: 25%;
  z-index: 66;
  background-color: rgba(51, 126, 131, 0);
  /*顏色標記*/
  display: block;
}

.job_zone .flex_box_tab {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: rgba(41, 207, 8, 0);
  /*顏色標記*/

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

/*tab*/
.ch_inner_tab_4 {
  display: inline-block;
  background-color: #3e09a100;
  /*顏色標記*/
  width: 9.98%;
  height: auto;
  margin-left: 1%;
  margin-right: 1%;
  padding-bottom: 10%;
}

.ch_inner_tab_4:nth-child(1) {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_1_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(1).now4 {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_1_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(2) {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_2_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(2).now4 {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_2_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(3) {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_3_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(3).now4 {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_3_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(4) {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_4_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(4).now4 {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_4_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(5) {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_5_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(5).now4 {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_5_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(6) {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_6_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(6).now4 {
  background-image: url(https://images2.iwplay.com.tw/image/tlbb/os_main/images/job/job_6_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(7) {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/job/job_7_off.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ch_inner_tab_4:nth-child(7).now4 {
  background-image: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/job/job_7_on.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*--動雲--*/
.move_cloud {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 26%;
  bottom: -4%;
  left: 0%;
  z-index: 65;
  pointer-events: none;
  background-color: rgba(137, 43, 226, 0);
  /*顏色標記*/
  display: block;
}

.clouds_2 {
  position: absolute;
  width: 100%;
  height: 115%;
  bottom: 0%;
  background: transparent url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/fog1.png) repeat top center;
  background-size: 100%;
  z-index: 62;
  pointer-events: none;
  -moz-animation: move-clouds-back 400s linear infinite;
  -ms-animation: move-clouds-back 400s linear infinite;
  -o-animation: move-clouds-back 400s linear infinite;
  -webkit-animation: move-clouds-back 400s linear infinite;
  animation: move-clouds-back 400s linear infinite;
}

/*門派內容*/
.job_zone .job_cont_zone {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 47%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: rgba(175, 88, 37, 0);
  /*顏色標記*/
}

.ch_inner_con_4 {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 47%;
  background-color: #0ff06d00;
  /*顏色標記*/
  display: none;
}

/*逍遙*/
.job_1_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_1_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_1_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.menpi_zone {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 30%;
  top: 0%;
  left: 0%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/
}

.job_1_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_1_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_1_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.word_small_1 {
  position: absolute;
  width: 11.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 19% !important;
  margin-left: 68.4%;
  z-index: 66;
  display: block;
  background-color: #0ff06d00;
  /*顏色標記*/

  color: #fff4db;
  font-family: "Noto Serif TC", serif;
  font-weight: 500;
  text-align: left;
  font-size: 0.8vw;
  letter-spacing: 0.5px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  text-shadow: 0.1em 0.1em 0.8em black;

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.word_small_2 {
  position: absolute;
  width: 11.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 23% !important;
  margin-left: 68.4%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  color: #fff4db;
  font-family: "Noto Serif TC", serif;
  font-weight: 500;
  text-align: left;
  font-size: 0.8vw;
  letter-spacing: 0.5px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  text-shadow: 0.1em 0.1em 0.8em black;

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_1_ch {
  position: absolute;
  width: 69.09%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 5.5%;
  margin-left: 9%;
  z-index: 65;
  background-color: #780ff000;
  /*顏色標記*/
  display: block;

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_1_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

/*武當*/
.job_2_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_2_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_2_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.job_2_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_2_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_2_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.job_2_ch {
  position: absolute;
  width: 73.09%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 4.5%;
  margin-left: 13%;
  z-index: 65;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_2_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

/*峨嵋*/
.job_3_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_3_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_3_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.job_3_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_3_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_3_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.job_3_ch {
  position: absolute;
  width: 70%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 6.5%;
  margin-left: 4%;
  z-index: 65;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_3_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

/*天山*/
.job_4_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_4_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_4_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.job_4_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_4_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_4_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.job_4_ch {
  position: absolute;
  width: 69.06%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 6.5%;
  margin-left: 9%;
  z-index: 65;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_4_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

/*丐幫*/
.job_5_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_5_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_5_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.job_5_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_5_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_5_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.job_5_ch {
  position: absolute;
  width: 69.1%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 4.5%;
  margin-left: 13%;
  z-index: 65;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_5_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

/*無塵*/
.job_6_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_6_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_6_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.job_6_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_6_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_6_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.job_6_ch {
  position: absolute;
  width: 65.3%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 6.5%;
  margin-left: 16%;
  z-index: 65;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_6_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

/*明教*/
.job_7_big_logo {
  position: absolute;
  width: 23.6%;
  height: auto;
  padding-bottom: 23%;
  top: 25%;
  left: 40%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  opacity: 0;

  transition: transform 0.5s;
  filter: brightness(1);

  animation: b_logo2 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.job_7_big_logo>img:nth-child(1) {
  position: absolute;
  animation: fadeIn3 0.3s both;
  z-index: 65;
}

.job_7_big_logo>img:nth-child(2) {
  position: absolute;
  animation: charaBeat 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  z-index: 64;
}

.job_7_title {
  position: absolute;
  width: 11.6%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 11%;
  margin-left: 52%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.7s;
  animation-duration: 0.8s !important;
}

.job_7_word_1 {
  position: absolute;
  width: 12.2%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 8%;
  margin-left: 68%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.1s;
  animation-duration: 0.8s !important;
}

.job_7_word_2 {
  position: absolute;
  width: 9.9%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 28%;
  margin-left: 69%;
  z-index: 66;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 3.5s;
  animation-duration: 0.8s !important;
}

.job_7_ch {
  position: absolute;
  width: 65.03%;
  height: auto;
  padding-bottom: 0%;
  margin-top: 6.5%;
  margin-left: 12%;
  z-index: 65;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2.3s;
  animation-duration: 0.6s !important;
}

.job_7_bg_pc {
  position: absolute;
  width: 74%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 64;
  background-color: #0ff06d00;
  /*顏色標記*/

  animation-delay: 2s;
  animation-duration: 0.6s !important;
}

.ch_inner_tab_4.now4 {}

.click {}

.click img {
  transition: 0.5s ease-in-out;
}

.after {
  /*pointer-events: none;*/
}

.after img {
  -webkit-filter: grayscale(1.3);
  filter: grayscale(1.3);
  transition: 0.5s ease-in-out;
}

.ch_inner_con_4.now4 {
  display: block;
}

/*下壓*/
.job_zone .down_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  bottom: -0.5%;
  z-index: 66;
  display: block;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*壓紋路*/
.job_zone .mosha_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  opacity: 1;
  z-index: 51;
  background: url(https://images3.iwplay.com.tw/image/tlbb/os_main/images/open_gift/mosha.png) repeat;
  display: block;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .job_zone {
    padding-bottom: 135%;
    background-image: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/job/job_bg_tb.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #000000;
  }

  .job_zone .job_zone_title {
    width: 47%;
    padding-bottom: 1%;
    top: 3%;
    left: 28%;
  }

  .job_zone .job_cont_zone {
    width: 100%;
    padding-bottom: 136%;
  }

  .ch_inner_con_4 {
    width: 100%;
    padding-bottom: 135%;
  }

  .job_1_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .job_2_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .job_3_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .job_4_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .job_5_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .job_6_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .job_7_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 25%;
    left: 24%;
  }

  .word_small_1 {
    text-shadow: 0.1em 0.1em 2em black;
  }

  .word_small_2 {
    text-shadow: 0.1em 0.1em 2em black;
  }

  /*動雲*/
  .move_cloud {
    width: 195%;
    padding-bottom: 50%;
  }

  /*逍遙*/
  .job_1_ch {
    width: 154%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: -11%;
    z-index: 65;
  }

  .job_1_title {
    width: 24.6%;
    padding-bottom: 0%;
    margin-top: 13%;
    margin-left: 9%;
  }

  .job_1_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_1_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 71%;
    margin-left: 68%;
  }

  .job_1_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  .word_small_1 {
    width: 26.9%;
    padding-bottom: 0%;
    margin-top: 49% !important;
    margin-left: 67.1% !important;
    z-index: 66;
    font-size: 2.2vw;
  }

  .word_small_2 {
    width: 24.9%;
    padding-bottom: 0%;
    margin-top: 57% !important;
    margin-left: 67.1% !important;
    z-index: 66;

    font-size: 2.2vw;
  }

  .ch_inner_con_4:nth-child(2) .word_small_2 {
    margin-top: 60% !important;
  }

  /*武當*/
  .job_2_ch {
    width: 169%;
    padding-bottom: 0%;
    margin-top: 14%;
    margin-left: -4%;
    z-index: 65;
  }

  .job_2_title {
    width: 24.6%;
    padding-bottom: 0%;
    margin-top: 14%;
    margin-left: 5%;
  }

  .job_2_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_2_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 71%;
    margin-left: 68%;
  }

  .job_2_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  /*峨嵋*/
  .job_3_ch {
    width: 161%;
    padding-bottom: 0%;
    margin-top: 17%;
    margin-left: -36%;
    z-index: 65;
  }

  .job_3_title {
    width: 23.6%;
    padding-bottom: 0%;
    margin-top: 23%;
    margin-left: 5%;
  }

  .job_3_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_3_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 73%;
    margin-left: 68%;
  }

  .job_3_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  /*天山*/
  .job_4_ch {
    width: 148%;
    padding-bottom: 0%;
    margin-top: 23%;
    margin-left: -16%;
  }

  .job_4_title {
    width: 25.6%;
    padding-bottom: 0%;
    margin-top: 13%;
    margin-left: 8%;
  }

  .job_4_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_4_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 73%;
    margin-left: 68%;
  }

  .job_4_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  /*丐幫*/
  .job_5_ch {
    width: 154%;
    padding-bottom: 0%;
    margin-top: 16%;
    margin-left: -4%;
    z-index: 65;
  }

  .job_5_title {
    width: 25.6%;
    padding-bottom: 0%;
    margin-top: 13%;
    margin-left: 6%;
  }

  .job_5_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_5_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 73%;
    margin-left: 68%;
  }

  .job_5_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  /*無塵*/
  .job_6_ch {
    width: 139%;
    padding-bottom: 0%;
    margin-top: 25%;
    margin-left: -3%;
    z-index: 65;
  }

  .job_6_title {
    width: 26.6%;
    padding-bottom: 0%;
    margin-top: 9%;
    margin-left: 7%;
  }

  .job_6_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_6_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 72%;
    margin-left: 68%;
  }

  .job_6_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  /*明教*/
  .job_7_ch {
    width: 150%;
    padding-bottom: 0%;
    margin-top: 21%;
    margin-left: -2%;
    z-index: 65;
  }

  .job_7_title {
    width: 26.6%;
    padding-bottom: 0%;
    margin-top: 9%;
    margin-left: 7%;
  }

  .job_7_word_1 {
    width: 27.2%;
    padding-bottom: 0%;
    margin-top: 24%;
    margin-left: 66%;
  }

  .job_7_word_2 {
    width: 22.9%;
    padding-bottom: 0%;
    margin-top: 75%;
    margin-left: 68%;
  }

  .job_7_bg_pc {
    width: 78%;
    top: -13%;
    left: 0%;
  }

  /*選項*/
  .job_zone .job_tab_btn_zone {
    width: 100%;
    padding-bottom: 7%;
    top: 82%;
    left: 0%;
  }

  /*石頭*/
  .job_zone .rock_1 {
    width: 42%;
    padding-bottom: 0%;
    top: 66%;
    left: 72%;
    display: none;
  }

  /*石頭*/
  .job_zone .rock_2 {
    display: none;
  }
}

@media (max-width: 767px) {
  .job_zone {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 182%;

    background-image: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/job/job_bg_sp.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #000000;
  }

  .job_zone .job_zone_title {
    width: 60%;
    padding-bottom: 19%;
    top: 1%;
    left: 20.5%;
  }

  .job_zone .job_tab_btn_zone {
    width: 100%;
    padding-bottom: 7%;
    top: 86%;
    left: 0%;
  }

  .ch_inner_tab_4 {
    width: 13.98%;
    height: auto;
    margin-left: 1%;
    margin-right: 0%;
    padding-bottom: 14%;
  }

  /*動雲*/
  .move_cloud {
    width: 100%;
    padding-bottom: 80%;
    bottom: -4%;
    left: 0%;
    z-index: 63;
    pointer-events: none;
  }

  .clouds_2 {
    width: 309%;
    height: 115%;
    z-index: 64;
  }

  .menpi_zone {
    padding-bottom: 118%;
  }

  /*過場*/
  .job_1_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  .job_2_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  .job_3_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  .job_4_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  .job_5_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  .job_6_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  .job_7_big_logo {
    position: absolute;
    width: 54.6%;
    height: auto;
    padding-bottom: 56%;
    top: 42%;
    left: 24%;
  }

  /*逍遙*/
  .job_1_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .word_small_1 {
    display: none !important;
  }

  .word_small_2 {
    width: 34.9%;
    margin-top: 94% !important;
    margin-left: 60.1% !important;
    font-size: 3vw;
  }

  .job_1_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_1_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_1_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 117%;
    margin-left: 60%;
  }

  .job_1_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  /*武當*/
  .job_2_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .job_2_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_2_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_2_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 117%;
    margin-left: 60%;
  }

  .ch_inner_con_4:nth-child(2) .word_small_2 {
    margin-top: 94% !important;
  }

  .job_2_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  /*峨嵋*/
  .job_3_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .job_3_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_3_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_3_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 117%;
    margin-left: 60%;
  }

  .job_3_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  /*天山*/
  .job_4_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .job_4_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  .job_4_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_4_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_4_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 117%;
    margin-left: 60%;
  }

  /*丐幫*/
  .job_5_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .job_5_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_5_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_5_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 117%;
    margin-left: 60%;
  }

  .job_5_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  /*無塵*/
  .job_6_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .job_6_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_6_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_6_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 117%;
    margin-left: 60%;
  }

  .job_6_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  /*明教*/
  .job_7_bg_pc {
    width: 100%;
    top: -1%;
    left: 0%;
  }

  .job_7_title {
    width: 29.6%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 65%;
  }

  .job_7_word_1 {
    width: 37.2%;
    padding-bottom: 0%;
    margin-top: 60%;
    margin-left: 59%;
  }

  .job_7_word_2 {
    width: 31.9%;
    padding-bottom: 0%;
    margin-top: 120%;
    margin-left: 60%;
  }

  .job_7_ch {
    width: 87%;
    padding-bottom: 0%;
    margin-top: 20%;
    margin-left: 0%;
    z-index: 65;
  }

  /*下壓*/
  .job_zone .down_ink {
    width: 381%;
    padding-bottom: 9.4%;
    bottom: -0.5%;
    z-index: 63;
  }
}

/*--↑門派介紹↑--*/

/* ==========================
   天龍江湖
============================ */
.game_story_zone {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 36%;
}

/*上壓*/
.game_story_zone .up_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  top: -0.5%;
  z-index: 60;
  display: block;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;

  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}

.game_story_zone .lv6_title {
  position: absolute;
  width: 24%;
  height: auto;
  padding-bottom: 0%;
  top: 5%;
  left: 39%;
  z-index: 64;

  background-color: rgba(51, 126, 131, 0);
}

/*下壓*/
.game_story_zone .down_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  bottom: 0%;
  z-index: 60;
  display: block;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

@media (max-width: 1100px) {
  .game_story_zone {
    padding-bottom: 135%;
    background-color: rgb(0, 0, 0);
  }

  .game_story_zone .lv6_title {
    width: 47%;
    padding-bottom: 1%;
    top: 3%;
    left: 28%;
  }
}

@media (max-width: 767px) {
  .game_story_zone {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 190%;
    background-color: #000000;
  }

  .game_story_zone .lv6_title {
    width: 60%;
    padding-bottom: 19%;
    top: 1%;
    left: 20.5%;
  }

  .game_story_zone .down_ink {
    width: 258%;
    padding-bottom: 5.4%;
  }
}

/*--↑天龍江湖↑--*/

/* ==========================
   商店圖區
============================ */
.game_info {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 45%;
  background-color: #000000;
}

/*上壓*/
.game_info .down_ink {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 2.4%;
  top: 0%;
  z-index: 60;
  display: block;
  pointer-events: none;

  background: url(https://images4.iwplay.com.tw/image/tlbb/os_main/images/open_gift/down_ink.png);
  background-repeat: no-repeat;
  background-size: 100%;

  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}

/*標題*/
.game_info .title_up {
  position: absolute;
  width: 27%;
  height: auto;
  padding-bottom: 9%;
  top: 5%;
  left: 36.5%;
  z-index: 64;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 18.9% 21.5%;
  background-repeat: no-repeat;
  background-size: 1133%;
  background-color: rgba(51, 126, 131, 0);
}

/*輪播框*/
.game_info .bs_slider_box {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  top: 26.5%;
  left: 0%;
  z-index: 65;
  background-color: rgba(0, 174, 255, 0);
  /*顏色標記*/
}

.game_info .bs_slider_box .swiper-slide {
  margin-top: 0.5rem;
  text-align: center;
  /* Center slide text vertically*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition-property: all;
}

.game_info .bs_slider_box .swiper-slide.swiper-slide-active {
  margin-top: 0;
  text-align: center;
  /* Center slide text vertically*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition-property: all;
}

.game_info .bs_slider_box img {
  width: 100%;
}

/*影片用*/
.game_info .bs_slider_box a {
  width: 100%;
}

.game_info .war-next,
.war-prev {
  position: absolute !important;
  top: 46% !important;
  outline: none;
  width: 4% !important;
  height: 18% !important;
  background-color: rgba(0, 255, 255, 0) !important;
  display: block;
}

.game_info .war-next {
  right: 0% !important;
  background: url("https://images1.iwplay.com.tw/image/tlbb/os_main/images/game_info/next_arr.png") no-repeat;
  background-size: 100%;
}

.game_info .war-prev {
  left: 0% !important;
  background: url("https://images1.iwplay.com.tw/image/tlbb/os_main/images/game_info/prev_arr.png") no-repeat;
  background-size: 100%;
}

.game_info .swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "" !important;
}

.game_info .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "" !important;
}

.game_info .swiper-button-prev,
.game_info .swiper-button-next {
  color: rgba(255, 255, 255, 0.425);
  height: auto;
  transition: all 0.6s ease;
  opacity: 0;
  display: block;
}

.game_info .swiper-button-prev {
  transform: translateX(15vw);
}

.game_info .swiper-button-next {
  transform: translateX(-15vw);
}

.game_info .swiper-container:hover .swiper-button-prev,
.game_info .swiper-container:hover .swiper-button-next {
  color: #fff;
  transform: translateX(20vw);
  opacity: 1;
  visibility: visible;
}

.game_info .swiper-container:hover .swiper-button-next {
  transform: translateX(-20vw);
}

/*dots*/

.game_info .f_pagination {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 92%;
  transform: translateX(-50%) !important;
  background-color: rgba(8, 219, 57, 0);
  /*顏色標記*/
}

.game_info .f_pagination .swiper-pagination-bullet,
.game_info .f_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  cursor: pointer;
  height: 25px;
  margin: 0 5px;
  width: 25px;
  background: none;
  opacity: 1;
}

.game_info .f_pagination .swiper-pagination-bullet {
  background-image: url("https://images1.iwplay.com.tw/image/tlbb/os_main/images/game_info/dote_1.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.game_info .f_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-image: url("https://images1.iwplay.com.tw/image/tlbb/os_main/images/game_info/dote_2.png");
  background-repeat: no-repeat;
  background-size: contain;
}

/*壓紋路*/
.game_info .mosha_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  opacity: 1;
  z-index: 51;
  background: url(https://images3.iwplay.com.tw/image/tlbb/os_main/images/open_gift/mosha.png) repeat;
  display: block;
  pointer-events: none;
}

/*影片背景*/
.game_info .videoArea {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
}

.game_info .videoArea video {
  object-fit: cover;
  object-position: left top;
  height: 100%;
  width: 100%;
}

@media (max-width: 1100px) {
  .game_info {
    padding-bottom: 92%;
    background-color: rgb(0, 0, 0);
  }

  /*標題*/
  .game_info .title_up {
    width: 50%;
    padding-bottom: 22%;
    top: 3%;
    left: 26%;
  }

  .game_info .f_pagination .swiper-pagination-bullet,
  .game_info .f_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    cursor: pointer;
    height: 3em;
    margin: 0px 7px;
    width: 3%;
    /*background: none;*/
    opacity: 1;
  }

  .game_info .war-next,
  .war-prev {
    display: none;
  }

  .game_info .swiper-button-prev,
  .game_info .swiper-button-next {
    display: none;
  }
}

@media (max-width: 767px) {
  .game_info {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 105%;
    background-color: #000000;
  }

  .game_info .title_up {
    width: 60%;
    padding-bottom: 19%;
    top: 4%;
    left: 20.5%;
  }

  .game_info .war-next,
  .war-prev {
    display: none;
  }

  .game_info .f_pagination {
    top: 87%;
  }

  .game_info .f_pagination .swiper-pagination-bullet,
  .game_info .f_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    cursor: pointer;
    height: 1em;
    margin: 0px 0.5%;
    width: 6%;
    /* background: none; */
    opacity: 1;
  }
}

/*--↑game_info↑--*/

/*--↓app_info_down↓--*/
.app_info_down {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 13.7%;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/app_info_down_pc_bg.webp) no-repeat;
  background-size: 100%;
}

/*icon*/
.app_info_down .app_icon {
  position: absolute;
  width: 10%;
  height: auto;
  padding-bottom: 0%;
  top: 15%;
  left: 22.5%;
  z-index: 62;
}

/*遊戲標題*/
.app_info_down .game_title {
  position: absolute;
  width: 25.7%;
  height: auto;
  padding-bottom: 0%;
  top: 23%;
  left: 33.5%;
  z-index: 62;
  background-color: #44338300;
  /*顏色標記*/
}

.app_info_down .game_title p {
  font-family: "Noto Serif TC", serif;
  font-weight: 800;
  color: #ffffff;
  font-size: 1.4vw;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

/*遊戲需求*/
.app_info_down .app_word {
  position: absolute;
  width: 25.7%;
  height: auto;
  padding-bottom: 0%;
  top: 44%;
  left: 33.5%;
  z-index: 62;
  background-color: #44338300;
  /*顏色標記*/
}

.app_info_down .app_word p {
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  color: #f6d9bb;
  font-size: 0.8vw;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

/*平台icon*/
.app_info_down .store_icon_zone {
  position: absolute;
  width: 21.1%;
  height: auto;
  padding-bottom: 3.4%;
  top: 27%;
  left: 56.2%;
  z-index: 62;
  background-color: #44338300;
  /*顏色標記*/
}

.app_info_down .store_icon_zone .ios_icon {
  position: absolute;
  width: 46%;
  height: auto;
  padding-bottom: 15%;
  top: 0%;
  left: 7%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 6.2% 1.8%;
  background-repeat: no-repeat;
  background-size: 2220%;
  background-color: #33835e00;
  /*顏色標記*/

  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.app_info_down .store_icon_zone .ios_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.app_info_down .store_icon_zone .google_play_icon {
  position: absolute;
  width: 46%;
  height: auto;
  padding-bottom: 15%;
  top: 0%;
  left: 49%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 1% 1.8%;
  background-repeat: no-repeat;
  background-size: 2220%;
  background-color: #33835e00;
  /*顏色標記*/

  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.app_info_down .store_icon_zone .google_play_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

.app_info_down .h24_cs_icon {
  position: absolute;
  width: 18.7%;
  height: auto;
  padding-bottom: 3.5%;
  top: 53%;
  left: 57.5%;
  z-index: 62;
  cursor: pointer;

  background: url(https://images1.iwplay.com.tw/image/tlbb/os_main/images/bg_img_1.webp);
  background-position: 1% 5.8%;
  background-repeat: no-repeat;
  background-size: 1192%;
  background-color: #33835e00;
  /*顏色標記*/
  transition: 0.2s;
  transform: scale(1);
  filter: brightness(1);
}

.app_info_down .h24_cs_icon:hover {
  transition: 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(1.06);
  filter: brightness(1.2);
}

@media (max-width: 1100px) {
  .app_info_down {
    padding-bottom: 35%;
    background: url(https://images5.iwplay.com.tw/image/tlbb/os_main/images/app_info_down_tb_bg.webp) no-repeat;
    background-size: 100%;
    background-color: rgb(0, 0, 0);
  }

  .app_info_down .app_icon {
    width: 19%;
    padding-bottom: 0%;
    top: 25%;
    left: 5.5%;
  }

  .app_info_down .store_icon_zone {
    width: 36.7%;
    padding-bottom: 6%;
    top: 36%;
    left: 59%;
  }

  .app_info_down .h24_cs_icon {
    width: 32.9%;
    padding-bottom: 6%;
    top: 56%;
    left: 61%;
  }

  .app_info_down .game_title {
    width: 25.7%;
    padding-bottom: 0%;
    top: 24%;
    left: 26.5%;
  }

  .app_info_down .game_title p {
    font-size: 2.6vw;
  }

  .app_info_down .app_word {
    width: 28.7%;
    padding-bottom: 0%;
    top: 39%;
    left: 27.3%;
  }

  .app_info_down .app_word p {
    font-size: 1.8vw;
  }
}

@media (max-width: 767px) {
  .app_info_down {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 112%;

    background: url(https://images5.iwplay.com.tw/image/tlbb/os_main/images/app_info_down_sp_bg.webp) no-repeat;
    background-size: cover;
    background-color: #000000;
  }

  .app_info_down .app_icon {
    width: 36%;
    top: 6%;
    left: 31%;
  }

  .app_info_down .game_title {
    width: 46.7%;
    padding-bottom: 0%;
    top: 40%;
    left: 27%;
  }

  .app_info_down .game_title p {
    font-size: 5.8vw;
    text-align: center;
  }

  .app_info_down .app_word {
    width: 86.7%;
    padding-bottom: 0%;
    top: 50%;
    left: 7.3%;
  }

  .app_info_down .app_word p {
    font-size: 3.2vw;
    text-align: center;
  }

  .app_info_down .store_icon_zone {
    width: 78.7%;
    padding-bottom: 12%;
    top: 68%;
    left: 11.1%;
  }

  .app_info_down .h24_cs_icon {
    width: 69.9%;
    padding-bottom: 13%;
    top: 80%;
    left: 16%;
  }
}

/*--↑app_info_down↑--*/

/*--↓footer↓--*/
footer {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

footer p,
footer ul {
  opacity: 1;
}

.footer .company>img {
  width: 122px;
  height: auto;
}

@media (max-width: 1100px) {
  footer {
    padding-bottom: 1%;
  }
}

/*--↑footer↑--*/