.main-top {
    /* max-width: 1920px; */
    width: 100%;
    height: 920px;
    aspect-ratio: 16/9;
    background: url(https://img.studycode.com/parent/top_bg.png) lightgray 50% / cover no-repeat;
}
.pm-buy-detail-1 {
    display: flex;
    width: 100%;
    min-width: 960px;
    padding: 0 var(--Spacing_0, 0);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_0, 0);

    background: var(--Semantic-Colors-Background-2, #F7F7F8);
}
.pm-buy-detail-2 {
    display: flex;
    min-width: 960px;
    padding: var(--Spacing_0, 0);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_0, 0);
    align-self: stretch;

    background: #151515;
}

.pm-buy-detail-3 {
    display: flex;
    width: 100%;
    min-width: 960px;
    padding: 0 var(--Spacing_0, 0);
    flex-direction: column;
    align-items: center;
    gap: 56px;
    
    background: var(--Semantic-Colors-Background-2, #F7F7F8);
}
.pm-buy-detail-4 {
    display: flex;
    width: 100%;
    min-width: 960px;
    padding: 100px var(--Spacing_0, 0);
    flex-direction: column;
    align-items: center;
    gap: 88px;
    
    background: var(--Cool-gray-950, #1A1B1E);
}

.pm-buy-detail-5 {
    width: 100%;
    height: 1200px;

    display: flex;
    min-width: 960px;
    padding: 0 var(--Spacing_0, 0);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_40, 40px);
    align-self: stretch;


    background: url(https://img.studycode.com/parent/main_5_bg.png) lightgray 50% / cover no-repeat;
    background-position-y: bottom;
    background-size: 1920px auto;
    /* 03 */
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);

    background-color: #F7F7F8;
}
.pm-buy-detail-6 {
    display: flex;
    min-width: 960px;
    padding: var(--Spacing_80, 80px) var(--Spacing_40, 40px);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_56, 56px);
    align-self: stretch;

    background: #161616;
}
.pm-buy-detail-6 img {
    width: 100%;
}

.pm-buy-detail-7 {
    display: flex;
    width: 100%;
    min-width: 960px;
    padding: var(--Spacing_0, 0) var(--Spacing_40, 40px);
    flex-direction: column;
    align-items: center;
    /* gap: var(--Spacing_32, 32px); */

    background: var(--Semantic-Colors-Background-3, #F0F1F2);
}
.pm-buy-detail-7 img {
    width: 100%;
    max-width: 1024px;
}


.pm-buy-detail-8 {
    display: flex;
    /* height: 1460px; */
    min-width: 960px;
    padding: 0 var(--Spacing_0, 0);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_32, 32px);
    align-self: stretch;

    background: var(--Semantic-Colors-Background-1, #FAFBFF);
}

.pc_only {
    display: flex;
}
.m-only {
    display: none;
}

/*  */
.faq-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--Semantic-Colors-Background-2, #F7F7F8);
    /* padding: var(--Spacing_36, 36px) var(--Spacing_24, 24px) var(--Spacing_48, 48px) var(--Spacing_24, 24px); */
    padding: 68px 40px 80px 40px;
    gap: var(--Spacing_16, 16px);
}
.faq-box > h3 {
    color: var(--Cool-gray-950, #1A1B1E);
    text-align: center;
    font-family: "ONE Mobile Title";
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 157.895% */
    letter-spacing: var(--letter-spacing--0_6, -0.6px);
}

.faq-content-box {
    display: flex;
    width: 100%;
    max-width: 940px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    margin: 0 auto;
}
.faq-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
}

.faq-item {
    display: flex;
    padding: var(--Spacing_28, 28px) var(--Spacing_32, 32px);
    align-self: stretch;

    align-items: flex-start;
    align-self: stretch;
    border: 1px solid #FFF;
    background: #FFF;

    cursor: pointer;
}
.faq-item:hover {
    border: 1px solid #00935F;
}
.faq-item.on {
    border: 1px solid #00935F;
}
.faq-item div:first-child {
    display: flex;
    align-items: flex-start;
    gap: var(--Spacing_8, 8px);
    flex: 1 0 0;
    align-self: stretch;
}

