@charset "UTF-8";

/* --------------------------------------------------
map
-------------------------------------------------- */
#bg{
	width:100%;
	height:100%;
	background-image:url("../img/map/bg.jpg");
	background-repeat:no-repeat;
	background-position:center 100rem;
	background-size:cover;
  position: fixed;
	left:0;
	top:0;
	z-index:1;
}

#map_inner{
	width:100%;
	position:relative;
	z-index:1;
}

#map_inner #map_block #title p{
	color:#fff100;
	text-align:center;
	font-size:70rem;
	font-weight:500;
	position:relative;
	line-height:1.0;
	padding-top:190rem;
}

#map_inner #map_block #title span{
	display:block;
	color:#fff;
	text-align:center;
	font-size:28rem;
	font-weight:500;
	position:relative;
	line-height:1.0;
}

/* --------------------------------------------------
slider
-------------------------------------------------- */
.gallery{
  width: 100%;
	margin:40rem auto 0;
}

.main{
    display:flex;
    align-items:center;
    justify-content:center;
}

.main_img{
    position:relative;
    width:750rem;
    height:750rem;
    margin:0;
    padding:0;
    list-style:none;
}

.main_img li{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
}

.main_img li:first-child{
    display:block;
}

.main_img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumb{
		width:672rem;
		display:grid;
		grid-template-columns:repeat(4, 1fr);
		margin:30rem auto 100rem;
		padding:0;
		list-style:none;
}

.thumb li{
		width:auto;
		height:166rem;
		position:relative;
		cursor:pointer;
}

.thumb img{
    display:block;
}

.thumb li::after{
    content:"";
    position:absolute;
    inset:0;
    background:url(../../../assets/img/map/cursor.png) center center / contain no-repeat;
    opacity:0;
    transition:.3s;
    pointer-events:none;
}

.thumb li.active::after{
    opacity:1;
}

/* --------------------------------------------------
animation
-------------------------------------------------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#map_inner #title,
#map_inner .gallery .main,
ul.thumb li{
	opacity:0;
}

.is-loaded #map_inner #title{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 1.4s forwards;
}

.is-loaded #map_inner .gallery .main{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 1.8s forwards;
}

.is-loaded ul.thumb li {
  animation: scaleIn 0.6s cubic-bezier(.05,.53,.29,.88) forwards;
}

.is-loaded ul.thumb li:nth-child(1)  { animation-delay: 2.25s; }
.is-loaded ul.thumb li:nth-child(2)  { animation-delay: 2.3s;  }
.is-loaded ul.thumb li:nth-child(3)  { animation-delay: 2.35s; }
.is-loaded ul.thumb li:nth-child(4)  { animation-delay: 2.4s;  }
.is-loaded ul.thumb li:nth-child(5)  { animation-delay: 2.45s; }
.is-loaded ul.thumb li:nth-child(6)  { animation-delay: 2.5s;  }
.is-loaded ul.thumb li:nth-child(7)  { animation-delay: 2.55s; }
.is-loaded ul.thumb li:nth-child(8)  { animation-delay: 2.6s;  }
.is-loaded ul.thumb li:nth-child(9)  { animation-delay: 2.65s; }
.is-loaded ul.thumb li:nth-child(10) { animation-delay: 2.7s;  }
.is-loaded ul.thumb li:nth-child(11) { animation-delay: 2.75s; }
.is-loaded ul.thumb li:nth-child(12) { animation-delay: 2.8s;  }
.is-loaded ul.thumb li:nth-child(13) { animation-delay: 2.85s; }
.is-loaded ul.thumb li:nth-child(14) { animation-delay: 2.9s;  }
.is-loaded ul.thumb li:nth-child(15) { animation-delay: 2.95s; }
.is-loaded ul.thumb li:nth-child(16) { animation-delay: 3.0s;  }
.is-loaded ul.thumb li:nth-child(17) { animation-delay: 3.05s; }
.is-loaded ul.thumb li:nth-child(18) { animation-delay: 3.1s; }
.is-loaded ul.thumb li:nth-child(19) { animation-delay: 3.15s; }
.is-loaded ul.thumb li:nth-child(20) { animation-delay: 3.2s; }