/*  
    GLOBAL

*/



@charset 'UTF-8';


:root {
    --color-title: rgba(10, 10, 10, 1);
    --color-subtitle: rgba(90, 90, 90, 1);
    --color-black: rgba(69, 69, 69, 1);
    --color-gray: rgba(136, 136, 136, 1);
    --color-divide: rgba(229, 229, 229, 1);
    --color-blog: rgba(12, 55, 24, 1);
    --color-visit: rgba(12, 55, 24, 1);
    --color-insta: rgba(176, 18, 194, 1);
    --color-red: rgba(200, 11, 11, 1);
    --color-modal-bg: rgba(240, 240, 240, 1);
    --color-btn: linear-gradient(45deg, rgba(253, 207, 90, 1), rgba(230, 179, 2, 1));
    --color-selected: rgba(31, 105, 52, 0.3);
    --color-grd: linear-gradient(45deg, rgba(253, 207, 90, 1), rgba(230, 179, 2, 1));
    --width: calc(100% - 2.66rem);
    --left: 1.33rem;
}



html, body { position: relative; width: 100%; height: 100%; font-family: 'Pretendard Variable'; font-size: 15px; font-variation-settings: 'wght' 400; color: var(--color-black); background-color: rgba(255, 255, 255, 1); }
* { position: relative; margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; }
body { -webkit-touch-callout: none !important; }
a { text-decoration: none; }
button { font-family: 'Pretendard Variable'; background-color: transparent; border-radius: 0; }
input[type=checkbox], input[type=file], input[type=radio] { display: none; }
input[type=text], input[type=number] { font-family: 'Pretendard Variable'; border-radius: 0; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

textarea { font-family: 'Pretendard Variable'; resize: none; }
label { display: flex; justify-content: center; align-items: center; font-family: 'Pretendard Variable'; }


body { display: flex; justify-content: center; align-items: center; overflow: hidden; }


main { position: absolute; left: 0; top: 6rem; margin: 0; padding: 0; width: 100%; height: calc(100% - 6rem); overflow-x: hidden; overflow-y: auto; }
main::after { content: ''; position: relative; display: block; width: 100%; height: 10rem; background-color: transparent; }
main::-webkit-scrollbar { width: 4px; }
main::-webkit-scrollbar-button { display: none; }
main::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); }
main::-webkit-scrollbar-track { background-color: transparent; }



/*
    HEADER
*/

header { position: fixed; display: flex; justify-content: space-between; align-items: center; padding: 2rem 1.33rem 0 1.33rem; left: 0; top: 0; width: 100%; height: 6rem; background-color: rgba(255, 255, 255, 1); z-index: 25; }
header::after { content: ''; position: absolute; left: var(--left); bottom: 0; width: var(--width); height: 1px; background-color: rgba(229, 229, 229, 1); }
header button { height: 4rem; }
header button.home { width: 12rem; background: no-repeat 0 50% / auto 2.8rem url('/assets/img/sys_img_logo.svg'); }
header button.back { width: 4rem; background: no-repeat 0 50% / 1.75rem 1.75rem url('/assets/img/header_btn_back.svg'); }
header button.alarm { width: 4rem; background: no-repeat 100% 50% / 1.75rem 1.75rem url('/assets/img/header_btn_alarm.svg'); }
header button.none { display: none; }


/*
    NAV
*/

nav { position: fixed; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 5.5rem 0 0; left: 0; top: calc(100vh - 4.4rem); width: 100vw; height: 4.4rem; background-color: rgba(255, 255, 255, 1); z-index: 50; transition: transform 0.3s ease; }
nav.none { display: none; pointer-events: none; }
nav.hide { transform: translateY(8rem); }
nav::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.05); }
nav a { display: block; margin: 0 2rem 0 0; width: 17vw; height: 4.4rem; }
nav a::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(150, 150, 150, 1); -webkit-mask: no-repeat 50% 0.5rem / 2.5rem 2.5rem; mask: no-repeat 50% 0.5rem / 2.5rem 2.5rem; }
nav a::after { content: attr(data-title); position: absolute; left: 0; bottom: 0.5rem; width: 100%; font-family: 'Pretendard Variable'; font-size: 0.6rem; font-variation-settings: 'wght' 400; color: rgba(95, 95, 95, 1); text-align: center; }
nav a.selected::before { background: rgb(253, 207, 90); }
nav a.selected::after { font-variation-settings: 'wght' 500; color: rgba(75, 73, 156, 1); }

