@charset "UTF-8";

/* ----------------------------------------------------
 * movie
 * ---------------------------------------------------- */
.movie__container {
	margin: 0 auto 15%;


	.movie__title {
		width: 45%;
		margin: 5% auto 3%;

		@media (max-width: 750px) {
			width: 68%;
			margin: 10% auto 3%;
		}
	}

	.movie__text {
		font-size: calc(38 * 100vw / 1920);
		text-align: center;
		margin-bottom: 2%;

		@media (max-width: 750px) {
			font-size: calc(27 * 100vw / 750);
		}
	}

	.movie__new-container {
		width: 87%;
		margin: 0 auto 5%;

		.movie__new-image {
			position: relative;
			cursor: pointer;

			.movie-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 20%;

				@media (max-width: 750px) {
					width: 30%;
				}
			}
		}

		.movie__new-image.disable {
			cursor: unset;

			.movie-icon {
				display: none;
			}
		}

		.movie__new-text {
			font-size: calc(38 * 100vw / 1920);
			text-align: center;

			@media (max-width: 750px) {
				font-size: calc(25 * 100vw / 750);
			}
		}
	}

	.movie__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		place-items: center;
		width: 87%;
		margin: 0 auto 5%;
		gap: 1.5vw;
		font-size: calc(31 * 100vw / 1920);

		@media (max-width: 750px) {
			font-size: calc(26 * 100vw / 750);
		}

		@media (max-width: 750px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 2vw;
		}

		.movie-item {
			position: relative;
			cursor: pointer;
			text-align: center;

			.movie-icon {
				position: absolute;
				top: 43%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 33%;

				@media (max-width: 750px) {
					top: 37%;
				}
			}
		}

		.movie-item.disable {
			cursor: unset;

			.movie-icon {
				display: none;
			}
		}
	}
}