/*  index
-------------------------------------------------
    - Import
    - text
    - df-width
    - layout
-------------------------------------------------*/


/*-----------------------------------------------
     Import
-----------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');


/*-----------------------------------------------
     text
-----------------------------------------------*/


h1,
h2 {
    color: #498ceb;

    line-height: 1.2;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0.8em 0 0.4em 0;
}

p {}

@media screen and (min-width: 1921px) {

    h1,
    h2 {
        color: #10a5ff;

        line-height: 1.2;
        font-size: 1.7rem;
        font-weight: 500;
        margin: 1em 0 1em 0;
    }

}


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

    h1,
    h2 {

        font-size: 1.6rem;
        margin: 0.3em 0 0.3em 0;
    }
}


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

    h1,
    h2 {

        font-size: 1.4rem;
        margin: 0.5em 0 0.5em 0;
    }
}

/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    height: 100%;
    max-width: 1200px;
    overflow: hidden;
}


/*  layout
-------------------------------------------------
    - html,body
    - main
    - header
    - section
    - footer
-------------------------------------------------*/

/* html {
    background:#fff;
} */

/*prelodd*/
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -999;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: 0;

        background-image:
        url(../images/index_01.jpg),
        url(../images/index_02.jpg),
        url(../images/mobile_01.jpg),
        url(../images/mobile_02.jpg),
        url(../images/banner/1-01.jpg),
        url(../images/banner/2-01.jpg),
        url(../images/banner/3-01.jpg),
        url(../images/banner/1-02.jpg),
        url(../images/banner/1-03.jpg),
        url(../images/banner/1-04.jpg),
        url(../images/banner/1-05.jpg);

}

/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    /*! max-width: 1920px; */
    margin: auto;
    /*background: url(../images/index_01.jpg) center 0 /100% no-repeat;*/

    animation: blur .8s ease-out 0s 1 both;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

section {
    width: 100%;
    text-align: justify;
    height: 1080px;
    /*! background: #777; */
    aspect-ratio: 768 / 1500;
}

/*-----------------------------------------------
    header
-----------------------------------------------*/
header {
    aspect-ratio: 1920 / 1080;
    background: url(../images/index_01.jpg) center 0 /100% no-repeat;

    min-width: 1200px;
}

.bg2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    /*background: url(../images/index_02.jpg) center 0 /100% no-repeat;*/
}



@media screen and (max-width:768px) {
    header {
        aspect-ratio: 768 / 1400;
        background: url(../images/mobile_01.jpg) center 0 /cover no-repeat;
        /*! background: #555; */
        min-width: auto;
    }

    .bg2 {
        /*top: 70px;*/
        /*overflow: hidden;*/
        /*background: url(../images/mobile_02.jpg) center 0 /100% no-repeat;*/
    }
}

/*-----------------------------------------------
    footer
-----------------------------------------------*/
footer {
    background: #f6f7f2
}

footer .cp {
    width: 100%;
    height: 25vw;
    background: #f6f7f2 url(../images/cp.jpg) 50% 50% /100% no-repeat;
    max-width: 1250px;
    margin: auto;
}





@media screen and (max-width:768px) {
    footer .cp {
        height: 145vw;
        background: url(../images/cp-m.jpg) center 100% /100% no-repeat;
    }


}



/*-----------------------------------------------
    opening
-----------------------------------------------*/
.open-wrap,
.open-wrap1,
.open-wrap2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0px;
    left: 0px;
    /*animation: openingEnd 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0s 1 both;*/
}

.open-wrap1 {
    animation: open1 1s ease .5s forwards;
    clip-path: polygon(0 0, 0 0, 0 20%, 0 20%);
}

.open-wrap2 {
    animation: open2 1s ease 1.2s forwards;
    clip-path: polygon(100% 84%, 100% 85%, 100% 100%, 100% 100%);
}


.opening-group {
    position: absolute;
    width: 28.7%;
    height: 100%;
    z-index: 1;
    top: 0px;
    left: 0px;
    animation: END 2.2s ease-out 2s both;
    /*! opacity: 0.5; */
    /*! pointer-events: none; */
    /*! min-height: 65vh; */
    /*! aspect-ratio: 60 / 30; */
    min-width: 200px;
}