nav a.home::before { -webkit-mask-image: url('/assets/img/nav_btn_home.svg'); mask-image: url('/assets/img/nav_btn_home.svg'); }
nav a.membership::before { -webkit-mask-image: url('/assets/img/nav_btn_membership.svg'); mask-image: url('/assets/img/nav_btn_membership.svg'); }
nav a.history::before { -webkit-mask-image: url('/assets/img/nav_btn_history.svg'); mask-image: url('/assets/img/nav_btn_history.svg'); }
nav a.my::before { -webkit-mask-image: url('/assets/img/nav_btn_my.svg'); mask-image: url('/assets/img/nav_btn_my.svg'); }

nav button { position: absolute; right: var(--left); top: -2.5rem; width: 4.5rem; height: 6.9rem; z-index: 51; }
nav button::before { content: ''; position: absolute; left: 0; top: 0; width: 5rem; height: 5rem; background: no-repeat 50% 50% / 5rem 5rem rgb(253, 207, 90) url('/assets/img/nav_btn_write.svg'); border-radius: 50%; box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.1); }
nav button::after { content: '리뷰작성'; position: absolute; left: 0; bottom: 0.5rem; width: 100%; font-family: 'Pretendard Variable'; font-size: 0.6rem; font-variation-settings: 'wght' 400; color: rgba(95, 95, 95, 1); text-align: center; }


aside.pc { display: none; }



/*  MODAL - WRITE   */
aside.mobile { position: fixed; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; padding: 6rem 0 0 0; left: 100vw; top: 0; width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 1); z-index: 40; transition: transform 0.3s ease; }
aside.mobile.show { transform: translateX(-100vw); }
aside.mobile.disable::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(220, 220, 220, 0.9) url('/assets/img/sys_loading_bg.png'); z-index: 41; }
aside.mobile.disable::after { content: '무료체험기간 종료'; position: absolute; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; left: 0; top: 70vw; width: 100%; height: 40vw; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--color-red); background: no-repeat 50% 0 / 30vw 30vw url('/assets/img/sys_img_outdated.svg'); z-index: 42; }

aside.mobile > button { position: absolute; left: 1rem; top: 3rem; width: 4rem; height: 4rem; background: no-repeat 0 0 / 1.7rem 1.7rem url('/assets/img/sys_btn_close.svg'); z-index: 45; }

aside.mobile * { width: 100%; }
aside.mobile h1 { display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem; width: 70vw; height: 2.5rem; font-size: 1.1rem; font-variation-settings: 'wght' 800; color: var(--color-title); }

aside.mobile article.player { display: none; margin: 0 auto 0; width: 40vw; height: 40vw; background-color: rgba(255, 255, 255, 1); }
aside.mobile article.player video { width: 100%; height: 100%; -webkit-filter: contrast(101%); filter: contrast(101%); background-color: rgba(255, 255, 255, 1); }

aside.mobile article.desc { display: none; padding: 0 3rem; font-size: 1rem; font-variation-settings: 'wght' 600; color: var(--color-gray); text-align: center; }
aside.mobile article.desc h2 { margin: 0 0 0.75rem 0; width: 100%; font-size: 1.6rem; font-variation-settings: 'wght' 800; color: var(--color-black); text-align: center; }

aside.mobile article.guage { margin: 0 auto; width: var(--width); height: 4rem; border-radius: 1.4rem; overflow: hidden; }
aside.mobile article.guage::after { content: attr(data-goal) '%'; position: absolute; display: flex; justify-content: center; align-items: center; left: 0; bottom: 0; width: 100%; height: 100%; font-size: 2rem; font-variation-settings: 'wght' 500; color: var(--color-title); text-align: center; }
aside.mobile article.guage section { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); overflow: hidden; }
aside.mobile article.guage section div.bar { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--color-grd); transition: transform 1s ease; }


