@charset "utf-8";
/* version 0.0.02 */

/* index.html ************************************************/
.what-is-dic-wrap{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--sidePadding);
}
.what-is-dic-wrap a{
    font-size: 0.75rem;
    color: var(--dark2);
}
#index-banner{
    width: 100%;
    box-sizing: border-box;
}
#index-banner .index-banner-slide{}
#index-banner .index-banner-slide .inner{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: 2rem 1rem;
    min-height: 50vh;
}
#index-banner .index-banner-slide .inner img{
    width: 60vw;
    max-width: calc(var(--maxWidth) * 0.6);
}
#index-banner .index-banner-slide .inner .title-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
#index-banner .index-banner-slide .inner h2{
    font-size: 1.5rem;
}
#index-banner .index-banner-slide .inner .more {
    font-size: 0.75rem;
    color: var(--theme);
}
#index-banner .index-banner-slide .inner .button{
    width: 35%;
    max-width: calc( var(--maxWidth) * 0.4  );
}
#index-banner .index-banner-slide .inner button{}
#index-banner .index-banner-slide .inner p.index-banner-text-box{
    background-color: rgba(0,0,0,0.4);
    padding: 1.25rem;
    border-radius: 1rem;
    color: white;
    margin-top: 2rem;
    font-size: 0.938rem;
    min-height: 5rem;
}
#index-banner-dots{
    width: 100%;
    box-sizing: border-box;
}
#index-banner-dots ul{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
#index-banner-dots ul li{
    font-size: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 10rem;
    background-color: var(--dark1);
}
#index-banner-dots ul li.slick-active{
    background-color: var(--dark6);
}
#index-menu{
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    padding: 3rem 0;
}
#index-menu .inner{
    width: fit-content;
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    overflow-x: scroll;
    align-items: center;
    gap: 1rem;
    padding: var(--sidePadding);
    --boxWidth : calc((100vw - 5rem)/2);
    --maxBoxWidth : calc((var(--maxWidth) - 5rem)/2);
}
#index-menu .menu-btn{
    /*width: 10rem;*/
    /*height: 10rem;*/
    width: var(--boxWidth);
    height: var(--boxWidth);
    max-width: var(--maxBoxWidth);
    max-height: var(--maxBoxWidth);
    flex-grow: 1;
    background-color: var(--dark1);
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.3s;
}
#index-menu .menu-btn:active{
    background-color: var(--dark2);
}
#index-menu .menu-btn:active img{
    transform: scale(0.8);
}
#index-menu .menu-btn img{
    width: 50%;
    transition: transform 0.3s;
}
#index-menu .menu-btn p{
    font-size: 0.875rem;
    color: var(--dark5);
}

.index-boards{
    width: 100%;
    box-sizing: border-box;
    padding: var(--sidePadding);
}
.index-boards .title-area{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}
.index-boards .title-area h3{
    font-size: 1.125rem;
}
.index-boards .title-area a{
    font-size: 0.813rem;
    color: var(--dark3);
}
.index-boards ul{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.index-boards ul li{
    width: 100%;
    box-sizing: border-box;
}
.index-boards ul li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.index-boards ul li a p{
    font-size: 0.875rem;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}
.index-boards ul li a span{
    font-size: 0.75rem;
    color: var(--dark2);
    white-space: nowrap;
}
#index-newsletter{
    margin-bottom: 2rem;
}

/*login*/
#login{
    --appear : 0.7s;
    --delay : 0.7s;
}
#login section{
    width: 100%;
    box-sizing: border-box;
    padding: 8rem 1.5rem 0;
    position: relative;
    min-height: 100vh;
    gap: 4rem;
    display: flex;
    flex-direction: column;
}
#login section #login-logo{
    position: absolute;
    width: 70%;
    object-fit: contain;
    transform : translate(-50%, -50%);
    left: 50%;
    top: 42%;
    transition: all 1s;
    cursor: pointer;
}
#login section #login-logo.on{
    transform : translate(0, 0);
    left: 1.5rem;
    top: 1.5rem;
    width: 6rem;
}
#login .title-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: all var(--appear);
    transition-delay: var(--delay);
}
#login .title-area.on{
    opacity: 1;
}
#login .title-area h1{
    font-size: 1.5rem;
}
#login .title-area p{
    font-size: 0.938rem;
    color: var(--dark4);
}
#login #login-area{
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
    opacity: 0;
    transition: all var(--appear);
    transition-delay: var(--delay);
}
#login #login-area.on{
    opacity: 1;
}
#login #login-btn{
    background-color: var(--dark1);
    padding-left: 1rem;
    padding-right: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.4s;
    outline: none;
    border: 1px solid transparent;
    background-color: var(--theme);
    color: white;
    font-weight: bold;
}
#login #login-btn:disabled{
    background-color: var(--theme-light);
}
#login #login-area .link-area{
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
}
#login #login-area .link-area a{
    font-size: 0.875rem;
    color: var(--theme);
}
#login #sns-login-area{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    gap: 1.5rem;
    /*flex-grow: 1;*/
    padding-bottom: 2rem;

    opacity: 0;
    transition: all var(--appear);
    transition-delay: var(--delay);
}
#login #sns-login-area.on{
    opacity: 1;
}
#login #sns-login-area > p{
    color: var(--dark2);
    font-size: 0.75rem;
    text-align: center;
}
#login #sns-login-area .button-area{
    display: flex;
    gap: 1rem;
    justify-content: center;
}
#login #sns-login-area .button-area a{
    width: 3rem;
    height: 3rem;
    display: block;
    border-radius: 10rem;
    overflow: hidden;
}
#login #sns-login-area .button-area a img{
    width: 100%;
    height: 100%;
}


/* login 240206 ******************************************************************/
/*#login{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    gap: 2rem;*/
/*    padding-bottom: 5rem;*/
/*    position: relative;*/
/*    overflow-y: hidden;*/
/*}*/
/*#login .top-area{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    padding: 2rem;*/
/*    gap: 1rem;*/
/*}*/
/*#login .top-area img{*/
/*    width: 10rem;*/
/*    height: 10rem;*/
/*}*/
/*#login .top-area .wrap{*/
/*    text-align: center;*/
/*}*/
/*#login .top-area .wrap h2{*/
/*    font-size: 1.25rem;*/
/*    margin-bottom: 0.5rem;*/
/*}*/
/*#login .top-area .wrap p{*/
/*    font-size: 0.938rem;*/
/*    color: var(--dark4);*/
/*}*/
/*#login .bottom-area{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    overflow-x: auto;*/
/*}*/
/*#login .bottom-area .inner{*/
/*    width: max-content;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    gap: 0.5rem;*/
/*    flex-wrap: nowrap;*/
/*    padding: var(--sidePadding);*/
/*}*/
/*#login .bottom-area .inner .login-choose{*/
/*    display: flex;*/
/*    width: 8rem;*/
/*    height: 8rem;*/
/*    background-color: white;*/
/*    border: 1px solid var(--dark2);*/
/*    border-radius: 0.625rem;*/
/*    flex-direction: column;*/
/*    gap: 1rem;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    transition: all 0.3s;*/
/*}*/
/*#login .bottom-area .inner .login-choose:hover{*/
/*    border: 1px solid var(--theme-light);*/
/*    background-color: var(--theme-lighter);*/
/*}*/
/*#login .bottom-area .inner .login-choose img{*/
/*    width: 50%;*/

/*}*/
/*#login .bottom-area .inner .login-choose p{*/
/*    color: var(--dark5);*/
/*    font-size: 0.938rem;*/
/*}*/
/*#login-wrap{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    height: 100%;*/
/*    max-height: 100vh;*/
/*    max-width: 100%;*/
/*    min-height: 600px;*/
/*    background-color: white;*/
/*    z-index: 9988;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    transition: top 0.5s;*/
/*}*/
/*#login-wrap .close-btn-wrap{*/
/*    !*background-color: white;*!*/
/*    padding: 1rem;*/
/*    text-align: right;*/
/*    position: sticky;*/
/*    top: 0;*/
/*}*/
/*#login-wrap .close-btn-wrap #login-wrap-close-btn{}*/
/*#login-wrap .title-area{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    padding: 3rem;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*}*/
/*#login-wrap .title-area img{*/
/*    width: 2.5rem;*/
/*    height: 2.5rem;*/
/*}*/
/*#login-wrap .title-area h3{*/
/*    font-size: 1.25rem;*/
/*}*/
/*#login-wrap .title-area p{*/
/*    font-size: 0.938rem;*/
/*    color: var(--dark5);*/
/*}*/
/*#login-wrap #login-form{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    padding: 0 2rem;*/
/*    gap: 0.625rem;*/
/*}*/

/*!* register 회원가입 240206 **************************************************************!*/
/*.register-step{*/
/*    justify-content: space-between;*/
/*}*/
/*.register-step-inner{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-grow: 1;*/
/*}*/
/*#register-intro h2{*/
/*    padding: 1rem;*/
/*    font-size: 1.25rem;*/
/*}*/
/*#register-intro p{*/
/*    padding: var(--sidePadding);*/
/*}*/