@keyframes open1 {
    0% {
        clip-path: polygon(0 0, 0 0, 0 10%, 0 10%);
    }

    30% {
        clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 10%);
    }


}

@keyframes open2 {
    0% {
        clip-path: polygon(100% 57%, 100% 57%, 100% 100%, 100% 100%);
    }

    30% {
        clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

}

@keyframes END {

    0%,
    50% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 0;
        filter: blur(0px);
    }
}




.opening {
/*    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    z-index: 1;
    margin: auto;
    left: 10px;
    top: 10px;*/
        position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    z-index: 1;
    margin: auto;
    left: 0;
    top: 0;
}


.opening1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0px;
    border-radius: 23px;
    background: transparent;
    /*! box-shadow: 0px 4px 0 15px #fff; */
    margin: auto;
    right: 0;
    border: 16px solid #fdfdfd;
}

.opening2 {

    position: absolute;
    width: 91%;
    height: 83.5%;
    z-index: 2;
    top: 17px;
    left: 0px;
    border-radius: 22px;
    background: transparent;
    box-shadow: 0px 0px 0 16px #fff;
    margin: auto;
    right: 0;
    /*! opacity: 0.5; */
    /*! opacity: 0; */

}

.opening3 {
/*    position: absolute;
    width: 96%;
    height: 87%;
    z-index: 2;
    top: 2px;
    left: 0px;
    border-radius: 19px 20px 18px 18px;
    background: transparent;
    box-shadow: 0px 0 0 14px #fff;
    margin: auto;
    right: 0;*/
}

.opening4 {
    position: absolute;
    width: 98%;
    height: 13%;
    z-index: 2;
    bottom: 12px;
    left: 0px;
    background: #fff;
    margin: auto;
    right: 0;
}

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

    .opening-group {
        min-height: 100vw;
        width: 26.7%;
    }

    .opening {
        /*min-height: 100vw*/
    }

/*    .opening3 {
    width: 97%;
    height: 87%;
    top: 0px;
    left: -1px;
    border-radius: 7px 7px 11px 12px;
    box-shadow: 0px 0 0 14px #fff;
    right: 0;
}*/

.opening1 {

   top: 0;
    left: 0px;
    border-radius: 11px;
    right: 0;
    border: 10px solid #fff;
}

.opening2 {

    width: 90%;
    height: 83.2%;
    top: 10px;
    left: 1px;
    border-radius: 8px;
    box-shadow: 0px 0px 0 12px #fff;

}


.opening4 {

     width: 98%;
    height: 13%;
    bottom: 9px;
    left: 0px;
    right: 0;
}

}





/*-----------------------------------------------
    card
-----------------------------------------------*/

.card-group {
    width: 60%;
    height: 55.7%;
    position: absolute;
    left: 38.8%;
    top: 22%;
    z-index: 6;
}

.card-group ul {
    display: flex;
}

.card-group ul li {
    position: relative;
    list-style: none;
}

.card {

    width: 28.7%;
    height: 100%;

    border: 16px solid #fff;
    border-radius: 20px;

    background: #fff;
    margin: 0 4.5% 0 0;
    z-index: 2;
    /*! min-height: 65vh; */
    aspect-ratio: 60 / 30;
    min-width: 200px;
}



.card1 {
    animation: CARD1 0.4s cubic-bezier(.250, .460, .450, .940) 2.2s 1 both;
    z-index: 3;

}

.card2 {
    animation: CARD2 0.5s cubic-bezier(.250, .460, .450, .940) 2.5s 1 both;
    z-index: 2;

}

.card3 {
    animation: CARD2 0.6s cubic-bezier(.250, .460, .450, .940) 2.7s 1 both;
    z-index: 1;

}

@keyframes CARD1 {

    0% {
        opacity: 0;
        filter: blur(5px);

    }

    100% {
        opacity: 1;
        filter: blur(0px);

    }
}

@keyframes CARD2 {

    0% {
        transform: translateX(-200px) skewY(0deg) rotateY(-30deg);
        /*rotateY(30deg) translateY(-300px) ;*/
        transform-origin: 50% 0%;
        opacity: 0;
    }

    100% {
        transform: translateX(0) skewY(0deg) rotateY(0deg);
        transform-origin: 50% 0%;
        opacity: 1;
    }
}


