@charset "utf-8";



/* jf open 粉圓 */



@font-face {

    

    font-family: "HunInn";

    src: url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.eot);

    /* IE9 Compat Modes */

    src: url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.eot?#iefix) format("embedded-opentype"),

        /* IE6-IE8 */

        url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.woff) format("woff"),

        /* Modern Browsers */

        url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.ttf) format("truetype"),

        /* Safari, Android, iOS */

        url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.svg#SealmemoryHeader) format("svg");

        /* Legacy iOS */

}



/* NotoSansTC */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");



* {

  text-decoration: none;

}



/* CSS Document */



html,

div,

map,

dt,

isindex,

form {

}



/* Make HTML 5 elements display block-level for consistent styling */



header,

nav,

article,

footer,

address {

    

  display: block;

    

}



body {



    font-family: "HunInn", "Noto Sans CJK TC", "Microsoft JhengHei", PingFang,STHeiti, sans-serif, serif;

    width: 100%;

    position: relative;

    overflow-x: hidden;

    background-color: #090c1d;

    

}



body::before {

    

    content: "";

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/bg.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    

}



img {

    

    width: 100%;

    display: block;

    

}



h5 {



    padding: 5px 0 10px;



}



.page {



    color: #000;

    position: relative;

    line-height: 1px;

    min-height: 50px;

    overflow: hidden;



}



.game_logo_area {



    width: 100%;

    position: absolute;

    z-index: 50;

    display: block;

    bottom: 18%;

    

}



.game_logo_item {

    

    display: block;

    margin-right: auto;

    margin-left: auto;

    width: 32%;

    height: auto;

    background-size: cover;



}



.btn_area {



    width: 100%;

    position: absolute;

    bottom: 1%;

    z-index: 60;

    display: block;



}



.btn_item_1 {



    color: #d6d6d6;

    background-color: #0c0;

    display: block;

    margin-right: auto;

    margin-left: auto;

    width: 20%;

    height: auto;

    

}



.download a {



    padding: 0%;

    cursor: pointer;

    position: relative;

    margin: 0 1%;

    

}



.download a:hover {



    -webkit-animation-duration: 0.5s;

    animation-duration: 0.5s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-iteration-count: 1;

    animation-iteration-count: 1;

    -webkit-animation-name: download_btn_1;

    animation-name: download_btn_1;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

    

}



@-webkit-keyframes download_btn_1 {

    

    0% {

        -webkit-transform: scaleX(1);

        transform: scaleX(1);

    }



    100% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05);

    }



}



@keyframes download_btn_1 {

    

    0% {

        -webkit-transform: scaleX(1);

        transform: scaleX(1);

    }



    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05);

    }



    to {



    -webkit-transform: scaleX(1);

    transform: scaleX(1);

    }



}



.btn_1 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/btn_download_1.png");

    background-size: cover;



}



.download a:hover .btn_1 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/btn_download_1.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 100% 0px;



}



.btn_1_mv {



    position: absolute;

    top: 0px;

    left: 0px;

    animation-name: btn_mov_1;

    animation-duration: 0.1s;

    animation-delay: 0s;

    animation-iteration-count: infinite;

    /***/

    animation-timing-function: ease;

    animation-fill-mode: forwards;



}



.btn_1_mv2 {



    position: absolute;

    top: 0px;

    left: 0px;

    

}



.btn_2 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/btn_download_2.png");

    background-size: cover;

    

}



.download a:hover .btn_2 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/btn_download_2.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 100% 0px;



}



info_item {



    display: block;

    margin-right: auto;

    margin-left: auto;

    width: 100%;

    height: auto;

    margin-top: 2%;

    

}



.reminder {

    

    color: #000;

    text-align: center;

    margin: 0 auto;

    padding: 10px 15px;

    line-height: 1.2em;



}



.reminder h4 {



    font-size: 1em;

    color: #deae63;

    padding: 0 0 5px;



}



.reminder p {



    font-size: 0.8em;

    font-weight: lighter;

    color: #fff;



}



.reminder strong {

    

    font-weight: bolder;

}



.copyright {


    /*background-color: #000;

    font-size: 14px; 

    color: #FFF;

    text-align: center;*/

    display: block;

    padding: 0.1% 0;

    

}



.main_img_1 {



    width: 100%;

    min-height: 200px;



}



.main_img_2 {



    width: 100%;

    min-height: 200px;

}



