@charset "utf-8";

body{
	background-color: #009B92;
	cursor: url("image/cursor.png"),default;
	height:100vh;
	width: 100vw;
	margin:0; 
	padding:0;
	overflow-x:hidden;
    -webkit-user-drag:none;
}

html,body{
    scroll-behavior:smooth;
}
div,ul,li{
	margin: 0;
	padding: 0;
}

body:active{
	cursor: url("image/cursorclick.png"),default;
}


.backgroundbox{
	z-index: -999;
}
.background{
	position:fixed;
	width:inherit;
	z-index: -999;
}

.follow{
	position: fixed;
	background-color:#412223;
	max-width:90px;
	max-height:120px;
	opacity:0.8;
	border-style:solid;
	border-radius: 0 15px 15px 0;
	border-width: 2px 2px 2px 0;
	border-color:#33D0C8;
	left:0;
	top:50%;
	transform:translate(0,-100%);
	z-index:200;
	box-shadow:0.5rem 0.5rem 1rem;
}

.follow1{
	padding-top: 5px;
	text-align:center;
	transition: all 0.5s;
}

.follow1:hover{
	transform: scale(1.1);
}

.follow1:active{
	cursor: url("image/cursorbuttonclick.png"),default;
	transform: scale(1.05);
}

.follow2{
	padding-top: 5px;
	text-align:center;
	transition: all 0.5s; 
}

.follow2:hover{
	transform: scale(1.1);
}

.follow2:active{
	cursor: url("image/cursorbuttonclick.png"),default;
	transform: scale(1.05);
}

.follow3{
	padding-top: 5px;
	text-align:center;
	transition: all 0.5s; 
}
.follow3:hover{
	transform: scale(1.1);
}

.follow3:active{
	cursor: url("image/cursorbuttonclick.png"),default;
	transform: scale(1.05);
}

.mainbox{
	position:relative;
	overflow:hidden;
	width:100vw;
	height:100vh;
}

.nav{
	position:relative;
	top:-10px;
	height:100px;
	width:68vw;
}

@-webkit-keyframes waggle{
	from{transform:rotateZ(5deg);}
	to{transform:rotateZ(10deg);}
}
@-moz-keyframes waggle{
	from{transform:rotateZ(5deg);}
	to{transform:rotateZ(10deg);}
}
@keyframes waggle{
	from{transform:rotateZ(5deg);}
	to{transform:rotateZ(10deg);}
}

@-webkit-keyframes waggle1{
	from{transform:rotateZ(10deg);}
	to{transform:rotateZ(5deg);}
}
@-moz-keyframes waggle1{
	from{transform:rotateZ(10deg);}
	to{transform:rotateZ(5deg);}
}
@keyframes waggle1{
	from{transform:rotateZ(10deg);}
	to{transform:rotateZ(5deg);}
}
.nav0{
    float:left;
    display: inline-block;
    width:17vw;
	transform-origin:0;
	-webkit-animation-name: waggle1;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: waggle1;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	animation-name: waggle1;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
#nav00{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.nav1{
    float:left;
    display: inline-block;
    width:17vw;
	transform-origin:0;
	-webkit-animation-name: waggle;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: waggle;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	animation-name: waggle;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#nav11{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.nav2{
    float:left;
    display: inline-block;
    width:17vw;
	transform-origin:0;
	-webkit-animation-name: waggle1;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: waggle1;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	animation-name: waggle1;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#nav22{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.nav3{
    float:left;
    display: inline-block;
    width:17vw;
	transform-origin:0;
	-webkit-animation-name: waggle;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: waggle;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	animation-name: waggle;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}


#nav33{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}


.logobox{
	position:absolute;
	top: 5%;
	right: 5%;
	z-index: -50;
}


.video{
	position:absolute;
	top:0;
	left:0;
	object-fit:cover;
	width:100vw;
	height:100vh;
	z-index:-100;
	pointer-events: none;
}