.card-text {
    background: #fff;
}

.move-left {
    animation: moveLeft .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 both;

}

.move-back {
    animation: moveBack .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 both;
}



@keyframes moveLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }

    60%,
    100% {
        transform: translate3d(-200%, 0, 0);
    }
}

@keyframes moveBack {
    0% {
        transform: translate3d(-200%, 0, 0);
    }

    60%,
    100% {
        transform: translate3d(0, 0, 0);
    }
}



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

    .card-group {
        width: 255%;
        height: 100%;
        position: absolute;
        left: 17%;
        top: 71vw;
        z-index: 6;
        /*! opacity: 0.5; */
    }

    .card {

        width: 26.7%;
        height: 100%;

        border: 10px solid #fff;
        border-radius: 10px;

        background: #fff;
        margin: 0 4.5% 0 0;
        z-index: 2;
        min-height: 100vw;
        /*! opacity: 0.5; */
        /*! aspect-ratio: 500 / 1500; */
    }


}



/*-----------------------------------------------
    card-text
-----------------------------------------------*/

.t1 {
    position: absolute;
    top: -14.2%;
    left: 0;
    z-index: 5;
}

.t1-2{
     top: calc(-14.2% + 20px);
     width: 91%;
     left: 15px;
}

.t1-1 {
    position: absolute;
    bottom: 1%;
    left: 0;
    z-index: 1;
}

@keyframes T1 {

    0% {
        opacity: 0;
        transform: scale(1.1);

    }

    100% {
        opacity: 1;
        transform: scale(1);

    }
}



.TT {
    z-index: 10;
     animation: openTT 6s ease 0.4s both;

}



@keyframes openTT {
    0% {
        opacity: 1;
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }

    20% {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }

    100% {
        opacity: 0;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
}


.card-text {
   position: absolute;
    width: 335%;
    height: calc(100% + 32px);
    background: #FFF;
    top: calc(0px - 16px);
    left: 0;
    z-index: -1;
    border-radius: 13px;
    transition: all 0.3s ease 0s;
    font-size: 1rem;

}

.text-hide {
    /*width: 0%;*/
    transition: all 0s ease 0s;
    opacity: 0;
    pointer-events: none;


}

.content {
    width: 100%;
    height: 100%;
    padding: 4% 5% 5% 37%;
}

.text-show {
    /*width: 330%;*/
    opacity: 1;
    pointer-events: auto;
    transition: all 0.3s ease 0s;


}


ol li::before {
    content: "◆";
    color: #3e89e1;
    margin-right: 0.5em;
    position: absolute;
    left: -15px;
    font-size: 0.4rem;
    top: 9px
}

/*.content{
    animation: T1  1.5s ease 0s both;
}*/

@media screen and (min-width: 1921px) {
    .card-text {

        font-size: 1.15rem;

    }
    .t1 {
    top: -13.6%;
}
.t1-2{
     top: calc(-13.6% + 20px);
     width: 92%;
     left: 19px;
}

}


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

    .content {
        transform: scale(0.85) translate(-4%, -12%);
        width: 112%;
    }

}

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

    .content {
        transform: scale(0.9) translate(-2%, -3%);
        width: 108%;
    }

    .content-tablet {
        display: none;
    }
        .t1 {
    top: -15.2%;
}

.t1-2{
     top: calc(-15.2% + 20px);
     width: 91%;
     left: 15px;
}
}

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

    .content {
        transform: scale(0.8) translate(-4%, -7%);
        width: 115%;
    }
        .t1 {
    top: -17.2%;
}

.t1-2{
     top: calc(-17.2% + 20px);
     width: 87%;
     left: 15px;
}
}


@media screen and (max-width: 767px) {
   /* .content-tablet {
        display: block;
    }*/

.box1 ol li::before,.box2 ol li::before,.box3 ol li::before,.box4 ol li::before {
    content: "◆";
    margin-right: 0.5em;
    left: -15px;
    font-size: 0.7rem;
    top: 3px;
}
        .t1 {
    top: -14.2%;
}

.t1-2{
     top: calc(-16% + 20px);
     width: 91%;
     left: 11px;
}
}

