.side-wrap{
    display: flex;
    height: 100%;
    top: 0;
    position: sticky;
    /*z-index: 100;*/
    pointer-events: none;
}


@media screen and (max-width: 1280px){
    .mobile-toggle-on .side-wrap{
        position: fixed;
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
        z-index: 101;
        pointer-events: auto;
    }
}

.header{
    pointer-events: none;
    z-index: 2;
    transform: translateX(-100%);
    width: 80px;
    background: var(--aside-background-color);
    border-right: 1px solid var(--primary-border);
    height: 100%;
    display: grid;
    grid-template-rows: 84px 1fr;
}
.header .ww-hd-info {
    text-align: center;
    padding: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header .ww-hd-info .ww-hd-logo{display: none; width: 100%; text-align: center; padding: 24px 0 8px}
.header .ww-hd-info .hd_user_wrap{}
.header .ww-hd-info .hd_user_wrap .hd_location .btn{line-height: 24px;}
.header .ww-hd-info .hd_user_wrap .hd_user{text-align: left;}
.header .ww-hd-info .hd_user_wrap .hd_user h5{font-size: 12px; font-weight: 400; line-height: 14px;}
.header .ww-hd-info .hd_user_wrap .hd_user .btnLogout{font-size: 10px; font-weight: 400; line-height: 11px; text-decoration: underline;}
.header .ww-user{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
}
.header .ww-hd-user{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.header .ww-hd-user a{
    text-align: center;
}
.header .ww-hd-user a span{
    display: inline-block;
}
.header .ww-hd-user a strong{
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--font-color-400);
    line-height: 13px;
    padding: 4px 0;
}
.gnb-toggle-on .header{
    transform: translateX(0%);
    pointer-events: auto;
}



.ww-home-icon{
    display: block;
    width: 44px;
    height: 44px;
    background: var(--primary-color) url(/images/common/home.svg) no-repeat center / 24px;
    border-radius: 50%;
    margin: 0 auto;
}
.header .ww-hd-user.ww-hd-home a strong{
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
}



.aside{
    --ww-rotate: 0;
    --ww-skew-x: 0;
    --ww-skew-y: 0;
    --ww-scale-x: 1;
    --ww-scale-y: 1;
    overflow: hidden;
    width: 220px;
    background: var(--aside-background-color);
    border-right: 1px solid var(--primary-border);
    transform: translate(calc(-100% - 80px), 0) rotate(var(--ww-rotate)) skew(var(--ww-skew-x)) skewY(var(--ww-skew-y)) scaleX(var(--ww-scale-x)) scaleY(var(--ww-scale-y));
}
.aside-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 0 16px;
    height: 48px;
    box-sizing: content-box;
    position: relative;
    z-index: 100;
}
.aside-title h3{
    font-size: 18px;
    color: var(--font-color-500);
    font-weight: 600;
    line-height: 110%;
}
.aside .inner{position: relative; margin: 0 auto; padding: 24px 16px; height: 100vh; overflow-y: auto;}
.ww-lnb-title{
    padding: 0 0 40px;
}
.ww-lnb-title h4{
    font-size: 18px;
    font-weight: 500;
    color: var(--font-color-600);
}

.gnb-toggle-on .aside{
    z-index: 1;
}
.lnb-toggle-on .aside{
    transform: unset;
    pointer-events: auto;
}
.mobile-toggle-on .aside .inner{
    margin-top: -24px;
}
.mobile-toggle-on .aside .ww-gnb-toggle{
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('/images/common/menu-close.png') no-repeat center / 24px;
}


@media screen and (min-width: 1280px){
    .aside-title{
        display: none;
    }
}



#container{
    --ww-bg-opacity: 1;
    width: 100%;
    min-height: calc(100vh + 44px);
    background-color: rgba(241, 245, 249, 1);
}
.content-wrap{
    min-height: 100vh;
    position: relative;
    width: 100%;
    margin-inline-start: 0px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    z-index: 2;
    min-width: 1080px;
}
.gnb-toggle-on .content-wrap {
    width: calc(100% - 80px);
    margin-inline-start: 80px;
}
@media screen and (min-width: 1280px) {
    .gnb-toggle-on .content-wrap {
        width: calc(100% - 80px);
        margin-inline-start: 80px;
    }

    .gnb-toggle-on.lnb-toggle-on .content-wrap {
        width: calc(100% - 300px);
        margin-inline-start: 300px;
    }
}
.content{
    padding: 32px 0 84px;
    overflow: hidden;
}

