/*  index
-------------------------------------------------
    - Import
    - text
    - button
    - pc-layout
    - mobile-layout
    - css3-class
    - keyframes
-------------------------------------------------*/



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

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&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/css?family=Playfair+Display&display=swap');
@import url('fullpage.css');
@import url('default.css');
@import url('menu.css');




.wallpaper_ {
    position: absolute;
    width: 50px;
    height: 200px;
    z-index: 10;
    /*! background: #ff000082; */
    bottom: 70px;
    right: 40px;
    cursor: pointer;
}

.wallpaper_ a {
    width: 100%;
    height: 100%;
    display: block;
}

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

.df-width {
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 768px;
}


/*-----------------------------------------------
    page-frame
-----------------------------------------------*/
.pages {
    position: relative;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.wrap-box {
    position: relative;
    top: 10%;
    right: 0;
    left: 0;
    margin: 0px auto 0;
    padding: 0;
    z-index: 6;
    width: 100%;
    height: 95%;
    max-width: 1200px;
}



.book {
    background: url(../images/book.jpg) no-repeat center 70% /cover;
}




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


    .book {
        background-size: cover;
    }
}


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

html,
body {
    /*  background: url(../images/index_01.jpg) no-repeat center top,
    url(../images/index_02.jpg) repeat center top;*/
    background: #000;
}

/*prelodd*/
/*body::before {
    content: '';
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    background-image: url(../images/book/001.jpg), url(../images/book/002.jpg), url(../images/book/003.jpg),
        url(../images/book/004.jpg), url(../images/book/005.jpg), url(../images/book/008.jpg),
        url(../images/book/007.jpg), url(../images/book/008.jpg), url(../images/book/009.jpg),
        url(../images/book/010.jpg), url(../images/book/011.jpg), url(../images/book/012.jpg),
        url(../images/book/013.jpg), url(../images/book/014.jpg), url(../images/book/015.jpg),
        url(../images/news-01.png), url(../images/news-02.png), url(../images/news-03.png), url(../images/news-04.png);
}
*/

.section {
    /*    width: 100%;
    text-align: justify;*/
    overflow: hidden;
}


.footer {
    margin: auto 0;
    padding: 0 0 8% 0;
    width: 100%;
    height: 0;
    border: 0;
    text-align: center;
    background: #fafafa url(../images/footer.png) center center /1000px no-repeat;
}

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

        background: #fafafa url(../images/footer.png) center center /768px no-repeat;
    }
}

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

        background: #fafafa url(../images/footer-m.jpg) center center /80% no-repeat;
        padding: 0 0 30% 0;
        /*! max-width: 80%; */
        /*! text-align: center; */
        margin: auto;
    }
}


/*-----------------------------------------------
    section-hover
-----------------------------------------------*/
.section.active {
    -webkit-animation: scaleA 1s ease both;
}

.no-effect.active {
    -webkit-animation: scaleA 0s ease both;
}

.section.active .fog {
    -webkit-animation: scaleA 1s cubic-bezier(.250, .460, .450, .940) .5s both;
}

.section.active .book {
    -webkit-animation: scaleA 1s cubic-bezier(.250, .460, .450, .940) .2s both;
}

@-webkit-keyframes scaleA {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.4);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}



/*-----------------------------------------------
    item-effect
-----------------------------------------------*/
.img_slogan01 {
    position: absolute;
    margin: -200px 0 0 -50px;
}

.img_slogan02 {
    position: absolute;
    margin: -50px 0 0 -10px;
}

.active .logo {
    -webkit-animation: fadeInDown 1.5s .5s ease both;
}

.active .img_slogan01 {
    -webkit-animation: fadeInDown 1.5s .2s ease both;
}

.active .img_slogan02 {
    -webkit-animation: fadeInDown 1.5s .2s ease both;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}



@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        transform: translateY(-700px);
        transform: scale(1.5);
    }

    20%,
    40% {
        transform: scale(1);
        transform: translateY(600px);
    }

    100% {
        transform: scale(1.2);
        transform: translateY(-700px);
    }
}

@keyframes bounceInStay {
    0% {
        transform: translateY(-700px);
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
        transform: translateY(600px);
    }

}




/*-----------------------------------------------
    book
-----------------------------------------------*/