/*-----------------------------------------------
    banner
-----------------------------------------------*/

.banner {
    width: 98%;
    height: 87%;
    background: #eed7d7a3;
    margin: auto;
    border-radius: 19px;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.banner-long {
    width: 98%;
    height: 100%;
    background: #eed7d7a3;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 5;
}



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

    z-index: 11;
    opacity: 1;
}

.cover:hover {
    /*    opacity: 0;
    transition: all .3s ease;*/

}

.cover1 {
    background: url(../images/banner/1-01.jpg) center 0% /cover no-repeat;
}

.cover2 {
    background: url(../images/banner/2-01.jpg) center 100% /cover no-repeat;
}

.cover3 {
    background: url(../images/banner/3-01.jpg) center 100% /cover no-repeat;
}

@media screen and (min-width: 1921px) {
    .cover1 {

        background: url(../images/banner/1-01.jpg) center 10% /101.5% no-repeat;
    }

}

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

    .banner-long {
        /*! height: 87%; */
    }
}

@media screen and (max-width: 767px) {
.banner {

    border-radius: 10px;

}

}


/*-----------------------------------------------
    btn
-----------------------------------------------*/

.btn {
    position: absolute;
    right: -15%;
    top: 36%;
    background: url(../images/btn-open.png) center /100% no-repeat;
    width: 13vw;
    height: 13vw;
    z-index: 10;
    border: 0;
    cursor: pointer;
    /*! animation: T1 1s ease 2s both; */

    max-width: 70px;
    max-height: 70px;
}

.btn-box {
    top: -6%;
    left: 0;
    right: 0;
    margin: auto;
}

.btn:hover {
    animation: turn 3s ease-out 0s 100 both;
}


.btn-go{
    position: absolute;
    width: 47%;
    height: 35px;
    bottom: 4%;
    right: -8%;
    z-index: 20;
    cursor: pointer;
    background: #fff;
    border-radius: 25px;

    min-width: 125px;
}

.btn-go a{
    display: block;
    width: 100%;
    height: 100%;
        text-align: center;
    line-height: 35px;
    font-size:1.2rem;
    color: #000;

    font-weight: 500;
    letter-spacing: 0.1rem;
    padding: 0 0 0 12%;
    background: url(../images/btn-go.png) 13% 50% /15px no-repeat;
    transition: all .3s ease ;
}

.btn-go a:hover {
     background: url(../images/btn-go.png) 5% 40% /15px no-repeat;
      transition: all .3s ease ;
      padding: 0 0 0 5%;
}


@keyframes turn {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(364deg);
    }
}

@keyframes turn2 {
    0% {
        transform: rotateZ(0deg) scale(1.5);
    }

    100% {
        transform: rotateZ(364deg) scale(1.5);
    }
}


.btn-open {
    background: url(../images/btn-open.png) center 0 /100% no-repeat;
}

.btn-close {
    background: url(../images/btn-close.png) center 0 /100% no-repeat;
}

.btn-book {
    position: relative;
    width: 25%;
    background: url(../images/btn-book.png) center /100% no-repeat;
    text-align: center;

    cursor: pointer;
    font-weight: 450;
    height: 50px;
    line-height: 50px;
    margin: 2% 0 0 67%;
    transition: all .3s ease;
    max-width: 140px;
}


.btn-book a {
    display: block;
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.05rem;

}

.btn-book a:hover {
    letter-spacing: 0.3rem;
    transition: all .3s ease;

}

/*btn-book-s*/
.btn-book-s {
    position: relative;
    width: 80%;
    background: url(../images/btn-book.png) center /100% no-repeat;
    text-align: center;

    cursor: pointer;
    font-weight: 450;
    height: 50px;
    line-height: 50px;
    margin: auto;
    transition: all .3s ease;
}

.btn-book-s a {
    display: block;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.05rem;

}

.btn-book-s a:hover {
    letter-spacing: 0.3rem;
    transition: all .3s ease;

}


@media screen and (min-width: 1921px) {
    .btn {
        right: -10%;

    }

    .btn-box {
        right: 0;
    }

    .btn-go{
    width: 47%;
    height: 40px;
    bottom: 4%;
    right: -5%;
    min-width: 125px;
    max-width: 170px;
}
.btn-go a{
    line-height: 40px;
    font-size: 1.3rem;
    padding: 0 0 0 8%;
}


}


