@import url('reset.css');
@import url('kdfg.css');
 

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select, option, button{
   
}
body, a, input, select, button, textarea, hr, li, ul, ol{line-height: 1.5;}
body{position:relative;}
select, input{outline: none}
button, select, option{cursor:pointer;}
select{appearance: none; }
input[type=text], input[type=password]{box-sizing: border-box;}
button{border-width: 0px;}
a{text-decoration: none; color:inherit;}
table{width:100%;}
th, td{vertical-align: middle;}


.font_m{font-weight:500;}
.font_b{font-weight:700;}


.btn_logo, .min_moni #gnb:hover .btn_logo{
    display:flex; 
    background:url(../images/crm-logo1.svg) no-repeat; 
    background-size: auto 40px;
    width: 183px; height:40px;
}
.logo_name{opacity:0;}


.container{position:relative; height: 100%;
    /* overflow-y: scroll; */
}
#gnb{
    position:absolute;
    top:0; left:0;
    width:240px;
    height: 100%;
    min-height:1080px;
    background-color:#5F584C;
    z-index: 2;
    transition: all 0.3s;
}



.gnb_top, .min_moni #gnb:hover .gnb_top{
    padding: 35px 29px 35px 28px;
    border-bottom:1px solid #726A5D;
}
.gnb_bottom{
    position:absolute;
    bottom:40px;
    left: 30px;
    color: #fff;
    font-size:13px;
    line-height: 22px;
}

.gnb_nav_li{
    border-bottom:1px solid #726A5D;
}
.gnb_nav .gnb_nav_li:first-child:hover, .gnb_nav .gnb_nav_li:first-child.on{
    margin-top:-1px;
}

.gnb_nav_li_text{display:flex; padding: 18px 20px;}
.gnb_nav_li:hover .gnb_nav_li_text, .gnb_nav_li.on .gnb_nav_li_text{
    background:#FFCC00;
}


.gnb_nav_tit, .min_moni #gnb:hover .gnb_nav_tit{
    display:block;
    color:#fff;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    margin-left: 10px;
}
.gnb_nav_li:hover .gnb_nav_tit, .gnb_nav_li.on .gnb_nav_tit,.min_moni #gnb:hover .gnb_nav_li:hover .gnb_nav_tit, .min_moni #gnb:hover .gnb_nav_li.on .gnb_nav_tit{
    color:#222;
}
.gnv_nav_ic{display:inline-block; width:24px; height: 24px; background-position: 0 50%; background-repeat: no-repeat;}
.gnv_nav_ic1{background-image: url('../image_login/icon_LCD.svg');}
.gnv_nav_ic2{background-image: url('../image_login/icon_note_alt.svg');}
.gnv_nav_ic3{background-image: url('../image_login/icon_research.svg') ;}
.gnv_nav_ic4{background-image: url('../image_login/icon_coin-stack.svg');}
.gnv_nav_ic5{background-image: url('../image_login/icon_primary.svg');}
.gnv_nav_ic6{background-image: url('../image_login/icon_multi_folder.svg');}

.gnb_nav_li:hover .gnv_nav_ic1, .gnb_nav_li.on .gnv_nav_ic1{background-image: url('../image_login/icon_LCD_black.svg');}
.gnb_nav_li:hover .gnv_nav_ic2, .gnb_nav_li.on .gnv_nav_ic2{background-image: url('../image_login/icon_note_alt_black.svg');}
.gnb_nav_li:hover .gnv_nav_ic3, .gnb_nav_li.on .gnv_nav_ic3{background-image: url('../image_login/icon_research_black.svg') ;}
.gnb_nav_li:hover .gnv_nav_ic4, .gnb_nav_li.on .gnv_nav_ic4{background-image: url('../image_login/icon_coin-stack_black.svg');}
.gnb_nav_li:hover .gnv_nav_ic5, .gnb_nav_li.on .gnv_nav_ic5{background-image: url('../image_login/icon_primary_black.svg');}
.gnb_nav_li:hover .gnv_nav_ic6, .gnb_nav_li.on .gnv_nav_ic6{background-image: url('../image_login/icon_multi_folder_black.svg');}

.btn_gnb{
    display:block;
    position:absolute;
    border-radius: 0px 5px 5px 0px;
    width: 30px;
    height: 80px;
    right: -30px;
    top: 480px;
    background: url(../image_login/icon_btn_gnb_c.svg) no-repeat #5F584C 50% 50%;
}
.gnb_nav_sub{
    display:none;
    background:#3F3B35;
    padding: 20px; margin-bottom: -1px;
    transition: all 0.3s;
}
.gnb_nav_li:hover .gnb_nav_sub, .gnb_nav_li.on .gnb_nav_sub{display:block;}