aside.mobile article.btn { margin: 5rem auto 0; }
aside.mobile article.btn h2 { margin: 0 auto 0.75rem; padding: 0 0.1rem; width: var(--width); font-size: 1.1rem; font-variation-settings: 'wght' 700; color: var(--color-black); text-align: center; }
aside.mobile article.btn a { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; margin: 0 auto 1rem; padding: 0 0 0 6rem; width: 90%; height: 6rem; background: no-repeat 8% 50% / 3rem 3rem rgba(245, 245, 245, 1); border-radius: 1rem; overflow: hidden; }
aside.mobile article.btn a::before { content: attr(data-count); position: absolute; right: 1rem; top: 1.75rem; font-size: 0.8rem; font-variation-settings: 'wght' 500; color: var(--color-gray); }

aside.mobile article.btn a.blog { background-image: url('/assets/img/sys_btn_write_blog.svg'); }
aside.mobile article.btn a.visit { background-image: url('/assets/img/sys_btn_write_visit.svg'); }
aside.mobile article.btn a.like { background-image: url('/assets/img/sys_btn_write_like.svg'); }
aside.mobile article.btn a.insta { margin: 0 auto 1.25rem; background-image: url('/assets/img/sys_btn_write_insta.svg'); }
aside.mobile article.btn a.ask { background-image: url('/assets/img/sys_btn_ask.svg'); background-color: rgba(255, 255, 255, 0.5); }

aside.mobile article.btn a * { width: 100%; text-align: left; }
aside.mobile article.btn a h3 { font-size: 1.1rem; font-variation-settings: 'wght' 800; color: var(--color-black); }
aside.mobile article.btn a h4 { font-size: 0.8rem; font-variation-settings: 'wght' 400; color: var(--color-gray); }

aside.mobile article.btn a.disable h3 { color: var(--color-gray); }
aside.mobile article.btn a.disable::before { content: '(목표달성)'; }
aside.mobile article.btn a.disable::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5) url('/assets/img/sys_loading_bg.png'); }

aside.mobile article.btn a.like::before { content: ''; position: absolute; right: 1rem; top: 1rem; width: 1rem; height: 1rem; background: no-repeat 0 0 / contain url('/assets/img/sys_img_out.svg'); }

aside.mobile article.btn button { display: flex; align-items: center; margin: 0 auto 0; padding: 0 0 0 3.5rem; width: 90%; height: 3rem; font-size: 1.1rem; font-variation-settings: 'wght' 700; color: var(--color-black); text-align: left; background: no-repeat 1.75rem 50% / 1.5rem 1.5rem; }
aside.mobile article.btn button::after { content: '\203A'; position: absolute; right: 1.5rem; font-size: 1.3rem; }
aside.mobile article.btn button.ask { background-image: url('/assets/img/sys_btn_ask.svg'); }


/*  MODAL - TOUR    */
aside.tour { position: fixed; display: none; justify-content: center; align-items: center; left: 0; top: 0; width: 100%; height: 100%; background: rgba(220, 220, 220, 0.9) url('/assets/img/sys_loading_bg.png'); z-index: 50; }
aside.tour.show { display: flex; }
aside.tour section { padding: 51vw 0 0 0; width: 80vw; height: 60vh; background: no-repeat 50% 0 / 50vw 50vw url('/assets/img/sys_img_outdated.svg'); }
aside.tour section h3 { width: 100%; font-size: 1.1rem; font-variation-settings: 'wght' 700; color: rgba(200, 11, 11, 1); text-align: center; }
aside.tour section button { position: absolute; left: 0; bottom: 0; width: 100%; height: 3.5rem; font-size: 1.1rem; font-variation-settings: 'wght'; color: rgba(255, 255, 255, 1); background-color: var(--color-gray); transition: color 0.5s ease, background-color 0.5s ease; }
aside.tour section button:hover { background-color: var(--color-gray); }









/*  LOADING */
div.popup-loading { position: fixed; display: none; justify-content: center; align-items: center; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.75) url('/assets/img/sys_loading_bg.png'); z-index: 200; }
div.popup-loading.show { display: flex; }
div.popup-loading::after { content: 'NOW LOADING'; position: absolute; left: 0; top: 50vh; width: 100%; font-size: 0.7rem; font-variation-settings: 'wght' 700; color: var(--color-gray); letter-spacing: 1px; text-align: center; }
div.popup-loading div { margin: 0 0 20vh 0; width: 30vw; height: 30vw; background: no-repeat 50% 50% / cover url('/assets/img/sys_loading.svg'); border-radius: 50%; overflow: hidden; }
div.popup-loading div::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% 50% / cover url('/assets/img/sys_loading_light.svg'); animation: loading-turn 1s linear infinite; }
@keyframes loading-turn {
    0%      { transform: rotate(0deg); }
    100%    { transform: rotate(360deg); }
}