@media screen and (max-width: 1600px) {
    .btn-book-s a {
        font-size: 1.5rem;

    }

    .btn {

        top: 36%;

        width: 4vw;
        height: 4vw;

    }

    .btn-box {
        top: -4%;

        /*! transform: scale(1.5); */
        width: 80px;
        height: 80px;
    }


/*    .btn-box:hover {
        animation: turn2 3s ease-out 0s 100 both;
    }
*/


}


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

    .btn-box-m {
        position: absolute;
        top: 45vw;
        left: 6%;
        width: 185px;
        background: #fff;
        /*! text-align: center; */

        cursor: pointer;
        font-weight: 450;
        height: 51px;
        line-height: 51px;
        transition: all .3s ease;
        max-width: 250px;
        z-index: 10;
        right: 0;
        margin: auto;
        border-radius: 30px;
        animation: expand 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2s infinite both;


    }

    .view-mask {
        position: absolute;
        width: 100%;
        height: 36%;
        /*! background: #d74f4fa3; */
        top: 0;
        left: 0;
        z-index: 5;
        /*! pointer-events: none; */
    }

    .btn {
        /*! top: -5%; */
        width: 50px;
        height: 50px;
        transform: scale(1);
    }

    .btn-book-s {
        width: 100%;

    }

    .btn-book-s a {
        font-size: 1.1rem;

    }

    .btn-open4-m a {
        display: block;
        color: #000;
        font-size: 1.3rem;
        letter-spacing: 0.05rem;
        margin: 4% 0 0 11%;
        line-height: 1.3;
    }

    /*.btn-open4-m a:hover {
    letter-spacing: 0.3rem;
    transition: all .3s ease;

}
*/

.btn-book a {
    font-size: 1.2rem;
    letter-spacing: 0.05rem;

}
.btn-book {
    width: 40%;

    height: 45px;
    line-height: 45px;
    margin: 2% 0 0 60%;
    transition: all .3s ease;
    max-width: 150px;
}

    .btn-open4-m a>.btn {
        top: 0;
        width: 50px;
        height: 50px;
        right: 0%;
        z-index: 0;
    }


    .btn-open4-m a>span {
        display: block;
        font-size: 0.65rem;
        letter-spacing: 0.1rem;
        color: #555;
        padding: 0 0 0 2%;
    }

    .btn-line {
        position: absolute;
        width: 300%;
        height: 1px;
        /*top: 45%;*/
        top: 51vw;
        left: -100%;
        z-index: 5;
        background: #fff;
        animation: btnLine 1s ease-out 2s 1 both;
    }


    @keyframes btnLine {
        0% {
            opacity: 1;
            width: 0;
        }

        100% {
            opacity: 1;
            width: 300%;
        }
    }

    @keyframes expand {
        0% {
            -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
        }

        20% {
            -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
        }

        40% {
            -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        }

        60% {
            -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        }

        70%,
        100% {
            -webkit-transform: perspective(400px);
            transform: perspective(400px);
        }
    }

}


/*-----------------------------------------------
    mask-box
-----------------------------------------------*/
.mask-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;

    /*mask的形狀*/
    background-image: url("../images/banner/mask.png");
    background-repeat: no-repeat;
    background-size: 0%;
    background-position: 50% 50%;
    z-index: 0;



}

.masked {
    display: block;
    width: 100%;

    /*套用mask*/
    mask-image: url("../images/banner/mask.png");
    mask-repeat: no-repeat;
    mask-size: 0%;
    mask-position: 50% 50%;
    animation: ink 2s linear forwards 1.5s;
    vertical-align: middle;
}


.glass {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    backdrop-filter: blur(5px);

    /*background: rgba(255, 255, 255, .7);*/
}

@keyframes ink {

    0%,
    30% {
        mask-size: 0%;
    }

    100% {
        mask-size: 200%;
    }
}

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

    @keyframes ink {

        0%,
        30% {
            mask-size: 0%;
        }

        100% {
            mask-size: 300%;
        }
    }

}

/*-----------------------------------------------
     火狐修復
-----------------------------------------------*/

