html, body {
    background: #fff;
}
html, body, .body-class {
    height: 100%;
}
main {
    min-height: 100%;
}
.kit-container .standard {
    width: 1300px; margin: 0 auto;
}

.kit-container {
    padding: 120px 0;
}

.kit-container .p1 {
    display: flex; align-items: center;
    flex-direction: column; text-align: center;
    gap: 40px; justify-content: center;
}
.kit-container .p1 .title {
    display: flex; flex-direction: column; gap: 12px;
}
.kit-container .p1 .title .sub {
    font-size: var(--fs-18); line-height: var(--lh-18); letter-spacing: var(--ls-18);
    font-weight: 600; color: rgba(60, 60, 67, 0.60);
}
.kit-container .p1 .title h1 {
    font-size: var(--fs-44); line-height: var(--lh-44); letter-spacing: var(--ls-44);
    font-weight: 800; color: #000; margin: 0; padding: 0;
}
.kit-container .p1 .visual {
    
}
.kit-container .p1 .visual img {
    width: 400px;
}
.kit-container .p1 .visual .lott {
    width: 400px;
}



.kit-container .p2 {
    display: flex; align-items: center;
    flex-direction: column; text-align: center;
    gap: 40px; justify-content: center;
}
.kit-container .p2 .title {
    display: flex; flex-direction: column; gap: 16px;
}
.kit-container .p2 .title .sub {
    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);
    font-weight: 600; color: #F57F16;
}
.kit-container .p2 .title h2 {
    font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: var(--ls-32);
    font-weight: 800; color: #000; margin: 0; padding: 0;
}
.kit-container .p2 .visual {
    
}
.kit-container .p2 .visual img {
    height: 60px;
}
.kit-container .action {
    display: flex; flex-direction: column; gap: 12px;
    width: 100%; align-items: center;
}
.kit-container .action .btn {
    display: flex;
    padding: 16px 10px;
    width: 378px;
    max-width: calc(100% - 64px);
    justify-content: center;
    align-items: center;
    color: #000; background: transparent;
    border-radius: 8px;
    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);
    font-weight: 600;
    /* width: 100 */
    gap: 6px;
}
.kit-container .action .btn.emp {
    color: #000; background: #FCEB55;
}
.kit-container .action .btn.lo {
    color: #000; background: rgba(120, 120, 128, 0.12);
}



.kit-container .p4 {
    display: flex; align-items: center;
    flex-direction: column; text-align: center;
    gap: 28px; justify-content: center;
    padding: 60px 0;
}
.kit-container .p4 .title {
    display: flex; flex-direction: column; gap: 20px;
}
.kit-container .p4 .title .sub {
    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);
    font-weight: 600; color: rgba(60, 60, 67, 0.60);
}
.kit-container .p4 .title h2 {
    font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: var(--ls-32);
    font-weight: 800; color: #000; margin: 0; padding: 0;
}
.kit-container .p4 .visual {
    
}


.kit-list-wrapper {

}

.kit-list {
    display: flex; 
    gap: 40px;
    justify-content: center;
    align-items: center;
}
.kit-list > li {
    display: flex;
    width: 224px;
    height: 344px;
    border-radius: 20px;
    background: #F4F4EC;
    justify-content: center; align-items: center; flex-direction: column;
}
.kit-list > li .visual {
    display: flex;  width: 100%;
    height: calc(100% - 100px); position: relative;
}
.kit-list > li .visual img {
    position: absolute; left: 0; right: 0; margin: auto;
}


.kit-list > li .visual .item-1 {
    top: -18.16px; width: 122px;
}
.kit-list > li .visual .item-2 {
    top: -18px; height: 242px; height: 219px;
}
.kit-list > li .visual .item-3 {
    top: -18px; height: 241px; height: 228px;
}
.kit-list > li .visual .item-4 {
    top: 23px; width: 250px;
    left: -13px;
}
.kit-list > li .visual .item-5 {
    top: -12px; width: 171px;
}