.faq-item div:first-child > span {
    color:  #00935F;
    font-family: Pretendard;
    font-size: var(--font-size-Title-XL, 25px);
    font-style: normal;
    font-weight: 600;
    line-height: 144%; /* 36px */
    letter-spacing: -0.77px;
}
.faq-item div:first-child > p {
    flex: 1 0 0;
    color: #000;
    font-family: Pretendard;
    font-size: var(--font-size-Body-XL, 22px);
    font-style: normal;
    font-weight: 500;
    line-height: 166%; /* 36.52px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);
}
.faq-item div:last-child {
    display: flex;
    padding-left: 18.49px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;
}

.faq-item-content {
    display: flex;
    padding: var(--Spacing_40, 40px) 60px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    background: #DCEAE5;

    display: none;
}
.faq-item-content > p {
    color: #000;
    font-family: Pretendard;
    font-size: var(--font-size-Body-L, 19px);
    font-style: normal;
    font-weight: 400;
    line-height: 200%; /* 38px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);
}

.pm-reivew.faq-box {
    background: #DCEAE5;
}
.pm-reivew.faq-box .faq-item-content {
    background: var(--Semantic-Colors-Background-3, #F0F1F2);
}

.pm-reivew .faq-item-text {
    flex: 1 0 0;
}
.pm-reivew .faq-item-text > div {
    flex: 1 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pm-reivew .faq-item-text > div > p {
    flex: 1 0 0;
    color: #000;
    font-family: Pretendard;
    font-size: var(--font-size-Body-XL, 22px);
    font-style: normal;
    font-weight: 500;
    line-height: 166%; /* 36.52px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);
}
.pm-reivew .faq-item-text > div > span {
    color: var(--Semantic-Colors-Text-body, #616672);
    font-family: Pretendard;
    font-size: var(--font-size-Body-L, 19px);
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 166%; /* 31.54px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);
}

/*  */
.program-info-box {
    display: flex;
    width: 100%;
    /* min-width: 960px; */
    padding: 100px var(--Spacing_40, 40px) 110px var(--Spacing_40, 40px);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_80, 80px);
    align-self: stretch;

    background: var(--Cool-gray-950, #1A1B1E);
}
.program-info-box > h3 {
    color: var(--Semantic-Colors-Text-on-dark, #FFF);
    text-align: center;
    font-family: "ONE Mobile Title";
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 157.895% */
    letter-spacing: var(--letter-spacing--0_6, -0.6px);
}
.program-info-box > .program-info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}
.program-info-box > .program-info-content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing_28, 28px);
}

