@charset "utf-8";
/* CSS Document */



html, body {
width: 100%;
-ms-overflow-x: hidden;
overflow-x: hidden;
}

.bg-section {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 1;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}




#bg-section01a {
background-image: url(../images/title.png);
animation: fadeout-anim 2s linear forwards;

}

@keyframes fadeout-anim {
100% {
opacity: 0.2;
}
}

#bg-section01b {
background-image: url(../images/line.png);
background-size: cover;
}

#bg-section03 {
background-image: url('../images/back1.jpg');
top: -40vh;
}

#bg-section04 {
background-image: url('../images/back2.jpg');
top: -60vh;
background-position: -100px 0px;
}

#bg-section05 {
background-image: url('../images/back3.jpg');
top: -80vh;
}

#section01 {
position: relative;
z-index: 2;
padding: 45vh 0;
}

#section02{
background: #000;
position: relative;
z-index: 4;
padding:20vh 0;
}

#section03{
background: #FFF;
position: relative;
z-index: 3;
overflow: hidden;
padding: 0 !important;
}

#section04{
background: #FFF;
position: relative;
z-index: 4;
overflow: hidden;
padding: 0 !important;
}

#section05{
background: #FFF;
position: relative;
z-index: 3;
overflow: hidden;
padding: 0 !important;
}

#section06{
background: #FFF;
position: relative;
z-index: 3;
padding: 0 !important;
}

#fog01{
position: absolute;
bottom: -20vh;
left: 0;
width: 100%;
z-index: 1 !important;
pointer-events: none;
}

#fog01 img{
width: 100%;
}

#fog02{
position: absolute;
bottom: -50vh;
left: 0;
width: 100%;
z-index: 1;
pointer-events: none;
}

#fog02 img{
width: 100%;
}