/*
    MAIN

*/



body { align-items: flex-start; overflow-x: hidden; overflow-y: auto; }

header { display: none !important; }
header::after { background-color: transparent; }
main { position: relative; left: unset; top: unset; height: auto; overflow: unset; }


article > h1 { justify-content: center; margin: 0 auto 0.5rem; padding: 0 2rem; width: max-content; height: 2.2rem; background-color: rgb(253, 207, 90); border-radius: 1rem; }
article > h2 { justify-content: center; padding: 0 !important; }


/*  TOP BANNER  */
article.top-banner { margin: 0 auto; width: 100%; height: 90vw; background-color: rgba(242, 242, 242, 1); overflow: hidden; }
article.top-banner span { display: block; width: 100%; height: 90vw; background: no-repeat 50% 50% / cover; }
article.top-banner a { position: absolute; top: 2rem; width: 5.5rem; height: 2.25rem; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; font-variation-settings: 'wght' 700; color: rgba(255, 255, 255, 1); border-radius: 1rem; }
article.top-banner a:nth-of-type(1) { right: 1.5rem; background: rgb(253, 207, 90); }



/*  MEMBERSHIP  */
article.membership { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; margin: 5rem auto 0; width: var(--width); }
article.membership a { display: block; margin: 2rem 0 0 0; padding: 1.5rem 2rem 0 2rem; width: 100%; height: 8rem; background: no-repeat 50% 50% / cover url('/assets/img/main_img_place.jpg'); border-radius: 1rem; }
article.membership a * { text-align: right; z-index: 1; }
article.membership a h3 { margin: 0 0 1rem 0; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--color-title); line-height: 1.2rem; }
article.membership a h4 { font-size: 0.8rem; font-variation-settings: 'wght' 500; color: var(--color-subtitle); line-height: 1.2rem; }
article.membership a.save::before { content: ''; position: absolute; left: 1rem; top: 1rem; width: 3.5rem; height: 3.5rem; background: no-repeat 50% 50% / contain url('/assets/img/home_icon_save.svg'); }
article.membership a.save { margin: 1rem 0 0 0; width: 100%; height: 8rem; background: rgba(235, 240, 237, 1); }
article.membership a.save h3 { margin: 0.4rem 0 0 0; font-size: 1rem; }




/*  FREE  */
article.free { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; margin: 5rem auto 0; width: var(--width); }

article.free a { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; margin: 1rem 0 0 0; padding: 0 1rem 0 6rem; width: 100%; height: 7rem; background: rgba(243, 243, 243, 1); border-radius: 1rem; }
article.free a:first-of-type { margin: 2rem 0 0 0; }
article.free a::before { content: attr(data-title); position: relative; display: flex; align-items: center; padding: 0; width: max-content; height: 1.4rem; font-size: 0.8rem; font-variation-settings: 'wght' 500; color: var(--color-title); border-bottom: 1px solid var(--color-title); }
article.free a::after { content: ''; position: absolute; left: 1rem; top: 1.5rem; width: 4rem; height: 4rem; background: no-repeat 50% 50% / cover; }
article.free a.naver::after { background-image: url('/assets/img/home_service_naver.png'); }
article.free a.insta::after { background-image: url('/assets/img/home_service_insta.png'); }
article.free a h3 { margin: 0.5rem 0 0.5rem 0; width: 100%; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--color-title); line-height: 1.2rem; text-align: left; }
article.free a h4 { width: 100%; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); line-height: 1rem; text-align: left; }




/*  EXAMPLE */
article.example { margin: 5rem auto 0; }
article.example h1 { margin: 0 auto; width: var(--width); }
article.example h2 { margin: 0 auto; width: var(--width); }
article.example section { margin: 1.5rem 0 1.5rem 0; width: 100%; height: 20rem; overflow: hidden; }
article.example section ul li img { width: 100%; height: 20rem; object-fit: cover; box-sizing: border-box; border-radius: 1.5rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); overflow: hidden; }





