button {white-space: nowrap;}
.btn_blue1{ background-color: var(--blue-1); color: var(--white); }
.btn_blue2{ background-color: var(--blue-8); color: var(--white); }

.btn_gray1{ background-color: var(--gray-1); color: var(--white); }
.btn_gray2{ background-color: var(--gray-2); color: var(--white); }
.btn_white{ background-color: var(--white); color: var(--gray-1); box-shadow: inset 0 0 0 1px var(--gray-4);}

.btn_blue1:hover { background-color: var(--white); color: var(--gray-1); box-shadow:var(--bd_inner-1-gray);}
.btn_gray1:hover { background-color: var(--gray-5); color: var(--gray-1); box-shadow:var(--bd_inner-1-gray);}
.btn_gray2:hover { background-color: var(--gray-1); color: var(--white); }
.btn_md_nbg:hover{ background-color: var(--white); color: var(--gray-2);}

.btn_red{ background-color: var(--red-1); color: var(--white); }
.btn_red:hover{ background-color: var(--white); color: var(--white); color: var(--gray-1); box-shadow:var(--bd_inner-1-gray);}

.btn_redColor {color:var(--red-1) !important;}

.btn_xl{
    padding: 12px 46px 12px 20px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    background-repeat: no-repeat;
    background-position: center right 15px;
    background-size:20px;
    transition: all 0.3s;    
}

.btn_md{
    height:35px; 
    padding:4px 35px 4px 15px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size:15px;
    transition: all 0.3s;
    box-sizing: border-box;
}
.btn_md_nbg{
    height:35px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    padding:0 1.5rem;
    background-repeat: no-repeat;
    background-size:15px;
    transition: all 0.3s;
    box-sizing: border-box;
}

.btn_sm{
    height:28px;
    padding:0 8px;
    border-radius: 5px;
    font-size: .8rem;
    transition: all 0.3s;
    background-image: none;
}

.btn_xs{
    padding:4px 8px; 
    border-radius: 2px;
    font-size: .8rem;
    transition: all 0.3s;
}

.ok_w        { background-image: url("/assets/images/svg/btn_ok_w.svg");}
.ok_g        { background-image: url("/assets/images/svg/btn_ok_g.svg");}
button:hover.ok_w { background-image: url("/assets/images/svg/btn_ok_g.svg"); }

.no_w        { background-image: url("/assets/images/svg/btn_no_w.svg");}
.no_g        { background-image: url("/assets/images/svg/btn_no_g.svg");}
button:hover.no_w { background-image: url("/assets/images/svg/btn_no_g.svg"); }

.lock_w      { background-image: url("/assets/images/svg/btn_lock_w.svg"); }
.lock_g      { background-image: url("/assets/images/svg/btn_lock_g.svg"); }
button:hover.lock_w { background-image: url("/assets/images/svg/btn_lock_g.svg"); }

.member_w      { background-image: url("/assets/images/svg/btn_member_w.svg");background-size:20px}
.member_g      { background-image: url("/assets/images/svg/btn_member_g.svg"); background-size:20px}
button:hover.member_w { background-image: url("/assets/images/svg/btn_member_g.svg"); background-size:20px}

.key_w       { background-image: url("/assets/images/svg/btn_key_w.svg");background-size:20px}
.key_g       { background-image: url("/assets/images/svg/btn_key_g.svg");background-size:20px}
button:hover.key_w { background-image: url("/assets/images/svg/btn_key_g.svg"); }

.setting_w   { background-image: url("/assets/images/svg/btn_setting_w.svg");background-size: 12%}
.setting_g   { background-image: url("/assets/images/svg/btn_setting_g.svg"); background-size: 12%;}
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }

.allsave_w   { background-image: url("/assets/images/svg/btn_allsave_w.svg");}
.allsave_g   { background-image: url("/assets/images/svg/btn_allsave_g.svg");}
button:hover.allsave_w { background-image: url("/assets/images/svg/btn_allsave_g.svg"); }