/*#register-terms form{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    padding: var(--sidePadding);*/
/*    gap: 2rem;*/
/*    padding-bottom: 5rem;*/
/*    min-height: var(--viewHeight);*/
/*}*/
/*#register-terms form > P {*/
/*    font-size: 1rem;*/
/*    color: var(--theme);*/
/*    width: 100%;*/
/*    text-align: center;*/
/*}*/
/*#register-terms form #agree-all {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    background-color: var(--theme-lighter);*/
/*    border: 1px solid var(--theme);*/
/*    border-radius: 1rem;*/
/*    padding: 1rem 1.125rem;*/
/*    align-items: center;*/
/*}*/
/*#register-terms form #agree-all strong{*/
/*    font-size: 1.125rem;*/
/*    color: var(--theme);*/
/*}*/
/*#register-terms form #agree-all p{*/
/*    font-size: 0.875rem;*/
/*    opacity: 0.7;*/
/*    color: var(--theme);*/
/*}*/
/*#register-terms form .wrap{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*}*/
/*#register-terms form .wrap .content-area{*/
/*    background-color: var(--dark1);*/
/*    border-radius: 1rem;*/
/*    padding: 1.25rem;*/
/*}*/
/*#register-terms form .wrap .title-area{*/

/*}*/
/*#register-terms form .wrap .title-area span{*/
/*    display: inline-block;*/
/*    font-size: 0.813rem;*/
/*    color: var(--dark3);*/
/*}*/
/*#register-terms form .wrap .title-area h3{*/
/*    font-size: 1.125rem;*/
/*    padding: 0.5rem 0;*/
/*}*/
/*#register-terms form .wrap .title-area h3 .required{*/
/*    font-size: 0.938rem;*/
/*    color: var(--theme);*/
/*}*/
/*#register-terms form .wrap p{*/
/*    overflow-y: scroll;*/
/*    text-overflow: ellipsis;*/
/*    max-height: 20vh;*/
/*    font-size: 0.875rem;*/
/*    white-space: pre-line;*/
/*}*/
/*#register-terms form .wrap .checkbox-area{*/
/*    padding: 0.5rem;*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*}*/
/*.register-step{}*/
/*.register-step form{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-grow: 1;*/
/*    padding: 2rem;*/
/*    padding-bottom: 30vh;*/
/*    align-items: flex-end;*/
/*    justify-content: center;*/
/*    gap: 2rem;*/
/*}*/
/*button.register-next{*/
/*    color: var(--theme);*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    font-weight: bold;*/
/*}*/
/*button.register-next:after{*/
/*    content: url("/resources/images/icon/next-caret-bg.svg");*/
/*    width: 1.5rem;*/
/*    height: 1.5rem;*/
/*}*/
/*.register-step form .wrap{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.625rem;*/

/*}*/
/*.register-step form .wrap img{*/
/*    width: 2.5rem;*/
/*    height: 2.5rem;*/
/*}*/
/*.register-step form .wrap h3{*/
/*    font-size: 1.25rem;*/
/*}*/
/*.register-step form .wrap p{*/
/*    font-size: 0.875rem;*/
/*    color: var(--dark4);*/
/*}*/
/*.register-step form .wrap input{*/
/*    margin-top: 1.25rem;*/
/*}*/
/*#register-verify .input-wrap{*/
/*    !*margin-top: 1.25rem;*!*/
/*}*/
/*#register-verify .input-wrap input{*/
/*    margin-top: 0;*/
/*    height: 0;*/
/*    transition: all 0.6s;*/
/*    outline: none;*/
/*}*/
/*#register-verify .input-wrap.on input{*/
/*    animation-name: inputAppear;*/
/*    animation-duration: 0.9s;*/
/*    animation-fill-mode: forwards;*/
/*}*/
/*@keyframes inputAppear {*/
/*    0%{*/
/*        height: 0;*/
/*        outline: none;*/
/*        opacity: 0;*/
/*        margin-top: 0;*/
/*    }*/
/*    60%{*/
/*        margin-top: 1.25rem;*/
/*        height: 4rem;*/
/*        outline: 1px solid transparent;*/
/*        opacity: 0;*/
/*    }*/
/*    100% {*/
/*        margin-top: 1.25rem;*/
/*        height: 4rem;*/
/*        outline: 1px solid var(--dark2);*/
/*        opacity: 1;*/
/*    }*/
/*}*/
/*#register-verify .input-wrap input::placeholder{opacity: 0 ; transition: opacity 0.6s}*/
/*#register-verify .input-wrap.on input::placeholder{opacity: 1}*/
/*#register-verify .input-wrap button{*/
/*    background-color: #DFD4CD;*/
/*    color: #877062;*/
/*}*/
/*#register-verify .input-wrap.on button{*/
/*    display: block;*/
/*    background-color: transparent;*/
/*    color: var(--theme);*/
/*    font-size: 0.75rem;*/
/*    width: fit-content;*/
/*    padding: 0;*/
/*    height: auto;*/
/*    margin: 1.5rem auto;*/
/*    transition: opacity 0.3s;*/
/*    cursor: pointer;*/
/*}*/
/*#register-verify .input-wrap.on button:disabled{*/
/*    opacity: 0.5;*/
/*    cursor: wait;*/
/*}*/
/*#register-verify .input-wrap.on button span{*/
/*    text-decoration: underline;*/
/*    margin-left: 0.5rem;*/
/*    cursor: inherit;*/
/*}*/

/*#register-pw #userPasswordCheck{*/
/*    margin-top: 0;*/
/*}*/
/*#register-outro{}*/
/*#register-outro .register-step-inner{*/
/*    justify-content: center;*/
/*    !*padding-bottom: 5rem;*!*/
/*    align-items: center;*/
/*    padding: 0 2rem 5rem;*/
/*    gap: 1rem;*/
/*}*/
/*#register-outro .register-step-inner img{*/
/*    width: 4rem;*/
/*    height: 4rem;*/
/*}*/
/*#register-outro .register-step-inner h2{*/
/*    font-size: 1.25rem;*/
/*}*/
/*#register-outro .register-step-inner p{*/
/*    color: var(--dark4);*/
/*    text-align: center;*/
/*}*/
/*#register-outro .register-step-inner a{}*/


/*pTestMain*/
#ptest-main-banner{
    width: 100%;
    /*max-height: 30vh;*/
    object-fit: cover;
}
#ptest-buy{
    padding: var(--sidePadding);
    padding-top: 2rem;
    padding-bottom: 2rem;
}
#ptest-buy-form{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
#ptest-buy h2{
    font-size: 1.125rem;
}
#ptest-buy #ptest-version-select{}
#ptest-buy p.test-info{
    color: var(--dark6);
}
#ptest-buy p.test-terms{
    color: var(--dark3);
    font-size: 0.813rem;
}
#ptest-buy-form .wrap{
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
}
#ptest-description{
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem;
    border-top: 1rem solid var(--dark1);
}
#ptest-description h2{
    font-size: 1.125rem;
    width: 100%;
}
#ptest-description p{
    color: var(--dark6);
}
#ptest-description figure{
    width: 100%;
    box-sizing: border-box;
}
#ptest-description figure img{
    width: 100%;
    object-fit: contain;
    border-radius: 0.625rem;
}
/*!*cTestMain*!*/
/*#ctest-main-banner{*/
/*    width: 100%;*/
/*    !*max-height: 30vh;*!*/
/*    object-fit: cover;*/
/*}*/
/*#ctest-buy{*/
/*    padding: var(--sidePadding);*/
/*    padding-top: 2rem;*/
/*    padding-bottom: 2rem;*/
/*}*/
/*#ctest-buy-form{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: flex-start;*/
/*    gap: 1rem;*/
/*    margin-bottom: 1rem;*/
/*}*/
/*#ctest-buy h2{*/
/*    font-size: 1.125rem;*/
/*}*/
/*#ctest-buy #ctest-version-select{}*/
/*#ctest-buy p.test-info{*/
/*    color: var(--dark6);*/
/*}*/
/*#ctest-buy p.test-terms{*/
/*    color: var(--dark3);*/
/*    font-size: 0.813rem;*/
/*}*/
/*#ctest-buy-form .wrap{*/
/*    margin-top: 2rem;*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*}*/
/*#ctest-description{*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    padding: 2rem 1rem;*/
/*    border-top: 1rem solid var(--dark1);*/
/*}*/
/*#ctest-description h2{*/
/*    font-size: 1.125rem;*/
/*    width: 100%;*/
/*}*/
/*#ctest-description p{*/
/*    color: var(--dark6);*/
/*}*/
/*#ctest-description figure{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*#ctest-description figure img{*/
/*    width: 100%;*/
/*    max-height: 30vh;*/
/*    object-fit: cover;*/
/*    border-radius: 0.625rem;*/
/*}*/