.only-firefox {
    display: none;
}


@-moz-document url-prefix() {
    .only-firefox {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        animation: fixFirefox 1.8s ease both 1.5s;
    }

}



@keyframes fixFirefox {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/*-----------------------------------------------
    fish
-----------------------------------------------*/
.fish-group {
    display: none;
    position: absolute;
    width: 70%;
    height: 50%;
    top: 10%;
    left: 30%;
    z-index: 5;
    pointer-events: none;
}

.fish-group.hidden {
    display: none;
}

.fish1 {
    pointer-events: none;
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    top: 15%;
    left: 0%;
    z-index: 10;
    background: url(../images/fish1.png) center /100% no-repeat;
    animation: fish1 6s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
    /*animation: fish1 5s cubic-bezier(.250, .460, .450, .940) 0s 1 both;*/
}

.fish2 {
    pointer-events: none;
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    top: 40%;
    left: -10%;
    z-index: 10;
    background: url(../images/fish2.png) center /100% no-repeat;
    animation: fish2 5s cubic-bezier(.250, .460, .450, .940) 0.3s 1 both;
}

.fish3 {
    pointer-events: none;
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    top: 25%;
    left: 20%;
    z-index: 10;
    background: url(../images/fish3.png) center /100% no-repeat;
    animation: fish3 5s cubic-bezier(.250, .460, .450, .940) 0.5s 1 both;
}





@-webkit-keyframes fish1 {
    0% {
        opacity: 0.9;
        -webkit-transform: translate(0%, 0%) rotateX(0);
        -webkit-transform-origin: 50% 5800px;
        filter: blur(0px);
    }

    35% {
        opacity: 1;
        -webkit-transform: translate(-100%, -40%) rotateX(-10deg);
        -webkit-transform-origin: 50%;
        filter: blur(0px);
    }

    100% {
        -webkit-transform: translate(-800%, -500%) rotateX(30deg);
        -webkit-transform-origin: 50% 100%;
        filter: blur(2px);
    }
/*        0% {
        -webkit-transform: translate(0%, 0%) rotateX(0)  scaleX(1);
        -webkit-transform-origin: 50% 5800px;
        filter: blur(0px);
    }

    20% {
        -webkit-transform: translate(-100%, -40%) rotateX(-10deg)  scaleX(1);
        -webkit-transform-origin: 50%;
        filter: blur(0px);
    }

    50% {
        -webkit-transform: translate(-800%, -500%) rotateX(30deg)  scaleX(1);
        -webkit-transform-origin: 50% 100%;
        filter: blur(2px);
    }
    55% {
        -webkit-transform: translate(-800%, -500%) rotateX(30deg)  scaleX(-1);
        -webkit-transform-origin: 50% 100%;
        filter: blur(2px);
    }

    70% {
        -webkit-transform: translate(-100%, -40%) rotateX(-10deg)  scaleX(-1);
        -webkit-transform-origin: 50%;
        filter: blur(0px);
    }
    80% {
        -webkit-transform: translate(0%, 0%) rotateX(0)  scaleX(-1);
        -webkit-transform-origin: 50% 5800px;
        filter: blur(0px);
    }
    100% {
        -webkit-transform: translate(600%, -400%) rotateX(0)  scaleX(-1);
        -webkit-transform-origin: 50% 5800px;
        filter: blur(2px);
    }*/


}

@-webkit-keyframes fish2 {
    0% {
        opacity: 0.9;
        -webkit-transform: translate(-300%, 0%) rotateX(0);
        -webkit-transform-origin: 50%;
        filter: blur(0px);
    }

    20% {
        opacity: 1;
        -webkit-transform: translate(-400%, 100%) rotateX(20deg);
        -webkit-transform-origin: 50% 50%;
        filter: blur(0px);
    }

    100% {
        -webkit-transform: translate(-2300%, 600%) rotateX(-30deg);
        -webkit-transform-origin: 50% 100%;
        filter: blur(2px);
    }




}

@-webkit-keyframes fish3 {
    0% {
        opacity: 0.9;
        -webkit-transform: translate(0%, 0%) rotateX(0);
        -webkit-transform-origin: 50% 1800px;
        filter: blur(0px);
    }

    40% {
        opacity: 1;
        -webkit-transform: translate(600%, -150%) rotateX(-10deg);
        -webkit-transform-origin: 50% 1800px;
        filter: blur(0px);
    }

    100% {
        -webkit-transform: translate(1400%, -650%) rotateX(-30deg);
        -webkit-transform-origin: 50% 100%;
        filter: blur(2px);
    }
}



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

    .fish1,
    .fish2,
    .fish3 {

        width: 35px;
        height: 35px;
    }

    .fish2 {

        top: 40%;
        left: 20%;

    }

    .fish-group {

        top: 10%;
        left: 52%;

    }
}

