/** Scene01 **/
#section01 {
    width: 100%;
    /*background: url("../img/gallery/bg.png") no-repeat center top;*/
}

#section01 .inner{transform-origin: center top;}
@media screen and (max-width:1600px){#section01 .inner{transform: scale(.85);}}
@media screen and (max-width:1300px){#section01 .inner{transform: scale(.65);}}

#section01 .menu {
    position: fixed;
    left: 50px;
    top: 60px;
    z-index: 99;
    cursor: pointer;
}
.scroll {
    position: fixed;
    left: 900px;
    top: 850px;
    opacity: .5;
    animation: scroll linear alternate infinite 2s;
    z-index: 999;
}


@keyframes scroll {
    to {
        opacity: .05
    }
}


#section01 .smile {
    position: absolute;
    left: 50%;
    top: 522px;
    margin-left: 915px;
}

#section01 .photo li img {
    filter: grayscale(1);
    transition: all 0.5s ease;
}

#section01 .photo li img:hover {
    filter: grayscale(0);
}

#section01 .photo li {
    position: absolute;
    left: 50%;
    cursor: pointer;
}

#section01 .photo > li:nth-child(1) {
    margin-left: -2492px;
    top: 75px;
}

#section01 .photo > li:nth-child(2) {
    margin-left: -1925px;
    top: 490px;
}

#section01 .photo > li:nth-child(3) {
    margin-left: -1342px;
    top: 50px;
}

#section01 .photo > li:nth-child(4) {
    margin-left: -1067px;
    top: 590px;
}

#section01 .photo > li:nth-child(5) {
    margin-left: -524px;
    top: 457px;
}

#section01 .photo > li:nth-child(6) {
    margin-left: 311px;
    top: 60px;
}

#section01 .photo > li:nth-child(7) {
    margin-left: 424px;
    top: 604px;
}

#section01 .photo > li:nth-child(8) {
    margin-left: 1116px;
    top: 61px;
}

#section01 .photo > li:nth-child(9) {
    margin-left: 1931px;
    top: 122px;
}

#section01 .photo > li:nth-child(10) {
    margin-left: 1736px;
    top: 490px;
}


#section01 .paper li img {
    filter: grayscale(.7);
}


#section01 .paper li {
    position: absolute;
    left: 50%;
}

#section01 .paper > li:nth-child(1) {
    margin-left: -2567px;
    top: 470px;
}

/*#section01 .paper > li:nth-child(1).on {*/
    /*animation: page linear normal 1 .5s forwards;*/
/*}*/

#section01 .paper > li:nth-child(2) {
    margin-left: -1810px;
    top: 134px;
    z-index: 100;
}

/*#section01 .paper > li:nth-child(2).on {*/
    /*animation: page linear normal 1 .5s forwards;*/
/*}*/

#section01 .paper > li:nth-child(3) {
    margin-left: -474px;
    top: 64px;
}
/*#section01 .paper > li:nth-child(3).on {*/
    /*animation: page linear normal 1 .5s forwards;*/

/*}*/

#section01 .paper > li:nth-child(4) {
    margin-left: 1141px;
    top: 516px;
}
/*#section01 .paper > li:nth-child(4).on {*/
    /*animation: page linear normal 1 .5s forwards;*/

/*}*/


@keyframes page {
    to {
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -o-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
}


#section01 .pin li {
    position: absolute;
    left: 50%;
}

#section01 .pin > li:nth-child(1) {
    margin-left: -2242px;
    top: 78px;
}

#section01 .pin > li:nth-child(2) {
    margin-left: -2306px;
    top: 484px;
}

#section01 .pin > li:nth-child(3) {
    margin-left: -1514px;
    top: 476px;
}

#section01 .pin > li:nth-child(4) {
    margin-left: -1017px;
    top: 37px;
}

#section01 .pin > li:nth-child(5) {
    margin-left: -894px;
    top: 580px;
}

#section01 .pin > li:nth-child(6) {
    margin-left: -124px;
    top: 470px;
}

#section01 .pin > li:nth-child(7) {
    margin-left: 695px;
    top: 77px;
}

