/*  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');

/*-----------------------------------------------
   ad
-----------------------------------------------*/

.ad{
    position: fixed;
    right: 20px;
    top: 72%;
    width: 10%;
    max-width: 298px;
    height: 20vw;
    background: url(../images/ad.png) center top / 100% no-repeat;
     animation:lighten 1.5s ease-out 0s infinite both;


    z-index: 50;
}

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


@keyframes lighten
{
/*0%{filter:brightness(1);transform: scale(1); filter: blur(0px);}
20%{filter:brightness(1.5);transform: scale(1.05) translate(5%,0%);filter: blur(0px);}
40%,100%{filter:brightness(1);transform: scale(1);filter: blur(0px);}*/
 0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}



@media screen and (max-width:768px)
{
.ad{
    left: 20px;
    top: 65%;
    width: 30%;
    max-width: 298px;
    height: 31vw;


}
}


/*-----------------------------------------------
     holder
-----------------------------------------------*/

#holder {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 1920px;
}


@media screen and (max-width:1919px)
{
    #holder{
        display: none;
    }
}

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

h1,
h2 {
    color: #f1355f;
    font-size: 1.2rem;
    font-weight: 500;

}

p {
    font-weight: 400;
}

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

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


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

html,
body {
    background: #eee;
}

/*preload*/
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';

    background-image:
         url(../images/tit-header.png),
         url(../images/tit-world.png),
         url(../images/tit-hero.png),
         url(../images/tit-gallery.png),
         url(../images/nav-bg.png),

         url(../images/world/world.jpg),
         url(../images/world/world1.jpg),
         url(../images/world/world2.jpg),
         url(../images/hero/001.png),
         url(../images/hero/002.png),
         url(../images/hero/003.png),
         url(../images/hero/004.png),
         url(../images/hero/005.png),
         url(../images/gallery/001.jpg),
         url(../images/gallery/002.jpg),
         url(../images/gallery/003.jpg),
         url(../images/gallery/004.jpg);

}



@media screen and (max-width:768px)
{
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';

    background-image:
         url(../images/world/world-m.jpg),
         url(../images/world/world1-m.jpg),
         url(../images/world/world2-m.jpg),
         url(../images/hero/001-1-m.png),
         url(../images/hero/002-1-m.png),
         url(../images/hero/003-1-m.png),
         url(../images/hero/004-1-m.png),
         url(../images/hero/005-1-m.png),
         url(../images/hero/001-0-m.png),
         url(../images/hero/002-0-m.png),
         url(../images/hero/003-0-m.png),
         url(../images/hero/004-0-m.png),
         url(../images/hero/005-0-m.png),
         url(../images/gallery/001-m.jpg),
         url(../images/gallery/002-m.jpg),
         url(../images/gallery/003-m.jpg),
         url(../images/gallery/004-m.jpg);

}

}








/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    max-width: 1920px;
    margin: auto;
    animation: blur .8s ease-out 0s 1 both;
    /*background: url(../images/index_01.jpg) center 0 no-repeat;*/
}

section {
    width: 100%;
    text-align: justify;
    /*! height: 1080px; */
    background: #fff;
    overflow: hidden;
}
section:before {
    content: '';
    position: absolute;
    top: 4.03vw;
    width: 97%;
    height: 1px;
    background: rgba(0, 0, 0, 0.25);
    right: 0;
    z-index: 15;
}

section:after {
    content: '';
    position: absolute;
    top: 3.98vw;
    width: 25px;
    height: 3px;
    background: rgb(0, 0, 0);
    left: 2%;
    z-index: 16;
}
.bottom-line{
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0px;
}
.bottom-line:before {
    content: '';
    position: absolute;
    bottom: 0.3vw;
    width: 86%;
    height: 1px;
    background: rgba(0, 0, 0, 0.25);
    left: 0px;
    z-index: 15;
}
.bottom-line:after {
    content: '';
    position: absolute;
    bottom: 0.25vw;
    width: 25px;
    height: 3px;
    background: rgb(0, 0, 0);
    right: 13%;
    z-index: 16;
}


@media screen and (min-width:1921px) {
section:before {
    content: '';
    top: 3.03vw;

}

section:after {
    content: '';
    top: 2.98vw;
}
}




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

section:before {
    content: '';
    top: 7.03vw;
    width: 97%;
    height: 0.05rem;
    right: 0;
}

section:after {
    content: '';
    top: 6.98vw;
    width: 25px;
    height: 3px;
    left: 2%;
}

.bottom-line{
    width: 75%;
}
section:after {
    content: '';
    top: 6.8vw;
    width: 10px;
    height: 2px;
    left: 2%;
}

.bottom-line:after {
    content: '';
    bottom: 0.17vw;
    width: 10px;
    height: 2px;
    right: 13%;
}
.bottom-line:before {
    content: '';
    width: 86%;
    height: 0.05rem;
}
}

