:root{
    /* 추가 color */
    --color-gray_900: #3B3B3B;

    /* 추가 이미지 */
    --ico-error: url('/images/ico_alert.svg');

    /* 상품 이미지 없을 떄 */
    --img-error: url('/images/no_img.png');

    --ico-down: url('/images/ico_triangleDown.svg');
    --ico-up: url('/images/ico_triangleUp.svg');
    --ico-hyphen: url('/images/ico_hyphen.svg');
}

/* 추가 color 지정 */
.t-g_900 {color: var(--color-gray_900);}

/* border color */
.border-g_300 {border-color: var(--color-gray_300);}
.border-g_200 {border-color: var(--color-gray_200);}
.border-g_100 {border-color: var(--color-gray_100);}


body {
    background-color: #f9f9f9;
}

.radius-10 {
    border-radius: 10px;
}

.h-full {
    height: 100%;
}


/* form input */
.form_input {
    height: 44px;
    padding: 0 16px;
    color: var(--color-black);
}

.btn.bg-m:hover {
    background-color: var(--color-point);
}

.btn.border:hover {
    background-color: var(--color-secondary);
}

.filter_form ul,
.filter_form ul.date_box li.display_flex  {
    gap: 50px;
}

.filter_form ul li div.label_box {
    gap: 30px;
}

.filter_form ul li input.form_input {
    min-width: 280px;
    width: 280px;
}

.filter_form ul li input.form_input.sum {
    min-width: 110px;
    width: 110px;
}

.filter_form ul li>input.w-470 {
    width: 470px;
}

.filter_form .date_box div.calendar_box {
    gap: 12px;
}

.filter_form .date_box li > div {
    gap: 10px;
}

.calendar input {
    min-width: unset;
}

.filter_form ul li .calendar input.form_input {
    min-width: unset;
    width: 100%;
}

.filter_form .btn {
    margin: 0 0 0 auto;
}


.content table tbody tr:hover {
    background-color: var(--color-gray_100);
}

.content table tbody tr.pointer:hover {
    background-color: var(--color-secondary);
}

.content table th.num {
    width: 120px;
}

.content table th.detail {
    width: 120px;
}

.content table.purchase_table th.product,
.content table.purchase_table tbody td.t-left {
    width: 260px;
    max-width: 260px;
}

.content table tbody td.t-left {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 700px);
    max-width: 600px;
}

.content table th.mall {
    width: 120px;
}

.content table th.sum {
    width: 150px;
}

.content table th.time,
.content table th.date {
    width: 240px;
}

.content table tbody tr td.point:hover {
    background-color: var(--color-secondary);
}



/* 404 error */
main.erroe_page {
    padding: 100px 0 0;
    font-size: 16px;
}

.erroe_page .t-01 {
    margin-bottom: 20px;
    font-size: 30px;
}

.erroe_page .t-02 {
    gap: 10px;
    font-size: 18px;
    margin: 22px 0 14px;
}

.erroe_page .t-02 span.img {
    background-image: var(--ico-error);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 24px;
    height: 24px;
}

.erroe_page .t-03,
.erroe_page .t-04 {
    line-height: 25px;
}

.erroe_page a {
    display: block;
    width: 300px;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    margin: 30px auto 0;
}



@media (max-width: 1500px) {
    .filter_form ul.date_box {
        flex-wrap: wrap;
    }

    .content table tbody td.t-left {
        max-width: 400px;
    }

} 



@media (max-width: 1200px) {

    .content table th.num {
        width: 100px;
    }
    .content table.purchase_table th.product,
    .content table.purchase_table tbody td.t-left {
        width: 220px;
        max-width: 220px;
    }

    .filter_form ul,
    .filter_form ul.date_box li.display_flex  {
        gap: 16px 25px;
    }

    .filter_form ul li.w-280 {
        width: 280px;
    }

}