.gnb_nav_sub li+li{margin-top: 15px;}
.gnb_nav_sub_li a{font-size: 15px; line-height: 20px; color:#B2B1AE; font-weight: 500; padding-left:12px; 
    background-image: url('../image_login/bulet2.svg');
    background-repeat: no-repeat;
    background-position: 0 50%;
}
.gnb_nav_sub_li a:hover{background-image: url('../image_login/bulet2_y.svg'); color: #FFCC00;}





#gnb.on, .min_moni #gnb, .min_moni #gnb.on{width: 70px;}
#gnb.on .gnb_top, .min_moni .gnb_top{padding:35px 14px; }
#gnb.on .btn_logo, .min_moni .btn_logo{
    background: url(../image_login/logo_m.svg) no-repeat; width: 42px;
}
#gnb.on  .gnb_nav_tit, #gnb.on .gnb_bottom, .min_moni .gnb_nav_tit, .min_moni .gnb_bottom{display:none;}
#gnb.on .btn_gnb, .min_moni .btn_gnb{background: url(../image_login/icon_btn_gnb_o.svg) no-repeat #5F584C 50% 50%;}
/* #gnb.on .gnb_nav_li_text,.min_moni .gnb_nav_li_text{padding: 23px 18px; justify-content: center;} */

/* .min_moni #gnb:hover{width: 240px;}
.min_moni #gnb:hover .gnb_top{padding: 35px 29px 35px 28px; } 
.min_moni #gnb:hover .btn_logo{background: url(../image_login/logo.svg) no-repeat; width: 183px;}
.min_moni #gnb:hover .gnb_nav_tit, .min_moni #gnb:hover .gnb_bottom{display:inline-block;}
.min_moni #gnb:hover .btn_gnb{background: url(../image_login/icon_btn_gnb_c.svg) no-repeat #5F584C 50% 50%;}
.min_moni #gnb:hover .gnb_nav_li_text{padding: 18px 20px; justify-content:none;} */

.min_moni #gnb:hover{
    width: 240px;
}


/**/

.contarea{
    box-sizing: border-box;
    background: #F8F6F0;
    margin-left:240px;
    height: 100%;
    min-height: 1080px;
    padding-left: 70px;
    padding-right: 80px;
    padding-bottom: 80px;
}
.min_moni .contarea{ 
    margin-left: 70px;
}


/*header*/
.page_header{height: 147px; display:flex; justify-content: space-between; }
.top_tit{font-size: 40px; height:52px; line-height: 52px; width:300px; margin-top: 65px; }
.login_user_box{display:flex;  margin-top:30px;  height: 32px; align-items: center; }
.login_user_txt{line-height: 24px; color: #222222; font-size: 16px; display:inline-block; height: 24px; width:148px;}
#btn_logout{
    margin-left: 20px;
    width: 88px;
    height: 32px;
    background: #222222;
    border-radius: 5px;
    text-align:center;
}
#btn_logout .text{
    font-size: 16px;
    color: #fff;
    line-height: 22px;
}

/*사용량 통계관리*/
#menu3 .lnb{
    box-sizing: border-box;
    width: 100%;
    border: 3px solid #fff;
    padding:17px 1.8%; 
    display:flex; justify-content: space-between;
    margin-bottom:30px;     align-items: center;
}
#btn_menu3_chcck{
     background:#007792;
     width: 6.5%; height: 40px;
     border-radius: 5px;
     color: #FFFFFF;
     margin-left:30px;
}
#btn_menu3_chcck span{
    font-size: 18px;
    line-height: 22px;
}
/* .sel_affiliates, .sel_chanel, .set_checking_date{
    display:flex; align-items: center;
} */
.sel_chanel{
    margin-left: 3.3%;
    margin-right: 5.2%;
}
#menu3 .lnb .title{
    display:inline-block; color: #222222; margin-right: 1.3%;
    width: 4.7%; height: 24px; line-height: 24px; font-weight: 500;

}
#menu3 .lnb .sel_chanel{margin-left: 3.3%;}
#menu3 .lnb .set_checking_date{margin-left:5.2%;}
.menu3_lnb_menu1 .select_box, .menu3_lnb_menu2 .select_box{
    box-sizing: border-box;
    padding: 8px 9px; font-weight: 500; font-size:16px;
    height:40px; border: 1px solid #E8E8E8; color: #222222;
    background: url(../image_login/icon_down_b.svg) no-repeat;
    background-position: right 9px center; background-color:#fff;
}
/* .menu3_lnb_menu1, .menu3_lnb_menu1 .select_ul{
    width:12.9%; 
} */
.menu3_lnb_menu1{width:12.9%; }
.menu3_lnb_menu2{width:10.2%; margin-right:0.7%;}
.select_box_cell{position:relative; cursor: pointer;}
.select_box_cell ul{width:100%;}