/*-----------------------------------------------
    header
-----------------------------------------------*/
header {
    /*height: 1080px;*/
    padding: 0 0 56% 0;
    /*background: #3498db;*/
    /*box-shadow: 0 6px 16px 0 rgba(81, 178, 244, 0.35);*/
    background: url(../images/header.jpg) center 0 /100% no-repeat;

    /*! margin-top: 30px; */
}




@media screen and (max-width:768px) {
    header {
        background: url(../images/header-m.jpg) center top /100% no-repeat;
        padding: 0 0 188% 0;
        height: auto;
            /*! background: rgba(203, 152, 152, 0.6); */

    }


}

/*-----------------------------------------------
    footer
-----------------------------------------------*/

footer {
    width: 100%;
    height: 10vw;
    background: rgba(232, 232, 232, 0.6);
}


.copyright {
    position: relative;
    width: 100%;
    height: 100%;
}

.copyright {
    position: relative;
    width: 40%;
    height: 100%;
    margin: 0 0 0 3%;
}

.copyright ul {
    display: flex;
    width: 100%;
}

.copyright ul li:nth-child(1) {
    flex: 1;
    background: url(../images/info.png) 0 50% /90% no-repeat;
}

.copyright ul li:nth-child(2) {
    flex: 1;
    background: url(../images/logos.png) 100% 60% /90% no-repeat;
}

@media screen and (max-width:1600px) {
    footer {
        height: 13vw;
    }

    .copyright ul li:nth-child(1) {
        background:  url(../images/info.png) 0 60% /90% no-repeat;
    }

    .copyright ul li:nth-child(2) {
        background:url(../images/logos.png) 100% 65% /95% no-repeat;
    }

}


@media screen and (max-width:768px) {
    footer {
        height: 85vw;
        background: #ffffffad url(../images/footer-m.png) center 95% /95% no-repeat;
    }

    .copyright {
        opacity: 0;
    }
}


/*-----------------------------------------------
    world
-----------------------------------------------*/
.world {
    padding: 0 0 61% 0;
    background: url(../images/world/world.jpg) center 0 /100% no-repeat;
}
.world-pos{
    position: absolute;
    width: 50px;
    height: 50px;
        /*! background: rgba(203, 152, 152, 0.6); */
        z-index: 100;
        top: 5%;
        left: 0;

}
.world1 { background: url(../images/world/world1.jpg) center 0 /100% no-repeat; }
.world2 { background: url(../images/world/world2.jpg) center 0 /100% no-repeat; }

.world-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/world/frame.png) center 0 /100% no-repeat;

    top: 0;
    left: 0;
    z-index: 14;
    pointer-events: none;
}

.box-world{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;

}

.box-world1{background: url(../images/world/world1.jpg) center 0 /100% no-repeat;}
.box-world2{background: url(../images/world/world2.jpg) center 0 /100% no-repeat;}

/*for-world-box*/

.world-effect {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.95);*/
    background: rgba(250, 250, 250, 0.98);
    top: 0;
    left: 0;

    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
     -webkit-animation: 2.5s maskBOXIn2 cubic-bezier(.87, 0, .13, 1) 0s 1 forwards;
    animation: 2.5s maskBOXIn2 cubic-bezier(.87, 0, .13, 1) 0s 1 forwards;
}



@keyframes maskBOXIn2 {
    0% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }

    20% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    21% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    60%,
    100% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
}


/*btn*/
.btn-world{
    position: absolute;

    color:#fff;
    text-align: center;
    line-height: 27px;
    z-index: 5;
    letter-spacing: 0.1rem;
    font-size: 0.9rem;
    cursor: pointer;
    max-width: 120px;
    width: 20%;

}
.go-world1 { top: 22vw; left: 4%;  height: 27px; border: 0;background: rgb(210, 142, 220);  }
.go-world2 { top: 23vw; left: 78%;  height: 27px;background: rgb(3, 145, 255);  }


.world1-content .box-world-close,.next-go-world2{
    top: -3vw;
    left: 82%;
    background: rgb(75, 58, 72);

    width: 20%;
    height: 27px;
}

.world2-content .box-world-close{
    top: -2vw;
    left: 11%;
    background: rgb(75, 58, 72);

    width: 20%;
    height: 27px;


}
.go-world1::before,.go-world2::before,.box-world-close::before,.next-go-world2::before{
    pointer-events: none;
    content: 'MORE';
    color: rgb(210, 142, 220);
    text-align: center;
    position: absolute;
    z-index:0;
    width: 100%;
    height: 105%;
        background: rgba(250, 250, 250, 0.95);
        top: -1px;
        left: 0;

    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: 4.5s maskIn cubic-bezier(.87,0,.13,1) .2s infinite reverse;
    animation: 4.5s maskIn cubic-bezier(.87,0,.13,1) .2s  infinite reverse;
}


.go-world2::before {
    color: rgb(3, 145, 255);
     -webkit-animation: 4.1s maskIn cubic-bezier(.87,0,.13,1) .5s infinite forwards;
    animation: 4.1s maskIn cubic-bezier(.87,0,.13,1) .5s  infinite forwards;
}
.box-world-close::before{
    content: 'BACK';
    color: rgb(75, 58, 72);
     -webkit-animation: 4.1s maskIn cubic-bezier(.87,0,.13,1) .5s infinite forwards;
    animation: 4.1s maskIn cubic-bezier(.87,0,.13,1) .5s  infinite forwards;
}