.video-main{
	position: absolute;
	left: 55%; 
	top: 25%; 
	transfrom: translate(-50%, -50%);
	padding:0.5rem;
	border-radius:1rem;
	background-color:darkcyan;
	box-shadow:0.5rem 0.5rem 1rem;
	max-width:40%;
	max-height:40%;
	z-index: 100;
}
@media screen and (max-width: 960px){
    .button{
	position: absolute; 
	left: 55%; 
	top: 80%;
	max-width:500px;
	-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); 
	filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
	z-index: 100;
	transition:all 0.2s;
    }
}
@media screen and (min-width: 960px){
    .button{
	position: absolute; 
	left: 60%; 
	top: 80%;
	max-width:600px;
	-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); 
	filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
	z-index: 100;
	transition:all 0.2s;
    }
}
.button:hover{
	transform: scale(1.1);
}

.button:active{
	transform: scale(1.05);
	cursor: url("image/cursorbuttonclick.png"),default;
}


.cutbox{
	position: relative;
	z-index: 100;
}

.cutline{
	position:absolute;
	top:100%;
	left:0%;
}
.clamp1{
	position:absolute;
	top:100%;
    left:20%;
}
.clamp2{
	position:absolute;
	top:100%;
    right:20%;
}

@media screen and (max-width: 960px){
.characterbox1{
    position: relative;
    height: 200px;
    display:flex;
    flex-direction:row;
    align-items: flex-end;
    justify-content:space-between;
    }
    .characterbox2{
    position: relative;
    left:20px;
    height: 200px;
    display:flex;
    flex-direction:row;
    align-items: flex-end;
    justify-content:space-between;
}
    .character1{
    margin-bottom:-50px;
}
    .character2{
    margin-bottom:-150px;
}

    .character4{
    margin-bottom:-150px;
}
    .character5{
    margin-bottom:-50px;
}
}

@media screen and (min-width: 960px){
    .characterbox1{
    position: relative;
    height:300px;
    display:flex;
    flex-direction:row;
    align-items: flex-end;
    justify-content:space-between;
    }
    .characterbox2{
    position: relative;
    height:300px;
    left:40px;
    display:flex;
    flex-direction:row;
    align-items: flex-end;
    justify-content:space-between;
}
    .character1{
    margin-bottom:-50px;
    width:300px;
    z-index:-100
}
    .character2{
    margin-bottom:-150px;
    width:230px;
    z-index:-100
}

    .character4{
    margin-bottom:-150px;
    width:300px;
    z-index:-100
}
    .character5{
    margin-bottom:-50px;
    width:300px;
    z-index:-100
}
}


.character1{
    margin-bottom:-80px;
}
.character2{
    margin-bottom:-150px;
}

.character4{
    margin-bottom:-150px;
}
.character5{
    margin-bottom:-80px;
}
.nav222{
    margin-bottom:0px;
}

@media screen and (min-width: 960px){
        .nav222{
        width:400px;
    }
}



.cutbox1{
	position: relative;
    top:50px;
	z-index: 100;
}
.cutbox2{
	position: relative;
	z-index: 100;
    top:50px;
}

@media screen and (min-width: 960px){
    .lunbo{
        position:relative;
        top:50px;
        height: 600px;
        background-color: #9f5b4d;
        overflow: hidden;
        text-align: center;
    }
    .lunbo img{
        position:absolute;
        left:50%;
        margin-left: -580px;
        transition-duration: 0.5s;
        opacity: 0;
    }
    .left,.right{
        width: 50px;
        height: 50px;
        background-color: #666;
        opacity: 0.8;
        text-align: center;
        line-height:45px;
        border-radius:50%;
        font-size: 50px;
        color: #ccc;
        z-index:100;
        transform: translate(-50%,-50%);
    }
    .left{
        position:absolute;
        left:15vw;
        top:300px;
    }
    .right{
        position:absolute;
        right:10vw;
        top:300px;
    }
    .lunbo ul{
        position: absolute;
        top:550px;
        left:50%;
        margin-left: -50px;
        max-width: 500px;
        z-index:100;
    }
}