#section01 .pin > li:nth-child(8) {
    margin-left: 661px;
    top: 590px;
}

#section01 .pin > li:nth-child(9) {
    margin-left: 1460px;
    top: 54px;
}

#section01 .pin > li:nth-child(10) {
    margin-left: 2158px;
    top: 125px;
}

#section01 .pin > li:nth-child(11) {
    margin-left: 2126px;
    top: 500px;
}


#section01 .tape li {
    position: absolute;
    left: 50%;
}

#section01 .tape > li:nth-child(1) {
    margin-left: -1656px;
    top: 122px;
    z-index: 200;
}

#section01 .tape > li:nth-child(2) {
    margin-left: -459px;
    top: 61px;
}

#section01 .tape > li:nth-child(3) {
    margin-left: -38px;
    top: 348px;
}

#section01 .tape > li:nth-child(4) {
    margin-left: 1375px;
    top: 525px;
}

#section01 .crayon li {
    position: absolute;
    left: 50%;
}

#section01 .crayon > li:nth-child(1) {
    top: 590px;
    margin-left: -2365px;
    z-index: 200;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(1).on{
    opacity: 1;
}


#section01 .crayon > li:nth-child(2) {
    top: 220px;
    margin-left: -2078px;
    opacity: 0;
    transition: all .5s;
}


#section01 .crayon > li:nth-child(2).on{
    opacity: 1;
    transition-delay: .5s;

}
#section01 .crayon > li:nth-child(3) {
    top: 390px;
    margin-left: -1850px;
    opacity: 0;
    transition: all .5s;
}


#section01 .crayon > li:nth-child(3).on{
    opacity: 1;
    transition-delay: .8s;

}
#section01 .crayon > li:nth-child(4) {
    top: 290px;
    margin-left: -1917px;
    z-index: 200;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(4).on{
    opacity: 1;
    transition-delay: 1s;

}


#section01 .crayon > li:nth-child(5) {
    top: 262px;
    margin-left: -866px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(5).on {
    opacity: 1;
}

#section01 .crayon > li:nth-child(6) {
    top: 143px;
    margin-left: -901px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(6).on {
    opacity: 1;
    transition-delay: .5s;
}

#section01 .crayon > li:nth-child(7) {
    top: 165px;
    margin-left: -908px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(7).on {
    opacity: 1;
    transition-delay: 1s;
}

#section01 .crayon > li:nth-child(8) {
    top: 396px;
    margin-left: -1148px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(8).on {
    opacity: 1;
    transition-delay: 1.3s;
}

#section01 .crayon > li:nth-child(9) {
    top: 121px;
    margin-left: -328px;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(9).on{
    opacity: 1;
}

#section01 .crayon > li:nth-child(10) {
    top: 828px;
    margin-left: -557px;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(10).on{
    opacity: 1;
    transition-delay: .5s;
}

#section01 .crayon > li:nth-child(11) {
    top: 212px;
    margin-left: 92px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(11).on{
    opacity: 1;
}

#section01 .crayon > li:nth-child(12) {
    top: 253px;
    margin-left: 70px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(12).on{
    opacity: 1;
    transition-delay: .5s;
}

#section01 .crayon > li:nth-child(13) {
    top: 406px;
    margin-left: 280px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(13).on{
    opacity: 1;
    transition-delay: 1s;
}

#section01 .crayon > li:nth-child(14) {
    top: 603px;
    margin-left: 549px;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(14).on {
    opacity: 1;
}

#section01 .crayon > li:nth-child(15) {
    top: 724px;
    margin-left: 545px;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(15).on {
    opacity: 1;
    transition-delay: .5s;
}

#section01 .crayon > li:nth-child(16) {
    top: 68px;
    margin-left: 1318px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(16).on{
    opacity: 1;
}
#section01 .crayon > li:nth-child(17) {
    top: 273px;
    margin-left: 1310px;
    opacity: 0;
    transition: all .5s;
}