@keyframes maskIn {
    0% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }

    10% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    11% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    20%,100% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
}


/*world1-content*/
.world1-content{
    position: absolute;
    width: 43%;
    height: 23vw;
        /*! background: rgba(203, 152, 152, 0.6); */
        right: 2%;
        top: 25vw;
}

.world2-content{
    display: none;
    position: absolute;
    width: 43%;
    height: 23vw;
        /*! background: rgba(203, 152, 152, 0.6); */
        left: 2%;
        top: 25vw;
}



/*world-photo_ */
.world-photo_{
    position: absolute;
    z-index: 5;
    cursor: pointer;
    width: 15%;
    border: 1px solid #000;
}


.world-photo01 { top: 42vw; left: 3%; }
.world-photo02 { top: 38vw; right: 4%; }

.world-photo03 {top: 1vw; left: 14%; width: 40%;  }
.world-photo04 {top: 1vw; left: 57%; width: 40%;  }

.world-photo05 {top: 12vw; left: 57%; width: 40%;  }


.world-photo06 {top: 3vw; left: 10%; width: 40%;  }
.world-photo07 {top: 3vw; left: 52%; width: 40%;  }

@media screen and (min-width:1921px) {
.go-world1 { top: 17vw; left: 4%;   }
.go-world2 { top: 17vw; left: 78%;   }

.world-photo01 { top: 33vw; left: 3%; }
.world-photo02 { top: 29vw; right: 4%; }

.world-photo03 {top: 0vw; left: 14%; width: 40%;  }
.world-photo04 {top: 0vw; left: 57%; width: 40%;  }

.world-photo05 {top: 7vw; left: 57%; width: 40%;  }

.world-photo06 {top: 0vw; left: 10%; width: 40%;  }
.world-photo07 {top: 0vw; left: 52%; width: 40%;  }
}



@keyframes letter
{
0%{opacity:0;transform:translateX(150px);}
100%{opacity:1;transform:translateX(0);}
}
@keyframes letter2
{
0%{opacity:0;transform:translateX(-150px);}
100%{opacity:1;transform:translateX(0);}
}


@media screen and (min-width:1921px) {
.world1-content{
        top: 11vw;
}

}


@media screen and (max-width:1800px)
{
.btn-world{transform: scale(0.8);}
.go-world2{
    top: 23vw;


    left: 76%;
}
}

/*.world1-content{
    position: absolute;
    width: 49%;
    height: 23vw;
        right: 2%;
        top: 11.5vw;
}*/

@media screen and (max-width:768px) {
    .world {
        background: url(../images/world/world-m.jpg) center top /100% no-repeat;
        padding: 0 0 221% 0;
        height: auto;
    }
.world-pos{
        /*! background: rgba(203, 152, 152, 0.6); */
        top: -2%;

}
.world1-content{
    position: absolute;
    width: 49%;
    height: 23vw;
        /*! background: rgba(203, 152, 152, 0.6); */
        right: 2%;
        top: 15vw;
}
    .box-world1{background: url(../images/world/world1-m.jpg) center 0 /100% no-repeat;}
    .box-world2{background: url(../images/world/world2-m.jpg) center 0 /100% no-repeat;}


/*world-photo_ */
.world-photo_{
    width: 34%;
}

.world-photo01 { top: 131vw; left: 11%; }
.world-photo02 { top: 171vw; right: initial; left: 11%;}

/*.world-photo03 {top: 1vw; left: 14%; width: 40%;  }
.world-photo04 {top: 1vw; left: 57%; width: 40%;  }

.world-photo05 {top: 12vw; left: 57%; width: 40%;  }*/
.world-photo03 {top: 60vw; left: 6%; width: 78%;  }
.world-photo04 {top: 105vw; left: 6%; width: 78%;  }

.world-photo05 {top: 125vw; left: 6%; width: 78%;  }

/*.world-photo06 {top: 3vw; left: 10%; width: 40%;  }
.world-photo07 {top: 3vw; left: 52%; width: 40%;  }
*/
.world-photo06 {top: 100vw; left: 11%; width: 78%;  }
.world-photo07 {top: 120vw; left: 11%; width: 78%;  }

/*btn*/
.btn-world{
    transform: scale(1);
    line-height: 18px;
    letter-spacing: 0.1rem;
    font-size: 0.65rem;
    width: 18%;

}
.go-world1 { top: 151vw; left: 76%;  height: 18px; border: 0; }
.go-world2 { top: 191vw; left: 76%; height: 16px;  }

.go-world1::before,.go-world2::before,.box-world-close::before,.next-go-world2::before {
    font-size: 0.65rem;
}


.world1-content .box-world-close,.next-go-world2{
    top: 50vw;
    left: 47%;

    width: 37%;
    height: 16px;
    max-width: 120px;
}

.world2-content .box-world-close{
    top: 60vw;
    left: 10%;
    width: 45%;
    height: 16px;

}


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


.world-photo01 { top: 130vw; left: 11%; }
.world-photo02 { top: 181vw; right: initial; left: 11%;}

.world-photo03 {top: 60vw; left: 6%; width: 78%;  }
.world-photo04 {top: 105vw; left: 6%; width: 78%;  }

.world-photo05 {top: 125vw; left: 6%; width: 78%;  }


.world-photo06 {top: 100vw; left: 11%; width: 78%;  }
.world-photo07 {top: 120vw; left: 11%; width: 78%;  }


.go-world1 { top: 144vw; left: 76%;  height: 16px; border: 0; }
.go-world2 { top: 195vw; left: 76%; height: 18px;  }

.go-world1::before,.go-world2::before,.box-world-close::before,.next-go-world2::before {
    font-size: 0.65rem;
}


}





