@charset "utf-8";
/* version 0.0.02 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
}

/*빌드시 삭제*/
i{
    display: block;
    width: 100%;
    background-color: #f1f1f1;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    padding: 0.625rem 0.3rem;
    box-sizing: border-box;
}

button{cursor: pointer;}
a{cursor: pointer;}
html, body{
    word-break: break-all;
}
.type-D{color: var(--D) !important}
.type-I{color: var(--I) !important}
.type-S{color: var(--S) !important}
.type-C{color: var(--C) !important}
/*varibales.css로 전역변수관리*/

/*body::-webkit-scrollbar{display: none;}*/
/*:root{*/
/*    color:#202020;*/

/*    --D : #EB5B5B;*/
/*    --I : #EEB72B;*/
/*    --S : #37A155;*/
/*    --C : #4559A8;*/

/*    --D-light : #FFDFDF;*/
/*    --I-light : #FFF1CC;*/
/*    --S-light : #D7F4DF;*/
/*    --C-light : #DAE1FF;*/

/*    --D-lighter : #FDEFEF;*/
/*    --I-lighter : #FEF8E8;*/
/*    --S-lighter : #EBF6EE;*/
/*    --C-lighter : #EDEFF7;*/

/*    --C-lighter01 : #DAEAF5;*/
/*    --C-lighter02 : #DBE6F8;*/

/*    --D-dark : #D14848;*/
/*    --I-dark : #C59928;*/
/*    --S-dark : #246737;*/
/*    --C-dark : #232F5F;*/

/*    --D-bg : #FFF2F2;*/

/*    --theme : #F67E3B;*/
/*    --theme-light : #FFD0B6;*/
/*    --theme-lighter : #FFF7F2 ;*/
/*    --theme-dark : #D76A2D;*/

/*    --alert-red : #F94A4A;*/
/*    --alert-blue : #30B4FF;*/
/*    --sub : #222F63;*/

/*    --dark1 : #f1f1f1;*/
/*    --dark2 : #cccccc;*/
/*    --dark3 : #999999;*/
/*    --dark4 : #777777;*/
/*    --dark5 : #555555;*/
/*    --dark6 : #222222;*/


/*    --userType : var(--theme);*/
/*    --userType-light : var(--theme-light);*/
/*    --userType-lighter : var(--theme-lighter);*/
/*    --userType-dark : var(--theme-dark);*/

/*    --maxWidth : 500px;*/
/*    --headerHeight : 60px;*/
/*    --viewHeight : calc(100vh - var(--headerHeight));*/
/*    --sidePadding : 0 1rem;*/

/*    font-family: 'Noto Sans KR', sans-serif;*/
/*    color: var(--dark6);*/
/*    -webkit-tap-highlight-color: rgba(255,255,255,0);*/

/*    --toastHeight1 : calc( var(--headerHeight) + 0.5rem );*/
/*    --toastHeight2 : 1rem*/
/*}*/
/*::selection{*/
/*    background-color: var(--theme);*/
/*    color: white;*/
/*}*/
/*html{*/
/*    background-color: #EDF0F3 ;*/
/*}*/
/*body{*/
/*    background-color: white;*/
/*    width: 100%;*/
/*    max-width: var(--maxWidth);*/
/*    margin: 0 auto;*/
/*    min-height: 100vh;*/
/*    box-sizing: border-box;*/
/*    position: relative;*/
/*    line-height: 1.5;*/
/*}*/
/*body *::-webkit-scrollbar{display: none;}*/
.prevent-scroll{overflow: hidden;}

/* components */

section{
    width: 100%;
    box-sizing: border-box;
}
figcaption{
    font-size: 0.75rem;
    color: var(--dark2);
    font-style: italic;
}




.asterisk{
    color: orangered;
    font-weight: bold;
}