.kit-list > li .txt {
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; gap: 7px; text-align: center; width: 100%;
    padding-bottom: 33px;
}
.kit-list > li .txt .txt-in-1 {
    font-family: 'Belleza'; text-transform: uppercase;
    font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); color: #8B5D1C;
}
.kit-list > li .txt .txt-in-2 {
    font-size: var(--fs-19); line-height: var(--lh-19); letter-spacing: var(--ls-19); color: #754B0F;
}
.kit-list > li .txt .txt-in-3 {
    font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: #B2965C;
}





.kit-container .p3 {
    display: flex; align-items: center;
    flex-direction: column; text-align: center;
    gap: 40px; justify-content: center;
}
.kit-container .p3 .title { 
    display: flex; flex-direction: column; gap: 12px;
}
.kit-container .p3 .title .sub {
    font-size: var(--fs-18); line-height: var(--lh-18); letter-spacing: var(--ls-18);
    font-weight: 600; color: #000;
}
.kit-container .p3 .title h2 {
    font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: var(--ls-32);
    font-weight: 800; color: #000; margin: 0; padding: 0;
}

.expl {
    display: flex; flex-direction: column;
    gap: 16px; width: 472px;
}
.expl > li {
    display: flex;
    padding: 20px 24px 20px 16px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 12px;
    background: #F7F7F2;
    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);
    color: rgba(60, 60, 67, 0.60); font-weight: 400;
}
.expl > li .ment {
    text-align: left;
    display: flex; flex-direction: column; gap: 10px;
}
.expl > li .ment .emp {
    color: #000; font-weight: 600;
}




.qna-list-wrapper {
    margin-top: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qna-list {
    display: flex; flex-direction: column;
    width: 900px;
}
.qna-list > li {
    display: flex; width: 100%; flex-direction: column; 
    border-bottom: 1px solid rgba(84, 84, 86, 0.18);
    font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13);
}
.qna-list > li:hover {
    /* background: rgba(120, 120, 128, 0.08); */
}
.qna-list > li .contents {
    display: flex; width: 100%; 
    
    padding: 0 80px 24px 8px;

    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);
    color: rgba(60, 60, 67, 0.60); overflow: hidden; text-align: left;
    justify-content: left;  flex-direction: column;

    transition: max-height 0.3s ease-in-out, visibility 0.3s ease-in-out;
    display: none;

}
.qna-list > li .contents p {padding: 4px 0; margin: 0;}
.qna-list > li .contents a {
    text-decoration: normal;
    color: #F57F16; font-weight: 400;
}

.qna-list > li .toggle-checkbox {
    /* display: none; */
}
.qna-list > li .link {
    display: flex; width: 100%;
    justify-content: space-between;
    padding: 24px 8px 20px 8px;
    cursor: pointer;
}
.qna-list > li .link .title {
    display: flex; gap: 12px; align-items: center;
    user-select: none;
}
.qna-list > li .link .title.column {
    flex-direction: column; align-items: flex-start; text-align: center; gap: 8px;
    max-width: 90%; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qna-list > li .link .title .cat {
    color: #007AFF; font-weight: 600; 
    min-width: 47px;
}
.qna-list > li .link .title .txt {
    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 600;
    text-align: left; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    /* position: relative; */
}

.qna-list > li .link .right {
    color: rgba(60, 60, 67, 0.60);
    user-select: none;
    display: flex;
    align-items: end;
}
/* 회전 효과 */
.qna-list > li .toggle-checkbox:checked + .link .right img {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
    width: 20px;
}
/* 체크박스를 활용한 아코디언 효과 */
.kit-container .qna-list .toggle-checkbox:checked + .link + .contents {
    /* visibility: visible; */
    display: flex;
    max-height: 5000px; /* 충분한 값 */
}





.kit-mobile {
    display: flex; width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    display: none;
}
.kit-mobile .dwk {
    display: flex; flex-direction: column;
    gap: 20px; align-items: center;
}
.kit-mobile .dwk img {width: 188px;}
.kit-mobile .dwk .open {
    color: rgba(60, 60, 67, 0.60);
    gap: 8px;
    display: flex;
    justify-content: center;
    font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 400;
}
.kit-mobile .dwk .open .circle {
    display: inline-flex;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.12);
    justify-content: center;
    align-items: center;
}
.kit-mobile .dwk .open .circle img {
    width: 16px; 
}