/*test*/
.test-intro{
}
.test-intro .inner{
    min-height: var(--viewHeight);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.test-intro img{
    width: 100%;
    object-fit: cover;
    max-height: 30vh;
}
.test-intro .wrap{
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem;
    gap: 1rem;
}
.test-intro .wrap h2{
    font-size: 1.5rem;
    color: var(--theme);
}
.test-intro .wrap p{
    color: var(--dark5);
}
.test-intro .content-area{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    flex-grow: 1;
}
.test-intro .content-area li{
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
.test-intro .content-area li img{
    width: 2.5rem;
    height: 2.5rem;
}
.test-intro .content-area li p{
    flex-grow: 1;
    font-weight: bold;
    word-break: keep-all;
}
.test-question-step{

}
.test-question-step form{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 2rem 1rem;
}
.test-question-step form .question-block{}
.test-question-step form .question-block p{
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    padding-left: 0.2rem;
}
/*test-outro*/
.test-outro{}
.test-outro .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: var(--viewHeight);
    max-width: var(--viewHeight);
}
.test-outro .inner .img-area{
    padding: 3rem;
}
.test-outro .inner .img-area img{
    width: 7rem;
    height: 7rem;
}
.test-outro .inner .wrap{
    display: flex;
    flex-direction: column;
    padding-left: 2rem;
    padding-right: 2rem;
    align-items: center;
    flex-grow: 1;
    gap: 1rem;
    justify-content: center;
    padding-bottom: 20%;
}
.test-outro .inner .wrap h2{
    font-size: 1.5rem;
    color: var(--D);
}
.test-outro .inner .wrap p{
    color: var(--dark5);
    text-align: center;
}


.test-outro .button03{
    animation-name: stepBtnWidthGrow;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes stepBtnWidthGrow {
    0%{width: 48%}
    100%{width: 100%}
}
/*progress*/
#step-progress{
    width: 100%;
    max-width: var(--maxWidth);
    position: fixed;
    left: 50%;
    top: var(--headerHeight);
    transform: translateX(-50%);
    z-index: 8888;
    appearance: none;
}
#step-progress::-webkit-progress-bar{
    height: 4px;
    background-color: var(--dark1);
}
#step-progress::-webkit-progress-value{
    background-color: var(--theme);
    transition: all 700ms cubic-bezier(0.065, 0.940, 0.430, 0.920)
}
/*step-btn*/
.step .step-btn-area{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--maxWidth);
    padding: 1.25rem 0.625rem;
    position: sticky;
    bottom: 0;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
}

/* profile 마이페이지 프로필 mypage *****************************************************************/

#mypage #profile-card-area{
    padding: 1rem;
}
#mypage .menu-1{
    padding: 1rem;
}
#mypage .menu-1 .box-area{
    background-color: var(--dark1);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-around;
    gap: 0.625rem;
}
#mypage .menu-1 .box-area a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-direction: column;
    flex-grow: 1;
}
#mypage .menu-1 .box-area a strong{
    font-size: 1.25rem;
}
#mypage .menu-1 .box-area a p{
    font-size: 0.875rem;
    color: var(--dark4);
}
#mypage .menu-2{
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#mypage .menu-2 h2{
    font-weight: normal;
    font-size: 0.813rem;
    color: var(--dark3);
}
#mypage .menu-2 ul{
    margin-bottom: 1rem;
}
#mypage .menu-2 ul li{
    width: 100%;
    box-sizing: border-box;
}
#mypage .menu-2 ul li a{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 0.5rem;
    padding: 1rem 0;
}
#mypage .menu-2 ul li a p.name{
    font-weight: bold;
    flex-grow: 1;
    color: var(--dark5);
    font-size: 0.938rem;
}
#mypage .menu-2 ul li a p.val{
    color: var(--dark4);
    font-size: 0.938rem;
}
#mypage .menu-2 ul li a img{}
#mypage #detailed-info{
    width: 100%;
    box-sizing: border-box;
    padding: 3rem 1rem 3rem;
    font-size: 0.813rem;
    color: var(--dark2);
}
#mypage #detailed-info .registered-date{
    font-weight: bold;
}
#mypage #detailed-info .unregister-terms{}
#mypage #detailed-info .unregister-terms a{
    color: var(--dark3);
    margin-left: 0.5rem;
    text-decoration: underline;
}



/*account-setting 개인정보수정*/
/*#account-setting section{*/
/*    padding: var(--sidePadding);*/
/*    padding-top: 1.25rem;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 2rem;*/
/*}*/
/*#account-setting section .wrap{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*}*/
/*#account-setting section .wrap h3{}*/
/*#account-setting section .wrap h3 .asterisk{}*/
/*#account-setting section .wrap .input01{}*/
/*#account-setting section-gender{}*/
/*#account-setting section .radio-wrap{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    gap: 0.625rem;*/
/*}*/
/*#account-setting section .radio-wrap input{display: none}*/
/*#account-setting section .radio-wrap label{*/
/*    width: 100%;*/
/*    border-radius: 0.625rem;*/
/*    border: 1px solid var(--dark2);*/
/*    padding: 1.25rem 1rem;*/
/*    text-align: center;*/
/*    color: var(--dark6);*/
/*}*/
/*#account-setting section .radio-wrap input:checked + label{*/
/*    border: 1px solid var(--theme);*/
/*    background-color: var(--theme-lighter);*/
/*    color: var(--theme);*/
/*}*/
/*#account-setting section #change-password-btn{*/
/*    background-color: var(--dark1);*/
/*    color: var(--dark3);*/
/*    font-weight: normal;*/
/*    font-size: 0.938rem;*/
/*}*/
/*#account-setting section .info-area{*/
/*    margin-top: 3rem;*/
/*    color: var(--dark3);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1rem;*/
/*    font-size: 0.813rem;*/
/*}*/
/*#account-setting section .info-area b{}*/
/*#account-setting section .info-area p{}*/
/*#account-setting section .info-area p a{*/
/*    text-decoration: underline;*/
/*    color: var(--alert-red);*/
/*}*/
/*#account-setting .button-area{*/
/*    padding: 2rem 1rem 1rem;*/
/*    position: sticky;*/
/*    bottom: 0;*/
/*}*/
/*#account-setting .button-area button{}*/

/*개인정보 수정 **************************************************/
#account-setting{}
#account-setting section{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#account-setting section form{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    gap: 1rem;
}
#account-setting section form h2{
    font-size: 0.875rem;
    color: var(--dark3);
    font-weight: normal;
    padding-left: 0.5rem;
}
#account-setting .modal01{
    width: 60%;
    text-align: center;
}
#account-setting #save-button{
    width: 5rem;
    height: 5rem;
    border-radius: 10rem;
    background-color: var(--theme);
    transition: all 0.3s;
    position: sticky;
    right: 1rem;
    bottom: 1rem;
}
#account-setting #save-button img{
    width: 60%;
    height: 60%;
}

/* terms 이용약관 ***********************************************/
#terms{
    padding: var(--sidePadding);
}

#terms ol{
    /* list-style: decimal !important; */
}
#terms ol li{
    font-size: 0.875rem;
    margin-left: 1rem;
    line-height: 1.6;
    padding: 0.3rem 0;
}
#terms ol li ol{
    margin-top: 0.625rem;
}
#terms ol li ol li{
    font-size: 0.813rem;
    padding: 1px 0;
    color: var(--depth3);
}
#terms h2{
    font-size: 1.8rem;
    margin-top: 3rem;
}
#terms h3{
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    color: var(--theme);
}
#terms h4{
    margin-top: 2rem;
    margin-bottom: 0.625rem;
}
#terms h6{font-weight: normal;}

#terms p{
    margin-top: 6.25rem;
    font-style: italic;
    color: var(--depth2);
}
#terms p b{
    display: block;
}
#terms p span{
    font-size: 0.875rem;
}
/* privacy 개인정보처리방침 */
#privacy{
    line-height: 1.6;
    padding: var(--sidePadding);
}
#privacy h2{
    margin-top: 3rem;
    font-size: 1.8rem;
}
#privacy h4{
    margin-top: 2rem;
    margin-bottom: 0.625rem;
}
#privacy h6{
    margin-top: 1rem;
    font-weight: normal;
}
#privacy ul{}
#privacy ul li{
    list-style: '-';
    padding-left: 0.625rem;
    margin-left: 0.625rem;
}
#privacy p{
    margin-top: 4rem;
    font-size: 0.875rem;
    text-align: center;
    font-style: italic;
}
/* 계정 설정 **********************************************/


/* change-password */
/*#change-password{}*/
/*#change-password .cont{*/
/*    padding: 1rem;*/
/*}*/
/*#change-password form{*/
/*    padding: 3rem 0;*/
/*}*/
/*#change-password form label{*/
/*    font-size: 0.875rem;*/
/*    font-weight: bold;*/
/*    margin-bottom: 0.5rem;*/
/*    display: block;*/
/*    margin-left: 0.3rem;*/
/*}*/
/*#change-password form .input01{*/
/*    margin-bottom: 1.5rem;*/
/*}*/
/*#change-password .button03{*/
/*    margin: 3rem 0;*/
/*}*/

/* unregister */
#unregister{}
#unregister-intro{}
#unregister-intro .wrap{
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#unregister-intro .wrap p{}
#unregister-intro .wrap button{
    background-color: var(--alert-red);
    margin-top: 1rem;
}
#unregister-terms{
    display: none;
    padding-top: 1rem;
    padding-bottom: 6rem;
}
#unregister-terms form{}
#unregister-terms form .textbox-area{
    margin-bottom: 4rem;
}
#unregister-terms form .textbox-area h2{
    font-size: 1rem;
    margin-bottom: 1rem;
}
#unregister-terms form .textbox01{

}
#unregister-terms form input.checkbox01{}
#unregister-terms form input.checkbox01 + label{
    width: 100%;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
#unregister-terms form input.checkbox01 + label :last-of-type{
    margin-bottom: 3rem;
}
#unregister-terms .password-area{
    height: 70vh;
    position: relative;
    border-top: 1px solid var(--bg3);
    display: none;
}
#unregister-terms .password-area .wrap{
    position: absolute;
    width: 100%;
    max-width: var(--maxWidth);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
#unregister-terms .password-area .wrap h2{

}
#unregister-terms .password-area .wrap p{
    font-size: 0.875rem;
    color: var(--depth4);
    margin: 0.3rem 0 1.5rem;
}
#unregister-terms .password-area .wrap input{}
#unregister-terms .btn-area{}
#unregister-terms .btn-area button{
    background-color: var(--alert-red);
}