.program-info-box > .program-info-content > div > span {
    display: flex;
    padding: var(--Spacing_8, 8px) var(--Spacing_36, 36px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing_0, 0);

    border-radius: var(--Radius-100, 100px);
    border: var(--2, 2px) solid var(--Cp_green-500, #00B173);

    color: var(--Cp_green-500, #00B173);
    text-align: center;
    font-family: "ONE Mobile Title";
    font-size: var(--font-size-Title-XXL, 30px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 45px */
    letter-spacing: var(--letter-spacing--0_6, -0.6px);
}
.program-info-box > .program-info-content > div > div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Spacing_4, 4px);
}

.program-info-box > .program-info-content > div > div p {
    color: var(--Semantic-Colors-Text-on-dark, #FFF);
    text-align: center;
    font-family: "ONE Mobile Title";
    font-size: var(--font-size-Heading-M, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 60px */
    letter-spacing: var(--letter-spacing--0_6, -0.6px);
}
.program-info-box > .program-info-content > div > div p:last-child {
    color: var(--Cool-gray-600, #777E8B);
}

/*  */
.buy-choice-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;

}
.buy-choice-box > div {

    display: flex;
    width: 960px;
    min-width: 560px;
    max-width: 960px;
    padding: var(--Spacing_16, 16px) var(--Spacing_28, 28px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing_0, 0);

    border-radius: 10px;
    border: 1px solid var(--Semantic-Colors-Text-on-dark, #FFF);
    background: var(--WhiteOpacity-93, rgba(255, 255, 255, 0.93));
    box-shadow: 2px 2px 30px 0 rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(30px);
}

.buy-choice-content {
    display: flex;
    align-items: center;
    gap: var(--Spacing_4, 4px);
    align-self: stretch;
}
.buy-choice-content > div:first-child {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 8px var(--Spacing_8, 8px);
    flex: 1 0 0;
    flex-wrap: wrap;
}
.buy-choice-content > div:first-child > div {
    display: flex;
    align-items: center;
    gap: 4px;
}
.buy-choice-content > div:first-child > div > span {
    color: var(--Semantic-Colors-Text-title, #303236);
    font-family: Pretendard;
    font-size: var(--font-size-Title-L, 21px);
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: 100%; /* 21px */
    letter-spacing: -0.4px;
}
.buy-choice-content > div:first-child > div > span:last-child {
    font-weight: var(--font-weight-400, 400);
}
.buy-choice-content > div:first-child > div:last-child > span {
    color: var(--Cool-gray-600, #777E8B);
}

.choice-btn > button {
    display: flex;
    padding: var(--Spacing_16, 16px) var(--Spacing_28, 28px);
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    border-radius: var(--Radius-100, 100px);
    background: var(--Cp_green-500, #00B173);

    color: var(--Semantic-Colors-Text-on-dark, #FFF);
    text-align: center;
    font-family: Pretendard;
    font-size: var(--font-size-Title-M, 19px);
    font-style: normal;
    font-weight: var(--font-weight-700, 700);
    line-height: 100%; /* 19px */
    letter-spacing: var(--letter-spacing--0_4, -0.4px);
}


@media (max-width: 959px) {
    /*  */
    .main-top {
        width: 100%;
        min-width: 360px;
        height: 640px;
        flex-shrink: 0;
        aspect-ratio: 9/16;

        background: url(https://img.studycode.com/parent/top_bg_m.jpg) lightgray 50% / cover no-repeat;
    }
    .main-top img {
        width: calc(1080px / 3);
    }
    .pm-buy-detail-1 {
        width: 100%;
        min-width: 360px;
        min-height: 920px;
        flex-shrink: 0;
    }
    .pm-buy-detail-1 img {
        width: calc(1080px / 3);
    }

    .pm-buy-detail-2 {
        min-width: 360px;
    }
    .pm-buy-detail-2 > img {
        width: 100%;
    }
    .pm-buy-detail-2 > picture > img {
        width: calc(1080px / 3);
    }

    .pm-buy-detail-3 {
        min-width: 360px;
        gap: var(--Spacing_40, 40px);
        align-self: stretch;
    }
    .pm-buy-detail-3 > picture > img {
        width: calc(1080px / 3);
    }

    .pm-buy-detail-4 {
        min-width: 360px;
        padding: 0 var(--Spacing_0, 0);
        gap: var(--Spacing_40, 40px);
        align-self: stretch;
        /* background: #fff; */
        background: var(--Semantic-Colors-Background-2, #F7F7F8);

    }
    .pm-buy-detail-4 > picture > img {
        width: calc(1080px / 3);
    }

    .pm-buy-detail-4-2 {
        display: flex;
        height: 450px;
        min-width: 360px;
        padding: var(--Spacing_0, 0);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--Spacing_40, 40px);
        align-self: stretch;

        background: var(--Cool-gray-950, #1A1B1E);
    }
    .pm-buy-detail-4-2 > picture > img {
        width: calc(1080px / 3);
    }
    
    .pm-buy-detail-5 {
        display: flex;
        height: 738px;
        min-width: 360px;
        gap: var(--Spacing_16, 16px);

        background: #F7F7F8;
        box-shadow: none;
    }
    .pm-buy-detail-5 > picture > img {
        width: calc(1080px / 3);
    }

    .pm-buy-detail-6 {
        min-width: 360px;
        padding: var(--Spacing_0, 0);
        gap: var(--Spacing_56, 56px);

        /* background: none; */
    }
    .pm-buy-detail-6 > picture > img {
        width: calc(1080px / 3);
    }
    .pm-buy-detail-7 {
        height: 874.33px;
        min-width: 360px;
        padding: 0 var(--Spacing_0, 0);
        justify-content: center;
        /* gap: var(--Spacing_20, 20px); */

        /* background: none; */
    }
    .pm-buy-detail-7 > picture {
        background: var(--Semantic-Colors-Background-3, #F0F1F2);
    }
    .pm-buy-detail-7 > picture > img {
        width: calc(1080px / 3);
    }

    .pm-buy-detail-8 {
        height: 660px;
        min-width: 360px;
        padding: 0 var(--Spacing_20, 20px);
        gap: var(--Spacing_20, 20px);
        
        background: none;
    }
    .pm-buy-detail-8 > picture > img {
        width: calc(1080px / 3);
    }

    .pc-only {
        display: none;
    }
    .m-only {
        display: flex;
    }

    /*  */
    .faq-box {
        padding: var(--Spacing_40, 40px) var(--Spacing_20, 20px);
        gap: var(--Spacing_20, 20px);
        align-self: stretch;
    }
    .faq-box > h3 {
        font-size: var(--font-size-Title-L, 21px);
        line-height: 100%; /* 21px */
    }
    
    .faq-content-box {
        max-width: 480px;
    }
    
    .faq-item {
        padding: var(--Spacing_16, 16px) var(--Spacing_20, 20px);
    }
    .faq-item div:first-child {
        display: flex;
        align-items: flex-start;
        gap: var(--Spacing_8, 8px);
        flex: 1 0 0;
        align-self: stretch;
    }
    
    .faq-item div:first-child > span {
        font-size: var(--font-size-Body-M, 17px);
    }
    .faq-item div:first-child > p {
        font-size: var(--font-size-Body-S, 15px);
        line-height: 150%; /* 22.5px */
    }
    .faq-item-content {
        padding: var(--Spacing_20, 20px) var(--Spacing_40, 40px);
    }
    .faq-item-content > p {
        font-size: var(--font-size-Body-S, 15px);
        line-height: 180%; /* 27px */
    }

    .pm-reivew .faq-item-text > div {
        flex: 1 0 0;
        
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: var(--Spacing_0, 0);
    }
    .pm-reivew .faq-item-text > div > p {
        font-size: var(--font-size-Body-S, 15px);
        line-height: 150%; /* 22.5px */
    }
    .pm-reivew .faq-item-text > div > span {
        font-size: var(--font-size-Detail-S, 13px);
    }

    /*  */
    .program-info-box {
        gap: var(--Spacing_28, 28px);
        padding: var(--Spacing_48, 48px) var(--Spacing_20, 20px) var(--Spacing_56, 56px) var(--Spacing_20, 20px);
    }
    .program-info-box > h3 {
        font-size: var(--font-size-Title-L, 21px);
        line-height: 100%; /* 21px */
    }
    .program-info-box > .program-info-content {
        gap: var(--Spacing_28, 28px);
    }
    .program-info-box > .program-info-content > div {
        gap: var(--Spacing_12, 12px);
    }

    .program-info-box > .program-info-content > div > span {
        padding: var(--Spacing_4, 4px) var(--Spacing_20, 20px);

        border-radius: 52.805px;
        border: 1.056px solid var(--Cp_green-500, #00B173);

        font-size: var(--font-size-Title-XS, 15px);
        letter-spacing: var(--letter-spacing--0_4, -0.4px);

    }
    .program-info-box > .program-info-content > div > div {
        gap: 2.112px;
    }

    .program-info-box > .program-info-content > div > div p {
        font-size: var(--font-size-Title-M, 19px);
    }
    

    /*  */
    .buy-choice-box > div {
        width: 559px;
        min-width: 360px;
        max-width: 559px;
        padding: var(--Spacing_12, 12px) var(--Spacing_20, 20px);
        
        border-radius: var(--Radius-0, 0);
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(15px);
    }
    
    .buy-choice-content > div:first-child {
        gap: 4px;
    }
    .buy-choice-content > div:first-child > div > span {
        font-size: var(--font-size-Body-M, 17px);
        font-weight: var(--font-weight-700, 700);
    }
    .choice-btn > button {
        padding: var(--Spacing_12, 12px) var(--Spacing_20, 20px);

        font-size: var(--font-size-Title-S, 17px);
    }
}