@charset "utf-8";
/* version 1.0 | 2019-04-11 */


/********************************************************************************************************
  로그인 - login.html
*********************************************************************************************************/
/* 기본 */
.login_wrap { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
.login_wrap .login { height: 100%; overflow-y: auto; box-sizing: border-box; }
.login_wrap .login > div { max-width: 600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }

.login_wrap .login .login_head { display: table; width: 100%; margin: 40px auto 20px; text-align: center; table-layout: fixed; }
.login_wrap .login_logo { display: table-cell; padding: 10px 0; text-align: center; vertical-align: middle; box-sizing: border-box; }
.login_wrap .login_logo img { width: 60%; max-width: 150px; vertical-align: middle; } /* 실제 로고에 맞춰 조정할 것 */

.login_wrap .login .login_body { padding-bottom: 20px; }
.login_wrap .login_note { margin: 0 20px 10px; color: #fc6e57; font-size: 0.9em; text-align: center; word-break: keep-all; word-wrap: break-word; line-height: 1.3; }
.login_wrap .login_select { margin-bottom: 10px; padding: 0 16px; border: 1px solid rgba(62, 75, 103, 0.2); color: #818997; border-radius: 3px; box-sizing: border-box; background: url('../image/icon/form_select_arrow.png') right 15px center / 7.5px 4.5px no-repeat; }
.login_wrap .login_select select { width: 100%; height: 40px; line-height: 40px; padding-right: 16px; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* background: url('../image/icon/form_select_arrow.png') right center / 7.5px 4.5px no-repeat; */}
.login_wrap .login_select.select_lang { float: right; text-align: right; }
.login_wrap .login_select.select_lang:after { content: ""; display: block; clear: both; }
.login_wrap .login_input { clear: both; position: relative; margin-bottom: 10px; padding-left: 16px; padding-right: 45px; border: 1px solid rgba(62, 75, 103, 0.2); border-radius: 3px; box-sizing: border-box; }
.login_wrap .login_input input { width: 100%; line-height: 40px; background-color: transparent; font-size: 16px; }
.login_wrap .login_input.existing { color: #818997; background-color: rgba(129, 137, 151, 0.1); }
.login_wrap .login_btn { margin-top: 20px; }
.login_wrap .login_btn button.eb_btn { display: block; width: 100%; height: 44px; border: 1px solid #fc6e57; border-radius: 3px; color: #fc6e57; text-align: center; box-sizing: border-box; }
.login_wrap .login_btn button.login_enter { color: #fff; background-color: #fc6e57; opacity: 0.4; }
.login_wrap .login_btn button.login_enter.available { opacity: 1; }
.login_wrap .login_btn button.login_diffrent { margin-top: 10px; color: #fc6e57; border: none !important; }
.login_wrap .login_checkbox { margin-top: 15px; }
.login_wrap .login_checkbox ul,
.login_wrap .login_checkbox li { margin: 0; padding: 0; list-style: none; }
.login_wrap .login_checkbox li { display: inline-block; margin-right: 1em; }
.login_wrap .login_checkbox input { width: 20px; height: 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; vertical-align: middle; -webkit-appearance: none; appearance: none; }
.login_wrap .login_checkbox input:checked { background: url('../image/login/login_check.png') center / 20px #f6f8ff no-repeat; }
.login_wrap .login_checkbox input + label { display: inline-block; height: 20px; line-height: 20px; margin-left: 3px; font-size: 13px; vertical-align: middle; }
.login_wrap .login_checkbox input:focus span.btn_textclear { display: block; }
.login_wrap .login_input span.btn_textclear { /*display: none;*/ position: absolute; width: 40px; height: 40px; top: 0; right: 0; background: url('../image/login/login_reset.png') center / 16px no-repeat; text-indent: -9999px; cursor: pointer; }
.login_wrap .login_fingerprint { margin-top: 20px; padding: 15px 20px 0; border-top: 1px solid rgba(62, 75, 103, 0.2); text-align: center; }
.login_wrap .login_fingerprint .btn_fingerprint { display: inline-block; width: 32px; height: 36px; margin-bottom: 5px; padding: 10px; background: url('../image/login/login_fingerprint_bk.png') center / 32px 36px no-repeat; } /* _bk (어두운 색 / 밝은 배경) | _wh (밝은 색 / 어두운 배경) */
.login_wrap .login_fingerprint .btn_faceid { display: inline-block; width: 36px; height: 36px; margin-bottom: 5px; padding: 10px; background: url('../image/login/login_faceid_bk.png') center / 36px no-repeat; } /* _bk (어두운 색 / 밝은 배경) | _wh (밝은 색 / 어두운 배경) */

.login_wrap .login_fingerprint p { margin: 0; }
.login_wrap .login_fingerprint p strong { color: #fc6e57; }

.login_wrap .login .login_foot { padding-bottom: 30px; }
.login_wrap .login_foot .login_btn button.eb_btn {}


/* 인증페이지 */
.certification {text-align: center}
.certification .fingerprint { display: inline-block; width: 225px; height: 225px; margin-bottom: 5px; padding: 10px; background: url('../image/login/login_fingerprint_bk.png') center / 40% no-repeat; } /* _bk (어두운 색 / 밝은 배경) | _wh (밝은 색 / 어두운 배경) */
.certification .faceid { display: inline-block; width: 225px; height: 225px; margin-bottom: 5px; padding: 10px; background: url('../image/login/login_faceid_bk.png') center / 40% no-repeat; } /* _bk (어두운 색 / 밝은 배경) | _wh (밝은 색 / 어두운 배경) */
.certification p strong { color: #fc6e57; }

/* 특정색 배경 color set */
.login_wrap.bg_colored { background-color: #31364c/*#3e4b67*/; color: #fff; }
.login_wrap.bg_colored .login_input,
.login_wrap.bg_colored .login_select { border: 1px solid transparent; background-color: rgba(255, 255, 255, 0.15); color: #fff; }
.login_wrap.bg_colored .login_input.existing { border-color: rgba(0, 0, 0, 0.18); background-color: transparent; }
.login_wrap.bg_colored .login_fingerprint { border-top: 1px solid rgba(129, 137, 151, 0.4); }
.login_wrap.bg_colored .login_fingerprint .btn_fingerprint { background-image: url('../image/login/login_fingerprint_wh.png'); }
.login_wrap.bg_colored .login_btn button.eb_btn { border: 1px solid rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6); }
.login_wrap.bg_colored .login_btn button.login_enter { background-color: #fff; color: #31364c; }
.login_wrap.bg_colored .login_checkbox input { border: 1px solid rgba(255, 255, 255, 0.4); }

/* OTP 로그인 */
.login_otp { width: 360px; margin-top: 0; margin-left: -180px; }
.login_otp.otp_regist { margin-top:-170px; }
.login_otp.otp_verify { margin-top:-130px; }

.login_otp p { margin: 0; }
.login_otp p em { color: #303030; font-style: normal; font-weight: bold; }
.login_otp .input { position: relative; }
.login_otp .input input { width: 100%; line-height: 36px; }
.login_otp ol { margin: 0; padding: 0; }
.login_otp li { list-style-position: inside; }
.login_otp li + li { margin-top: 16px; }
.login_otp li::marker,
.login_otp .title { font-size: 1.1em; font-weight: bold; }
.login_otp li p { margin: 3px 0 8px; color: #707070; }
.login_otp .error_msg { color: #fc6e57; font-size: 0.9em; text-align: center; }
.login_otp .error_msg p { margin: 12px 0 -12px; visibility: hidden; }
.login_otp .error_msg.on p { visibility: visible; }

.login_otp .otp_key { padding: 0 12px; padding-right: 36px; border: 1px solid rgba(62, 75, 103, 0.2); background-color: rgba(129, 137, 151, 0.1); color: #818997; border-radius: 3px; }
.login_otp .otp_key .otp_copy { position: absolute; right: 0; top: 0; }
.login_otp .otp_key input { background-color: transparent; }
.login_otp .otp_code { width: 10em; margin: 0 auto; }
.login_otp .otp_code input { text-align: center; letter-spacing: 0.5em; }

.login_otp.otp_verify img { display: block; width: 60px; margin: 3px auto 8px; }
.login_otp.otp_verify p { word-break: keep-all; word-wrap: break-word; }

.login_otp .dialog_footer .btn_wrap { text-align: center; }


@media all and (max-width:639px) {
}


/********************************************************************************************************
	메인페이지
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  헤더
-------------------------------------------------------------------------------*/
body.dummy_bg > .layout { background-color: #ebeef1; }
body.main_bg .contents { background: #ebeef1; }
body.main_bg div.layout.no_bg .contents { background: #ffffff; }
body.main_bg div.layout.no_bg .contents.anno_contents,
body div.layout .contents.anno_contents { background: #f5f5f5; }

div.main_header { z-index: 100; position: absolute; top: 0px; left: 0px; width: 100%; background: #31364c; }
div.main_header .header_wrap { position: relative; width: 100%; height: 44px; text-align: right; }
div.main_header .header_wrap .logo { z-index: 10; position: absolute; top: 12px; left: 20px; width: 80px; }
div.main_header .header_wrap .btn_menu { margin-right: 5px; }
div.main_header .header_wrap .btn_search_white { margin-right: -10px; }




/*------------------------------------------------------------------------------
  기본
-------------------------------------------------------------------------------*/
/* 공통 */
div.main_wrap { width: 100%; height: 100%; padding: 0 0 0 0;  box-sizing: border-box;  }
div.main_arrow {  z-index: 100; position: fixed; top: 50%; width: 27px; height: 44px;text-indent: -9999px; } 
div.main_arrow.next { background: url('../image/main/main_arrow_next.png') center / cover no-repeat; right: 5px; left: auto; position: absolute; display: none; }
div.main_arrow.prev { background: url('../image/main/main_arrow_prev.png') center / cover no-repeat; ight: auto; left: 5px; position: absolute; display: none; }

/* 상단 */
div.main_wrap .main_top { width: 100%; min-height: 200px; padding: 25px 20px 0 20px; background: #31364c; box-sizing: border-box; }
div.main_wrap .main_top .profile_wrap { position: relative; width: 100%; height: 70px; }
div.main_wrap .main_top .profile_wrap .profile_img { float: left; position: relative; width: 50px; height: 50px; border-radius: 50%; border: solid 4px #ffffff; background-color: #fff; box-sizing: border-box; }
div.main_wrap .main_top .profile_wrap .profile_img img { width: 100%; height: 100%; border-radius: 50px; overflow: hidden;}
div.main_wrap .main_top .profile_wrap .profile_img .btn_setting { position: absolute; bottom: -5px; right: -5px; }
div.main_wrap .main_top .profile_wrap .profile_info { float: left; width: 50%; padding: 7px 0 0 12px; line-height: 140%; box-sizing: border-box; }
div.main_wrap .main_top .profile_wrap .profile_info .my_name { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; color: #ffffff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap}
div.main_wrap .main_top .profile_wrap .profile_info .my_name > .name { margin-right: 2px; font-weight: bold; }
div.main_wrap .main_top .profile_wrap .profile_info .my_division { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; color: rgba(255, 255, 255, 0.6); font-size: 13px; text-overflow: ellipsis; white-space: nowrap }
div.main_wrap .main_top .profile_wrap .profile_menu { position: absolute; top: 7px; right: 0px; }
div.main_wrap .main_top .profile_wrap .profile_menu ul {  margin: 0; padding: 0;}
div.main_wrap .main_top .profile_wrap .profile_menu ul > li { float: left; position: relative; list-style: none; margin: 0; padding: 0 0 0 10px;} 
div.main_wrap .main_top .profile_wrap .profile_menu ul > li .m_menu_count { position: absolute; top: -5px; left: 50%; margin-left: 12px;}
div.main_wrap .main_top .notice_wrap { position: relative; width: 100%; height: 50px; background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; }
div.main_wrap .main_top .notice_wrap .notice_subject { position: relative; height: 50px; line-height: 50px; margin: 0; padding: 0; list-style: none; color: #ffffff; font-size: 14px; overflow: hidden; }
div.main_wrap .main_top .notice_wrap .notice_subject li { position: relative; overflow: hidden; padding-right: 90px; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; }
div.main_wrap .main_top .notice_wrap .notice_subject .icon_mark { vertical-align: middle; margin: -3px 5px 0 15px;  }
div.main_wrap .main_top .notice_wrap .notice_subject .notice_date { position: absolute; top: 0; right: 23px; color: #ffffff; font-size: 13px; }
div.main_wrap .main_top .notice_wrap .btn_notice_more { position: absolute; top: 50%; right: -10px; margin: -10px 0 0 0; }

/* 하단 */
div.main_wrap .main_bottom { width: 100%; position: relative; top: -30px; padding: 0 20px; box-sizing: border-box;  }
div.main_wrap .main_bottom .main_list {  }
div.main_wrap .main_bottom .main_list ul { margin: 0; padding: 0; }
div.main_wrap .main_bottom .main_list ul > li:first-child { border: none; } 
div.main_wrap .main_bottom .main_list ul > li { list-style: none; margin: 0; padding: 0; border-top: solid 1px #dadddf; }
div.main_wrap .main_bottom .main_list ul > li .list_subject { display: block; position: relative; overflow: hidden; width: 100%; height: 50px; line-height: 50px; padding: 0px 60px 0 0; color: #707070; font-size: 14px; box-sizing: border-box; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap}
div.main_wrap .main_bottom .main_list ul > li .list_subject.unread { font-weight: bold; color: #404040; }
div.main_wrap .main_bottom .main_list ul > li .list_subject .icon { vertical-align: middle; margin: -3px 5px 0 0;  }
div.main_wrap .main_bottom .main_list ul > li .list_subject .last_time { position: absolute; top: 0; right: 0px; font-size: 12px; font-weight: normal; }

div.main_wrap .main_bottom .daily_calendar { margin-top: 5px; padding: 0; }
div.main_wrap .main_bottom .daily_calendar li { padding-bottom: 10px; padding-right: 0; }
div.main_wrap .main_bottom .daily_calendar li .title { font-size: 1em; }
div.main_wrap .main_bottom .daily_calendar li .name,
div.main_wrap .main_bottom .daily_calendar li .time { font-size: 12px; }
div.main_wrap .main_bottom .daily_calendar li .time,
div.main_wrap .main_bottom .daily_calendar li .bullet { top: 15px; }

/********************************************************************************************************
	공통 요소
*********************************************************************************************************/
.view_board .dt,
.write_board .dt,
.write_app .dt,
.write_cowork .dt,
.view_card .dt,
.write_auth .dt { width: 5.5em; }
.view_mail .dt,
.write_mail .dt,
.view_schedule .dt, 
.write_schedule .dt,
.write_share .dt,
.write_addrbook .dt,
.view_app .dt { width: 5em; }
.view_absence .dt, 
.write_absence .dt { width: 4.5em; }
.write_docinfo .dt,
.view_docinfo .dt,
.view_common_resources .dt,
.write_search .dt { width: 6em; }
.write_common_resources .dt { width: 4em; }

/* 상무님 취향 */
.write_mail .item_title .dt { width: 2.5em; }

/* 목록 */

/* 읽기 */
.contents_view .view_header > div { word-break: break-all; }
.contents_view .item_title { position: relative; word-break: break-all; }
.contents_view .item_etc > span { display: inline-block; }
.contents_view .item_etc .form_period { display: block; }
.contents_view .item_count,
.contents_view .item_comment,
.contents_view .item_users { padding-left: 20px; background: left 4px / 16px no-repeat; }
.contents_view .item_count { padding-left: 18px; background-image: url('../image/icon/icon_count.png'); }
.contents_view .item_comment { background-image: url('../image/icon/icon_comment.png'); }
.contents_view .item_users { background-image: url('../image/icon/icon_users.png'); }
.contents_view .item_date,
.contents_view .item_period { color: #a0a0a0; }
.contents_view .item_calendar_period,
.contents_view .item_calendar_pin,
.contents_view .item_calendar_category,
.contents_view .item_calendar_item { padding-left: 20px; background: left 3px / 14px no-repeat; }
.contents_view .item_calendar_period { background-image: url('../image/icon/icon_calendar_period.png'); background-position-y: 4px; }
.contents_view .item_calendar_pin { background-image: url('../image/icon/icon_calendar_pin.png'); }
.contents_view .item_calendar_category { background-image: url('../image/icon/icon_calendar_category.png'); }
.contents_view .item_calendar_item { background-image: url('../image/icon/icon_calendar_item.png'); background-position-y: 2px; }

/* 쓰기 */
.contents_write .item_title { position: relative; }
.contents_write .icon_attach_wrap { position: absolute; top: 7px; right: 5px; }
.contents_write .icon_attach_wrap .icon.icon_attach { overflow: visible; width: 32px; height: 32px; }
.contents_write .btn_form_add { position: absolute; top: 0; right: -10px; }
.contents_write .btn_form_more { position: absolute; top: 0; right: -10px; }


/********************************************************************************************************
	메일
*********************************************************************************************************/

/*------------------------------------------------------------------------------
  목록
-------------------------------------------------------------------------------*/
.contents_list.list_mail li { padding-left: 40px; }
.list_mail li .item_check { position: absolute; top: 12px; left: 12px; margin-top: 5px; z-index: 1; }
.list_mail li .item_check input { position: relative; z-index: 3; }
.list_mail li .item_check label { position: absolute; left: -12px; top: -12px; display: block; width: 40px; height: 40px; font-size: 0; z-index: 2; }
.list_mail li .item_check.eb_checkbox > input + label { margin-left: 0; }
.list_mail li .item_date { position: absolute; width: 6em; top: 15px; right: 20px; margin-top: 2px; margin-right: 20px; }
.list_mail li .item_category, 
.list_mail li .item_writer { margin-right: 20px; }
.list_mail li .item_writer { padding-right: 6em; }
.list_mail li .item_category { padding-right: 6em; color: #a0a0a0; vertical-align: top; }
.list_mail li .item_title { margin: 0.25em 0; padding-right: 20px; line-height: 1; }
.list_mail li .item_option .icon { position: absolute; top: 12px; right: 10px; }
.list_mail li .item_option .icon.icon_favorite { top: 12px; }
.list_mail li .item_option .icon.icon_attach { top: 35px; }
.list_mail li .item_title:after {  }
.contents_list.list_mail li.selected { background-color: #eef6fd !important; }

/* 내 메일함 */
.list_mail.my_mailbox li .item_category { display: block; }
.list_mail.my_mailbox .item_writer { margin-top: 5px; padding-right: 0; }
.list_mail.my_mailbox li .item_category, 
.list_mail.my_mailbox li .item_writer { margin-right: 20px; }
.list_mail.my_mailbox li .item_title { padding-right: 0; }
.list_mail.my_mailbox li .item_option .icon.icon_attach { top: 35px; }

/* 보낸메일함 */
.list_mail.mail_send { }
.list_mail.mail_send .item_receive { margin-top: 8px; }
.list_mail.mail_send .item_receive span { display: inline-block; vertical-align: top; }
.list_mail.mail_send .item_receive .read { color: #2e92e6; }
.list_mail.mail_send .item_receive .unread { color: #707070; }
.list_mail.mail_send .item_receive .btn_receiver_list { margin-left: 2px; margin-top: -2px; padding: 4px 5px 4px 3px; border: 1px solid #c3c6c9; background-color: #fff; color: #707070; font-size: 0.85em; border-radius: 3px; vertical-align: top; letter-spacing: -0.08em; }

/* 수신확인 */
.mail_receiver_wrap {}
.mail_receiver_wrap .mail_receiver_list ul, 
.mail_receiver_wrap .mail_receiver_list li { margin: 0; padding: 0; list-style: none; }
.mail_receiver_wrap .mail_receiver_list li { position: relative; padding: 12px 20px; /*padding-left: 52px;*/ padding-right: 70px; border-bottom: 1px solid #dbdfe1; }
.mail_receiver_wrap .mail_receiver_list li > span { display: inline-block; vertical-align: middle; }
.mail_receiver_wrap .mail_receiver_list li .receive_type { display: inline-block; /*position: absolute; top: 12px; left: 15px; width: 5em;*/ float: left; margin-top: -2px; margin-right: 3px; padding: 2px 6px; background-color: #a6a6a6; color: #fff; text-align: center; font-size: 0.85em; border-radius: 2em; line-height: 1.15rem; }
.mail_receiver_wrap .mail_receiver_list li .receive_name { display: block; }
.mail_receiver_wrap .mail_receiver_list li .receive_name ~ span { margin-top: 7px; }
.mail_receiver_wrap .mail_receiver_list li .receive_state { margin-right: 3px; }
.mail_receiver_wrap .mail_receiver_list li .receive_state.read { color: #2e92e6; }
.mail_receiver_wrap .mail_receiver_list li .receive_state.unread { color: #707070; }
.mail_receiver_wrap .mail_receiver_list li .receive_date { padding-top: 1px; color: #a0a0a0; font-size: 0.9em; }
.mail_receiver_wrap .mail_receiver_list li .eb_btn { position: absolute; right: 20px; top: 12px; }

/* 예약메일함 */
.list_mail.mail_reserved { }
.list_mail.mail_reserved li .item_writer,
.list_mail.mail_reserved li .item_date { margin-right: 0; }
.list_mail.mail_reserved li .item_title { padding-right: 4em; color: inherit; font-weight: normal; }
.list_mail.mail_reserved li .item_title:after { content: none; }
.list_mail.mail_reserved li .a { display: block; }
.list_mail.mail_reserved .item_reserved { margin-top: 8px; }
.list_mail.mail_reserved .item_reserved span { display: inline-block; vertical-align: top; }
.list_mail.mail_reserved .item_reserved .send { color: #2e92e6; }
.list_mail.mail_reserved .item_reserved .fail { color: #ff6969; }
.list_mail.mail_reserved .item_reserved .wait { color: #707070; }

/*------------------------------------------------------------------------------
  읽기
-------------------------------------------------------------------------------*/
.view_mail { }
.view_mail .item_writer .dt { padding-right: 14px; }
.view_mail .item_title { padding-top: 12px; padding-right: 40px; border-bottom: none; }
.view_mail .item_title .item_option { position: absolute; top: 11px; right: 15px; }
.view_mail .item_title .item_option .icon { vertical-align: top; }
.view_mail .item_title .item_status { margin-top: 1px; }
.view_mail .item_title + .item_etc { padding-top: 0; }
.view_mail .item_comment { float: right; }


/*------------------------------------------------------------------------------
  쓰기
-------------------------------------------------------------------------------*/
.write_mail {}
.write_mail .item_recipient .dl .form_text { margin-bottom: 5px; }
.write_mail .item_recipient .dt { padding-right: 14px; }
.write_mail .item_recipient .dd { padding-right: 30px; }
.write_mail .item_title .item_option { position: absolute; top: 0; right: 15px; margin-top: 14px; }
.write_mail .item_title .item_option .icon { vertical-align: top; width: 18px; height: 18px; }
.write_mail .item_title .item_status { margin-top: 1px; }




/********************************************************************************************************
	게시판
*********************************************************************************************************/

/*------------------------------------------------------------------------------
  목록
-------------------------------------------------------------------------------*/
.list_board { }
.list_board li .item_category { color: #a0a0a0; vertical-align: top; }
.list_board li .item_date { position: absolute; width: 6em; bottom: 12px; right: 20px; }
.list_board li .item_count,
.list_board li .item_comment { display: inline-block; padding-left: 18px; background: left center / 16px no-repeat; vertical-align: middle; }
.list_board li .item_count { background-image: url('../image/icon/icon_count.png'); }
.list_board li .item_comment { background-image: url('../image/icon/icon_comment.png'); }
.list_board li .item_count + .item_comment { margin-left: 8px; }
.list_board li .item_option .icon { position: absolute; top: 12px; right: 15px; }
.list_board li .item_option .icon.icon_attach { top: 37px; }
.list_board li .item_preview { margin-bottom: 5px; }
.list_board li .item_title { margin-right: 20px; }
.list_board li .item_title:after { }
.list_board li.notice .item_title:after { width: 13px; height: 11px; top: 6px; left: -16px; background: url('../image/icon/icon_notice.png') center / 14px no-repeat; }
.list_board li.reply { background-color: rgba(128, 128, 128, 0.08); }
.list_board li .icon.re { width: 1em; height: 1em; margin-top: -0.25em; margin-left: -5px; background-position-x: right; }


/*------------------------------------------------------------------------------
  읽기
-------------------------------------------------------------------------------*/
.view_board .item_category,
.view_board .item_title { border-bottom: none; }
.view_board .item_category { padding: 12px; padding-bottom: 0; }
.view_board .item_etc { padding-top: 0; }
.view_board .item_count,
.view_board .item_comment { float: right; margin-left: 10px; }

/*------------------------------------------------------------------------------
  쓰기
-------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
  조회자 목록
-------------------------------------------------------------------------------*/
.list_people {}
.list_people li { position: relative; }
.list_people .user_info { position: relative; padding-left: 48px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.list_people .user_info .photo { display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; }
.list_people .user_info .photo img { width: 100%; height: 100%; }
.list_people .user_info .name { display: block; padding-right: 8em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.list_people .user_info .name strong { color: #404040; font-weight: bold; }
.list_people .user_info .group { color: #909090; }
.list_people .item_time { position: absolute; right: 20px; top: 15px; }


/********************************************************************************************************
	자료실
*********************************************************************************************************/

/*------------------------------------------------------------------------------
  목록
-------------------------------------------------------------------------------*/
.list_reference {}
.list_reference li { padding-top: 12px; padding-left: 60px; }
.list_reference .list_check { padding-left: 90px; }
.list_reference li .a { display: block; }
.list_reference li.folder .a { padding-bottom: 5px; }
.list_reference li .icon.file ~ .item_title { margin-bottom: 0; padding-top: 5px; }
.list_reference li .item_title { margin-top: 0; }
.list_reference li .item_title:after { content: none; }
.list_reference li .icon { position: absolute; left: -60px; top: 2px; width: 36px; height: 28px; margin-left: 15px; background-size: contain; }
.list_reference li .item_check { position: absolute; left: -90px; top: 2px; width: 36px; height: 28px; margin-left: 15px; background-size: contain; }
.list_reference li .item_check + .icon { left: -60px; }
.list_reference li .item_etc span { display: inline-block; vertical-align: top; }
.list_reference li .item_etc span + span:before { content: "|"; display: inline-block; margin: 0 4px; vertical-align: top; }
.list_reference li .item_etc span + span:last-child:before { content: none; }
.list_reference li .item_download { float: right; padding-left: 18px; background: url('../image/icon/icon_download.png') left center / 16px no-repeat; vertical-align: middle; }


/********************************************************************************************************
	협업
*********************************************************************************************************/
.layout.cowork { background: #ebeef1}
.layout.cowork.tablet_layout .right_container { background-color: #fff; }

/*------------------------------------------------------------------------------
  목록
-------------------------------------------------------------------------------*/
.contents_list.list_cowork li{ border: none; padding:5px 20px }
.list_cowork .coop_box { position: relative; margin: 10px 0 0; padding: 15px 20px; /*border-bottom: 1px solid #dcdfe1;*/ box-shadow: 0 1px 0 #dcdfe1; border-radius: 5px; background: #ffffff }
.list_cowork .coop_box .coop_box_top { position: relative; width: 100%; height: 60px; border-bottom: solid 1px #e2e2e2 }
.list_cowork .coop_box .coop_box_top .profile_img { float: left; width: 50px; height: 50px; border: solid 4px #ffffff; border-radius: 100%; box-sizing: border-box;overflow: hidden }
.list_cowork .coop_box .coop_box_top .profile_img img { width: 100%; height: 100%; }
.list_cowork .coop_box .coop_box_top .profile_info { float: left; width: 40%; padding: 10px 0 0 5px; line-height: 120%; box-sizing: border-box; }
.list_cowork .coop_box .coop_box_top .profile_info .my_name { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; color: #404040; font-size: 0.9em; text-overflow: ellipsis; white-space: nowrap}
.list_cowork .coop_box .coop_box_top .profile_info .my_name > .name { font-weight: bold; font-size: 1.2em; margin-right: 5px; }
.list_cowork .coop_box .coop_box_top .profile_info .my_division { position: relative; overflow: hidden; margin: 0; padding: 0; margin-top: 2px; color: #b6bbd1; font-size: 0.9em; text-overflow: ellipsis; white-space: nowrap }
.list_cowork .coop_box .coop_box_top .last_time { position: absolute; top: 15px; right: 0px; margin-top: -6px; font-size: 0.85em; font-weight: normal; color: #a0a0a0;}
.list_cowork .coop_box .coop_box_bottom { padding: 10px 0 0 0; position: relative }
.list_cowork .coop_box .coop_box_bottom .status_title { margin: 0; padding: 0 0 2px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; margin-right: 44px; }
.list_cowork .coop_box .coop_box_bottom .cnt { margin: 0 0 3px; padding: 0; font-size: 0.9em; color: #707070; line-height: 160%; word-break: break-all; word-wrap: break-word; }
.list_cowork .coop_box .coop_box_bottom .icon.icon_favorite{ position: absolute; top:5px; right: 0}
.list_cowork .coop_box .coop_box_bottom .item_status .coop_state + .coop_state { margin-left: 3px; }
.list_cowork .coop_box .coop_box_bottom .thumbnail { max-height: 150px; max-width: 295px; overflow: hidden; }

.route span+span{background: url('../image/icon/icon_next_arrow.png') center right 4px / 4px 7px no-repeat;}

.list_cowork .coop_box .coop_box_bottom .item_comment {  display: inline-block; padding-left: 18px; background: left center / 16px no-repeat; vertical-align: middle;background-image: url('../image/icon/icon_comment.png');float: right }
.list_cowork .coop_box .coop_box_bottom .item_comment { margin-left: 3px; }

.item_status .coop_state { display: inline-block; font-size: 0.9rem; color: #fff; padding: 1px 5px; border-radius: 3px; line-height: 1.5; }
.item_status .coop_state.blue{background:#97c4f4;}
.item_status .coop_state.red{background:#f63550;}
.item_status .coop_state.green{background:#3dcf3a}
.item_status .coop_state.sky{background:#22a2fb;}
.item_status .coop_state.orange{background:#ff6e22;}

.list_cowork .icon_alarm { position: absolute; top: 5px; right: 26px; margin-top: 5px; }
.list_cowork .icon_share{ margin:-2px 0 0 5px}

.list_channel ul > li .list_function { position: absolute; top: 50%; margin-top: -20px; right: 0px; }
.list_channel ul > li .list_function * { vertical-align: middle; }
.list_channel ul > li .item_title{font-weight: normal; padding-right:80px;font-size: 1em}

.list_topic ul > li .list_function { position: absolute; top: 50%; margin-top: -20px; right: 0px; }
.list_topic ul > li .list_function * { vertical-align: middle; }
.list_topic ul > li .item_title{font-weight: normal; padding-right:25px;font-size: 1em}

.item_label{ position: absolute; width: 100%;height: 20px; overflow: hidden;}
.item_label .label{ display: inline-block; width: 45px; height: 3px; border-radius:2px; margin-right: 5px}
.item_label .label.label_flag { position: relative; width: 16px; height: 24px; margin-right: 3px; vertical-align: top; }
.item_label .label.label_flag:after { position: absolute; bottom: -1px; left: 0; content: ""; display: inline-block; border: 8px solid transparent; border-top: none; border-bottom: 8px solid #fff; }


/* 토픽 참여자 권한 부여 (셀렉트형) */
.tree_list.list_authority li { padding-right: 100px; }
.tree_list.list_authority li .select_authority { position: absolute; right: 0; top: 50%; margin-top: -16px; }
.tree_list.list_authority li .select_authority .form_select { min-height: 32px; line-height: 32px; }

/* 채널 참여자 이력 */
.tree_list.list_channel_user_history li { position: relative; padding-right: 4.5em; }
.tree_list.list_channel_user_history li .tree_item_cont { position: relative; padding-right: 6em; }
.tree_list.list_channel_user_history li .user_authority { position: absolute; top: 0; right: 0; width: 6em; margin-top: 0.2em; padding-left: 10px; box-sizing: border-box; }
.tree_list.list_channel_user_history li .user_history { position: absolute; right: 0; top: 15px; margin-top: 2px; text-align: right; }
.tree_list.list_channel_user_history li .user_state { display: inline-block; border-radius: 3px; }
.tree_list.list_channel_user_history li .user_state.refused,
.tree_list.list_channel_user_history li .user_state.left { margin-top: -4px; padding: 0 5px; border: 1px solid; line-height: 21px; }
.tree_list.list_channel_user_history li .user_state.waiting { }
.tree_list.list_channel_user_history li .user_state.accepted { color: #2e92e6; }
.tree_list.list_channel_user_history li .user_state.refused { border-color: #ff624c; color: #ff624c; }
.tree_list.list_channel_user_history li .user_state.left { border-color: #a0a0a0; color: #a0a0a0; }
.tree_list.list_channel_user_history li .user_date { display: block; margin-top: 3px; font-size: 0.9em; }



/********************************************************************************************************
	결재
*********************************************************************************************************/
/* 공통 요소 */
.app_state { display: inline-block; min-width: 2em; padding: 5px 5px 4px; background-color: #a5a5a5; color: #fff; border-radius: 3px; text-align: center; line-height: 1; font-size: 0.85em; }
.app_state.sign,
.app_state.app { background-color: #2e92e6; }
.app_state.ready,
.app_state.hold,
.app_state.withdraw { background-color: #f5af00; }
.app_state.cancel { background-color: #fc6e57; }
.app_state.stop { }

/*------------------------------------------------------------------------------
  목록
-------------------------------------------------------------------------------*/
.contents_list.list_app li { }
.list_app li a{ display: block}
.list_app li .item_date { position: absolute; width: 6em; bottom: 12px; right: 20px; }
.list_app li .item_option .icon { position: absolute; top: 12px; right: 0; }
.list_app li .item_option .icon.icon_attach { top: 2px; }
.list_app li .item_preview { margin-bottom: 5px; }
.list_app li .item_title { margin-right: 20px; }
.list_app li .item_title:after { }
.list_app li .item_category { padding-right: 6em; color: #a0a0a0; vertical-align: top; margin-bottom: 7px; text-decoration: underline }
.list_app li .item_status { margin-top: 3px; }
.list_app li .app_state { padding: 0; background: none; color: #a5a5a5; line-height: inherit; }

/*------------------------------------------------------------------------------
  읽기
-------------------------------------------------------------------------------*/
.view_app .sub_header_btn { display: inline-block; padding: 4px 0; vertical-align: middle; }
.sub_header_wrap.view_app .item_comment { display: inline-block; float: right; height: 1.5em; padding: 11px 0; padding-left: 20px; background: url(../image/icon/icon_comment.png) left 15px / 16px no-repeat; line-height: 1.5; }
.sub_header_wrap.view_app .eb_select{ height: 100%; padding: 0 10px; }
.view_app .form_cont_wrap  { }

/*------------------------------------------------------------------------------
  쓰기 (작성 및 승인)
-------------------------------------------------------------------------------*/
.write_app .item_title { line-height: 2em; }
/*.write_app .eb_radio { margin-right: 10px; }*/
.write_app .option{ padding: 10px 15px 0 15px; border-top: 1px solid #e4e7ed; }
.write_app .option label{font-size: 12px}

/* 모바일 기안 작성 */
.write_app input[type="number"]::-webkit-outer-spin-button,
.write_app input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.write_app .app_title { padding: 12px 10px; background-color: #f5f8fb; font-weight: bold; font-size: 1.2em; text-align: center; }
.write_app .section_title { position: relative; padding: 14px 48px 10px 10px; border-top: 1px solid #f2f2f2; font-weight: bold; font-size: 1.1em; }
.write_app .section_title .eb_btn.btn_accordion { position: absolute; width: 48px; height: 48px; right: 0; top: 0; transition: transform ease 0.25s; }
.write_app .section_title .eb_btn.btn_accordion.active { transform: rotate(-180deg); opacity: 0.6; }
.write_app .write_section { position: relative; margin-bottom: 15px; padding-bottom: 7px; }
.write_app .write_section > div { padding: 8px 20px; }
.write_app .write_section .form_option { padding: 0; }
.write_app .write_section .form_option .label.min_5 { min-width: 4em; }
.write_app .write_section .form_period .period_from { width: 52%; }
.write_app .write_section .form_period .period_to { width: 48%; }
.write_app .write_section .form_period.small .period_from { background-size: 6px; background-position: right 7px center; }
.write_app .form_number { width: 1.8em; }
.write_app .item_date .form_text.year { width: 2.2em; }
.write_app .item_date .form_text.month { width: 1.1em; margin-left: 0.5em; }
.write_app .item_date .form_text.date { width: 1.1em; margin-left: 0.5em; }
.write_app input#makeYYYY { width: 2.5em; }
.write_app input#makeMM { width: 1.5em; }
.write_app input#makeDD { width: 1.5em; }
.write_app .item_textarea .form_textarea { padding: 4px 0 0; }
.write_app .item_attach .icon_attach_wrap { top: 0; right: 0; }
.write_app .item_attach .attached_file_wrap {  }
.write_app .approval_progress .app_progress_list li { padding-left: 4.5em; border-bottom-color: #e4e7ed; white-space: normal; }
.write_app .approval_progress .app_progress_list li:last-child { border-bottom: none; }
.write_app .approval_progress .progress { top: 7px; left: 0; }
.write_app .approval_progress .progress_item { padding: 7px 0; opacity: 1; }
.write_app .approval_progress .user { margin-bottom: 0; padding-right: 40px; }
.write_app .approval_progress .user > span { display: inline-block; }
.write_app .approval_progress .app_state { top: 7px; right: 0; }

.write_app .write_summary .outline { margin: 5px 0; }

/*------------------------------------------------------------------------------
  결재선리스트
-------------------------------------------------------------------------------*/
/* 결재자 리스트 형태*/
.approval_people { }
.approval_people ul { margin: 0; padding: 0; }
.approval_people ul > li { list-style: none; position: relative; padding: 5px 20px 7px; padding-right: 100px; background: #ffffff; border-bottom: 1px solid #dbdfe1; box-sizing: border-box; cursor: pointer; }
.approval_people ul > li.default { padding-right:20px; }
.approval_people ul > li .approval_function { position: absolute; top: 50%; right: 0; margin-top: -20px; }
.approval_people ul > li .approval_function * { vertical-align: middle; }

.approval_people .form_select { width: auto; max-width: 100%; }
.approval_people .app_info { margin-top: 3px; }
.approval_people .app_state { float: left; margin-right: 5px; }
.approval_people .app_user { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; vertical-align: middle; }
.approval_people .app_user .group { margin-left: 3px; font-size: 0.85em; color: #a0a0a0; }

/*------------------------------------------------------------------------------
  결재현황
-------------------------------------------------------------------------------*/
.approval_progress ul { margin: 0; padding: 0; }
.approval_progress .title { padding: 15px 15px 0; font-weight: bold; }
.approval_progress .app_progress_list li { list-style: none; position: relative; padding: 0 0 0 82px; border-bottom: 1px solid #dbdfe1; box-sizing: border-box; cursor: pointer ;overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; }
.approval_progress li > .progress_item:last-child { border-bottom: none; }
.approval_progress .progress { display: inline-block; position: absolute; left: 15px; top: 15px; }
.approval_progress .progress_item { position: relative; padding: 15px 0; padding-right: 60px; border-bottom: 1px solid #dbdfe1; box-sizing: border-box; opacity: 0.8; }
.approval_progress .progress_item.active { opacity: 1; }
.approval_progress .progress_item.active .user { font-weight: bold; color: #000; }
.approval_progress .progress_item.dim { opacity: 0.4; }
.approval_progress .progress_item.dim .app_state { background-color: #a5a5a5; }
.approval_progress .app_state { position: absolute; right: 20px; top: 15px; font-size: 0.85em; }
.approval_progress .user { margin-bottom: 5px; }
.approval_progress .time { margin-top: 10px; font-size: 0.9em; }
.approval_progress .time + .time { margin-top: 5px; }
.approval_progress .group { margin-left: 3px; color: #a0a0a0; font-size: 0.85em; }

.approval_progress .progress_state{text-align:center;padding:10px 0;}
.approval_progress .progress_state span {position:relative;display:inline-block;height:32px;padding:0 24px;line-height:30px;box-sizing:border-box;background:#31364c;border-radius:2px;border:1px solid #31364c;color:#FFF;}
.approval_progress .progress_state span:last-child {background:#f5f5f5;border:solid 1px #e9e9e9;color:#a5a5a5;padding-left: 36px}
.approval_progress .progress_state span:last-child:before {display:block;position:absolute;top:-1px;left:-2px;z-index:2;content:'';width:16px;height:32px;background:#31364c url(../image/icon/btn_submit_approbal_off.png) 0 0 no-repeat;background-size:contain;}
.approval_progress .progress_state.on > span {background:#f5f5f5;border:solid 1px #e9e9e9;color:#a5a5a5;}
.approval_progress .progress_state.on > span:last-child {background:#31364c;border:1px solid #31364c;color:#FFF;left:-2px}
.approval_progress .progress_state.on > span:last-child:before {background:#31364c url(../image/icon/btn_submit_approbal.png) 0 0 no-repeat;background-size:contain}

.approval_progress .comment_list > li {overflow:hidden;padding: 10px 15px; position: relative;border-bottom: 1px solid #eee; white-space: normal; }
.approval_progress .info_box span {padding-right:2px;color:#888;}
.approval_progress .info_box .name {color:#454545;font-weight:bold;}
.approval_progress .info_box .group {position:relative;padding-left:5px;}
.approval_progress .info_box .group:before {position:absolute;top:3px;left:0;display:block;content:'';width:1px;height:10px;background-color:#b0b0b0;}
.approval_progress .comment_txt { margin-top: 3px; line-height: 1.3; word-break: break-all; word-wrap: break-word; }
.approval_progress .comment_title{ box-sizing: border-box;font-weight: bold;margin-top: 5px}

.approval_progress .comment_box { position: relative; margin-top: 5px; }
.approval_progress .comment_box .btn_line { position: absolute; top: 0; right: 0; }
.approval_progress .comment_box .btn_line ~ .comment_txt { padding-right: 5em; }
.approval_progress .comment .time { position: absolute; right: 20px; top: 12px; margin-top: 0; text-align: right; }
.approval_progress .comment .info_box { padding-right: 6em; }

/*------------------------------------------------------------------------------
  코멘트
-------------------------------------------------------------------------------*/
.view_comment .comment_header{ padding-bottom: 0}

.comment_header {position: relative; padding: 7px 20px; border-bottom: 1px solid #e4e7ed; }
.comment_header ul.add_emotion {width: 100%; height: 39px;list-style: none; box-sizing: border-box;overflow: hidden; padding-right: 15px}
.comment_header ul.add_emotion:after { content: ""; display: block; clear: both; }
.comment_header ul.add_emotion > li { float: left; position: relative; height:39px }
.comment_header ul.add_emotion > li+li { margin-left: 10px; }
.comment_header ul.add_emotion > li > .icon { position: absolute; right: -3px; bottom:4px; }
.comment_header ul.add_emotion > li > .profile_photo {width: 32px; height: 32px; border-radius: 32px; margin: 0px; overflow: hidden;}

.comment_header .emotion_list{ position: absolute; right: 5px; top:7px}

.comment_header .sticker_select{position:absolute;top:45px;left:8px;z-index:1}
.comment_header .sticker_select button {width:52px;height:52px;padding-top:25px;text-align:center;font-size:11px;color:#FFF;border-radius:52px;box-sizing:border-box;}
.comment_header .sticker_select button > img {display:block;}
.comment_header .attach_name{ padding:10px; background: #f6f8fa; margin: 5px 0 10px 0 }
.comment_header .attach_name a{ font-weight: bold}

.view_comment .comment_list { position:relative; padding-bottom: 52px; }
.view_comment .comment_list > li {overflow:hidden;padding:10px 0 10px 16px; position: relative;border-bottom: 1px solid #eee }
.view_comment .profile_photo  { overflow: hidden; display: block; float: left; width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; border: 1px solid #e5e8ee; background-color: #e5e8ee; box-sizing: border-box; }
.view_comment .comment_list > li .comment_area {min-height:52px;padding:2px 16px 6px 0;margin-left:48px;border-bottom:1px solid #e8e8e8;overflow:hidden;}
.view_comment .info_box {width:100%;min-height:21px; overflow: hidden}
.view_comment .info_box span {padding-right:2px;color:#888;}
.view_comment .info_box .name {color:#454545;font-weight:bold;}
.view_comment .info_box .group {position:relative;padding-left:10px;}
.view_comment .info_box .group:before {position:absolute;top:3px;left:4px;display:block;content:'';width:1px;height:10px;background-color:#b0b0b0;}
.view_comment .info_box .select_authority {position:absolute;right:15px;top:50%;margin-top:-16px;}
.view_comment .info_box .select_authority .form_select{min-height: 32px; line-height:32px; margin-right: 50px;}
.view_comment .info_box .select_authority .btn_del{width:32px; height: 32px;}
.view_comment .time {width:100%;padding-top:2px;line-height:13px;color:#888; font-size: 12px}
.view_comment .comment_txt { padding:0 20px 0 48px; box-sizing: border-box; line-height: 1.3; word-break: break-all; word-wrap: break-word; }
.view_comment .comment_txt .mention { color: #2e92e6; /*display: inline-block; margin-top: -3px; padding: 3px 5px 2px; background-color: #e7eaed; border-radius: 3px; vertical-align: top;*/ }
.view_comment .comment_txt .mention strong { font-weight: bold; }

.comment_body .comment_attach {padding:0 20px 0 48px; box-sizing: border-box;line-height: 1.2em}
.comment_body .comment_attach a, .comment_body .comment_attach .count {color:#888}
.comment_body .comment_attach .btn_comment {width:25px; height:20px; background-size:80%!important}
.comment_body .comment_attach .attach_name {word-break: break-all;}
.comment_body .btn_del{ width: 40px; height: 40px; position: absolute; right: 5px ; top:0px }

.comment_body .comment_attach .attach_del a{ text-decoration: line-through}
.comment_body .comment_emo{ padding:0 20px 0 48px; box-sizing: border-box;}
.comment_body .comment_emo img{ height: 55px}
.comment_body .comment_thumbnail{ padding:0 20px 0 48px; box-sizing: border-box;}

.comment_footer {padding: 7px 20px; border-top: 1px solid #e4e7ed; width: 100%; box-sizing: border-box;background: #fff;z-index: 100; position: relative}
.comment_footer .function_btn{ position: absolute; top: 50%; margin-top: -16px; z-index: 200; }
.comment_footer button{vertical-align: top }
.comment_footer textarea { width: 100%; border: 0; min-height: 35px; height:35px;background-color: transparent;box-sizing: border-box; padding:9px 65px 9px 70px}
.comment_footer.single textarea,
.comment_footer.article textarea,
.comment_footer.single .mentions-input-box .mentions{padding-left: 40px}
.comment_footer.single {padding-left: 10px}

.comment_footer .btn_color{position: absolute; right: 15px; top:8px}
.comment_body .comment_list.people_list .icon, .emo_list .icon {position: absolute; left:42px; bottom: 10px;}
.comment_body .comment_list.people_list .name {display: block}
.comment_body .comment_list.people_list .fl_r{ margin-right:16px; color: #888}
/* 참여자 목록에 부서표시를 위해 추가 */
.comment_body .comment_list.people_list .icon.mem {position: absolute; left:16px; bottom: 34px;}
.comment_body .comment_list.people_list .name.mem {display: block; padding-left: 26px;}

/**/
.comment_file_select {bottom:0;height:80px;padding:10px 20px;text-align:center;background:#FFF none;border-top:1px solid #e8e8e8;box-sizing:border-box;}
.comment_file_select .eb_btn { width: 60px; height: 60px; font-size: 0; background-position: center;  background-repeat: no-repeat; background-size: 30px;}
.comment_file_select.android .eb_btn { width: 50px !important; }
.comment_file_select .attached_file_wrap { position: relative; position: absolute; bottom: 100%; right: 15px; margin-bottom: -1px; padding: 5px 12px; padding-right: 24px; border: 1px solid #c1c7d3; border-radius: 3px; text-align: left; background-color: rgba(249, 249, 251, 0.9); z-index: 101; }
.comment_file_select .attached_file_wrap .btn_menu_close { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; background-size: 12px; }
.comment_file_select .attached_file_wrap ul { margin: 0; padding: 0; list-style: none; }

/* memtion */
.mentions-input-box .mentions-autocomplete-list { display: none; background: #fff; border: 1px solid #c1c1c1; position: absolute; left: 0; right: 0; z-index: 10000; box-sizing : border-box; max-height : 305px; bottom: 45px; overflow-y: auto; overflow-x: hidden; padding: 0px 10px 0px 10px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438); }
.mentions-input-box .mentions-autocomplete-list ul { margin: 0; padding: 0; }
.mentions-input-box .mentions-autocomplete-list li { background-color: #fff; width: auto; overflow: hidden; cursor: pointer; list-style: none; white-space: nowrap; font-size: 12px; clear: both; margin: 5px 0 8px 4px; padding: 5px; color: #4b4f51; border: 1px solid #fff }
.mentions-input-box .mentions-autocomplete-list li:last-child { border-radius:5px; }
.mentions-input-box .mentions-autocomplete-list li > img,
.mentions-input-box .mentions-autocomplete-list li > div.icon { width: 20px; height: 20px; border-radius: 20px; overflow: hidden; float: left; margin-right: 8px; } 
.mentions-input-box .mentions-autocomplete-list li em { font-style: normal; font-size: 11px; color: #a5a5a5; }
.mentions-input-box .mentions-autocomplete-list li:hover,
.mentions-input-box .mentions-autocomplete-list li.active { background : #e3f8fc; border : 1px dotted #5cd9f4; border-radius : 3px; }
.mentions-input-box .mentions-autocomplete-list li b { background: #ffff99; font-weight: normal; }
.mentions-input-box .mentions { position: absolute; top: 7px; left: 15px; right: 15px; padding: 9px 0 0 70px; color: #d8dfea; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; border: 0; z-index: -1; }
.mentions-input-box .mentions > div { color: #fff; white-space: pre-wrap; width: 100%; }
.mentions-input-box .mentions > div > strong { font-weight: normal; background: #e3f8fc; color: #e3f8fc; border-radius: 2px; }
.mentions-input-box .mentions > div > strong > span { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
.mentions-input-box .file_mentions { position: absolute; left: 3px; right: 0; top: 1px; bottom: 0; padding : 15px 5px 0px 53px; color: #d8dfea; overflow: hidden; white-space: pre-wrap; word-wrap: break-word;  border: 0; z-index: -1;}
.mentions-input-box .file_mentions > div { color: #fff; white-space: pre-wrap; width: 100%; }
.mentions-input-box .file_mentions > div > strong { font-weight: normal; background: #e3f8fc; color: #e3f8fc; border-radius: 2px; }
.mentions-input-box .file_mentions > div > strong > span { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); }


/* 파일아이콘 */
.attach_name .icon{ background-size: contain}
.icon_html,
.icon_xml { width: 18px; height: 20px; background: url("../image/icon/icon_html_file.png") no-repeat center; }
.icon_mht { width: 18px; height: 20px; background: url("../image/icon/icon_mht_file.png") no-repeat center; }
.icon_txt { width: 18px; height: 20px; background: url("../image/icon/icon_txt_file.png") no-repeat center; }
.icon_ppt, .icon_pptx { width: 18px; height: 20px; background: url("../image/icon/icon_ppt_file.png") no-repeat center; }
.icon_xls { width: 18px; height: 20px; background: url("../image/icon/icon_xls_file.png") no-repeat center; }
.icon_doc { width: 18px; height: 20px; background: url("../image/icon/icon_doc_file.png") no-repeat center; }
.icon_vcf { width: 18px; height: 20px; background: url("../image/icon/icon_vcf_file.png") no-repeat center; }
.icon_hwp { width: 18px; height: 20px; background: url("../image/icon/icon_hwp_file.png") no-repeat center; }
.icon_pdf { width: 18px; height: 20px; background: url("../image/icon/icon_pdf_file.png") no-repeat center; }
.icon_zip { width: 18px; height: 20px; background: url("../image/icon/icon_zip_file.png") no-repeat center; }
.icon_exe { width: 18px; height: 20px; background: url("../image/icon/icon_exe_file.png") no-repeat center; }
.icon_gif,
.icon_jpg,
.icon_tif,
.icon_gif,
.icon_bmp,
.icon_png { width: 18px; height: 20px; background: url("../image/icon/icon_gif_file.png") no-repeat center; }
.icon_wav { width: 18px; height: 20px; background: url("../image/icon/icon_wav_file.png") no-repeat center; }
.icon_avi { width: 18px; height: 20px; background: url("../image/icon/icon_avi_file.png") no-repeat center; }
.icon_eml { width: 18px; height: 20px; background: url("../image/icon/icon_eml_file.png") no-repeat center; }
.icon_etc { width: 18px; height: 20px; background: url("../image/icon/icon_etc_file.png") no-repeat center; }

/**/
@media all and (min-width:180px) and (max-width:479px){
	#emoticon-list .emoticon-obj{ width:33.33%;}
}
@media all and (min-width:480px) and (max-width:1024px){
	#emoticon-list .emoticon-obj{ width:16.66%;}
}
#emoticon-list{margin:0px;text-align:center; width:100%; height:210px;background:#fff; z-index:100; display: none;}
#emoticon-list div{overflow:hidden}
#emoticon-list .emoticon-box{
	height:123px;overflow-y:scroll;padding:5px;width:100%
}
#emoticon-list .emoticon-obj{text-align:center; float:left;}
#emoticon-list .emoticon-obj span{ display:inline-block; text-align:center; width:70px; height:55px; line-height:55px; padding:5px; /* border:1px solid #f4f5f9 !important;  */overflow:hidden;}
#emoticon-list .emoticon-obj img{ height:100%;box-sizing:border-box;  vertical-align:middle;}

#emoticon-list .indicator{ text-align:center; border-top:1px solid #d1d4e0}
#emoticon-list .indicator span{ width:8px; height:8px; display:inline-block; margin:5px; border-radius:4px; background:#bfc1cb}
#emoticon-list .indicator span.on{background:#02c46b}

/* 띄어쓰기 없어 추가 / by JIYEONG / 230413  */
.emoticon-tabs{width:100%;border-top:1px solid #d1d4e0; position:fixed; bottom:0}
.emoticon-tabs div{display:table;}
.emoticon-tabs span{ display:table-cell; width:73px;height:50px; text-align:center; vertical-align:middle; }
.emoticon-tabs span img{ width:50px !important}
.emoticon-tabs span.on{ background:#dadde9}
.emoticon_preview {display:none;position:absolute;bottom: 263px;z-index: 100;background-color: rgba(0,0,0,0.5);width:100% ;text-align:center;height:70px}
.emoticon_preview img {height:60px; padding-top: 5px;}
.file_preview {position:fixed;bottom: 130px;z-index: 1000;background-color: rgba(0,0,0,0.5);width:100% ;text-align:left;height:auto;padding:5px}
.preview_close{position:absolute; right:12px; top:-12px;  width:28px; height:28px; border:2px solid #606069; border-radius:30px; background:#FFF url(../image/icon/btn_menu_close.png) 50% 50% no-repeat;z-index:250; background-size:50%}


/********************************************************************************************************
	협업
*********************************************************************************************************/
/* 메인포탈 헤더 */
div.main_header .sub_header_wrap .eb_tab_wrap { padding: 0 20px; }

/* 상단 */
div.main_coop_wrap { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #ebeef1; min-height: 150px; }
div.main_coop_wrap .main_top { position: absolute; top: 0; left: 0; right: 0; padding: 0 20px; background-color: #31364c; }
div.main_coop_wrap .main_top .coop_list_wrap { position: relative; margin: 0 20px 20px; box-sizing: border-box; background: #272b3d; border-radius: 5px; }
/*
div.main_coop_wrap .main_top { width: 100%; min-height: 160px; padding: 10px 20px 60px 20px; background: #31364c; box-sizing: border-box; }
div.main_coop_wrap .main_top .coop_list_wrap { position: relative; width: 100%; background: #272b3d; border-radius: 5px; }
*/
div.main_coop_wrap .main_top .coop_list_wrap .coop_list ul { margin: 0; padding: 4px 15px; }
div.main_coop_wrap .main_top .coop_list_wrap .coop_list ul > li:first-child { border: none; } 
div.main_coop_wrap .main_top .coop_list_wrap .coop_list ul > li { list-style: none; margin: 0; padding: 0; }
div.main_coop_wrap .main_top .coop_list_wrap .coop_list ul > li .list_subject { display: block; position: relative; overflow: hidden; width: 100%; height: 39px; line-height: 39px; padding: 0px 80px 0 0; color: #ffffff; font-size: 14px; box-sizing: border-box; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap}
div.main_coop_wrap .main_top .coop_list_wrap .coop_list ul > li .list_subject .icon_coop_thumb { vertical-align: middle; margin: -3px 0px 0 0;  }
div.main_coop_wrap .main_top .coop_list_wrap .coop_list ul > li .list_subject .join_member { position: absolute; top: 0; right: 0px; padding: 0 12px 0 0; font-size: 12px; font-weight: normal; background: url('../image/icon/icon_coop_arrow.png') right center no-repeat; background-size: 6px 10px }

/* 하단 */
div.main_coop_wrap .main_bottom { position: relative; overflow-y: auto; max-height: calc(100% - 44px); margin-top: 44px; padding: 0 20px; }
div.main_coop_wrap .main_bottom div.tab_list_wrap { position: absolute; z-index: 1; top: -44px; left: 0px; padding: 0 20px; background: transparent; border-bottom: 2px solid #ebeef1; }
div.main_coop_wrap .main_bottom div.tab_list_wrap.fixed { position: fixed; z-index: 1000; top: 44px;  }
div.main_coop_wrap .main_bottom .coop_content_header { position: relative; width: 100%; min-height: 65px; }
div.main_coop_wrap .main_bottom .coop_content_header .eb_select { float: right; margin: 13px 0px; padding: 2px 10px; box-sizing: border-box; border: solid 1px #cdcdcd; }
div.main_coop_wrap .main_bottom .coop_content_header .search_result_wrap { float: left; padding: 25px 0px; font-size: 14px; }
div.main_coop_wrap .main_bottom .coop_content_header .search_result_wrap .now_count { color: #fc6e57; font-weight: bold; }
div.main_coop_wrap .main_bottom .coop_content ul,
div.main_coop_wrap .main_bottom .coop_content li { margin: 0; padding: 0; list-style: none; }
div.main_coop_wrap .main_bottom .coop_content .coop_box { position: relative; z-index: 100; margin: 0 0 10px 0; padding: 15px 20px 15px 20px; border-bottom: 1px solid #dcdfe1; border-radius: 5px; background: #ffffff }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top { position: relative; width: 100%; height: 60px; border-bottom: solid 1px #e2e2e2 }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .profile_img { float: left; width: 50px; height: 50px; border: solid 4px #ffffff; border-radius: 100%; box-sizing: border-box; overflow: hidden }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .profile_img img { width: 100%; height: 100%; }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .profile_info { float: left; width: 40%; padding: 10px 0 0 5px; line-height: 120%; box-sizing: border-box; }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .profile_info .my_name { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; color: #404040; font-size: 13px; text-overflow: ellipsis; white-space: nowrap}
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .profile_info .my_name > .name { font-weight: bold; font-size: 15px; margin-right: 5px; }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .profile_info .my_division { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; color: #b6bbd1; font-size: 13px; text-overflow: ellipsis; white-space: nowrap }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_top .last_time { position: absolute; top: 15px; right: 0px; margin-top: -6px; font-size: 12px; font-weight: normal; color: #a0a0a0;}
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_bottom { padding: 10px 0 0 0 }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_bottom .status_title { padding: 0 0 5px; margin: 0; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
div.main_coop_wrap .main_bottom .coop_content .read .coop_box .coop_box_bottom .status_title { color: #404040; font-weight: normal; }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_bottom .cnt { padding: 0; margin: 0; font-size: 13px; color: #707070; line-height: 1.5; word-break: break-all; word-wrap: break-word; }
div.main_coop_wrap .main_bottom .coop_content .coop_box .coop_box_bottom .thumbnail { max-height: 150px; max-width: 295px; overflow: hidden; }

div.main_coop_wrap .main_bottom .coop_content .notify_box { position: relative; padding: 15px 0; padding-right: 5em; border-bottom: 1px solid #dcdfe1; line-height: 1.3; }
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_cont a { color: #2e92e6; }
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_cont em { font-style: normal; font-weight: bold; }
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_cont strong { font-weight: normal; }
/*
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_cont strong.blue { color: #609cf0; }
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_cont strong.red { color: #ff6969; }
*/
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_coop { display: block; margin-top: 5px; color: #a0a0a0; }
div.main_coop_wrap .main_bottom .coop_content .notify_box .notify_time { position: absolute; top: 15px; right: 0; width: 6em; margin-top: 2px; color: #a0a0a0; font-size: 12px; word-break: keep-all; word-wrap: break-word; text-align: right; }


/*------------------------------------------------------------------------------
  카드 보기
-------------------------------------------------------------------------------*/
.view_card .item_category { position: relative; padding: 12px 12px 0; padding-right: 5em; border-bottom: none; }
.view_card .item_category > span { display: inline-block; vertical-align: top; }
.view_card .item_category .item_channel { }
.view_card .item_category .item_topic { margin-left: 3px; padding-left: 10px; background: url('../image/icon/icon_arrow_right_small.png') left 4px / 6px no-repeat; }
.view_card .item_category .item_users { position: absolute; right: 15px; top: 12px; }
.view_card .item_title { padding-top: 10px; padding-right: 64px; border-bottom: none; }
.view_card .item_title .item_option { position: absolute; top: 0; right: 15px; margin-top: 7px; }
.view_card .item_title .item_option .icon_alarm { margin-top: 2px; }
.view_card .item_status { margin-top: -3px; vertical-align: middle; }
.view_card .item_status .coop_state { font-weight: normal; }
.view_card .item_status .coop_state + .coop_state { margin-left: 3px; }
.view_card .item_comment { position: absolute; top: 0; right: 15px; }
.view_card .item_etc { overflow: hidden; position: relative; padding-top: 0; padding-left: 60px; }
.view_card .item_etc .item_writer { margin-bottom: 2px; padding-right: 4em; }
.view_card .item_etc .item_writer .profile_img { overflow: hidden; position: absolute; left: 15px; top: 2px; width: 40px; height: 40px; margin-left: -2px; border-radius: 50%; }
.view_card .item_etc .item_writer .profile_img img { width: 100%; height: 100%; }
.view_card .item_etc .item_writer .depart { display: inline-block; margin-top: -2px; color: #a0a0a0; font-size: 0.85em; vertical-align: middle; }
.view_card .item_etc .item_writer .depart:before { content: "|"; display: inline-block; margin: 0 5px; vertical-align: top; }
.view_card .item_etc .item_date { margin-bottom: 2px; margin-right: 5px; }
.view_card .item_etc .item_date em { display: inline-block; margin-top: -2px; padding: 0 5px; background-color: #a0a0a0; color: #fff; font-size: 0.8em; font-style: normal; border-radius: 3px; vertical-align: middle; }
.view_card .item_label { position: static; float: right; width: auto; height: auto; margin-top: -2px; padding: 0 10px 5px; text-align: right; }
.view_card .item_label .label.label_flag:nth-child(5) ~ .label { display: none; }
.view_card .item_label .label.label_flag { box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1); }
.view_card .item_hashtag { margin-top: 10px; }
.view_card .view_body_sub {position: absolute; width: 100%; z-index: 99;}

.linked_card_wrap { overflow: hidden; }
.linked_card_wrap li { height: 0; }
.linked_card_wrap li:first-child { height: auto; }
.linked_card_wrap.open li { height: auto; }


/*------------------------------------------------------------------------------
  카드 라벨
-------------------------------------------------------------------------------*/
.card_label_layer { max-width: 400px; }
.card_label_layer .label_list { margin: 0; padding: 0; list-style: none; }
.card_label_layer .label_list li { position: relative; margin-bottom: 5px; padding: 3px 0; padding-left: 18px; }
.card_label_layer .label_list .item_label { left: 0; top: 4px; width: auto; height: auto; vertical-align: top; }
.card_label_layer .label_list .item_label .label.label_flag { width: 14px; height: 20px; }
.card_label_layer .label_list .item_label .label.label_flag:after { border-width: 7px; border-bottom-width: 6px; }


/*------------------------------------------------------------------------------
  카드 알람설정
-------------------------------------------------------------------------------*/
.card_alarm_layer {}
.card_alarm_layer .table_form,
.card_alarm_layer .table_form > li { margin: 0; padding: 0; list-style: none; }
.card_alarm_layer .table_form > li { clear: both; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid #e4e7ed; }
.card_alarm_layer .table_form > li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.card_alarm_layer .table_form .th { float: left; width: 5em; color: #707070; line-height: 32px; }
.card_alarm_layer .table_form .td { margin-left: 5em; }
.card_alarm_layer .table_form .td .item_list { padding-top: 5px; }
.card_alarm_layer .table_form .td .item_list li + li { margin-top: 5px; }
.card_alarm_layer .table_form .td .item_list li:last-child { margin-bottom: 0; }


/*------------------------------------------------------------------------------
  카드 파일 모아보기
-------------------------------------------------------------------------------*/
.list_reference.attached_file_list li { padding-left: 48px; }
.list_reference.attached_file_list li .icon { width: 28px; height: 20px; top: 1px; left: -48px; }
.list_reference.attached_file_list li .item_title { margin-bottom: 0; padding-right: 5em; font-size: 1em; font-weight: normal; }
.list_reference.attached_file_list li .item_volume { position: absolute; right: 0; top: 2px; }


/*------------------------------------------------------------------------------
  카드 정보
-------------------------------------------------------------------------------*/




/********************************************************************************************************
	주소록
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  연락처 추가
-------------------------------------------------------------------------------*/
.write_addrbook .item_mailbox .dd { height: 37px; }






/********************************************************************************************************
	일정
*********************************************************************************************************/
/* 일정등록 */
.write_schedule .item_period .form_option { border-top : 1px solid #e4e7ed; }

/* 일정 상세보기 */
.view_schedule .item_category,
.view_schedule .item_title { border-bottom: none; }
.view_schedule .item_title { padding-top: 15px; }
.view_schedule .item_etc { padding-top: 0; }
.view_schedule .item_title + .item_etc { overflow: hidden; border-bottom: none; }
.view_schedule .item_etc > div { margin-top: 3px; }
.view_schedule .item_comment { float: right; margin-left: 10px; }
.view_schedule .item_comment:after { content: ""; display: block; clear: both; }
.view_schedule .item_comment + div { clear: both; margin-top: 7px; }
.view_schedule .item_writer { float: left; }
.view_schedule .item_period { clear: both; }


/*------------------------------------------------------------------------------
  부재관리
-------------------------------------------------------------------------------*/
/* 부재 등록 */
.write_absence .item_title { padding-right: 15px; }
.write_absence .item_period .dt { padding-top: inherit; vertical-align: middle; }
.write_absence .item_period .form_period > span { padding-top: 7px; padding-bottom: 7px; }
/* .write_absence .item_period .form_period input[type="date"] { padding-left: 18px; background: url('../image/icon/icon_form_calendar.png') center left / 15px no-repeat; } */
.write_absence .item_user { position: relative; padding-right: 18px; }

/* 부재 목록 */
.list_absence { line-height: 1.5; }
.list_absence ul, 
.list_absence li { margin: 0; padding: 0; list-style: none; }
.list_absence li { padding: 12px 15px; border-bottom: 1px solid #dbdfe1; }
.list_absence li:last-child { border-bottom: none; }
.list_absence li .title { font-size: 1.15em; font-weight: bold; }
.list_absence li .period { color: #a0a0a0; }
.list_absence li .approval > div { position: relative; margin-top: 7px; padding-left: 5em; }
.list_absence li .approval > div > span { display: block; /*display: inline-block; vertical-align: top;*/ }
.list_absence li .approval .depart { }
.list_absence li .approval .state { position: absolute; left: 0; top: 0; width: 5em; padding: 1px 0 0; background-color: #a5a5a5; color: #fff; border-radius: 3px; font-size: 0.9em; text-align: center; }
.list_absence li .approval .state.on { background-color: #22d9ac; }
.list_absence li .approval .sign { padding-left: 16px; background: url('../image/icon/icon_calendar_sign.png') left 2px / 14px no-repeat; }

/* 부재 상세 */
.view_absence .item_category,
.view_absence .item_title { border-bottom: none; }
.view_absence .item_title { padding-top: 15px; }
.view_absence .item_etc { padding-top: 0; }
.view_absence .approval > div { position: relative; padding-left: 5em; }
.view_absence .approval > div + div { margin-top: 7px; }
.view_absence .approval > div > span { display: block; /*display: inline-block; vertical-align: top;*/ }
.view_absence .approval .depart { }
.view_absence .approval .state { position: absolute; left: 0; top: 0; width: 5em; padding: 1px 0 0; background-color: #a5a5a5; color: #fff; border-radius: 3px; font-size: 0.9em; text-align: center; }
.view_absence .approval .state.on { background-color: #22d9ac; }
.view_absence .approval .sign { padding-left: 16px; background: url('../image/icon/icon_calendar_sign.png') left 2px / 14px no-repeat; }

 
/*------------------------------------------------------------------------------
  공유자원
-------------------------------------------------------------------------------*/
/* 공유자원리스트 */
.common_resources_list ul{ position: relative; margin: 0; padding: 0; list-style: none; }
.common_resources_list li { position: relative; margin: 0; padding: 12px 15px 10px 155px;border-bottom: 1px solid #dbdfe1; list-style: none; line-height: 1.5; }
.common_resources_list li > div { word-break: break-all; }
.common_resources_list li .item_date{position: absolute; top: 15px; left: 15px; width: 70px; margin-top: -1px; font-size: 0.9em;word-break: break-all;}
.common_resources_list li .item_state,
.view_common_resources .view_header .item_state{position: absolute; top: 15px; left: 85px; width:65px; margin-top: -2px; text-align: center;line-height: 20px; display: inline-block; border-radius: 3px; color: #fff}
.common_resources_list li .item_category { margin-bottom: 3px; color: #202020; font-weight: bold; font-size: 1.15em; line-height: 1.3; }
.common_resources_list li .item_writer{font-size: 0.9em; word-break: break-all;  color: #a0a0a0}
.common_resources_list li .item_title{ font-size: 0.9em; word-break: break-all; }
.more_common_resources { position: absolute; right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: calc(100% - 160px); padding: 0 10px; padding-right: 20px; height: 25px; line-height: 24px; background:url('../image/icon/icon_windown_more.png') center right / 5px no-repeat; font-size: 16px; }

/* 공유자원 검색결과 */
.common_resources_list.search_result {}
.common_resources_list.search_result .item_date { position: static; width: auto; }
.common_resources_list.search_result li { padding-left: 85px; }
.common_resources_list.search_result li .item_state { left: 15px; }

.item_state.TEMPSAVE{ background: #c9c9c9} 			/*임시저장*/
.item_state.RESERVE{ background: #0095da} 			/*예약*/
.item_state.RESERVECANCEL{ background: #f51242} 		/*예약취소*/
.item_state.AUTOAPPROVE{ background: #17b56e} 		/*자동승인*/
.item_state.APPROVE{ background: #17b56e}			/*승인*/
.item_state.CANCEL { background: #c9c9c9}			/*반려*/
.item_state.APPROVECANCEL{ background: #f51242} 	/*승인취소*/
.item_state.AUTORENT{ background: #17b56e} 		/*자동대여*/
.item_state.RENT{ background: #17b56e}			/*대여*/
.item_state.AUTORETURN{ background: #c9c9c9} 		/*자동반납*/
.item_state.RETURN{ background: #c9c9c9}			/*반납*/
.item_state.DELAY{ background: #f51242}			/*반납지연*/

.write_common_resources .view_header{ position: relative}
.write_common_resources .item_period .form_option { border-top : 1px solid #e4e7ed; }
.view_common_resources .view_header .item_state{  position: relative; left: 0; top:-2px; font-size: 14px; font-weight: normal}
.view_common_resources .item_title { padding-top: 15px; border-bottom: none; }
.view_common_resources .item_title + .item_etc { padding-top: 0; }


.btn_function_wrap ul { display: table; width: 100%; max-width: 100%; table-layout: fixed; padding: 0; margin: 0}
.btn_function_wrap ul li { display: table-cell; text-align: center; }
/*------------------------------------------------------------------------------
  검색
-------------------------------------------------------------------------------*/
/* 상세검색 */
.write_search {}
.write_search .note { font-size: 0.85em; color: #a9a9a9; }
.write_search .item_period { text-align: center; }
.write_search .item_period .form_span { margin: 0 5px; }
.write_search .item_list ul { margin-top: 5px; }



/*------------------------------------------------------------------------------
  모바일 기기 등록
-------------------------------------------------------------------------------*/
.device_regist_wrap { line-height: 1.5; }
.device_regist_wrap .device_regist_note { padding: 15px 20px; border-bottom: 1px solid #dbdfe1; text-align: center; word-break: keep-all; word-wrap: word-break; }
.device_regist_wrap .device_regist_note p { margin: 0; margin-bottom: 15px; }
.device_regist_wrap .device_regist_note p:last-child { margin-bottom: 0; }
.device_regist_wrap .device_regist_note p + p:before { content: ""; display: block; width: 24px; height: 1px; margin: 0 auto; margin-bottom: 15px; background-color: #e4e7ed; }
.device_regist_wrap .device_regist_note strong { color: #fc6e57; }
.device_regist_wrap .device_regist_list ul,
.device_regist_wrap .device_regist_list li { margin: 0; padding: 0; list-style: none; }
.device_regist_wrap .device_regist_list li { position: relative; padding: 10px 15px 12px; padding-left: 50px; border-bottom: 1px solid #dbdfe1; }
.device_regist_wrap .device_regist_list li.in_use .device_info strong em { display: inline-block; margin-top: -3px; margin-left: 3px; padding: 0 6px; background-color: #fc6e57; color: #fff; font-size: 0.75em; font-style: normal; font-weight: normal; border-radius: 2em; vertical-align: middle; }
.device_regist_wrap .device_regist_list .eb_checkbox { position: absolute; left: 20px; top: 50%; margin-top: -8px; }
.device_regist_wrap .device_regist_list .device_info { display: block; }
.device_regist_wrap .device_regist_list .device_info strong { display: block; font-size: 1.15em; }
.device_regist_wrap .device_regist_list .device_info span { display: block; margin-top: 2px; }
.device_regist_wrap .device_regist_list .device_info span em { display: inline-block; margin-top: -1px; margin-right: 2px; padding: 0 5px; background-color: #a0a0a0; color: #fff; font-size: 0.8em; font-style: normal; border-radius: 3px; vertical-align: middle; }


/*------------------------------------------------------------------------------
  상세화면 본문 iscroll-zoom
-------------------------------------------------------------------------------*/
div[id^=wrapper_] {
	/* 필수 */
	position: relative;
	z-index: 1;
	overflow: hidden;
	min-height: 110px;
	padding: 0 !important;
}
div[id^=scroller_] {
	position: absolute;
	padding: 12px 15px;
}

div.form_cont_wrap > div { margin: 0 auto; }

/*------------------------------------------------------------------------------
 pull to refresh
------------------------------------------------------------------------------*/
.ptrc--icon { font-size: 200%; color: rgba(128, 128, 128, 0.6) !important; }
.ptrc--text { visibility: hidden; height: 5px; }




/*근태*/

.att div.header .sub_header_wrap .fixed_header{ color:#707070; }

.layout.att, .att div.header .sub_header_wrap .fixed_header {background: #ebeef1; border-bottom:none;color:#707070; }
.att .fixed_header .form_select{ color:#707070;}


.list_att .att_box {position: relative;padding: 15px 20px; box-shadow: 0 1px 0 #dcdfe1;border-radius: 5px;background: #ffffff; overflow:hidden; margin-bottom:10px }
.list_att.contents_list li{padding:0 20px; border-bottom: 0}

.list_att.att_cd {padding:0 20px;}
.list_att .form_select {width: 100%; background-position: right 2px center; } 

.att_box ul{float: right; width:240px }
.att_box ul li{display:inline-block; padding: 0!important; overflow: hidden}
.att_box ul li span{display: block}
.att_box ul li span:last-child{font-weight: bold}
.att_box ul > li:nth-child(1){width: 100px}
.att_box ul > li:nth-child(2){width: 70px}
.att_box ul > li:nth-child(3){width: 60px}
.att_box .icon{margin-top: 3px}

.write_btn_wrap{ overflow: hidden; padding: 0 20px; margin-bottom: 30px}
.write_btn_wrap .eb_btn{ width: 49.5%; height: 50px; border-radius:5px; font-weight:bold}
.write_btn_wrap .eb_btn:last-child { float: right; }

.btn_on{background: #fc6e57; color:#fff}
.btn_off{background: #fff; color:#31364c}

.att_box.att_info div{ line-height:30px }
.att_box.att_info span:first-child { width:120px;  display:inline-block; color:#707070; vertical-align:top }
.att_box.att_info span:last-child   { color:#303030; font-weight:bold; display:inline-block; width:calc(100% - 125px) }

.btn_inquiry { position: relative; display: inline-block;  height: 20px; line-height: 1; padding: 0 10px; border: none; background-color: #e5e5e5; border-radius: 2em; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; box-sizing: border-box; color: #707070; font-size: 11px;float: right; margin-top: 5px}

.icon_attA1{ width:34px; height: 34px;border-radius: 5px; background:#39b54a url( "../image/icon/icon_att01.png"); background-size: contain}/*정상*/
.icon_attA2{ width:34px; height: 34px;border-radius: 5px; background:#0072bc url( "../image/icon/icon_att02.png"); background-size: contain}/*외근*/
.icon_attA3{ width:34px; height: 34px;border-radius: 5px; background:#00a99d url( "../image/icon/icon_att03.png"); background-size: contain}/*출장*/
.icon_attA4{ width:34px; height: 34px;border-radius: 5px; background:#662d91 url( "../image/icon/icon_att04.png"); background-size: contain}/*교육*/
.icon_attA5{ width:34px; height: 34px;border-radius: 5px; background:#ed1c24 url( "../image/icon/icon_att05.png"); background-size: contain}/*지각*/
.icon_attA6{ width:34px; height: 34px;border-radius: 5px; background:#329c4c url( "../image/icon/icon_att06.png"); background-size: contain}/*조퇴*/
.icon_attA7{ width:34px; height: 34px;border-radius: 5px; background:#ed1c24 url( "../image/icon/icon_att07.png"); background-size: contain}/*결근*/
.icon_attA8{ width:34px; height: 34px;border-radius: 5px; background:#00aeef url( "../image/icon/icon_att08.png"); background-size: contain}/*연차*/
.icon_attA9{ width:34px; height: 34px;border-radius: 5px; background:#f26522 url( "../image/icon/icon_att09.png"); background-size: contain}/*오전반차*/
.icon_attA10{ width:34px; height: 34px;border-radius: 5px; background:#f7941d url( "../image/icon/icon_att10.png"); background-size: contain}/*오후반차*/
.icon_attA11{ width:34px; height: 34px;border-radius: 5px; background:#00aeef url( "../image/icon/icon_att11.png"); background-size: contain}/*공가*/
.icon_attA12{ width:34px; height: 34px;border-radius: 5px; background:#2e3192 url( "../image/icon/icon_att12.png"); background-size: contain}/*경조*/
.icon_attA13{ width:34px; height: 34px;border-radius: 5px; background:#ec008c url( "../image/icon/icon_att13.png"); background-size: contain}/*병가*/
.icon_attA14{ width:34px; height: 34px;border-radius: 5px; background:#0054a6 url( "../image/icon/icon_att14.png"); background-size: contain}/*출산*/
.icon_attA15{ width:34px; height: 34px;border-radius: 5px; background:#8dc63f url( "../image/icon/icon_att15.png"); background-size: contain}/*휴직*/
.icon_attA16{ width:34px; height: 34px;border-radius: 5px; background:#edf92d url( "../image/icon/icon_att16.png"); background-size: contain}/*미등록*/

/*경비처리*/
.contents_list.list_expense li { padding-left: 118px; }
.list_expense li .item_check { position: absolute; top: 12px; left: 12px; margin-top: 5px; z-index: 1; }
.list_expense li .item_check input { position: relative; z-index: 3; }
.list_expense li .item_check label { position: absolute; left: -12px; top: -12px; display: block; width: 40px; height: 40px; font-size: 0; z-index: 2; }
.list_expense li .item_check.eb_checkbox > input + label { margin-left: 0; }
.list_expense li .item_date { position: absolute; width: 6em; top: 9px; right: 20px; margin-top: 2px;font-size: 1.15em; }
.list_expense li .item_category, 
.list_expense li .item_writer { margin-right: 20px; }
.list_expense li .item_writer { padding-right: 6em; }
.list_expense li .item_category { padding-right: 6em; color: #a0a0a0; vertical-align: top; }
.list_expense li .item_title { padding-right: 20px; line-height: 1; min-height:16px; }
.list_expense li .item_title.mt_10 { margin-top: 10px; }
.list_expense li .item_option .icon { position: absolute; top: 12px; right: 10px; }
.list_expense li .item_option .icon.icon_favorite { top: 12px; }
.list_expense li .item_option .icon.icon_attach { top: 35px; }
.contents_list.list_expense li.selected { background-color: #eef6fd !important; }

.list_expense li .item_exp_status { position: absolute; top:17px; width: 65px; margin-top: -2px; text-align: center; line-height: 20px; display: inline-block; border-radius: 3px; color: #fff;left:40px}
.list_expense li .item_exp_status.READY{ background: #c9c9c9} 		/*작성중*/
.list_expense li .item_exp_status.REQ{ background: #0095da} 		/*요청*/
.list_expense li .item_exp_status.SUBREQ{ background: #0095da} 		/*요청*/
.list_expense li .item_exp_status.CHECK{ background: #17b56e} 		/*확인*/
.list_expense li .item_exp_status.SUBMISSION{ background: #17b56e}	/*제출*/
.list_expense li .item_exp_status.RCV { background: #17b56e}		/*접수*/
.list_expense li .item_exp_status.CONFIRMREQ{ background: #17b56e} 	/*승인요청*/
.list_expense li .item_exp_status.CONFIRM{ background: #17b56e} 	/*승인*/
.list_expense li .item_exp_status.CANCEL{ background: #f51242}		/*반려*/
.list_expense li .item_exp_status.REFUSE{ background: #f51242} 		/*거절*/
.list_expense li .item_exp_status.RETURN{ background: #f51242}		/*반송*/

#expense_contents div.sub_contents_header .select_wrap .date_box{width: calc(100% - 31px)}


/* 확인요청 창 */
.expense_confirm ul { margin: 0; padding: 0; }
.expense_confirm .expense_confirm_list li { list-style: none; position: relative; padding: 0 0 0 200px; border-bottom: 1px solid #dbdfe1; box-sizing: border-box; cursor: pointer ;overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; }
.expense_confirm li > .progress_item:last-child { border-bottom: none; }
.expense_confirm .progress { display: inline-block; position: absolute; left: 15px; top: 15px; }
.expense_confirm .progress_item { position: relative; padding: 15px 0; padding-right: 60px; border-bottom: 1px solid #dbdfe1; box-sizing: border-box; opacity: 0.8; }
.expense_confirm .progress_item.active { opacity: 1; }
.expense_confirm .progress_item.active .user { font-weight: bold; color: #000; }
.expense_confirm .user { margin-bottom: 5px; }
.expense_confirm .group { margin-left: 3px; color: #a0a0a0; font-size: 0.85em; }

/* [아이콘] 공통 */
.icon_red_warning { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url("../image/common/icon_red_warning.png") no-repeat center; }
.icon_warning { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url("../image/common/icon_warning.png") no-repeat center; }

/********************************************************************************************************
 [개발컨설팅] yyyy-mm-dd / CST-DEV-0002 / 김희중 / [모바일] 분기형 설문, 금호타이어 기능 참고 (KHT-VOTE_1909-1110~1120, KET-REQ_010)
	설문
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  설문 리스트
-------------------------------------------------------------------------------*/
.list_vote li .item_answer { padding: 0; background: none; color: #a5a5a5; line-height: inherit; display: inline-block; min-width: 2em; border-radius: 3px; text-align: center; font-size: 0.85em; }
.list_vote li .item_date { float: right; position: relative; top: 2px; }

/*------------------------------------------------------------------------------
  설문 상세보기/결과보기
-------------------------------------------------------------------------------*/
/* header */
.vote_view_wrap .view_header { position: relative; }
.vote_view_wrap .view_header div:last-child { border-bottom: 1px solid #dcdfe1 }
.vote_view_wrap .view_header div.vote_title { padding-top: 15px; padding-left: 15px; border-bottom: none; }
.vote_view_wrap .view_header div { border-bottom: none; }
.vote_view_wrap .view_header .item_etc { position: relative; left: 2px; /*bottom: 5px;*/ }
.vote_view_wrap .view_header .item_etc .vote_date { position: relative; bottom: 5px; }
.vote_view_wrap .view_header .item_etc,
.vote_view_wrap .view_header .vote_description,
.vote_view_wrap .view_header .vote_guide
{ padding-top: 0px; }
.vote_view_wrap .view_header .vote_guide { margin-top: -3px; }
.vote_view_wrap .view_header .vote_guide span { font-style:italic; color: red; position: relative; right: 2px; font-size: 12px; }

/* contents */
.vote_view_wrap {}
.vote_view_wrap .vote_body div[id^=scroller_] { position: absolute; padding: 0px; }
.vote_view_wrap .eb_accordion_wrap { /* padding: 3px; margin-top: 63px;*/ }
.vote_view_wrap .eb_accordion_wrap .eb_accordion { border-bottom: none; }
.vote_view_wrap .eb_accordion_wrap .eb_accordion .eb_accordion_title { position: relative; z-index: 0; padding: 10px; margin: 0px; border-radius: 0px; background: transparent; font-size: 16px; font-weight: bold; }
.vote_view_wrap .eb_accordion_wrap .eb_accordion > .eb_accordion_title > .btn_accordion { padding: 7px; }
.vote_view_wrap .eb_accordion_wrap .eb_accordion .eb_accordion_conts { display: none; position: relative; z-index: 99; padding: 5px 0px 0px 0px; top: 0px; background: transparent;  border-radius: 5px;}
.vote_view_wrap .eb_accordion_wrap .eb_accordion .eb_accordion_conts .description { padding: 2px 10px 0px 10px; }
.vote_view_wrap .eb_accordion_wrap .eb_accordion .eb_accordion_conts .description span { font-size: 13px; color: #a0a0a0; }
.vote_view_wrap .eb_accordion_wrap ul, .vote_view_wrap .eb_accordion_wrap li { margin: 0; padding: 0; list-style: none; }
.vote_view_wrap .eb_accordion_wrap .poll_content > ul > li { position: relative; padding: 15px 0 12px; border-bottom: 1px solid #e5e5e5; font-size: 13px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_number { float: left; width: 20px; text-align: right;  font-size: 14px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_number:after { content: "."; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_content { margin-left: 24px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_content > ul > li + li { margin-top: 8px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_content p { margin: 0; padding: 0; padding-bottom: 8px; font-weight: 600; font-size: 14px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .img_wrap { margin-left: 25px; margin-top: 5px; max-width: 240px; max-height: 240px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .img_wrap img { max-width: 100%; max-height: inherit; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_content.footnote { margin-left: 0; }
.vote_view_wrap .eb_accordion_wrap .poll_content .question_content.footnote > ul > li { padding: 18px; border: 1px solid #f5f5f5; background-color: #fbfbfb; font-size: 13px; }
.vote_view_wrap .eb_accordion_wrap .poll_content .next { color: red; font-weight: bold; }
.vote_view_wrap .eb_textarea { padding: 5px; }
.vote_view_wrap textarea { height: 60px; width: 98%; border: 1px solid #d5d5d5; }

/* reulst contents */
.vote_view_wrap .eb_accordion_wrap .poll_content.result .percentage_bar { width: 100%; margin-top: 5px; }
.vote_view_wrap .eb_accordion_wrap .poll_content.result .percentage_bar > span { }
.vote_view_wrap .eb_accordion_wrap .poll_content.result .percentage_bar .text { width: 120px; margin-top: -3px; text-align: left; color: #707070; }
.vote_view_wrap .eb_accordion_wrap .poll_content.result .percentage_bar .graph { margin-right: 120px; } 

/*------------------------------------------------------------------------------
  설문 항목 응답자 및 내용 조회
-------------------------------------------------------------------------------*/
.vote_answer_list_wrap {}
.vote_answer_list_wrap .view_header .question { font-size:15px; color: #202020; font-size: 15px; font-weight: bold; border-bottom: none; }
.vote_answer_list_wrap .view_header .item { font-size:12px; position: relative; left: 10px; bottom: 8px; border-bottom: none; }
.vote_answer_list_wrap .view_header .sub_tab { position: relative; height: 24px; border-bottom: none; padding: 0px; }
.vote_answer_list_wrap .view_header .sub_tab[data-count-tab='2'] > ul > .en_btn { width: 20%; }
.vote_answer_list_wrap .view_header .sub_tab > ul > li { float: left; height: 22px; line-height: 22px; text-align: center; }
.vote_answer_list_wrap .view_header .sub_tab > ul > .en_btn.active { border-bottom: solid 2px #eb765f; font-weight: bold; color: #eb765f; }
.vote_answer_list_wrap .view_header div:last-child { border-bottom: 1px solid #dcdfe1 }

/* item */
.vote_answer_list_wrap .vote_body.item_answer ul { display: grid; /*grid-template-columns: repeat(2, 1fr);*/ }
.vote_answer_list_wrap .vote_body.item_answer .profile_wrap { position: relative; display: flex; width: 100%; align-items: center; padding: 5px; }
.vote_answer_list_wrap .vote_body.item_answer .profile_wrap .profile_img { width: 40px; height: 40px; }
.vote_answer_list_wrap .vote_body.item_answer .profile_wrap .profile_img .frame { position: relative; overflow: hidden; display: block; height: inherit; background-color: #f5f5f5; border-radius: 50%; }
.vote_answer_list_wrap .vote_body.item_answer .profile_wrap .profile_img .frame img { width: 100%; height: 100%; }
.vote_answer_list_wrap .vote_body.item_answer .profile_wrap .profile_txt { padding-left: 8px; }

/* comment */
.vote_answer_list_wrap .vote_body.comment_answer div[id^=scroller_] { position: absolute; padding: 0px; }
.vote_answer_list_wrap .vote_body.comment_answer ul > li { padding:10px 0 10px 16px; position: relative; border-bottom: 1px solid #eee }
.vote_answer_list_wrap .vote_body.comment_answer .info_box .profile_photo { overflow: hidden; display: block; float: left; width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; border: 1px solid #e5e8ee; background-color: #e5e8ee; box-sizing: border-box; }
.vote_answer_list_wrap .vote_body.comment_answer .info_box .comment_txt { padding:0 20px 0 48px; box-sizing: border-box; line-height: 1.3; word-break: break-all; word-wrap: break-word; }