@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/yj/img/index_02.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;

}

/* 粒子 */
#confetti {
    
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    height: 100%;
    
}

.dot1 {

    background: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yj/img/dot.gif") center no-repeat;
    width: 30px;
    height: 30px;
    background-size: contain;
    position: absolute;
    
}

.dot2 {
    
    background: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yj/img/dot1.gif") center no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain;
    position: absolute;

}

.dot3 {
    
    background: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yj/img/dot3.png") center no-repeat;
    width: 20px;
    height: 20px;
    background-size: contain;
    position: absolute;
    
}
/* 粒子end */


.game_logo_area {

    width: 100%;
    position: absolute;
    z-index: 50;
    display: block;
    bottom: 12%;
    
}

.game_logo_item {
    
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 45%;
    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/yj/img/btn_download_1.png");
    background-size: cover;

}

.download a:hover .btn_1 {

    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yj/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/yj/img/btn_download_2.png");
    background-size: cover;
    
}

.download a:hover .btn_2 {

    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yj/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: #8be9fe;
    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/yj/img/introduce_1.jpg");

}

.introduce_img2 {

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

}

.introduce_img3 {

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

}

.introduce_img4 {

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

}

.introduce_img5 {

    background-image: url("https://xn3.xn--xhqu8sl91bp1l.xn--fiqs8s/yj/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 {
    
        height: auto;
        width: 100%;
    
    }

    .cha_1 {
        
        width: 60%;
        height: auto;
        position: absolute;
        top: 8%;
        right: 17%;
        animation-name: run1;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: infinite;/***/
        animation-timing-function: ease;
        animation-fill-mode: forwards;

    }

    .cha_2 {
    
        width: 50%;
        height: auto;
        position: absolute;
        top: 18%;
        right: -16%;
        animation-name: run2;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: infinite;/***/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        
    }

    .cha_3 {
    
        width: 45%;
        height: auto;
        position: absolute;
        top: 0%;
        right: 9%;
        animation-name: run3;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: 1; /*設定該特效次數，infinite代表無限。*/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    
    }


    .cha_4 {
    
        width: 40%;
        height: auto;
        position: absolute;
        top: 12%;
        left: -15%;
        animation-name: run4;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: infinite;/***/
        animation-timing-function: ease;
        animation-fill-mode: forwards;

    }

    .cha_5 {
    
        width: 33%;
        height: auto;
        position: absolute;
        top: 0%;
        left: 13%;
        animation-name: run5;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: 1; /*設定該特效次數，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: 60%;

    }

    .game_logo_item {
    
        width: 76%;
    
    }

    .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 {
    
        height: auto;
        width: 100%;

    }

    .cha_1 {
    
        width: 113%;
        height: auto;
        position: absolute;
        top: 30%;
        right: -15%;
        animation-name: run1_m;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: infinite;/***/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        z-index: 5;

    }

    .cha_2 {
    
        width: 89%;
        height: auto;
        position: absolute;
        top: 24%;
        right: -39%;
        animation-name: run2_m;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: infinite;/***/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        z-index: 4;
    
    }

    .cha_3 {
    
        width: 76%;
        height: auto;
        position: absolute;
        top: 4%;
        right: -4%;
        animation-name: run3_m;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: 1; /*設定該特效次數，infinite代表無限。*/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        z-index: 2;
    
    }

     .cha_4 {
    
        width: 75%;
        height: auto;
        position: absolute;
        top: 23%;
        left: -28%;
        animation-name: run4_m;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: infinite;/***/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        z-index: 4;

    }

    .cha_5 {
    
        width: 60%;
        height: auto;
        position: absolute;
        top: 3%;
        left: 6%;
        animation-name: run5_m;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: 1; /*設定該特效次數，infinite代表無限。*/
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        z-index: 3;

    }

    .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;
    
}