/* 2020.04.27 */
@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

/* ================초기화 css 시작================ */
*{margin: 0; padding: 0;}
body {font-family: 'Poppins', sans-serif; color: #333; box-sizing: border-box;}
ul{box-sizing: border-box;}
li{list-style: none; box-sizing: border-box;}
a{text-decoration: none; box-sizing: border-box; color: inherit;}
p{word-break: keep-all;}
div{box-sizing: border-box;}

table{border-collapse: collapse;}
textarea{box-sizing: border-box; resize: none;}
input{box-sizing: border-box;}
button{box-sizing: border-box;}
label{box-sizing: border-box;}
/* ================초기화 css 끝================ */

/* ================공통 css 시작================ */
.kr_text{font-family: 'Noto Sans KR', sans-serif;}
.pop_text{font-family: 'Poppins', sans-serif; }

.img_middle{vertical-align: middle;}

.right1_margin{margin-right: 10px;}
.right2_margin{margin-right: 15px;}
.right3_margin{margin-right: 20px;}
.right4_margin{margin-right: 25px;}
.right5_margin{margin-right: 30px;}
.mb-1 {
    margin-bottom: 10px;
}

.last_rmarginx{margin-right:0 !important;}
.last_bmarginx{margin-bottom:0 !important;}

select{ 
	-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
	-moz-appearance: none; 
	appearance: none;
	background: url('../img/select_arrow.png') no-repeat 95% 50%; /* 화살표 모양의 이미지 */ 
} 
select::-ms-expand{display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */ 

.tbl_paging{width: 100%; height: 100px; padding: 30px;}
.tbl_pageul{float: right; height: 100%;}
.page_li{float: left; width: 50px; height: 50px; margin: 5px; text-align: center;}
.page_click{display: block; padding: 10px; border: 1px solid #e7e7e7; font-weight: 400;}
.page_click:hover{background: #ffc435; color: #fff;}
.page_active{background: #ffc435; color: #fff;}

.td_only{display: none; padding: 25px 0; border-bottom: 1px solid #e7e7e7;}

.green_cir{color: #4CAF50;}
.red_x{color: #ff5274;}

.more_click{float: right; padding: 5px 20px;  font-size: 16px; font-weight: 400; color: #5d6579; border: 1px solid #b9c1d5; border-radius: 7px;}
.more_click2{float: right; padding: 5px 20px;  font-size: 16px; font-weight: 400; color: #5d6579; border: 1px solid #b9c1d5; border-radius: 7px;}
.more_click:hover, .more_click2:hover{border-radius: 7px; background: #5d6579; color: #fff;}
/* ================공통 css 끝================ */

/* ================전체박스 css 시작================ */
#all_bigbox{position: relative; width: 100%; height: 100%; overflow: hidden;}
/* ================전체박스 css 끝================ */

/* ================header 메뉴 css 시작================ */
.side_heade{position: relative; width: 15%; height: 100%; float: left;}

/* 큰 메뉴*/
.left_gnbWrap{height: 100%; top: 0; transition: all 0.3s; background: #fff;}
.left_gnb>li{width: 100%;}
.left_gnb>li>a{display: block; width: 100%; height: 55px; text-align: left; padding-left: 25px; padding-top: 5px; line-height: 50px; letter-spacing: -1.3px; font-size: 20px; color: #4b4b4b;}
.left_gnb>.menu_1>a.on{padding-left: 70px; background: url('../img/icon1_1.png') no-repeat; background-size: 25px; background-position: 10%;  background-color: #292929; color: #fff;}
.left_gnb>.menu_2>a.on{padding-left: 70px; background: url('../img/icon2_1.png') no-repeat; background-size: 25px; background-position: 10%;  background-color: #292929; color: #fff;}
.left_gnb>.menu_3>a.on{padding-left: 70px; background: url('../img/icon3_1.png') no-repeat; background-size: 25px; background-position: 10%;  background-color: #292929; color: #fff;}
.left_gnb>.menu_4>a.on{padding-left: 70px; background: url('../img/icon4_1.png') no-repeat; background-size: 25px; background-position: 10%;  background-color: #292929; color: #fff;}
.left_gnb>.menu_5>a.on{padding-left: 70px; background: url('../img/icon5_1.png') no-repeat; background-size: 25px; background-position: 10%;  background-color: #292929; color: #fff;}
.left_gnb>.menu_6>a.on{padding-left: 70px; background: url('../img/icon6_1.png') no-repeat; background-size: 25px; background-position: 10%;  background-color: #292929; color: #fff;}
.left_gnb>li>a.on > .icon_size{display: none;}
.left_gnb>li>ul{display: none;}
.left_gnb>li>ul>li>a{display: block; width: 100%; height: 65px; padding: 10px 0 10px 65px; text-align: left; line-height: 50px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; background-color: #f8fbff; color: #2c374b;}
.left_gnb>li>ul>li>a:hover{background: #f0f6ff;}
.left_gnb>li>ul>li>a.on{background: #efe5d6;}
.dp3_click.on .click_arrow:after{content: '\f107'; float: right; padding-right: 40px; font-size: 24px; color: #333; font-family: fontAwesome;}
.dp3_click.on .right_arrow:before{display: none;}
.depth3{display: none;}
.dp3_li{display: block; width: 100%; height: 65px; padding: 10px 0 10px 100px; text-align: left; line-height: 50px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; background-color: #f8fbff; color: #2c374b;}
.dp3_li:hover{background: #f0f6ff;}
.dp3_li.on{background: #efe5d6;}
.logo_box{position: relative; width: 100%; height: 85px; background: #ffc435;}
.logo_click{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.logo_link{display: block; padding-right: 40px;}
.logo_link img{width: 140px; padding-top: 5px;}
.menu_click{position: absolute; top: 35px; right: 10px; z-index: 1;}
.menu_link{display: block;}
.right_arrow::before{content: '\f105'; float: right; padding-right: 40px; font-size: 24px; color: #4b4b4b; font-family: fontAwesome;}
.left_gnb>li>a.on .click_arrow:after{content: '\f107'; float: right; padding-right: 40px; font-size: 24px; color: #fff; font-family: fontAwesome;}
.left_gnb>li>a.on .right_arrow:before{display: none;}

/* 탭 메뉴 이미지 사이즈 */
.icon_size{width: 30px; margin-right: 15px; vertical-align: middle;}


/* 작은 메뉴 */
.little_menu{display: none; height: 100%; background: #fff; }
.little_box{width: 100%; height: 85px; padding: 25px 0; text-align: center; background: #ffc435;}
.little_sidemenu{width: 100%; height: 100%;}
.little_sidemenu .sidemenu_ul{height:auto;}
.little_sidemenu .sidemenu_ul .s_menuli{position: relative; width: 100%; height: 65px; padding:0px;}
.little_sidemenu .sidemenu_ul .s_menuli a{display:block; padding: 15px; text-align:center; }
.s_icon{width: 30px;}
.little_sidemenu li a:hover, 
.little_sidemenu ul li:hover a{border-left: 5px solid #ffc435; color:#FFFFFF; background: #f0f6ff;}
.little_sidemenu li .right_listbox{background: rgb(109,109,109); display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */ height:auto; position:absolute; left: 96px; top: 0; width:200px; z-index:200; /*top:1em; left:0;*/}
.little_sidemenu .sidemenu_ul .s_menuli:hover .right_listbox{display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */}
.little_sidemenu li li {background: rgb(109,109,109); display:block; float:none; margin:0px; padding:0px; width:200px;}
.little_sidemenu li:hover li a{background:none;}
.little_sidemenu .sidemenu_ul .s_menuli ul a{display:block; height:50px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #fff;}
 
.little_sidemenu .sidemenu_ul .s_menuli .right_listbox .blk_li:hover .blk_a{border-left: 5px solid #ffc435 ;background: rgb(71,71,71); color:#ffffff;}

.little_sidemenu .sidemenu_ul .s_menuli .right_listbox .little_small{position: relative;}
.little_sidemenu .sidemenu_ul .s_menuli .right_listbox .little_small:hover .right_listbox2{display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */}
.little_sidemenu .sidemenu_ul .s_menuli .right_listbox .little_small .right_listbox2 .small_li:hover{background: rgb(71,71,71); color:#ffffff;}
.little_sidemenu .sidemenu_ul .s_menuli .right_listbox .little_small .right_listbox2{position:absolute; left: 200px; top: 0; width:200px; background: rgb(109,109,109); display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */ height:auto;  z-index:200; /*top:1em; left:0;*/}
/* ================header 메뉴 css 끝================ */


/* ================main layout css 시작================ */
#main_box{float: right; position: relative; width: 85%; height: auto; min-width:150px; background: #f6f7fa;}

/* 메인 콘텐츠 헤드 */
.main_head{width: 100%; height: 85px; background: #000;}
.main_headtitle{padding: 25px; letter-spacing: -1.5px; font-size: 24px; font-weight: 400; color: #fff;}
.user_info{float: right; margin-right: 30px; padding-top: 9px; letter-spacing: -0.3px; font-size: 14px; font-weight: 500;}
/* 메인 콘텐츠 헤드 */

/* 콘텐츠 박스 상단 모달 & 날짜 체크*/
.content_box{width: 100%; height: auto; margin-bottom: 860px; padding: 50px;}
.change_hd{width: 100%; height: 100px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.change_left{ height: 100%; padding: 27px 40px; border-radius: 10px; text-align: center; background: #fff;}
.title_txt{letter-spacing: -1.5px; font-size: 30px; font-weight: 400; color: #373737;}
.push_modal{margin-left: 25px; padding: 9px 25px; border: 1px solid #c7c7c7; border-radius: 5px; letter-spacing: -0.3px; font-size: 14px; color: #4f4f4f; background: linear-gradient(0deg, #f5f5f5 0%, #fafafa 35%, #ffffff 100%)}

.change_right{height: 100px;}
.date_box{width: 100%; height: 100%; padding-top: 55px;}
.date_li{float: left; height: 40px; margin-right: 10px;}
.dp_click{position: relative;}
.calendar_img{position: absolute; top: 9px; left: 20px;}
.date_chk{width: 150px; height: 100%; border: 1px solid #d9d9d9; border-radius: 5px; padding-right: 20px; text-align: right;}
.date_chk2{width: 180px; height: 100%; border: 1px solid #d9d9d9; border-radius: 5px; padding-right: 20px; text-align: right;}
.day_push{height: 100%; padding: 0 30px; border: none; border-radius: 5px; font-size: 16px; font-weight: 400; color: #fff; background: #ff9435;}
.day_push:hover{background: #262626;}
.day_push2{height: 100%; padding: 0 15px; border: none; border-radius: 5px; font-size: 16px; font-weight: 400; color: #fff; background: #4d83f5;}
.day_push2:hover{background: #262626;}

.modal {display: none; position: fixed; z-index: 1;  left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.modal-content {width: 1100px; height: auto; margin: 5% auto 0; padding: 20px; background-color: #fefefe; border: 1px solid #888; }
.modal_hd{letter-spacing: -0.8px; text-align: center; font-size: 20px; font-weight: 400; color: #333;}
.modal_search{width: 100%; height: 100px; margin: 30px 0; box-shadow: 1px 2px 10px rgba(0,0,0,0.2);}
.team_ul{width: 900px; height: 100px; margin: 0 auto; padding: 20px 0;}
.team_li{float: left;}
.or_text{float: left; margin: 15px 20px; font-size: 18px; font-weight: 500; color: #333;}
.grp_btn{padding: 15px 20px; border: none; border-radius: 5px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #fff; background: #4d83f5; transition: 0.3s;}
.grp_btn:hover{background: #0e58f4;}
.grp_sel{width: 200px; height: 55px; padding: 15px; border: 1px solid #e7e7e7; border-radius: 5px; font-size: 16px; font-weight: 400; color: #333;}
.name_sel{width: 150px; height: 55px; margin-right: 10px; padding: 15px; border: 1px solid #e7e7e7; letter-spacing: -0.5px; border-radius: 5px; font-size: 16px; font-weight: 400; color: #333;}
.chk_sel{width: 130px; height: 55px; padding: 15px; border: 1px solid #4d83f5; border-radius: 5px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #4d83f5; background: #fff;}
.chk_sel:hover{background: #4d83f5; color: #fff;}
.t_listclick{width: 100%; height: auto; margin-bottom: 30px;}
.list_teambtn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #4d83f5;
    border-radius: 5px;
    letter-spacing: -0.5px;
    font-size: 16px;
    font-weight: 400;
    color: #4d83f5;
    background: #fff;
    margin-right: 10px;
}
.list_teambtn:hover{background: #4d83f5; color: #fff;}
.exit_box{cursor:pointer; background-color:#808080; text-align: center; padding: 10px 0;}
.pop_bt{letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff;}
/* 콘텐츠 박스 상단 모달 & 날짜 체크*/

/* 콘텐츠 박스 차트*/
.grape_box{width: 100%; height: 500px; margin: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.grape_box1{float: left;width: 34%; height: 100%; border-radius: 5px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.grape_box2{float: right; width: 65%; height: 100%;  border-radius: 5px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
#chartdiv1{width: 100%; height: 400px;}
#chartdiv2{width: 100%; height: 400px;}
.chart_txt{padding: 20px 35px; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #000;}
/* 콘텐츠 박스 차트*/

/* 콘텐츠 박스 테이블1*/
.computer_tbl{width: 100%; height: auto; padding: 30px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff; }
.guben_tbl{width: 100%; height: auto; text-align: center;}
.member_th{padding-bottom: 20px; border-bottom: 1px solid #535e82; letter-spacing: -0.8px; font-size: 18px; font-weight: 400; color: #595959;}
.member_td{position: relative; padding: 15px 0; border-bottom: 1px solid #e7e7e7;}
.team_guben{padding: 5px 16px; border-radius: 5px; background: #434b5f; letter-spacing: -0.3px; font-weight: 400; color: #fff;}

.progress{width: 100%; height: 50px;}
.progress-wrap{float: left; width: 140px; height: 10px; margin-top: 11px; border-radius: 10px; background: #36c398;  overflow: hidden; position: relative;}
.progress-wrap .progress-bar{background: #e2e2e2; right: 0; position: absolute; top: 0;}
.percent_box{float: left; width: 75px; margin-left: 20px; padding: 5px 0; border-radius: 5px; background: #ff5656; letter-spacing: -0.3px; font-weight: 400; color: #fff;}	
/* 콘텐츠 박스 테이블1*/

/* ================main layout css 끝================ */

/* ================work_set css 시작================ */
/* 콘텐츠 두번째 차트*/
.grape_box3{width: 100%; height: 100%; padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.chart_boxing1{float: left; width: 34%; height: 100%;}
.chart_boxing2{float: left; width: 65%; height: 100%;}
#chartdiv3{width: 100%; height: 400px; }
#chartdiv4{width: 100%; height: 400px;}
.day_view{letter-spacing: -0.2px; font-size: 14px;}
/* 콘텐츠 두번째 차트*/

/* 콘텐츠 박스 테이블2*/
.computer_tbl2{width: 100%; height: auto; padding: 30px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff; }
.guben_tbl2{width: 100%; height: auto; text-align: center;}
.member_th{padding-bottom: 20px; border-bottom: 1px solid #535e82; letter-spacing: -0.8px; font-size: 18px; font-weight: 400; color: #595959;}
.member_td{position: relative; padding: 15px 0; border-bottom: 1px solid #e7e7e7;}
.work_guben1{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #234793; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben2{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #5376db; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben3{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #ffb03a; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben4{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #fa6c6c; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben5{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #816bf0; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben6{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #19afb1; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben7{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #bfb3ed; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben8{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #67b7dc; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.work_guben9{width: 155px; margin: 0 auto; padding: 5px 0; border-radius: 5px; background: #729aef; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.list_guben{display: inline-block; margin-right:2px; padding: 5px 16px; border-radius: 5px; background: #434b5f; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.list_guben:hover{background: #262626;}
.progg_box{width: 270px; height: 35px;  margin: 0 auto;}
.program_icon{width: 35px;}
/* 콘텐츠 박스 테이블2*/

/* ================work_set css 끝================ */

/* ================agent_set css 시작================ */
.agent_box{width: 100%; height: auto; padding: 30px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.agent_ul{width: 100%; height: auto;}
.agent_li{width: 100%; height: auto; margin-bottom: 50px;}
.switch {position: relative; display: inline-block; width: 60px; height: 34px; vertical-align:middle;}

/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider {background-color: #ff9000;}
input:focus + .slider {box-shadow: 0 0 1px #ff9000;}
input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
/* Rounded sliders */
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
.swtich_txt{margin:0px; display:inline-block; font-size:15px; font-weight:bold;}
.switch_righttxt{display: inline-block; margin-left: 15px; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #000;}
.red_txt{margin-left: 15px; color: #ff7777;}
.switch_lasttxt{letter-spacing: -0.3px; font-size: 16px; font-weight: 500; color: #505050;}
/* ================agent_set css 끝================ */

/* ================account_set css 시작================ */
.account_box{width: 100%; height: auto; margin-bottom: 20px; padding: 30px; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.account_box1{width: 100%; height: auto; margin-bottom: 20px; padding: 30px 0; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.filelist_box{width: 100%; height: auto; margin-top: 20px; margin-bottom: 20px; padding: 30px 0; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.account_1{letter-spacing: -1px; font-size: 20px; font-weight: 400; color: #000;}
.pw_push{display: inline-block; margin-left: 250px; padding: 10px 30px; border-radius: 7px; font-size: 16px; font-weight: 400; color: #fff; background: #434b5f;}
.pw_push2{display: inline-block; float: right; margin-left: 250px; padding: 10px 30px; border-radius: 7px; font-size: 16px; font-weight: 400; color: #fff; background: #434b5f;}
.pw_push3{display: inline-block; margin-left: 30px; padding: 10px 30px; border-radius: 7px; font-size: 16px; font-weight: 400; color: #fff; background: #434b5f;}
.account_content{width: 600px; height: auto; margin: 15% auto 15%; padding: 20px; background-color: #fefefe; border: 1px solid #888;}
.account_content2{width: 600px; height: auto; margin: 15% auto 15%; padding: 20px; background-color: #fefefe; border: 1px solid #888;}
.modal_hd2{margin-bottom: 50px; letter-spacing: -0.8px; text-align: left; font-size: 20px; font-weight: 400; color: #333;}
.act_boxing{width: 100%; height: auto; margin-bottom: 50px;}
.account_ul{width: 100%; height: auto;}
.account_li{width: 100%;  margin-bottom: 20px;}
.label_txt{margin-bottom: 10px; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #333;}
.pwd_write{width: 100%; height: 50px; padding-left: 20px; border-radius: 5px; border: 1px solid #e7e7e7; font-weight: 400; font-size: 16px; color: #333;}
.last_btnbox{width: 300px; height: 55px; margin: 0 auto;}
.exit_box2 {
    float: left;
    width: 138px;
    height: 100%;
    padding: 13px;
    border-radius: 7px;
    text-align: center;
    background: #808080;
}
.exit_box3{float: left; width: 138px; height: 100%; padding: 13px; border-radius: 7px; text-align: center; background: #4d83f5;}
.exit_boxRed {
    float: left;
    width: 138px;
    height: 100%;
    padding: 13px;
    border-radius: 7px;
    text-align: center;
    background: #CD1F48;
}
.pw_okgo{cursor: pointer; border: none; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff; background: none;}

.line_box{border-bottom: 1px solid #e7e7e7;}
.country_box{width: 100%; height: 65px; padding: 0 30px 20px;}
.country_box2{width: 100%; height: auto; padding: 30px;}
.country_box3{width: 100%; height: auto; padding: 30px 30px 0;}
.country_box4{width: 100%; height: auto; padding: 0 30px 20px;}
.country_ul{width: 100%; height: auto; padding: 0 45px;}
.country_li{width: 100%; height: auto; margin-bottom: 20px; list-style: square;}
.language_box{letter-spacing: -0.6px; font-size: 18px; font-weight: 400; color: #000;}
.lang_sel{width: 200px; height: 45px; margin-left: 50px; padding-left: 15px; border: 1px solid #e7e7e7; font-size: 16px; font-weight: 400; color: #848484;}
.lang_sel2{width: 200px; height: 45px; margin: 0 20px; padding-left: 15px; border: 1px solid #e7e7e7; font-size: 16px; font-weight: 400; color: #848484;}
.time_txt{margin-left: 50px;  color: #848484;}
.time_txt2{color: #848484;}
.act_red{margin-bottom: 10px; letter-spacing: -0.3px; font-size: 16px; font-weight: 400; color: #ff7777;}
.license_txt{margin-left: 50px;  color: #848484;}

.modal2{display: none; position: fixed; z-index: 1;  left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.agent_mdtxt{margin-bottom: 40px; text-align: center; letter-spacing: -0.8px; font-size: 18px; font-weight: 500; color: #333;}
.red_txt3{color: #ff7777;}
.last_btnbox2{width: 500px; height: 55px; margin: 0 auto;}
.chang_okagent{display: block; cursor: pointer; border: none; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff; background: none;}
.exit_box4 {
    float: left;
    width: 240px;
    height: 100%;
    padding: 13px;
    border-radius: 7px;
    text-align: center;
    background: #808080;
}
.exit_box5{float: left; width: 240px; height: 100%; padding: 13px; border-radius: 7px; text-align: center; background: #4d83f5;}
/* ================account_set css 끝================ */

/* ================group_set css 시작================ */
.red_txt2{font-size: 16px; margin-left: 15px; color: #ff7777;}
.add_push{display: inline-block; margin-left: 30px; padding: 10px 30px; border-radius: 7px; font-size: 16px; font-weight: 400; color: #fff; background: #434b5f;}
.add_txt{width: 300px; height: 45px; margin-left: 10px; padding-left: 15px; border: 1px solid #e7e7e7; font-size: 16px; font-weight: 400; color: #848484;}
.add_okagent{display: block; cursor: pointer; border: none; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff; background: none;}
/* ================group_set css 끝================ */

/* ================pglist_set css 시작================ */
.pg_listbox{width: 100%; height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 30px 20px;}
.program_txt1{ letter-spacing: -1px; font-size: 20px; font-weight: 400; color: #000;}
.pg_sel{width: 180px; height: 55px; padding: 15px; border: 1px solid #e7e7e7; border-radius: 7px; font-size: 16px; font-weight: 400; color: #333;}
.pg_sel2{width: 100%; height: 55px; padding: 15px; border: 1px solid #e7e7e7; border-radius: 7px; font-size: 16px; font-weight: 400; color: #333;}
.search_ul{height: 100%;}
.search_li{float: left; margin-right: 10px;}
.pg_srcbox{width: 300px; height: 55px; padding: 15px; border: 1px solid #e7e7e7; border-radius: 7px; font-size: 16px; font-weight: 400; color: #333;}
.pg_sbtn{width: 130px; height: 55px; padding: 15px; border: none; border-radius: 7px; background: #434b5f; font-size: 16px; font-weight: 400; color: #fff;}
.yellow_c{margin-left: 5px; color: #feb501;}

.pg_tblbox{width: 97%; height: auto; margin: 0 auto; padding: 30px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2);}
.program_tbl{width: 100%; height: auto; text-align: center;}
.pg_th{padding: 20px 0; border-bottom: 1px solid #535e82; letter-spacing: -0.8px; font-size: 18px; font-weight: 400; color: #616161;}
.pg_td{padding: 15px 0; border-bottom: 1px solid #e7e7e7;}
.yellow_bg{color: #fff; background: #ffc435;}
.r_line{border-right: 1px solid #c3c5cc;}

.list_guben2{padding: 5px 16px; border-radius: 5px; background: #434b5f; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.list_guben2:hover{background: #262626;}
.list_guben3{padding: 5px 16px; border-radius: 5px; background: #434b5f; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.list_guben3:hover{background: #262626;}
/* ================pglist_set css 끝================ */

/* ================gallery css 시작================ */
.capture_sel{width: 180px; height: 40px; padding: 0 15px; border: 1px solid #e7e7e7; border-radius: 7px; font-size: 16px; font-weight: 400; color: #333; background-color: #fff;}
.cap_srcbox{width: 300px; height: 40px; padding: 0 15px; border: 1px solid #e7e7e7; border-radius: 7px; font-size: 16px; font-weight: 400; color: #333;}
.cap_sbtn{width: 130px; height: 40px; padding: 0 15px; border: none; border-radius: 7px; background: #434b5f; font-size: 16px; font-weight: 400; color: #fff;}
.capture_box{width: 100%; height: auto; margin: 20px 0; padding: 30px 0; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}

.picture_box{width: 100%; height: auto; padding: 0 30px;}
.picture_ul{width: 100%; height: auto;}
.picture_li{width: 100%; height: 100%; padding:20px 0; margin-right: 20px; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.picture_title{margin-bottom: 20px; text-align: center; letter-spacing: -0.8px; font-size: 16px; font-weight: 400;}
.pic_name{color: #4d83f5;}
.pic_rank{color: #333;}
.pic_day, .pic_time{letter-spacing: -0.3px; font-size: 14px; color: #616161;}
.data_picture{width: 100%; height: 100%; overflow: hidden;}
.pic_img {
    object-fit: scale-down;
    max-height: 160px;
width: 100%;
}
    .pic_img.on {
        max-height: none;
        width: auto;
        height: calc(100% - 40px);
        object-fit: contain;
    }
.pic_program{width: 100%; height: 50px; padding: 10px;}
.pic_icon{width: 30px;}
.pic_ex{padding: 0 10px; letter-spacing: -0.3px; font-size: 18px; font-weight: 400; color: #333; word-break: break-all;}
.picture_tbl{width: 100%; height: auto; table-layout: fixed;}
.pic_td{padding: 15px 5px; box-sizing: border-box; vertical-align: baseline;}
.pic_td2{padding: 10px 5px 0; letter-spacing: -0.8px; font-size: 18px; font-weight: 600; color: #616161;}
.galley_md{cursor: pointer;}
.b_gllbox{width: 100%; height: 85px;}
.l_gllbox{float: left;}
.r_gllbox{float: right; margin-top: 20px;}
.l_gllboxmt {
    float: left;
    margin-top: 20px;
}
#image-gallery center{
    height: 100%;
}

.gall_imgbox {
    width: 100%;
    height: 640px;
}
.exit_gallbox{float: left; margin-right: 5px; cursor:pointer; border-radius: 7px;  background-color:#0e58f4; text-align: center; padding: 10px 0;}
.arrow_box{float: left;}
.pop_bt2{padding: 10px 30px; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff;}

.arrow_btn{cursor: pointer; padding: 14px 30px; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff; border: none; border-radius: 7px; background: #4d83f5;}
.arrow_btn:hover{background: #0e58f4;}
.pic_gallimg{width: 100%;}
.tbl_paging2{width: 100%; height: auto; padding: 30px;}
.prg_name{margin-left: 10px; font-size: 16px; font-weight: 400; color: #333;}
.plus_click{width: 100%; height: auto; background: #fff; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2);}
.plus_btn{cursor: pointer; width: 100%; height: 50px; border: none; background: none; border-radius: 7px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #333;}
/* ================gallery css 끝================ */

/* ================userlist_set css 시작================ */
.red_user{font-size: 14px; font-weight: 400; color: #ff7777;}
.mb_textbox{overflow: auto; width: 100%; height: 150px; padding: 10px; resize: none; border: 1px solid #e7e7e7; border-radius: 7px; font-size: 16px; font-weight: 400; background: #fff;}
.mb_tblbox{width: 100%; height: auto;}
.mb_td{padding: 10px;}
.list_guben1{padding: 5px 16px; margin-right:2px; border-radius: 5px; background: #434b5f; letter-spacing: -0.3px; font-weight: 400; color: #fff; margin-left:4px}
.list_guben1:hover{background: #262626;}
.mb_content{width: 600px; height: auto; margin: 4% auto 4%; padding: 20px; background-color: #fefefe; border: 1px solid #888;}
/* ================userlist_set css 끝================ */

/* ================extlist_set css 시작================ */
.ex_title{margin-bottom: 15px; letter-spacing: -1px; text-align: center; font-size: 24px; font-weight: 400; color: #333;}
/* ================extlist_set css 끝================ */

/* ================task_set css 시작================ */
.task_time{letter-spacing: -0.7px; font-size: 18px; font-weight: 400; color: #000;}
.act_red1{float: right; letter-spacing: -0.3px; font-size: 16px; font-weight: 400; color: #ff7777;}
.task_ul{width: 100%; height: 120px; padding: 0 45px;}
.task_li{width: 100%; height: 50px; margin-bottom: 20px;}

.check_task {position: relative; float: left; margin-top: 10px;}
.check_task input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.check_task input[type="radio"] + label{display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.check_task input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: 0px; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #4d83f5; border-radius: 100%; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); }
.check_task input[type="radio"] + label:active:before, .check_task input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
.check_task input[type="radio"]:checked + label:before { background: #fff; border-color: #4d83f5; }
.check_task input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 5px; left: 5px; width: 13px; height: 13px; background: #4d83f5; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }

.blue_task{letter-spacing: -0.7px; font-size: 18px; font-weight: 400; color: #4d83f5;}
.time_box1{float: left; margin-left: 50px;}
.t_smallbox{letter-spacing: -0.8px; font-size: 18px; font-weight: 400;}
.time_sel{width: 200px; height: 45px; margin-left: 20px; padding-left: 15px; border: 1px solid #e7e7e7; font-size: 16px; font-weight: 400; color: #848484;}
/* ================task_set css 끝================ */

/* ================capture_set css 시작================ */
.prt_touch{cursor: pointer; margin-left: 20px; padding: 10px 30px; border: none; border-radius: 7px; font-size: 16px; font-weight: 400; color: #fff; background: #434b5f;}
.cpe_txt{margin-left: 20px;}
.cap_push2{display: inline-block; float: right; margin-left: 250px; padding: 10px 30px; border-radius: 7px; font-size: 16px; font-weight: 400; color: #fff; background: #434b5f;}
/* ================capture_set css 끝================ */

/* ================inhibition1_set css 시작================ */
.inhb_md{display: block; height: 55px; padding: 15px; border: none; border-radius: 7px; background: #4d83f5; font-size: 16px; font-weight: 400; color: #fff; transition: 0.3s;}
.inhb_md:hover{background: #0e58f4;}
.inhb_okgo{cursor: pointer; display: block; border: none; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff; background: none;}
.edit_click{background: #4d83f5;}
.edit_click:hover{background: #0e58f4;}
.del_click{border: none; font-size: 16px;}
/* ================inhibition1_set css 끝================ */

/* ================inhibition2_set css 시작================ */
.inhb2_md{display: block; height: 55px; padding: 15px; border: none; border-radius: 7px; background: #4d83f5; font-size: 16px; font-weight: 400; color: #fff; transition: 0.3s;}
.inhb2_md:hover{background: #0e58f4;}
/* ================inhibition2_set css 끝================ */

/* ================faq css 시작================ */
.tab_wrap{width: 100%; height: 1100px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.tab_menu_container{width: 23%; height: auto; margin-right: 30px;}
.tap_ul{width: 100%; height: auto;}
.tap_li{width: 100%; height: 240px; margin-bottom: 20px;  padding: 30px; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.tab_box_container{width: 73%; height: auto;}
.tap_text1{margin-bottom: 10px; letter-spacing: -1.5px; font-size: 26px; font-weight: 500; color: #4d83f5;}
.tap_text2{letter-spacing: -1.3px; font-size: 20px; font-weight: 400; color: #333;}
.start_txt{margin-left: 45px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #a5a5a5;}
.big_con{margin-right: 10px; font-size: 40px;}
.tab_menu_btn {transition:0.3s all;}
.tab_menu_btn.on{color:#fff; background: #4d83f5;}
.tab_menu_btn.on .tap_text1{color:#fff;}
.tab_menu_btn.on .tap_text2{color:#fff;}
.tab_box{display:none; width: 100%; height: auto; padding: 30px; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
.tab_box.on {
  display:block;
}
.faq_box{width: 100%; height: auto; margin-bottom: 20px; padding: 30px; border-radius: 7px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}

.aco_ul{width: 100%; height: auto;}
.aco_view{padding: 20px 10px; border-bottom: 1px solid #e7e7e7; margin-bottom: 5px; }
.aco_li{padding: 20px; margin-bottom: 5px; display: none; }
.aco_txt{font-size: 20px; font-weight: 400; color: #333;}

.aco_view.on .click_minus:after{content: '\f056'; float: right; padding-right: 40px; font-size: 24px; color: #333; font-family: fontAwesome;}
.aco_view.on .right_plus:before{display: none;}
.right_plus::before{content: '\f055'; float: right; padding-right: 40px; font-size: 24px; color: #4b4b4b; font-family: fontAwesome;}
.aco_view.on .click_minus:after{content: '\f056'; float: right; padding-right: 40px; font-size: 24px; color: #4b4b4b; font-family: fontAwesome;}
.aco_view.on .right_plus:before{display: none;}

.service_box{width: 100%; height: auto; padding: 30px; border-bottom: 1px solid #e7e7e7;}
.service_title{font-size: 30px; font-weight: 400; color: #4d83f5;}
.last_border{border-bottom: none;}
.srv_textbox{overflow: auto; width: 100%; height: 300px; margin-top: 20px; resize: none; border: none; font-size: 16px; font-weight: 400; background: none;}
/* ================faq css 끝================ */

#chartdiv_file1{width: 100%; height: 400px;}
#chartdiv_file2{width: 100%; height: 400px;}

.flist_guben{padding: 5px 16px; border-radius: 5px; background: #434b5f; letter-spacing: -0.3px; font-weight: 400; color: #fff;}
.flist_guben:hover{background: #262626;}


/* ================login css 끝================ */
#login_bigbox{position: fixed; width: 100%; height: 100%; background: url('../img/login_bg2.png') no-repeat; background-size: cover; background-position: 100%; overflow-y: scroll;}
.login_midbox{width: 90%; height: auto; margin: 6% auto 6%; text-align: center;}
.login_ul{width: 100%; height: auto;}
.login_li{width: 100%; height: auto; margin-bottom: 10px;}
.login_title{margin-bottom: 40px; line-height: 75px; letter-spacing: -4px; font-size: 90px; font-weight: 400; color: #4b4b4b;}
.red_title{letter-spacing: -3px; font-size: 56px; color: #c63d1e;}
.login_putbox{width: 250px; height: 60px; border: none; border-radius: 5px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff; text-align: center; font-size: 16px; font-weight: 400; color: #333;}
.login_btbox{width: 250px; height: 60px; border: none; border-radius: 5px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #4b4b4b; text-align: center; font-size: 16px; font-weight: 400; color: #fff;}
.login_google_box{width: 250px; height: auto; border: none; border-radius: 5px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); }
.sub_link{font-size: 14px; font-weight: 400; color: #333;}
.sub_link:hover{color: #ffc435;}
.mid_line{margin: 0 10px;}
/* ================login css 끝================ */

/* ================업무성취도 css 시작================ */
.change_hd2{width: 100%; height: auto; margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.change_left2{height: auto; padding: 0 40px;  border-radius: 7px; text-align: center; background: #fff;}
.ach_ul{width: 100%; height: 80px; padding: 20px 0;}
.ach_li{float: left;}
.grp_btn2{padding: 8px 20px; border: none; border-radius: 5px; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #fff; background: #5d6579; transition: 0.3s;}
.grp_btn2:hover{background: #3e4453;}
.ach_sel{margin-left: 25px; padding: 9px 25px; border: 1px solid #c7c7c7; border-radius: 5px; letter-spacing: -0.3px; font-size: 14px; color: #4f4f4f; background: linear-gradient(0deg, #f5f5f5 0%, #fafafa 35%, #ffffff 100%)}
.ach_sel:hover{background: #4d83f5; color: #fff;}
.grp_sel2{width: 150px; height: 41px; padding: 0 15px; border: 1px solid #e7e7e7; border-radius: 5px; font-size: 16px; font-weight: 400; color: #333;}
.name_sel2{width: 200px; height: 41px; margin-right: 10px; padding: 0 15px; border: 1px solid #e7e7e7; letter-spacing: -0.5px; border-radius: 5px; font-size: 16px; font-weight: 400; color: #333;}
.or_text2{float: left; margin: 10px 20px; font-size: 18px; font-weight: 500; color: #333;}
.change_right2{height: 100px;}
.date_box2{width: 100%; height: 100%; padding-top: 25px;}
.ach_listclick{width: 100%; height: auto; margin-bottom: 30px; border-radius: 7px; background: #fff;}
.team_listbox{width: 100%; height: auto; padding: 20px;}
.list_teambtn2{display: inline-block; width: 140px; padding: 10px 0; text-align: center; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #000;}
.list_teambtn2:hover{border-radius: 7px; background: #3e4453; color: #fff;}
.list_teambtn2:hover .jum_circle{display: none;}
.jum_circle{font-size: 10px; color: #cacdd8; margin-right: 15px;}
.line_gray{border-bottom: 1px solid #e7e7e7;}
.detail_task{padding: 10px 30px; font-size: 18px; font-weight: 400; color: #000;}
.list_task{display: inline-block; text-align: center; padding: 8px;}
.task_grapbox{width: 100%; height: 1200px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.list_grapb{width: 49%; height: 500px; margin-bottom: 25px; border-radius: 5px; box-shadow: 1px 3px 10px rgba(0,0,0,0.2); background: #fff;}
#ach_chartdiv, #ach_chartdiv1, #ach_chartdiv2, #ach_chartdiv3{width: 100%; height: 400px;}
/* ================업무성취도 css 끝================ */

/* ================회원가입&비밀번호찾기 css 시작================ */
.regis_text{margin-left: 10px; letter-spacing: -0.3px; font-size: 14px; font-weight: 400; color: #898989;}
.reg-content{width: 800px; height: auto; margin: 4% auto 4%; padding: 20px; background-color: #fefefe; border: 1px solid #888; }
.regok_btn{cursor: pointer; padding: 10px 30px; letter-spacing: -0.8px; font-size: 20px; font-weight: 400; color: #fff; border: none; border-radius: 7px; background: #fb6f4e;}
.regok_btn:hover{background: #e4431e;}
.reg_infobox{width: 100%; height: auto; margin: 20px 0;}
.reg_tbl{width: 100%; height: auto;}
.reg_title{padding: 10px 0; font-size: 16px; font-weight: 400; color: #333;}
.reg_infotext{width: 100%; padding: 10px 15px;}
.reg_infotext2{width: 50%; padding: 10px 15px;}
.reg_putbox{width: 100%; height: 45px; padding: 0 10px; border: 1px solid #e7e7e7; border-radius: 7px; letter-spacing: -0.5px;}
.reg_putbox2{width: 172px; height: 45px; padding: 0 10px; border: 1px solid #e7e7e7; border-radius: 7px; letter-spacing: -0.5px;}
.injeung1{width: 172px; height: 45px; padding: 0 10px; border: none; border-radius: 7px; background: #848484; letter-spacing: -0.5px; font-size: 16px; font-weight: 400; color: #fff; vertical-align: middle;}
.injeung1:hover{background: #3c3c3c;}
.eyong_view {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 7px;
    letter-spacing: -0.5px;
    resize: none;
    background: #fff;
    overflow-x: hidden;
}
.exit_gallbox2{float: left; margin-right: 5px; cursor:pointer; border-radius: 7px;  background-color:#3c3c3c; text-align: center; padding: 10px 0;}
.del_gallbox {
    float: left;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 7px;
    background-color: #CD1F48;
    text-align: center;
    padding: 10px 0;
}
.checkbox-container {position: relative;}
.mb_title{letter-spacing: -3px; text-align: center; font-size: 50px; font-weight: 400; color: #4b4c47;}
.mb_title2{letter-spacing: -3px; text-align: center; font-size: 40px; font-weight: 400; color: #4b4c47;}

input[id="chkbox"]{display:none;}
input[id="chkbox"] + label em {display:inline-block;width:25px;height:25px;margin-right:5px;background:url('../img/bg_chkbox.gif') 0 0 no-repeat;vertical-align:middle;}
input[id="chkbox"]:checked + label em {background-position:-38px 0;}

.pwd_content{width: 500px; height: auto; margin: 10% auto 0; padding: 20px; background-color: #fefefe; border: 1px solid #888; }
.pw_infobox{width: 100%; height: auto; margin: 30px auto;}
.pw_looktxt{letter-spacing: -0.8px; font-size: 16px; font-weight: 400; color: #333;}
/* ================회원가입&비밀번호찾기 css 끝================ */

 
@media(max-width: 1900px){
	.list_grapb{width: 48%;}
} 

@media(max-width: 1663px){
	.team_guben{padding: 5px; font-size: 14px;}
	.percent_box{margin-left: 10px; width: 50px; font-size: 14px;}
	.list_guben{padding: 5px; font-size: 14px;}
}
@media(max-width: 1450px){
	.progress-wrap{width: 100px;}
}
@media(max-width: 1400px){
	.left_gnb>li>a{font-size: 16px;}
	.left_gnb>li>ul>li>a{font-size: 14px; padding: 10px 0 10px 35px;}
	.dp3_li{font-size: 14px; padding: 10px 0 10px 50px;}
	.progress-wrap{margin-bottom: 5px;}
	.list_guben{width: 70px; margin: 5px;}
}
@media(max-width: 1280px){
	body{width: 1280px; overflow-x: scroll;}
}