/*-----------------------------------------------
    hero
-----------------------------------------------*/
.hero {
    padding: 0 0 61% 0;
    /*background: #3498db;*/
    /*box-shadow: 0 6px 16px 0 rgba(81, 178, 244, 0.35);*/
    background: url(../images/hero/bg.jpg) center 0 /100% no-repeat;

}

.hero-pos{
    position: absolute;
    width: 50px;
    height: 50px;
        /*! background: rgba(203, 152, 152, 0.6); */
        z-index: 100;
        top: 5%;
        left: 0;

}


.hero-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/hero/frame.png) center 0 /100% no-repeat;

    top: 0;
    left: 0;
    z-index: 11;
    pointer-events: none;
}


.hero-info {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/hero/001-3.png) center 0 /100% no-repeat;
    top: 0;
    left: 0;
    z-index: 11;
    animation: heroInfo 0.8s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
    pointer-events: none;
}

@keyframes heroInfo {
    0% {

        -webkit-filter: blur(5px) opacity(0%);
        filter: blur(5px) opacity(0%);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transform: translateY(10px) translateX(0px) skew(0deg, 20deg);

    }

    100% {
        -webkit-filter: blur(0) opacity(100%);
        filter: blur(0) opacity(100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        transform: translateY(0) translateX(0) skew(0deg, 0deg);
    }

}


.girl {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/hero/001.jpg) center 0 /100% no-repeat;
    /*background: url(../images/hero/001.png) center 0 /100% no-repeat;*/

    top: 0;
    left: 0;
    z-index: 1;
    animation: girl 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0s 1 both;
}

.change{
    position: absolute;
    width: 15%;
    height: 60px;
    top: 67%;
    left: 22%;
    z-index: 20;
    max-width: 130px;
    background: url(../images/change1_.png) center top / 100% no-repeat ;
    animation: blur 0.4s cubic-bezier(.250, .460, .450, .940) 0.5s 1 both;

}

.change_{
    position: absolute;
    /*! width: 100%; */
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/change1_.png) center top / 100% no-repeat ;
    display: none;
    cursor: pointer;
    max-width: 100px;

}
.change1-0,.change2-0,.change5-0{
    width: 50%;
    left: 0%;
    background: url(../images/change_.png) 0% top /200% no-repeat;
}
.change3-0,.change4-0{
    width: 50%;
    left: 0%;
    background: url(../images/change2_.png) 0% top /200% no-repeat;
}
.change1-1,.change2-1,.change5-1{
    width: 50%;
    left: 50%;
    background: url(../images/change_.png) 100% top /200% no-repeat;
}
.change3-1,.change4-1{
    width: 50%;
    left: 50%;
    background: url(../images/change2_.png) 100% top /200% no-repeat;
}
.change1-1{
    display: block;
}



@keyframes girl {

    0% {
        opacity: 0;

        -webkit-filter: blur(15px) opacity(0%);
        filter: blur(5px) opacity(0%);
        transform:scale(1.5);
        /*clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);*/
        /*transform: translate(2500px, 2000px) skew(-50deg, 30deg);*/

    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0) opacity(100%);
        filter: blur(0) opacity(100%);
          transform:scale(1);
        /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);*/
        /*transform: translate(0, 0) skew(0deg, 0deg);*/
    }


}

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

    transform: scale(0.8) translate(-8%,-8%);
}

}



@media screen and (max-width:768px) {
    .hero {
        background: url(../images/hero/bg-m.jpg) center top /100% no-repeat;
        padding: 0 0 221% 0;
    }

    .hero-frame {

        background: url(../images/hero/frame-m.png) center 0 /100% no-repeat;


    }

.change{

    transform: scale(1.2) translate(0,0%);
    top: 79vw;
    left: 14%;
}

.change22-m{
    background: url(../images/change22_.png) center top / 100% no-repeat ;

}

.change1-1,.change2-1,.change3-1,.change4-1,.change5-1{
     display: block;
}
.girl {

    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
}


/*-----------------------------------------------
    feature
-----------------------------------------------*/
.feature {
    padding: 0 0 61% 0;
    /*background: #3498db;*/
    /*box-shadow: 0 6px 16px 0 rgba(81, 178, 244, 0.35);*/
    background: url(../images/feature/bg.jpg) center 0 /100% no-repeat;

}

.feature-pos{
    position: absolute;
    width: 50px;
    height: 50px;
        /*! background: rgba(203, 152, 152, 0.6); */
        z-index: 100;
        top: 12%;
        left: 0;

}


.feature-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/feature/frame.png) center 0 /100% no-repeat;

    top: 0;
    left: 0;
    z-index: 11;
    pointer-events: none;
}