.save_w   { background-image: url("/assets/images/svg/btn_save_w.svg"); background-size: 23%;}
.save_g   { background-image: url("/assets/images/svg/btn_save_g.svg"); background-size: 23%;}
button:hover.save_w { background-image: url("/assets/images/svg/btn_save_g.svg"); }

.cancelled_w { background-image: url("/assets/images/svg/btn_cancelled_w.svg");}
.cancelled_g { background-image: url("/assets/images/svg/btn_cancelled_g.svg");}
button:hover.cancelled_w { background-image: url("/assets/images/svg/btn_cancelled_g.svg"); }

.search_w    { background-image: url("/assets/images/svg/btn_search_w.svg");}
.search_g    { background-image: url("/assets/images/svg/btn_search_g.svg");}
button:hover.search_w { background-image: url("/assets/images/svg/btn_search_g.svg"); }

.file_w      { background-image: url("/assets/images/svg/btn_file_w.svg");}
.file_g      { background-image: url("/assets/images/svg/btn_file_g.svg");}
button:hover.file_w { background-image: url("/assets/images/svg/btn_file_g.svg"); }

.print_w     { background-image: url("/assets/images/svg/btn_print_w.svg");}
.print_g     { background-image: url("/assets/images/svg/btn_print_g.svg");}
button:hover.print_w { background-image: url("/assets/images/svg/btn_print_g.svg"); }

.excel_w     { background-image: url("/assets/images/svg/btn_excel_w.svg");}
.excel_g     { background-image: url("/assets/images/svg/btn_excel_g.svg");}
button:hover.excel_w { background-image: url("/assets/images/svg/btn_excel_g.svg"); }

.cabinet_w   { background-image: url("/assets/images/svg/btn_cabinet_w.svg");}
.cabinet_g   { background-image: url("/assets/images/svg/btn_cabinet_g.svg");}
button:hover.cabinet_w { background-image: url("/assets/images/svg/btn_cabinet_g.svg"); }

.calendar_w   { background-image: url("/assets/images/svg/btn_calendar_w.svg");}
.calendar_g   { background-image: url("/assets/images/svg/btn_calendar_g.svg");}
button:hover.calendar_w { background-image: url("/assets/images/svg/btn_calendar_g.svg"); }

.calc_w   { background-image: url("/assets/images/svg/btn_calc_w.svg");}
.calc_g   { background-image: url("/assets/images/svg/btn_calc_g.svg");}
button:hover.calc_w { background-image: url("/assets/images/svg/btn_calc_g.svg"); }

.graph_w     { background-image: url("/assets/images/svg/btn_graph_w.svg"); background-size: 9%;}
.graph_g     { background-image: url("/assets/images/svg/btn_graph_g.svg"); background-size: 9%;}
button:hover.graph_w { background-image: url("/assets/images/svg/btn_graph_g.svg"); }

.ai_w     { background-image: url("/assets/images/svg/btn_ai_w.svg"); background-size: 12%; }
.ai_g     { background-image: url("/assets/images/svg/btn_ai_g.svg"); background-size: 12%; }
button:hover.ai_w { background-image: url("/assets/images/svg/btn_ai_g.svg"); }

.list_w     { background-image: url("/assets/images/svg/btn_list_w.svg"); }
.list_g     { background-image: url("/assets/images/svg/btn_list_g.svg"); }
button:hover.list_w { background-image: url("/assets/images/svg/btn_list_g.svg"); }

.finished_w     { background-image: url("/assets/images/svg/btn_finished.svg");}

.reportIcon1_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon1.svg");}
.reportIcon1_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon1.svg");}
button:hover.reportIcon1_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon1.svg"); }

.reportIcon2_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon2.svg");}
.reportIcon2_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon2.svg");}
button:hover.reportIcon2_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon2.svg"); }

.reportIcon3_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon3.svg");}
.reportIcon3_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon3.svg");}
button:hover.reportIcon3_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon3.svg"); }

