@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: #6f93cd;
    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://images1.iwplay.com.tw/image/zxsj/events/landingpage_0815/image/pc_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    /* filter: brightness(0.5); */
}


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

    z-index: 65;

    cursor: pointer;
}


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

    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: 22%;
    z-index: 5;
    cursor: pointer;
}


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


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


/*---- 大標 ----*/
.pc_big_title {
    position: absolute;
    width: 48vw;
    height: auto;
    padding-bottom: 15%;
    top: 55%;
    right: 47.5%;
    z-index: 25;
    pointer-events: none;

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

    .slogan {
        position: absolute;
        width: 40%;
        height: auto;
        padding-bottom: 10%;
        top: 1%;
        right: 30%;
        z-index: 30;
        pointer-events: none;

        display: block;
    }

    .slogan_sp {
        display: none;
    }

/* 前排人物  */
.chara_eff{
    position: absolute;
    width: 60%;
    height: auto;
    padding-bottom: 54%;
    top: 1%;
    right: 26%;
    z-index: 20;
    background-color: rgba(207, 19, 19, 0);
    animation: tilt-in-tr 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;
}
.chara {
    /* position: absolute; */
    width: 100%;
    height: auto;
    
    background-color: rgba(207, 19, 19, 0);
    filter:drop-shadow(0px 0px 8px rgba(29, 89, 255, 0.5)) ;
    animation: color_shadow 10s ease-in-out infinite;
}



.chara_eff .chara img{
    animation: fly1 6s ease-in-out infinite;
}



/* 神兵 */
.font {
    position: absolute;
    width: 89%;
    height: auto;
    padding-bottom: 23%;
    /* bottom: 40.5%; */
    top: 12%;
    right: 7.5%;
    background-color: rgba(187, 255, 0, 0);
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 10;
}
.font_A {
    position: absolute;
    width: 44%;
    height: auto;
    padding-bottom: 0%;
    top: 6.8%;
    left: 0;
    z-index: 5;
    pointer-events: none;
    display: block;
    animation: tilt-in-tr 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
}

/* 天降 */

.font_B {
    position: absolute;
    width: 46%;
    height: auto;
    padding-bottom: 0%;
    top: -6%;
    right: -18px;
    z-index: 5;
    pointer-events: none;
    display: block;
    background-color: #c9242700;
    animation: tilt-in-tr 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
}

/* 漂浮物 */

.sword_l,.sword_r,.ice{
    position: absolute;
    height: auto;
}

.sword_l{
background-color: #d1000300;
width: 39%;
left: -0.5%;
top: -6%;
animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s infinite;
}

.sword_r{
background-color: rgba(0, 255, 255, 0);
width: 63%;
height: auto;
right: -14.6%;
bottom: -2.5%;
animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s infinite;
}


.ice01{
    background-color: rgba(166, 255, 0, 0);
    width: 8%;
    left: 0%;
    top: 57%;
    animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s infinite;
}

.ice02{
    background-color: rgba(255, 0, 98, 0);
    width: 5.5%;
    left: 34%;
    top: 8.5%;
    animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s infinite;
}

.ice03{
    background-color: rgba(162, 0, 255, 0);
    width: 15.5%;
    right: 36.5%;
    bottom: 6.5%;
    z-index: 30;
    animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s infinite;
}

.ice04{
    background-color: rgba(0, 255, 255, 0);
    width: 8%;
    right: 18%;
    top: 2%;
    transform: rotateX(35deg);
    animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s infinite;
}

.ice05{
    background-color: rgba(25, 0, 255, 0);
    width: 11%;
    right: -4%;
    top: 21%;
    transform: rotate(-8deg);
    animation: tilt-in-fwd-tr 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s infinite;
}

.fly{
    animation: fly1 5s ease-in-out 0s infinite;
}
/*---- 下載_btn ----*/
.download_b {
    position: absolute;
    width: 16vw;
    height: auto;
    padding-bottom: 4.5%;
    top: 82%;
    right: 63.8%;
    z-index: 60;
    cursor: pointer;

    animation: join_br00 1.2s ease-in infinite forwards;

    background-image: url(https://images1.iwplay.com.tw/image/zxsj/events/landingpage_0815/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;
} */




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

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


.flex_box .flex_slider {
    position: absolute;
    width: 65%;
    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(../image/flex/flex_bg_pc.webp);
    background-repeat: no-repeat;
    background-size: 100%; */
}




/*---- pc_icon ----*/
.pc_icon {
    position: absolute;
    width: 2%;
    height: auto;
    padding-bottom: 0%;
    bottom: 1%;
    left: 0.5%;
    z-index: 25;
    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 .snow_bg,
.kv_zone .snow_bg video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;

    overflow: hidden;
    z-index: 3;
    display: block;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: soft-light;
}

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

.rainbow{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;

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

    mix-blend-mode: color-dodge;
    filter:brightness(1) contrast(1.5);
    animation: shining 5s ease-in-out 0s infinite; 
}




@media (max-width:1100px) {
    .kv_zone {
        padding-bottom: 200%;
        padding-top: 20%;
        background-image: url(https://images1.iwplay.com.tw/image/zxsj/events/landingpage_0815/image/sp_bg.webp);
        background-repeat: no-repeat;
        background-size: 100%;
    }



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


    /*--SNS--*/
    .snslink {
        width: 55%;
        padding-bottom: 10%;
        top: 2%;
        right: -6%;
    }



    /*---- 大標 ----*/
    .pc_big_title {
        width: 103vw;
        padding-bottom: 52%;
        top: 62%;
        right: -3%;
        background-image: url(https://images1.iwplay.com.tw/image/zxsj/events/landingpage_0815/image/big_title_bg.webp);
        background-repeat: no-repeat;
        background-size: 100%;
    }
        /*---- 下載_btn ----*/
    .download_b {
        position: absolute;
        width: 50%;
        height: auto;
        padding-bottom: 15%;
        top: 76%;
        right: 25%;
        z-index: 60;
        cursor: pointer;

        animation: join_br00 1.2s ease-in infinite forwards;

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

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

    .slogan{
        display: none;
    }
    .slogan_sp {
        position: absolute;
        width: 76%;
        height: auto;
        padding-bottom: 0%;
        top: 39%;
        right: 12%;
        z-index: 55;
        pointer-events: none;
        background-color: #d1000300;
        display: block;
    }


    /* 前排人物  */
    .chara_eff{
        width: 118%;
        height: auto;
        padding-bottom: 103%;
        top: 8%;
        right: -3%;
    }

    /* 神兵 */
    .font {
        width: 100%;
        top: 8%;
        right: 0%;
    }
    .font_A {
        width: 44%;
        top: 0%;
        left: -3%;
        z-index: 5;
        background-color: #d1000300;
        animation: slide-in-bck-center 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    }

    /* 天降 */

    .font_B {
        width: 46%;
        top: 0%;
        right: 0px;
        background-color: #24bec900;
        animation: slide-in-bck-center 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    }

    /* 漂浮物 */
    .sword_l{
        width: 50%;
        left: 36.5%;
        top: -1%;
        z-index: 10;
        
    }

    .sword_r{
        background-color: rgba(0, 255, 255, 0);
        width: 70%;
        height: auto;
        right: -16.6%;
        bottom: 51.5%;
        z-index: 25;
        
    }


    .ice03{
        background-color: rgba(166, 255, 0, 0);
        width: 15%;
        left: 92%;
        top: 6%;
        
    }

    .ice04{
        background-color: rgba(255, 0, 98, 0);
        width: 24%;
        left: -4%;
        top: 37.5%;
        z-index: 25;
        
    }

    .ice01,.ice02,.ice05{
        display: none;
    }
    
        .rainbow {
        display: none;
    }

    /*---- 浮水印 ----*/


    .flex_box {
        width: 100%;
        padding-bottom: 16%;
        bottom: 8.2%;
        right: 0%;
    }
    .flex_box .flex_slider {
        width: 100%;
        padding-bottom: 0%;
        top: 0%;
        right: 0%;
    }
    .pc_icon {
        width: 8%;
        bottom: 11%;
        left: 91%;
    }




}


/*@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;
    }
}