body {
    background: #F9F7F6;
}
.standard {
    width: 900px;
    max-width: 100%;
    margin: auto;
}
h1, h2, p {
    margin: 0;
}


.note-wrap {
    display: flex;
    flex-direction: column;
    gap: 120px;
}
.pc-hidden {
    display: none;
}
@media only screen and (max-width: 900px) {   
    .pc-hidden {
        display: unset;
    }
    .note-wrap { 
        gap: 100px;
    }
    
    img {max-width: 100%;}
}



/*
    본문 1번 
*/
.ly01 { text-align: center; }
.ly01 .core1 { padding: 100px 0 0 0; display: flex; flex-direction: column; gap: 40px; font-size: var(--fs-18); line-height: 1.5; letter-spacing: var(--ls-18); }
.ly01 .core1 .t1 { color: #606060; }
.ly01 .core1 .t2 { color: #AFAFAF; font-weight: 700; font-size: var(--fs-20); letter-spacing: var(--ls-20);}
.ly01 .core1 .t2 b { color: #000; font-weight: 700; }
.ly01 .core1 .c1 { margin: 30px 0 20px 0; }
.ly01 .core1 .c1 img { width: 500px; }
.barr { display: flex; justify-content: center; }
.barr > span { width: 1px; height: 60px; background: #eee; display: inline-flex; margin: 24px 0; }

/*
    본문 1번 > 모청카드 롤링 + 버튼
*/
.c01_wrap { padding-top: 70px; overflow: hidden; }
.c01_wrap .copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 40px;
    padding-bottom: 66px;
}
.c01_wrap .copy .sub {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    font-weight: 600;
}
.c01_wrap .copy .ma {
    font-size: var(--fs-40);
    line-height: var(--lh-40);
    letter-spacing: var(--ls-40);
    font-weight: 700;
}
@media only screen and (max-width: 900px) {   

    .ly01 .core1 {
        padding-top: 50px;
        font-size: var(--fs-14);
        line-height: 1.5;
        letter-spacing: var(--ls-14);
    }
    .ly01 .core1 .t2 {
        font-size: var(--fs-18);
        letter-spacing: var(--ls-18);
    }
    .ly01 .core1 .c1 img {
        max-width: 90%;
        width: 337px;
    }

    .c01_wrap .copy .ma {
        font-size: var(--fs-32);
        line-height: var(--lh-32);
        letter-spacing: var(--ls-32);
        font-weight: 700;
    }

}

.c01_wrap .action {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
}

.card-banner-wrap {
    display: flex;
}
.card-banner-wrap .swiper-wrapper {
    display: flex;
    align-items: end;
}
.card-banner-wrap .bnr-wrap {
    width: 285px; 
    height: 360px; 
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: baseline;
    transition: transform 1.2s ease;
}
.card-banner-wrap .bnr {
    display: flex;
    width: 240px; 
    aspect-ratio: 241/360;
    align-items: center;
    border-radius: 12px;
    background: transparent;
    background-color: lightgray;
    background-image: url('/app/landing/mcards/images/bn01.png');
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    transform: rotate(1deg);
    overflow: hidden;
}
.card-banner-wrap .bnr > img {
    width: 100%;
}
.card-banner-wrap .bnr .eye {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: rgba(138, 138, 138, 0.40);
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(5px);
    position: absolute;
    top: 10px; right: 10px;
    transition: all 1s ease;
    opacity: 0;
    cursor: pointer;
}

/* .card-banner-wrap .bnr-wrap.swiper-slide-active, */
.card-banner-wrap .bnr-wrap.swiper-slide-active .bnr {
    transform: rotate(0deg) !important;
    transform: scale(1.188) !important;
    cursor: pointer;
    box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.30);
}
.card-banner-wrap .bnr-wrap.swiper-slide-active {
    height: auto;
    padding-bottom: 74px;
}

.card-banner-wrap .swiper-wrapper .bnr-wrap:nth-child(2n) .bnr {
    transform: rotate(-2deg);
}
.card-banner-wrap .bnr-wrap.swiper-slide-active .bnr .eye {
    display: flex;
    opacity: 1;
    
}

.btn-01 {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    min-width: 230px;
    padding: 14px 16px;

    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    font-weight: 600;
    color: #000;

    position: relative;
    overflow: hidden;
}
.btn-01 svg { width: 21px; }
.btn-01.black { background-color: #3B3B3B; color: #fff; }



.btn-01.yellow {
    background: #FDD835;
    color: #000;
}

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

    .standard {
        width: 100%;
    }
    /* .card-banner-wrap .bnr-wrap {
        width: 275px; height: 347px; 
        width: 280px; height: 353px;
    }
    
    .card-banner-wrap .bnr { 
        width: 231px;
        width: 236px;
    } */

    .c01_wrap .action {
        padding: 12px 0;
    }
     .card-banner-wrap .bnr-wrap.swiper-slide-active {
        padding-bottom: 81px;
    }
}





.upload-wrap {
    margin: auto;
}
.upload-wrap .standard {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.upload-wrap .tbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.upload-wrap .tbox .t1 {
    font-size: var(--fs-34);
    line-height: var(--lh-34);
    letter-spacing: var(--ls-34);
    font-weight: 700;
}
.upload-wrap .tbox .t2 {
    font-size: var(--fs-24);
    line-height: var(--lh-24);
    letter-spacing: var(--ls-24);
    color:#262626;
}
.upload-wrap .hbox {
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.02);
    min-height: 50px;
    padding: 30px 30px 30px 40px;
    position: relative;
    display: grid;
    grid-template-columns: 350px 1fr;
    align-items: center;
}
.upload-wrap .hbox .copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    line-height: 1.4;
    color: #626262;
}
.upload-wrap .hbox .copy .t1 {
    font-size: var(--fs-32);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
    font-weight: 700;
    color: #000;
}
.upload-wrap .hbox .copy .t2 {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    letter-spacing: var(--ls-18);
    color: #262626;
}
.upload-wrap .hbox .copy .img {
    margin: 70px 0 16px 0;
    display: flex;
    /* justify-content: center; */
}
.upload-wrap .hbox .mock {
    display: flex;
    justify-content: right;
}
.upload-wrap .hbox .mock img {
    width: 430px;
}

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

    .upload-wrap {
        padding: 0 16px;
        width: 100%;
    }
    .upload-wrap .standard {
        gap: 30px;
    }
    .upload-wrap .tbox {
        gap: 2px;
    }
    .upload-wrap .tbox .t1 {
         font-size: var(--fs-26);
        line-height: var(--lh-26);
        letter-spacing: var(--ls-26);
    }
    .upload-wrap .tbox .t2 {
        font-size: var(--fs-16);
        letter-spacing: var(--ls-16);
    }
    .upload-wrap .hbox {
        display: flex;
        flex-direction: column;
        padding:  32px 24px;
    }
    .upload-wrap .hbox .mock {
        display: none;
    }
    .upload-wrap .hbox .mock img {
        max-width: 100%;
    }
    .upload-wrap .hbox .copy {
        font-size: var(--fs-14);
        letter-spacing: var(--ls-14);
    }
    .upload-wrap .hbox .copy .img {
        justify-content: center;
    }
    .upload-wrap .hbox .copy .t2 {
        font-size: var(--fs-14);
        line-height: var(--lh-14);
        letter-spacing: var(--ls-14);
        /* font-weight: 600; */
    }
    .upload-wrap .hbox .copy .t1 {
        font-size: var(--fs-26);
        line-height: var(--lh-26);
        letter-spacing: var(--ls-26);
    }

}


