@charset "utf-8";

.swiper-container {
	width:calc(100% - 44px);
	height:100%;
}
.swiper-slide {
	/*text-align:center;*/
	/*display:flex;*/ /* 내용을 중앙정렬 하기위해 flex 사용 */
	/*align-items:center; /* 위아래 기준 중앙정렬 */
	/*justify-content:center; /* 좌우 기준 중앙정렬 */

	width: 100%;
	height: 100%;
	margin: 0 auto;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}
.swiper-scrollbar {
	height: 94%;
}

@keyframes rightFadeIn {
	0% {
		opacity: 0;
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes rightFadeIn { /* Safari and Chrome */
	0% {
		opacity: 0;
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes leftFadeIn {
	0% {
		opacity: 0;
		transform: translateX(-90px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes leftFadeIn { /* Safari and Chrome */
	0% {
		opacity: 0;
		transform: translateX(-90px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes leftFadeOut {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(-90px);
	}
}

@-webkit-keyframes leftFadeOut { /* Safari and Chrome */
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(-90px);
	}
}

@keyframes bottomFadeIn {
	0% {
		opacity: 0;
		transform: translateY(90px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes bottomFadeIn { /* Safari and Chrome */
	0% {
		opacity: 0;
		transform: translateY(90px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes indexBottomFadeIn {
	0% {
		opacity: 0;
		transform: translateY(180px);
	}
	/*90% {
		opacity: 0.8;
		transform: translateY(-10px);
	}*/
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes indexBottomFadeIn { /* Safari and Chrome */
	0% {
		opacity: 0;
		transform: translateY(180px);
	}
	/*90% {
		opacity: 0.8;
		transform: translateY(-10px);
	}*/
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes topFadeIn {
	0% {
		opacity: 0;
		transform: translateY(-90px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes topFadeIn { /* Safari and Chrome */
	0% {
		opacity: 0;
		-webkit-transform: translateY(-90px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes ReviewTopFadeIn {
	0% {
		opacity: 0;
		transform: translateY(-270px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes ReviewTopFadeIn { /* Safari and Chrome */
	0% {
		opacity: 0;
		-webkit-transform: translateY(-270px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes ReviewTopFadeOut {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-180px);
	}
}

@-webkit-keyframes ReviewTopFadeOut { /* Safari and Chrome */
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-180px);
	}
}

@-webkit-keyframes miniplayer { /* Safari and Chrome */
	0% {
		-webkit-transform: translate(200px,-400px);
	}
	100% {
		-webkit-transform: translate(0);
	}
}

@keyframes leftScroll{
	/*from {
		background-position: 0 0;
  	}
	use negative width if you want it to flow right to left else and positive for left to right
	to {
		background-position: -10000px 0;
	}*/
	0%{
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-750px, 0, 0);
	}
}

@-webkit-keyframes leftScroll{
	/*from {
		background-position: 0 0;
  	}
	use negative width if you want it to flow right to left else and positive for left to right
	to {
		background-position: -10000px 0;
	}*/
	0%{
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(-750px, 0, 0);
	}
}

@keyframes rightScroll{
	/*from {
		background-position: -10000px 0;
  	}
	use negative width if you want it to flow right to left else and positive for left to right
	to {
		background-position: 0 0;
	}*/
	0%{
		transform: translate3d(-750px, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes rightScroll{
	/*from {
		background-position: -10000px 0;
  	}
	use negative width if you want it to flow right to left else and positive for left to right
	to {
		background-position: 0 0;
	}*/
	0%{
		transform: translate3d(-750px, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ScaleChangeSmall{
	0% {
		position: fixed;
		width: 412px;
		height: 434px;
		background-size: 412px;
		border-radius:0px;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		top: 50%;
		left: 50%;
	}
	20%, 60% {
		position: fixed;
		width: 168px;
		height: 168px;
		background-size: 168px;
		border-radius:168px;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}
	100% {
		position: fixed;
		width: 42px;
		height: 42px;
		background-size: 42px;
		border-radius:42px;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		top: 150%;
	}
}

@keyframes ScaleChangeSmall_2{
	0% {}
	20%, 60% {
		position: absolute;
		width: 168px;
		height: 168px;
		background-size: cover;
		border-radius:168px;
		top: 50%;
		left: 50%;
		/*transform: translateX(-50%) translateY(-50%);*/
	}
	100% {
		position: absolute;
		width: 42px;
		height: 42px;
		background-size: cover;
		border-radius:42px;
		/*top: 50%;*/
		left: 50%;
		/*transform: translateX(-50%) translateY(-50%);*/
		top: 150%;
	}
}

@-webkit-keyframes sScaleChangeSmall{
	0% {
		position: fixed;
		width: 412px;
		height: 434px;
		background-size: 412px;
		border-radius:0px;
		transform: translateX(-50%) translateY(-50%);
	}
	20%, 60% {
		position: fixed;
		width: 168px;
		height: 168px;
		background-size: 168px;
		border-radius:168px;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	100% {
		position: fixed;
		width: 42px;
		height: 42px;
		background-size: 42px;
		border-radius:42px;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		top: 150%;
	}
}

@keyframes playImgScaleChangeBig{
	0%{
		transform: scale(0.15);
		border-radius:190px;
		transform: translate(-200px, 400px);
	}
	75%{
		transform: scale(1);
		border-radius:0px;
	}
	100% {
		transform: scale(1);
		border-radius:0px;
		transform: translate(0);
	}
}

@-webkit-keyframes playImgScaleChangeBig{
	0%{
		-webkit-transform: scale(0.15);
		border-radius:190px;
		-webkit-transform: translate(-200px, 400px);
	}
	75%{
		-webkit-transform: scale(1);
		border-radius:0px;
	}
	100% {
		-webkit-transform: scale(1);
		border-radius:0px;
		-webkit-transform: translate(0);
	}
}

.video_area iframe,
.video_area object,
.video_area embed {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 217px;
}