@media screen and (max-width:768px) {
    .feature {
        background: url(../images/feature/bg-m.jpg) center top /100% no-repeat;
        padding: 0 0 221% 0;
    }

   /* .feature-frame {

        background: url(../images/feature/frame-m.png) center 0 /100% no-repeat;


    }*/
}

/*-----------------------------------------------
    gallery
-----------------------------------------------*/

.gallery {
    padding: 0 0 61% 0;
    /*background: #3498db;*/
    /*box-shadow: 0 6px 16px 0 rgba(81, 178, 244, 0.35);*/
    /*background: url(../images/gallery.jpg) center 0 /100% no-repeat;*/

}





.gallery-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/gallery/frame.png) center 0 /100% no-repeat;

    top: 0;
    left: 0;
    z-index: 8;
    pointer-events: none;
}

.gallery-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/gallery/001.jpg) center 0 /100% no-repeat;

    top: 0;
    left: 0;
    z-index: 1;
    animation: galleryBg 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0s 1 both;
}


@keyframes galleryBg {
    0% {
        filter: blur(10px);
        transform: scale(1) rotateZ(0deg);
        opacity: 0;
    }

    50% {
        filter: blur(0px);
        transform: scale(1.2) rotateZ(5deg);
        opacity: 1;
    }

    90% {
        filter: blur(0px);
        transform: rotateZ(0deg);
        opacity: 1;
    }

    100% {
        filter: blur(0px);
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
}




@media screen and (max-width:768px) {
    .gallery {
        background: url(../images/gallery/bg.jpg) center top /100% no-repeat;
        padding: 0 0 221% 0;
        height: auto;
    }

.gallery-frame {

    background: url(../images/gallery/frame-m.png) center 0 /100% no-repeat;

}


}

/*-----------------------------------------------
    album
-----------------------------------------------*/
.photo01-ga,.photo02-ga{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
        /*! background: rgba(203, 152, 152, 0.6); */

}

.gallery-sl {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 22%;
    background: url(../images/gallery/gallery-sl.png) center top / 100% no-repeat;
    z-index: 20;


    height: 30%;
}

.album {
    position: absolute;
    margin: auto;
    top: 15%;
    left: 20%;
    width: 70%;
    height: 60%;
    /*! background: rgba(203, 152, 152, 0.6); */
    z-index: 9;


    /*! overflow: hidden; */
    transition: all .3s ease;
}


.photo_ {
    position: absolute;
    width: 40%;
    border: 8px solid #fff;
    cursor: pointer;
}

.photo_ img {
    max-width: 100%;
}

.album-pos1 { top: 15%; left: 20%; }
.album-pos1 .photo01 { top: 25%; left: -5%; transition: all .5s ease;transform: rotate(10deg) skew(0deg);  }
.album-pos1 .photo02 { top: 66%; left: 0; transition: all .8s ease;transform: rotate(-17deg) skew(0deg);  }

.album-pos2 { top: 15%; left: 66%; }
.album-pos2 .photo01 { top: 20%; left: -5%; transition: all .5s ease;transform: rotate(-10deg) skew(0deg);  }
.album-pos2 .photo02 { top: 66%; left: 0; transition: all .8s ease;transform: rotate(17deg) skew(0deg);  }

.album-pos3 { top: 24%; left: 66%; }
.album-pos3 .photo01 { top: 20%; left: 2%; transition: all .5s ease;transform: rotate(10deg) skew(0deg);  }
.album-pos3 .photo02 { top: 64%; left: 10%; transition: all .8s ease;transform: rotate(-17deg) skew(0deg);  }

.album-pos4 { top: 15%; left: 66%; }
.album-pos4 .photo01 { top: 20%; left: -5%; transition: all .5s ease;transform: rotate(-10deg) skew(0deg);  }
.album-pos4 .photo02 { top: 66%; left: 0; transition: all .8s ease;transform: rotate(17deg) skew(0deg);  }



.owl-photo_ {
    position: absolute;
    width: 50%;
    border: 3px solid #fff;
    cursor: pointer;
    box-shadow: #00000038 1px -1px 11px;
}

.owl-photo01 { top: 162vw; left: 5%;transform: rotate(10deg) skew(0deg);  }
.owl-photo02 { top: 153vw; left: 50%; transform: rotate(-17deg) skew(0deg); }
.owl-photo03 { top: 162vw; left: 5%;transform: rotate(-9deg) skew(0deg);  }
.owl-photo04 { top: 150vw; left: 48%; transform: rotate(17deg) skew(0deg); }
.owl-photo05 { top: 165vw; left: 5%;transform: rotate(10deg) skew(0deg);  }
.owl-photo06 { top: 150vw; left: 45%; transform: rotate(-18deg) skew(0deg); }
.owl-photo07 { top: 152vw; left: 3%;transform: rotate(-15deg) skew(0deg);  }
.owl-photo08 { top: 157vw; left: 52%; transform: rotate(7deg) skew(0deg); }

/*-----------------------------------------------
   box-effect  - gallery
-----------------------------------------------*/

.box-cover {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.9);

}