.why-wrap {
    margin: auto;
}
.why-wrap .standard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.why-wrap .l-1 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}
.why-wrap .t1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.why-wrap .t1 > .t1-2 {
}
.why-wrap .c1 {
    padding-top: 180px;
    padding-bottom: 120px;
}
.why-wrap .c1 img {
    width: 400px;
}



.why-wrap .c2 {
    margin: 0 0;
    aspect-ratio: 34/25;
    height: 500px;
    border-radius: 30px;
    background: url('/app/landing/snap/images/img5.png') lightgray -75px -0.049px / 110.294% 100.012% no-repeat;
    background: url('/app/landing/snap/images/img5.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.why-wrap .l-2 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
    width: 700px;
}
.l-2-1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
    text-align: center;
}
.l-2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    width: 100%;
}
.l-2-2 > div {
    border-radius: 20px;
    aspect-ratio: 33/41;
    position: relative;
    display: flex;
    align-items: end;
    padding: 20px;
    color: #fff;
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    letter-spacing: var(--ls-18);
}
.l-2-2 > div:nth-child(1) {
    background-image: 
        linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url('/app/landing/snap/images/img6.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.l-2-2 > div:nth-child(2) {
    background-image: 
        linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url('/app/landing/snap/images/img3.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.l-2-2 > div:nth-child(3) {
    background-image: 
        linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url('/app/landing/snap/images/img7.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.why-wrap .l-3 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.ft_38 {
    font-size: var(--fs-38);
    line-height: var(--lh-38);
    letter-spacing: var(--ls-38);
    font-weight: 700;
}
.ft_32 {
    font-size: var(--fs-32);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
    font-weight: 700;
}
.ft_18 {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    letter-spacing: var(--ls-18);
    font-weight: 600;
}

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

    .ft_38 {
        font-size: var(--fs-32);
        line-height: var(--lh-32);
        letter-spacing: var(--ls-32);
        font-weight: 700;
    }
    .ft_32 {
        font-size: var(--fs-28);
        line-height: var(--lh-28);
        letter-spacing: var(--ls-28);
    }
    .ft_32.v2 {
        font-size: var(--fs-24);
        line-height: var(--lh-24);
        letter-spacing: var(--ls-24);
    }
    .ft_18 {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
    }

    .why-wrap {
        width: 100%;
    }
    .why-wrap .standard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 0 16px;
    }
    .why-wrap .c2 {
        height: auto;
        width: 100%;
        border-radius: 10px;
        /* margin: 0; */
    }
    .why-wrap .l-1 {
        gap: 20px;
        width: 100%;
    }
  
    .why-wrap .c1 {
        /* padding-top: 120px; */
        /* padding-bottom: 120px; */
    }
    .why-wrap .c1 img {
        width: 310px; max-width: 100%;
    }
    .why-wrap .l-2 {
        max-width: 100%;
    }
    .l-2-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .l-2-2 > div {
        aspect-ratio: 33 / 20;
        border-radius: 10px;
    }
    .why-wrap .t2 {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
    }
    .why-wrap .t3 {
        font-size: var(--fs-26);
        line-height: var(--lh-26);
        letter-spacing: var(--ls-26);
    }
    .l-2-1 {
        gap: 8px;
    }
    .why-wrap .t4 {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
        text-align: center;
    }
}

.why2-wrap {
   
}
.why2-wrap .standard {
    display: grid;
    grid-template-columns: 8fr 6fr;
    gap: 24px;
    margin: auto;
} 
.why2-wrap .hbox {
    background: #fff;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.02));
    height: 400px;
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.why2-wrap .hbox > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    letter-spacing: var(--ls-18);
}
.why2-wrap .hbox .b {
    font-size: var(--fs-32);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
    font-weight: 700;
}
.why2-wrap .hbox > div:nth-child(2) {
    color: #626262;
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    letter-spacing: var(--ls-14);
}

.copy-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: var(--fs-24);
    line-height: var(--lh-24);
    letter-spacing: var(--ls-24);
    font-weight: 700;

    align-items: center;
    padding: 100px 0;
}
.copy-wrap .c1 img {
    width: 600px;
}

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

    .why2-wrap .standard {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
    .why2-wrap .hbox {
        height: auto;
        border-radius: 10px;
        gap: 24px;
    }
    .why2-wrap .hbox > div:nth-child(1) {
        gap: 6px;
        font-size: var(--fs-14);
        line-height: var(--lh-14);
        letter-spacing: var(--ls-14);
        font-weight: 400;
    }
    .why2-wrap .hbox .b {
        font-size: var(--fs-26);
        line-height: var(--lh-26);
        letter-spacing: var(--ls-26);
    }

    .copy-wrap {
        display: flex;
        flex-direction: column;
        gap: 18px;
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
        font-weight: 700;
        justify-content: center;
        align-items: center;
    }
    .copy-wrap .c1 {
        text-align: center;
    }
    .copy-wrap .c1 img {
        width: 330px;
        max-width: 90%;
    }
}