/*-----------------------------------------------
    view
-----------------------------------------------*/

/* view */
.view {
    width: 100%;
    height: 100%;
    width: 900px;
    height: 900px;
    /*! background: #8ed78e82; */
    position: relative;
    cursor: move;

    /*! overflow: hidden; */
    /*! left: -5%; */
    /*! top: 10%; */
    z-index: 2;
    width: 80vw;
    height: 80vh;
    margin: auto;
}

.grab {}

.grab img {}

#scroll .view {
    overflow: scroll;
}

/*-----------------------------------------------
    list
-----------------------------------------------*/

.card-blur {
    filter: blur(4px);
    pointer-events: none;
}

.card-blur-no {
    filter: blur(0px);
    pointer-events: auto;
}




.list {
    /*display: none;*/
    position: fixed;
    width: 23%;
    background: #fff;
    border: 14px solid #fff;
    border-radius: 25px;
    left: 8%;
    z-index: 100;
    transform-origin: 50%;

    transition: all .3s ease;
    /*! min-width: 360px; */
}



.list:after {
    content: "";
    position: absolute;
    z-index: -1;
    background: #f8f5f5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;

}

tr {
    position: relative;
}

.list-icon {
    padding: 0 0 0 1%;
    border-bottom: 1px solid #ddd;
}

.list-icon img {
    width: 50%;
    padding: 0 0 0 3%;
    max-width: 75px;
    min-width: 60px;
}

table {
    position: relative;
    width: 92%;
    border-collapse: collapse;
    /*! background: #f8f5f5; */
    /*! border: 0px; */
    border-collapse: collapse;
    margin: 9% auto 5%;
}

th,
td {
    color: #000;
    padding: 4px 13px 13px 13px;
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
    width: 33%;
    text-align: justify;
    letter-spacing: 0.01rem;
}

th {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    color: #2970f9;
}



/*.list-out{
    bottom: 9%;
}
*/
.list-out {
    transform-origin: 50%;
    width: 37%;
    margin: auto;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    max-width: 750px;
    animation: bounceInUp .3s ease-out 0s 1 both;
    opacity: 1;
    pointer-events: auto;
}