.book-effect {
    position: absolute;
    top: -70px;
    left: -13px;
    z-index: 10;
    width: 1400px;
    background: url(../images/book/000.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}

.flipbook {
    animation: flipbook 2s linear 0s 1 both;
}

@media screen and (max-width:1400px) {
    .book-effect {
        top: -30px;

    }
}


/*-----------------------------------------------
    flipbook
-----------------------------------------------*/
@keyframes flipbook {
    0% {
        background: url(../images/book/000.jpg);
    }

    10% {
        background: url(../images/book/000.jpg);
    }

    20% {
        background: url(../images/book/001.jpg);
    }

    30% {
        background: url(../images/book/002.jpg);
    }

    35% {
        background: url(../images/book/003.jpg);
    }

    40% {
        background: url(../images/book/004.jpg);
    }

    45% {
        background: url(../images/book/005.jpg);
    }

    50% {
        background: url(../images/book/006.jpg);
    }

    55% {
        background: url(../images/book/007.jpg);
    }

    60% {
        background: url(../images/book/008.jpg);
    }

    65% {
        background: url(../images/book/009.jpg);
    }

    70% {
        background: url(../images/book/010.jpg);
    }

    75% {
        background: url(../images/book/011.jpg);
    }

    80% {
        background: url(../images/book/012.jpg);
    }

    90% {
        background: url(../images/book/013.jpg);
    }

    95% {
        background: url(../images/book/014.jpg);
    }

    100% {
        background: url(../images/book/000.jpg);
    }
}


.fog {
    position: absolute;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

.book_ {
    position: absolute;
    top: -3%;
    left: 0;
    z-index: 15;
    /*! transform: rotate(-3deg); */
}



.read {
    position: absolute;
    top: 25%;
    left: 33%;
    z-index: 20;
    cursor: pointer;
    transition: all .3s ease;
    width: 185px;
}

.read:hover {
    left: 35%;
    transition: all .3s ease;
}

.book-cover {
    position: absolute;
    width: 250%;
    height: 100%;
    /*! background: #ff00008a; */
    z-index: 10;

    top: 0;
    left: 0;
}

/*flipbook*/
#flipbook {
    /*display: none;*/
    position: absolute;
    margin: 102px 0 0 256px;
    z-index: 15;
    width: 850px;
    height: 528px;
    background: #dbcdb4;
    /*background: url(../images/book/p1.jpg) 0 top  no-repeat ;*/

    /*! opacity: 0.5; */
}


.p-0,
.p-1,
.p-2,
.p-3,
.p-4,
.p-5,
.p-6,
.p-7,
.p-8,
.p-9,
.p-10,
.p-11,
.p-12 {
    width: 100%;
    height: 100%;
    background: url(../images/book/p1.jpg) center top no-repeat;
}

.p-0 {
    background: url(../images/book/p0.jpg) 0 top no-repeat;
}

.p-2 {
    background: url(../images/book/p2.jpg) 0 top no-repeat;
}

.p-3 {
    background: url(../images/book/p3.jpg) center top no-repeat;
}

.p-4 {
    background: url(../images/book/p4.jpg) 0 top no-repeat;
}

.p-5 {
    background: url(../images/book/p5.jpg) center top no-repeat;
}

.p-6 {
    background: url(../images/book/p6.jpg) 0 top no-repeat;
}

.p-7 {
    background: url(../images/book/p7.jpg) center top no-repeat;
}

.p-8 {
    background: url(../images/book/p8.jpg) 0 top no-repeat;
}

.p-9 {
    background: url(../images/book/p9.jpg) center top no-repeat;
}

.p-10 {
    background: url(../images/book/p10.jpg) 0 top no-repeat;
}

.p-11 {
    background: url(../images/book/p11.jpg) center top no-repeat;
}

.p-12 {
    background: url(../images/book/p12.jpg) 0 top no-repeat;
}

@media screen and (max-width:1440px) {
    .book {
        /*! top: 11%; */

    }

    .read {
        top: 50%;

    }
}




/*-----------------------------------------------
    fly-crisom
-----------------------------------------------*/
.crisom {
    position: absolute;
    /*! background: #55555573; */
    bottom: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 50%;
    overflow: hidden;
    pointer-events: none;
}

.active .crisom1 {
    position: absolute;
    bottom: -5%;
    left: 50%;
    animation: crisom 9s linear 3s 2 both;
}

.active .crisom2 {
    position: absolute;
    bottom: -5%;
    left: 50%;
    animation: crisom 8s linear .8s 2 both;
}

.active .crisom3 {
    position: absolute;
    bottom: -8%;
    left: 60%;
    animation: crisom 20s linear 1.5s 2 both;
}

.active .crisom4 {
    position: absolute;
    bottom: -7%;
    left: 70%;
    animation: crisom 19s linear 1.8s 2 both;
}

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

    20% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
        transform: translate3d(-250%, -30%, 0);
    }
}



/*-----------------------------------------------
    video
-----------------------------------------------*/
.play {
    position: absolute;
    top: 50vh;
    left: -100px;
    /*! background: #555; */
    padding-left: 54px;
    width: 250px;
    height: 200px;
    cursor: pointer;
    transition: all .3s ease;
}

.play:hover {
    position: absolute;
    top: 50vh;
    left: 0;
    cursor: pointer;
    transition: all .3s ease;
}


.video-header {
    display: block;
    position: absolute;
    top: 50%;
    /*! right: 0; */
    left: 50%;
    margin: auto;
    z-index: 102;
    width: 100%;
    overflow: hidden;
    pointer-events: auto;
    /*! cursor: pointer; */
    /*! opacity: 0; */
    transform: translate(-50%, -50%);
}

/*for js*/
#video-opening,
#video-header {
    width: 50%;
    min-width: 100%;
}


@media screen and (max-width:1400px) {
    .play {
        left: -100px;
        padding-left: 54px;
        width: 200px;
        height: 90px;
    }
}