.select_box .select_text{
    color:#222;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}
.select_box_cell .select_ul{
    color:#222;
    position:absolute; top: 40px;
    background:#fff;
    display:none;
    transition: all 0.3s;
}



.select_ul.on{
    display:block;
}

.select_box_cell .select_li{
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
    height:40px;
    line-height: 22px;
    border: 1px solid #E8E8E8;
    border-top:none;
    padding: 9px 10px;
}
.menu3_lnb_menu1 li:hover{
    background: #E9FBFF;
}

.menu3_lnb_menu1 option, .menu3_lnb_menu2 option{
    border: 1px solid #E8E8E8; height: 40px;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px; 

}


.menu3_lnb_date_mark{
    background:url(../image_login/icon_mark1.svg) no-repeat 50% 50%;
    width: 0.8%; height: 24px;
    margin: 0 0.7%;
}

.menu3_lnb_date_cell{
    cursor: pointer;
    position:relative;
    width: 11.1%;
}
.menu3_lnb_date{
    box-sizing: border-box;
    padding:9px;
    width: 100%; height: 40px;
    border: 1px solid #E8E8E8; 
    background-image: url(../image_login/icon_date.svg);
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    background-position: right 9px center;
}
.menu3_lnb_date .text{
    font-weight: 500; font-size:16px; color:#222; line-height: 22px;
}





.data_box{width: 100%;}
.menu3_data_box_top{margin-bottom: 20px; display:flex; justify-content: space-between; align-items: flex-end;}
#btn_dw_excel{
    width: 149px;
    height: 40px;
    background: #FFFBE6;
    border: 1px solid #FFBD00;
    border-radius: 5px;
    padding: 8px 14px;
    text-align: center;
}
#btn_dw_excel .text{font-size: 16px; line-height: 22px; color: #222222; padding-left:30px;
    background:url(../image_login/icon_excel.svg) no-repeat 0 50%;
}
.menu3_data_amount{font-size: 16px; line-height: 24px; color: #222222;}
.menu3_data_amount_text{color:#077992;}


.menu3_table{ background:#FFFFFF;}
.menu3_table thead{height: 102px; 
    /* border-bottom: 1px solid #333; border-top: 1px solid #333; */
}
.menu3_table tbody{height: 509px; overflow-y: scroll; position:relative;}

.menu3_table th{
    border-right: 1px solid #E2E2E2;
}
.menu3_thead_1 th{border-top: 1px solid #333;}
.menu3_thead_1 th:last-child{
    border-right: none;
}
.menu3_thead_2 th{
    height: 49px;
    border-top:1px solid #E2E2E2;
}
.base_date, .name_affil, .name_cha, .num_case_A, .num_case_B, .num_case_C, .num_case_D, .num_case_E{
    border-bottom: 1px solid #333;
}
.menu3_table th span{
    color: #222222;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}
.menu3_table td{border:1px solid #E2E2E2; height:50px; text-align:center;}
.menu3_table td:first-child{border-left:none;}
.menu3_table td:last-child{border-right:none;}
.base_date{width: 7.8%;}
.name_affil, .name_cha{width:9.8%;}
.num_case_A,.num_case_B, .num_case_D, .num_case_E{width: 14.4%;}
.num_case_C{width: 14.6%;}
.num_case_D_1, .num_case_E_1, .num_case_A_1, .num_case_B_1, .num_case_C_1{width:7.2%;}
.num_case_D_2, .num_case_E_2, .num_case_A_2, .num_case_B_2{width: 7.1%;}
.num_case_C_2{width: 7.3%;}

.menu3_table .text_no_data{
    position : absolute; left : 50%; top: 50%; transform: translate(-50%, -50%); font-size:16px; color:#222; text-align:center;
}


/*팝업_날짜선택*/
.popup_calender{
    display:none;
    position:absolute;
    left:0; top: 50px;
    width: 310px;
    height: 350px;
    border: 1px solid #000000;
    padding: 4px 14px 15px; 
    background: #Fff;
    z-index:2;
}
.popup_calender.on{
    display:block;
}
.calender_top{
    width: 100%; height: 50px;
    display:flex; align-items: center; justify-content: space-between;
}
.btn_cal_prev, .btn_cal_next{width:20px; height:20px; display:inline-block;}
.btn_cal_prev{background: url(../image_login/icon_prev_icon_g.svg) no-repeat 50% 50%;}
.btn_cal_next{background: url(../image_login/icon_next_icon_g.svg) no-repeat 50% 50%;}
.calender_top_ct{display:flex;}
.calender_top_y, .calender_top_m{padding-right: 23px; height: 22px; line-height: 22px; color:#222222; font-weight: 700; display:inline-block; background-image: url(../image_login/icon_c_down_grey.svg); background-repeat: no-repeat;     background-position: top 0px right 0px; font-size: 18px;}
.calender_top_y{margin-right: 10px;}
.calender_body{width:100%; margin-bottom:11px;}
.calender_body li{
    line-height: 40px;
    flex: 1;
    height: 40px;
    color: #222;
}
.calender_body li span{line-height: 22px; text-align: center; font-weight: 500; font-size: 14px; }
.week_day{display:flex; width:100%;}
.week_day li{text-align: center; background: #F2FCFE;}
.calender_body .sun{color:#C10000;}
.calender_body .sat{color:#006DCC;}
.calender_date{
    box-sizing: border-box; text-align:center;
}
.date_num{
    display:inline-block; width: 28px; height: 28px;
    font-size: 14px; line-height: 28px; border-radius: 100%;
}
.calender_foot{display:flex; justify-content: space-between;}
.calender_foot button{height: 28px; border-radius: 5px; background:#fff; }
#btn_today_month{width:67px; border: 1px solid #007792; color:#007792;}
#btn_popup_close{width: 55px; border: 1px solid #222; color:#222;} 
.calender_body .dates{display: flex;
    flex-flow: wrap; height: 200px; }
.dates .day{display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 7);
    text-align: center;
}




.calender_foot button span{display:inline-block; height: 22px;
    font-weight: 300; font-size: 14px; line-height: 22px;
}
/*로그인*/
#login{
    width: 100vw; height: 100vh; background: #fff; position:relative;
}
#login #logo{position:absolute; top: 34px; left: 28px;}
.login_box{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 400px;
}
.login_box .title{
    text-align:center;
    display:flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.login_box .sub_title{font-size: 20px; line-height: 52px; color:#ca1523;}
.login_box .main_title{font-size: 72px; line-height: 88px; color:#ca1523; }
.login_table, .login_pop_table{width: 100%;}
.login_table{margin-bottom: 30px;}
.login_pop_table{margin-bottom:10px;}

.login_table .gap{padding: 10px 0; height: 18px;}
.login_table .button_box{height:22px;}
.login_t_m{color:#fff; font-size:12px; line-height:18px; display:none;}
.sel_company{width:100%; height: 62px; 
    background: url('../image_login/icon_down.svg') no-repeat; 
    background-position: right 18px center;
    border-radius: 10px; padding:18px; border: 2px solid #FFFFFF; color:#fff; font-size: 16px;
}
.login_table .login_c_num, .login_table .login_pw{
	font-size: 16px; color:#000; width:100%; height:62px; border: 2px solid #ccc; border-radius: 10px; padding:18px; background:none; }
.login_c_num::placeholder, .login_pw::placeholder{font-size: 16px; color:#ccc; }
.sel_company:focus, .login_c_num:focus, .login_pw:focus{border: 2px solid #ca1523;}

#reset_pw{
    color:#fff; font-size: 16px;
    padding-left: 25px;
    background:url('../image_login/icon_lock.svg') no-repeat;
    float: right;
    height: 22px;
    line-height: 22px;
    text-decoration: underline;
}
#btn_login{
    width: 400px;
    height: 70px;
    background: #ca1523;
    border-radius: 10px; font-size: 24px; line-height: 22px;
    color:#fff;
}
.login_pop_head{display: flex;}
.login_popup{width:600px; position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%); display:none;}
.login_pop_head, .login_pop_cont{box-sizing: border-box;}

.login_pop_head{height: 70px; width: 100%; background:#007792; color:#fff; justify-content: space-between; align-items: center; font-size: 26px; line-height: 34px; padding: 0 20px;} 
#login_popup_close{width: 32px; height:32px; background:url('../image_login/icon_btn_close_w.svg') no-repeat 50% 50%;}
.login_pop_cont{padding: 30px 30px 40px 30px; width: 100%; background:#fff; text-align: center;}

#btn_clear_change{border-radius: 5px; background:#FFBD00; text-align: center; width: 101px; height: 40px; line-height: 40px; font-size: 16px; }
.login_pop_table_input{font-size: 16px; width: 100%; border: 1px solid #E8E8E8; height:40px; padding: 9px 10px;}
.login_pop_table_input::placeholder{ line-height: 22px; color: #888888;}
.login_pop_table_input:focus{border-color:#C10000;}
.login_pop_tab_mess{padding: 10px 0; text-align:left; height: 18px;}
.login_pop_tab_text{font-size:12px; line-height: 18px; color: #C10000; display:none; }

#loginBtn{
    width: 400px;
    height: 70px;
    background: #ca1523;
    border-radius: 10px;
    font-size: 24px;
    line-height: 22px;
    color: #fff;

}