/*  QUE */
article.que { margin: 5rem auto 0; }
article.que section.que-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; margin: 1.5rem auto 0; width: var(--width); }
article.que section.que-inner div { margin: 0 0 1rem 0; width: 48%; }
article.que section.que-inner div::after { content: '\254B'; position: absolute; display: flex; justify-content: center; align-items: center; right: 1rem; top: 1rem; width: 1.5rem; height: 1.5rem; font-size: 0.7rem; color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 0.25); line-height: 0.7rem; border-radius: 50%; }
article.que section.que-inner div img { width: 100%; height: 11rem; object-fit: cover; border-radius: 1rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); }




/*  SUPPORT */
article.support { margin: 3rem auto 0; }
article.support section.tab { margin: 0.75rem auto 0; width: var(--width); height: 2.66rem; overflow-x: auto; overflow-y: hidden; z-index: 1; }
article.support section.tab::-webkit-scrollbar { display: none; }

article.support section.tab div.wrapper { width: max-content; height: 2.66rem; }
article.support section.tab div.wrapper::after { content: ''; float: none; clear: both; }
article.support section.tab div.wrapper label { margin: 0 1rem 0 0; padding: 0 1rem; width: max-content; height: 2.66rem; font-size: 1.1rem; font-variation-settings: 'wght' 400; color: var(--color-gray); background-color: rgba(243, 243, 243, 1); border-radius: 0.4rem; float: left; }
article.support section.tab div.wrapper input[type=radio]:checked + label { font-variation-settings: 'wght' 600; color: rgba(255, 255, 255, 1); background-color: rgba(255, 73, 69, 1); }


article.support section.inner { margin: 1.5rem auto 0; width: var(--width); }
article.support section.inner div { margin: 0.75rem 0 0 0; width: 100%; cursor: pointer; }
article.support section.inner div:first-of-type { margin: 1.66rem 0 0 0; }
article.support section.inner div * { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
article.support section.inner div h3 { padding: 0 1rem; height: 4rem; font-size: 1.1rem; font-variation-settings: 'wght' 500; color: var(--color-black); background-color: rgba(243, 243, 243, 1); line-height: 4rem; border-radius: 0.4rem; }
article.support section.inner div h4 { display: none; }





/*  CENTER    */
article.center { margin: 3.5rem auto 0; }
article.center section { margin: 1.5rem 0 0 0; width: 100%; }
article.center section a { display: block; width: 100%; height: auto; }
article.center section a::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% 45% / 5rem 5rem url('/assets/img/main_icon_youtube.svg'); }
article.center section a img { display: block; margin: 0 0 0.5rem 0; width: 100%; height: 13rem; object-fit: cover; border-radius: 0.6rem; }
article.center section a h3 { font-size: 1.1rem; font-variation-settings: 'wght' 500; color: var(--color-black); }





/*  MODAL - SUGGEST */
div.suggest { position: fixed; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; background-color: rgba(255, 255, 255, 1); overflow: hidden; transform: translateX(100vw); z-index: 500; transition: transform 0.3s ease-out; }
div.suggest.show { transform: translateX(0); }
div.suggest section { width: 100%; }


div.suggest section.header { position: absolute; padding: 0 var(--left); left: 0; top: 0; height: 4rem; background-color: rgba(255, 255, 255, 0.95); z-index: 501; }
div.suggest section.header button { width: 4rem; height: 4rem; background: no-repeat 0 50% / 1.75rem 1.75rem url('/assets/img/header_btn_back.svg'); }