/*자동완성 색상변경 삭제*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected
{
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* step */
.step{
    min-height: var(--viewHeight);
    height: 100%;
    display: none;
    transition: all 0.2s;
    width: 100%;
}
.step.prev{
    opacity: 0;
    z-index: -99;
    transform: translateX(-100%);
}
.step.next{
    opacity: 0;
    z-index: -99;
    transform: translateX(100%);
}
.step.on{
    display: flex;
    flex-direction: column;
    opacity: 1;
    z-index: 1;
    transform: translateX(0);
}
button{cursor: pointer}
/* button */
.button01{
    display: inline-block;
    background-color: var(--theme);
    text-align: center;
    padding: 1rem 2rem;
    width: fit-content;
    border-radius: 6rem;
    color: white;
    font-size: 0.813rem;
    transition: background-color 0.3s;
}
.button01:active{
    background-color: var(--theme-dark);
}
.button01[bg=white]{
    background-color: white;
    color: var(--depth3);
    border: 1px solid var(--bg3);
}
.button01[bgr=white]:active{background-color: var(--bg1)}
.button02{
    background-color: var(--theme);
    font-size: 0.75rem;
    border-radius: 0.5rem;
    color: white;
    padding: 0.5rem 0.75rem;
}
.button03{
    background-color: var(--theme);
    height: 4rem;
    width: 100%;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s;
    cursor: pointer;
}
.button03:active{
    background-color: var(--theme-dark);
}
.button03[bg=f1]{
    background-color: var(--bg1);
    color: var(--depth2);
    font-weight: normal;
}
.button03[bg=f1]:active{background-color: var(--bg3)}
.button03[bg=userType]:active{background-color: var(--userType-dark)}
.button04{
    color: var(--theme);
    font-size: 0.75rem;
    border: 1px solid var(--theme);
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
}
.button05{
    background-color: var(--theme);
    height: 3.75rem;
    border-radius: 0.625rem;
    width: 48%;
    color: white;
    font-weight: bold;
    transition: all 0.3s;
}
.button05:active{
    background-color: var(--theme-dark);
}
.button05[color=white]{
    background-color: white;
    color: var(--dark3);
    font-weight: normal;
    border: 1px solid var(--dark1);
}


.button12{
    width: 100%;
    box-sizing: border-box;
    border-radius: 1rem;
    background-color: var(--dark1);
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-around;
}
.button12 button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.button12 > span{
    align-self: center;
    color: var(--bg3);
    cursor: default;
}
.button12 button img{
    width: 20px;
    height: 20px;
    display: block;
    padding-bottom: 1rem;
}
.button12 button span{
    font-size: 0.875rem;
    color: var(--depth2);
}
.button12 button:not(:last-child):after {
    content: '';
    display: block;
    width: 1px;
    background-color: var(--bg3);
    height: 40%;
}

/* input */
.input01{
    width: 100%;
    height: 4rem;
    background-color: white;
    border-radius: 0.625rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
    outline: 1px solid var(--dark2);
}
.input01:focus{
    outline: 2px solid var(--theme);
}
.input01::placeholder{
    font-size: 0.875rem;
    color: var(--dark3);
}
.input01:read-only{
    background-color: var(--dark1);
    border: 1px solid var(--dark2);
    color: var(--dark4);
    outline: none;
}