.content-title{
    border: 1px solid var(--primary-border);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    padding: 30px 20px;
    border-radius: 4px;
    background: var(--header-background-color);
    height: 100%;
    position: sticky;
    top: 16px;
    z-index: 99;
}
.content-title .content-title-inner{
    display: flex;
    align-items: center;
    justify-content: start;
}
.content-title .content-title-inner h2{
    display: block;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: var(--font-active-color);
}
.content-title .content-title-inner .ww-gnb-toggle{
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url('/images/common/menu-open.svg') no-repeat center / 36px;
    margin-right: 2px;
}
.gnb-toggle-on.lnb-toggle-on .content-title .content-title-inner .ww-gnb-toggle{
    background: url('/images/common/menu-close.svg') no-repeat center / 36px;
}
.content-title p{
    display: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: #A3A3A3;
    vertical-align: top;
}


/*=========================================
	대메뉴
=========================================*/
.ww-gnb-global{ padding: 0 16px; display: flex; align-items: center; justify-content: start;}
.ww-hd-gnb{height: 100%; overflow-y: scroll;}
.ww-gnb-list{}
.ww-gnb-list ul{}
.ww-gnb-list ul li{padding: 0 8px 28px; text-align: center;}
.ww-gnb-list ul li a{display: grid; grid-template-rows: 28px 1fr; font-size: 12px; font-weight: 400; line-height: 28px; color: var(--font-color-400); padding:0 6px; position: relative;}
.ww-gnb-list ul li a span{
    text-align: center;
    width: 100%;
}
.ww-gnb-list ul li a strong{
    font-size: 11px;
    font-weight: 400;
    color: var(--font-color-400);
    line-height: 13px;
}
.ww-gnb-list ul li a.ww-gnb-on strong{
    color: var(--font-active-color);
}


/*=========================================
	소메뉴
=========================================*/
.ww-lnb{padding: 0 0 12px; position: relative;}
.ww-lnb .ww-lnb-toggle{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/images/common/arrow-down-16.png") no-repeat center / 16px;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(0);
}
.ww-lnb.lnb-toggle-on .ww-lnb-toggle{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/images/common/arrow-down-16.png") no-repeat center / 16px;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(180deg);
}
.ww-lnb-toggle-title{
    cursor: pointer;
}

.ww-lnb h3{font-size: 16px; font-weight: 500; line-height: 16px; text-align: left; color: var(--font-color-400); padding: 0 0 14px;}
.ww-lnb ul{padding: 0 0 20px;}
.ww-lnb ul li{padding: 2px 0;}
.ww-lnb ul li a{display: block; padding: 0 8px; font-size: 12px; font-weight: 400; line-height: 24px; text-align: left; color: var(--font-color-400); border-radius: 4px;}
.ww-lnb ul li a.on{color: var(--font-active-color); font-weight:700;}






/*=========================================
	ww-search
=========================================*/
.ww-search-1{}
.ww-search-1 .ww-search-inner{
    overflow-x: scroll;
}
.ww-search-1 .ww-search-head{
    padding: 12px;
    background: var(--tertiary-background);
    margin-bottom: 14px;
    border-radius: 4px;
}
.ww-search-1 .ww-search-head h4{
    font-size: 14px;
    color: var(--font-color-white);
}
.ww-search-1 .ww-inp{
    height: 38px;
}

.ww-search-1 .ww-select{
    height: 38px;
}