/*headline*/
.headline-area{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 2rem;
}
.headline-area img{
    width: 2.5rem;
    height: 2.5rem;
}
.headline-area h2{
    font-size: 1.125rem;
}
.headline-area button, .headline-area a {
    font-size: 0.688rem;
    background-color: var(--dark1);
    color: var(--dark3);
    padding: 0.3rem 0.75rem;
    border-radius: 0.25rem;
}
/*포인트*/
.point-have{
    background-color: white;
    padding: 0.5rem 1rem;
    position: sticky;
    top: var(--headerHeight);
}
.point-have .wrap{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    background-color: var(--dark1);
    border-radius: 0.625rem;
    padding: 1rem;
    align-items: center;
}
.point-have .wrap p{
    color: var(--dark4);
    font-size: 0.875rem;
}

#point-history-list{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
}
#point-history-list li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#point-history-list li .left-area{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
#point-history-list li .left-area p{
    font-size: 0.938rem;
}
#point-history-list li .left-area span{
    font-size: 0.75rem;
    color: var(--dark3);
}
#point-history-list li .item{
    font-size: 0.75rem;
    background-color: var(--dark1);
    border-radius: 0.3rem;
    padding: 0.2rem 0.75rem;
}
#point-buy{
    display: flex;
    flex-direction: column;
    padding: 2rem 1rem;
    gap: 3rem;
}
#point-buy ul{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#point-buy ul li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#point-buy li p{}
#point-buy-banner{}
#point-buy-banner img{
    width: 100%;
    border-radius: 0.625rem;
}
#point-buy-info{
    font-size: 0.75rem;
    color: var(--dark3);
}
    /*게시판 리스트 (notcie , newsletter)*/
.board-list{    }
.board-list .post-list{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 50vh;
}
.board-list .post-list li.post{
    width: 100%;
    box-sizing: border-box;
    padding: var(--sidePadding);
    border-bottom: 1px solid var(--dark1);

}
.board-list .post-list li.post *{
    cursor: pointer;
}
.board-list .post-list li.post a{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.125rem 0;
}
.board-list .post-list li.post a p{
    font-size: 0.938rem;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-list .post-list li.post a p span.new-post{
    font-size: 0.625rem;
    color: var(--theme);
}
.board-list .post-list li.post a >span.date{
    font-size: 0.75rem;
    color: var(--dark3);
    white-space: nowrap;
}
.board-pagination{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    padding: 2rem;
}

.board-pagination a{
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    color: var(--dark4);
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
}
.board-pagination a.current {
    background-color: var(--dark1);
}

/* notify 알림 */
#notify{}
#notify .filter-area{
    padding: 1.25rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}
#notify .filter-area #filter-btn{
    display: flex;
    align-items: center;
    gap: 0.333rem;
    height: 1rem;
    font-size: 1.125rem;
    font-weight: bold;
    width: fit-content;
    color: var(--dark5);
    cursor: pointer;
    position: relative;
}
#notify .filter-area #filter-btn img{
    rotate: 90deg;
}
#notify #filter-btn #filter-list{
    position: absolute;
    display: none;
    flex-direction: column;
    padding: 0.5rem;
    top: calc(100% + 1rem);
    left: 0rem;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    z-index: 10;
}
#notify #filter-btn.on #filter-list{
    display: flex;
}
#notify #filter-btn #filter-list button{
    font-size: 0.875rem;
    white-space: nowrap;
    padding: 1rem 3rem 1rem 1rem;
    text-align: left;
    border-radius: 0.625rem;
}
#notify #filter-btn #filter-list button:hover{
    background-color: var(--theme-lighter);
    color: var(--theme);
}
#notify .filter-area #read-all-btn{


    color: var(--theme);
    font-size: 0.813rem;
}

#notify section{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: var(--viewHeight);
    z-index: 0;
    overflow-x: hidden;
}
#notify section a{
    padding: 1.5rem 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    animation-name: notify;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateX(0%);
    transition: background-color 0.3s;
}
#notify section a.unread{
    background-color: var(--theme-lighter);
}
#notify section a .cate{
    width: 1.5rem;
    height: 1.5rem;
}
#notify section a .notify_content{
    font-size: 0.938rem;
}
#notify section a .notify_content .date{
    font-size: 0.813rem;
    color: var(--dark3);
    padding-left: 0.5rem;
    white-space: nowrap;
}
@keyframes notify {
    0%{
        opacity: 0;
        transform: translateX(10%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/* friends 친구리스트 */
.friends-list{
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    min-height: 90vh;
}
.friends-list li{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dark1);
}
.friends-list li *{cursor: pointer}
.friends-list li > img{
    width: 3.5rem;
    height: 3.5rem;
}
.friends-list li .name-area{
    flex-grow: 1;
}
.friends-list li .name-area .name{
    font-weight: bold;
}
.friends-list li .name-area .email {
    font-size: 0.813rem;
    color: var(--dark4);
}
.friends-list li .subtitle{
    font-size: 0.875rem;
    font-weight: normal;
}
.friends-list li .subtitle.D{color: var(--D)}
.friends-list li .subtitle.I{color: var(--I)}
.friends-list li .subtitle.S{color: var(--S)}
.friends-list li .subtitle.C{color: var(--C)}

.friends-list li .button-area{
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.friends-list li .button-area button{
    width: 1.5rem;
    height: 1.5rem;
}
.friends-list li .button-area button img{
    width: 1.5rem;
    height: 1.5rem;
}
.friends-list li .cancel{

}

/*friends~ 공통*/
#friends header.onscroll,
#friend-request-received header.onscroll,
#friend-request-sent header.onscroll{
    transition: none;
    box-shadow: none;
}
#friends .tab-header,
#friend-request-received .tab-header,
#friend-request-sent .tab-header {
    position: sticky;
    top: var(--headerHeight);
}

#friends .tab-header .badge,
#friend-request-received .tab-header .badge,
#friend-request-sent .tab-header .badge{
    background-color: var(--D);
}
#friends .modal01 p:hover,
#friend-request-received .modal01 p:hover,
#friend-request-sent .modal01 p:hover {
 background-color: var(--D-lighter);
    color: var(--D);
}
#friends section,
#friend-request-received section,
#friend-request-sent section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#add-friend-link{
    width: 5rem;
    height: 5rem;
    border-radius: 10rem;
    background-color: var(--D);
    transition: all 0.3s;
    position: sticky;
    right: 0rem;
    transform: translateX(-1rem);
    bottom: 1rem;
    box-shadow: 0 0 10px rgba(209,71,71,0.15);
}

/*친구 요청*/
/*#invite{*/
/*    min-height: var(--viewHeight);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    padding: 2rem;*/
/*    padding-top: calc(45vh - var(--headerHeight));*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/
/*#invite #invite-wrap{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*    align-items: flex-end;*/
/*    transform: translateY(-50%);*/
/*}*/
/*#invite #invite-wrap h2{*/
/*    font-size: 1.125rem;*/
/*    width: 100%;*/
/*}*/
/*#invite #invite-wrap p{*/
/*    color: var(--dark4);*/
/*}*/
/*#invite #invite-wrap #send-friend-request-btn{*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*    font-size: 0.938rem;*/
/*    color: var(--theme);*/
/*    padding: 1rem 0;*/
/*    font-weight: bold;*/
/*}*/
/*#invite #invite-wrap #send-friend-request-btn:after{*/
/*    content: url("/resources/images/icon/next-caret-bg.svg");*/
/*    display: inline-block;*/
/*    width: 1.25rem;*/
/*    height: 1.25rem;*/
/*}*/
/*#invite #send-friend-invitation{*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*    width: fit-content;*/
/*    color: var(--D);*/
/*}*/
/*#invite #send-friend-invitation img{*/
/*    width: 2rem;*/
/*    height: 2rem;*/
/*}*/
/*#invite #success-wrap{*/
/*    flex-grow: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    gap: 1rem;*/
/*    align-items: center;*/
/*    padding-bottom: 7rem;*/
/*}*/
/*#invite #success-wrap img{*/
/*    width: 5rem;*/
/*    height: 5rem;*/
/*}*/
/*#invite #success-wrap h2{*/
/*    font-size: 1.125rem;*/
/*}*/
/*#invite #success-wrap p{}*/
/*#invite .button-wrap{*/
/*    padding: 1rem 0;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*}*/
/*#invite .button-wrap a{*/
/*    background-color: var(--dark1);*/
/*    color: var(--dark3);*/
/*    font-weight: normal;*/
/*}*/
/*#invite-send{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding-bottom: 7rem;*/
/*    gap: 2rem;*/
/*}*/
/*#invite-send img{*/
/*    width: 5rem;*/
/*    height: 5rem;*/
/*}*/
/*#invite-send .title-wrap{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 0.5rem;*/
/*    padding-bottom: 2rem*/
/*}*/
/*#invite-send .title-wrap p{*/
/*    color: var(--D);*/
/*    font-size: 0.875rem;*/
/*}*/
/*#invite-send .title-wrap h2{*/
/*    font-size: 1.5rem;*/
/*}*/
/*#invite-send button{*/
/*    font-size: 0.98rem;*/
/*    padding-left: 3rem;*/
/*    padding-right: 3rem;*/
/*}*/

#add-friend{}
#add-friend #add-friend-info{
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-end;
}
#add-friend #add-friend-info .title-area{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#add-friend #add-friend-info .title-area h2{
    font-size: 1.5rem;
}
#add-friend #add-friend-info .title-area p{
    font-size: 0.875rem;
    color: var(--dark4);
    word-break: keep-all;
}
#add-friend #add-friend-info .input-box{}
#add-friend #add-friend-info button{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: bold;
    color: var(--D);
}
#add-friend #add-friend-info button span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--D);
    border-radius: 100rem;
}
#add-friend #add-friend-info button span img{
    width: 80%;
    height: 80%;
    transform: translateX(8%);
}