div.suggest section.body { height: calc(100% - 5rem); overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; }
div.suggest section.body::before { content: ''; position: relative; display: block; width: 100%; height: 4rem; background-color: transparent; }
div.suggest section.body div.title { margin: 0 0 3rem 0; width: 100%; }
div.suggest section.body div.title::before { content: ''; margin: 0 auto 0.5rem; display: block; width: 25vw; height: 25vw; border-radius: 50%; }
div.suggest section.body div.title::after { content: attr(data-title); display: block; width: 100%; font-size: 1.2rem; font-variation-settings: 'wght' 800; color: var(--color-black); text-align: center; }
div.suggest section.body div.title.insta-1::before { background: no-repeat 50% 50% / cover url('/assets/img/main_img_suggest_4.jpg'); }
div.suggest section.body div.title.insta-2::before { background: no-repeat 50% 50% / cover url('/assets/img/main_img_suggest_5.jpg'); }
div.suggest section.body div.title.blog::before { background: no-repeat 50% 50% / cover url('/assets/img/main_img_suggest_1.jpg'); }

div.suggest section.body img { width: 100%; height: auto; }




div.suggest section.footer { height: 5rem; }
div.suggest section.footer a { display: flex; justify-content: center; align-items: center; margin: 0.5rem auto; width: var(--width); height: 4rem; font-size: 1.2rem; font-variation-settings: 'wght' 800; color: rgba(255, 255, 255, 1); background: var(--color-grd); border-radius: 1rem; }
















/*  TODAY   */
div.popup-today { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 600; }
div.popup-today.show { display: flex; }
div.popup-today section { position: absolute; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; left: 0; bottom: 0; width: 100%; height: calc(100vw + 4rem); background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); transform: translateY(70vh); transition: transform 0.3s ease; }
div.popup-today section.show { transform: translateY(0); }
div.popup-today section a { display: block; width: 100vw; height: 100vw; }
div.popup-today section a img { width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; border: 0 solid rgba(255, 255, 255, 1); }
div.popup-today section button { height: 4rem; }
div.popup-today section button:nth-of-type(1) { padding: 0 1rem; width: max-content; font-size: 0.9rem; font-variation-settings: 'wght' 500; color: var(--color-black); }
div.popup-today section button:nth-of-type(2) { width: 4rem; background: no-repeat 50% 50% / 1.5rem 1.5rem url('/assets/img/sys_btn_close.svg'); }








/*  PC VERSION  */
@media (min-width: 800px) {
    /*  TOP BANNER  */
    article.top-banner { height: 17rem; }
    article.top-banner span { height: 17rem; }

    


 




    /*  EXAMPLE */
    article.example section { height: 35rem; }
    article.example section ul li img { height: 28.2rem; }

    article.example section div.desc { padding: 1rem 1rem 0 0.5rem; width: var(--width); height: 8rem; }
    article.example section div.desc h3 { font-size: 0.88rem; }
    article.example section div.desc h4 { margin: 0.5rem 0 0.6rem 0; font-size: 1.1rem; }


    /*  CENTER    */
    article.center section a { font-size: 1rem; }
    article.center section a::after { background: no-repeat 50% 45% / 7rem 7rem url('/assets/img/main_icon_youtube.svg'); }
    article.center section a img { height: 27rem; }





    /*  TODAY   */
    div.popup-today { justify-content: center; align-items: center; width: 100%; height: 100%; }
    div.popup-today section { position: relative; left: unset; bottom: unset; width: 30rem; height: 34rem; transform: translateY(5rem); }
    div.popup-today section a { width: 30rem; height: 30rem; }
    div.popup-today section button { height: 4rem; }
    div.popup-today section button:nth-of-type(1) { padding: 0 1rem; width: max-content; font-size: 0.9rem; font-variation-settings: 'wght' 500; color: var(--color-black); }
    div.popup-today section button:nth-of-type(2) { width: 4rem; background: no-repeat 50% 50% / 1.5rem 1.5rem url('/assets/img/sys_btn_close.svg'); }



    /*  MODAL - SUGGEST */
    div.suggest { left: unset; right: 0; width: 750px; transform: translateX(750px);  }
    div.suggest.show { transform: translateX(0); }


}