/*  COMMON  */
main h1 { display: flex; justify-content: flex-start; align-items: center; padding: 0 var(--left); width: 100%; height: 2rem; font-size: 1.33rem; font-variation-settings: 'wght' 600; color: var(--color-black); letter-spacing: -1px; }
main h2 { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--left); width: 100%; font-size: 0.86rem; font-variation-settings: 'wght' 400; color: var(--color-gray); }
main h2 a { margin-top: -0.1rem; margin-left: 1rem; font-size: 0.8rem; font-variation-settings: 'wght' 400; color: var(--color-gray); }
main h2 a::after { content: '\2192'; margin: 0 0 0 0.5rem; font-size: 1rem; }

main article { width: 100%; -webkit-user-select: none; user-select: none; }


article.title-sub { position: fixed; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; padding: 0 var(--left); left: 0; top: 6rem; width: 100%; height: 6rem; background-color: rgba(255, 255, 255, 1); z-index: 10; }
article.title-sub h3 { width: 100%; height: 2rem; font-size: 1.33rem; font-variation-settings: 'wght' 600; color: var(--color-black); line-height: 2rem; }
article.title-sub h3 b { font-variation-settings: 'wght' 900; color: rgba(0, 0, 0, 1); }
article.title-sub h4 { width: 100%; height: 1rem; font-size: 0.9rem; font-variation-settings: 'wght' 400; color: var(--color-black); line-height: 1rem; }


div.popup-alert { display: flex; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 700; }
div.popup-alert section { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(90vw + 5rem); background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); transform: translateY(50vh); transition: transform 0.3s ease; }
div.popup-alert section.show { transform: translateY(0); }
div.popup-alert section div.msg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 1rem; width: 100%; height: 90vw; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); line-height: 1.4rem; }
div.popup-alert section div.msg h1 { font-size: 1.3rem; }
div.popup-alert section div.btn { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; height: 5rem; padding: 0 var(--left); }
div.popup-alert section div button { width: 100%; height: 4rem; color: rgba(255, 255, 255, 1); background-color: var(--color-black); }
div.popup-alert section div.btn.confirm button { width: 49%; }
div.popup-alert section div.btn.confirm button:nth-of-type(2) { background-color: var(--color-gray); }





.loading { display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 5; }
.lds-dual-ring { 
    display: inline-block; 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}