.c04_wrap {
  
}
.c04_wrap .standard {
    width: 900px;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}
.c04_wrap .copy {
    
    padding: 0;
    gap: 12px;

    display: flex;
    flex-direction: column;

    min-width: 231px;
}

.c04_wrap .reason {
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: none;
    width: 472px; max-width: 100%;
    margin: auto;
}
.c04_wrap .reason li {
    
    border-radius: 16px;
    border: 1px solid #FFF;
    background: #FBF9F8;
    background: #fff;
    box-shadow: 0px 0px 2px 0px rgba(203, 182, 172, 0.40);
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 16px;
    width: 100%;

    padding: 16px 12px;
    align-items: center;
}
.c04_wrap .reason li .icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.c04_wrap .reason li .icon img {
    width: 21px;
}
.c04_wrap .reason li .note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
    text-align: left;
}
.c04_wrap .reason li .note .ma {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    font-weight: 600; 
}
.c04_wrap .reason li .note .sub {
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    letter-spacing: var(--ls-13);
    font-weight: 400; 
    color: rgba(60, 60, 67, 0.60);
}




.c06_wrap {
    padding: 0 0 0 0;
}
.cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border-radius: 20px; */
    /* background: #232323; */
    /* padding: 32px 40px; */
    /* box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12); */
}
.cta-wrap .cta {
    display: flex; flex-direction: column; gap: 32px;
    justify-content: center;
    /* min-height: 271px; */
    text-align: center;
}
.cta-wrap .cta .copy {
    color: #000;
    font-size: var(--fs-32);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
    font-weight: 700;
    text-align: center;
}
.cta-wrap .cta .copy > span {
    color: rgba(60, 60, 67, 0.60);
}

