@charset "utf-8";

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

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

a {
    text-decoration: none !important;
}




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

::-webkit-scrollbar-thumb {
    background-color: #d10003;
    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: #d10003;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}

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

::-webkit-scrollbar-track {
    background-color: #19181e;
}

/* 細捲軸結束 */





html,
body {
    padding: 0;
    margin: 0;

    background-color: black !important;
}

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

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

.display_none {
    display: none;
}

/*禁止滑動*/
.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}



/*--大背景--*/
.wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 0%;
    overflow: hidden;

    background-color: #000000;
}




/*--↓主視覺區域↓--*/
.kv_zone {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 48%;
    background-color: rgb(0, 0, 0);

    background-image: url(https://images2.iwplay.com.tw/image/zxsj/events/landingpage_0710/image/pc_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
}


/*----logo----*/
.big_logo {
    position: absolute;
    width: 8vw;
    height: auto;
    padding-bottom: 0%;
    top: 2%;
    left: 1%;

    z-index: 65;

    cursor: pointer;
}



/*----上英文----*/
.top_eng {
    position: absolute;
    width: 40vw;
    height: auto;
    padding-bottom: 0%;
    top: 4%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 65;
    pointer-events: none;
}




/*----sns----*/
.snslink {
    position: absolute;
    width: 18%;
    height: auto;
    padding-bottom: 4%;
    top: 3%;
    right: 0%;

    z-index: 65;

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

.snslink .fb_btn {
    position: absolute;
    width: 18%;
    height: auto;
    padding-bottom: 0%;
    top: 5%;
    left: 1%;
    z-index: 5;
    cursor: pointer;
}

.snslink .youtube_btn {
    position: absolute;
    width: 18%;
    height: auto;
    padding-bottom: 0%;
    top: 5%;
    left: 24%;
    z-index: 5;
    cursor: pointer;
}


.snslink .discord_btn {
    position: absolute;
    width: 18%;
    height: auto;
    padding-bottom: 0%;
    top: 5%;
    left: 48%;
    z-index: 5;
    cursor: pointer;
}


.snslink .fb_group_btn {
    position: absolute;
    width: 18%;
    height: auto;
    padding-bottom: 0%;
    top: 5%;
    left: 71%;
    z-index: 5;
    cursor: pointer;
}


/*---- 大標 ----*/
.pc_big_title {
    position: absolute;
    width: 46vw;
    height: auto;
    padding-bottom: 24%;
    top: 20%;
    left: 4%;
    z-index: 5;
    pointer-events: none;

    background-image: url(https://images2.iwplay.com.tw/image/zxsj/events/landingpage_0710/image/big_title_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
}



/*---- 下載_btn ----*/
.download_b {
    position: absolute;
    width: 16vw;
    height: auto;
    padding-bottom: 3.6%;
    top: 68%;
    left: 19%;
    z-index: 60;
    cursor: pointer;

    animation: join_br00 1.2s ease-in infinite forwards;

    background-image: url(https://images2.iwplay.com.tw/image/zxsj/events/landingpage_0710/image/download_btn.webp);

    background-repeat: no-repeat;
    background-size: 100%;
}


.download_b span {
    position: absolute;
    width: 100%;
    height: 100%;

    border-radius: 6%;
    display: inline;
    overflow: hidden;
    pointer-events: none;
}

.download_b span .effect {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, transparent, rgba(255, 255, 255, 0.4), transparent, transparent);
    transition: all 650ms;

    -webkit-animation: sg 2s linear infinite;
    -moz-animation: sg 2s linear infinite;
    -ms-animation: sg 2s linear infinite;
    animation: sg 2s linear infinite;
    pointer-events: none;
}



/*---- 人物 ----*/
.ch_tachi_box {
    position: absolute;
    width: 65%;
    height: auto;
    padding-bottom: 44%;
    top: 5%;
    right: 1%;
    z-index: 4;
    display: block;
    pointer-events: none;

    background-color: #d1000300;
    /*顏色標記*/
}

.ch_tachi_box .kv_ch_1 {
    position: absolute;
    width: 59%;
    height: auto;
    padding-bottom: 0%;
    top: 19%;
    left: 20.5%;
    z-index: 32;

    animation-duration: 0.5s;
    animation-delay: 0.2s;
}

.ch_tachi_box .kv_ch_1 img {
    animation: fly3 13s ease-in-out infinite;
}

.ch_tachi_box .kv_ch_2 {
    position: absolute;
    width: 52%;
    height: auto;
    padding-bottom: 0%;
    top: 28%;
    left: 50.5%;
    z-index: 33;

    animation-duration: 0.5s;
    animation-delay: 0.4s;
}

.ch_tachi_box .kv_ch_2 img {
    animation: fly4 16s ease-in-out infinite;
}

.ch_tachi_box .kv_ch_3 {
    position: absolute;
    width: 20%;
    height: auto;
    padding-bottom: 0%;
    top: 31%;
    left: 66%;
    z-index: 31;

    animation-duration: 0.5s;
    animation-delay: 0.6s;
}

.ch_tachi_box .kv_ch_3 img {
    animation: fly5 16s ease-in-out infinite;
}

.ch_tachi_box .kv_ch_4 {
    position: absolute;
    width: 19.5%;
    height: auto;
    padding-bottom: 0%;
    top: 49%;
    left: 5.5%;
    z-index: 25;

    animation-duration: 0.5s;
    animation-delay: 0.8s;
}

.ch_tachi_box .kv_ch_4 img {
    animation: fly5 16s ease-in-out infinite;
}

.ch_tachi_box .kv_ch_5 {
    position: absolute;
    width: 14.4%;
    height: auto;
    padding-bottom: 0%;
    top: 14.2%;
    left: 27.5%;
    z-index: 24;

    animation-duration: 0.5s;
    animation-delay: 1s;
}

.ch_tachi_box .kv_ch_5 img {
    animation: fly2 9s ease-in-out infinite;
}

.ch_tachi_box .kv_ch_6 {
    position: absolute;
    width: 20.4%;
    height: auto;
    padding-bottom: 0%;
    top: 1.2%;
    left: 54.5%;
    z-index: 24;

    animation-duration: 0.5s;
    animation-delay: 1.2s;
}

.ch_tachi_box .kv_ch_6 img {
    animation: fly1 6s ease-in-out infinite;
}








/*---- 浮水印 ----*/
.flex_box {
    position: absolute;
    width: 21%;
    height: auto;
    padding-bottom: 16%;
    bottom: 0%;
    right: 0%;
    z-index: 30;
    display: block;

    background-color: #d1000300;
    /*顏色標記*/
}


.flex_box .flex_slider {
    position: absolute;
    width: 74%;
    height: auto;
    padding-bottom: 0%;
    top: 0%;
    right: 2%;
    z-index: 32;
}


.flex_box .flex_bg_pc {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 76.5%;
    top: 0%;
    right: 0%;
    z-index: 30;
    pointer-events: none;

    background-image: url(https://images4.iwplay.com.tw/image/zxsj/events/landingpage_0616/image/flex/flex_bg_pc.webp);
    background-repeat: no-repeat;
    background-size: 100%;
}




/*---- pc_icon ----*/
.pc_icon {
    position: absolute;
    width: 3%;
    height: auto;
    padding-bottom: 0%;
    bottom: 0%;
    left: 0%;
    z-index: 5;
    pointer-events: none;
}





/*---- 動雲 ----*/
.kv_zone .move_cloud {
    -webkit-mask-image: url(https://images1.iwplay.com.tw/image/zxsj/main/image/loadding/cloud_mask.webp);
    mask-image: url(https://images1.iwplay.com.tw/image/zxsj/main/image/loadding/cloud_mask.webp);
    -webkit-ask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;

    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 24%;
    bottom: -4%;
    left: 0%;
    z-index: 2;
    opacity: 0.5;

    pointer-events: none;
    background-color: rgba(137, 43, 226, 0);
    /*顏色標記*/
    display: block;
}

.kv_zone .clouds_2 {
    position: absolute;
    width: 100%;
    height: 115%;
    bottom: 0%;
    background: transparent url(https://images1.iwplay.com.tw/image/zxsj/main/image/loadding/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;
}






/*---- 火焰 ----*/
.kv_zone .fire_bg,
.kv_zone .fire_bg video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;

    overflow: hidden;
    z-index: 3;
    display: block;
    pointer-events: none;

    mix-blend-mode: screen;
    opacity: 0.6;
}

.kv_zone .fire_bg video {
    object-fit: cover;
}






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

        background-image: url(https://images2.iwplay.com.tw/image/zxsj/events/landingpage_0710/image/sp_bg.webp);
        background-repeat: no-repeat;
        background-size: 100%;
    }



    /*--LOGO--*/
    .big_logo {
        width: 23vw;
        top: 2%;
        left: 1%;
    }


    /*--SNS--*/
    .snslink {
        width: 51%;
        padding-bottom: 10%;
        top: 3%;
        right: 0%;
    }


    /*--上英文--*/
    .top_eng {
        display: none;
    }



    /*--人物--*/
    .ch_tachi_box {
        width: 100%;
        padding-bottom: 106%;
        top: 37%;
        right: 0%;
        overflow: hidden;
    }

    .ch_tachi_box .kv_ch_1 {
        width: 105%;
        top: 13%;
        left: -1.5%;
    }

    .ch_tachi_box .kv_ch_2 {
        width: 93%;
        top: 20%;
        left: 50.5%;
    }

    .ch_tachi_box .kv_ch_3 {
        width: 34%;
        top: 27%;
        left: 75%;
    }

    .ch_tachi_box .kv_ch_4 {
        width: 37.5%;
        top: 31%;
        left: -13.5%;
    }

    .ch_tachi_box .kv_ch_5 {
        width: 37.4%;
        top: 2.2%;
        left: 12.5%;
    }

    .ch_tachi_box .kv_ch_6 {
        width: 44.4%;
        top: -3.8%;
        left: 52.5%;
    }




    /*---- 大標 ----*/
    .pc_big_title {
        width: 100vw;
        padding-bottom: 52%;
        top: 15%;
        left: 0%;

        background-image: url(https://images2.iwplay.com.tw/image/zxsj/events/landingpage_0710/image/big_title_bg_sp.webp);
        background-repeat: no-repeat;
        background-size: 100%;
    }



    /*--下載btn--*/
    .download_b {
        width: 49vw;
        padding-bottom: 11%;
        top: 77%;
        left: 26%;
    }


    /*--火焰--*/
    .fire_bg {
        display: none;
    }


    /*---- 浮水印 ----*/
    .flex_box {
        display: none;
    }


    .pc_icon {
        width: 10%;
    }


}


/*@media (max-width:767px) {
    .kv_zone {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: 148.5%;
        background-color: rgb(45, 226, 21);
    }
}*/

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







/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            footer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/

/*---- footer ----*/
footer {
    position: relative;
    color: #2f2f2f;
    /*font-size: 0.4vw !important;*/
    font-weight: 500;
    background: #000000;
    z-index: 5;
}

footer .container {
    position: relative;
    padding: 0.6vw 0;
    max-width: 100% !important;
    width: 100%;
    text-align: center;
}

footer .container .copyright,
footer .container .copyright .company,
footer .container .copyright p,
footer .container .grading,
footer .container .grading img,
footer .container .grading ul,
footer .container .copyright .icon {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
    font-size: .6rem;
}

footer .container .copyright img {
    width: 7.5vw;
}

footer .container .copyright a img {
    margin-left: 0.4vw;
    width: 5.782vw;
}

footer .container .copyright p {
    margin-left: 0.6vw;
    text-align: left;
    color: #fff;
}

footer .container .copyright p a {
    color: #fff;
}

footer .container .copyright p a:hover {
    text-decoration: underline;
}

footer .container .grading {
    margin-left: 1vw;
}

footer .container .grading img {
    width: 1.9795vw;
}

footer .container .grading ul {
    margin-left: 0.4vw;
    padding-left: 0;
    list-style: none;
    color: #fff;
}

footer .container .icon img {
    width: 2.5vw;
    margin: 0 6px;
}


@media (max-width: 1199.98px) {

    footer {
        padding: 3vw 0;
        font-size: 1vw;
        min-height: initial !important;
    }

    footer .container .copyright .company,
    footer .container .grading {
        display: block;
    }

    footer .container .copyright img {
        width: 12.011vw;
    }

    footer .container .copyright a img {
        margin-left: 1vw;
        width: 9.258vw;
    }

    footer .container .copyright p {
        margin: 1.5vw auto;
        text-align: center;
    }

    footer .container .grading img {
        width: 3.17vw;
    }
}



@media (max-width: 991.98px) {

    footer {
        font-size: 1.3vw;
    }

    footer .container .copyright img {
        width: 14.531vw;
    }

    footer .container .copyright a img {
        width: 11.202vw;
    }

    footer .container .grading img {
        width: 3.835vw;
    }
}



@media (max-width: 767px) {
    footer {
        font-size: 1.7vw;
    }

    footer .container .copyright img {
        width: 18.775vw;
    }

    footer .container .copyright a img {
        width: 14.474vw;
    }

    footer .container .grading img {
        width: 4.955vw;
    }
}



@media (max-width: 575.98px) {
    footer {
        padding: 6vw 0;
        font-size: 2vw;
    }

    footer .container .copyright img {
        width: 25.045vw;
    }

    footer .container .icon img {
        width: 13.5vw !important;
        margin: 11% 0px;
    }

    footer .container .copyright a img {
        width: 19.305vw;
    }

    footer .container .copyright p {
        margin: 2.5vw auto;
    }

    footer .container .grading img {
        width: 6.61vw;
    }

    footer .container .grading ul {
        margin-left: 1vw;
    }
}



@media (max-width: 430px) {
    footer {
        font-size: 2.7vw;
    }

    footer .container .copyright img {
        width: 33.49vw;
    }

    footer .container .copyright a img {
        width: 25.815vw;
    }

    footer .container .copyright p {
        margin: 3vw auto;
    }

    footer .container .grading img {
        width: 8.84vw;
    }
}