@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');
html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100vw;
	overflow: hidden;
	position: relative;
}
img {
	width: 100%;
}
h1,h2,h3 {
	padding: 0;
	margin: 0;
	line-height: normal;
}
a {
	text-decoration: none;
	color: #000;
}
ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#cl {
	width: 100%;
	height: 100%;
	font-family: 'Cormorant Garamond', serif!important;
	font-size: 12px;
}
#scroll {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	overflow-x: auto;
}

#scroll ul {
	height: 100%;
	display: flex;
	align-items: center;
	line-height: 1;
}
#scroll ul li {
	height: 100vh;
	align-items: center;
	position: relative;
	overflow: hidden;
	margin-left: 0px;
}
#scroll ul li.margin {
	margin-left: 25px;
}
#scroll ul li.margin2 {
	margin-left: 50px;
}
#scroll ul li.margin3 {
	margin-left: 160px;
}
@media only screen and (max-width: 768px)  {
	#scroll ul li {
		margin-left: 0;
	}
	#scroll ul li.margin {
		margin-left: 10vw;
	}
	#scroll ul li.margin2 {
		margin-left: 15vw;
	}
	#scroll ul li.margin3 {
		margin-left: 38vw;
	}
	
}

#scroll ul li .img {
	position: relative;
	width: 100%;
	height: 100%;
	/*max-height: calc(100% - 100px);*/
	overflow: hidden;
	opacity: 0;
	transform: translate(0px,0);
	transition: 1s all 0s ease;
}
#scroll ul li .img.ac {
	opacity: 1;
}
#scroll ul li .img img {
	width: auto;
	height: 95%
}
#scroll ul li .data {
	width: 100%;
	margin: 0 auto;
	height: 5%;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 1.6;
	font-size: 9px;
	/*background: #fff;*/
	z-index: 10;
	font-weight: 700
}
#scroll ul li .link {
	width: 90%;
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(50px,-50%);
	opacity: 0;
	transition: 1s all 0.6s ease;
}
#scroll ul li .data .link.ac {
	opacity: 1;
	transform: translate(0,-50%);
}


#scroll .top_box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 768px)  {
	#scroll .top_box {
		width:100vw;
	}
}

#scroll .top_box h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	max-width: 450px;
	transform: translate(-50%,-50%);
	line-height: 0;
	opacity: 0;
	transition: 1s all 0.5s ease;
}
#scroll .top_box .ss {
	position: absolute;
	bottom: 1.5%;
	left: 50%;
	width: 40%;
	max-width: 200px;
	transform: translate(-50%,0);
	z-index: 100;
	opacity: 0;
	transition: 1s all 0.5s ease;
}
#scroll ul li .img .story {
	line-height: 0;
	position: absolute;
	bottom: 19.5%;
	left: 10%;
	width: 30%;
	max-width: 110px;
	filter: invert(1);
	opacity: 0;
	transition: 1s all 0.5s ease;
}
#scroll ul li .img .name {
	position: absolute;
	bottom:21%;
	left: 40%;
	width: 16%;
	line-height: 0;
	opacity: 0;
	transition: 1s all 0.5s ease;
}
#scroll ul li .img .txt {
	position: absolute;
	bottom: 10%;
	left: 10%;
	color: #FFF;
	line-height: 1.6;
	opacity: 0;
	transform: translate(50px,0);
	transition: 1s all 0.4s ease;
}
#scroll ul li .img .txt.ac {
	opacity: 1;
	transform: translate(0px,0);
}
#scroll ul li .img .txt_copy {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	color: #FFF;
	line-height: 1.6;
	opacity: 0;
	transform: translate(50px,0);
	transition: 1s all 0.4s ease;
}
#scroll ul li .img .tmg {
	position: absolute;
	top: 16%;
}
#scroll ul li .img .txt_copy.ac {
	opacity: 1;
	transform: translate(0px,0);
}

#scroll ul li:nth-of-type(22) .img .txt {
	bottom: auto;
	left: 5%;
	top: 10%;
	color: #FFF;
	line-height: 1.6;
}

#scroll ul li.small .img,#scroll ul li.small_l .img {
	width: 600px;
	height: 100%;
	position: relative;

}
#scroll ul li.small .img img {
	width: 70%;
	margin-left: 30%;
	height: auto;
}
#scroll ul li.small_l .img img {
   width: 70%;
    height: auto;
    position: absolute;
    bottom: 5%;
    left: 0;
}
#scroll ul li.small .data {
	width: 70%;
	margin-left: 30%;
	margin-top: 10px;
    height: auto;
    position: relative;
    bottom: auto;
    left: auto;
}
#scroll ul li.mid .img {
	width: 600px;
	height: auto;

}
#scroll ul li.mid .img img {
	width: 75%;
	margin-left: 25%;
	height: auto;
}
#scroll ul li.center .img {
	width: 600px;
	text-align: center;
	height: auto;
}
#scroll ul li.center .img img {
    position: relative;
    width: 74%;
    height: auto;
    margin:  5% auto;
}
@media only screen and (max-width: 768px)  {
	#scroll ul li.small .img ,#scroll ul li.mid .img,#scroll ul li.center .img {
		position: relative;
		width:100%;
		height: auto;

	}
	#scroll ul li.small_l .img {
		width: 100vw;
	}
	#scroll ul li.small .img img {
		position: relative;
		width: 80vw;
		margin-left: 20vw;
		height: auto;
	}
	#scroll ul li.small_l .img img {
		position: relative;
		width: 80vw;
		height: auto;
		position: absolute;
		bottom: 5%;
		left: 0;
	}
	#scroll ul li.small .data {
		width: 80vw;
		margin-left: 20vw;
		margin-top: 10px;
		height: auto;
		position: relative;
		bottom: auto;
		left: auto;
	}
	#scroll ul li.mid .img img {
		position: relative;
		width: 90vw;
		margin-left: 10vw;
		height: auto;
	}
	#scroll ul li.center .img img {
		position: relative;
		width: 74vw;
		height: auto;
		margin:  5% 13vw;
	}

	
}
#scroll .btn {
	position: absolute;
	bottom: 8%;
	left: 2.5%;
	width: 95%;
}
#scroll .btn .icon {
	width: 20%;
}
#scroll .btn .icon:nth-of-type(2) {
	position: absolute;
	bottom: 0;
	right: 0;
}
#scroll ul li .img img.arrow {
	height: auto;
	width: 100%;
}

#scroll ul li:nth-of-type(1) .data,#scroll ul li:nth-of-type(26) .data {
}
#scroll ul li:nth-of-type(1) .data img,#scroll ul li:nth-of-type(26) .data .center {
	width: 40%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	line-height: 0;
}
#scroll ul li:nth-of-type(26) .data .center {
	width: 90%;
}
#scroll ul li.small .data {
	opacity: 0;
	transform: translate(50px,0);
	transition: 1s all 0.4s ease;
}
#scroll ul li.small .data.ac {
	opacity: 1;
	transform: translate(0);
}
#scroll ul li:nth-of-type(1) .data,#scroll ul li:nth-of-type(26) .data {
	opacity: 0;
	transition: 1s all 0.5s ease;
}
#scroll .top_box.ac h1,#scroll .top_box.ac .ss,#scroll ul li .img.ac .story,#scroll ul li .img.ac .name,#scroll ul li:nth-of-type(1) .data.ac,#scroll ul li:nth-of-type(26) .data.ac {
	opacity: 1;
}
@keyframes flash {
0% {
opacity: 0.2;
}
30% {
opacity: 1;
}
60% {
opacity: 1;
}

90% {
opacity: 0.2;
}

}