#section01 .crayon > li:nth-child(17).on{
    opacity: 1;
    transition-delay: .3s;
}
#section01 .crayon > li:nth-child(18) {
    top: 318px;
    margin-left: 2140px;
    opacity: 0;
    transition: all .5s;
}
#section01 .crayon > li:nth-child(18).on {
    opacity: 1;
}

/*section01 end*/


#menu {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999;
    display: none;
}

#menu .close {
    position: absolute;
    right: 42px;
    top: 60px;
    cursor: pointer;
}
#menu .inner{
    width: 968px;
    height: 428px;
    position: absolute;
    right: 72px;
    bottom: 260px;
    transform-origin: right bottom;
}

@media screen and (max-width:1600px){#menu .inner{transform: scale(.8); bottom: 180px;}}
@media screen and (max-width:1300px){#menu .inner{ bottom: 90px;}}
#menu .number{
    position: absolute;
    left: 0;
    top: 0;
}

#menu .number li {
    width: 42px;
    height: 42px;
    margin-bottom: 60px;
    cursor: pointer;
    transition: all .5s
}

#menu .inner2 .number li{margin-bottom: 55px;}

#menu .number li:nth-child(1) {background: url("../img/menu/number0.png") no-repeat center top;}
#menu .number li:nth-child(2) {background: url("../img/menu/number1.png") no-repeat center top;}
#menu .number li:nth-child(3) {background: url("../img/menu/number2.png") no-repeat center top;}
#menu .number li:nth-child(4) {background: url("../img/menu/number3.png") no-repeat center top;}
#menu .number li:nth-child(5) {background: url("../img/menu/number4.png") no-repeat center top; margin-bottom: 0;}

#menu .number li:nth-child(1).on {background: url("../img/menu/number0_on.png") no-repeat center top}
#menu .number li:nth-child(2).on {background: url("../img/menu/number1_on.png") no-repeat center top}
#menu .number li:nth-child(3).on {background: url("../img/menu/number2_on.png") no-repeat center top}
#menu .number li:nth-child(4).on {background: url("../img/menu/number3_on.png") no-repeat center top}
#menu .number li:nth-child(5).on {background: url("../img/menu/number4_on.png") no-repeat center top}


#menu .menulist{
    position: absolute;
    top: 0;
    left: 81px;
}
#menu .menulist li {
    margin-bottom: 55px;
    opacity: .6;
    transition: all .75s;
    cursor: pointer;
}

#menu .menulist li:hover {
    opacity: 6;
}

#menu .menulist li:nth-child(5) {margin-bottom: 0;}


#menu .line{
    position: absolute;
    right: 0;
    top: 7px;
}
#menu .line li {
    width: 90px;
    height: 3px;
    background: url("../img/menu/line.png") no-repeat center;
    transition: all .5s;
    margin-bottom: 105px;
}

#menu .inner2 .line li{margin-bottom: 100px;}

#menu .line li.on {background: url("../img/menu/line_on.png") no-repeat center}

#menu .line li:nth-child(5) {margin-bottom: 0}

#menu .leftmenu div {
    position: absolute;
    left: 50%;
    opacity: .6;
    transition: all .75s
}

#menu .leftmenu div:hover {
    opacity: 1
}

#menu .leftmenu .blog{
    left:50px;
    bottom: 95px;
    cursor: pointer;
}
#menu .leftmenu .site {
    left: 50px;
    bottom: 50px;
    cursor: pointer
}

/*menu end*/
.close_page{
    width: 56px;
    height: 56px;
    opacity: .6;
    position: fixed;
    cursor: pointer;
    top: 50%;
    margin-top: -28px;
    right: 75px;
    z-index: 99999;
    transition: all 1s;
}
.close_page:hover{
    background: url('../img/section02/close_on.png');
}
.close_page.on{
    opacity: 1;
}


.pop {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display:none;
    z-index: 99999;
}


.pop .popphoto {
    width: 1280px;
    height: 720px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pop .popphoto > li {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.pop .popphoto > li.on {
    opacity: 1;
}


.pop .close {
    position: absolute;
    right: 42px;
    top: 60px;
    cursor: pointer;
}