@charset "utf-8";

@import url("../css/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(../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(../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(../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(../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(../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(../images/kv_pc_251023.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(../images/logo_gd.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(../images/KV_big_slogan_251023.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: -25%;
    z-index: 64;

    background: url(../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: 0%;
    z-index: 63;

    background: url(../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(../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(../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(../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(../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(../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(../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(../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(../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(../images/kv_tb_251023.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: 53%;
        left: 45%;
    }

    /*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(../images/kv_sp_251023.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: 64%;
    }

    .KV_big_slogan {
        width: 100%;
        padding-bottom: 14%;
        top: 71%;
        left: 0%;
        background: url(../images/KV_big_slogan_sp_251023.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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../images/open_gift/down_ink.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

@media (max-width: 1100px) {
    .news {
        padding-bottom: 135%;
        background: url(../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(../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(../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(../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(../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(../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(../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(../images/job/down_ink.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

@media (max-width: 1100px) {
    .endorsement {
        padding-bottom: 135%;
        background-image: url(../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(../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(../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(../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(../images/job/job_1_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(1).now4 {
    background-image: url(../images/job/job_1_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(2) {
    background-image: url(../images/job/job_2_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(2).now4 {
    background-image: url(../images/job/job_2_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(3) {
    background-image: url(../images/job/job_3_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(3).now4 {
    background-image: url(../images/job/job_3_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(4) {
    background-image: url(../images/job/job_4_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(4).now4 {
    background-image: url(../images/job/job_4_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(5) {
    background-image: url(../images/job/job_5_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(5).now4 {
    background-image: url(../images/job/job_5_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(6) {
    background-image: url(../images/job/job_6_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(6).now4 {
    background-image: url(../images/job/job_6_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(7) {
    background-image: url(../images/job/job_7_off.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.ch_inner_tab_4:nth-child(7).now4 {
    background-image: url(../images/job/job_7_on.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.ch_inner_tab_4:nth-child(8) {
    background-image: url(../images/job/job_8_off.webp);
    background-repeat: no-repeat;
    background-size: 100%;
}
.ch_inner_tab_4:nth-child(8).now4 {
    background-image: url(../images/job/job_8_on.png);
}

.ch_inner_tab_4:nth-child(9) {
    background-image: url(../images/job/job_9_off.webp);
    background-repeat: no-repeat;
    background-size: 100%;
}
.ch_inner_tab_4:nth-child(9).now4 {
    background-image: url(../images/job/job_9_on.webp);
}

/*--動雲--*/
.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(../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: 10px;
    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: 10px;
    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;
}
/*========================
    PHÁI 8
=========================*/
.job_8_big_logo {
    position: absolute;
    width: 23.6%;
    padding-bottom: 23%;
    top: 25%;
    left: 40%;
    z-index: 66;
    opacity: 0;
    animation: b_logo2 1.6s cubic-bezier(0.23,1,0.32,1) both;
}
.job_8_big_logo > img:nth-child(1) {
    position: absolute;
    animation: fadeIn3 0.3s both;
    z-index: 65;
}
.job_8_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_8_title {
    position: absolute;
    width: 11.6%;
    margin-top: 11%;
    margin-left: 52%;
    z-index: 66;
    animation-delay: 2.7s;
}

.job_8_word_1 {
    position: absolute;
    width: 12.2%;
    margin-top: 8%;
    margin-left: 68%;
    z-index: 66;
    animation-delay: 3.1s;
}

.job_8_word_2 {
    position: absolute;
    width: 9.9%;
    margin-top: 28%;
    margin-left: 69%;
    z-index: 66;
    animation-delay: 3.5s;
}

.job_8_ch {
    position: absolute;
    width: 70%;
    margin-top: 6%;
    margin-left: 8%;
    z-index: 65;
    animation-delay: 2.3s;
}

.job_8_bg_pc {
    position: absolute;
    width: 74%;
    top: 0%;
    left: 0%;
    z-index: 64;
    animation-delay: 2s;
}
/*========================
    PHÁI 9
=========================*/
.job_9_big_logo {
    position: absolute;
    width: 23.6%;
    padding-bottom: 23%;
    top: 25%;
    left: 40%;
    z-index: 66;
    opacity: 0;
    animation: b_logo2 1.6s cubic-bezier(0.23,1,0.32,1) both;
}
.job_9_big_logo > img:nth-child(1) {
    position: absolute;
    animation: fadeIn3 0.3s both;
    z-index: 65;
}
.job_9_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_9_title {
    position: absolute;
    width: 11.6%;
    margin-top: 11%;
    margin-left: 52%;
    z-index: 66;
    animation-delay: 2.7s;
}

.job_9_word_1 {
    position: absolute;
    width: 12.2%;
    margin-top: 8%;
    margin-left: 68%;
    z-index: 66;
    animation-delay: 3.1s;
}

.job_9_word_2 {
    position: absolute;
    width: 9.9%;
    margin-top: 28%;
    margin-left: 69%;
    z-index: 66;
    animation-delay: 3.5s;
}

.job_9_ch {
    position: absolute;
    width: 70%;
    margin-top: 6%;
    margin-left: 8%;
    z-index: 65;
    animation-delay: 2.3s;
}

.job_9_bg_pc {
    position: absolute;
    width: 74%;
    top: 0%;
    left: 0%;
    z-index: 64;
    animation-delay: 2s;
}

.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(../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(../images/open_gift/mosha.png) repeat;
    display: block;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .job_zone {
        padding-bottom: 135%;
        background-image: url(../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(../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(../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(../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(../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(../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("../images/game_info/next_arr.png") no-repeat;
    background-size: 100%;
}

.game_info .war-prev {
    left: 0% !important;
    background: url("../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("../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("../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(../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(../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(../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(../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(../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(../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(../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↑--*/