@charset "utf-8";

@media screen and (max-width: 480px) {
    .movieArticle {
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 5% 0;
        border-bottom: #ddd 1px solid;
        .movieH2 {
            border-bottom: 1px solid #ddd;
        }
        .movieWrap {
            width: 100%;
            .movieInner {
                width: 100%;
            }
        }
        .movie_container {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 1.4rem;
            margin: 5% 0;
            .movieSection {
                width: 100%;
                .movieLink {
                    .movieCard {
                        .movieOverflow {
                            overflow: hidden;
                            position: relative;
                            .movieImg {
                                width: 100%;
                            }
                            .movieName {
                                position: absolute;
                                top: 2%;
                                left: 1%;
                                background-color: #000;
                                color: #fff;
                                opacity: 0.7;
                                padding: 1% 2%;
                                font-size: clamp(10px, 1vw, 14px);
                            }
                            .movieTime {
                                position: absolute;
                                bottom: 2%;
                                right: 1%;
                                background-color: #000;
                                color: #fff;
                                opacity: 0.7;
                                padding: 1% 2%;
                                font-size: clamp(10px, 1vw, 14px);
                            }
                        }
                        .movieFigcaption {
                            .movieH3 {
                                margin-bottom: 1%;
                                padding: 0 1%;

                            }
                            .movieSentence {
                                padding: 0 1%;
                            }
                        }
                    }
                }
            }
        }
    }

    .movieLink:link,
    .movieLink:active,
    .movieLink:visited,
    .movieLink:hover {
        text-decoration: none;
        color: #000;
    }

    .movieSection:hover .movieLink .movieCard .movieOverflow .movieImg {
        transform: scale(1.3);
        transition: 0.3s;
        opacity: 0.7;
    }

    .movieSection .movieLink .movieCard .movieOverflow .movieImg {
        transform: scale(1);
        transition: 0.3s;
        opacity: 1;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .movieArticle {
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 5% 0;
        border-bottom: #ddd 1px solid;
        .movieH2 {
            border-bottom: 1px solid #ddd;
        }
        .movieWrap {
            width: 100%;
            .movieInner {
                width: 100%;
            }
        }
        .movie_container {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 1.4rem;
            margin: 5% 0;
            .movieSection {
                width: calc(100% / 2 - 1rem);
                .movieLink {
                    .movieCard {
                        .movieOverflow {
                            overflow: hidden;
                            position: relative;
                            .movieImg {
                                width: 100%;
                            }
                            .movieName {
                                position: absolute;
                                top: 2%;
                                left: 1%;
                                background-color: #000;
                                color: #fff;
                                opacity: 0.7;
                                padding: 1% 2%;
                                font-size: clamp(10px, 1vw, 14px);
                            }
                            .movieTime {
                                position: absolute;
                                bottom: 2%;
                                right: 1%;
                                background-color: #000;
                                color: #fff;
                                opacity: 0.7;
                                padding: 1% 2%;
                                font-size: clamp(10px, 1vw, 14px);
                            }
                        }
                        .movieFigcaption {
                            .movieH3 {
                                margin-bottom: 1%;
                                padding: 0 1%;

                            }
                            .movieSentence {
                                padding: 0 1%;
                            }
                        }
                    }
                }
            }
        }
    }

    .movieLink:link,
    .movieLink:active,
    .movieLink:visited,
    .movieLink:hover {
        text-decoration: none;
        color: #000;
    }

    .movieSection:hover .movieLink .movieCard .movieOverflow .movieImg {
        transform: scale(1.3);
        transition: 0.3s;
        opacity: 0.7;
    }

    .movieSection .movieLink .movieCard .movieOverflow .movieImg {
        transform: scale(1);
        transition: 0.3s;
        opacity: 1;
    }
}

@media screen and (min-width: 769px) {
    .movieArticle {
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 5% 0;
        border-bottom: #ddd 1px solid;
        .movieH2 {
            border-bottom: 1px solid #ddd;
        }
        .movieWrap {
            width: 100%;
            .movieInner {
                width: 100%;
            }
        }
        .movie_container {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 1.4rem;
            margin: 5% 0;
            .movieSection {
                width: calc(100% / 3 - 1rem);
                .movieLink {
                    .movieCard {
                        .movieOverflow {
                            overflow: hidden;
                            position: relative;
                            .movieImg {
                                width: 100%;
                            }
                            .movieName {
                                position: absolute;
                                top: 2%;
                                left: 1%;
                                background-color: #000;
                                color: #fff;
                                opacity: 0.7;
                                padding: 1% 2%;
                                font-size: clamp(10px, 1vw, 14px);
                            }
                            .movieTime {
                                position: absolute;
                                bottom: 2%;
                                right: 1%;
                                background-color: #000;
                                color: #fff;
                                opacity: 0.7;
                                padding: 1% 2%;
                                font-size: clamp(10px, 1vw, 14px);
                            }
                        }
                        .movieFigcaption {
                            .movieH3 {
                                margin-bottom: 1%;
                                padding: 0 1%;

                            }
                            .movieSentence {
                                padding: 0 1%;
                            }
                        }
                    }
                }
            }
        }
    }

    .movieLink:link,
    .movieLink:active,
    .movieLink:visited,
    .movieLink:hover {
        text-decoration: none;
        color: #000;
    }

    .movieSection:hover .movieLink .movieCard .movieOverflow .movieImg {
        transform: scale(1.3);
        transition: 0.3s;
        opacity: 0.7;
    }

    .movieSection .movieLink .movieCard .movieOverflow .movieImg {
        transform: scale(1);
        transition: 0.3s;
        opacity: 1;
    }
}