/*그룹*/
#group-invited{
    margin-bottom: 2rem;
}
#group-invited .title-area{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    background-color: white;
}
#group-invited .title-area h2{
    flex-grow: 1;
}
#group-invited .title-area .more{
    position: relative;
}
#group-invited .title-area .more .option-popup{
    display: none;
}
#group-invited .title-area .more:hover .option-popup{
    display:  block;
}
#group-invited .group-list{
    display: flex;
    flex-direction: column;
    /*background-color: var(--dark1);*/
    padding: 0 1rem;
    gap: 0.5rem;
}
#group-invited .group-list li{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--dark2);
}
#group-invited .group-list li img{

}
#group-invited .group-list li p{
    flex-grow: 1;
}
#group-invited .group-list li p span{
    font-size: 0.813rem;
    color: var(--dark2);
    margin-left: 0.5rem;
}
#group-invited .group-list li button{}
b.photo{
    width: 4rem;
    height: 4rem;
    border-radius: 200rem;
    background-color: var(--dark2);
    font-size: 0;
    display: inline-block;
}

/*모임 목록 groups*/

/*#groups{}*/
/*#groups-list{*/
/*    padding: 1.25rem 1rem;*/

/*}*/
/*.group-list{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*}*/
/*.group-list li{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*.group-list li a{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    padding: 1.25rem 1rem;*/
/*    border-radius: 1rem;*/
/*    border: 1px solid var(--dark2);*/
/*    gap: 0.625rem;*/
/*    align-items: center;*/
/*}*/
/*.group-list li a img.profile{}*/
/*.group-list li a strong{*/
/*    flex-grow: 1;*/
/*    font-size: 1.125rem;*/
/*    color: var(--dark6);*/
/*}*/
/*.group-list li a strong span{*/
/*    font-size: 0.75rem;*/
/*    color: var(--dark3);*/
/*    margin-left: 0.5rem;*/
/*}*/
/*.group-list li a .caret{}*/
/*#groups #group-invite-button{*/
/*    background-color: var(--theme-lighter);*/
/*    border: 1px solid var(--theme-light);*/
/*}*/
/*#groups #group-invite-button strong{*/
/*    color: var(--theme);*/
/*    font-size: 1rem;*/
/*}*/
/*.group-list button.accept{*/
/*    font-size: 0.75rem;*/
/*    color: white;*/
/*    background-color: var(--theme);*/
/*    padding: 0.5rem 1rem;*/
/*    border-radius: 0.3rem;*/
/*}*/
#groups section > div {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}
.group-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    padding: 1.5rem 1rem;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
}
.group-list li{
    border-radius: 1rem;
    border: 1px solid var(--dark2);
    height: fit-content;
}
.group-list li a{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.5rem 0.5rem;
    align-items: center;
    justify-content: center;
}
.group-list li a > img{
    width: 3rem;
    height: 3rem;
    border-radius: 10rem;
}
.group-list li a .title-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.group-list li a .title-area strong{
    text-align: center;
    word-break: keep-all;
}
.group-list li a .title-area p{
    text-align: center;
    color: var(--dark3);
}
.group-list li a .button-area{
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
}
.group-list li a .button-area button{
    width: 1.5rem;
    height: 1.5rem;
}
.group-list li a .button-area button img{
    width: 100%;
    height: 100%;
}
.group-list li a .button-area .cancel{}
.group-list li a .button-area .accept{}
#groups{}
#groups section {
    min-height: var(--viewHeight);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#groups #create-group-btn{
    width: 5rem;
    height: 5rem;
    border-radius: 10rem;
    background-color: var(--D);
    transition: all 0.3s;
    position: sticky;
    right: 0rem;
    transform: translateX(-1rem);
    bottom: 1rem;
    box-shadow: 0 0 10px rgba(209,71,71,0.15);
}
#group-invite-Received .group-list li a {
    cursor: default;
    padding-bottom: 1rem;
}


/* 모임 만들기 */
/*.group-create-step{*/
/*    min-height: var(--viewHeight);*/
/*}*/
/*.group-create-step .inner{*/
/*    flex-grow: 1;*/
/*    padding-bottom: 7rem;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 1rem;*/
/*}*/
/*#group-create-term .inner{*/
/*    justify-content: flex-start;*/
/*}*/
/*#group-create-term img{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*#group-create-term h2{*/
/*    padding: 0 1rem;*/
/*    font-size: 1.25rem;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*#group-create-term p{*/
/*    padding: 0 1rem;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*#group-create-term p.term{*/
/*    color: var(--dark4);*/
/*}*/
/*#group-create-term .checkbox-area{*/
/*    padding: 0 1rem;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*    box-sizing: border-box;*/
/*}*/
/*#group-create-term .checkbox-area label{*/
/*    font-size: 1rem;*/
/*}*/
/*.group-create-step .wrap{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    padding: 1.5rem;*/
/*    padding-bottom: 7rem;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1rem;*/
/*}*/
/*.group-create-step .wrap>img{*/
/*    width: 2.5rem;*/
/*    height: 2.5rem;*/
/*}*/
/*.group-create-step .wrap h3{*/
/*    font-size: 1.25rem;*/
/*}*/
/*.group-create-step .wrap p{*/
/*    color: var(--dark4);*/
/*}*/
/*#group-create-type{}*/
/*#group-create-type .type-wrap{*/
/*    display: grid;*/
/*    grid-template-columns: 1fr 1fr 1fr;*/
/*    gap: 0.625rem;*/
/*}*/
/*#group-create-type .type-wrap input{*/
/*    display: none;*/
/*}*/
/*#group-create-type .type-wrap input + label{*/
/*    background-color: var(--dark1);*/
/*    padding: 1rem 1.5rem;*/
/*    border-radius: 0.5rem;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    gap: 1.125rem;*/
/*    border: 1px solid var(--dark1);*/
/*    transition: all 0.2s;*/
/*}*/
/*#group-create-type .type-wrap input + label img{*/
/*    width: 2.5rem;*/
/*    height: 2.5rem;*/
/*}*/
/*#group-create-type .type-wrap input:checked + label{*/
/*    background-color: var(--theme-lighter);*/
/*    border: 1px solid var(--theme);*/
/*}*/
/*#group-create-type .type-wrap input:checked + label p{*/
/*    color: var(--theme);*/
/*}*/
/*#group-create-outro{}*/
/*#group-create-outro .inner{*/
/*    padding: 0 2rem 7rem;*/
/*    box-sizing: border-box;*/
/*}*/
/*#group-create-outro .inner p{*/
/*    text-align: center;*/
/*    margin-bottom: 2rem;*/
/*}*/

#group-create{}
#group-create .title-area{
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--dark1);
}
#group-create .title-area h2{
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
#group-create .input-area{
    width: 100%;
    box-sizing: border-box;
}
#group-create .input-area form{
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 5rem;
}
#group-create .input-area form .explain{
    color: var(--dark3);
    font-size: 0.875rem;
    padding: 0 0.5rem 1rem;
}
#group-create #input-cate{
    cursor: pointer;
}
#group-create #personnel-box{}
#group-create #personnel-box label{
    flex-grow: 1;
}
#group-create #personnel-box .button-area{
    display: flex;
    gap: 1rem;
}
#group-create #personnel-box .button-area button{
    width: 1.125rem;
    height: 1.125rem;
}
#group-create #personnel-box .button-area input{
    width: 3rem;
    text-align: center;
    font-weight: bold;
}
/*group home 그룹홈*/
#group-home-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem 1rem 3rem;
    border-bottom: 0.5rem solid var(--dark1);
}
#group-home-info img{
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 4rem;
    background-color: var(--dark1);
}
#group-home-info h2{
    font-size: 1.5rem;
}
#group-home-info p{}
#group-home-info #group-home-menu-button{
    position: relative;
}
#group-home-info #group-home-menu-button > p{
    font-size: 0.813rem;
    background-color: var(--dark1);
    border-radius: 0.3rem;
    color: var(--dark4);
    padding: 0.5rem 1rem;
}
#group-home-info #group-home-menu-button .option-popup{
    display: none;
    left: 0;
}
#group-home-info #group-home-menu-button .option-popup li button{
    text-align: left;
    padding-right: 2rem;
}
#group-home-info #group-home-menu-button:hover .option-popup{
    display: block;
}
/**/
#group-home-type{
    padding: 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 0.5rem solid var(--dark1);
}
#group-home-type h3{
    font-size: 1.25rem;
}
#group-home-type h3 span{
    color: var(--I);
}
#group-home-type > p{
    color: var(--dark4);
}
#group-home-type .bar-area{
    width: 100%;
    box-sizing: border-box;
}
#group-home-type .bar-area .bar{
    width: 100%;
    height: 0.5rem;
    display: flex;
    gap: 0;
    border-radius: 0.75rem;
    overflow: hidden;
}
#group-home-type .bar-area .bar div{
    background-color: red;
}
#group-home-type .bar-area .bar div:nth-of-type(1){background-color: var(--D) ; flex-grow: 1.2}
#group-home-type .bar-area .bar div:nth-of-type(2){background-color: var(--I); flex-grow: 4}
#group-home-type .bar-area .bar div:nth-of-type(3){background-color: var(--S); flex-grow: 1.2}
#group-home-type .bar-area .bar div:nth-of-type(4){background-color: var(--C); flex-grow: 2}
#group-home-type .bar-area .bar div:nth-of-type(5){background-color: var(--dark2); flex-grow: 0.8}
#group-home-type .bar-area .bar-label{
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}
#group-home-type .bar-area .bar-label p{
    font-size: 0.688rem;
    color: var(--dark4);
    white-space: nowrap;
}
#group-home-type .bar-area .bar-label p:before{
    content: '';
    display: inline-block;
    border-radius: 5rem;
    margin-right: 0.2rem;
    width: 0.5rem;
    height: 0.5rem;
}
#group-home-type .bar-area .bar-label p:nth-of-type(1):before{background-color: var(--D)}
#group-home-type .bar-area .bar-label p:nth-of-type(2):before{background-color: var(--I)}
#group-home-type .bar-area .bar-label p:nth-of-type(3):before{background-color: var(--S)}
#group-home-type .bar-area .bar-label p:nth-of-type(4):before{background-color: var(--C)}
#group-home-type .bar-area .bar-label p:nth-of-type(5):before{background-color: var(--dark2)}
#group-home-type .coupon-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1rem;
    margin: 1rem auto;
    background-color: var(--dark1);
    width: 80%;
    box-sizing: border-box;
}
#group-home-type .coupon-area img{
    width: 5rem;
    height: 5rem;
}
#group-home-type .coupon-area .text-area{
    text-align: center;
}
#group-home-type .coupon-area p{
    font-weight: bold;
    color: var(--theme);
}
#group-home-type .coupon-area span{
    color: var(--dark4);
    font-size: 0.875rem;
}
#group-home-type .coupon-area button{
    width: 75%;
    padding: 0.75rem 2rem;
}
/**/
#group-home-member{
    padding: 2rem 0 3rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}
