#mainContent {
	margin-top: 0;
	margin-bottom: 0;
}

#gHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999999;
}

#app {
	width: 100%;
}

#app .photos {
	width: 100%;
	position: relative;
}

#app .photo {
	width: 100%;
  height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

@media screen and (max-width: 768px){
	#app .photo {
  background-attachment: unset;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
}
#app .photo.active .text{
  
  opacity: 1;
}

#app .photo .text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /*
  position: fixed;
  left: 5%;
  top: 50%;
  transform: translateY(-45%);*/
  opacity: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 2s;
  z-index: 10;
}

/*#app .photo #text55{
	top: 55%;
}*/



#app .photo .scroll {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  transition: .5s;
  padding-bottom: 10px;
}

#app .photo .scroll:hover {
  padding-bottom: 0;
}

#app .controller {
	position: fixed;
	top: 55%;
	right: 25px;
	z-index: 999;
	width: 20px;
	transform: translateY(-50%);
}

#app .controller span {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 100%;
  border: solid 2px transparent;
	background: #fff;
	pointer-events: auto;
	cursor: pointer;
	transform: scale(1);
}

#app .controller span:hover {
	background: none !important;
	border: solid 2px #fff !important;
	transform: scale(1.3) !important;
}

#app .controller span:not(:last-child) {
	margin-bottom: 20px;
}

#app .controller span.active {
	background: none;
	border: solid 2px #fff;
	transform: scale(1.3);
}



#app .photos.min .section1{
	background-image: url('../imgs/01/scene01.jpg')
}
#app .photos.min .section2{
	background-image: url('../imgs/01/scene02.jpg')
}
#app .photos.min .section3{
	background-image: url('../imgs/01/scene03.jpg')
}
#app .photos.min .section4{
	background-image: url('../imgs/01/scene04.jpg')
}
#app .photos.min .section5{
	background-image: url('../imgs/01/scene05.jpg')
}
#app .photos.min .section6{
	background-image: url('../imgs/01/scene06.jpg')
}
#app .photos.min .section7{
	background-image: url('../imgs/01/scene07.jpg')
}
#app .photos.min .section8{
	background-image: url('../imgs/01/scene08.jpg')
}




@media screen and (min-width: 960px){
	#breadCrumb {
		position: fixed;
		top: 107px;
		left: 0;
		width: 100%;
		z-index: 3;
	}
}

@media screen and (max-width: 768px){
	/*#app, #app .photos, #app .photo {
		position: static;
	}*/
	#app .photo.smartPhone {
		display: block;
	}
	/*#app .photo {
		opacity: 1;
		display: none;
	}*/
	/*#app .scroll {
		display: none;
	}*/
	#app .controller {
		display: none;
	}
	#app .photo.active .text{
		width: 100%;
	}
	.movie-content-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie-content-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
}



@media screen and (max-width: 768px){
	.footArea .spArea {
		display: block;
	}
	.footArea .spArea img {
		width: 100%;
	}
	img.sp {
		display: inline;
	}
}

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

#fNav ,
#gFooter {
	position: relative;
	z-index: 999;
}


.scroll02{
	position: absolute;
	bottom:20px!important;
}