/*for-gallery*/

.box-effect {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(250, 250, 250, 1);*/
    background: rgba(250, 250, 250, 0.95);
    top: 0;
    left: 0;

    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
     -webkit-animation: 2.5s maskBOXIn cubic-bezier(.87, 0, .13, 1) 0s 1 forwards;
    animation: 2.5s maskBOXIn cubic-bezier(.87, 0, .13, 1) 0s 1 forwards;
}



@keyframes maskBOXIn {
    0% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }

    20% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    21% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    60%,
    100% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
}


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


/* view */
.view {


    position: absolute;
    cursor: move;

    /*! overflow: hidden; */
    left: 20%;
    top: 18%;
    z-index: 2;
}


/*#scroll .view {
    overflow: scroll;
}
*/

.view {
    width: 58%;
    height: 80vh;
    /*! background: rgba(109, 190, 122, 0.6); */
}

.content {
    display: none;

    width: 2600px;
    /*width: 4100px;*/
    animation: navShow 1.2s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
}

.photo03-b{
    display: none;
}

.content ul,.content ul.content-ul {

    display: flex;
    position: relative;
    width: 2600px;
    /*! flex-wrap: wrap; */
    /*transform: rotate(45deg);*/

}
.content ul.content-ul-b{
    width: 4000px

}
.for-bg-close{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
        /*background: rgba(203, 152, 152, 0.6);*/

}

.content ul li {
    height: 100%;
    margin: 0 4% 0 0%;
    /*! background: rgba(251, 251, 251, 0.6); */

    border: 1px solid rgba(161, 196, 232, 0.5);
    overflow: hidden;
}

.box-close_ {
    position: absolute;
    width: 50px;
    height: 98%;
    left: 98%;
    top: 2%;
    cursor: pointer;
    z-index: 10;
    background: url(../images/box-close.png) center top / contain no-repeat;

}



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



    .content ul,.content ul.content-ul{
        width: 2500px;
    }
    .content ul.content-ul-b{
         width: 3500px;
    }




}

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

    .content ul,.content ul.content-ul{
        width: 2000px;
    }
    .content ul.content-ul-b{
         width: 3000px;
    }


}

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

    .content ul,.content ul.content-ul{
        width: 1800px;
    }
    .content ul.content-ul-b{
         width: 2800px;
    }


}


@media screen and (max-width:768px)
{
/* view */
.view {

    left: 10%;
    top: 20%;
     width: 88%;
    height: 40vh;
    /*! background: rgba(109, 190, 122, 0.6); */
}
    .content ul,.content ul.content-ul{
        width: 1000px;
    }
    .content ul.content-ul-b{
         width: 2000px;
    }


    .box-close_ {
    width: 50px;
    height: 147%;
    left: 98%;
    top: -21%;

}

}



/*-----------------------------------------------
    title
-----------------------------------------------*/


.title {
    display: none;
    position: absolute;
    top: 35vw;
    left: 50%;
    width: 949px;
    height: 225px;
    overflow: hidden;
    /*pointer-events: none;*/


    transform: scale(0.8) translate(-50%,0%);
    margin: auto;
    right: 0;
    z-index: 10;
    transform-origin: 0 0;
}




.title:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-repeat: no-repeat;
    /*width: 18980px;*/
    width: 15184px;
    height: 225px;
    background-image: url(../images/tit-frame.png);
    /*animation: img-animation 2.5s steps(20) forwards infinite;*/
    animation: img-animation 2s steps(15) forwards 1;

    z-index: 10;
}




@keyframes img-animation {
    0% {
        transform: translate3d(0, 0, 0);
    }



    100% {
        /*transform: translate3d(-28470px, 0, 0);*/
        transform: translate3d(-14235px, 0, 0);

    }
}

/*@keyframes img-animation2 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-18031px, 0, 0);
        transform: translate3d(-18980px, 0, 0);
    }
}*/
/*title-sl*/

.title-sl {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 10;

}

.title-header .title-sl {
    background: url(../images/tit-header.png) center top / 100% no-repeat;
    cursor: pointer;


}

.title-world .title-sl {
    background: url(../images/tit-world.png) center top / 100% no-repeat;
    cursor: pointer;


}

.title-hero .title-sl {
    background: url(../images/tit-hero.png) center top / 100% no-repeat;
}

.title-gallery .title-sl {
    background: url(../images/tit-gallery.png) center top / 100% no-repeat;

}