@keyframes bounceInUp {
    0% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes bounceInUp2 {
    0% {
        transform: translate(0%, 0%) scale(0.8);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@keyframes bounceInUp3 {
    0% {
        transform: translate(0%, 0%) scale(0.65);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.65);
    }
}

.list-back {
    transform-origin: 50%;
    bottom: -45%;
    animation: slowFloat 3s ease-out 0s infinite both;
    opacity: 1;
    pointer-events: auto;
}

.list-hide {
    bottom: -200%;
    opacity: 0;
    pointer-events: none;
}

.list-opening {
    bottom: -200%;
    animation: listOpening .6s cubic-bezier(.250, .460, .450, .940) 2.7s 1 both;
}

@keyframes listOpening {
    0% {
        bottom: -200%;
        transform: skewY(-20deg) rotateY(-200deg);
    }


    100% {
        bottom: -45%;
        transform: skewY(0deg) rotateY(0deg);
    }
}



@keyframes slowFloat {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, 20px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slowFloat2 {
    0% {
        transform: scale(.7) translate3d(-30%, 20%, 0);
    }

    50% {
        transform: scale(.7) translate3d(-30%, 28%, 0);
    }

    100% {
        transform: scale(.7) translate3d(-30%, 20%, 0);
    }
}

@keyframes slowFloat3 {
    0% {
        transform: scale(.65) translate3d(-40%, 50%, 0);
    }

    50% {
        transform: scale(.65) translate3d(-40%, 55%, 0);
    }

    100% {
        transform: scale(.65) translate3d(-40%, 50%, 0);
    }
}




@media screen and (min-width: 1921px) {

    th,
    td {

        font-size: 1rem;

    }

    .list {

        width: 22%;

    }

    .list-back {
        bottom: -40%;
    }

    @keyframes listOpening {
        0% {
            bottom: -200%;
            transform: skewY(-20deg) rotateY(-200deg);
        }


        100% {
            bottom: -40%;
            transform: skewY(0deg) rotateY(0deg);
        }
    }

}


.card-blur {
    filter: blur(10px);
}


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


    .list {

        width: 38%;

    }

    .list-out {
        transform: translate(-50%, -50%) scale(0.8);
        width: 60%;
        animation: bounceInUp2 .5s ease-out 0s 1 both;
    }

    .list-back {
        bottom: -40%;
        animation: slowFloat2 5s ease-out 0s infinite both;
    }

    @keyframes listOpening {
        0% {
            bottom: -200%;
            transform: skewY(-20deg) rotateY(-200deg);
        }


        100% {
            bottom: -40%;
            transform: skewY(0deg) rotateY(0deg);
        }
    }
th {
    font-size: 0.9rem;
    letter-spacing: -0.01rem;
}



    .list-opening {
        bottom: -200%;
    }


    th,
    td {

        font-size: 1.2rem;

    }

}

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



    .list-out {
        transform: translate(-50%, -50%) scale(0.65);
        animation: bounceInUp3 .5s ease-out 0s 1 both;
    }

    .list-back {
        /*! bottom: -45%; */
        animation: slowFloat3 5s ease-out 0s infinite both;
    }

    @keyframes listOpening {
        0% {
            bottom: -200%;
            transform: skewY(-20deg) rotateY(-200deg);
        }


        100% {
            bottom: -23%;
            transform: skewY(0deg) rotateY(0deg);
        }
    }

    .list-opening {
        bottom: -200%;
    }


}


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


    .list {
        /*! display: none; */
        transform-origin: 50%;
        position: fixed;
        width: 100%;
        transform-origin: 50%;
        margin: auto;
        transform: translate(-50%, -50%) scale(0.9);
        top: -150%;
        left: 50%;
        bottom: initial;
        max-width: 750px;
        opacity: 1;
        transition: all .3s ease;
        z-index: 100;

    }

    .list-out {
        transform-origin: 50%;
        width: 100%;
        margin: auto;
        transform: translate(-50%, -50%) scale(0.9);
        left: 50%;
        top: 54%;
        bottom: initial;
        max-width: 750px;
        animation: bounceInUp .3s ease-out 0s 1 both;
        opacity: 1;
        pointer-events: auto;
    }

@keyframes bounceInUp {
    0% {
        transform: translate(0%, 0%) scale(0.9)accumulatematrix;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.9);
    }
}



    .list-hide {
        top: -150%;
        bottom: initial;
        opacity: 1;
        pointer-events: none;
    }

    .list-back {
        transform-origin: 50%;
        bottom: initial;
        animation: none;
        opacity: 1;
        pointer-events: auto;
    }


    th,
    td {
        /*! color: #000; */
        font-size: 0.85rem;
        width: 33%;
        text-align: left;
        padding: 3px 4px 9px 4px;
    }

    th {
        font-size: 1rem;
    }

    table {
    width: 93%;
    margin: 9% auto 2%;
}


}

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

    .list {

        transform: translate(-50%, -50%) scale(0.85);
    }
}




/*-----------------------------------------------
    box-m
-----------------------------------------------*/

.btn-open4,
.btn-open4-m,
.btn-closed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;

}

.btn-open4-m {
    display: none;
    /*! background: #ad85e891; */
}

.btn-closed {
    display: none;
    /*! background: pink; */
    /*! background: #2effc49c; */

}


.box1,
.box2,
.box3 {
    width: 100%;
    height: 85vh;
    /*! position: absolute; */
    top: 0;
    left: 0;

    display: none;
    padding: 10% 5% 5% 10%;
}


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

    .btn-open4 {

        display: none;
    }

    .btn-open4-m {
        display: block;
    }


}