/*
    MEMBERSHIP

*/



/*  COMMON  */
article.lazy { opacity: 0; transform: translateY(2rem); }




/*  TAB */
article.tab { position: fixed; left: 0; top: 4rem; width: 100%; height: 3rem; background-color: rgba(255, 255, 255, 1); z-index: 10; }
article.tab section { display: flex; margin: 0 auto; width: var(--width); height: 100%; overflow: hidden; }
article.tab section::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--color-divide); z-index: 2; }
article.tab section a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1.1rem; font-variation-settings: 'wght' 500; color: var(--color-black); z-index: 11; }
article.tab section a.selected { font-variation-settings: 'wght' 700; }
article.tab section div { position: absolute; left: -50%; top: 0; width: 50%; height: 100%; background-color: var(--color-divide); transition: transform 0.5s ease;  }
article.tab section div.contents { transform: translate(200%); }
article.tab section div.point { transform: translate(100%); }
article.tab section div.legal_contents { transform: translate(100%); }
article.tab section div.legal_point { transform: translate(200%); }


/*  LAW - TITLE     */
header h1 { display: flex; align-items: center; position: absolute; left: 4rem; top: 1rem; width: max-content; height: 2rem; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--color-black); pointer-events: none; }




/*  LAW     */
article.law { padding: 5rem 0 2rem 0; width: 100%; }
article.law section { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; margin: 1.6rem auto 0; width: var(--width); }
article.law section a { display: block; margin: 0 0 1rem 0; padding: 1rem; width: calc(50% - 0.5rem); height: min(48vh, 48vw); background-color: rgb(251, 251, 251); border: 0.1rem solid rgb(238, 238, 238); border-radius: 0.6rem; }
article.law section a::before { content: ''; display: block; position: absolute; right: 0; bottom: 0; width: min(24vh, 24vw); height: min(24vh, 24vw); background: no-repeat 50% 50% / cover; }
article.law section a.contract::before { background-image: url('/assets/img/law_fig_contract.png'); }
article.law section a.consumer::before { background-image: url('/assets/img/law_fig_consumer.png'); }
article.law section a.employee::before { background-image: url('/assets/img/law_fig_employee.png'); }
article.law section a.tax::before { background-image: url('/assets/img/law_fig_tax.png'); }

article.law section a h3 { font-size: 1rem; font-variation-settings: 'wght' 700; color: var(--color-black); z-index: 1; }
article.law section a h4 { margin: 0.6rem 0 0 0; font-size: 0.78rem; font-variation-settings: 'wght' 500; color: var(--color-black); line-height: 1.3rem; z-index: 1; }

article.law a.history { display: flex; justify-content: space-between; align-items: center; margin: 0.2rem auto 0; padding: 0 1.1rem; width: var(--width); height: 4rem; font-size: 1.1rem; font-variation-settings: 'wght' 800; color: rgb(255, 255, 255); background-color: var(--color-black); border: 0.1rem solid var(--color-gray); border-radius: 0.6rem; overflow: hidden; }
article.law a.history::after { content: '\276F'; font-family: sans-serif; font-weight: 300; }



/*  LAW - QUESTION      */
article.law-q { margin: 0 auto; padding: 2rem 0 0 0; width: var(--width); }
article.law-q h3 { margin: 0 0 0.8rem 0; font-size: 1rem; font-variation-settings: 'wght' 700; color: rgb(255, 73, 69); }
article.law-q a { display: block; margin: 0 0 0.4rem 0; padding: 1rem 1rem 1rem 2.2rem; width: 100%; font-size: 0.9rem; font-variation-settings: 'wght' 500; color: var(--color-black); background-color: rgb(242, 242, 242); line-height: 1.4rem; border-radius: 0.6rem; overflow: hidden; }
article.law-q a::before { content: 'Q.'; position: absolute; left: 1rem; top: 1rem; font-variation-settings: 'wght' 600; }

article.law-ask { margin: 2rem auto 0; width: var(--width); }
article.law-ask h3 { margin: 0 0 0.6rem 0; font-size: 1rem; font-variation-settings: 'wght' 700; color: rgb(255, 73, 69); }
article.law-ask a { display: flex; flex-flow: column nowrap; justify-content: center; padding: 0 0 0 1rem; width: 100%; height: 5.4rem; background-color: rgb(237, 241, 252); border-radius: 0.6rem; overflow: hidden; }
article.law-ask a::before { content: ''; display: block; position: absolute; right: 1rem; bottom: 0; width: 5rem; height: 5rem; background: no-repeat 50% 50% / contain url('/assets/img/law_img_ask.png'); }
article.law-ask a h4 { margin: 0.3rem 0 0 0; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--color-black); }
article.law-ask a h5 { font-size: 0.83rem; font-variation-settings: 'wght' 700; color: var(--color-black); }