.reportIcon4_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon4.svg");}
.reportIcon4_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon4.svg");}
button:hover.reportIcon4_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon4.svg"); }

.reportIcon5_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon5.svg");}
.reportIcon5_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon5.svg");}
button:hover.reportIcon5_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon5.svg"); }

.reportIcon6_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon6.svg");}
.reportIcon6_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon6.svg");}
button:hover.reportIcon6_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon6.svg"); }

.reportIcon7_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon7.svg");}
.reportIcon7_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon7.svg");}
button:hover.reportIcon7_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon7.svg"); }

.reportIcon8_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon8.svg");}
.reportIcon8_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon8.svg");}
button:hover.reportIcon8_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon8.svg"); }

.reportIcon9_w   { background-image: url("/assets/images/svg/bid/btn_report_w_icon9.svg");}
.reportIcon9_g   { background-image: url("/assets/images/svg/bid/btn_report_g_icon9.svg");}
button:hover.reportIcon9_w { background-image: url("/assets/images/svg/bid/btn_report_g_icon9.svg"); }

.aiIcon_w   { background-image: url("/assets/images/svg/bid/btn_ai_w_icon.svg");}
.aiIcon_g   { background-image: url("/assets/images/svg/bid/btn_ai_g_icon.svg");}
button:hover.aiIcon_w { background-image: url("/assets/images/svg/bid/btn_ai_g_icon.svg"); }

.bid_blue {
    background-image: url("/assets/images/svg/check_blue.svg");
}

