
@media (max-width: 1024px) {

    .body {
        overflow: hidden;
    }


    .sound_engineer,
    .main_page {
        width: 100%;
    }

    .header_top {
        padding: 20px;
    }

    .header_top>h1>img {
        width: 120px;
    }

    .header_top>ul {
        gap: 8px;
    }


    .main_page>.sound_engineer>.main_top_text>p {
        font-size: 96px;
    }

    .main_page>.sound_engineer>.main_top_text>h2 {
        font-size: 56px;
    }

    .main_center_box {
        flex-wrap: wrap;
        gap: 40px;
        margin: 20px;
        text-align: center;
    }

    .main_center_box>figure {
        width: 300px;
    }

    .main_center_box>figure>img {
        width: 100%;
    }

    .main_center_box>.main_top_text_2>h3 {
        font-size: 24px;
    }

    .main_center_box>.main_top_text_2>p {
        font-size: 20px;
    }

    .main_text > div > p {
        word-break: keep-all;
    }


    .sound_engineer:last-child > .main_center_box::after {
        bottom: -68px;
        left: 0;
        }
    
        .sound_engineer:last-child > .main_center_box::before {
        bottom: -68px;
        left: 0;
        }
    
        .sound_engineer:first-child > .main_center_box::before {
            top: -68px;
            bottom: 0;
        }
    
        .sound_engineer:first-child > .main_center_box::after {
            top: -68px;
            bottom: 0;
        }


    .carousel_slide {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .carousel_container>.carousel_track>.carousel_slide>h2 {
        font-size: 20px;
    }

    .carousel_slide img {
        width: 70%;
    }

    .carousel_content {
        width: 80%;
        padding: 0;
    }

    .carousel_text>div>h3 {
        font-size: 18px;
    }

    .carousel_text>div>strong {
        font-size: 16px;
    }

    .carousel_text>div>p {
        font-size: 14px;
    }


    .main_audition {
        flex-direction: column;
        height: auto;
    }

    .main_audition>figure {
        position: relative;
        height: 50vh;
    }

    .main_audition>div {
        padding: 50px 20px;
        gap: 50px;
    }


    .sticky_content_section>h2 {
        font-size: 24px;
    }

    .sticky_content_section>.sticky_left>div>p {
        font-size: 16px;
    }

    .sticky_content_section>.sticky_right>div>p {
        font-size: 16px;
    }


    .enquiry_section {
        text-align: center;
    }

    .enquiry_section>div>h2 {
        font-size: 24px;
        line-height: 40px;
    }

    .enquiry_section>div>p {
        font-size: 18px;
    }

    .enquiry_section>div {
        width: 100%;
        padding: 20px;
    }

    .enquiry_section>figure {
        width: 100%;
        height: 100vh;
    }
}



@media (max-width: 760px) {
    
    .body {
        overflow: hidden;
    }
    
    .web_header {
        display: none;
    }

    .mo_header {
        display: block;
        position: relative;
        background-color: #0d0d0d;
        padding: 12px;
    }

    .mo_header_menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mo_header_menu > figure > img {
        width: 88px;
        height: 30px;
    }

    .mo_header_menu > button > img {
        width: 24px;
        height: 24px;
        color: #fff;
        border: none;
        position: relative;
        cursor: pointer;
    }

    .mo_header_menu > button {
        background: none;
    }


    .mo_menu {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(11, 10, 8, 1);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 10;
    }

    .mo_menu > a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .mo_menu.active{
        display: block;
    }

    .mo_menu > a {
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        padding: 16px 0;
        font-family: "Noto Sans KR", sans-serif;
    }

    /* .mo_menu.active {
        display: flex;
    } */


    .main_text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;
        text-align: center;
        /* word-break: break-all;  */
    }

    .main_text > h2 {
        font-size: 32px;
        padding-bottom: 16px;
    }

    .main_text>div>p {
        font-size: 18px;
    }


    .main_page>.sound_engineer>.main_top_text>p {
        font-size: 72px;
    }

    .main_page>.sound_engineer>.main_top_text>h2 {
        font-size: 42px;
    }

    .main_center_box {
        gap: 20px;
        margin: 10px;
        justify-content: center;
    }

    .main_center_box>.main_top_text_2>h3 {
        font-size: 20px;
    }

    .main_center_box>.main_top_text_2>p {
        font-size: 16px;
        line-height: 24px;
    }

    .main_top_text {
        padding: 0 16px;
    }

    .sound_engineer:last-child > .main_center_box::after {
    bottom: -68px;
    left: 0;
    }

    .sound_engineer:last-child > .main_center_box::before {
    bottom: -68px;
    left: 0;
    }

    .sound_engineer:first-child > .main_center_box::before {
        top: -68px;
        bottom: 0;
    }

    .sound_engineer:first-child > .main_center_box::after {
        top: -68px;
        bottom: 0;
    }


    .carousel_container>.carousel_track>.carousel_slide>h2 {
        font-size: 18px;
    }

    .carousel_slide img {
        width: 80%;
    }

    .carousel_content {
        width: 90%;
    }

    .carousel_text>div>h3 {
        font-size: 16px;
    }

    .carousel_text>div>strong {
        font-size: 14px;
    }

    .carousel_text>div>p {
        font-size: 12px;
    }


    .sticky_container {
        display: block;
        align-items: center;
        position: relative;
    }

    .sticky_container > .sticky-image {
        width: 100%;
        height: 30vh;
    }

    .sticky_content_container {
        padding: 20px;
        width: 100%;
    }

    .sticky_content_section>h2 {
        font-size: 24px;
    }

    .sticky_content_section>.sticky_left>div>p {
        font-size: 18px;
    }

    .sticky_content_section>.sticky_right>div>p {
        font-size: 16px;
    }


    /* .enquiry_section {
        display: flex;
        flex-direction: column;
    }

    .enquiry_section>div {
        padding: 50px;
    }

    .enquiry_section>div>h2 {
        font-size:24px;
        line-height: 30px;
    }

    .enquiry_section>div>p {
        font-size: 14px;
        line-height: 30px;
    } */

    .enquiry_section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/bottom.png);
        width: 100%;
        height: 100vh;
        background-size: cover;
    }

    .enquiry_section > div {
        align-items: center;
        text-align: center;
        padding-top: 280px;
    }

    .enquiry_section > div > h2 {
        font-size: 24px;
        color: #fff;
        line-height: 38px;
    }

    .enquiry_section > div > p {
        font-size: 18px;
        color: #fff;
        word-break: keep-all;
        line-height: 34px;
    }

    .enquiry_section > figure > img {
        width: 0;
        height: 0;
    }


    .qeustion_img_box {
        height: 50%;
    }


    footer {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    footer>div>p {
        font-size: 14px;
        line-height: 20px;
    }

    footer>figure>img {
        width: 100px;
    }

    /* 760부터 핸드폰 화면에 보일 수 있도록 수정하기. */
}