.title-world {
    top: 62%;
}

.title-gallery {
    top: 65%;
}

.title-hero {
    top: 10%;
}




@media screen and (max-width:1800px) { .title { transform: scale(.7) translate(-50%,0%); } }
@media screen and (max-width:1600px) { .title { transform: scale(.6) translate(-50%,0%); } }
@media screen and (max-width:1440px) { .title { transform: scale(.5) translate(-50%,0%); } }
@media screen and (max-width:768px) {

.title { transform: scale(.4) translate(-50%,0%); transform-origin: 0 0;left: 50%;top: 130vw;}
.title-world { top: 62vw; }

.title-gallery { top: 10vw; }

.title-hero { top: 10vw; }



}
@media screen and (max-width:376px) {
.title { transform: scale(.35) translate(-50%,0%); }

}

/*-----------------------------------------------
    section-effect
-----------------------------------------------*/
.section-effect,
.section-effect2,
.section-effect3 {
    width: 100px;
    height: 100px;
    background: #fff;
    /*background: #d9a7bbb5;*/
    position: absolute;
    top: 50%;
    margin: auto;
    z-index: 9;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    text-align: center;
    left: 50%;
    opacity: 0;
    pointer-events: none;
}

.section-effect2 {
    top: 10%;
    left: 80%;
    background: #fff;
}

.section-effect3 {

    top: 50%;
    left: 20%;
    background: #d9a7bbb5;
}

.section-effect:before,
.section-effect2:before {
    content: '';
    width: 70%;
    height: 70%;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    position: absolute;
    top: 0%;
    bottom: 0;
    margin: auto;
    z-index: 0;
    pointer-events: auto;
    text-align: center;
    left: 0;
    right: 0;
    background: #ffffff4f;
    opacity: 1;

}

/*----------    light-effect - 菱形 ---------------*/

@keyframes s-effect {
    0% {opacity: 0; transform: scale(0) rotateZ(0deg);  }

    20% { opacity: 1; }

    50% { opacity: .4; }

    99% {opacity: 0; transform: scale(50) rotateZ(50deg);  }

    100% {opacity: 0; transform: scale(0) rotateZ(0deg);  } }

@keyframes s-effect2 {
    0% {opacity: 0; transform: scale(0) rotateZ(0deg);  }

    20% { opacity: 1; }

    50% { opacity: .4; }

    99% {opacity: 0; transform: scale(10) rotateZ(-120deg);  }

    100% {opacity: 0; transform: scale(0) rotateZ(0deg);  } }

@keyframes s-effect3 {
    0% {opacity: 0; transform: scale(0) rotateZ(0deg);  }

    20% { opacity: .5; }

    50% { opacity: .2; }

    99% {opacity: 0; transform: scale(10) rotateZ(120deg);  }

    100% {opacity: 0; transform: scale(0) rotateZ(0deg);  } }


.s-effect {
    animation: s-effect 1s ease-in 0s 1 both;
}

.s-effect2 {
    animation: s-effect2 1.1s ease-out 0.2s 1 both;
}

.s-effect3 {
    animation: s-effect3 0.95s cubic-bezier(.250, .460, .450, .940) 0.3s 1 both;
}



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

.btn_ {
    position: absolute;
    width: 250px;
    height: 100px;
    /*! cursor: pointer; */
    z-index: 10;
    pointer-events: none;
}

.btn_left {
    left: 43%;
}


.btn-card {
    top: 0%;
    left: 25%;
    height: 215px;
    background: url(../images/btn/btn-card.png) center top / 100% no-repeat;
}

.btn-card-pos01 {
    top: 0%;
    left: 25%;
}

.btn-card-pos02 {
    top: 0%;
    left: -2%;
}

.btn-card-pos03 {
    top: 0%;
    left: 25%;
}

.btn-card-pos04 {
    top: -3%;
    left: 0%;
}

.go-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: gif 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0s infinite both;
}

.go-bg-b {
    position: absolute;
    left: 50px;
    top: 40px;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: gif 2s ease-out 0s infinite both;
}

.go-bg2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: gif 1.8s ease-out 0.3s infinite both;
}

.go-bg-r {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: gif_r 2s ease-out 0s infinite both;
}

@keyframes gif {
    0% { background: url(../images/btn/go-bg-l-000.png) center top / 100% no-repeat; }

    20% { background: url(../images/btn/go-bg-l-001.png) center top / 100% no-repeat; }

    30% { background: url(../images/btn/go-bg-l-002.png) center top / 100% no-repeat; }

    40% { background: url(../images/btn/go-bg-l-003.png) center top / 100% no-repeat; }

    50% { background: url(../images/btn/go-bg-l-004.png) center top / 100% no-repeat; }

    60% { background: url(../images/btn/go-bg-l-003.png) center top / 100% no-repeat; }

    70% { background: url(../images/btn/go-bg-l-002.png) center top / 100% no-repeat; }

    80% { background: url(../images/btn/go-bg-l-001.png) center top / 100% no-repeat; }

    100% { background: url(../images/btn/go-bg-l-000.png) center top / 100% no-repeat; } }