#group-home-member h2{
    padding: 0 1rem;
}
#group-home-member .sort-wrap{
    width: 100%;
    box-sizing: border-box;
    overflow-x: scroll;
    padding-left: 1rem;
    display: flex;
    gap: 0.5rem;
}
#group-home-member .sort-wrap button{
    font-size: 0.813rem;
    background-color: var(--dark1);
    border-radius: 0.3rem;
    color: var(--dark4);
    padding: 0.5rem 1rem;
    white-space: nowrap;
}
#group-home-member .sort-wrap button.active{
    background-color: var(--dark3);
    color: white;
}
#group-home-member .sort-wrap button:last-child{
    margin-right: 1rem;
}
#group-home-member button{
    color: var(--dark3);
    font-size: 0.75rem;
    font-weight: lighter;
}

#group-home-member .friends-list{
    min-height: auto;
}
/*groupInvite 모임 초대*/
.member-select-section{
    padding: 2rem 1rem 10rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.member-select-section h2{
    font-size: 1rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    color: var(--theme);
    font-weight: normal;
}
.member-select-section .button-area{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--maxWidth);
    padding: 1rem;
    box-sizing: border-box;
}
.member-select{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.member-select h3{
    width: 100%;
    text-align: left;
}
.member-select input{
    display: none;
}
.member-select .member-select-list{
    width: 100%;
    box-sizing: border-box;
}
.member-select input + .member-select-list{
    display: flex;
    align-items: center;
}
.member-select input + .member-select-list:before{
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url(/resources/images/icon/checkbox-inactive.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
}
.member-select input:checked + .member-select-list:before{
    background-image: url("/resources/images/icon/checkbox-active.svg");
}
.member-select input + .member-select-list .wrap{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.member-select input + .member-select-list .wrap img{
    width: 3.5rem;
    height: 3.5rem;
}
.member-select input + .member-select-list .wrap .name-area{
    flex-grow: 1;
}
.member-select input + .member-select-list .wrap .name-area p{
    font-weight: bold;
}
.member-select input + .member-select-list .wrap .name-area .subtitle{
    font-size: 0.875rem;
}
.member-select input + .member-select-list .wrap .name-area .subtitle.d{color: var(--D)}
.member-select input + .member-select-list .wrap .name-area .subtitle.i{color: var(--I)}
.member-select input + .member-select-list .wrap .name-area .subtitle.s{color: var(--S)}
.member-select input + .member-select-list .wrap .name-area .subtitle.c{color: var(--C)}
/* about-disc DISC란? */
#about-disc{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-bottom: 3rem;
}
#about-disc img{
    width: 10rem;
    height: 10rem;
}
#about-disc h2{
    font-size: 1.25rem;
    color: var(--theme);
}
#about-disc p{}
#about-disc-types{
    padding: var(--sidePadding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#about-disc-types h2{
    font-size: 1.25rem;
    color: var(--theme);
}
#about-disc-types > p{}
#about-disc-types img{
    width: 100%;
    box-sizing: border-box;
}
#about-disc-types .wrap{}
#about-disc-types .wrap h3{}
#about-disc-types .wrap p{}
#about-disc-types .wrap:nth-of-type(1) h3{color: var(--D)}
#about-disc-types .wrap:nth-of-type(2) h3{color: var(--I)}
#about-disc-types .wrap:nth-of-type(3) h3{color: var(--S)}
#about-disc-types .wrap:nth-of-type(4) h3{color: var(--C)}
/*게시글 조회 post*/
#post{
    padding: 1rem 0;
    min-height: var(--viewHeight);
    display: flex;
    flex-direction: column;
    align-items: center;
}
#post .title-area{
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--dark2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}
#post .title-area h2{
    font-size: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}
#post .title-area p{
    display: flex;
    gap: 0.5rem;
    color: var(--dark3);
    font-weight: normal;
    font-size: 0.813rem;
}
#post .title-area p span{}
#post .content-area{
    padding: 2rem 1rem;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}
#post .content-area a{
    font-size: 0.875rem;
    color: var(--alert-blue);
}
#post .content-area img{
    object-fit: scale-down;
    max-width: var(--maxWidth);
    width: 100%;
    height: fit-content;
}
#post .button-area{
    margin: 0 auto;
    font-size: 0.813rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
#post  button{
    margin: 0 auto;
    font-size: 0.813rem;
    background-color: var(--dark1);
    color: var(--dark3);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}
#post .button-area .delete{
    background-color: var(--D-lighter);
    color: var(--D);
}

/*게시글 작성*/
#post-edit{
    width: 100%;
    max-width: var(--maxWidth);
    box-sizing: border-box;
    min-height: 40vh;
}
.ck-editor__editable {
    min-height: 40vh;
}
#post-edit-section {
    position: sticky !important;
    top: var(--headerHeight);
    max-height: var(--viewHeight);
    overflow-y: scroll;
    padding: 2rem 1rem;
    width: 100%;
    max-width: var(--maxWidth);
    box-sizing: border-box;
}
#post-edit-section .inner{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#post-edit-section .title-area{}
#post-edit-section .title-area span{
    color: var(--theme);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
#post-edit-section .title-area span img{
    width: 0.938rem;
    height: 0.938rem;
    rotate: -90deg;
}
#post-edit-section #post-title{
    font-size: 1.25rem;
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid var(--dark2);
}
#post-edit-section #post-title:focus{
    outline: none
}
#post-edit-info-form{
    display: none;
}


/*!*find Account findId findPw*!*/
/*.find-account-step{*/
/*    min-height: var(--viewHeight);*/
/*}*/
/*.find-account-step .inner{*/
/*    flex-grow: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    gap: 0.675rem;*/
/*    padding: 1rem 1.25rem 25vh;*/
/*    align-items: flex-end;*/
/*}*/
/*.find-account-step .inner h2{*/
/*    font-size: 1.25rem;*/
/*    width: 100%;*/
/*}*/
/*.find-account-step .inner p{*/
/*    color: var(--dark3);*/
/*    font-size: 0.875rem;*/
/*    margin-bottom: 1.25rem;*/
/*    width: 100%;*/
/*}*/
/*#find-id-verify-code{}*/
/*#find-id-complete .inner{*/
/*    align-items: center;*/
/*    width: 70%;*/
/*    margin: 0 auto;*/
/*}*/
/*#find-id-complete .inner img{*/
/*    width: 5rem;*/
/*    height: 5rem;*/
/*}*/
/*#find-id-complete .inner h3{*/
/*    text-align: center;*/
/*}*/
/*#find-id-complete .inner p{*/
/*    text-align: center;*/
/*}*/
/*#find-id-complete .inner button{}*/

/*.find-account-step .next-button{*/
/*    color: var(--theme);*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    font-weight: bold;*/
/*    padding: 1rem 0.5rem;*/
/*}*/
/*.find-account-step .next-button:after{*/
/*    content: url("/resources/images/icon/next-caret-bg.svg");*/
/*    width: 1.5rem;*/
/*    height: 1.5rem;*/
/*}*/