button:hover.member_w { background-image: url("/assets/images/svg/btn_member_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }
button:hover.setting_w { background-image: url("/assets/images/svg/btn_setting_g.svg"); }





.legend { 
    display: inline-block; 
    width:28px; height:20px;
    line-height: 20px; 
    text-align: center; vertical-align: middle;
    font-size: 12px; font-weight: 500;
    border-radius: 3px; 
    white-space: nowrap;
    margin-right: 2px;
}
.legend2 { 
    display: inline-block; 
    padding:1px .3rem; width:auto;
    line-height: 21px; 
    text-align: center; vertical-align: middle;
    font-size: .8rem; font-weight: 500;
    border-radius: 3px; 
    white-space: nowrap; background-color: var(--gray-2); color:var(--white);
}

.legend_01{ background-color: #fff1f1; color:#ff0000; border:1px solid #ff0000; }
.legend_02{ background-color: #faecf4; color:#880e4f; border:1px solid #880e4f;}
.legend_03{ background-color: #fbf3ff; color:#aa00ff; border:1px solid #aa00ff;}
.legend_04{ background-color: #ecf3ff; color:#0d47a1; border:1px solid #0d47a1;}
.legend_05{ background-color: #f4f6ff; color:#304ffe; border:1px solid #304ffe;}
.legend_06{ background-color: #f6ffef; color:#5bc700; border:1px solid #5bc700;}
.legend_07{ background-color: #ffffee; color:#9e9d24; border:1px solid #9e9d24;}
.legend_08{ background-color: #fffdf0; color:#ffd600; border:1px solid #ffd600;}
.legend_09{ background-color: #fff1ed; color:#ff9100; border:1px solid #ff9100;}
.legend_10{ background-color: #fff6f3; color:#795548; border:1px solid #795548;}
.legend_11{ background-color: #f4f5fa; color:#494e6b; border:1px solid #494e6b;}
.legend_14{ background-color: #ffffff; color:#404a4d; border:1px solid #404a4d;}
.legend_15{ background-color: #f0fffd; color:#007768; border:1px solid #007768;}

.legend_01.active{background-color: #ff0000; color:var(--white); border: none;}
.legend_02.active{background-color: #880e4f; color:var(--white); border: none;}
.legend_03.active{background-color: #aa00ff; color:var(--white); border: none;}
.legend_04.active{background-color: #0d47a1; color:var(--white); border: none;}
.legend_05.active{background-color: #304ffe; color:var(--white); border: none;}
.legend_06.active{background-color: #5bc700; color:var(--white); border: none;}
.legend_07.active{background-color: #9e9d24; color:var(--white); border: none;}
.legend_08.active{background-color: #ffd600; color:var(--white); border: none;}
.legend_09.active{background-color: #ff9100; color:var(--white); border: none;}
.legend_10.active{background-color: #795548; color:var(--white); border: none;}
.legend_11.active{background-color: #494e6b; color:var(--white); border: none;}
.legend_14.active{background-color: #404a4d; color:var(--white); border: none;}
.legend_15.active{background-color: #007768; color:var(--white); border: none;}

.legend_12{ background-color: #9e9e9e; color:#ffffff; border: var(--border-1); width:28px; height:18px; line-height: 18px; font-weight: 600;}
.legend_13{ background-color: var(--blue-1); color:var(--white); width:30px; height:18px; line-height: 18px; font-weight: 600;}


.d_icon { 
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 2px 4px 0 0;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    vertical-align: top;
    color: #fff;
}
.d_r { background-color: #b30101;}
.d_c { background-color: #ff9216;}
.d_g { background-color: #32aa14;}
.d_b { background-color: #0d1a91;}
.d_v { background-color: #910385;}

.check_blue{
    background-image: url("/assets/images/svg/check_blue.svg");
    background-repeat: no-repeat;
    background-position: left center;
    width:80px; text-align: left; padding-left:20px;
}
.check_red{
    background-image: url("/assets/images/svg/check_red.svg");
    background-repeat: no-repeat;
    background-position: left center;
    width:80px; text-align: left; padding-left:20px;
}
.check_gray{
    background-image: url("/assets/images/svg/check_gray.svg");
    background-repeat: no-repeat;
    background-position: left center;
    width:80px; text-align: left; padding-left:20px;
}
.check_none{
    background-repeat: no-repeat;
    background-position: left center;
    width:80px; text-align: left; padding-left:20px;
}
.check_memo{
    background-image: url("/assets/images/svg/memo_g.svg");
    background-repeat: no-repeat;
    background-position: left center;
    width:80px; text-align: left; padding-left:20px;
}


.pg_btn {
    display: block;
    width:10px; height:10px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.pg_first { background-image: url("/assets/images/svg/pg_first.svg");}
.pg_prev { background-image: url("/assets/images/svg/pg_prev.svg"); }
.pg_next { background-image: url("/assets/images/svg/pg_next.svg");}
.pg_last { background-image: url("/assets/images/svg/pg_last.svg");}



@media (max-width:768px) {
    .btn_xl{
        padding: 8px 36px 8px 10px;
        border-radius: 5px;
        font-size: .9rem;
        font-weight: 600;
        background-repeat: no-repeat;
        background-position: center right 12px;
        background-size: 18px;
        transition: all 0.3s;    
    }

    .btn_md{
        padding:6px 32px 6px 10px; 
        border-radius: 3px;
        font-size: .9rem;
        font-weight: 500;
        background-repeat: no-repeat;
        background-position: center right 10px;
        background-size: 14px;
        transition: all 0.3s;
    }
    .btn_md_nbg{
        padding:6px 16px; 
        border-radius: 5px;
        font-size: .9rem;
        font-weight: 500;
        transition: all 0.3s;
    }

    .btn_sm{
        padding:0 10px; 
        border-radius: 4px;
        font-size: .8rem;
        transition: all 0.3s;
    }
    .legend { 
        display: inline-block; 
        line-height: 16px;
        padding:1px 2px; width:auto;
        text-align: center; vertical-align: middle;
        font-size: .8rem; font-weight: 400;
        border-radius: 2px; 
        white-space: nowrap;
    }
    .legend2 { 
        height: 18px;
        line-height: 18px;
        display: inline-block; 
        padding:1px 5px; width:auto;
        text-align: center; vertical-align: middle;
        font-size: .8rem; font-weight: 400;
        border-radius: 3px; 
        white-space: nowrap; background-color: var(--gray-2); color:var(--white);
    }
    
}