.input-box{
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    background-color: var(--dark1);
    padding-left: 1rem;
    padding-right: 1.25rem;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.4s;
    outline: none;
    border: 1px solid transparent;
}
.input-box.invalid{
    background-color: var(--D-lighter);
}
.input-box.invalid input{
    color: var(--D);
}
.input-box.focus{
    background-color: var(--C-lighter);
    border: 1px solid var(--C);
}
.input-box.hide{
    display: none;
}
.input-box.appear{
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.input-box.disable{
    filter: brightness(0.9);
}
.input-box.disable.focus{
    background-color: var(--dark1);
    border: 1px solid var(--dark1);
}
.input-box .icon{
    width: 1.5rem;
    height: 1.5rem;
}
.input-box label{
    font-weight: bold;
    white-space: nowrap;
}
.input-box input{
    flex-grow: 1;
    text-align: right;
    outline: none;
    font-size: 1.093rem;
    min-width: 0;
    color: var(--dark5);
}
.input-box input::placeholder{
    color: rgba(100,100,100,0.5);
    font-size: 0.938rem
}
.input-box .password-peek{
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    margin-left: 0.5rem;
}
.input-box .erase{
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    margin-left: 0.5rem;
}
/*text-box*/
.text-box{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    background-color: var(--dark1);
    padding-left: 1rem;
    padding-right: 1.25rem;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.4s;
    outline: none;
    border: 1px solid transparent;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.text-box.appear{
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.text-box.invalid{
    background-color: var(--D-lighter);
}
.text-box .top-area{
    display: flex;
    gap: 0.5rem;
}
.text-box .top-area label{
    font-weight: bold;
    white-space: nowrap;
}
.text-box .top-area img{
    width: 1.5rem;
    height: 1.5rem;
}
.text-box .bottom-area{
}
.text-box textarea{
    border: none;
    background-color: transparent;
    outline: none;
    width: 100%;
    resize: none;
    font-size: 1rem;
    line-height: 1.5;
    font-family: "Noto Sans KR";
    height: auto;
    min-height: 5px;
    display: block;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.text-box textarea::placeholder{
    color: var(--dark3);
}
/* checkbox */
.checkbox01{display: none}
.checkbox01 + label{
    font-size: 1rem;
    color: var(--depth2);
    width: fit-content;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.checkbox01 + label::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;
}
.checkbox01:checked + label::before{
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url(/resources/images/icon/checkbox-active.svg);
    background-size: 100% 100%;
    margin-right: 0.5rem;
}

.checkbox02{display: none}
.checkbox02 + label{
    box-sizing: border-box;
    background-color: var(--dark1);
    color: var(--dark5);
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    margin-bottom: 0.3rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.checkbox02 + label:active{
    transform: scale(var(--scale1));
}
.checkbox02 + label:before{
    content: '';
    display: inline-block;
    min-width: 1.25rem;
    height: 1.25rem;
    background-image: url(/resources/images/icon/checkbox-inactive.svg);
    background-size: 100% 100%;
    box-sizing: border-box;
}
.checkbox02:checked + label{
    /*background-color: var(--theme-lighter);*/
    background-color: #ffefe4;
    color: var(--theme);
}
.checkbox02:checked + label:before{
    background-image: url(/resources/images/icon/checkbox-active.svg);
}
.checkbox03{
    display: none;
}
.checkbox03 + label{
    background-color: var(--bg1);
    padding: 1rem;
    min-width: 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.7rem;
    flex-grow: 1;
    cursor: pointer;
}
.checkbox03:checked + label {
    background-color: var(--theme-lighter);
    color: var(--theme);
}
/*textarea*/
.textarea01{
    width: 100%;
    height: 4rem;
    background-color: white;
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    min-height: 5rem;
    /*outline: 1px solid var(--dark2);*/
    font-size: 1rem;
    border: 1px solid var(--dark2);
    outline-color: var(--theme);
    resize: none;
    font-family: "Noto Sans KR";
}
.textarea01:focus{
    /*outline: 1px solid var(--theme);*/
}
.textarea01::placeholder{
    font-size: 0.875rem;
    color: var(--dark3);
    font-weight: normal;
}
.textarea01:read-only{
    background-color: var(--dark1);
    border: 1px solid var(--dark2);
    color: var(--dark4);
    outline: none;
}
/*textbox*/
.textbox01{
    background-color: var(--bg1);
    border-radius: 1rem;
    padding: 1.25rem;
    font-size: 0.875rem;
    height: 13rem;
    overflow-y: scroll;
    box-sizing: border-box;
}

/*select*/
.select01{
    background-color: var(--theme-lighter);
    display: flex;
    align-items: center;
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    gap: 1rem;
    cursor : pointer;
}
.select01 p{
    font-weight: 0.813rem;
    word-break: keep-all;
    white-space: nowrap;
}
.select01 label{
    flex-grow: 1;
    text-align: right;
    color: var(--theme);
    outline: none;
    cursor: default;
    font-weight: normal;
    word-break: keep-all;
    cursor : pointer;
}
.select01 label span{
    font-size: 0.75rem;
}
.select01 img{
    width: 1.5rem;
    height: 1.5rem;

}

/*modal*/
.modal01{
    background-color: white;
    max-width: calc(var(--maxWidth)*0.9);
    width: 85%;
    max-height: 60vh;
    overflow-y: scroll;
    border-radius: 1rem;
    padding: 1rem 0.625rem;
}
.modal01 p{
    padding: 1.25rem;
    cursor: pointer;
    border-radius: 1rem;
}
.modal01 p.on{
    background-color: var(--theme-lighter);
    color: var(--theme);
}
.modal01 p span{
    font-size: 0.75rem;
    color: var(--depth3);
    white-space: nowrap;
    word-break: keep-all;
}
.modal01 p:hover{
    background-color: var(--theme-lighter);
    color: var(--theme);
}
.modal01 p:active{
    background-color: var(--theme-lighter);
    color: var(--theme);
}

@keyframes loadingAnimation {
    0%{transform: translateY(0%)}
    50%{transform: translateY(-100%)}
    100%{transform: translateY(0%)}
}

/*popup*/
.option-popup{
    background-color: rgba(0,0,0,0.75);
    border-radius: 0.625rem;
    padding: 0.625rem 0;
    list-style: none;
    position: absolute;
    right: 0;
    z-index: 8000;
    width: fit-content;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}
.option-popup li{
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.option-popup li button{
    padding: 0.625rem 1rem;
    color: white;
    font-weight: normal;
    font-size: 0.875rem;
    text-align: right;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
}
.option-popup li button.red{
    color: var(--alert-red);
}

/*confirm Modal*/
.confirm-modal{
}
.confirm-modal .inner{
    width: 85%;
    margin: 0 auto;
    background-color: white;
    border-radius: 1rem;
    padding: 2rem 1.5rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}
.confirm-modal .inner .title-area{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.confirm-modal .inner strong{
    font-size: 1.093rem;
}
.confirm-modal .inner p{
    color: var(--dark5);
    font-size: 0.938rem;
}
.confirm-modal .inner .button-area{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
    gap: 0.5rem;
}
.confirm-modal .inner .button-area button{
    font-size: 0.938rem;
    padding: 0.75rem 2.5rem;
    border-radius: 5rem;
}
.confirm-modal .inner .button-area button.cancel-button{
    background-color: var(--dark1);
    color: var(--dark3);
}
.confirm-modal .inner .button-area button.confirm-button{
    background-color: var(--theme);
    color: white;
}




.tab-header{
    width: 100%;
    max-width: var(--maxWidth);
    overflow-x: scroll;
    box-sizing: border-box;
    padding: 0.5rem 1rem 1rem;
    display: flex;
    gap: 1.5rem;
    background-color: white;
    border-bottom: 1px solid var(--dark1);
    flex-wrap: nowrap;
}
.tab-header button{
    font-weight: bold;
    color: var(--dark2);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.125rem;
    white-space: nowrap;
}
.tab-header button.on{
    color: var(--dark6);
}
.tab-header button .badge{
    width: 1rem;
    height: 1rem;
    background-color: var(--theme);
    color: white;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.625rem;
    flex-direction: column;
}




/*colors*/
[bg=userType] {background-color: var(--userType);}
[bg=uerTypeLight] {background-color: var(--userType-light);}
[bg=uerTypeLighter] {background-color: var(--userType-lighter);}
[bg=uerTypeDark] {background-color: var(--userType-dark);}
[bg=typeD] {background-color: var(--D);}
[bg=typeI] {background-color: var(--I);}
[bg=typeS] {background-color: var(--S);}
[bg=typeC] {background-color: var(--C);}
[bg=theme] {background-color: var(--theme);}
[bg=themeLight] {background-color: var(--theme-light);}
[bg=white] {background-color: white;}

[color=userType] {color: var(--userType);}
[color=uerTypeLight] {color: var(--userType-light);}
[color=uerTypeLighter] {color: var(--userType-lighter);}
[color=uerTypeDark] {color: var(--userType-dark);}
[color=typeD] {color: var(--D);}
[color=typeI] {color: var(--I);}
[color=typeS] {color: var(--S);}
[color=typeC] {color: var(--C);}
[color=theme] {color: var(--theme);}
[color=white] {color: white;}

/*header*/
header{
    width: 100%;
    height: var(--headerHeight);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: var(--sidePadding);
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 9900;
    background-color: transparent;
    transition: box-shadow 0.2s, background-color 0.2s;
    --imgSize : 50%;
}
header.onscroll{
    background-color: white;
    box-shadow: 0 1px 1px rgba(0,0,0,0.07);
}
header > a{
    height: 60%;
}

header > a > img {
    height: 100%;
}
header > .btn-area{
    height: var(--imgSize);
    display: flex;
    gap: 1rem;
}
header .left-area{
    display: flex;
    height: var(--imgSize);
    align-items: center;
    gap: 1rem;
}
header .left-area button{
    height: 100%;
}
header .left-area button img{
    height: 100%;
}
header .left-area h1{
    font-size: 1.125rem;
}
header > .btn-area button{
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
header > .btn-area button > img{
    height: 100%;
}
header #header-notify img{
    position: relative;
}
header #header-notify #notify-badge{
    position: absolute;
    background-color: var(--theme);
    font-size: 0.66rem;
    border-radius: 10rem;
    padding: 0.3rem;
    color: white;
    transform: translate(50%, -50%);
    right: 10%;
    top: 30%;
    border: 2px solid white;
    cursor: pointer;
}
#notify #notify-badge{display: none}
header nav{
    background-color: white;
    position: absolute;
    left: 0;
    top: -100vh;
    width: 100%;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: scroll;
    opacity: 0;
    transition: top 0.5s, opacity 0.3s;
}
header nav.on{
    opacity: 1;
    top: 0vh;
    transition: top 0.3s, opacity 1ms;
}

header nav .inner{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 3rem;
}
header nav .close-btn-area{
    width: 100%;
    box-sizing: border-box;
    height: auto;
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
    position: sticky;
    top: 0;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
header nav .top-area{
    width: 100%;
    box-sizing: border-box;
    /*min-height: 30vh;*/
    border-bottom: 1px solid var(--dark1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    justify-content: center;
    padding-bottom: 2rem;
}
header nav .top-area .profile-area{
    width: 80%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
header nav .top-area .profile-area img{
    width: 5rem;
    height: 5rem;
}
header nav .top-area .profile-area h2{
    font-size: 1.25rem;
}
header nav .top-area .profile-area p{
    font-weight: bold;
    color: var(--dark2);
}
header nav .top-area .profile-area span{
    font-size: 0.813rem;
    color: var(--dark2);
}
header nav .top-area .profile-area #header-login-button{
    background-color: var(--dark6);
    padding-left: 3rem;
    padding-right: 3rem;
    margin: 1rem 0;
}
header nav .top-area .menu-box{
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
    width: 80%
}
header nav .top-area .menu-box a{
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;

}
header nav .top-area .menu-box a strong{
    font-size: 1.5rem;
}
header nav .top-area .menu-box a span{
    font-size: 0.813rem;
    color: var(--dark3);
}
header nav .bottom-area{
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header nav .bottom-area div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
header nav .bottom-area .menu-1{
    gap: 1.75rem;
    margin-bottom: 3rem;
}
header nav .bottom-area .menu-1 a{
    display: inline-block;
    width: 100%;
}
header nav .bottom-area .menu-1 a h2{
    font-size: 1.5rem;
    transition: color 0.3s;
}
header nav .bottom-area .menu-1 a:hover h2{
    color: var(--theme);
}
header nav .bottom-area .menu-2{
    gap: 1rem;
}
header nav .bottom-area .menu-2 a{
    display: flex;
    gap: 0.3rem;
}
header nav .bottom-area .menu-2 a h3{
    font-size: 0.938rem;
    font-weight: normal;
    color: var(--dark4);
}
#nav-home-button{color: var(--theme)}


/*header nav .close-btn-area #close-btn{*/
/*    transition: transform 0.3s;*/
/*}*/
/*header nav .close-btn-area #close-btn:active{transform: scale(var(--scale1));}*/
/*header nav .close-btn-area #close-btn:hover{transform: scale(var(--scale1));}*/
/*header nav .close-btn-area #close-btn img{}*/

/*header nav #gnb-not-login-profile{*/
/*    width: 50%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    gap: 1rem;*/
/*    padding: 1rem 0;*/
/*}*/
/*header nav #gnb-not-login-profile img{*/
/*    width: 45%;*/
/*    max-width: 110px;*/
/*}*/
/*header nav #gnb-not-login-profile h2{*/
/*    font-size: 1.25rem;*/
/*}*/
/*header nav #gnb-not-login-profile a{*/
/*    width: 80%;*/
/*    background-color: var(--dark6);*/
/*}*/
/*header nav #gnb-profile{*/
/*    width: 70%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    gap: 2rem;*/
/*    padding: 1rem 0;*/
/*}*/
/*header nav #gnb-profile .top-area{*/
/*    width: 100%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    gap: 1rem;*/

/*}*/
/*header nav #gnb-profile .top-area img{*/
/*    width: 100px;*/
/*    height: 100px;*/
/*}*/
/*header nav #gnb-profile .top-area h2{*/
/*    font-size: 1.25rem;*/
/*}*/
/*header nav #gnb-profile .top-area strong{*/
/*    color: var(--userType);*/
/*}*/
/*header nav #gnb-profile .top-area strong#gnb-profile-notest{*/
/*    color: var(--dark3);*/
/*}*/
/*header nav #gnb-profile .bottom-area{*/
/*    width: 100%;*/
/*    background-color: var(--dark1);*/
/*    padding: 1.25rem;*/
/*    border-radius: 1rem;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/
/*header nav #gnb-profile .bottom-area a{*/
/*    flex-grow: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1rem;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*header nav #gnb-profile .bottom-area a strong{*/
/*    font-size: 1.125rem;*/
/*}*/
/*header nav #gnb-profile .bottom-area a span{*/
/*    font-size: 0.813rem;*/
/*    color: var(--dark3);*/
/*}*/



/*header nav #menu-list{*/
/*    width: 100%;*/
/*    padding: var(--sidePadding);*/
/*    box-sizing: border-box;*/
/*    margin-top: 3rem;*/
/*}*/
/*header nav #menu-list h3{*/
/*    font-size: 1.125rem;*/
/*    margin-bottom: 0.5rem;*/
/*}*/
/*header nav #menu-list ul{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    margin-bottom: 2.5rem;*/
/*}*/
/*header nav #menu-list ul li{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    border-radius: 0.625rem;*/
/*    transition: background-color 0.3s;*/
/*}*/
/*header nav #menu-list ul li:hover{background-color: var(--dark1)}*/
/*header nav #menu-list ul li:active{background-color: var(--dark1)}*/
/*header nav #menu-list ul li a{*/
/*    width: 100%;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: baseline;*/
/*    padding: 1rem;*/
/*    box-sizing: border-box;*/
/*}*/
/*header nav #menu-list ul li a h4{*/
/*    font-weight: normal;*/
/*}*/
/*header nav #menu-list ul li a span{*/
/*    font-size: 0.813rem;*/
/*    color: var(--dark4);*/
/*}*/
/*header nav #gnb-logout-btn{*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    padding: var(--sidePadding);*/
/*}*/
/*header nav #gnb-logout-btn a{*/
/*    background-color: var(--dark1);*/
/*    color: var(--dark4);*/
/*    font-size: 0.813rem;*/
/*    font-weight: normal;*/
/*}*/
/*footer*/
footer{
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.5;
    margin-top: 5rem;
}
footer .top-area{
    width: 85%;
    box-sizing: border-box;
    color: var(--dark3);
    font-size: 0.688rem;
    text-align: center;
}
footer .top-area address {
    margin-top: 0.5rem;
}
footer .top-area address span{
    margin: 0 0.2rem;
}

footer .bottom-area{
    margin-top: 1rem;
    display: flex;
    /*justify-content: space-between;*/
    gap: 1rem;

}
footer .bottom-area a{
    color: var(--theme);
    font-size: 0.813rem;
}