@charset "UTF-8";

/* ────────────────────────────────────────────────────────────────────────────────────
layer
──────────────────────────────────────────────────────────────────────────────────── */
.layer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.8);
	width: 100vw;
	height: 100vh;
	opacity: 0;
}
.layer .close {
	background: rgba(245, 158, 203, 1.0) url("/assets/img/top/slider/btn-close.svg") no-repeat 50% 50% / 50% auto;
	position: absolute;
	top: 10%;
	right: 2%;
	width: 50px;
	height: 50px;
	cursor: pointer;
	border-radius: 50px;
}
.layer iframe {
	width: 100%;
	width: min(142.22vh, 100vw);
}
@media all and (min-width: 880px) {
	.slider {margin: 0 auto;max-width: 68rem;}
	.layer iframe {width: 80%;width: min(142.22vh, 80vw);}
}

/* ────────────────────────────────────────────────────────────────────────────────────
article.slider
──────────────────────────────────────────────────────────────────────────────────── */
article.slider {padding: 0 1.5rem;}
article.slider img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
article.slider ul, article.slider ol {
	list-style: none;
	list-style-position: outside;
}

/* ────────────────────────────────────────────────────────────────────────────────────
section.movies
──────────────────────────────────────────────────────────────────────────────────── */
section.movies {
	position: relative;
	height: 8.215rem;
}
section.movies li {
	position: absolute;
	top: 3.115rem;
	left: 50%;
	margin: -3.615rem 0 0 -7.60rem;
	width: 14.9rem;
	height: 8.35rem;
	opacity: 0;
	transform: translateX(0) scale(0.7);
	transition: 0.5s;
	cursor: pointer;
	background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.8) 100%);
}
section.movies li.before3 {
	transform: translateX(-225%) scale(0.7);
	opacity: 0;
	z-index: 0;
}
section.movies li.before2 {
	transform: translateX(-150%) scale(0.7);
	opacity: 1;
	z-index: 1;
}
section.movies li.before {
	transform: translateX(-75%) scale(0.7);
	opacity: 1;
	z-index: 2;
}
section.movies li.current {
	transform: translateX(0%) scale(0.7);
	opacity: 1;
	z-index: 3;
}
section.movies li.after {
	transform: translateX(75%) scale(0.7);
	opacity: 1;
	z-index: 2;
}
section.movies li.after2 {
	transform: translateX(150%) scale(0.7);
	opacity: 1;
	z-index: 1;
}
section.movies li.after3 {
	transform: translateX(225%) scale(0.7);
	opacity: 0;
	z-index: 0;
}


section.movies li iframe {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

section.movies .prev,
section.movies .next {
	position: absolute;
	top: 33%;
	z-index: 3;
	background: no-repeat 50% 50% / 100% auto;
	width: 2.9rem;
	height: 2.9rem;
	cursor: pointer;
	transform: scale(1);
	transition: transform 0.5s;
}
section.movies .prev:hover,
section.movies .next:hover {
	transform: scale(1.2);
}
section.movies .prev {
	left: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-prev.svg");
}
section.movies .next {
	right: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-next.svg");
}

/* ────────────────────────────────────────────────────────────────────────────────────
section.contents
──────────────────────────────────────────────────────────────────────────────────── */
section.contents {
	position: relative;
	margin: 0 -1.5rem;
	height: 6.5rem;
}
section.contents::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	margin-left: -50vw;
	width: 100vw;
	height: 100%;
}
section.contents li {
	position: absolute;
	top: 3.25rem;
	left: 50%;
	margin: -2.42rem 0 0 -6.45rem;
	width: 12.9rem;
	height: 5.2rem;
	opacity: 0;
	transform: translateX(0);
	transition: 0.5s;
	outline: 2px solid rgba(232, 50, 105, 1.0);
	box-shadow: 0 0 8px gray;
}
section.contents li image {
	width: 100%;
}
section.contents li.before2 {
	transform: translateX(-212%);
}
section.contents li.after2 {
	transform: translateX(212%);
}
section.contents li.before {
	z-index: 1;
	opacity: 1;
	transform: translateX(-106%);
}
section.contents li.after {
	z-index: 1;
	opacity: 1;
	transform: translateX(106%);
}
section.contents li.current {
	z-index: 2;
	opacity: 1;
	transform: translateX(0);
}
section.contents .prev,
section.contents .next {
	position: absolute;
	top: 30%;
	z-index: 3;
	background: no-repeat 50% 50% / 100% auto;
	width: 2.9rem;
	height: 2.9rem;
	cursor: pointer;
	transform: scale(1);
	transition: transform 0.5s;
}
section.contents .prev:hover,
section.contents .next:hover {
	transform: scale(1.2);
}
section.contents .prev {
	left: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-prev.svg");
}
section.contents .next {
	right: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-next.svg");
}

@media all and (min-width:880px) {
	section.movies {
		height: 13.55rem;
	}
	section.movies::before {
		height: 6.2rem;
	}
	section.movies li {
		top: 4.85rem;
		margin: -5.35rem 0 0 -13rem;
		width: 26rem;
		height: 13.2rem;
	}
	section.movies .prev,
	section.movies .next {
		top: 39%;
	}
	section.contents {
		height: 7.8rem;
	}
	section.contents li {
		top: 3.9rem;
		margin: -2.9rem 0 0 -7.7rem;
		width: 15.4rem;
		height: 6.2rem;
	}
	section.contents .prev,
	section.contents .next {
		top: 36%;
	}
}

@media all and (min-width:1020px) {
	section.movies {
		margin-left: calc(24rem - 50vw);
		margin-right: calc(24rem - 50vw);
	}
	section.contents {
		margin-left: calc(24rem - 50vw);
		margin-right: calc(24rem - 50vw);
	}
	section.movies .prev {
		left: calc(50vw - 27.5rem);
	}
	section.movies .next {
		right: calc(50vw - 27.5rem);
	}
	section.contents .prev {
		left: calc(50vw - 27.5rem);
	}
	section.contents .next {
		right: calc(50vw - 27.5rem);
	}
}