.cta-wrap .cta .btn-wrap .btn-01 {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    font-weight: 600;
    display: inline-flex; 
}



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

    .c04_wrap {
        padding-top: 0px;
    }
    .c04_wrap .standard {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .c04_wrap .copy {
        text-align: center;
    }
    .c04_wrap .reason li .note .ma  {
        font-size: var(--fs-14);
        line-height: var(--lh-14);
        letter-spacing: var(--ls-14);
    }
    .c04_wrap .copy .ma {
        font-size: var(--fs-28);
        line-height: var(--lh-28);
        letter-spacing: var(--ls-28);
    }
    .c04_wrap .reason {
        margin: 0 20px;
    }


    .cta-wrap {
        flex-direction: column;
        /* padding: 16px 16px 60px 16px;  */
        /* align-items: start; */
        /* position: relative; */
        padding: 32px 0;
    }
    .cta-wrap .cta {
        
        min-height: auto;
        /* padding: 8px; */
    }
    .cta-wrap .cta .copy {
        font-size: var(--fs-28);
        line-height: var(--lh-28);
        letter-spacing: var(--ls-28);
        font-weight: 700;
    }
    .cta-wrap .cta .btn-wrap {
        /* display: flex;
        position: absolute;
        bottom: 16px;
        left: 0; right: 0; margin: auto;
        width: 100%; padding: 0 16px; */
    }
    .cta-wrap .cta .btn-wrap > .btn-01 {
        /* width: 100%; */
        font-size: var(--fs-15);
        line-height: var(--lh-15);
        letter-spacing: var(--ls-15);
    }
}




.n01_wrap { padding-top: 120px; }
.n01_wrap .standard { display: flex; flex-direction: column; gap: 60px; }