@keyframes gif_r {
    0% { background: url(../images/btn/go-bg-000.png) center top / 100% no-repeat; }

    10% { background: url(../images/btn/go-bg-001.png) center top / 100% no-repeat; }

    20% { background: url(../images/btn/go-bg-002.png) center top / 100% no-repeat; }

    30% { background: url(../images/btn/go-bg-003.png) center top / 100% no-repeat; }

    40% { background: url(../images/btn/go-bg-004.png) center top / 100% no-repeat; }

    50% { background: url(../images/btn/go-bg-003.png) center top / 100% no-repeat; }

    60% { background: url(../images/btn/go-bg-002.png) center top / 100% no-repeat; }

    70% { background: url(../images/btn/go-bg-001.png) center top / 100% no-repeat; }

    80% { background: url(../images/btn/go-bg-000.png) center top / 100% no-repeat; } }

.gif {
    animation: gif 2s ease-out 0s infinite both;
}

.gif_r {
    animation: gif_r 2s ease-out 0s infinite both;
}

@media screen and (max-width:1600px)
{
.btn-card {
    top: -2%;
    left: 16%;
    transform: scale(0.8);
}
}



/*-----------------------------------------------
    ripple
-----------------------------------------------*/

.ripple,
.ripple-r,
.ripple-b {
    pointer-events: none;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    right: -22px;
    top: -18px;
    border: 1px solid #000;
    animation: ripple 2.5s ease-out 0s infinite both;
}

.ripple-r {
    animation: ripple 2.5s ease-out 0.1s infinite both;
}

.ripple-b {
    animation: ripple 2.5s ease-out 0.4s infinite both;
}

.ripple-r {
    right: initial;
    left: -10px;
    animation: ripple 2.2s ease-out 0.2s infinite both;
}

.ripple-b {
    right: initial;
    left: -4px;
    animation: ripple 2.2s ease-out 0.2s infinite both;
    top: 77%;
}
.btn-card > .ripple-b2 {
     right: initial;
    left: -5px;
    animation: ripple 2.2s ease-out 0.2s infinite both;
    top: 164px;
}
.ripple:before,
.ripple-r:before,
.ripple-b :before {
    content: '';
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    border: 1px solid #000;
    animation: ripple2 5.5s ease-out 0.3s infinite both;
}


.ripple-r:before,
.ripple-b :before {
    content: '';

    animation: ripple2 4s ease-out 0.4s infinite both;
}

@keyframes ripple {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes ripple2 {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(2);
    }
}


@keyframes ripple_m {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes ripple_m2 {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}




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

    .ripple,
    .ripple-r,
    .ripple-b {
        width: 30px;
        height: 30px;
        right: -13px;
        top: -13px;
        animation: ripple_m 2.5s ease-out 0s infinite both;
    }

    .ripple-r {
        right: initial;
        left: -10px;
        animation: ripple_m 2.2s ease-out 0.2s infinite both;
    }

    .ripple-b {
        right: initial;
        left: -10px;
        animation: ripple_m 2.2s ease-out 0.2s infinite both;
        top: initial;
        bottom: 30px;
    }

    .ripple:before,
    .ripple-r:before,
    .ripple-b :before {
        content: '';
        width: 30px;
        height: 30px;
        animation: ripple_m2 3s ease-out 0.3s infinite both;
    }
}


/*-----------------------------------------------
    df-gotop
-----------------------------------------------*/
.go-top
{
    /*display: block; */
    display: none;
    position: fixed;
    right: 2rem;
    bottom: 7rem;
    z-index: 99;
    opacity: 1;
    /*! width: 236px; */
    height: 50px;
    cursor: pointer;
    color: #fff;
    border-radius: 0;
    box-sizing: border-box;
    transition: all .5s;
    /*! background: #bd3e3edb; */
    /*background: url(../images/gotop.png) center top / 70% no-repeat;*/



}

.go-top ul{display: flex;height: 11px;margin: 20px auto;}

.go-top ul li:nth-child(1){
    width: 35px;
    height: 100%;
    background: url(../images/gotop.png) 0 50% /160px no-repeat;
}
.go-top ul li:nth-child(2){
    width: 60px;
    height: 1px;
    background: rgba(0, 0, 0, 1);
    display: block;
    margin: 6px auto;
    transition: all .3s ease;
}


.go-top ul li:nth-child(3)
{
    width: 45px;
   height: 100%;
    background: url(../images/gotop.png) 100% 50% /160px no-repeat;
     }


.go-top:focus
{
    outline: none; }

.go-top:hover ul li:nth-child(2)
{
    width: 120px;
    /*! opacity: .9; */
 transition: all .3s ease;
    /*! transform: scale(1.2); */ }

@media screen and (min-width:1921px)
{
    .go-top
    {
        right: 23rem; } }


@media screen and (max-width:767px)
{
    .go-top
    {
        right: 5px;
        transform: scale(.7); }

    .go-top:hover
    {
        transform: scale(1); } }