@media screen and (max-width: 960px){
    .lunbo{
        position:relative;
        top:50px;
        height:400px;
        background-color: #9f5b4d;
        overflow: hidden;
        text-align: center;
    }  
    .lunbo img{
        position:absolute;
        left:50%;
        margin-left: -380px;
        transition-duration: 0.5s;
        opacity: 0;
    }
    .left,.right{
        width: 50px;
        height: 50px;
        background-color: #666;
        opacity: 0.8;
        text-align: center;
        line-height:45px;
        border-radius:50%;
        font-size: 50px;
        color: #ccc;
        z-index:100;
        transform: translate(-50%,-50%);
    }
    .left{
        position:absolute;
        left:15vw;
        top:200px;
        pointer-events: none;
    }
    .right{
        position:absolute;
        right:10vw;
        top:200px;
        pointer-events: none;
    }
    .lunbo ul{
        position: absolute;
        top:350px;
        left:50%;
        margin-left: -50px;
        max-width: 500px;
        z-index:100;
    }
}

.lunbo img.on{
    opacity: 1;
    pointer-events: none;
}

.lunbo:hover .left, .lunbo:hover .right{
    display: block; 
}
.left:hover, .right:hover{
    color: #fff;
}


.lunbo ul li{
    list-style: none;
    float: left;
    background-color: #ccc;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
}
.lunbo ul li.active{
    background-color: #282923;
}

.lunbo ul li:hover{
    background-color:#606060;
}



@media screen and (max-width: 1600px){
    .imagebox{
        position:relative;
        top: 50px;
    }

    .image1{
        position:relative;
        width:100vw;
        height:auto;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
        margin-bottom: 100px;
    }
    .image1:hover{
        transform: scale(1.05);
        }

    .image1-2 img{
        margin-left:-80px;
    }

    .image1-2 {
        z-index:-100;
    }

    .image2{
        position:relative;
        width:100vw;
        height:auto;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
        margin-bottom: 100px;
    }
    .image2:hover{
        transform: scale(1.05);
        }
    .image2-1 img{
        margin-right:-80px;
    }
    .image2-1{
        z-index:-100;
    }

    .image3{
        position:relative;
        width:100vw;
        height:auto;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
        margin-bottom: 100px;
    }
    .image3:hover{
        transform: scale(1.05);
        }
    .image3-2 img{
        margin-left:-80px;
    }
    .image3-2{
        z-index:-100;
    }

    .image4{
        position:relative;
        width:100vw;
        height:600px;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
    }
    .image4:hover{
        transform: scale(1.05);
        }
    .image4-1 img{
        margin-right:-80px;
        margin-bottom:-50px;
    }
    .image4-1{
        z-index:-100;
    }
}

@media screen and (min-width: 1600px){
    .imagebox{
        position:relative;
        top: 50px;
    }

    .image1{
        position:relative;
        width:100vw;
        height:auto;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
        margin-bottom: 100px;
    }
    .image1:hover{
        transform: scale(1.05);
        }
    .image1-1 img{
        width:50vw;
        height:auto;
    }
    .image1-2 img{
        width:40vw;
        height:auto;
        margin-left:-80px;
    }

    .image1-2 {
        z-index:-100;
    }

    .image2{
        position:relative;
        width:100vw;
        height:auto;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
        margin-bottom: 100px;
    }
    .image2:hover{
        transform: scale(1.05);
        }
    .image2-1 img{
        width:40vw;
        height:auto;
    }
    .image2-2 img{
        width:50vw;
        height:auto;
    }
    .image2-1 img{
        margin-right:-80px;
    }
    .image2-1{
        z-index:-100;
    }

    .image3{
        position:relative;
        width:100vw;
        height:auto;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
        margin-bottom: 100px;
    }
    .image3:hover{
        transform: scale(1.05);
        }
    
    .image3-1 img{
        width:50vw;
        height:auto;
    }
    .image3-2 img{
        width:40vw;
        height:auto;
        margin-left:-80px;
    }
    
    .image3-2 {
        z-index:-100;
    }

    .image4{
        position:relative;
        width:100vw;
        height:600px;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        transition: all 0.5s; 
    }
    .image4:hover{
        transform: scale(1.05);
        }
    .image4-1 img{
        width:40vw;
        height:auto;
        margin-right:-80px;
        margin-bottom:-50px;
    }
    .image4-2 img{
        width:50vw;
        height:auto;
    }
    .image4-1{
        z-index:-100;
    }
}


.end{
	position:relative;
    -webkit-user-drag:none;
    bottom:20px;
    display:flex;
    justify-content: center;
	height:50px;
	weight:100vw;
}