.la { display: grid; background: #fff; padding: 40px 32px; border-radius: 20px; }
.la .copy { display: flex; flex-direction: column; gap: 32px; }
.la .copy .title { display: flex; flex-direction: column; gap: 8px; }
.la .copy .title .sub {font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 500;}
.la .copy .title .ma { font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: var(--ls-32); font-weight: 600; color: rgba(60, 60, 67, 0.60);}
.la .copy .title .ma b { font-weight: 600; color: #000;}
.la .copy .bottom {color: rgba(60, 60, 67, 0.80);font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 500; }

.la .visual { display: flex; width: 100%; justify-content: center;  }
.la .visual .vimg { width: 308px; aspect-ratio: 77/120; }
/* .la .visual .bottom { display: none; } */

.la .visual .video-wrap { width: 361px; display: flex; justify-content: center; position: relative; }
.la .visual .video-wrap video { width: 261px; aspect-ratio: 832 / 1432; border-radius: 16px; }

.video_show_play {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%;opacity: 0; transition: opacity 0.3s ease; pointer-events: none;}
.video_show_play.active { opacity: 1; pointer-events: auto; }

.la .toggle-slider {
  position: relative; display: inline-grid;
  grid-template-columns: 1fr 1fr; background: rgba(120, 120, 128, 0.12);
  border-radius: 12px; width: 240px; height: 40px; padding: 4px;
  overflow: hidden; font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); font-weight: 500;
  user-select: none;
}
.la .toggle-slider input[type="radio"] {display: none;}
.la .toggle-slider label {
  position: relative;z-index: 1; text-align: center; cursor: pointer;color: rgba(60, 60, 67, 0.30);
  transition: color 0.3s ease;display: flex;justify-content: center;align-items: center;
}
.la .toggle-slider .slider {
  position: absolute; top: 2px;left: 2px; width: calc(50% - 2px); height: 36px;
  background: white; border-radius: 12px; transition: transform 0.3s ease; z-index: 0;
}

.la.s-4 { grid-template-columns: 1fr 1fr; gap: 0; position: relative;}
.la.s-4 .copy { min-height: 400px; justify-content: space-between;}
.la.s-4 .visual {position: absolute; top: 0;right: 0; width: 500px; height: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; gap: 32px;}
.la.s-4 .visual .vimg { width: 350px; aspect-ratio: auto; }
.la.s-4 .visual .sub { 
    font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 600; 
    text-align: center; width: 100%;
    display: flex; height: 100%; justify-content: center; align-items: end;
    font-weight: 600; color: #000;
}
.la.s-4 .ma_qr {
    width: 150px;
}
.la.s-4 .copy .bottom {color: rgba(60, 60, 67, 0.60);font-size: var(--fs-16); line-height: 1.6; letter-spacing: var(--ls-16); font-weight: 500; }



@media only screen and (max-width: 900px) {   
    .standard {
        padding: 0 16px;
    }
    .la.s-4 {
        display: flex; flex-direction: column;
        padding: 0; gap: 0; overflow: hidden;
    }
    .la.s-4 .copy {
        order: 2;
        padding: 20px 12px 32px 12px;
        min-height: auto;
        gap: 40px;
    }
    .la.s-4 .copy .title {
        gap: 12px;
    }
    .la.s-4 .visual {
        position: static;
        height: auto;
        width: 100%;
        order : 1;
        background-color: rgba(236, 236, 236, 1);
        gap: 12px;
        padding-top: 24px;
    }   
    .la.s-4 .visual .vimg {width: 250px;}
    .la.s-4 .copy .bottom {
        font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); font-weight: 400;
    }   

    .la .copy .title .ma { font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--ls-28); font-weight: 600; color: rgba(60, 60, 67, 0.60);}
}