/*findId 아이디 찾기*/
#find-id{}
#find-id .title-area{
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--dark1);
}
#find-id .title-area h2{
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
#find-id .title-area p{
    color: var(--dark4);
}
#find-id .input-area{
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 5rem;
}
#find-id .input-area .input-box{

}
#find-id #find-id-button{
    padding-left: 1rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--theme);
    color: white;
    font-weight: bold;
    transition: all 0.3s;
}
#find-id #find-id-button:disabled{
    background-color: var(--dark2);
}
/*비밀번호 찾기 find-pw findPw*/
#find-pw{}
#find-pw .title-area{
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--dark1);

}
#find-pw .title-area h2{
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
#find-pw .title-area p{
    color: var(--dark4);
}
#find-pw .input-area{
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;

}
#find-pw #input-area-01{}
#find-pw #input-area-02{
    padding-bottom: 5rem;
    display: none;
}
#find-pw #request-verify-code{
    display: block;
    width: fit-content;
    box-sizing: border-box;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--theme-lighter);
    color: vaR(--theme);
    font-weight: bold;
}
#find-pw #find-pw-button{
    padding-left: 1rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--theme);
    color: white;
    font-weight: bold;
}
/*비밀번호 확인*/
/*#password-check{*/
/*    padding: var(--sidePadding);*/
/*    min-height: var(--viewHeight);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/
/*#password-check .inner{*/
/*    flex-grow: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    gap: 1rem;*/
/*    padding: var(--sidePadding);*/
/*    padding-bottom: 5rem;*/
/*    min-height: 500px;*/
/*}*/
/*#password-check .inner img{*/
/*    width: 5rem;*/
/*    height: 5rem;*/
/*}*/
/*#password-check .inner h2{*/
/*    font-size: 1.25rem;*/
/*    margin-bottom: 0.5rem;*/
/*}*/
/*#password-check .inner p{*/
/*    font-size: 0.875rem;*/
/*    color: var(--dark4);*/
/*}*/
/*#password-check .inner input{}*/
/*#password-check .button-area{*/
/*    padding: 1.25rem 0;*/
/*}*/
/*#password-check .button-area .button03{}*/

#password-check{}
.change-password{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-height: var(--viewHeight);
}
.change-password form{
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex-grow: 1;
}
.change-password form .title-area{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.change-password form .title-area h2{
    font-size: 1.25rem;
    word-break: keep-all;
}
.change-password form .title-area p{
    color: var(--dark3);
}
.change-password form .input-area{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.change-password form .input-area .input-box.black{
    background-color: var(--dark6);
}
.change-password form .input-area .input-box.black label{
    color: white;
    font-weight: normal;
}
.change-password form .input-area .input-box.black input{
    color: white;
}
.change-password form .input-area .input-box.black input::placeholder{color: rgba(255,255,255,0.4)}
.change-password #next-button{
    width: 5rem;
    height: 5rem;
    border-radius: 10rem;
    background-color: var(--theme);
    transition: all 0.3s;
    position: sticky;
    right: 1rem;
    bottom: 1rem;
}
.change-password #next-button img{
    width: 60%;
    height: 60%;
}
#password-check #next-button{background-color: var(--dark6)}

/*비밀번호 변경*/
/*#change-password{*/
/*    padding: var(--sidePadding);*/
/*    min-height: var(--viewHeight);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/
/*#change-password .inner{*/
/*    flex-grow: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    gap: 1rem;*/
/*    padding: var(--sidePadding);*/
/*    padding-bottom: 5rem;*/
/*    min-height: 500px;*/
/*}*/
/*#change-password .inner img{*/
/*    width: 2.5rem;*/
/*    height: 2.5rem;*/
/*}*/
/*#change-password .inner .title-area{}*/
/*#change-password .inner .title-area h2{*/
/*    font-size: 1.25rem;*/
/*    margin-bottom: 0.5rem;*/
/*}*/
/*#change-password .inner .title-area p{*/
/*    font-size: 0.875rem;*/
/*    color: var(--dark4);*/
/*    margin-bottom: 1rem;*/
/*}*/
/*#change-password .inner input{*/
/*    margin-bottom: 0.75rem;*/
/*}*/
/*#change-password .button-area{*/
/*    padding: 1.25rem 0;*/
/*}*/
/*#change-password .button-area button{*/
/*    margin: 0;*/
/*}*/

/*invitation*/
#invitation section{
    min-height: var(--viewHeight);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 7.5vh;
    gap: 2rem;
    min-height: 0;
}
#invitation section img{
    width: 40%;
    object-fit: contain;
}
#invitation section .title-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}
#invitation section .title-area h2{
    font-size: 1.5rem;
}
#invitation section .title-area h2 span{
    color: var(--D);
}
#invitation section .title-area p{
    color: var(--dark3);
    font-size: 0.875rem;
    width: 80%;
    word-break: keep-all;
}
#invitation .button-area{
    width: 45%;
    box-sizing: border-box;
    max-width: var(--maxWidth);
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
#invitation .button-area a{
    padding: 1rem 1.5rem;
    background-color: var(--dark1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    width: 100%;
    text-align: center;

}
#invitation .button-area a:nth-of-type(1){
    background-color: var(--D);
    color: white;
    font-weight: bold;
}
#invitation .button-area a:nth-of-type(2){
    color: var(--dark4);
}
/*payment store 스토어*/
.my-point-box{
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    margin-bottom: 1rem;
}
.my-point-box .my-point{
    background-color: var(--theme-lighter);
    border: 1px solid var(--theme-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-radius: 1rem;
}
.my-point-box .my-point p{
    font-size: 0.875rem;
    color: var(--theme-dark);
}
.my-point-box .my-point strong{
    color: var(--theme);
}
.payment-info{
    padding: 2rem 1rem;
    font-size: 0.75rem;
    color: var(--dark3);
}
#store{}
#store section{
    margin-bottom: 2rem;
}
#store section h4{
    padding-left: 1rem;
    margin-bottom: 1rem;
}
#store section .product-list{
    padding: var(--sidePadding);
    display: flex;
    gap: 1rem;
    width : 100%;
    box-sizing: border-box;
    overflow-x: scroll;
}
#store section .product{
    --width : 175px;
    width: var(--width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
}
#store section .product img{
    width: var(--width);
    height: var(--width);
    border-radius: 1rem;
}
#store section .product .name-area{}
#store section .product .name-area p{
    color: var(--dark5);
    margin-bottom: 0.1rem;
}
#store section .product .name-area strong{
    font-size: 0.938rem;
    color: var(--theme);
}

/*myPayment*/
#myPayment{}
#myPayment section{
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 60vh;
}
#myPayment section .unopened{
    width: 100%;
    background-color: var(--dark1);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 0 1.5rem;
    box-sizing: border-box;
    gap: 2rem;
}
#myPayment section .unopened .wrap{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
}
#myPayment section .unopened .wrap img{
    width: 6rem;
    height: 6rem;
}
#myPayment section .unopened .wrap p{
    font-weight: bold;
    color: var(--dark5);
}
#myPayment section .unopened button.button01{
    padding: 0.75rem 2rem;
    width: 50%;
    background-color: var(--dark6);
}
#myPayment .payment-info{
    margin-bottom: 8rem;
}
/*myTicket*/
#myTicket{}
#myTicket .ticket-list{
    padding: 1.25rem 1rem;
}
#myTicket .ticket-list ul{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
#myTicket .ticket-list ul .ticket{
    width: 100%;
    box-sizing: border-box;
    border-radius: 1rem;
    border: 1px solid var(--dark1);
    box-shadow: 0 0 15px rgba(0,0,0,0.06);
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

#myTicket .ticket-list ul .ticket .left-area{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.333rem;
}
#myTicket .ticket-list ul .ticket .left-area .ticket-name{
    font-weight: bold;
}
#myTicket .ticket-list ul .ticket .left-area .expiry-date{
    font-size: 0.75rem;
    color: var(--dark3);
}
#myTicket .ticket-list ul .ticket .left-area .publisher{
    font-size: 0.75rem;
    color: var(--dark3);
}
#myTicket .ticket-list ul .ticket .use{
    padding: 1rem;
    color: var(--theme);
    font-size: 0.875rem;
    white-space: nowrap;
    height: 100%;
    display: inline-block;
}
/*historyPortal*/
#history-portal{}
#history-portal section{
    padding: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--viewHeight);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
#history-portal section a{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.625rem;
    background-color: var(--dark1);
    padding: 1.25rem;
    justify-content: space-between;
}
#history-portal section a p{
    color: var(--dark5);
}
#history-portal section a img{}


/*usage-histroy 각종 이용내역*/
.usage-history{
    padding: 1rem 1.25rem;
}
.usage-history ul{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 50vh;
}
.usage-history ul li{
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.usage-history ul li .left-area{
    flex-grow: 1;
}
.usage-history ul li .left-area .name{
    margin-bottom: 0.333rem;
}
.usage-history ul li .left-area .bottom-area{
    display: flex;
    align-items: center;
    gap: 0.333rem;
    font-size: 0.813rem;
    color: var(--dark3);
}
.usage-history ul li .left-area .bottom-area .date{}
.usage-history ul li .left-area .bottom-area .usage{}
.usage-history ul li .purchase-cancel{
    font-size: 0.813rem;
    background-color: var(--dark1);
    border-radius: 0.3rem;
    color: var(--dark4);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
/*검사기록*/
#report-history{}
#report-history .top-area{
    padding: 1rem 1rem;
}
#report-history .input-box, #report-history .input-box *{
    cursor: pointer;
}
#report-history #profile-card-list{
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
#report-history #profile-card-list h2{
    padding: 1rem 0.5rem;
    color: var(--dark5);
    font-size: 1.125rem;
}