/*  LAW - ANSWER      */
aside.law-a { display: none; position: fixed; left: 0; top: 0; padding: 0 var(--left); width: 100%; height: 100%; background-color: rgb(255, 255, 255); z-index: 200; overflow: hidden; }
aside.law-a.show { display: block; }
aside.law-a ul { width: 100%; height: 100%; list-style: none; }
aside.law-a ul li.header { height: 4rem; }
aside.law-a ul li.header button { width: 4rem; height: 4rem; background: no-repeat 0 50% / 1.75rem 1.75rem url(/assets/img/header_btn_back.svg); }
aside.law-a ul li.inner { height: calc(100% - 4rem); font-size: 0.88rem; font-variation-settings: 'wght' 500; color: var(--color-black); line-height: 1.5rem; overflow-x: hidden; white-space: pre-line; overflow-y: auto; }
aside.law-a ul li.inner h1 { margin: -1.4rem 0 0 0; padding: 0 0 1rem 0; width: 100%; font-size: 1.1rem; font-variation-settings: 'wght' 700; border-bottom: 1px solid rgb(242, 242, 242); }
aside.law-a ul li.inner h2 { font-size: 0.83rem; font-variation-settings: 'wght' 700; color: rgb(255, 73, 69); }
aside.law-a ul li.inner span.under { font-variation-settings: 'wght' 700; text-decoration: underline; }
aside.law-a ul li.inner strong { font-variation-settings: 'wght' 700; }







/*  TITLE   */
article.title { padding: 5rem 0 2rem 0; width: 100%; }
article.title h2 { font-size: 1rem; }



/*  LISTS   */
article.lists { margin: 0 auto; width: var(--width); opacity: 0; animation: start 0.5s ease-out 1 forwards; }
@keyframes start {
    0%      { opacity: 0; transform: translateY(5rem); }
    100%    { opacity: 1; transform: translateY(0); }
}


article.lists section { margin: 0 0 4rem 0; width: 100%; cursor: pointer; }
article.lists section div { margin: 0 auto 0.75rem; width: 100%; height: 25vh; background: no-repeat 50% 50% / cover; }
article.lists section div::after { content: '\24C5\2800' attr(data-point); position: absolute; display: flex; align-items: center; padding: 0 0.75rem; right: 0.5rem; top: 0.5rem; width: max-content; height: 2rem; font-size: 0.8rem; font-feature-settings: 'tnum' 1; font-variation-settings: 'wght' 600; color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 0.5); }

article.lists section div.story::after { display: none; }
article.lists section div.story-1 { background-image: url('/assets/img/magazine_img_1.jpg'); }
article.lists section div.story-2 { background-image: url('/assets/img/magazine_img_2.jpg'); }
article.lists section div.story-3 { background-image: url('/assets/img/magazine_img_3.jpg'); }
article.lists section div.story-4 { background-image: url('/assets/img/magazine_img_4.jpg'); }

article.lists section div.point-1 { background-image: url('/assets/img/magazine_point_1.jpg'); }
article.lists section div.point-2 { background-image: url('/assets/img/magazine_point_2.jpg'); }
article.lists section div.point-3 { background-image: url('/assets/img/magazine_point_3.jpg'); }
article.lists section div.point-4 { background-image: url('/assets/img/magazine_point_4.jpg'); }
article.lists section div.point-5 { background-image: url('/assets/img/magazine_point_5.jpg'); }

article.lists section h3 { display: block; padding: 0 7rem 0 0; width: 100%; height: 2.75rem; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); letter-spacing: -1px; line-height: 2.75rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
article.lists section h4 { display: flex; justify-content: space-between; align-items: center; padding: 0 7rem 0 0; width: 100%; font-size: 0.8rem; font-variation-settings: 'wght' 400; color: var(--color-gray); }
article.lists section a { display: flex; justify-content: center; align-items: center; position: absolute; right: 0; bottom: 0; width: 6rem; height: 2.75rem; font-size: 0.9rem; font-variation-settings: 'wght' 500; color: var(--color-black); box-sizing: border-box; border: 1px solid 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-color: rgba(218, 2, 70, 1); }













/*  PC VERSION  */
@media (min-width: 800px) {
    main { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; }    

    /*  TAB */
    article.tab { left: 310px; top: 0; width: 870px; height: 5rem; box-sizing: border-box; border-top: 2rem solid rgba(255, 255, 255, 1); }
    article.tab section::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: var(--color-divide); z-index: 2; }

    /*  TITLE   */
    article.title { padding: 5rem 0 2rem 0; }

    /*  STORY   */
    article.lists { display: flex; flex-wrap: wrap; align-content: flex-start; }
    article.lists section { margin: 0 4% 2rem 0; width: 48%; }
    article.lists section:nth-of-type(2n) { margin: 0 0 2rem 0; }


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

    /*  LAW - TITLE     */
    header h1 { display: flex; align-items: center; position: absolute; left: 20.5rem; top: 1rem; width: max-content; height: 2rem; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--color-black); pointer-events: none; }

}