.pc {



    display: none;



}



#introduce {



    margin-bottom: 5%;



}



.swiper {



    margin-bottom: 5%;



}



.swiper-slide img {



    width: 100%;

    margin: 0 auto;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;



}



.introduce_img1 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/introduce_1.jpg");



}



.introduce_img2 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/introduce_2.jpg");



}



.introduce_img3 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/introduce_3.jpg");



}



.introduce_img4 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/introduce_4.jpg");



}



.introduce_img5 {



    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/kd/img/introduce_5.jpg");



}



@media (min-width: 768px) {

    

    .mobile {

  

        display: none;

    }



    .pc {

        

        display: block;

    

    }



    .menu_btn {



      display: none;



    }



    .download {

    

        display: flex;

        width: 44%;

        margin: 0% auto;

    

    }



    .download a {



        margin: 0 1%;

    }



    .cha_1 img,

    .cha_2 img,

    .cha_3 img,

    .cha_4 img,

    .cha_5 img,
    
    .monsters_1 img,
    
    .monsters_2 img,
    
    .monsters_3 img,
    
    .monsters_4 img {

    

        height: auto;

        width: 100%;

    

    }



    .cha_1 {

        z-index: 10;        

        width: 36%;

        height: auto;

        position: absolute;

        top: 0%;

        right: 34%;

        /*animation-name: run1;*/

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite;/***/

        animation-timing-function: ease;

        animation-fill-mode: forwards;



    }



    .cha_2 {

        z-index: 9;

        width: 34%;

        height: auto;

        position: absolute;

        top: 19%;

        left: 12%;

        /*animation-name: run2;*/

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: 1;/*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

        

    }



    .cha_3 {

        z-index: 9;    

        width: 25%;

        height: auto;

        position: absolute;

        top: 15.5%;

        right: 20.5%;

        /*animation-name: run3;*/

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: 1; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    

    }





    .cha_4 {

        z-index: 8;

        width: 27%;

        height: auto;

        position: absolute;

        top: 3%;

        right: -3%;

        animation-name: run4;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite;/*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;



    }



    .cha_5 {

        z-index: 8; 

        width: 34%;

        height: auto;

        position: absolute;

        top: 6%;

        left: -6%;

        animation-name: run5;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    

    }
    
    
    
    .monsters_1 {

        z-index: 2; 

        width: 8.4%;

        height: auto;

        position: absolute;

        top: 4%;

        left: 16%;

        animation-name: run_monster1;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    

    }
    
    
    
    .monsters_2 {

        z-index: 2; 

        width: 8%;

        height: auto;

        position: absolute;

        top: 8%;

        left: 29%;

        animation-name: run_monster2;

        animation-duration: 3s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    

    }

    
    
    .monsters_3 {

        z-index: 3; 

        width: 10%;

        height: auto;

        position: absolute;

        top: 8%;

        right: 31%;

        animation-name: run_monster3;

        animation-duration: 2.5s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    

    }
    
    
    
    .monsters_4 {

        z-index: 3; 

        width: 9%;

        height: auto;

        position: absolute;

        top: 5%;

        right: 1%;

        animation-name: run_monster4;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    

    }




    .title {

    

        width: 20%;

        margin: 3% auto 2%;

    

    }



    .content {

    

        width: 60%;

        margin: 0 auto;

  

    }



    #story .content {

    

        margin: 0 auto;

    

    }



    

    .content img {



        width: 100%;

        margin: 0 auto;



    }



    #introduce {

    

        margin-bottom: 5%;

    

    }



    .swiper-horizontal > .swiper-pagination-bullets,

    .swiper-pagination-bullets.swiper-pagination-horizontal,

    .swiper-pagination-custom,

    .swiper-pagination-fraction {



        bottom: 8px;

        left: 0;

        width: 100%;

        opacity: 1;

    

    }



}



@media only screen and (max-width: 768px) {

    

    .pc {



        display: none;

    

    }





    .game_logo_area {

    

        width: 100%;

        position: absolute;

        z-index: 50;

        display: block;

        top: 56%;



    }



    .game_logo_item {

    

        width: 60%;

    

    }



    .btn_area {

    

        width: 100%;

        position: absolute;

        bottom: 0%;

        z-index: 60;

        display: block;



    }





    .download {

    

        width: 98%;

        display: flex;

        margin: 0 auto 0;



    }



    .download a {

    

        margin: 0 1%;



    }



    #info_item {

    

        display: block;

        margin-right: auto;

        margin-left: auto;

        width: 100%;

        height: auto;

        margin-top: 8%;

    

    }



    .copyright {

    

        /*background-color: #000;

        font-size: 12px; 

        color: #FFF;

        text-align: center;

        display: block;

        padding: 4% 0;*/



    }



    .cha_1 img,

    .cha_2 img,

    .cha_3 img,

    .cha_4 img,

    .cha_5 img,
    
    .monsters_1 img,
    
    .monsters_2 img,
    
    .monsters_3 img,
    
    .monsters_4 img {

    

        height: auto;

        width: 100%;



    }



    .cha_1 {

        z-index: 10;

        width: 64%;

        height: auto;

        position: absolute;

        top: 18%;

        right: 22%;

        /*animation-name: run1_m;*/

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite;/***/

        animation-timing-function: ease;

        animation-fill-mode: forwards;

    }



    .cha_2 {

        z-index: 8;

        width: 52%;

        height: auto;

        position: absolute;

        top: 9%;

        left: 8%;

        /*animation-name: run2_m;*/

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: 1;/***/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }



    .cha_3 {

        z-index: 8;

        width: 43%;

        height: auto;

        position: absolute;

        top: 6%;

        right: 14%;

        /*animation-name: run3_m;*/

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: 1; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }



     .cha_4 {

        z-index: 9;

        width: 48%;

        height: auto;

        position: absolute;

        bottom: 1%;

        right: -9%;

        animation-name: run4_m;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite;/***/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }



    .cha_5 {

        z-index: 9;

        width: 61%;

        height: auto;

        position: absolute;

        bottom: 2%;

        left: -13.5%;

        animation-name: run5_m;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }

    
    
    .monsters_1 {

        z-index: 2;

        width: 16%;

        height: auto;

        position: absolute;

        top: 25%;

        left: -1%;

        animation-name: run_monster1_m;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }
    
    
    
    .monsters_2 {

        z-index: 2;

        width: 19%;

        height: auto;

        position: absolute;

        top: 9%;

        left: 2%;

        animation-name: run_monster2_m;

        animation-duration: 3s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }
    
    
    
    .monsters_3 {

        z-index: 2;

        width: 25%;

        height: auto;

        position: absolute;

        top: 12%;

        right: 2%;

        animation-name: run_monster3_m;

        animation-duration: 2.5s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }
    
    

    
    
    
    .monsters_4 {

        z-index: 2;

        width: 19%;

        height: auto;

        position: absolute;

        top: 25%;

        right: 0%;

        animation-name: run_monster4_m;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-iteration-count: infinite; /*設定該特效次數，infinite代表無限。*/

        animation-timing-function: ease;

        animation-fill-mode: forwards;


    }
    
    

    .title {


        width: 50%;

        margin: 10% auto 5%;


    }



    .content {


        width: 90%;

        margin: 0 auto;



    }



    #story .content {

    

        margin: 0 auto;



    }



    .content img {

    

        width: 100%;

        margin: 0 auto;



    }



    #introduce {

    

        margin-bottom: 10%;



    }





    .info_area_1 {

    

        width: 100%;

        position: absolute;

        bottom: 1%;

        z-index: 60;

        display: block;



    }



    .swiper-horizontal > .swiper-pagination-bullets,

    .swiper-pagination-bullets.swiper-pagination-horizontal,

    .swiper-pagination-custom,

    .swiper-pagination-fraction {

    

        bottom: 0px;

        left: 0;

        width: 100%;

        opacity: 0.1;



    }



}





/*******/

.swal2-styled.swal2-confirm {

  

    background-color: #002680;



}



.swal2-styled.swal2-confirm:focus {



    box-shadow: 0 0 0 3px #04b1e6;



}



.swiper-3d .swiper-slide-shadow {



    background: rgba(0, 0, 0, 0.15);



}



.swiper-3d .swiper-slide-shadow-left {



    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));;



}



.swiper-3d .swiper-slide-shadow-right {



    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));;



}



.swiper-3d .swiper-slide-shadow-top {



    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));;



}



.swiper-3d .swiper-slide-shadow-bottom {

    

    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));;



}



/*************/



html {



    height: 100%;



}



/*************/



.clearfloat {



    clear: both;

    height: 0;

    font-size: 1px;

    line-height: 0px;

    

}