/*회원가입 완료 페이지*/
#register-complete{
    background-image: url("/resources/images/icon/chick-flat.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 120%;

}
#register-complete section{
    width: 100%;
    height: 100%;
    min-height: 90vh;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#register-complete section .title-area{
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 2rem;
}
#register-complete section .title-area h1{
    font-size: 2rem;
    color: var(--theme);
}
#register-complete section .go{
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    transition: background-color 0.3s, border 0.3s;
}
#register-complete section .go * {
    cursor: pointer;
}
#register-complete section .go img{
    width: 2rem;
    height: 2rem;
}
#register-complete section .go .right-area{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#register-complete section .go .right-area h2{
    font-size: 1.125rem;
}
#register-complete section .go .right-area p{
    font-size: 0.938rem;
}
#register-complete #go-mission{
    background-color: var(--D-lighter);
    border: 1px solid var(--D);
}
#register-complete #go-mission:hover{
    background-color: var(--D-light);
    border: 1px solid transparent;
}
#register-complete #go-mission p{
    color: #9C6969;
}
#register-complete #go-home{
    background-color: var(--I-lighter);
    border: 1px solid var(--I);
}
#register-complete #go-home:hover{
    background-color: var(--I-light);
    border: 1px solid transparent;
}
#register-complete #go-home p {
    color: #8E805C;
}

/*introduce 소개 페이지*/
#introduce{}
#introduce #introduce-header{
    padding: 1.25rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: -1px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 100%);
}
#introduce #introduce-header img{
    width: 6rem;
    object-fit: contain;
    cursor: pointer;
}
#introduce #introduce-header .right-area{
    display: flex;
    gap: 1.25rem;
    align-items: center;
}
#introduce #introduce-header #go-login{
    font-size: 0.875rem;
    color: var(--theme);
}
#introduce #introduce-header #go-register{
    font-size: 0.875rem;
    color: white;
    background-color: var(--theme);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.333rem;
}
#introduce section{
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#introduce-01{
    background-image: url("/resources/images/illust/illust04.png");
    background-position: center 0;
    background-repeat: no-repeat;
    padding: 5rem 2rem;
    gap: 3rem;
}
#introduce-01 h2{
    font-size: 1.75rem;
    text-align: center;
}
#introduce-01 p{
    text-align: center;
    text-shadow: 0 0 10px white;
}
#introduce-01 a{
    display: block;
    color: white;
    background-color: var(--dark6);
    padding: 0.75rem 1.5rem;
    border-radius: 10rem;
    font-size: 0.875rem;
}

#introduce-02{
    gap: 2rem;
    padding: 4rem 1.5rem;
    background-color: #f6f6f6;
}
#introduce-02 .title-area{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#introduce-02 .title-area p{
    color: var(--D);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#introduce-02 .title-area p img{
    width: 1.5rem;
    height: 1.5rem;
}
#introduce-02 .title-area h1{
    font-size: 1.25rem;
}
#introduce-02 .explain{
    color: var(--dark4);
}
#introduce-02 #stick-graph{
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    display: flex;
    gap: 1rem;
    background-color: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    align-items: flex-start;
}
#introduce-02 #stick-graph div{
    font-size: 0;
    height: 1rem;
    border-radius: 10rem;
    transition: all 0.5s;
    width: 70px;
    transition-timing-function: ease-in-out;
}
#introduce-02 #stick-graph #stick-graph-d{background-color: var(--D)}
#introduce-02 #stick-graph #stick-graph-i{background-color: var(--I)}
#introduce-02 #stick-graph #stick-graph-s{background-color: var(--S)}
#introduce-02 #stick-graph #stick-graph-c{background-color: var(--C)}
#introduce-02 #type-summ{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#introduce-02 #type-summ .box{
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    display: flex;
    gap: 1rem;
}
#introduce-02 #type-summ .box img{
    width: 2.75rem;
    height: 2.75rem;
}
#introduce-02 #type-summ .box .right-area{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#introduce-02 #type-summ .box:nth-of-type(1) .right-area strong{color: var(--D)}
#introduce-02 #type-summ .box:nth-of-type(2) .right-area strong{color: var(--I)}
#introduce-02 #type-summ .box:nth-of-type(3) .right-area strong{color: var(--S)}
#introduce-02 #type-summ .box:nth-of-type(4) .right-area strong{color: var(--C)}
#introduce-02 #type-summ .box .right-area p{
    font-size: 0.875rem;
    color: var(--dark4);
}

#introduce-03{
    background-image: url("/resources/images/etc/introduce/thinking.svg");
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center 110%;
    padding: 15vh 2rem;
    gap: 3rem;
}
#introduce-03 .text-area{
    width: 100;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#introduce-03 .text-area h1{
    font-size: 1.375rem;
    color: var(--theme);
    white-space: nowrap;
}
#introduce-03 .text-area strong{
    font-size: 2rem;
    white-space: nowrap;
}
/*#introduce-03 .text-area strong.on{*/
/*    animation-name: introduceTitleAnimation;*/
/*    animation-fill-mode: forwards;*/
/*    animation-duration: 1s;*/
/*    animation-iteration-count: infinite;*/
/*}*/
@keyframes introduceTitleAnimation {
    0%{
        scale: 0.8;
        opacity: 0;
    }
    99%{
        scale: 1;
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
#introduce-03 .text-area strong span{}
#introduce-03 > p{
    font-size: 0.813rem;
    color: var(--dark2);
    text-align: center;
}

#introduce-outro{
    min-height: 70vh !important;
    background-color: var(--theme-lighter);
    text-align: center;
    gap: 3rem;
    padding: 3rem 3rem;
    justify-content: center;
}
#introduce-outro h1{
    font-size: 1.5rem;
}
#introduce-outro p{
    color: var(--theme);
    word-break: keep-all;
}
#introduce-outro .button-area{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}
#introduce-outro .button-area a{
    display: flex;
    padding: 1.5rem;
    background-color: white;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    transition: background-color 0.3s;
}
#introduce-outro .button-area a:nth-of-type(1){
    background-color: var(--theme);
    color: white;
    font-weight: bold;
}
#introduce-outro .button-area a:nth-of-type(1):hover{
    background-color: var(--theme-dark);
}
#introduce-outro .button-area a:nth-of-type(2){
    color: var(--theme);
    border: 1px solid var(--theme-light);
}
#introduce-outro .button-area a:nth-of-type(2):hover{
    background-color: var(--theme-light);
}

/*testMain*/
.test-main{}
.test-main .test-select{
    width: 100%;
    box-sizing: border-box;
    min-height: 80vh;
    padding: 2rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}
.test-main .test-select .title-area{
    width: 50%;
    word-break: keep-all;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
}
.test-main .test-select.on .title-area{
    animation-name: testMainTextAppear;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes testMainTextAppear {
    0%{
        transform: translateY(10%);
        opacity: 0.1;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}
.test-main .test-select .title-area span{
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.test-main .test-select .title-area span:after{
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    display: block;
    rotate: 45deg;
}
#ctest-main .test-select .title-area span{color: var(--casual)}
#ptest-main .test-select .title-area span{color: var(--pro)}
#ctest-main .test-select .title-area span:after{
    border-right: 1px solid var(--casual);
    border-top: 1px solid var(--casual);}
#ptest-main .test-select .title-area span:after{
    border-right: 1px solid var(--pro);
    border-top: 1px solid var(--pro);
}
.test-main .test-select .title-area span img{
    rotate: -90deg;
    width: 0.813rem;
    height: 0.813rem;
}
.test-main .test-select .title-area h2{
    font-size: 2rem;
    cursor: pointer;
    word-break: keep-all;
}
.test-main .test-select .test-description{
    font-size: 0.938rem;
    color: var(--dark6);
    z-index: 10;
    /*mix-blend-mode: difference;*/
    opacity: 0;
}
.test-main .test-select.on .test-description{
    animation-name: testMainTextAppear;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
.test-main .test-select #test-rep{
    position: absolute;
    width: 90%;
    object-fit: contain;
    bottom: -50%;
    left: -10%;
    z-index: 0;
    opacity: 0.1;
    transition: all 0.6s;
}
.test-main .test-select.on #test-rep{
    animation-name: testRepAppear;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes testRepAppear {
    0%{
        bottom: -50%;
        left: -10%;
        opacity: 0.2;
    }
    100%{
        bottom: -6%;
        left: -10%;
        opacity: 0.2;
    }
}
.test-main .test-select #test-start-btn{
    position: absolute;
    bottom: 1.5rem;
    right: 1rem;
    border-radius: 10rem;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    color: white;
    gap: 1rem;
    font-weight: bold;
    font-size: 1.125rem;
    width: fit-content;
    transition: all 0.3s;
    justify-content: flex-end;
}
#ctest-main #test-start-btn{background-color: var(--casual) ; box-shadow: 0 0 15px rgba(215, 106, 45, 0.3);}
#ptest-main #test-start-btn{background-color: var(--pro) ; box-shadow: 0 0 15px rgba(107, 88, 152, 0.3);}
.test-main .test-select #test-start-btn img{
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    animation-name: test-select-btn;
    animation-iteration-count: infinite;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
}
@keyframes test-select-btn {
    0%{
        transform: translateX(0%);
    }
    15%{
        transform: translateX(20%);
    }
    30%{
        transform: translateX(0%);
    }
    45%{
        transform: translateX(20%);
    }
    60%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
    }
}

.test-inform{
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 5rem 1rem;
}
#ctest-inform{background-color: #FFF9F5}
#ptest-inform{background-color: #F8F5FF}
.test-inform h2{
    font-size: 1.125rem;
    width: 100%;
}
.test-inform p{
    color: var(--dark6);
}
.test-inform figure{
    width: 100%;
    box-sizing: border-box;
}
.test-inform figure img{
    width: 100%;
    max-height: 30vh;
    object-fit: cover;
    border-radius: 0.625rem;
}
#ptest-main .confirm-modal .confirm-button{
    background-color: var(--pro);
}
#ptest-main #ptest-select-modal p.on{
    color: var(--pro);
    background-color: var(--pro-lighter);
}