.movie .wrapper{
    position: relative;
    padding-bottom: 4rem;
}

.movie .wrapper::before{
    content: "";
    background: linear-gradient(to top right, #F3F9FF, #F2F9FF);
    display: block;
    width: 110rem;
    height: 68.5rem;
    border-radius: 1rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.movie_header{
    margin-bottom: 6rem;
}

.movie_header h2{
    color: var(--mainColor);
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.swiper-wrapper{
    padding-bottom: 4rem;
}

.swiper-scrollbar {
    display: block !important;
    opacity: 1 !important;
    background-color: #EFEFEF;
    width: 100% !important;
    height: 0.3rem !important;
    left: 0!important;
    border-radius: 1rem;
}

.swiper-scrollbar-drag {
    background-color: var(--mainColor);
    border-radius: 1rem;
    width: 86rem;
}

section.faq{
    padding: 0 0 10rem;
}

.faq_content{
    display: flex;
    flex-flow: column;
    gap: 6rem;
}

.faq_item {
    background: linear-gradient(to top right, #D2E8FF, #E9F4FF);
    border-radius: 1rem;
    overflow: hidden;
}

.faq_question {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 3rem 6rem;
    cursor: pointer;
    appearance: none;
}

.faq_question::before {
    content: "Q";
    color: #fff;
    background: #4a7fd4;
    font-family: var(--fontEn);
    font-weight: bold;
    font-size: 3rem;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq_question-text {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    flex: 1;
}

.faq-toggle-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-toggle-icon::before {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
    width: 1rem;
    height: 1rem;
    border-top: 0.0105rem solid var(--mainColor);
    border-right: 0.0105rem solid  var(--mainColor);
}

.faq_question[aria-expanded="true"] .faq-toggle-icon {
    transform: rotate(180deg);
}

.faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq_answer.is-open {
    max-height: 100rem;
}

.faq_answer_inner {
    background: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.8;
    border-radius: 1rem;
    margin: 0 4rem 3rem;
    padding: 3rem 2rem 3rem 10rem;
    position: relative;
}

.faq_answer_inner::before {
    content: "A";
    color: var(--mainColor);
    background: var(--grad);
    font-family: var(--fontEn);
    font-weight: bold;
    font-size: 3rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2rem;
    left: 2rem;
}

.faq_answer_inner span{
    font-size: 1.6rem;
}


@media (max-width: 1024px) {
    .movie{
        display: grid;
        grid-template-columns: 1fr 90% 1fr;
    }

    .movie .wrapper{
        grid-column: 2/4;
        max-width: 100%;
    }

    .movie .wrapper::before{
        width: 90%;
        height: 57rem;
    }

    .faq_content{
        gap: 4rem;
    }

    .faq_question{
        padding: 3rem 4rem;
    }

    .faq_answer_inner{
        margin: 0 2rem 2rem;
    }
}

@media (max-width: 767px) {
    .movie .wrapper{
        padding-bottom: 3rem;
    }

    .movie .wrapper::before{
        width: 85%;
        height: 66rem;
        left: 5%;
        transform: translate(0);
    }

    .movie_header{
        width: 95%;
        margin-bottom: 4rem;
    }

    .movie_header h2{
        font-size: 2.2rem;
    }

    section.faq{
        padding: 0 0 8rem;
    }

    .faq_content{
        gap: 2rem;
    }

    .faq_question{
        padding: 3rem;
        align-items: start;
        gap: 1.5rem;
    }

    .faq_question::before{
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
    }

    .faq_question-text{
        font-size: 1.6rem;
    }

    .faq-toggle-icon{
        width: 3rem;
        height: 3rem;
    }

    .faq-toggle-icon::before{
        width: 0.8rem;
        height: 0.8rem;
    }

    .faq_answer_inner{
        font-size: 1.6rem;
        margin: 0 1.5rem 2rem;
        padding: 2rem 1.5rem 2rem 6rem;
    }

    .faq_answer_inner::before{
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
        left: 1.5rem;
    }

    .faq_answer_inner span{
        font-size: 1.4rem;
    }
}