@media (max-width: 360px) {


    /* .mo_button {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mo_button > figure > img {
        width: 72px;
        height: 24px;
    }

    .mo_button > button {
        width: 32px;
        height: 24px;
        background: none;
        border: none;
        position: relative;
        cursor: pointer;
    } */
/* 
    .mo_button > button::before,
    .mo_button > button::after,
    .mo_button > button > div {
        content: "";
        display: block;
        background-color: rgba(130, 100, 85, 1);
        height: 3px;
        width: 100%;
        margin: 5px 0;
        transition: 0.3s;
    } */

    .main_text {
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 10px;
    }

    .main_text > div {
        align-items: center;
    }

    .main_text > h2 {
        font-size: 24px;
    }

    .main_text > div > p {
        font-size: 12px;
        word-break: keep-all;
    }


    .main_page > article {
        overflow: hidden;
    }

    .main_page>.sound_engineer>.main_top_text>p {
        font-size: 48px;
    }

    .main_page>.sound_engineer>.main_top_text>h2 {
        font-size: 28px;
    }

    .main_center_box>.main_top_text_2>h3 {
        font-size: 16px;
    }

    .main_center_box>.main_top_text_2>p {
        font-size: 14px;
        line-height: 24px;
    }


    .sound_engineer:last-child > .main_center_box::after {
    bottom: -38px;
    left: 0;
    }

    .sound_engineer:last-child > .main_center_box::before {
    bottom: -38px;
    left: 0;
    }


    .carousel_text {
        display: flex;
        flex-direction: column;
    }

    .carousel_container>.carousel_track>.carousel_slide>h2 {
        font-size: 16px;
    }

    .carousel_slide img {
        width: 50%;
    }

    .carousel_content>div>h3 {
        font-size: 14px;
    }

    .carousel_content>div>strong {
        font-size: 12px;
    }

    .carousel_content>div>p {
        font-size: 12px;
    }


    .sticky_container {
        display: block;
        align-items: center;
        position: relative;
    }

    .sticky_content_section>h2 {
        font-size: 12px;
    }

    .sticky_content_section>.sticky_left>div>p {
        font-size: 10px;
    }

    .sticky_content_section>.sticky_right>div>p {
        font-size: 10px;
    }

    .sticky_content_section > .sticky_left > div > img {
        width: 24px;
        height: 24px;
    }

    .sticky_content_section > .sticky_right > div > img {
        width: 24px;
        height: 24px;
    }

    .sticky_container > .sticky-image {
        width: 100%;
        height: 10vh;
    }

    .sticky_content_section {
        min-height: 50vh;
    }

    .sticky_content_container {
        padding: 20px;
        width: 100%;
    }


    .enquiry_section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/bottom.png);
        width: 100%;
        height: 50vh;
        background-size: cover;
    }

    .enquiry_section>div>h2 {
        font-size: 14px;
        text-align: center;
        color: #fff;
        line-height: 1.5;
    }

    .enquiry_section>div>p {
        font-size: 12px;
        color: #fff;
        word-break: keep-all;
        line-height: 24px;
    }

    .enquiry_section > figure > img {
        width: 0;
        height: 0;
    }


    footer {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px;
        background-color: rgba(11, 10, 8, 1);
    }

    footer>div>p {
        font-size: 10px;
    }

    footer>figure>img {
        width: 100px;
    }
}