@charset "utf-8";
/* CSS Document */

/* -- Animate For Bg -- */
.main-bg .circle-bg-head .for-bg {
	-ms-animation: circle-breath-main 2.2s ease-in-out infinite;
	-moz-animation: circle-breath-main 2.2s ease-in-out infinite;
	-webkit-animation: circle-breath-main 2.2s ease-in-out infinite;
	animation: circle-breath-main 2.2s ease-in-out infinite;
}
@keyframes circle-breath-main {
	0% {
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top: 0;
		opacity: 1;
		opacity: 0.3;
    }
    50% {
		width: 101%;
		height: 101%;
		margin-left: -0.5%;
		margin-top: -0.5%;
		opacity: 0.2;
	}
    100% {
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top: 0;
		opacity: 1;
		opacity: 0.3;
    }
}

/* -- Animate For Line -- */
.main-bg .circle-bg-head .for-bg-line {
	-ms-animation: circle-breath-main-line 1.7s ease-in-out infinite;
	-moz-animation: circle-breath-main-line 1.7s ease-in-out infinite;
	-webkit-animation: circle-breath-main-line 1.7s ease-in-out infinite;
	animation: circle-breath-main-line 1.7s ease-in-out infinite;
}
@keyframes circle-breath-main-line {
	0% {
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top: 0;
		opacity: 0.7;
    }
    50% {
		width: 100.6%;
		height: 100.6%;
		margin-left: -0.3%;
		margin-top: -0.3%;
		opacity: 0.5;
	}
    100% {
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top: 0;
		opacity: 0.7;
    }
}

/* -- Animate For Index Movie Bg -- */
.index-movie:after {
	-ms-animation: circle-breath-movie 3s ease-in-out infinite;
	-moz-animation: circle-breath-movie 3s ease-in-out infinite;
	-webkit-animation: circle-breath-movie 3s ease-in-out infinite;
	animation: circle-breath-movie 3s ease-in-out infinite;
}
@keyframes circle-breath-movie {
	0% {
		width: 103%;
		height: 103%;
		left: -1.5%;
		bottom: -40px;
		opacity: 0.2;
	}
	50% {
		width: 105%;
		height: 105%;
		left: -2.5%;
		bottom: calc(-40px - 1%);
	}
	100% {
		width: 103%;
		height: 103%;
		left: -1.5%;
		bottom: -40px;
		opacity: 0.2;
    }
}

/* -- Animate For Index Movie Line -- */
.index-movie:before {
	-ms-animation: circle-breath-movie-line 4s ease-in-out infinite;
	-moz-animation: circle-breath-movie-line 4s ease-in-out infinite;
	-webkit-animation: circle-breath-movie-line 4s ease-in-out infinite;
	animation: circle-breath-movie-line 4s ease-in-out infinite;
}
@keyframes circle-breath-movie-line {
	0% {
		width: 110%;
		height: 110%;
		left: -6.5%;
		bottom: -10px;
	}
	50% {
		width: 114%;
		height: 114%;
		left: -8.5%;
		bottom: calc(-10px - 2%);
	}
	100% {
		width: 110%;
		height: 110%;
		left: -6.5%;
		bottom: -10px;
    }
}
/* Responsive */
@media screen and (max-width: 1680px) {
}

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

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

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

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

@media screen and (max-width: 640px) {
	@keyframes circle-breath-movie {
		0% {
			width: 103%;
			height: 103%;
			left: -1.5%;
			bottom: -12px;
			opacity: 0.2;
		}
		50% {
			width: 105%;
			height: 105%;
			left: -2.5%;
			bottom: calc(-12px - 1%);
		}
		100% {
			width: 103%;
			height: 103%;
			left: -1.5%;
			bottom: -12px;
			opacity: 0.2;
		}
	}
}