.ww-search-1 .ww-search-input{
    margin-bottom: 4px;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: stretch;
}
.ww-search-1 .ww-search-input > label{
    display: block;
    padding: 12px;
    font-size: 13px;
    color: var(--font-color-400);
    font-weight: 500;
    background: var(--secondary-background);
    margin-right: 4px;
    border-radius: 4px;

}
.ww-search-1 .ww-search-cont{
    display: flex;
    align-items: center;
    gap: 4px;
}
.ww-search-1 .ww-search-field{ flex: 1 0 0;}
.ww-search-1 .ww-search-field.ww-search-shrink{
    flex-shrink: 0;
    flex: none;
}
.ww-search-inputbox{display: inline-block;}
.ww-search-inputbox input{display: none;}
.ww-search-inputbox input + label{
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    border: 1px solid var(--button-border-color-3);
    color: var(--button-text-color-3);
    background: var(--button-background-color-3);
}

.ww-search-date{
    display: inline-grid;
    grid-template-columns: 148px 24px 148px;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.ww-search-date-2{
    display: inline-grid;
    grid-template-columns: 148px 100px 20px 100px;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.ww-search-date-3{
    display: inline-grid;
    grid-template-columns: 160px 44px 4px 44px 8px 160px 44px 4px 44px;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.ww-search-date-3 .ww-inp{
    padding: 8px;
}

.ww-search-date.ww-search-date-inline {
    width: 50%;
}
.ww-search-date span{
    text-align: center;
}

.ww-search-btn-wrap{display: flex; align-items: center; justify-content: center; padding: 12px 0 12px; gap: 4px;}
.ww-search-btn-wrap button{
    min-width: 68px;
}

.ww-search-btn-wrap.ww-search-btn-wrap-none {
    justify-content: normal;
}



.ww-search-count{
    display: flex;
    align-items: center;
    color: var(--font-color-400);
    font-size: 12px;
    line-height: 48px;
}


/*=========================================
	ww-card
=========================================*/
.ww-input-card-wrap{

    --card-background: #FFF;
    --card-border: var(--primary-border);
    --card-font-color: var(--font-color-800);



    --card-background-active-1: rgba(20, 184, 166, 0.2);
    --card-border-active-1: rgba(20, 184, 166, 1);
    --card-font-color-active-1: rgba(20, 184, 166, 1);

    --card-background-active-2: rgba(211, 171, 158, 0.2);
    --card-border-active-2: rgba(211, 171, 158, 1);
    --card-font-color-active-2: rgba(211, 171, 158, 1);

    --card-background-active-3: rgba(171, 196, 255, 0.2);
    --card-border-active-3: rgba(171, 196, 255, 1);
    --card-font-color-active-3: rgba(171, 196, 255, 1);

    --card-background-active-4: rgba(207, 160, 255, 0.2);
    --card-border-active-4: rgba(207, 160, 255, 1);
    --card-font-color-active-4: rgba(207, 160, 255, 1);

    --card-background-active-5: rgba(255, 131, 132, 0.2);
    --card-border-active-5: rgba(255, 131, 132, 1);
    --card-font-color-active-5: rgba(255, 131, 132, 1);

    --card-background-active-6: rgba(151, 193, 169, 0.2);
    --card-border-active-6: rgba(151, 193, 169, 1);
    --card-font-color-active-6: rgba(151, 193, 169, 1);

}

.ww-input-card-inner{
    display: block;
    font-size: 0;
    margin: 24px -8px 0;
}
.ww-input-card{
    display: inline-block;
    margin: 0 8px 16px;
    width: calc(25% - 16px);
}
.ww-input-card input[type="radio"]{
    display: none;
}
.ww-input-card label {
    display: inline-block;
    width: 100%;
    padding: 20px;
    border-radius: 4px;
    background: var(--card-background);
    border: 1px solid var(--card-border);
    cursor: pointer;
}
.ww-input-card label > *{
    display: block;
    color: var(--card-font-color);
}
.ww-input-card label span{
    padding: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
}
.ww-input-card label strong{
    font-size: 16px;
    font-weight: 400;
}


.ww-input-card.card-1 input[type="radio"]:checked + label {
    border: 1px solid var(--card-border-active-1);
    background: var(--card-background-active-1);
}
.ww-input-card.card-2 input[type="radio"]:checked + label {
    border: 1px solid var(--card-border-active-2);
    background: var(--card-background-active-2);
}
.ww-input-card.card-3 input[type="radio"]:checked + label {
    border: 1px solid var(--card-border-active-3);
    background: var(--card-background-active-3);
}
.ww-input-card.card-4 input[type="radio"]:checked + label {
    border: 1px solid var(--card-border-active-4);
    background: var(--card-background-active-4);
}
.ww-input-card.card-5 input[type="radio"]:checked + label {
    border: 1px solid var(--card-border-active-5);
    background: var(--card-background-active-5);
}
.ww-input-card.card-6 input[type="radio"]:checked + label {
    border: 1px solid var(--card-border-active-6);
    background: var(--card-background-active-6);
}



.ww-input-card.card-1 input[type="radio"]:checked + label > *{
    color: var(--card-font-color-active-1);
}
.ww-input-card.card-2 input[type="radio"]:checked + label > *{
    color: var(--card-font-color-active-2);
}
.ww-input-card.card-3 input[type="radio"]:checked + label > *{
    color: var(--card-font-color-active-3);
}
.ww-input-card.card-4 input[type="radio"]:checked + label > *{
    color: var(--card-font-color-active-4);
}
.ww-input-card.card-5 input[type="radio"]:checked + label > *{
    color: var(--card-font-color-active-5);
}
.ww-input-card.card-6 input[type="radio"]:checked + label > *{
    color: var(--card-font-color-active-6);
}



@media screen and (max-width: 1280px){
    .ww-input-card-inner{
        display: block;
        font-size: 0;
        margin: 24px -8px 0;
    }
    .ww-input-card{
        display: inline-block;
        margin: 0 8px 16px;
        width: calc(33.333% - 16px);
    }
}

@media screen and (max-width: 744px){
    .ww-input-card-inner{
        display: block;
        font-size: 0;
        margin: 24px -8px 0;
    }
    .ww-input-card{
        display: inline-block;
        margin: 0 8px 16px;
        width: calc(50% - 16px);
    }
}



/*=========================================
	ww-flex
=========================================*/
.ww-flex{
    display: flex;
}
@media screen and (min-width: 744px){

}
@media screen and (min-width: 1280px){

}
.ww-flex-col {
    flex-direction: column;
}
.ww-flex-row {
    flex-direction: row;
}
.ww-align-center{
    align-items: center;
}

@media screen and (min-width: 744px){
    .ww-flex--tablet{
        display: flex;
    }
    .ww-flex-col--tablet {
        flex-direction: column;
    }
    .ww-flex-row--tablet {
        flex-direction: row;
    }
    .ww-align-center--tablet{
        align-center: center;
    }
}
@media screen and (min-width: 1280px){
    .ww-flex-col--desktop {
        flex-direction: column;
    }
    .ww-flex-row--desktop {
        flex-direction: row;
    }
}

/*=========================================
	ww-list-1
=========================================*/

.ww-list-1{
    --list-1-backgorund: #FFF;
    --list-1-border: 1px solid var(--primary-border);

}
.ww-list-1 .ww-list-head{
    display: none;
}
.ww-list-1 .ww-list-head .ww-list-head-txt{

}
.ww-list-1 .ww-list-head .ww-list-head-txt span{
    display: block;
    color: var(--font-color-400);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
}
.ww-list-1 .ww-list-body{
    width: 100%;
    border: 1px solid var(--primary-border);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    padding: 20px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: var(--primary-background);
}
.ww-list-1 .ww-list-body .ww-list-body-txt{
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.ww-list-1 .ww-list-body .ww-list-body-txt strong{
    color: var(--font-color-400);
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0;
}
.ww-list-1 .ww-list-body .ww-list-body-txt span{
    display: block;
    color: var(--font-color-600);
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0;
}
.ww-list-1 .ww-btn{
    margin-bottom: 4px;
    height: 32px;
    line-height: 32px;
}
@media screen and (min-width: 1280px){
    .ww-list-1 .ww-list-head{
        display: block;
        padding: 20px;
        border-radius: 4px;
    }
    .ww-list-1 .ww-list-body .ww-list-body-txt strong{
        display: none;
    }
    .ww-list-1 .ww-list-body .ww-list-body-txt{
        display: block;
    }
}

/*=========================================
	ww-list-2
=========================================*/
.ww-list-2{display: grid; align-items: center; grid-template-columns: 32px 1fr 80px;}
.ww-list-2 > div >label{
    display: block;
    cursor: pointer;
    font-size: 14px;
    color: var(--font-color-600);
    font-weight: 500;
    padding: 8px 0;
    margin-bottom: 2px;
}
.ww-list-2 .ww-btn{
    height: 32px;
    line-height: 30px;
}



/*=========================================
	ww-table-1
=========================================*/

.ww-table-1{
    overflow-x: scroll;
}
.ww-table-1 .ww-table-inner{
    min-width: 1080px;
    width: 100%;
}
.ww-table-1 table{width: 100%; border-spacing: 0 10px; border-collapse: separate;}
.ww-table-1 thead{
    border-spacing: 0 10px;
}
.ww-table-1 tbody{
    border-spacing: 0 10px;
}
.ww-table-1 tr{
    height:48px;
}
.ww-table-1 th {
    color: var(--font-color-800);
    font-size: 12px;
    font-weight: 500;
    padding: 8px;
    text-align: center;
    background: #fafafa;
}

.ww-table-1 td {
    color: var(--font-color-800);
    font-size: 12px;
    font-weight: 400;
    background: #FFF;
    padding: 8px;
    text-align: center;
}
.ww-table-1 td.ww-td-left, .ww-table-1 th.ww-td-left {
    text-align: left;
}
.ww-table-1 td.ww-td-right, .ww-table-1 th.ww-td-right {
    text-align: right;
}
.ww-table-1 tbody td:first-child, .ww-table-1 thead th:first-child {
    border-radius: 4px 0 0 4px;
}
.ww-table-1 tbody td:last-child, .ww-table-1 thead th:last-child {
    border-radius: 0 4px 4px 0;
}

.ww-table-1 .ww-table-btn button{
    height: 28px;
    line-height: 28px;
    font-size: 10px;
    vertical-align: top;
    margin: 2px 0;
}

.ww-table-1 .empty {
    border-radius: 4px !important;
}


.ww-table-1 .ww-checkbox-wrap {
    display: inline-block;
}

.ww-table-1.ww-table-w-input td{
    padding: 8px;
}







    /*=========================================
        ww-category-list
    =========================================*/

.ww-category-list{}
.ww-category-list ul{}
.ww-category-list ul li{}
.ww-category-input{}
.ww-category-input input[type="radio"]{display: none;}
.ww-category-input input[type="radio"] + label{
    font-size: 13px;
    color: var(--font-color-600);
    background: #FFF;
    display: block;
    align-items: center;
    height: 100%;
    padding: 8px 12px;
    border-radius: 4px;
}
.ww-category-input input[type="radio"]:checked + label{
    background: var(--input-active-background-color);
}




.ww-floating-btn{
    position: fixed;
    bottom: 48px;
    right: 30px;
    z-index: 999;
    display: none;
}
.ww-floating-btn .ww-floating-btn-wrap{}
.ww-floating-btn .ww-floating-btn-wrap a{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ww-floating-btn .ww-floating-btn-wrap a .ww-home-icon{
    display: block;
    width: 44px;
    height: 44px;
    background: var(--primary-color) url(/images/common/home.svg) no-repeat center / 24px;
    border-radius: 50%;
    margin: 0 auto;
}
.ww-floating-btn .ww-floating-btn-wrap a strong{
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
}




.ww-vote-list-add{display: flex; flex-direction: column; gap: 8px;}
.ww-vote-list-add table{width: 100%;}
.ww-vote-list-add .ww-file-upload{display: flex; align-items: center; gap: 4px;}
.ww-vote-list-add .ww-file-upload .ww-preview-file{padding: 0;}
.ww-vote-list-add .ww-file-upload .ww-preview-file span{margin-right: 0 !important; margin-bottom: 0 !important;}
.ww-vote-list-add .ww-file-upload .ww-file-upload-btn{padding: 0 14px; width: 80px; text-align: cer
    ; height: 48px; line-height: 46px;}




.snsPromotionWrap .ww-preview-file .ww-preview-image img{
    width: 72px !important;
    height: 72px !important;
}