.dwk-list {
    display: flex; flex-direction: column; align-items: center;
    gap: 0; width: 277px; visibility: hidden; height: 0;
    transition: transform 0.3s ease-in-out;
}
.dwk-list > li {
    width: 100%;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(84, 84, 86, 0.16);
}
.dwk-list > li span:nth-child(2) {
    color: rgba(60, 60, 67, 0.60);
}
.kit-mobile .visual {

}

/* 회전 효과 */
.dwk .toggle-checkbox:checked + label .circle img {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
    /* width: 20px; */
}
/* 체크박스를 활용한 아코디언 효과 */
.dwk .toggle-checkbox:checked + label + ul.dwk-list {
    visibility: visible;
    display: flex;
    height: auto;
    max-height: 5000px; /* 충분한 값 */
    
}

.lott2 {
    max-width: 100%;
    width: 500px;
}
.lott3 {
    max-width: 100%;
    width: 200px;
}


@media only screen and (max-width: 1150px) {  

    .kit-container .standard {
        width: auto; margin: 0 0px;
    }
}
@media only screen and (max-width: 1050px) {  
    
}
@media only screen and (max-width: 1000px) {  


    .kit-mobile {
        display: flex;
    }

    .kit-list-wrapper {
        margin-top: 100px !important;
    }
    .kit-container .p3 {
        margin-top: 40px !important;
        gap: 28px;
    }
    .kit-container .p3 .title .sub {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
    }
    .kit-container .p3 .title h2 {
        font-size: var(--fs-28);
        line-height: var(--lh-28);
        letter-spacing: var(--ls-28);
    }

    img {max-width: 100%;}

    .kit-container {
        padding: 40px 0 60px 0;
    }

    .kit-container .p1 .title {
        gap: 16px;
    }
    .kit-container .p1 .title .sub {
        font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);
    }
    .kit-container .p1 .title h1 {
        font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--ls-28);
    }
    .kit-container .p1 .visual img {
        width: 280px; max-width: 100%;
    }
    .kit-container .p1 .visual .lott {
        width: 280px; max-width: 100%;
    }
     

    .kit-container .p2 {
        margin-top: 80px !important;
    }
    .kit-container .p2 .title .sub {
        font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15);
    }
    .kit-container .p2 .title h2 {
        font-size: var(--fs-24); line-height: var(--lh-24); letter-spacing: var(--ls-24);
    }
    .kit-container .action {
        /* width: 100%; */
        /* padding: 0 32px; */
    }

    .kit-container .p4 .title .sub {
        font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 400;
    }
    .kit-container .p4 .title h2 {
        font-size: var(--fs-22); line-height: var(--lh-22); letter-spacing: var(--ls-22); font-weight: 600;
    }

    .kit-list {
        display: none;
    }


    .expl {
        max-width: 100%;
        padding: 0 16px;
    }
    .expl > li {
        font-size: var(--fs-15);
        line-height: var(--lh-15);
        letter-spacing: var(--ls-15);
    }
    .expl > li .ment .emp {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
    }
    


    .qna-list-wrapper {
        margin-top: 60px;
    }
    .qna-list {
        display: flex; flex-direction: column;
        width: 100%; padding: 0 28px;
    }

    .qna-list > li .link {
        padding: 24px 8px 16px 8px;
    }
    .qna-list > li .link .title .txt {
        font-size: var(--fs-15);
        line-height: var(--lh-15);
        letter-spacing: var(--ls-15);
    }
    .qna-list > li .contents {
        font-size: var(--fs-15);
        line-height: var(--lh-15);
        letter-spacing: var(--ls-15);
        max-width: 95%;
        padding: 0 8px 24px 8px;
    }


    .kit-container .p4 .title {
        gap: 16px;
    }
    .kit-container .p4 {
        gap: 32px;
        padding: 28px 0 34px 0;
    }
}