.lds-dual-ring:after { 
    content: " "; 
    display: block; 
    width: 64px; 
    height: 64px; 
    margin: 8px; 
    border-radius: 50%; 
    border: 6px solid #fff; 
    border-color: #fff transparent #fff transparent; 
    animation: lds-dual-ring 1.2s linear infinite; 
}
@keyframes lds-dual-ring { 
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
   }
}
   
   
/*  PC VERSION  */
@media (min-width: 800px) {
    html, body { font-size: 16px; background: linear-gradient(to right, rgba(249, 249, 249, 1) 0 300px, rgba(255, 255, 255, 1) 300px 100%); }
    body { justify-content: flex-start; align-items: flex-start; overflow: unset; }
    main { position: relative; left: unset; top: unset; padding: 2rem calc(100% - 1180px) 4rem 310px; width: 100%; height: auto; border: 0; overflow: unset; }

    a { cursor: pointer; }
    button { cursor: pointer; }
    label { cursor: pointer; }

    header { height: 4rem; background: no-repeat 2rem 80% / auto 2.8rem rgba(255, 255, 255, 0) url('/assets/img/sys_img_logo.svg'); pointer-events: none; }
    header::after { display: none; }
    header button { display: none; }

    nav { display: none; }

    aside.pc { position: fixed; display: block; left: 2rem; top: 6rem; width: calc(300px - 4rem); z-index: 10; }
    aside.pc button { display: flex; padding: 0 0 0 3rem; width: 100%; height: 4rem; align-items: center; font-size: 1rem; font-variation-settings: 'wght' 400; color: var(--color-black); transition: all 0.5s ease; }
    aside.pc button:hover { font-variation-settings: 'wght' 700; }
    aside.pc button:hover::before { background-color: var(--color-black); }
    aside.pc button::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1); }
    
    aside.pc button::before { content: ''; position: absolute; left: 0; top: 1rem; width: 2rem; height: 2rem; background-color: var(--color-gray); -webkit-mask: no-repeat 50% 50% / contain; mask: no-repeat 50% 50% / contain; transition: background-color 0.5s ease; }
    aside.pc button.home::before { -webkit-mask-image: url('/assets/img/nav_btn_home.svg'); mask-image: url('/assets/img/nav_btn_home.svg'); }
    aside.pc button.membership::before { -webkit-mask-image: url('/assets/img/nav_btn_membership.svg'); mask-image: url('/assets/img/nav_btn_membership.svg'); }
    aside.pc button.history::before { -webkit-mask-image: url('/assets/img/nav_btn_history.svg'); mask-image: url('/assets/img/nav_btn_history.svg'); }
    aside.pc button.my::before { -webkit-mask-image: url('/assets/img/nav_btn_my.svg'); mask-image: url('/assets/img/nav_btn_my.svg'); }

    aside.pc button.selected { font-variation-settings: 'wght' 700; }  
    aside.pc button.selected::before { background-color: rgba(200, 11, 11, 1); }
    aside.pc button.selected::after { background-color: var(--color-black); }


    aside.pc a { display: flex; align-items: center; margin: 0.75rem auto 0; padding: 0 0 0 4rem; width: 100%; height: 3.5rem; font-size: 1.1rem; font-variation-settings: 'wght' 700; color: var(--color-black); background: no-repeat 1rem 50% / 2rem 2rem rgba(255, 255, 255, 1); letter-spacing: -1px; text-align: left; box-sizing: border-box; border: 1px solid var(--color-black); border-radius: 0.25rem; transition: background-color 0.5s ease; }
    aside.pc a::after { content: attr(data-count); margin: 0 0 0 0.5rem; }
    aside.pc a:hover { background-color: var(--color-gray); cursor: pointer; }
    aside.pc a.login { justify-content: center; margin: 2rem 0 0 0; padding: 0; }
    aside.pc a.blog { margin: 2rem auto 0; background-image: url('/assets/img/sys_btn_write_blog.svg'); }
    aside.pc a.visit { background-image: url('/assets/img/sys_btn_write_visit.svg'); }
    aside.pc a.like { background-image: url('/assets/img/sys_btn_write_like.svg'); }
    aside.pc a.insta { background-image: url('/assets/img/sys_btn_write_insta.svg'); }
    aside.pc a.ask { margin: 1.5rem auto 0; background-image: url('/assets/img/sys_btn_ask.svg'); }

    aside.pc a.disable::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5) url('/assets/img/sys_loading_bg.png'); }

    aside.mobile article.btn a { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; margin: 0 auto 1rem; padding: 0 0 0 6rem; width: 90%; height: 6rem; background: no-repeat 1% 50% / 3rem 3rem rgba(245, 245, 245, 1); border-radius: 1rem; overflow: hidden; }

    aside.tour section { padding: 220px 0 0 0; width: 500px; height: 500px; background: no-repeat 50% 0 / 200px 200px url('/assets/img/sys_img_outdated.svg'); }

    article.title-sub { left: 310px; top: 0; width: 870px; height: 5rem; box-sizing: border-box; border-top: 2rem solid rgba(255, 255, 255, 1); }

    div.popup-alert { position: fixed; display: flex; justify-content: center; align-items: center; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 700; }
    div.popup-alert section { position: relative; width: 512px; height: 512px; background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); transform: scale(0.9); transition: transform 0.3s ease; }
    div.popup-alert section.show { transform: scale(1); }
    div.popup-alert section div.msg { display: flex; justify-content: center; align-items: center; padding: 1rem; width: 100%; height: calc(512px - 5rem); font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); line-height: 1.4rem; }
    div.popup-alert section div.btn { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; height: 5rem; padding: 0 var(--left); }
    div.popup-alert section div button { width: 100%; height: 4rem; color: rgba(255, 255, 255, 1); background-color: var(--color-black); }
    div.popup-alert section div.btn.confirm button { width: 49%; }
    div.popup-alert section div.btn.confirm button:nth-of-type(2) { background-color: var(--color-gray); }
    








    /*  LOADING */
    div.popup-loading::after { left: 0; top: 50vh; width: 100%; font-size: 0.7rem; }
    div.popup-loading div { margin: 0 0 20vh 0; width: 10rem; height: 10rem; }
}