.nbr-ul {
    display: flex; flex-direction: column;
    gap: 6px;
}
.nbr {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 6px;
    color: rgba(60, 60, 67, 0.80);
}
.nbr > div:nth-child(1) {
    display: flex; height: 24px; align-items: center;
}
.nbr .f {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3px;
    color: #000;
    background: #FFEB3B;
    background: rgb(243, 243, 245);
    background: #03C569;
    background: #007AFFaa;
    border-radius: 50%;
    color: #fff;
    height: 18px;
    font-size: var(--fs-12); line-height: 1; letter-spacing: var(--ls-12); font-weight: 400; 
}
.nbr .f2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3px;
    color: #000;
    background: rgb(243, 243, 245);
    background: transparent;
    border-radius: 50%;
    color: #666;
    height: 18px;
    font-size: var(--fs-12); line-height: 1; letter-spacing: var(--ls-12); font-weight: 400; 
}
.nbr .s {
    
    line-height: 24px;
    display: inline-flex;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}


.solo-title {
    display: flex; flex-direction: column; gap: 12px;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
}



.expl {
    display: flex; flex-direction: column;
    gap: 16px; width: 472px; margin: auto;
}
.expl > li {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    align-items: top;
    gap: 20px;
    align-self: stretch;
    border-radius: 12px;
    background: #F7F7F2;
    background: #fff;
    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;
    box-shadow: 0px 0px 2px 0px rgba(203, 182, 172, 0.40);
}
.expl > li .ment {
    text-align: left;
    display: flex; flex-direction: column; gap: 24px;
}
.expl > li .ment .emp {
    color: #000; font-weight: 600;
    font-size: var(--fs-18); line-height: var(--lh-18); letter-spacing: var(--ls-18);
}

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

  
    .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 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 127px;
}
.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;
}
/* 체크박스를 활용한 아코디언 효과 */
.qna-list .toggle-checkbox:checked + .link + .contents {
    /* visibility: visible; */
    display: flex;
    max-height: 5000px; /* 충분한 값 */
}



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

    .qna-list-wrapper {
        margin-top: 0px;
    }
    .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;
    }

}



.mins_1 {
    padding-top: 60px;
    text-align: center;
    padding-bottom: 60px;
}    

.clearfix:after {display: block;visibility: hidden;height: 0;font-size: 0;clear: both; content: '';}
.mins_1 .main_copy {
    text-align: center; width: 500px; margin: auto; max-width: 100%;
    display: flex; flex-direction: column;
    gap: 24px;
}
.mins_1 h1 > .jj {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
    letter-spacing: var(--ls-26);
}
.mins_1 .main_copy h1 {
    font-size: var(--fs-50);
    line-height: var(--lh-50);
    letter-spacing: var(--ls-50);
    display: grid; gap: 10px;
}
.mins_1 p {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    letter-spacing: var(--ls-18);
}
.mins_1 .mins_img {
    padding: 60px 0 30px 0;
}
.mins_1 .mins_img img {
    width: 600px;
    max-width: 100%;
}

.mins_1 .main_copy.sub {
    text-align: center;
}
.mins_1 .main_copy h2 {
    font-size: var(--fs-32);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
    display: grid; gap: 10px;
}




@media only screen and (max-width: 900px) { 
    .mins_1 {
        padding-top: 30px;
        padding-bottom: 30px;
    }    
    .mins_1 h1 > .jj {
        font-size: var(--fs-18);
        line-height: var(--lh-18);
        letter-spacing: var(--ls-18);
    }
    .mins_1 .main_copy h1 {
        font-size: var(--fs-32);
        line-height: var(--lh-32);
        letter-spacing: var(--ls-32);
        display: grid; gap: 10px;
    }
    .mins_1 p {
        font-size: var(--fs-14);
        line-height: var(--lh-14);
        letter-spacing: var(--ls-14);
    }
    .mins_1 .mins_img {
        padding-top: 30px 0 0 0;
    }
    .mins_1 .mins_img img {
        width: 600px;
    }

    .mins_1 .main_copy.sub {
        width: 340px;
        max-width: 100%;
        text-align: left;
    }
    .mins_1 .main_copy h2 {
        font-size: var(--fs-20);
        line-height: var(--lh-20);
        letter-spacing: var(--ls-20);
        display: grid; gap: 10px;
    }
}