@charset "utf-8";

/* 폰트 변경 */
/*
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 300;
src: url('../../font/NotoSans-Light.woff2') format('woff2'),
url('../../font/NotoSans-Light.woff') format('woff'),
url('../../font/NotoSans-Light.otf') format('opentype');
}

@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url('../../font/NotoSans-Regular.woff2') format('woff2'),
url('../../font/NotoSans-Regular.woff') format('woff'),
url('../../font/NotoSans-Regular.otf') format('opentype');
}

@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 600;
src: url('../../font/NotoSans-Medium.woff2') format('woff2'),
url('../../font/NotoSans-Medium.woff') format('woff'),
url('../../font/NotoSans-Medium.otf') format('opentype');
}

body,
button, input, optgroup, select, textarea { font-family: 'NanumGothic', 'Noto Sans KR', 'malgun gothic', 'sans-serif', 'dotum', sans-serif; }
*/
/* 범용 */
.pr-5 {padding-right:5px;}
.pl-5 {padding-left:5px;}
.pr-10 {padding-right:10px;}
.pl-10 {padding-left:10px;}
.pr-15 {padding-right:15px;}
.pl-15 {padding-left:15px;}
.pr-20 {padding-right:20px;}
.pl-20 {padding-left:20px;}
.pr-25 {padding-right:25px;}
.pl-25 {padding-left:25px;}
.dp-flex {display:flex;}
.position-relative {position:relative;}

/* 게시판 공통 */
.bbs_list_wrap .eb_tbl tbody tr td.active .contents_link { font-weight: normal; }

/* 게시판 본문 */
div.bbs_view .bbs_view_body .bbs_view_textarea { line-height: 1.8; }
.darkmode div.bbs_view .bbs_view_body .bbs_view_textarea { line-height: 1.8; color:#FFFFFF;}

/*툴팁박스*/
div.tooltip_box { overflow: hidden; margin-bottom: 10px; padding: 16px 24px 14px; background-color: #f4f7fc; border-radius: 5px; font-size: 13px;}
.darkmode div.tooltip_box { overflow: hidden; margin-bottom: 10px; padding: 16px 24px 14px; background :linear-gradient(#6D6E6D, #484848); border-radius: 5px; font-size: 13px;}
div.tooltip_box .eb_btn { float: right; margin: -2px 0; margin-left: 10px; padding-left: 8px; padding-right: 8px; background-color: #fff; z-index: 1; }
div.tooltip_box.closed .text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1; height: 1em; }

/*2024-01-04 / jj_baek / 다크모드 */
.darkmode div.tooltip_box { overflow: hidden; margin-bottom: 10px; padding: 16px 24px 14px; background :linear-gradient(#6D6E6D, #484848); border-radius: 5px; font-size: 13px; color:#FFFFFF;}
.darkmode div.tooltip_box .eb_btn { float: right; margin: -2px 0; margin-left: 10px; padding-left: 8px; padding-right: 8px; background-color: transparent; z-index: 1; }

/*[롯데그룹] 2021-09-07 / LDM_DEV_0150 / by bhu3321 / 모바일 관리자 화면 개발*/
div.mmointooltip_box { margin-bottom: 10px; padding: 10px 24px 18px; background-color: #f4f7fc; border-radius: 5px; }
/******************************************************
로고
*******************************************************/
/*---------------------------------------------------------------------
로고
----------------------------------------------------------------------*/
/*로고 크기*/
div.header_wrap div.header_logo_wrap div.header_logo img {max-width: 170px;max-height: 40px; vertical-align: middle;}
div.header_logo_wrap div.header_logo a {line-height : 40px;}
div.header_wrap div.header_logo_wrap {top: 9px;}



/*******************************************************************************/
/* [롯데그룹] 2021-07-26 / LDM_DEV_0141 / by hbkim / 프로파일 팝업레이어 퍼블리싱 적용 */
/*  2024-03-18 / ahhyeon.lee / 프로파일 팝업레이어 다크모드 적용  */
div.header_mymenu {text-align: left;}
div.header_mymenu div.profile_photo {float: left; margin-right: 10px;}
div.header_mymenu .login_log{margin: 20px 0 5px 0;}
div.header_mymenu .login_log p {padding: 2px; margin: 0;}
.darkmode div.header_mymenu .login_log p {padding: 2px; margin: 0;color:#a0a0a0;}

div.header_mymenu .mymenu_btn .eb_btn {width: 49%; display: inline-block; border-width: 1px; border-style: solid;}
div.header_mymenu .mymenu_btn .eb_btn.my_logout.extension {color: #707070; background: #fff; border: 1px solid #c3c6c9;}
div.header_mymenu .mymenu_btn .eb_btn.my_setting {width: 100%; color: #707070; background: #fff; border: 1px solid #c3c6c9;}
.darkmode div.header_mymenu .mymenu_btn .eb_btn.my_logout.extension {color: #FFFFFF; background-color: #3f3f3f; border: 1px solid #21211f;border-radius:5px;box-shadow: inset 0px 1px 0px 0px rgba(127,127,125,0.6); /* 상단 내부 그림자 효과 */}
.darkmode div.header_mymenu .mymenu_btn .eb_btn.my_setting {width: 100%; color: #FFFFFF; background-color: #3f3f3f; border: 1px solid #21211f;border-radius:5px;box-shadow: inset 0px 1px 0px 0px rgba(127,127,125,0.6); /* 상단 내부 그림자 효과 */}

/* glass 스타일 */
:root {
  --glass_style_button_bgcolor: rgba(255,255,255,0.4);
  --glass_style_button_bgcolor_hover : rgba(255,255,255,0.8);
  --glass_style_button_border: 1px solid rgba(255,255,255,0.25);
  --glass_style_button_shadow_hover : inset 0 0 2px 2px #dcdcdc;
  
  --theme_1_color: rgba(237, 27, 36, 0.6);		--theme_1_color_hover: rgba(237, 27, 36, 0.9);
  --theme_2_color: rgba(50, 87, 146, 0.6);		--theme_2_color_hover: rgba(50, 87, 146, 0.9);
  --theme_3_color: rgba(0, 125, 95, 0.6);		--theme_3_color_hover: rgba(0, 125, 95, 0.9);
  --theme_4_color: rgba(63, 63, 63, 0.6);		--theme_4_color_hover: rgba(63, 63, 63, 0.9);
  --theme_5_color: rgba(158, 137, 110, 0.6); 	--theme_5_color_hover: rgba(158, 137, 110, 0.9);
  --theme_6_color: rgba(117, 164, 197, 0.6);	--theme_6_color_hover: rgba(117, 164, 197, 0.9);
  --theme_7_color: rgba(50, 54, 74, 0.6);		--theme_7_color_hover: rgba(50, 54, 74, 0.9);
  --theme_8_color: rgba(149, 70, 217, 0.6);		--theme_8_color_hover: rgba(149, 70, 217, 0.9);
  --theme_D_color: rgba(51, 51, 51, 0.6);		--theme_D_color_hover: rgba(51, 51, 51, 0.9);
  
  --theme_1_gradient: linear-gradient(135deg, rgba(237, 27, 36, 0.85) 0%, rgba(194, 38, 116, 0.95) 100%);
  --theme_2_gradient: linear-gradient(135deg, rgba(50, 87, 146, 0.85) 0%, rgba(68, 63, 156, 0.95) 100%);
  --theme_3_gradient: linear-gradient(135deg, rgba(0, 125, 95, 0.85) 0%, rgba(0, 107, 116, 0.95) 100%);
  --theme_4_gradient: linear-gradient(135deg, rgba(63, 63, 63, 0.85) 0%, rgba(83, 83, 83, 0.95) 100%);
  --theme_5_gradient: linear-gradient(135deg, rgba(158, 137, 110, 0.85) 0%, rgba(145, 110, 78, 0.95) 100%);
  --theme_6_gradient: linear-gradient(135deg, rgba(117, 164, 197, 0.85) 0%, rgba(92, 133, 188, 0.95) 100%);
  --theme_7_gradient: linear-gradient(135deg, rgba(50, 54, 74, 0.85) 0%, rgba(73, 50, 94, 0.95) 100%);
  --theme_8_gradient: linear-gradient(135deg, rgba(149, 70, 217, 0.85) 0%, rgba(108, 58, 221, 0.95) 100%);
  --theme_D_gradient: linear-gradient(135deg, rgba(51, 51, 51, 0.85) 0%, rgba(35, 35, 35, 0.95) 100%);
}
div.header_mymenu_glass .login_log{margin: 20px 0 5px 0;}
div.header_mymenu_glass .login_log p {padding: 2px; margin: 0;}
div.header_mymenu_glass .mymenu_btn .eb_btn {width: 49%; display: inline-block; border-width: 1px; border-style: solid;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_setting {width: 100%; color: rgba(0,0,0,0.9); background-color: var(--glass_style_button_bgcolor); border: var(--glass_style_button_border); border-radius:5px;color: rgba(0, 0, 0, 0.9);font-weight:500;margin-bottom:4px;transition:all 0.5s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_setting:hover {box-shadow: var(--glass_style_button_shadow_hover); background-color: var(--glass_style_button_bgcolor_hover);transition:all 0.3s ease;}

div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.extension {color: rgba(0,0,0,0.9); background-color: var(--glass_style_button_bgcolor); border: 1px solid rgba(255,255,255,0.25);border-radius:5px;color: rgba(0, 0, 0, 0.9);font-weight:500;margin-bottom:4px;transition:all 0.5s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.extension:hover {box-shadow: var(--glass_style_button_shadow_hover); background-color: var(--glass_style_button_bgcolor_hover);transition:all 0.3s ease;}
/* 로그아웃 버튼은 테마별 css 파일로 사용하지 않고, 한군데에서 처리 */
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout {color: rgba(255,255,255,0.9);font-weight:700; background-color: var(--glass_style_button_bgcolor); border: var(--glass_style_button_border); border-radius:5px;margin-bottom:4px;transition:all 0.5s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_1{background-color:var(--theme_1_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_2{background-color:var(--theme_2_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_3{background-color:var(--theme_3_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_4{background-color:var(--theme_4_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_5{background-color:var(--theme_5_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_6{background-color:var(--theme_6_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_7{background-color:var(--theme_7_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_8{background-color:var(--theme_8_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_D{background-color:var(--theme_D_color);}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_1:hover{background-color:var(--theme_1_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_2:hover{background-color:var(--theme_2_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_3:hover{background-color:var(--theme_3_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_4:hover{background-color:var(--theme_4_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_5:hover{background-color:var(--theme_5_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_6:hover{background-color:var(--theme_6_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_7:hover{background-color:var(--theme_7_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_8:hover{background-color:var(--theme_8_color_hover);transition:all 0.3s ease;}
div.header_mymenu_glass .mymenu_btn .eb_btn.my_logout.logoutBtn_theme_D:hover{background-color:var(--theme_D_color_hover);transition:all 0.3s ease;}
/*******************************************************************************/


/*******************************************************************************/
/* [롯데그룹] 2021-07-26 / LDM_DEV_0136 / by hbkim / 그룹포탈 이동 아이콘 */
div.header_wrap div.header_icon .btn_header_dwpmove{padding: 0; margin: 0 0 0 10px; overflow: hidden; width: 76px; height: 40px; position: relative; display: inline-block; vertical-align: middle; cursor: pointer;}
div.header_wrap div.header_icon .btn_header_dwpmove img {width: 100%; height: 100%;}
/*******************************************************************************/

/*******************************************************
[롯데그룹] 2021-03-31 / LDM_DEV_0015 / by 이승완 / 지식인 
[롯데그룹] 2021-05-28 / LDM_DEV_0110 / by 이승완 / 퍼블리싱 -지식인  2021-05-27
지식인
********************************************************/
/*------------------------------------------------------------------------------
  메인
-------------------------------------------------------------------------------*/
.eb_tbl tbody tr td .preview_link { display: inline-block; max-width: 100%; margin-top: 6px; color: #a0a0a0; text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.5; max-height: 4.5em; }
.eb_tbl tbody tr td .preview_link:before { content: ""; display: table; width: 100%; clear: both; }
.eb_tbl tbody tr td .kin_state { display: inline-block; padding: 5px 8px; background-color: #53aae2; color: #fff; border-radius: 1em; font-size: 12px; }

/* 지식인 박스 */
div.kin_box_tooltip { position: relative; overflow: hidden; margin-bottom: 10px; padding: 16px 24px 14px; padding-right: 250px; background-color: #f4f7fc; border-radius: 5px; font-size: 13px; line-height: 1.5; }
div.kin_box_tooltip .btn_wrap { position: absolute; top: 50%; right: 24px; margin: 0; margin-top: -18px; }
div.kin_box_tooltip .btn_wrap .eb_btn { min-width: 90px; min-height: 30px; line-height: 26px; }
div.kin_box_tooltip .btn_wrap .eb_btn.btn_confirm { min-width: 120px; }

/* 지식인 요약 */
div.kin_summary { overflow: hidden; }
div.kin_summary > div { float: left; width: 49%; /* height: 300px; */ }
div.kin_summary .etc_wrap .eb_btn { float: right; margin-top: 4px; padding: 4px 8px 3px; font-size: 12px; }

/* 답변 그래프 */
div.kin_summary .kin_summary_graph {  }
div.kin_summary .kin_summary_graph .title_wrap { padding-top: 0; }
div.kin_summary div.kin_summary_graph > p { margin: 25px 0 22px; text-align: center; font-weight:bold; }
div.kin_summary div.kin_summary_graph ul { margin: 0; padding: 0; list-style: none; }
div.kin_summary div.kin_summary_graph li { position: relative; margin-top: 26px; line-height: 16px; padding-right: 120px; height: 16px; border-radius: 16px; overflow: hidden; }
div.kin_summary div.kin_summary_graph li:before { content: ""; display: block; position: absolute; left: 0; right: 120px; top: 0; bottom: 0; background-color: #ededed; border-radius: 16px; overflow: hidden; }
div.kin_summary div.kin_summary_graph li .graph { position: relative; display: inline-block; max-width: 100%; height: 100%; background-color: #bcbcbc; border-radius: 16px; overflow: hidden; z-index: 1; }
div.kin_summary div.kin_summary_graph li .txt { position: absolute; right: 0; top: 0; width: 120px; padding-left: 10px; background-color: #fff; font-size: 13px; box-sizing: border-box; font-weight:bold;}
.darkmode div.kin_summary div.kin_summary_graph li .txt { position: absolute; right: 0; top: 0; width: 120px; padding-left: 10px; background-color: transparent; font-size: 13px; box-sizing: border-box; font-weight:bold; color:#FFF;}

/* 질문 탭메뉴 */
div.kin_summary .kin_summary_qna { margin-left: 2%; }
div.kin_summary .kin_summary_qna div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list > a { min-width: 80px; }
div.kin_summary .kin_summary_qna div.eb_tab_wrap.tab_box .tab_box_conts_wrap { height: 250px; }
div.kin_summary .kin_summary_qna li { padding-left: 26px; font-size: 13px; }
div.kin_summary .kin_summary_qna li + li { margin-top: 20px; }
div.kin_summary .kin_summary_qna li > a > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.kin_summary .kin_summary_qna li .no { float: left; margin-top: -3px; margin-left: -26px; display: inline-block; width: 20px; line-height: 20px; background-color: #303030; color: #fff; text-align: center; border-radius: 50%; }
div.kin_summary .kin_summary_qna li .q {  }
.darkmode div.kin_summary .kin_summary_qna li .q {color:#FFF;}
div.kin_summary .kin_summary_qna li .a { margin-top: 10px; color: #909090; }
div.kin_summary .kin_summary_qna li .info { margin-top: 10px; font-size: 11px; }
div.kin_summary .kin_summary_qna li .info > span { display: inline-block; margin-right: 5px; color: #9da0ae; }
div.kin_summary .kin_summary_qna li .info > span + span:before { content: ""; display: inline-block; width: 1px; height: 11px; margin-top: -1px; margin-right: 8px; background-color: #9da0ae; vertical-align: middle; }

/* 우측포틀릿 테두리 */
/*#jisicinRateList > #cef_frm >  div.portlet {width: 100%;height: 260px;padding: 0 5px;border-radius: 8px;background: #fff;-webkit-box-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.04);box-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.04);box-sizing: border-box;}
*/
/* 우측포틀릿 리스트*/
/*#jisicinRateList > #cef_frm > div.portlet > .box_list > li {width:100%; display: block; padding-left: 10px; padding-bottom:10px;}
*/
/**********************************************************
지식인
***********************************************************/

/*------------------------------------------------------------------------
지식인 상세페이지
-----------------------------------------------------------------------*/


/*지식인 최상위 버튼*/
.jisicinbuttonArea{display:table;width:100%;}

div.kin_answer_wrap { overflow: hidden; margin: 40px 0; padding: 30px; background-color: #ebebeb; }
div.kin_answer_wrap.darkmode { overflow: hidden; margin: 40px 0; padding: 30px; background-color: #1f1f22; }
div.kin_answer_wrap .kin_answer_summary { margin-bottom: 16px; font-size: 18px; }
div.kin_answer_wrap .kin_answer_summary .answer { display: inline-block; margin-right: 3px; padding: 7px 16px; background-color: #53aae2; color: #fff; border-radius: 1em; }

div.kin_wrap span[class*="like"] { margin-right: 3px; }

div.kin_wrap div.bbs_view .bbs_view_title .upload_log {  }
div.kin_wrap div.bbs_view .upload_log > span { display: inline-block; vertical-align: middle; }
div.kin_wrap div.bbs_view .upload_log > span + span { margin-left: 8px; }
div.kin_wrap div.bbs_view .upload_log span[class*="like"] { top: 0; }
div.kin_wrap div.bbs_view .upload_log .date { color: #909090; }
div.kin_wrap div.bbs_view .upload_log .category { font-weight: bold; }
div.kin_wrap div.bbs_view .bbs_writer_info .upload_log {}
div.kin_wrap div.bbs_view .bbs_writer_info .upload_log > span {  }

div.kin_wrap div.eb_tbl.tbl_list > table > tbody > tr > td { padding-top: 20px; padding-bottom: 20px; }


div.kin_answer_wrap .answer_list {}

div.kin_answer_wrap .answer_write { overflow: hidden; padding: 20px 30px; border: 1px solid #e5e5e5; background-color: #fff; }
.darkmode div.kin_answer_wrap .answer_write { overflow: hidden; padding: 20px 30px; border:none; background-color: #1f1f22; }
div.kin_answer_wrap .answer_write .placeholder { display: inline-block; width: calc(100% - 200px); margin-right: 6px; color: #909090; vertical-align: middle; }
/*
div.kin_answer_wrap .answer_write .add_comment > .eb_input { width: calc(100% - 100px); }
div.kin_answer_wrap .answer_write .add_comment > .eb_input input { border: none; }
div.kin_answer_wrap .answer_write .add_comment > .eb_textarea { display: inline-block; width: calc(100% - 100px); margin-right: 6px; }
div.kin_answer_wrap .answer_write .add_comment > .eb_textarea textarea { padding: 0; border: none; }
*/
div.kin_answer_wrap .answer_write .btn_wrap { display: inline-block; float: right; margin: 0; margin-top: -1px; }
div.kin_answer_wrap .answer_item { margin-top: 20px; padding: 30px; border: 1px solid #e5e5e5; background-color: #fff; }
div.kin_answer_wrap .answer_item.darkmode { margin-top: 20px; padding: 30px; border: 1px solid #e5e5e5; background-color: #484848; }
div.kin_answer_wrap .answer_item.adopted { padding: 28px; border: 3px solid #53aae2; }
div.kin_answer_wrap .answer_item .answer_item_head { position: relative; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; min-height: 40px; }
div.kin_answer_wrap .answer_item .answer_item_head .title { padding-right: 220px; font-size: 18px; }
div.kin_answer_wrap .answer_item .answer_item_head .date { display: inline-block; margin-top: 10px; color: #909090; }
div.kin_answer_wrap .answer_item .answer_item_head .btn_wrap { position: absolute; right: 0; top: 0; margin: 0; z-index: 1; }
div.kin_answer_wrap .answer_item .answer_item_head .adopted { display: inline-block; line-height: 36px; padding-left: 38px; color: #53aae2; font-size: 14px; background: url('../img/icn_kin_adopted.png') left center no-repeat; vertical-align: middle; }
div.kin_answer_wrap .answer_item .answer_item_body { padding: 10px 0; font-size: 14px; line-height: 2; word-break: break-all; }
div.kin_answer_wrap .answer_item .comments { margin: 20px 0; }

.kin_wrap div.comments .comment_header { margin-bottom: 15px; }
.kin_wrap div.comments .comment_header .comment_count .icon_btn.icon_accordion { margin-left: 3px; }

.kin_wrap div.comments .comment_body .add_comment > .eb_input:first-child,
.kin_wrap div.comments .comment_body .add_comment > .eb_textarea:first-child { width: calc(100% - 120px); }

/* 댓글 수정 */
.kin_profile_info {padding-left : 10px !important;}

/*답글 첨부파일영역*/
.replyFileArea {padding: 30px 0 10px;}

/*-------------------------------------------------
MY지식인
------------------------------------------------*/

/*my지식인 컨텐츠*/
div.myJisicin {width: 100%;height: 100%;padding: 0 20px; background: #fff; box-sizing: border-box;}

/*my지식인 탭*/
div.myJisicin .btn_group_wrap { width: calc( 45% + 3px); max-width: 100%; }
div.myJisicin .btn_group_wrap > .eb_btn { width: 33.3333333%; min-width: 60px; height: 36px; border-radius: 0; padding: 0 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }

/*my지식인 리스트*/

div.myJisicin ul.box_list { padding: 0; margin: 20px 0 0 0; list-style: none; }
div.myJisicin ul.box_list > li { position: relative; }
div.myJisicin ul.box_list.one > li { height: 20px; padding-right: 40px; box-sizing: border-box; }
div.myJisicin ul.box_list.one > li+li { margin-top: 13px; }
div.myJisicin ul.box_list.two > li+li { margin-top: 10px; }

/*************************
[롯데그룹] 2021-05-28 / LDM_DEV_0110 / by 이승완 / 퍼블리싱 -DLT
DLT
**************************/
/*-------------------------------
DLT 팝업페이지(공통)
--------------------------------*/
.dlt_answerTh {vertical-align: top !important;padding-top:13px !important;}
.dlt_questions {width:100%; min-height:18px; border-bottom: 1px solid #dbdfe1;padding-bottom:5px;margin-bottom: 8px;} /*등록된 질문들 */
/*-------------------------------
DLT 작성페이지
--------------------------------*/
/*등록된 답변*/
.questionTable{width:100%;}
.dlt_answer {color : #fc6e57; width:35px;}
.dlt_question {height:0px;}
.dlt_answerInfo{color : #fc6e57}

/*가이드*/
.dlt_guide{height:23px;}

/*문항등록버튼*/
.dlt_addQbtn{position:relative; bottom:1px; right:20px;}



/*------------------------------
DLT 스케줄리스트
----------------------------------*/
#dltSchedule .date_sun, 
#dltSchedule .date_holiday { color: #c00303; }
#dltSchedule .date_sat { color: #034ac0; }
div.ui-datepicker div.ui-datepicker-header select.ui-datepicker-month { color: #c4c4c4; font-size: 30px; font-weight: bold; display: block; background-color:#3b414d; margin:0px auto; border:0px;}
.dltQuestionListPopTitle {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;  -webkit-line-clamp: 4; /* 라인수 */ white-space: nowrap; word-wrap:break-word;}
/*--------------------------------------------
DLT Quiz

제목 maxheight 및 스크롤 추가  
---------------------------------------------------*/
.dlt_wrap {max-height:550px; overflow-y : hidden;}
.dlt_wrap ul, .dlt_wrap li { list-style: none; margin: 0; padding: 0;  }
.dlt_wrap .quiz_wrap .quiz_title { border-top: 1px solid #e5e5e5; font-size: 14px; font-weight: 600; margin-bottom: 15px; max-height: 150px;  overflow-y : auto; padding-top: 20px;}

/*제목 들여쓰기*/
/*롤백*/
/* .dlt_wrap .quiz_wrap .quiz_title div {padding-left: 10px;} */

.dlt_wrap .quiz_wrap .quiz_list { padding: 0 10px; }
.dlt_wrap .quiz_wrap .quiz_list li { margin-bottom: 5px; }
.dlt_wrap .quiz_result { border-top: 1px solid #e5e5e5; margin-top: 10px; padding-top: 15px;  }
.dlt_wrap .quiz_result .quiz_answer { color: #fc6e57; font-size: 14px; font-weight: 600; }
.dlt_wrap .quiz_result .quiz_explain { background-color: #fbfbfb; border: 1px solid #f5f5f5; font-size: 13px; margin-top: 15px; max-height: 200px; overflow-y : auto; padding: 15px;  }
.dlt_wrap .quiz_result .quiz_explain em { display: block; font-style: normal; font-weight: 600; margin-bottom: 8px;}

/*--------------------------------------------------
DLT Q	uiz Result
-------------------------------------------------------*/
.dlt_wrap .result_wrap { overflow : hidden; }
.dlt_wrap .result_wrap .bar { height: 100px; font-size: 0; }
.dlt_wrap .result_wrap .bar_toplabel { height: 10px; font-size: 3px;} /*그래프 상단 레이블추가*/
.dlt_wrap .result_wrap .average { display: inline-block; }
.dlt_wrap .result_wrap .average.my { background-color: #de7070; }
.dlt_wrap .result_wrap .average.overall { background-color: #5a90ce; }

.dlt_wrap .result_wrap .result_title { margin-bottom: 15px; text-align: center; font-size: 18px; }
.dlt_wrap .result_wrap .result_title em { font-style: normal; }
.dlt_wrap .result_wrap .result_title .count { display: block; margin-top: 5px; color: #a5a5a5; text-align: right; font-size: 12px; }
.dlt_wrap .result_wrap .result_graph ul { text-align: center; }
.dlt_wrap .result_wrap .result_graph li { display: inline-block; width: 80px; vertical-align: bottom; }
.dlt_wrap .result_wrap .result_graph li .label { display: block; margin-top: 5px; font-weight: 600; }
.dlt_wrap .result_wrap .result_graph .bar { position: relative; width: 44px; margin: 0 auto; }
.dlt_wrap .result_wrap .result_graph .average { position: absolute; bottom: 0; width: 20px; height: 100%; vertical-align: bottom; }
.dlt_wrap .result_wrap .result_graph .average.my { left: 0; }
.dlt_wrap .result_wrap .result_graph .average.overall { right: 0; }

.dlt_wrap .result_wrap .result_legend { float: right; margin-top: 15px; }
.dlt_wrap .result_wrap .result_legend li { display: inline-block; margin-left: 5px; }
.dlt_wrap .result_wrap .result_legend .average { width: 12px; height: 12px; margin-right: 3px; vertical-align: middle; }



/********************************************************************************************************
  식단
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  식단 목록
-------------------------------------------------------------------------------*/
.meals_wrap {}
.meals_wrap div.btn_wrap { margin: 0 0 5px; }
.meals_wrap div.eb_tbl.tbl_diet th { text-align: center; }

.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr > td { padding: 10px 10px 5px; border-left: 1px solid #dbdfe1; vertical-align: top; }
.darkmode .meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr > td { padding: 10px 10px 5px; border-left: 1px solid #3a3b3e; vertical-align: top; }
.darkmode div.tbl_diet > table > thead > tr > th {border-bottom: 1px solid #3a3b3e;}
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr > th, 
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr > td { border-top: 1px dashed #e5e5e5; border-bottom: none; }
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr > td.blank { vertical-align: middle; }
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr.dinner > th,
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr.dinner > td { border-top: 1px solid #dbdfe1; /*border-top-style: solid;*/ }
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr:first-child > th, 
.meals_wrap div.eb_tbl.tbl_diet > table > tbody > tr:first-child > td { border-top: none; }
.meals_wrap ul, 
.meals_wrap li { margin: 0; padding: 0; list-style: none; }

/* 종류별 */
.meals_wrap .type_wrap { color: #707070; font-size: 12px; }
.darkmode .meals_wrap .type_wrap { color: #FFF; font-size: 12px; }
.meals_wrap .type_wrap .title { margin-bottom: 8px; color: #303030; font-size: 13px; font-weight: 600; text-align: center; }
.darkmode .meals_wrap .type_wrap .title { margin-bottom: 8px; color: #FFF; font-size: 13px; font-weight: 600; text-align: center; }
.meals_wrap .type_wrap li { position: relative; margin-bottom: 5px; padding-left: 6px; }
.meals_wrap .type_wrap li:before { content: ""; display: block; position: absolute; top: 5px; left: 0; width: 2px; height: 2px; background-color: #303030; border-radius: 50%; }
.meals_wrap .type_wrap p { text-align: center; word-break: keep-all; word-wrap: break-word; }
.meals_wrap .type_wrap .price { display: block; color: #a5a5a5; font-size: 11px; }
.meals_wrap .type_wrap + .type_wrap { margin-top: 10px; padding-top: 10px; border-top: 1px dotted #e5e5e5; }



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

/* [롯데그룹] 2021-03-26 / LDM_DEV_0006 / by giran / 게시판 해시태그 기능 */
.cef_checkbox{position: relative; display: inline;}
.cef_input{border: 1px solid #d5d5d5; font-size: 13px; padding: 0 9px; color: #303030; height: 30px; vertical-align: middle;}
.hashtag_div{margin-bottom: 15px; padding-left: 32px;}
.hashtaglabel{background: #808080; border-radius: 2px; height: 24px; line-height: 24px; text-align: center; color: white; padding: 6px; font-size: 14px; border-radius: 3px;}
.hashtag{border-radius: 2px; height: 30px; line-height: 26px; text-align: center; color: black; font-size:15px; margin-left : 2px;}
.hashtag:hover{color :#9E896E; text-decoration: underline;}


/* [롯데그룹] 2021-04-20 / LDM_DEV_0041 / by hnlee / 질문답변 게시판 기능 - 아이콘 css*/
.answerY {display:inline-block;margin-right:5px;width:52px;line-height:18px;text-align:center;background-color:rgb(106, 181, 45);color:#fff;font-size:12px;border-radius:3px;}
.answerN {display:inline-block;margin-right:5px;width:52px;line-height:18px;text-align:center;background-color:rgb(255, 102, 0);color:#fff;font-size:12px;border-radius:3px;}
.publicN {display:inline-block;vertical-align:middle; width: 20px; height: 20px; background: url("../../common/image/common/btn_portlet_set_lock.png") no-repeat center; cursor: default !important; text-indent: -99999px;}
.bbs_qna_uparticlearea {border-bottom:1px solid #e5e5e5; margin-bottom:20px;}

/* [롯데그룹] 2021-05-03 / LDM_DEV_0038 / by hnlee / 사보게시판 */
.album_list_wrap .album_list .sabo_content{ margin-top: 3px; padding-left: 25px; color: #000; font-size: 12px; }

/*[롯데그룹] 2021-05-06 / LDM_DEV_0079 / by hnlee / 필수공지 기능*/
.requireNoti { color:#bdc3c7;font-family:Malgun Gothic; padding-left:15px; background:url(../../common/image/common/alarm_bell.png) no-repeat left 50%; margin-bottom:5px; margin-left:6px;}

/*[롯데그룹] 2021-05-11 / LDM_DEV_0045 / by hnlee / 공지게시판 포틀릿 */
div.title_wrap.with_etc.for_portlet .title .news { display: inline-block; line-height: 18px; min-width:10px; height: 18px; font-size: 14px; font-weight: 600; border-radius: 30px; background: #fc6e57; color: #fff; text-indent: 0;padding: 0 5px}
.darkmode div.title_wrap.with_etc.for_portlet .title .news { display: inline-block; line-height: 18px; min-width:10px; height: 18px; font-size: 14px; font-weight: 600; border-radius: 30px; background: #af3d2b; color: #fff; text-indent: 0;padding: 0 5px}

/*[롯데그룹] 2021-04-26 / LDM_DEV_0017 / by taehyung / 업무안내 게시판백분율 그래프 */
.guide_bbs_name { width: 30%; display: inline;}
.guide_percentage_bar { margin-top: 3px;  width:70%; display: inline-block; }
.guide_percentage_bar > span { display: block; vertical-align: middle; box-sizing: border-box; }
.guide_percentage_bar .text { float: right; width: 5em; margin-top: -3px; padding-left: 8px; text-align: right; }
.guide_percentage_bar .graph { height: 16px; background-color: #f0f0f0; } 
.guide_percentage_bar .graph .bar { display: block; height: 100%; width: 0; background-color: #9da0ae; }

/*업무안내 수신대상부서*/
div.hiddenBox { overflow: hidden; font-size: 13px;}
div.hiddenBox .eb_btn { float: right; margin: -2px 0; margin-left: 10px; padding-left: 8px; padding-right: 8px; background-color: #fff; z-index: 1; }
div.hiddenBox.closed .text {display: inline-block;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap:break-word;line-height: 1;height: 1em;}

/*[롯데그룹] 2021-04-14 / LDM_DEV_0027 / by taehyung / 사용자 정보에서 관리 항목 추가*/
div.eb_externalemail_info{font-size: 8pt;}
/*[롯데그룹] 2021-05-28 / LDM_DEV_0028 / by taehyung / 계정신청 기능*/
div.eb_input.englishname { width: 32.99%; margin-right: 0; }

/*[롯데그룹] 2021-05-20 / LDM_DEV_0007 / by hnlee / 댓글에 좋아요 기능*/
.likeBtn {display:inline-block;width:15px;height:15px;background:url(../img/icon_good_off.png) no-repeat center;position:relative;top:2px;left:5px;}
.likedBtn {display:inline-block;width:15px;height:15px;background:url(../img/icon_good_on.png) no-repeat center;position:relative;top:2px;left:5px;}
.likeCnt{font-size:12px;margin-left: 10px;}

/* 2022-09-20 / jj_baek / 좋아요 아이콘 CSS 애니메이션 */
div.cst_heartlike_size_1 {width:40px;height:40px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.5);margin-right: -0.7rem;}
.upload_log_float > div.cst_heartlike_size_1 {margin-right: -0.4rem;margin-bottom: -0.1rem;}
div.cst_heartlike_size_2 {width:40px;height:40px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.8);margin-right: -0.7rem;}
div.cst_commentheartlike_size_1 {width:25px;height:10px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.5);margin-right: -0.7rem;margin-bottom:1rem;}
div.cst_commentheartlike_size_2 {width:25px;height:10px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.8);margin-right: -0.7rem;margin-bottom:1rem;}
div.cst_dislike_size_1 {width:25px;height:10px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.5);margin-right: -0.7rem;margin-bottom:1rem;}
div.cst_dislike_size_2 {width:25px;height:10px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.8);margin-right: -0.7rem;margin-bottom:1rem;}
div.cst_dislike_size_1_article {width:25px;height:10px;display:inline-block;vertical-align:middle;text-align:center;transform:scale(0.5);margin-right: -0.3rem;margin-bottom:0.7rem;}
[id^='toggle-heart'] {
  position: absolute;
  left: -100vw;
  display:none;
}
[id^='toggle-heart']:checked + label {
  color: #e2264d;
  filter: none;
  will-change: font-size;
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
          animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
[id^='toggle-heart']:checked + label:before, [id^='toggle-heart']:checked + label:after {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
[id^='toggle-heart']:checked + label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation-name: bubble;
          animation-name: bubble;
}
[id^='toggle-heart']:checked + label:after {
  will-change: opacity, box-shadow;
  -webkit-animation-name: sparkles;
          animation-name: sparkles;
}
[id^='toggle-heart']:focus + label {
  text-shadow: 0 0 3px white,  0 1px 1px white, 0 -1px 1px white,  1px 0 1px white, -1px 0 1px white;
}

[for='toggle-heart'] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  filter: grayscale(1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
[for='toggle-heart']:before, [for='toggle-heart']:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: '';
}
[for='toggle-heart']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  transform: scale(0);
}
[for='toggle-heart']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

/* 2024-05-16 / jj_baek / 게시글용 좋아요 css 분리 */
[id^='toggle-heart-article'] {
  position: absolute;
  left: -100vw;
  display:none;
}
[id^='toggle-heart-article']:checked + label {
  color: #e2264d;
  filter: none;
  will-change: font-size;
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
          animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
[id^='toggle-heart-article']:checked + label:before, [id^='toggle-heart-article']:checked + label:after {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
[id^='toggle-heart-article']:checked + label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation-name: bubble;
          animation-name: bubble;
}
[id^='toggle-heart-article']:checked + label:after {
  will-change: opacity, box-shadow;
  -webkit-animation-name: sparkles;
          animation-name: sparkles;
}
[id^='toggle-heart-article']:focus + label {
  text-shadow: 0 0 3px white,  0 1px 1px white, 0 -1px 1px white,  1px 0 1px white, -1px 0 1px white;
}

[for='toggle-heart-article'] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2.5em;
  filter: grayscale(1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
[for='toggle-heart-article']:before, [for='toggle-heart-article']:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: '';
}
[for='toggle-heart-article']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  transform: scale(0);
}
[for='toggle-heart-article']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

@-webkit-keyframes heart {
  0%, 17.5% {
    font-size: 0;
  }
}

@keyframes heart {
  0%, 17.5% {
    font-size: 0;
  }
}
@-webkit-keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%, 100% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
@keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%, 100% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
@-webkit-keyframes sparkles {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}
@keyframes sparkles {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}
/* 2022-09-22 / jj_baek / 싫어요 아이콘 CSS 애니메이션 */
[id^='toggle-dislike'] {
  position: absolute;
  left: -100vw;
  display:none;
}
[for='toggle-dislike'] {
	font-size: 2em;
  	filter: grayscale(1);
  	cursor: pointer;
  	display: inline-block;
}
[id^='toggle-dislike-article'] {
  position: absolute;
  left: -100vw;
  display:none;
}
[for='toggle-dislike-article'] {
	font-size: 2em;
  	filter: grayscale(1);
  	cursor: pointer;
  	display: inline-block;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

[id^='toggle-dislike']:checked + label {
  will-change: font-size, transform;
  filter: grayscale(0);
  animation: shake 0.7s;
}
[id^='toggle-dislike-article']:checked + label {
  will-change: font-size, transform;
  filter: grayscale(0);
  animation: shake 0.7s;
}
span.articleViewCnt{margin-right: -0.5rem;}
div#div_upload_log.upload_log_float{
	position: fixed;
    z-index: 100;
    margin-right: 3rem;
    background-color: rgba(20, 20, 20, 0.1);
    animation: anim_fadedown 0.5s forwards;
    text-align:center;
    border-radius:0 0 5px 5px;
    height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.darkmode div#div_upload_log.upload_log_float{
	position: fixed;
    z-index: 100;
    margin-right: 3rem;
    background-color: rgba(150, 150, 150, 0.3);
    animation: anim_fadedown 0.5s forwards;
    text-align:center;
    border-radius:0 0 5px 5px;
    height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*[롯데그룹] 2021-06-09 / LDM_DEV_0112 / jdw0615 / 게시판 댓글 싫어요 기능*/
.notLikeBtn {display:inline-block;width:15px;height:15px;background:url(../img/icon_hate_off.png) no-repeat center;position:relative;top:2px;left:5px;}
.notLikedBtn {display:inline-block;width:15px;height:15px;background:url(../img/icon_hate_on.png) no-repeat center;position:relative;top:2px;left:5px;}
.notLikeCnt{font-size:12px;margin-left: 10px;}

/* [롯데그룹] 2021-06-24 / LDM_DEV_0126 / by 이승완 / 게시글 삭제 개선 - 게시글 삭제 표시  */
.articleDel {text-decoration : line-through !important; text-decoration-color : red !important;}

/*[롯데그룹] 2021-07-01 / LDM_DEV_0131 / by 이승완 / 익명옵션 수정 */
/* 게시판 옵션 - text가 checkbox와 같은 라인에 있을 시 처리...*/
.checkboxWithInput {padding: 7px 0 !important;}

/* 댓글 닉네임 비밀번호 공간 */
.commAnonArea {    border-width: 1px 1px 0px 1px; border-style: solid; border-color: rgb(229, 229, 229); border-image: initial;}
/*------------------------------------------------------------------------------
  [롯데그룹] 2021-05-28 / LDM_DEV_0110 / by 이승완 / 퍼블리싱 -경조사
  경조사
-------------------------------------------------------------------------------*/
.event_wrap div.eb_tbl.tbl_list > table > tbody > tr > td.ico { padding: 5px 0; }

/* [롯데그룹] 2021-06-01 / LDM_DEV_0038 / by hnlee / 사보게시판 - 퍼블리싱 적용 - start*/
.album_list_wrap .magazine_list { border: 1px solid #e5e5e5; border-width: 1px 0; }
.album_list_wrap .magazine_list ul, 
.album_list_wrap .magazine_list li { overflow: hidden; margin: 0; padding: 0; font-size: 0; list-style: none; }
.album_list_wrap .magazine_list > ul > li { display: inline-block; width: 20%; min-width: 250px; padding: 10px 0 20px; font-size: 13px; box-sizing: border-box; vertical-align: top; }
.album_list_wrap .magazine_list .album { width: 225px; margin: 0 auto; }
.album_list_wrap .magazine_list .image { overflow: hidden; height: 100%; margin: 0 auto; padding: 10px; cursor: move; border: 1px solid #e5e5e5; }
.album_list_wrap .magazine_list .image .frame { display: block; height: 0; padding: 50% 0; overflow: hidden; cursor: pointer; transition: all 0.2s linear; font-size: 0; text-align:center;}
.album_list_wrap .magazine_list .image .frame img { vertical-align: middle; margin: -100% 0; }
.album_list_wrap .magazine_list .image .frame:hover {transform: scale( 1.1 ); }
.album_list_wrap .magazine_list  div.eb_checkbox { margin-right: 2px; }
.album_list_wrap .magazine_list .text { position: relative; margin-top: 8px; }
.album_list_wrap .magazine_list .text .title { position: relative; display: inline-block; max-width: calc(100% - 36px)/*PDF버튼*/; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; box-sizing: border-box; vertical-align: middle; }
.album_list_wrap .magazine_list .text .title .frame { vertical-align: middle; }
.album_list_wrap .magazine_list .text .title .icon_news { position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; }
.album_list_wrap .magazine_list .text .eb_btn { position: absolute; right: 0; top: 0; padding: 3px 5px 2px; font-size: 11px; line-height: 15px; min-width: auto; min-height: auto; }
.album_list_wrap .magazine_list .text .preview { margin-top: 8px; color: #a0a0a0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; max-height: 2.8em; }
/* [롯데그룹] 2021-06-01 / LDM_DEV_0038 / by hnlee / 사보게시판 - 퍼블리싱 적용 - end*/


/****************************************
[롯데그룹] 2021-05-11 / LDM_DEV_0018 / by 이승완 / 회의실예약
공유자원
****************************************/

/*----------------------------------------------
관리자
---------------------------------------------*/

/*공유자원 맵관리 */
.inputWithText{ width:80% !important; } 

/************************************
권한
*************************************/
/*
[롯데그룹] 2021-06-23 / LDM_DEV_0123 / by 이승완 / 권한예외자 히든처리로 인해 수정
권한 대상자
*/
div.share_list_wrap dl {width: 100%;}



/* [롯데그룹] 2021-06-15 / LDM_DEV_0115 / by jdw0615 / 포틀릿 페이징  공통 CSS 추가 */
div.navbtn{text-align: center; position: absolute;bottom: 0;right:0; left:0; padding: 6px 0 }
/* [롯데그룹] 2021-06-09 / LDM_DEV_059 / jdw0615 / 포틀릿 - 날씨*/
.cef_weather_Temperature{    color: #4c7fd4;font-size: 40px;font-weight: 100;letter-spacing: -4px;}
.cef_weather_temp{padding-top: 30px; padding-right: 15px;}
.cef_weather_icon{padding-top: 5px; padding-left: 15px;}
/* [롯데그룹] 2021-06-09 / LDM_DEV_059 / jdw0615 / 포틀릿 - 날씨*/

/* [롯데그룹] 2021-04-14 / LDM_DEV_0027 / by taehyung / 사용자 정보에서 관리 항목 추가 - 자택주소 추가 */
div.form_set.set_addr { }
div.form_set.set_addr div.eb_input.addr_code { width: 10%; }
div.form_set.set_addr div.eb_input.addr_codeSelect { width: 4%; }
.darkmode div.form_set.set_addr div.eb_input.addr_codeSelect { width: 6%; }
div.form_set.set_addr div.eb_input.addr_addr1 { width: 45%; }
div.form_set.set_addr div.eb_input.addr_addr2 { width: 35%; }

/********************************************
  포탈&포틀릿
********************************************/
.ellipsis2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
div.portlet.rss_box .list_type01 { width: calc(100% - 40px); }
/*포틀릿 크기에 따라 너비 다르게 변경*/
div.portlet.rss_box .list_type01.widthexpand_2 { width: calc(100% - 135px); }
/*게시판 포틀릿 작성자 나올시 최대크기 적용...*/
div.portlet ul.box_list.one .update_log .writer{ max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; float:left;} 
div.portlet ul.box_list.one .update_log .disp_time{ width:34px;  float:right; margin-left:4px;} 

div.portlet .box_list span.link { color: #000; }
.darkmode div.portlet .box_list span.link { color: #fff; }
/* 포틀릿 - 게시 */
div.tab_box.portlet .title > .eb_btn {min-width: 60px; width:90px;height: 36px; border-radius: 0; padding: 0 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-size: 16px; border: none;padding-bottom: 18px }
.darkmode div.tab_box.portlet .title > .eb_btn {min-width: 60px; width:90px;height: 36px; border-radius: 0; padding: 0 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-size: 16px; border: none;padding-bottom: 18px ; background-color:transparent;color:#a0a0a0;}
div.tab_box.portlet .title > .eb_btn > .list_count { margin-left: 4px; }
div.tab_box.portlet .title .eb_btn.active { border-bottom: 3px solid #8f8981; color: #303030; position: relative; z-index: 2; background: none; font-weight: bold; transition:border 0.5s ease;border-bottom-width:50%;}
/*div.tab_box.portlet .title .eb_btn.active::after{content:"";background-color:red;width:5px;height:5px;display:block;position:relative;bottom:-12px;animation: slideRight 5s linear forwards;}*/
div.title_wrap .tab_wrap .eb_btn.active { border-bottom: 3px solid #8f8981; color: #303030; position: relative; z-index: 2; background: none; font-weight: bold; transition:border 0.5s ease;border-bottom-width:50%;}
/* 2025-10-20 / jj_baek / 칠성요청사항 : 다중형게시판 포틀릿 탭1개일 경우 border-bottom 얇게 처리, width를 100으로 강제하여 중앙정렬 */
div.tab_box.portlet .title .eb_btn.active.onetab{border-bottom: none; width: 100% !important;}
/* 2025-02-19 / jj_baek / 다중형게시판 포틀릿용 자동탭이동 타이머 border-bottom 이 높이 */
div.tab_box.portlet .title .eb_btn.active .autoSlideTimer{
	width: 0;height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid grey;
	display: block;
	position: absolute;
	bottom: 0px;
	animation: slideRight 5s linear forwards;
	transform-origin:bottom center;
	transition:all 0.5s ease;
}

@keyframes slideRight {
	from {
		left:0;
	}
	to {
		left:100%
	}
}
/*div.tab_box.portlet .title .eb_btn.active.paused::after{animation-play-state: paused;}*/
div.tab_box.portlet .title .eb_btn.active.paused .autoSlideTimer{animation-play-state: paused;transform:scale(0);transition:all 0.5s ease;}

.darkmode div.tab_box.portlet .title .eb_btn.active { border-bottom: 3px solid #8f8981; color: #FFF; position: relative; z-index: 2; background: none; font-weight: bold}
div.tab_box.portlet div.title_wrap.with_etc.for_portlet{ padding-bottom: 0}

/* 앨범 */
ul.photo_list {margin-top:15px; margin-bottom:15px; }
ul.photo_list li{padding: 12px 0; width: 100%;}
ul.photo_list .photo{ width:80px; height: 60px; overflow: hidden; float: left; margin:0 15px 0 10px; background: #f8f8f8 }
ul.photo_list .photo img{ height: 100%; width: 100%}
ul.photo_list span.link { font-size: 14px; font-weight: 600; color: #303030; text-decoration: none; cursor: pointer; margin: 5px 0 12px 0 }
div.portlet .photo_list li.active span.link {font-weight: normal; color: #707070;}

/* 오늘의 생일 */
/*[롯데그룹] 2021-07-27 / LDM_DEV_0145 / by jdw0615 / 생일 포틀릿 size normal화*/
div.birthday_box.portlet{ position: relative }
div.birthday_box.portlet ul.work_aid{  margin-top: 20px}
div.birthday_box.portlet ul.work_aid > li { float: left; width: 32%; margin-top: 15px; }
div.hour_box.portlet{ background:#fff url("../img/time_bg.png") no-repeat 50% }
.darkmode div.hour_box.portlet{ background:#2c2d2e url("../img/time_bg.png") no-repeat 50% }
.darkmode div.hour_box.portlet #nowTime{color:#32364a;}
div.hour_box.portlet .hour{ font-size: 32px; margin: 94px 0 10px 0;text-align: center }
div.hour_box.portlet .ampm{text-align: center; margin-bottom: 65px }
div.hour_box.portlet .days{ text-align: right}

/*날씨*/
.weather_box.portlet{ overflow: hidden; padding: 0; text-align: center}
.darkmode .weather_box.portlet{ overflow: hidden; padding: 0 !important; text-align: center}
.weather_box.portlet .today_weather{height: 100%; width: 100%}
.weather_box.portlet .now_temper { color: #fff; font-size: 38px; padding: 60px 0 10px 0 }
.weather_box.portlet .today_location { color: rgba( 255, 255, 255, 0.56); }

.weather_box.portlet .today_weather.SKY_Y01{background-image: url("../img/SKY_Y01_bg.png");}
.weather_box.portlet .today_weather.SKY_Y02{background-image: url("../img/SKY_Y02_bg.png");}
.weather_box.portlet .today_weather.SKY_Y03{background-image: url("../img/SKY_Y03_bg.png");}
.weather_box.portlet .today_weather.SKY_Y04{background-image: url("../img/SKY_Y04_bg.png");}
.weather_box.portlet .today_weather.SKY_Y05{background-image: url("../img/SKY_Y05_bg.png");}
.weather_box.portlet .today_weather.SKY_Y06{background-image: url("../img/SKY_Y06_bg.png");}
.weather_box.portlet .today_weather.SKY_Y07{background-image: url("../img/SKY_Y07_bg.png");}
.weather_box.portlet .today_weather.SKY_Y08{background-image: url("../img/SKY_Y08_bg.png");}
.weather_box.portlet .today_weather.SKY_Y09{background-image: url("../img/SKY_Y09_bg.png");}

.weather_box.portlet .SKY_Y01{  background-image: url("../../common/image/common/SKY_Y01_white.png")}
.weather_box.portlet .SKY_Y02{  background-image: url("../../common/image/common/SKY_Y02_white.png")}
.weather_box.portlet .SKY_Y03{  background-image: url("../../common/image/common/SKY_Y03_white.png"); }
.weather_box.portlet .SKY_Y04{  background-image: url("../../common/image/common/SKY_Y04_white.png"); }
.weather_box.portlet .SKY_Y05{  background-image: url("../../common/image/common/SKY_Y05_white.png"); }
.weather_box.portlet .SKY_Y06{  background-image: url("../../common/image/common/SKY_Y06_white.png"); }
.weather_box.portlet .SKY_Y07{  background-image: url("../../common/image/common/SKY_Y07_white.png"); }
.weather_box.portlet .SKY_Y08{  background-image: url("../../common/image/common/SKY_Y08_white.png"); }
.weather_box.portlet .SKY_Y09{  background-image: url("../../common/image/common/SKY_Y09_white.png"); }

/* TYPE_C 날씨 */
/* [롯데그룹] 2021-06-09 / LDM_DEV_059 / jdw0615 / 포틀릿 - 날씨*/
div.portlet_setting.TYPE_C { float: left; width: calc( 100% - 340px ); height: 550px; background: #f5f8fb;  }
.darkmode div.portlet_setting.TYPE_C { float: left; width: calc( 100% - 340px ); height: 550px; background-color: #262626;  }
div.portlet_info.TYPE_C { float: left; width: 340px; min-height: 550px; padding: 20px 10px 20px 10px;}
.darkmode div.portlet_info.TYPE_C { float: left; width: 340px; min-height: 550px; padding: 20px 10px 20px 10px;background-color: #262626;}
/* 2024-01-19 / jj_baek / 포틀릿 설정 화면 우측 스크롤 다크모드 */
.darkmode div.portlet_info.TYPE_C::-webkit-scrollbar { width:10px; background:#363839;}
.darkmode div.portlet_info.TYPE_C::-webkit-scrollbar-thumb { background:#737475;border:1px solid #2b2c2d;border-radius:5px;}
.darkmode div.portlet_info.TYPE_C::-webkit-scrollbar-thumb:hover { background:#9b9c9c;}

div.main_wrap_A.TYPE_C { width: 100%; width: 2080px; margin:0 auto; /*padding: 0 0 20px 0;*/ }
div.portlet_pannel.TYPE_C { margin: 0 auto; text-align: center; width: 100%; max-width: 1500px;  overflow: auto;  }
div.portlet_info.TYPE_C .portlet_set > table > tbody > tr > th{width: 75px;}

/*할일*/
div.todo_box.portlet .box_list.two .update_log{padding-left:32px}
div.todo_box.portlet .box_list .icon_btn {margin-right: 10px;}
div.todo_box.portlet .box_list.two .update_log { margin-top: 0px!important}

/*할일&설문조사*/
div.lott_size01  ul { margin: 0; padding: 0; list-style: none; }
div.lott_size01.portlet .box_list.two .update_log { font-size: 12px; color: #bfbfbf; margin-top: 3px;}
.darkmode div.lott_size01.portlet .box_list.two .update_log { font-size: 12px; color: #dbdfe1 !important; margin-top: 3px;}

/*회의일정*/
div.meeting_box.portlet .room{float: right; margin-top: -31px; font-size: 14px; font-weight: 600;  color: #303030; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 80px}
div.meeting_box.portlet .list_type02{ width:70% }

/*커뮤니티*/
div.cop_box.portlet{}
div.cop_box.portlet .profile_photo{position: absolute;left: 0; top: 0}
div.cop_box.portlet ul.box_list > li{padding:5px 0 10px 60px}
div.cop_box.portlet .update_log{color: #707070!important;}
div.cop_per_banner .cop_per_banner_right .eb_select > select {border: 1px solid #646464;}

/*포틀릿사이즈정의 [롯데그룹] 2021-07-06 / LDM_DEV_0132 / by jdw0615 / 포틀릿 크기 width 1~5 늘리기, 포탈 type_c*/
div.portlet.widthexpand_1_size { width: 360px; }
div.portlet.widthexpand_2_size { width: 700px; }
div.portlet.widthexpand_3_size { width: 1060px; }
div.portlet.widthexpand_4_size { width: 1420px; }
div.portlet.widthexpand_5_size { width: 1780px; }

/* [롯데] 2023-12-27 / LR_DEV_001 / by 정유리 / 메인 포탈 레이아웃 재구성 => TYPE_D */
div.portlet_pannel.TYPE_D { margin: 0 auto; text-align: center; width: 100%; max-width: 1500px; overflow: auto; }
div.portlet.widthexpand_d_1_size { width: 900px; height:384px !important;}
div.portlet.widthexpand_d_2_size { width: 900px; height:182px !important;}
div.portlet.widthexpand_d_3_size { width: 440px; height:182px !important;}
/* REQ114385 ux/ui 추가개선 요청 - 포틀릿 상하 사이즈 조절, 포상포틀릿 추가 2024.10.24 ilyeong */
div.portlet.widthexpand_d_4_size { width: 440px; height:384px !important;}

/* [롯데] 2023-12-27 / LR_DEV_001 / by 정유리 / 메인 포탈 레이아웃 재구성 => TYPE_E */
div.portlet_pannel.TYPE_E { margin: 0 auto; text-align: center; width: 100%; max-width: 1500px; overflow: auto; }
div.portlet.widthexpand_e_1_size { width: 900px; height:384px !important;}
div.portlet.widthexpand_e_2_size { width: 900px; height:182px !important;}
div.portlet.widthexpand_e_3_size { width: 440px; height:182px !important;}
/* REQ114385 ux/ui 추가개선 요청 - 포틀릿 상하 사이즈 조절, 포상포틀릿 추가 2024.10.24 ilyeong */
div.portlet.widthexpand_e_4_size { width: 440px; height:384px !important;}

/*포틀릿사이즈정의 [롯데그룹] 2021-07-06 / LDM_DEV_0132 / by jdw0615 / 포틀릿 크기 width 1~5 늘리기, 포탈 type_c*/
div.portlet_box.widthexpand_1_size { width: 278px; }
div.portlet_box.widthexpand_2_size { width: 575px; }
div.portlet_box.widthexpand_3_size { width: 875px; }
div.portlet_box.widthexpand_4_size { width: 1173px; }
div.portlet_box.widthexpand_5_size { width: 1470px; }

/* [롯데] 2023-12-27 / LR_DEV_001 / by 정유리 / 메인 포탈 레이아웃 재구성 => TYPE_D */
div.portlet_box.widthexpand_d_1_size { width: 640px; height:250px;}
div.portlet_box.widthexpand_d_2_size { width: 640px; height:116px; }
div.portlet_box.widthexpand_d_3_size { width: 310px; height:116px; }
div.portlet_box.widthexpand_d_3_size .p_info{ position: absolute; top: 50%; margin-top: -20px; width: 100%; z-index: 1;}
div.portlet_box.widthexpand_d_3_size .eb_btn.icon_btn { position: absolute; top: 20px; right: 20px; z-index: 2;}
div.portlet_box.widthexpand_d_2_size .p_info{ position: absolute; top: 50%; margin-top: -20px; width: 100%; z-index: 1;}
div.portlet_box.widthexpand_d_2_size .eb_btn.icon_btn { position: absolute; top: 20px; right: 20px; z-index: 2;}
/* REQ114385 ux/ui 추가개선 요청 - 포틀릿 상하 사이즈 조절, 포상포틀릿 추가 2024.10.24 ilyeong */
div.portlet_box.widthexpand_d_4_size { width: 310px; height:250px; }
div.portlet_box.widthexpand_d_4_size .p_info{ position: absolute; top: 50%; margin-top: -20px; width: 100%; z-index: 1;}
div.portlet_box.widthexpand_d_4_size .eb_btn.icon_btn { position: absolute; top: 20px; right: 20px; z-index: 2;}

/* [롯데] 2023-12-27 / LR_DEV_001 / by 정유리 / 메인 포탈 레이아웃 재구성 => TYPE_E */
div.portlet_box.widthexpand_e_1_size { width: 640px; height:250px;}
div.portlet_box.widthexpand_e_2_size { width: 640px; height:116px; }
div.portlet_box.widthexpand_e_3_size { width: 310px; height:116px; }
div.portlet_box.widthexpand_e_3_size .p_info{ position: absolute; top: 50%; margin-top: -20px; width: 100%; z-index: 1;}
div.portlet_box.widthexpand_e_3_size .eb_btn.icon_btn { position: absolute; top: 20px; right: 20px; z-index: 2;}
div.portlet_box.widthexpand_e_2_size .p_info{ position: absolute; top: 50%; margin-top: -20px; width: 100%; z-index: 1;}
div.portlet_box.widthexpand_e_2_size .eb_btn.icon_btn { position: absolute; top: 20px; right: 20px; z-index: 2;}

/* REQ114385 ux/ui 추가개선 요청 - 포틀릿 상하 사이즈 조절, 포상포틀릿 추가 2024.10.24 ilyeong */
div.portlet_box.widthexpand_e_4_size { width: 310px; height:250px; }
div.portlet_box.widthexpand_e_4_size .p_info{ position: absolute; top: 50%; margin-top: -20px; width: 100%; z-index: 1;}
div.portlet_box.widthexpand_e_4_size .eb_btn.icon_btn { position: absolute; top: 20px; right: 20px; z-index: 2;}

/*지식인*/
div.kin_box.portlet .btn_group_wrap > .eb_btn{ width: 50%; font-weight: bold;}
div.kin_box.portlet .eb_btn.active{ background: #fff; color: #ff624c; border: 1px solid #ff624c}

div.kin_box.portlet div.title_wrap.with_etc.for_portlet{  border-bottom: none; padding-bottom: 7px}
div.kin_box.portlet div.title_wrap div.etc_wrap { margin: -5px 0 5px; }
div.kin_box.portlet div.title_wrap div.etc_wrap .eb_btn.active { height: 30px; border: none; }

div.kin_box.portlet .num{ 
	font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    line-height: 1;
    color: #cbd5e1;
   	font-weight:700;
    margin-top: 1px;
    transition: color 0.2s;
    min-width: 16px;
    padding-right: 0.4rem;
}
div.kin_box.portlet .update_log{ /* color: #303030!important; */ padding-left: 20px; background: url("../img/icn_rekin.png") no-repeat 4px 50%}
div.kin_box.portlet .re{ float: right; margin-top: -14px;}

/*****************************************
 개인설정
******************************************/
/*------------------------------------------------------------------------------
  계열사 목록
-------------------------------------------------------------------------------*/
.affiliate_wrap { margin-right: -20px; margin-bottom: -20px; }
.affiliate_wrap ul, .affiliate_wrap li { margin: 0; padding: 0; list-style: none; }
.affiliate_wrap .affiliate_type { display: inline-block; width: 120px; margin-right: 20px; margin-bottom: 20px; vertical-align: top; }
.affiliate_wrap .affiliate_type .type_title { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
#affiliate_en .affiliate_type .type_title { margin-bottom: 10px; font-size: 14px; font-weight: 600; word-break:break-all;}/*2022-12-26 /jj_baek/영문용 추가*/
.affiliate_wrap .affiliate_type li { margin-bottom: 8px; font-size: 13px; }
#affiliate_en .affiliate_type li { margin-bottom: 8px; font-size: 10px; } /*2022-12-26 /jj_baek/영문용 추가*/


/*------------------------------------------------------------------------------
  개인정보 이용
-------------------------------------------------------------------------------*/
.privacy_wrap { line-height: 1.5; font-size: 13px; }
.privacy_wrap ul, .privacy_wrap li { margin: 0; padding: 0; list-style: none; }
.privacy_wrap .agree_all { margin-bottom: 20px; padding: 15px 20px; border: 1px solid #f5f5f5; background-color: #fbfbfb; font-size: 14px; }
.privacy_wrap .agree_box { margin-top: 10px; text-align: right; }
.privacy_wrap .agree_box li { margin-top: 5px; }
.privacy_wrap .agree_box .label { display: inline-block; margin-right: 20px; vertical-align: middle; }
.privacy_wrap p { margin: 0; padding: 3px 0; }
.privacy_wrap div.eb_tbl { margin-bottom: 10px; }
.privacy_wrap div.eb_tbl > table > thead > tr > th, 
.privacy_wrap div.eb_tbl > table > tbody > tr > th { text-align: center; }
.privacy_wrap div.eb_tbl > table > tbody > tr > td { padding-left: 10px; padding-right: 10px; }
.privacy_wrap .privacy_text > ul > li { margin-bottom: 50px; padding-left: 30px; }
.privacy_wrap .privacy_text > ul > li > p { font-size: 14px; }
.privacy_wrap .privacy_text .no { float: left; width: 26px; margin-left: -26px; margin-top: 3px; font-weight: 600; }
.privacy_wrap .privacy_text .note { padding: 15px 20px; border: 1px solid #f5f5f5; background-color: #fbfbfb; }
.privacy_wrap .privacy_text .note .title { font-weight: 600; }



/*****************************************
관리자
******************************************/
/*--------------------
상단
-----------------------*/
/*로고 수정 by 이승완 2021-07-13*/
div.admin_wrap .admin_header > .header_logo {  width: 100px; padding-right:10px; }


/*******************************************************
식단관리
********************************************************/
/* 포틀릿 */
div.prev_wrap.for_food { float:left; width: 10%; margin-top: 70px; cursor: pointer; text-align:center; font-size: 30px; font-weight: bold; }
div.next_wrap.for_food { float:left; width: 10%; margin-top: 70px; cursor: pointer; text-align:center; font-size: 30px; font-weight: bold; }
div.menu_wrap.for_food { float:left; width: 80%; overflow:hidden; }
div.menu_wrap.for_food > .menu_list { position: relative; list-style: none; }
div.menu_wrap.for_food > .menu_list > .menu { float:left; height: 200px; }
div.menu_wrap.for_food > .menu_list > .menu > .menu_contents { text-align: center; margin-top:15px; }
div.menu_wrap.for_food > .menu_list > .menu > .menu_contents > .when { text-align: center; margin-top: 10px; font-size: 20px; font-weight: bold; }
div.menu_wrap.for_food > .menu_list > .menu > .menu_contents > .food { font-size: 13px; margin-top: 15px; }
div.menu_wrap.for_food > .menu_list > .menu > .menu_contents > .food > .more { cursor: pointer; }
div.menu_wrap.for_food > .menu_list > .menu.empty { width: 100%; text-align: center; }
div.menu_wrap.for_food > .menu_list > .menu.empty > p { margin-top: 40px; font-size: 13px; }
/* 2025-10-15 / jj_baek / 칠성 식단 포틀릿용 body_wrap.ch */
div.body_wrap.ch { display: flex;justify-content: center;}
div.body_wrap.ch .for_food {float: none;position:absolute;}
div.body_wrap.ch .prev_wrap.for_food {
    left: 0.4rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    opacity:0;
    transition:all 0.3s ease;
}
div.body_wrap.ch .next_wrap.for_food {
    right: 0.4rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    opacity:0;
    transition:all 0.3s ease;
}
div.food_box:hover div.body_wrap.ch .prev_wrap.for_food {opacity:0.6;transition:all 0.3s ease;}
div.food_box:hover div.body_wrap.ch .next_wrap.for_food {opacity:0.6;transition:all 0.3s ease;}
div.food_box:hover div.body_wrap.ch .prev_wrap.for_food:hover {transform: scale(1.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);transition: all 0.5s ease;}
div.food_box:hover div.body_wrap.ch .next_wrap.for_food:hover {transform: scale(1.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);transition: all 0.5s ease;}

/* 푸드메인(유저) */
div.meals_wrap > .eb_tbl > table > thead > tr > th { text-align:center; }
div.meals_wrap > .eb_tbl > table > tbody > tr > th { text-align:center; }
div.meals_wrap > .eb_tbl > table > tbody > tr > .single_cell { vertical-align:top; padding:10px; }
div.meals_wrap > .eb_tbl > table > tbody > tr > .single_cell > div > .title { font-weight: bold; }
div.meals_wrap > .eb_tbl > table > tbody > tr > .single_cell > div > ul { padding:0 0 0 15px; }

 /* 
div.image_slide_box .image_list > .link.normal { width: 340px; text-align:center; }  
div.image_slide_box .image_list > .link.widthexpand_2 { width: ; text-align:center; }  
div.image_slide_box .image_list > .link.widthexpand_3 { width: ;;text-align:center;  } 
div.image_slide_box .image_list > .link.widthexpand_4 { width: 100%;;text-align:center;  } 
div.image_slide_box .image_list > .link.widthexpand_5 { width: 100%;;text-align:center;  }  */

div.image_slide_box .image_list > .link.normal { width: 340px ; text-align:center; }  
div.image_slide_box .image_list > .link.widthexpand_2 { width: 700px ; text-align:center; }  
div.image_slide_box .image_list > .link.widthexpand_3 { width: 1060px;text-align:center;  } 
div.image_slide_box .image_list > .link.widthexpand_4 { width: 1420px ;text-align:center;  } 
div.image_slide_box .image_list > .link.widthexpand_5 { width: 1780px ;text-align:center;  }

/*******************************************************
경조사
********************************************************/
/* 포틀릿 */
div.portlet.family_event_box > ul { height: 155px; overflow-y: auto; }
div.portlet.family_event_box > ul > li { height: 40px; display: block; }
div.portlet.family_event_box > ul > li + li { margin-top: 13px; }
div.portlet.family_event_box > ul > li > .event_icon { height: 40px; float: left; width:40px; overflow:hidden; margin-right: 5px; }
div.portlet.family_event_box > ul > li > .profile_pic { height: 40px; float: left; width:40px; margin-right: 5px; }
div.portlet.family_event_box > ul > li > .profile_pic > div { height: 35px; width: 35px; border-radius: 18px; overflow: hidden }
div.portlet.family_event_box > ul > li > .profile_pic > div > img { width: 35px; }
div.portlet.family_event_box > ul > li > .title_text { height: 40px; float: left; width:160px; margin-right: 5px; }
div.portlet.family_event_box > ul > li > .title_text.widthexpand_2_size { width:470px; }
div.portlet.family_event_box > ul > li > .title_text > span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.portlet.family_event_box > ul > li > .title_text > span.title { font-size:14px; font-weight: bold; margin-bottom: 5px; }
div.portlet.family_event_box > ul > li > .title_text > span.dept { font-size:13px; }
div.portlet.family_event_box > ul > li > .event_date { height: 40px; float: left; width:70px; overfow:hidden; vertical-align: middle; }

/*//[롯데그룹] 2021-08-20 / LDM_DEV_0008 / by taehyung / 경조사게시판*/
div.family_event ul.box_list { padding: 0; margin: 10px 0 0 0; list-style: none; }
div.family_event ul.box_list > li {height: 36px;position: relative; padding: 0 0 0 45px; margin-bottom: 23px }
div.family_event ul.box_list > li+li { margin-top: 15px; }

div.family_event.lott_size02 ul.box_list > li {padding: 0 0 0 90px; margin-bottom: 23px }

div.family_event.lott_size01 ul.box_list .list_type02{ width:180px }
div.family_event ul.box_list > li > .event_state { position: absolute; top: 0; left: 0; width: 35px; height: 35px; border-radius: 35px;}
div.family_event ul.box_list > li > .profile_photo{ position: absolute; top: 0; left:45px; width: 35px; height: 35px; border-radius: 35px;  }
div.family_event ul.box_list > li.active .link { font-weight: normal; color: #707070; }
div.family_event ul.box_list.two .update_log { position: absolute;  top: 0;right: 0;  margin-top: 3px; font-size: 13px!important; color: #000000!important; }
div.family_event ul.box_list.two .name_ccr{color: #707070;line-height: 18px}
.darkmode div.family_event ul.box_list.two .name_ccr {color : #b3b3b3; line-height: 18px;} 
div.family_event ul.box_list.two .event_name{ width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: #000000;line-height: 18px}


/* [롯데] 2021-08-04 / LDM_DEV_0163 / by jdw0615 / 이미지슬라이스 포틀릿  css 변경 */
div.image_slide_box .link img { height:260px; }
div.image_slide_box .image_list > .link {height:260px;}
div.image_slide_box .navbtn{text-align:center;}

/* [롯데] 2021-08-05 / LDM_CST_0006 / 서지은 / EWS 메일용량 포틀릿 */
/*메일용량*/
div.disk_box.portlet > div{ padding: 0 20px}
div.disk_box.portlet .gauger{ background: #cccfd3; width: 100%; height: 30px;border-radius: 30px; overflow: hidden }
div.disk_box.portlet .gauger div{ background: #61b5ea; height: 30px; border-radius:0 30px 30px 0px}
div.disk_box.portlet .total_volume{ font-size: 30px; margin:30px 0 20px 0; text-align: center}
div.disk_box.portlet .disk{font-size: 12pt; margin:0 0 5px 0}

/* [롯데] 2021-08-04 / LDM_CST_0004 / 서지은 / EWS 퀵메일보내기 포틀릿 */
div.mail_box{ position: relative}
div.mail_box div.mail_write_wrap{ margin-top: 20px}
div.mail_box div.mail_write_wrap .mail_write_body{ border-top:0}
div.mail_box div.mail_write_wrap .eb_textarea{ width: 572px }
div.mail_box div.mail_write_wrap .btn_send{ height: 77px;    position: absolute;  right: 20px; bottom:23px;}
div.mail_box div.mail_write_wrap div.eb_textarea textarea{min-height: 77px;}

/* [롯데] 2021-08-04 / LDM_CST_0003, LDM_CST_0005 / 김희중 / EWS 개인일정 달력 포틀릿 (1~2칸) */
/* main - schedule */
div.calendear_box.portlet{padding: 0 10px}
div.calendear_box.portlet .calendar table { width: 100%; text-align: center; margin-bottom: 40px}
div.calendear_box.portlet .cal_head {width: 90px; height: 100%; float: left; text-align: center; padding-top: 50px; box-sizing: border-box}
div.calendear_box.portlet .cal_head .month{ font-size: 40px; margin: 5px}
div.calendear_box.portlet .cal_body { width:230px; float: left; margin-top: 30px  }
div.calendear_box.portlet .cal_body table > thead > tr > th > span { font-size: 12px; }
div.calendear_box.portlet .cal_body table > tbody > tr > td { height: 28px;width: 26px; position: relative }
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.sun, 
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.holiday, 
div.calendear_box.portlet .cal_body table > thead > tr > th > span.sun{ color: #fc6e57; }
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.sat, 
div.calendear_box.portlet .cal_body table > thead > tr > th > span.sat { color: #579dfc; }
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.not_mon{ color: #bdbfc7;}
div.calendear_box.portlet .cal_body table > tbody > tr > td > span{ margin:0 auto;display: inline-block; width: 24px; height: 24px; font-size: 12px; line-height: 25px; box-sizing: border-box; border-radius: 50%; cursor: pointer}
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.scheduleday { font-weight: 600; background: #D6F0FF; box-sizing: border-box; }
.darkmode div.calendear_box.portlet .cal_body table > tbody > tr > td > span.scheduleday { font-weight: 600; background: #3d606f; box-sizing: border-box; }
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.active { font-weight: 600; background: #32364a; color: #fff;  }
.darkmode div.calendear_box.portlet .cal_body table > tbody > tr > td > span.active { font-weight: 600; background: #32364a !important; color: #fff;  }
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.today { font-weight: 600; background: #59c4e3; color: #fff; box-sizing: border-box; }
div.calendear_box.portlet .cal_body table > tbody > tr > td > span.color_set{ height: 3px; width: 3px;border-radius: 3px; position: absolute; left: 50%; bottom: 2px; }

div.calendear_box .schedule_list{ width: 314px; padding-left: 20px; float: left; border-left: 1px solid #e5e5e5; margin:20px 0 0 20px;}
.darkmode div.calendear_box .schedule_list{ width: 314px; padding-left: 20px; float: left; border-left: 1px solid #4e5053; margin:20px 0 0 20px;}
div.calendear_box .schedule_list .box_list.two{height:210px;overflow-y:auto;margin-top: 0px}
div.calendear_box .schedule_list .box_list.two li{padding-left: 15px}
div.calendear_box .schedule_list .color_set{ position: absolute;  top: 6px; left: 0;  width:7px; height: 7px; border-radius: 7px; display: inline-block  }
div.calendear_box .schedule_list ul.box_list.two .update_log{font-size: 12px}

/* [롯데] 2021-08-05 / LDM_CST_0005 / 김희중 / EWS 개인일정 달력 포틀릿 (1칸 포틀릿) */
/* 일정 목록 조회 Layer Pop, CSS */
div.calendear_daily_box.pop { padding: 0 10px; }
div.calendear_daily_box .schedule_list { width: 510px; padding-left: 25px; float: left; border-left: 1px solid #e5e5e5; position: relative; left: 10px;  }
div.calendear_daily_box .schedule_list .color_set { position: absolute;  top: 6px; left: 0;  width:7px; height: 7px; border-radius: 7px; display: inline-block }
div.calendear_daily_box .schedule_list .update_log { margin-top: 3px; font-size: 13px; color: #707070; }
.darkmode div.calendear_daily_box .schedule_list .update_log { margin-top: 3px; font-size: 13px; color: #dbdfe1; }
div.calendear_daily_box .schedule_list .link { font-size: 14px; font-weight: 600; color: #303030; text-decoration: none; cursor: pointer; }
.darkmode div.calendear_daily_box .schedule_list .link { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer; }

div.calendear_daily_box div { padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.calendear_daily_box ul { height: 210px; overflow-y: auto; margin-top: 0px; padding: 0; list-style: none; }
div.calendear_daily_box ul > li { padding-left: 15px; position: relative; }
div.calendear_daily_box ul > li+li { margin-top: 10px; }
/* [롯데] 2021-08-04 / LDM_DEV_0164 / by jdw0615 / 이미지포틀릿의 다음보기 버튼을 하단으로 5px가량 이동 */
div.image_slide_box .navbtn{  text-align: right; line-height:10px; padding-right: 6px }
/* [롯데] 2021-08-17 / LDM_DEV_0167 / by jdw0615 /  메뉴 padding 조정 */
div.header_list div.gnb_more_menu.cef_menu ul li {list-style: none;position: relative;margin: 0;padding: 0 0 10px 0;}


/*포틀릿 직각*/
.square div.portlet {border-radius:0} 


.portlet_type ul li:nth-child(+1) span { display:block; text-indent: -9999px; background: url(../img/portlet01.png) no-repeat}
.portlet_type ul li:nth-child(+2) span { display:block; text-indent: -9999px; background: url(../img/portlet02.png) no-repeat}


/*백화점바로가기*/
div.system_box_ds{}
div.portlet.normal_size.system_box_ds ul.work_aid{ float: right; width: 170px; height: 180px; overflow-x: auto; padding-top: 10px}
div.portlet.normal_size.system_box_ds ul.work_aid > li {width: 100%; margin: 6px 0; }
div.portlet.normal_size.system_box_ds ul.work_aid > li .icon{width: 48px; height: 40px; text-indent: 0; display: none}
div.portlet.normal_size.system_box_ds ul.work_aid > li span{ font-size: 14px}

div.portlet.widthexpand_2_size.system_box_ds ul.work_aid{ float: right; width: 540px; height: 180px; overflow-x: auto; padding-top: 10px}
div.portlet.widthexpand_2_size.system_box_ds ul.work_aid > li { width: calc(520px / 5); margin: 15px 0; }
div.portlet.widthexpand_2_size.system_box_ds ul.work_aid > li .icon{width: 100%; height: 40px; text-indent: 0 ;text-align:center;}

.menu_ds {list-style: none;width: 110px;padding: 0; margin: 0; float: left}
.menu_ds li{ height: 49px; line-height: 49px; width: 110px; background: #f0f0f0;list-style: none; padding: 0; margin: 0; text-indent:20px; font-size: 14px; cursor: pointer}
.menu_ds li.on, .menu_ds li:hover{ background: #fff; font-weight: bold}

/*게시판 폴더 css*/
/* 2024-03-08 / jj_baek / 다크모드 분기때문에 각 theme 경로의 클래스 보도록 함 */
/* div.eb_tree .tree_item .disableFolder { color: #707070; cursor: default; } */


/****************************************************************/
/* [롯데] 2021-09-13 / 219 / by hbkim / MDI 우측 끝 copyright 추가 */
/*하단*/
div.footer_wrap .copyright { width:330px; position: absolute; right: 0; top: 4px; color: #fff; }
div.footer_wrap .copyright ul {margin: 0; padding: 0}
div.footer_wrap .copyright ul li{ display: inline-block; margin: 0; padding: 0; height: 26px; line-height: 26px; padding-left: 10px}
div.footer_wrap .copyright ul li .eb_btn { display: none; }
div.footer_wrap .copyright ul li .eb_btn.active { display: block; }
div.footer_wrap .copyright ul li .eb_btn.btn_gnb_more2 { position: relative; top:0; width: 68px; height: 26px; padding: 0 20px 0 7px; border: 1px solid rgba( 255, 255, 255, 0.2); border-radius: 3px; text-align: left; font-size: 13px; color: #fff; box-sizing: border-box; background: transparent url('../img/icon_arrow_up.png') no-repeat 87% center ;}
div.footer_wrap .copyright ul li .eb_btn.btn_gnb_close2 { position: relative; top:0; width: 68px; height: 26px; padding: 0 20px 0 7px; border: 1px solid rgba( 255, 255, 255, 0.2); border-radius: 3px; text-align: left; font-size: 13px; color: #fff; box-sizing: border-box; background: transparent url('../img/icon_arrow_down.png') no-repeat 87% center ;}
div.footer_wrap .copyright ul li .eb_btn.btn_gnb_more2:active, 
div.footer_wrap .copyright ul li .eb_btn.btn_gnb_close2:active { border-color: rgba( 255, 255, 255, 0.6); }

.footer_link{position: fixed; bottom:44px; z-index:1000; font-size: 14px}
.footer_link div+div{ padding-top:5px}

.privacy { width:800px; height: 700px; font-size: 14px}
.privacy h2{ font-size: 16px}
.privacy .inner_popup_body {margin-top: 30px!important; padding: 0 15px; height: 550px; overflow-y: scroll}
.privacy ul,.privacy ol,.privacy li { list-style: none;}
.privacy a:hover{ text-decoration: underline}
.privacy .border {border-collapse: collapse;}
.privacy .border tr td {   border: 1px solid black;  padding: 5px;  }
/****************************************************************/

/* [롯데그룹] 2021-09-23 / LDM_DEV_0195 / by kskim / 게시판 공지 팝업 div로 변경 */
.inner_notice_popup {overflow-y: auto; height:600px;}

.cefdefaultTheme1{width: 13px; height: 13px; background-color: #ed1b24; display: inline-block; text-align: center; vertical-align: middle;}
.cefdefaultTheme2{width: 13px; height: 13px; background-color: #325792; display: inline-block; text-align: center; vertical-align: middle;}
.cefdefaultTheme3{width: 13px; height: 13px; background-color: #007D5F; display: inline-block; text-align: center; vertical-align: middle;}
.cefdefaultTheme4{width: 13px; height: 13px; background-color: #3f3f3f; display: inline-block; text-align: center; vertical-align: middle;}
.cefdefaultTheme5{width: 13px; height: 13px; background-color: #9e896e; display: inline-block; text-align: center; vertical-align: middle;}
.cefdefaultTheme6{width: 13px; height: 13px; background-color: #75a4c5; display: inline-block; text-align: center; vertical-align: middle;}
.cefdefaultTheme7{width: 13px; height: 13px; background-color: #32364a; display: inline-block; text-align: center; vertical-align: middle;}

/* [롯데] 2024-01-22 / LR_DEV_017 / by 조은비 / theme8 추가 */
.cefdefaultTheme8{width: 13px; height: 13px; background-color: #9546D9; display: inline-block; text-align: center; vertical-align: middle;}

/*------------------------------------------------------------------------------
  칭찬하기
-------------------------------------------------------------------------------*/
/* 칭찬하기 포틀릿 */
div.reward_list ul.box_list { padding: 0; margin: 10px 0 0 0; list-style: none; }
div.reward_list ul.box_list > li {height: 36px;position: relative; padding: 0 0 0 45px; margin-bottom: 23px }
div.reward_list ul.box_list > li+li { margin-top: 15px; }

div.reward_list.lott_size02 ul.box_list > li {padding: 0 0 0 90px; margin-bottom: 23px }

div.reward_list.lott_size01 ul.box_list .list_type02{ width:180px }
div.reward_list ul.box_list > li > .event_state { position: absolute; top: 0; left: 0; width: 35px; height: 35px; border-radius: 35px;}
div.reward_list ul.box_list > li > .target_photo img { width: 35px; height: 35px; border-radius: 35px;  }
div.reward_list ul.box_list.two .update_log { position: absolute;  top: 0;right: 0;  margin-top: 3px; font-size: 13px!important; color: #000000!important; }
div.reward_list ul.box_list.two .name_ccr{color: #707070;line-height: 18px}
.darkmode div.reward_list ul.box_list.two .name_ccr{color:#b3b3b3;line-height: 18px}
/* 칭찬하기 메뉴 */
#reward{ width:100%; height:100%; background:#fff;}
#reward .sub_header{padding:0}
#reward div.sub_header > .cont_left_wrap .sub_title{padding: 0 4px 0 0px}
#reward div.sub_top_wrap .cont_btn_wrap {padding: 20px 0 15px 0}

#reward em{font-style: normal}
#reward .contents{width:auto;min-width: 880px;position: absolute;z-index: 0;left: 280px;top:60px;right: 20px;bottom: 35px;overflow: auto;overflow-y:hidden;/*  white-space:nowrap; * nowrap 추가. hyungyu */}
#reward .releaseContents{left:10px;}
/* ie 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #reward .contents{ min-width: 860px; } }
/* Edge */
@supports (-ms-ime-align:auto) { #reward .contents{ min-width: 860px; }}
#reward .contents.card_write { margin-right: 20px; overflow-x: hidden; overflow-y: auto; } 

#reward .lnb_wrap{ border-right: 1px solid #e5e5e5; bottom: 25px;}
.darkmode #reward .lnb_wrap{ border-right: 1px solid #4e5053; bottom: 25px; background:#303030;}
#reward.vertical_L .lnb_wrap{ padding-left:30px;}
#reward div.lnb_body .lnb_menu a{max-width: 125px;}
#reward.vertical_L div.lnb_body .lnb_menu a{max-width: 115px;}
#reward div.lnb_body .main_depth a{max-width: 150px;}

#reward div.lnb_body .lnb_menu[cw_leftMenu_channel] a{max-width: 155px;}
#reward div.lnb_body .lnb_menu a.ellipsis{white-space: nowrap;overflow: hidden; text-overflow: ellipsis; display: inline-block; text-decoration: none;}

/*왼쪽메뉴 - sort style*/ 
#reward .as-sortable-drag .as-sortable-item{ margin-top: 0;}

/*검색영역*/
#reward .search_wrap {position: absolute; right: 40px; top: 10px;}
#reward .search_wrap .serach .input_search {width: 180px;}

#reward.vertical_L .lnb_wrap .inner_scroll_mode.hidden_scroll{
	margin-left:10px;
}
#reward .contents.card_write {top:20px}

/* 칭찬하기 툴팁 */
#reward .tooltip_box {position: absolute; left: 280px; top: 10px; right: 300px; width: auto; min-width: 880px; z-index: 999;}

/* 칭찬하기 LNB */
.lnb_box { border: 1px solid #e5e5e5; border-radius: 3px; }

.lnb_menu .main_depth .eb_btn.icon_portlet_btn { display: block; position: absolute; top: 50%; margin-top: -6px; right: 0px; }
div.lnb_body .lnb_menu .main_depth ~ .main_depth { margin-top: 16px; }

.lnb_menu .user_box { overflow: hidden; margin-bottom: 20px; }
.lnb_menu .user_box .photo { overflow: hidden; float:left; width: 44px; height: 44px; margin-right: 8px; border: 1px solid rgba(139, 148, 157, 0.5); box-sizing: border-box; border-radius: 50%; }
.lnb_menu .user_box .info { padding: 6px 0; font-size: 13px; }
.lnb_menu .user_box .info span { display: block; }
.lnb_menu .user_box .info .name { font-weight: 600; }
.lnb_menu .user_box .info .depart { margin-top: 3px; }

.lnb_menu .potato_count { overflow: hidden; padding-top: 5px; }
.lnb_menu .potato_count p { position: relative; display: inline-block; float: left; width: 50%; margin: 0; padding-top: 30px; font-size: 11px; text-align: center; }
.lnb_menu .potato_count p + p:before { content: ""; position: absolute; left: 0; top: 2px; display: block; width: 1px; height: 40px; background-color: #d4d8dd; }
.lnb_menu .potato_count .count { display: block; position: absolute; top: 0; left: 0; right: 0; height: 24px; font-size: 16px; font-weight: 100; text-align: center; }
.lnb_menu .potato_count .count strong { font-size: 21px; color: #303030; font-weight: 600; }
.darkmode .lnb_menu .potato_count .count strong {color:#fff}

.lnb_menu .lnb_praise_box { margin-top: 8px; }
.lnb_menu .lnb_praise_box ul, 
.lnb_menu .lnb_praise_box li { margin: 0; padding: 0; list-style: none; }
.lnb_menu .lnb_praise_box li { line-height: 1.3; }
.lnb_menu .lnb_praise_box li + li { margin-top: 10px; }
.lnb_menu .lnb_praise_box.potato { padding-left: 30px; }
.lnb_menu .lnb_praise_box.qna li a { display: block; padding-left: 18px; background: url("../../common/image/layout/icon_depth.png") no-repeat 6px 2px; }
.lnb_menu .lnb_praise_box.guide li { position: relative; padding-left: 8px; }
.lnb_menu .lnb_praise_box.guide li + li { margin-top: 5px; }
.lnb_menu .lnb_praise_box.guide li:before { content: ""; position: absolute; left: 0; top: 6px; display: block; width: 3px; height: 3px; border-radius: 50%; background-color: #b2d2f4; }
.lnb_menu .lnb_praise_box + div.write_btn_wrap { padding-top: 20px; padding-bottom: 0; background-color: inherit; }

/* 칭찬하기 메인 */
.praise_wrap {}
.praise_wrap .column.cardlist { display: block; width: auto; margin: 0; padding-right: 10px; }
.praise_wrap .column.cardlist .header .boardTitleDetail {width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
.praise_wrap .column.cardlist .header .boardTitle { max-width: 870px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.praise_wrap .card_box { display: inline-block; vertical-align: top; }
.contents.list_type .praise_wrap .card {width: 260px;animation: profileFadeUp 0.35s ease 0.08s both;}
.contents .praise_wrap .card {width: 246px;}
.praise_wrap .card { margin: 0 0 10px 10px; padding-bottom: 15px; border-color: #e1e1e1; }
.praise_wrap .card:hover { cursor: pointer; }
.praise_wrap .card .user { position: relative; margin-bottom: 0px; font-size: 13px; }
.praise_wrap .card .user > p { display: inline-block; }
.praise_wrap .card .user .user_info { max-width: 220px; padding-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333333; font-weight: bold;}
.praise_wrap .card .user .user_info.darkmode { max-width: 220px; padding-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-weight: bold;}
.praise_wrap .card .upload_info { 
	margin-top: 12px;
	color: #8888AA;
	font-size: 11px; 
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	display: flex;
    justify-content: space-between;
    padding-top: 12px;
    font-weight:500;
}
.praise_wrap .card .upload_info span { display: inline-block; margin: 0 5px; }
.praise_wrap .card .upload_info .date { float: right; }
.praise_wrap .card .upload_info .user { margin-top: 10px; padding-top: 10px; padding-right: 5px; border-top: 1px solid #e7eaec; text-align: right; width: 100%;}
.darkmode .praise_wrap .card .upload_info .user { margin-top: 10px; padding-top: 10px; padding-right: 5px; border-top: 1px solid #4e5053; text-align: right; width: 100%;}
.praise_wrap .card .upload_info .user .user_info2 {max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0px; padding: 0px; display: block;}
.praise_wrap .card .upload_info .rewardcnt {float: left; margin: 0px; padding: 0px; height: 15px; margin-right: 7px;}

.praise_wrap .card .subject span { max-width: 100%; padding-right: 0; }
.praise_wrap .card .text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.5; max-height: 4.5em; height: 4.5em; }
.praise_wrap .card .releasenote_text {max-height:12.5em; height:12.5em;}
/* .praise_wrap .card .target { margin-bottom: 12px; border-bottom: 1px solid #e7eaec; cursor: auto; } */
.darkmode .praise_wrap .card .target { margin-bottom: 12px; border-bottom: 1px solid #4e5053; cursor: auto;}
.praise_wrap .card .target .user.C1:before { content: ""; display: block; position: absolute; left: 12px; top: 3px; width: 24px; height: 15px; background: url("../img/icn_praise_crown.png") center no-repeat; z-index: 0; }
.praise_wrap .card .target .user.C2:before { content: ""; display: block; position: absolute; left: 12px; top: 3px; width: 24px; height: 15px; background: url("../img/icn_praise_crown.png") center no-repeat; z-index: 0; }
.praise_wrap .card .target .user.H1:before { content: ""; display: block; position: absolute; left: 25px; top: 10px; width: 24px; height: 15px; background: url("../img/icn_praise_heart1.png") center no-repeat; z-index: 0; }
.praise_wrap .card .target .user.H2:before { content: ""; display: block; position: absolute; left: 25px; top: 10px; width: 24px; height: 15px; background: url("../img/icn_praise_heart2.png") center no-repeat; z-index: 0; }
.praise_wrap .card .target .user .photo { width: 48px; height: 48px; }
.praise_wrap .card .target .user .user_info { max-width: 160px; font-size: 14px; }
.praise_wrap .card .target .user .user_info em { display: block; margin-top: 3px; }
.praise_wrap .card .target .like { position: absolute; right: 0px; text-align: right;}
.praise_wrap .card .target .like span { margin-right: 0px; } /* 2022-08-17 / jj_baek / 좋아요카운트 클릭영역 확대 (기존 5px -> 0px) */
.praise_wrap .card .target .like span.addRewardCnt {
	background: linear-gradient(135deg, #FFB347, #FF8E53);
	color: white; 
	border-radius: 20px; 
	padding: 2px; 
	padding-left: 5px; 
	margin-top: 2px; 
	margin-right: 0px;
	box-shadow: 0 4px 12px rgba(255, 179, 71, 0.35);
	font-size:12px;
	font-weight:700;
}

.likeBtn_H {display:inline-block;width:15px;height:15px;background:url(../img/icon_good_off.png) no-repeat center;position:relative;}
.likedBtn_H {display:inline-block;width:15px;height:15px;background:url(../img/icon_good_on.png) no-repeat center;position:relative;}
/* 2026-03-26 / jj_baek / 좋아요 아이콘 이모지로 변경 */
.likeBtn_T {display:inline-block;width:15px;height:15px;/*background:url(../img/icon_like_thumb_off.png) no-repeat center;*/position:relative;}
.likeBtn_T::after{content: '👍';position: absolute;width: 15px;height: 15px;left: 0;top: 0;filter: grayscale(1);}
.likedBtn_T {display:inline-block;width:15px;height:15px;/*background:url(../img/icon_like_thumb_on.png) no-repeat center;*/position:relative;}
.likedBtn_T::after{content: '👍';position: absolute;width: 15px;height: 15px;left: 0;top: 0;}
.likeCntClick {padding-left:5px;} /* 2022-08-17 / jj_baek / 좋아요카운트 클릭영역 확대 */

.praise_summary * { margin: 0; padding: 0; list-style: none; }
.praise_summary ul { font-size: 0; text-align: center; }
.praise_summary ul + ul { margin-top: 18px; }
.praise_summary li { display: inline-block; font-size: 14px; background: #f4f7fc;  box-sizing: border-box}
.praise_summary .status { position: relative; padding-left: 1.15em; font-size: 14px; text-align: left; }
.praise_summary .status:after { content: ""; position: absolute; display: block; left: 0; top: 3px; width: 0.75em; height: 0.75em; /*border: 3px solid #a0a0a0;*/ background-color: #a0a0a0; border-radius: 50%; box-sizing: border-box; }

.praise_summary .praise_summary_total li + li { margin-left: 2%; }
.praise_summary .praise_summary_total .task_my_own{ width: 59%; padding:25px 20px;}
.praise_summary .praise_summary_total .task_my_own.darkmode{ width: 59%; padding:25px 20px;background:#1C1D20; border : 1px solid #4e5053; color:#fff}
.praise_summary .praise_summary_total .task_directed { width:32%; padding:25px 20px;}
.praise_summary .praise_summary_total .task_direct { width: 39%; padding:25px 20px;}
.praise_summary .praise_summary_total .task_direct.darkmode { width: 39%; padding:25px 20px; color:#fff; background : #1C1D20; border : 1px solid #4e5053;}
.praise_summary .praise_summary_total p { margin: 0; padding-bottom: 10px; font-size: 16px; font-weight: 600; text-align: left; }
.praise_summary .praise_summary_total .task_my_own ul li { position: relative;width:33%; margin: 0 auto; text-align: center; background: none}
.praise_summary .praise_summary_total .task_direct ul li { position: relative;width:50%; margin: 0 auto; text-align: center; background: none}
.praise_summary .praise_summary_total li .count_text { display: block; margin-top: 10px; font-size: 12px; color: #707070; }
.praise_summary .praise_summary_total li .count_all { display: inline-block; margin-top:10px; font-weight: 600; font-size: 28px; }

.choice01{ color: #216bf6}

.popup_scroll .praise_summary_total .task_my_own{ width: 100% !important; background: #f4f7fc url("../img/icon_switch.png") no-repeat 50% 55%; background-size: 13%}
.popup_scroll .praise_summary_total .task_my_own div.eb_input{ height:45px;  }
.popup_scroll .praise_summary_total .task_my_own.darkmode{ width: 100% !important; background: black url("../img/icon_switch.png") no-repeat 50% 55%; background-size: 13%}


.lnb_wrap .header_wrap{ border-radius:5px; padding: 10px 0; height: 70px;}

.work_summary_total { margin: 10px 0 0 0; padding: 0; list-style: none; }
.work_summary_total li { display: inline-block; font-size: 14px; box-sizing: border-box; width: 48%; text-align: center; margin: 0; padding: 0; list-style: none;}
.work_summary_total li .count_text { display: block; margin-top: 10px; font-size: 13px; color: white; }
.work_summary_total li .count_all { display: inline-block;font-weight: 600; font-size: 28px; color: #fff }
.work_summary_total li:first-child{ border-right: 1px solid rgba(255,255,255,0.07)}

.cefImg_preview_wrap img { max-width: 100%; max-height: 300px; }

/* 2025-04-03 / jj_baek / 칭찬 백그라운드 컬러 */
.praise_wrap .card:hover::before{
	transform:scaleY(1.8) scaleX(1.5);
	transform-origin:left top;
	transition:all 0.2s ease;
}
.praise_wrap .card::before{
	content: "";
	position: absolute;
	left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-image: linear-gradient(var(--rewardMsgBgDeg, 150deg), var(--rewardMsgBgColor), transparent 50%);
    pointer-events:none;/*클릭 무시 되도록*/
    transition:all 0.5s ease;
}
.praise_write_textarea_editor{background-color:transparent;}
/* 작성할때 */
.reward_textarea_td::before{
	content: "";
    position: absolute;
    width: 100%;
    height: 30%;
    opacity: 0.2;
    background-image: linear-gradient(170deg, var(--selected_bgcolor), transparent 40%);
    pointer-events: none;
    animation:var(--setBgAnim, anim_spread 1s ease forwards);
}
/* 팝업에서 */
.card_view::before{
	content: "";
    position: absolute;
    width: 100%;
    height: 30%;
    opacity: 0.2;
    background-image: linear-gradient(170deg, var(--selected_bgcolor), transparent 40%);
    pointer-events: none;
    animation:var(--setBgAnim, anim_spread 1s ease forwards);
}
@keyframes anim_spread{
	0%{opacity:0;transform:scale(0);transform-origin:top left;}
	100%{opacity: 0.2;transform:scale(1);transform-origin:top left;}
}
.reward_msg_footer_wrapper{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.reward_msg_bgselect_wrapper{
	position: relative;
	display:flex;
	left:2px;
	border: none;
    padding: 4px;
}
.reward_msg_bgselect_wrapper:has(div){  /* has는 파폭은 안된다 함 */
	border: 1px solid #d3d3d3;
}
.length_count{
	width:40%;
}
.rewardMsgColPal{
	border:1px solid grey;
}

/*칭찬하기 상세*/
.praise_view { background: #fff}
.praise_view.darkmode { background : #2c2d2e; border : 1px solid #4e5053; color:#fff}
.darkmode .praise_view { background : #2c2d2e; border : 1px solid #4e5053; color:#fff;}

.praise_view .contents_body{border-radius:3px}
.praise_view .contents_body .title{padding-right: 0px;}
.praise_view .contents_body .writer{font-size: 12px;  color: #5b6a78;  position: relative;  padding-right: 10px; max-width: 50%;}
.praise_view .contents_body .writer p{ margin: 3px 0; padding:0; }

.praise_view h2{ font-weight: bold;}
.praise_view .user{ float: right; margin-top: -75px; height: 60px;}
.praise_view .potato {display: inline-block; float: left; padding-right: 10px;}
.praise_view .potato img {max-width: 55px;}
.praise_view .user.C1:before { content: ""; display: block; position: absolute; right: 23px; top: 25px; width: 24px; height: 15px; background: url("../img/icn_praise_crown.png") center no-repeat; z-index: 0; }
.praise_view .user.C2:before { content: ""; display: block; position: absolute; right: 23px; top: 25px; width: 24px; height: 15px; background: url("../img/icn_praise_crown.png") center no-repeat; z-index: 0; }
.praise_view .user.H1:before { content: ""; display: block; position: absolute; right: 10px; top: 33px; width: 24px; height: 15px; background: url("../img/icn_praise_heart1.png") center no-repeat; z-index: 0; }
.praise_view .user.H2:before { content: ""; display: block; position: absolute; right: 10px; top: 33px; width: 24px; height: 15px; background: url("../img/icn_praise_heart2.png") center no-repeat; z-index: 0; }
.praise_view .user .photo { width: 48px; height: 48px;border: 1px solid rgba(139, 148, 157, 0.5);border-radius: 32px;float: right; margin-left: 10px; overflow: hidden;}
.praise_view .user .user_info { max-width: 120px; font-size: 14px; float: left; margin-top: 20px   }
.praise_view .user .user_info em { display: block; margin-top: 3px;font-size: 12px;  font-style: normal}

.praise_view .doc pre {word-break: break-all; white-space: pre-line; font-family: inherit; font-size: 13px;}

/*칭찬하기 작성*/
.praise_write textarea {
	width: 99%; 
	height: 300px; 
	resize: none; 
	border-radius: 5px;
    border: 2px solid #d5d5d5;
    color: #303030;
	padding: 5px; 
	overflow-y: auto;
}
/* 2026-01-16 / jj_baek / 칭찬하기 작성 페이지 UI 개선 */
.praise_write input { 
	border-radius:5px;
	font-size:larger;
	font-weight:700;
	width: 250px;
	height: 25px; 
	line-height: 1; 
	padding: 0.6rem 1rem; 
	border: 2px solid #d5d5d5; 
	color: #303030;
}
.praise_write.darkmode textarea {width: 99%; height: 300px; resize: none; border: 1px solid #303234; padding: 5px; overflow-y: auto; color: #FFFFFF; background:#262626; border-radius: 5px;}
.praise_write.darkmode input { width: 220px; height: 30px; line-height: 1; padding: 0 9px; border: 1px solid #303234; font-size: 13px; color: #FFFFFF; background-color: #262626; border-radius: 5px;} /* 지주 요청에 의한 칭찬 글 작성시 제목input란 width 조정 */
.darkmode .praise_write input { width: 220px; height: 30px; line-height: 1; padding: 0 9px; border: 1px solid #303234; font-size: 13px; color: #FFFFFF; background-color: #262626; border-radius: 5px;}
.darkmode .praise_write textarea {width: 99%; height: 300px; resize: none; border: 1px solid #303234; padding: 5px; overflow-y: auto; color: #FFFFFF; background:#262626; border-radius: 5px;}

/* 2026-01-15 / jj_baek / 칭찬 작성 UI 개선 */
.praise_write .reward-div-row {padding:0.5rem;}
.praise_write .reward-div-row.title-div {padding-bottom:0rem;}
.praise_write label.select-reward-cnt {
	cursor: pointer;
    border-radius: 5px;
    background-color: #f3f4f6;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    font-size: larger;
    justify-content: center;
    box-shadow: var(--msg-box-shadow);
    transition:all 0.5s ease;
}
.praise_write .reward-tgt-user-select {
	border: 2px dashed #d1d5db;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: larger;
    color: #6b7280;
}
.praise_write .reward-tgt-user-select span#tgtUserInfo{padding:1rem 0 1rem 0;}
.praise_write label.select-reward-cnt .labeltxt {color: #4b5563;padding:1rem 0 1rem 0;}
/*.praise_write label.select-anonymously {border:2px solid #e5e7eb;}*/
.praise_write label.select-anonymously:hover {box-shadow: var(--msg-box-shadow), inset 0 0 0 2px #d1d5db;}
.praise_write label.select-anonymously .labeltxt-anonymously {color: #4b5563;padding:1rem 0 1rem 0;}
.praise_write label.select-reward-cnt input{transform:scale(0);position:absolute;}
.praise_write label.select-reward-cnt:has(input:checked) .labeltxt{color:#FFF;transition:all 0.5s ease;}
.praise_write .remain-reward-area {
	background-color:#eff6ff;
	background-color: #eff6ff;
    display: flex;
    flex-direction: row;
    align-items: center;padding-left:1rem;border-radius:5px;
}
.praise_write .remain-reward-text {font-size:larger;color:#6b7280;padding:1rem 0 1rem 0;}
.praise_write.reward-write-wrap-new {padding:1rem !important;}
.praise_write span.row-title{font-size: large;font-weight: 800;color: #1f2937;}

.dsp-flex{display:flex;}
.dsp-flex-both-ends{display: flex;align-items: center; justify-content: space-between;}
.dsp-flex-end{display: flex;gap: 1rem;justify-content: flex-end;}
.dsp-flex-row{display:flex;flex-direction: row;justify-content: flex-start;align-items: center;gap: 0.5rem;}
.praise_write .length_count{
	color:#4b5563;
	font-weight:700;
	font-size:larger;
	background-color:#f3f4f6;
	border-radius:50px;
	width: fit-content;
    padding: 0.5rem 1rem;
}
.praise_write .save {
	width: 10rem;
    height: 3rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 2px 0px lightgrey;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
    font-size: larger;
    font-weight: 600;
    color: #FFF;
    gap: 0.5rem;
}
.praise_write .save-cancel{
	padding: 1rem;
    background-color: #e5e7eb;
    width: 4rem;
    font-size: larger;
    font-weight: 600;
    color: #374151;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.praise_write .save:hover{ opacity: 0.9;transition: all 0.5s cubic-bezier(.4, 0, .2, 1); }
/*칭찬하기 작성 active*/
.darkmode div.praise_write input:focus { border: 3px solid #2C6E93; transition:500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);}
.darkmode div.praise_write_textarea textarea:focus { border: 3px solid #2C6E93; transition:500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);}

/*테이블 헤더 색상 적용*/
div.eb_tbl > table > tbody > tr > th { background-color: #f4f7fc; }
.darkmode div.eb_tbl > table > tbody > tr > th { background-color: #252525; color:#E0E0E0;}
.darkmode div.card_write_body > table > tbody > tr > th { background-color: #1C1D20; color: #E0E0E0;}
.darkmode div.card_write_body > table > tbody > tr > td { border-bottom: 1px solid #3d3f40; box-sizing: border-box; text-align: left; color: #FFFFFF; word-break: break-all; word-wrap: break-word; background-color: #1C1D20;}
div.eb_tbl > table > tbody > tr > td { padding-left: 10px; }

/* 2026-03-26 / jj_baek / 칭찬 메인화면 css 수정 */
p.like .like-background {
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #F5F5FA;
    padding: 2px 8px;
    font-weight:600;
    transition: all 0.2s ease;
}
p.like .like-background:hover{
	background: #EAF0FF;
    color: #4466DD;
    border:1px solid rgba(68, 102, 221, 0.25);
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(68, 102, 221, 0.15);
}
.reward-profile-img{box-shadow: 0 4px 12px rgba(150, 150, 180, 0.2);}
.reward-dept{font-size: 11px;font-weight: 500;color: #8888AA;}
.reward-target-divider{height:1px;background: linear-gradient(90deg, var(--theme-color), transparent);margin-top: 12px;margin-bottom: 12px;opacity: 0.3;}
.reward-meta-icon{font-size:11px;opacity:0.7;}
.reward-sender-area{display:flex;justify-content: flex-end; align-items: center;}
.reward-sender-tag-background{	
	font-size: 12px;
    font-weight: 600;
    color: #4A4A6A;
    background: var(--graidient-theme);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 179, 71, 0.2);
    opacity:0.2;
}
.reward-sender-tag-name{display: flex;align-items: center;}
.reward-sender-name {font-size:11px; margin-bottom:0; color: #8888AA;font-weight: 600;}

/* 2026-03-27 / jj_baek / 칭찬기능 작성UI 개선 모달 */
#reward-write-modal-dim {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
}
#reward-write-modal-box {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	background: #fff;
	border-radius: 12px;
	width: 620px;
	max-width: 95vw;
	max-height: 88vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
/* cowork.css, custom.css 의 레이아웃 전용 절대위치 스타일 재정의 */
#reward-write-modal-box .contents.card_write {
	position: static !important;
	width: auto !important;
	left: auto !important; top: auto !important;
	right: auto !important; bottom: auto !important;
	min-width: auto !important;
	overflow: visible !important;
	animation: profileFadeUp 0.35s ease 0.16s both;
}
#reward-write-modal-box div.card_write div.card_write_wrap {
	position: static !important;
	top: auto !important; left: auto !important;
	right: auto !important; bottom: auto !important;
	overflow: visible !important;
	padding: 0 1.2rem 1.2rem !important;
}
#reward-write-modal-box .sub_top_wrap {
	padding: 1rem 1.2rem 0.4rem;
}
/* 포인트 선택 라벨 가로 배열 보장 */
#reward-write-modal-box .dsp-flex-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0.8rem;
}
#reward-write-modal-box .select-reward-cnt {
	min-width: 110px;
}
/* textarea 높이 축소 */
#reward-write-modal-box #editorContent {
	min-height: 160px !important;
	max-height: 220px !important;
	resize: vertical;
}
/* 선물할 감자 선택(체크)에 따른 css */
.praise_write label.select-reward-cnt:has(input:checked){
	background:var(--graidient-theme);
}
.praise_write .remain-reward-text.count {
	font-weight:700;
	color:var(--theme-color);
}
/* 익명(체크)에 따른 css */
.praise_write label.select-reward-cnt.select-anonymously:has(input:checked){
	box-shadow:var(--msg-box-shadow),inset 0 0 0 2px var(--theme-color);
	background: #f3f4f6;
	transition:border-color 0.5s ease;
}
/* 제목, 내용에 포커스 */
.praise_write input:focus, .praise_write textarea:focus{
	border: 2px solid var(--theme-color);
	transition:border-color 0.5s ease;
}
/* 2026-03-30 / jj_baek / 좌측 lnb 영역 */
:root {
  --reward-lnb-radius: 14px;
  --reward-lnb-border : rgba(0,0,0,0.07);
  --reward-lnb-shadow : 0 2px 12px rgba(0,0,0,0.06);
}
.reward-lnb-info-wrap{margin-top:15px;}
.reward-my-profile{
	border: 1px solid var(--reward-lnb-border);
	border-radius:var(--reward-lnb-radius);
	box-shadow:var(--reward-lnb-shadow);
	animation : profileFadeUp 0.4s ease both;
	display: flex;
    align-items: center;
    gap: 10px;
    padding:10px 14px;
    margin-bottom:10px;
}
@keyframes profileFadeUp {
	0% {
    opacity: 0;
    transform: translateY(12px);
	}
	100% {
    opacity: 1;
    transform: translateY(0);
	}
}
.reward-profile-photo{
	width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #EDE8E3;
    border: 1px solid rgba(0,0,0,0.07);
	overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reward-profile-dept {
	font-size: 10px;
    color: #9b9b9b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reward-status{
	border-radius: var(--reward-lnb-radius);
    border: 1px solid var(--reward-lnb-border);
    box-shadow: var(--reward-lnb-shadow);
    padding: 12px 14px;
    animation: profileFadeUp 0.35s ease 0.08s both;
    margin-bottom:10px;
}
.reward-status-row{display: flex;gap: 8px;}
.status-item{
	flex: 1;
	min-width: 0; /* 자식요소가 flex 1, min-width 0 이면 너비가 동일하고 늘어나지 않음 */
	overflow:hidden;
    background: #f2f2f2;
    border: 1px solid var(--theme-color);
    border-radius: 10px;
    padding: 10px 6px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height:45px;
}
.reward-status-label{font-size: 10px;color: var(--theme-color);font-weight: 500;line-height: 1;}
.reward-point-icon-wrap{display: flex;align-items: center;justify-content: center;gap: 6px;}
.reward-point-icon{
	width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #EDE8E3;
    border: 1px solid var(--theme-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reward-status-val{font-size: 20px;font-weight: 700;color: var(--theme-color-bold);line-height: 1;}
.reward-point-dots{display: flex;gap: 2px;align-items: center;justify-content: center;}
.reward-point-dot{
	width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #EDE8E3;
    border: 1px solid var(--theme-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    cursor: default;
}
.reward-point-dot:not(.used):hover {transform: scale(1.25) rotate(-8deg);}
.reward-point-dot.used{background: rgba(0, 0, 0, 0.04);border-color: rgba(0, 0, 0, 0.08);opacity: 0.3;}
/* 2026-03-31 / jj_baek / 잔여 감자 아이콘 개수 많을 때 compact/wrap/tiny 처리 */
.reward-point-dots.compact .reward-point-dot{width: 16px;height: 16px;border-radius: 4px;}
.reward-point-dots.compact .reward-point-dot:not(.used):hover{transform: scale(1.2) rotate(-8deg);}
.reward-point-dots.wrap{flex-wrap: wrap;align-content: flex-start;}
.reward-point-dots.tiny .reward-point-dot{width: 12px;height: 12px;border-radius: 3px;}
.reward-point-dots.tiny .reward-point-dot:not(.used):hover{transform: scale(1.15) rotate(-8deg);}
.reward-btn-wrap{display: flex;flex-direction: column;gap: 6px;animation: profileFadeUp 0.35s ease 0.12s both;margin-bottom:10px;}
.reward-btn-main{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 13px;
    border-radius: var(--reward-lnb-radius);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: white;
    background: var(--theme-color-bold);
    box-shadow: 0 4px 14px rgba(158, 137, 110, 0.35);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reward-btn-main:hover{filter:brightness(0.8);transform: translateY(-2px);box-shadow: 0 8px 20px rgba(158, 137, 110, 0.4);}
.reward-btn-sub{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    border-radius: var(--reward-lnb-radius);
    border: 1px solid var(--reward-lnb-border);
    cursor: pointer;
    font-size: 11px !important;
    font-weight: 500;
    color: #9b9b9b;
    transition: all 0.15s ease;
}
.reward-btn-sub:hover{
	background: #F5F3F0;
    filter:brightness(0.8);
    border-color: #ddd;
}
.reward-info-card{
    border-radius: var(--reward-lnb-radius);
    border: 1px solid var(--reward-lnb-border);
    box-shadow: var(--reward-lnb-shadow);
    overflow: hidden;
    animation: profileFadeUp 0.35s ease 0.16s both;
}
.reward-info-section{border-bottom: 1px solid var(--reward-lnb-border);}
.reward-info-header{
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.reward-info-dot{width: 5px;height: 5px;border-radius: 50%;background: var(--theme-color-bold);flex-shrink: 0;}
.reward-info-header-left{display: flex;align-items: center;gap: 7px;}
.reward-info-label{font-size: 12px;font-weight: 600;color: #2A2420;}
.reward-info-chevron{font-size: 9px;color: var(--theme-color-bold);transition: transform 0.2s;line-height: 1;}
.reward-info-chevron.open{transform: rotate(180deg);}
.reward-info-body{padding: 0 14px 12px 26px;display:none;}
.reward-info-body.open{display:block;}
.reward-info-body ul{list-style: none;display: flex;flex-direction: column;gap: 6px;padding-inline-start: 0px;margin-block-start:0px;}
.reward-info-body li{font-size: 11px;color: #5C5248;line-height: 1.6;padding-left: 9px;position: relative;}
.reward-info-body li::before{content: '·';position: absolute;left: 0;color: var(--theme-color);font-weight: 700;}
.reward-faq-plus{
	width: 17px;
    height: 17px;
    border-radius: 4px;
    background:#f2f2f2;
    border: 1px solid var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color-bold);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/********************************************************************************************************
 [롯데] 2023-12-27 / LR_DEV_001 / by 조은비 / 메인 포탈 레이아웃 재구성
*********************************************************************************************************/

/* 스크롤 */
/* *::-webkit-scrollbar { width: 10px; height: 10px; } */ /* 스크롤바 전체 */
*::-webkit-scrollbar-thumb { border: 1px solid transparent; background-color: rgba(0, 0, 0, 0.15); background-clip: padding-box; border-radius: 10px; }  /* 스크롤 막대 */
/**::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.2); }*/
*::-webkit-scrollbar-track { /*background-color: rgba(0, 0, 0, 0.04); border-radius: 10px;*/ } /* 스크롤 막대 외부 */
*::-webkit-scrollbar-corner { /*background-color: rgba(0, 0, 0, 0.04);*/ }

/* 기본수정 */
.header.lotterental div.header_wrap { display: flex; align-items: center ; height:71px }
.header.lotterental div.header_wrap div.header_logo_wrap div.header_logo img{ max-width:178px ; height:36px }
.header.lotterental div.header_wrap div.header_logo {padding-left : 30px}
.header.lotterental div.header_wrap div.gnb_nav ul li a{ padding: 0}
.header.lotterental div.header_wrap div.header_logo_wrap { position: relative; top: 0; left: 0; margin-right: 40px}
.header.lotterental div.header_wrap div.gnb_nav{ padding: 0; width: auto; flex-shrink: 0 }

/* [롯데렌탈] 포탈 추가사항 */
.lotterental > .section{ padding: 10px 0 }

.lotterental .btn{ cursor: pointer; border: none; background-color: transparent}
.header.lotterental .header_icon {display: flex; position: relative; top: 0;  right: 20px; margin-left: auto}
.header.lotterental .header_icon div{display: flex;align-items: center; margin:0 3px}
.header.lotterental .header_icon > div:first-child{ margin-right:0 5px; margin-right: 2px}
.header.lotterental .header_icon > div:first-child:after{ content: ""; width: 1px; height:25px; background: rgba(0,0,0,0.10)}
div.header_wrap div.header_icon .eb_btn.btn_header_search {background: url("../img/ico_search.png") no-repeat center center; }
div.header_wrap div.header_icon .eb_btn.btn_header_person{background: url("../img/ico_person_search.png") no-repeat center center; }
div.header_wrap div.header_icon .eb_btn.btn_header_bookmark{background: url("../img/ico_bookmark.png") no-repeat center center; }
div.header_wrap div.header_icon .eb_btn.btn_header_bookmark.onpop{background: url("../img/ico_bookmark_toggle.png") no-repeat center center; }

div.header_wrap div.header_icon .eb_btn.btn_header_mail{background: url("../img/ico_mail.png") no-repeat center center; }
div.header_wrap div.header_icon .eb_btn.btn_header_inbox{background: url("../img/ico_inbox.png") no-repeat center center; }
div.header_wrap div.header_icon .eb_btn.btn_header_calendar{background:  url("../img/ico_calendar.png") no-repeat center center; }
/* 빠른 예약 모달 */
.quick_reserve_wrap { padding: 0 10px; }
.quick_reserve_search { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.quick_reserve_list { margin-top: 5px; }
/* div.header_wrap div.header_icon div.headerCnt{ display: inline-block;} */
/* div.header_wrap div.header_icon div.headerCnt .news { position: absolute; display: block; top: 0px; right: -3px; line-height:16px; min-width:10px; height: 15px; font-size: 10px; font-weight: 600; border-radius: 9px; background: #fff; color: #000; text-indent: 0;padding: 0 3px; font-weight: 700} */


.lotterental .portlet .title_wrap{ position: relative; font-size: 16px; font-weight: bold;  padding: 15px 0 10px 10px;}
.lotterental .portlet .title_wrap .btn.more{right:0px; top:10px;}
/* 포틀릿 */
/* .lotterental { display: flex} */
div.footer {z-index: 10000;position: fixed;width: 100%;bottom: 0;}

.lotterental ul, .lotterental li{ margin: 0; padding: 0; list-style: none}
.lotterental_bg { background-color: #F3F6F9 ; height:100%}
.lotterental .portlet{padding: 0 10px; font-size: 14px}

.lotterental .set_btn{width:100%;text-align: right}
.lotterental .portlet .list_wrap { padding: 0px 10px; overflow-y: auto }	
.lotterental .portlet .list_wrap ul li{ display: flex; margin-bottom:12px; align-items: center }

.list_wrap ul li .title{ font-weight: 600; flex-grow: 1; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.list_wrap ul li.active .title{font-weight:normal; color: #707070;}
.list_wrap ul li .writer, 
.list_wrap ul li .date{ color: #666; margin-left:15px;; flex-shrink: 0 }

.gallery_wrap ul{display: flex; height: 136px; overflow: hidden}
.gallery_wrap .frame{border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 10px; overflow: hidden}
.gallery_wrap .frame img{ width: 100%; height: 100%}
.gallery_wrap .title{ font-size: 12px}

.gallery_wrap .btn_wrap{ position: relative}
.gallery_wrap .btn_wrap .btn{ height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; background:#fff url( "../img/ico_right.png") no-repeat 50%;  position: absolute; border: 1px solid  rgba(0,0,0,0.10); top: -116px}
.gallery_wrap .btn_wrap .btn.pre{ transform: rotate(-180deg); left: 0}
.gallery_wrap .btn_wrap .btn.next{ right: 0}

/*상태*/
.status_wrap { display: flex; flex-shrink: 0; width: 145px; justify-content: space-between; margin-right:15px}
.stmgListStatus{ height: 23px; min-width: 65px; line-height: 21px; color: #fff; box-sizing: border-box;border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.05); text-align: center;padding:0 10px; font-size: 12px;font-weight: bold }
.stmgListStatusPrps{ height: 23px; min-width: 78.4px; line-height: 21px; color: #fff; box-sizing: border-box;border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.05); text-align: center;padding:0 10px; font-size: 12px;font-weight: bold }
.status{ height: 23px; min-width: 45px; line-height: 21px; color: #fff; box-sizing: border-box;border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.05); text-align: center;padding:0 10px; font-size: 12px;font-weight: bold}

.PUB_QUSTN{background-color: #fff; color: #E70014; border: 2px solid #E70014; border-radius : 20px;}/*질문*/
.PUB_PRPS {background-color: #E70014;}/*제안*/
.PUB_TIP{background-color: #f2db68;}/*업무팁*/
.wgwg .PUB_NOTICE{background-color: #548235;}/*공지*/

.SND_ANSWERED{ background-color:#333;}/*최종답변*/
.FST_ANSWERED{ background-color:#06f;}/*중간답변*/
.CREATED{ background-color:#eee ; color:#303030 ;}/*답변대기*/
.REOPENED{ background-color:#eee; color:#303030 }/*재검토*/
.EMP_CLOSED{ background-color:#333 }/*최종완료*/
.ORG_CLOSED{ background-color:#333 }/*최종완료*/
.REVIEW{ background-color:#06f }/*검토*/
.IMPM_COMPLETE{ background-color:#333 }/*개선완료*/
.IMPM_PROGRESS{ background-color:#06f }/*개선진행*/
.CURR_KEEP{ background-color:#333 }/*현행유지*/
.ALL_ANSWERED{ background-color:#333;} /* 2024-03-19 / ahhyeon.lee / 렌탈 요청으로 추가 전체 답변 추가 */

.CLUB{ background-color:#54C1FB;}/*동호회*/
.CCM{ background-color:#54C1FB;}/*CCM*/
.SHARING{ background-color:#FFAE21 }/*나눔*/
.MENTORING{ background-color:#9b9b9b }/*멘토링*/
.PUB_NOTICE{ background-color:#11CE8C }/*공지*/
.LEADER_DAY{ background-color:#9b9b9b }/*리더데이*/
.FREE{ background-color:#FF505A }/*자유*/
.YOUNG_CHA {background-color: #9b9b9b;} /* 2024-03-19 / ahhyeon.lee / 렌탈 요청으로 추가 */
.ACTIVITY_REVIEW {background-color: #9b9b9b;}/* 2024-03-19 / ahhyeon.lee / 렌탈 요청으로 추가  */
 
.FREE_creator, .SHARING_creator, .PUB_NOTICE_creator { width: 58px; } /*자유, 나눔, 공지*/
.CLUB_creator, .MENTORING_creator, .YOUNG_CHA_creator { width:58px; }/*동호회, 멘토링, 영~차*/
.LEADER_DAY_creator, .ACTIVITY_REVIEW_creator { width:46px; }/*리더데이, 활동후기*/

.favorite{width: 20px; height: 20px; font-size: 0; background: url("../img/favorite_off.png") no-repeat center}
.favorite.active { background: url("../img/favorite_on.png") no-repeat center}

/* [롯데] 2024-01-04 / LR_DEV_009 / by 정유리 / Fun 충전소 포틀릿 */
 #favorite{width: 20px; height: 20px; font-size: 0; background: url("../img/favorite_off.png") no-repeat center;position: absolute; top: 80px; right: 5px; border: none;}
 #favoriteactive {width: 20px; height: 20px; font-size: 0; background: url("../img/favorite_on.png") no-repeat center; position: absolute; top: 80px; right: 5px;border: none;}

/*그리드영역*/
.section.grid .portlet {width: auto; height: auto;}
.section.grid{ display: grid; grid-template-columns: repeat(2, 440px); grid-auto-rows: 180px; grid-gap: 20px; }


/*와글와글스토밍*/
.lotterental .portlet.storming {  grid-column: span 2;}
.lotterental .portlet.storming .list_wrap { height:130px; }
.lotterental .portlet.storming .list_wrap  ul li .title.wgwg { height: 20px;}
.lotterental .portlet.storming .list_wrap  ul li .date { height: 20px; }
.lotterental .portlet.storming .list_wrap  ul li .count_wrap { display: flex;}
.lotterental .portlet.storming .list_wrap  ul li .count_wrap div.count { display: flex; width: 65px;}
.lotterental .portlet.storming .list_wrap  ul li .count_wrap div.count.cmnt { width: 45px;}
.lotterental .portlet.storming .list_wrap  ul li .count_wrap div.count.like { width: 45px;}
.lotterental .portlet.storming .list_wrap  ul li .count_wrap div.count img { padding-right: 5px; }
.lotterental .portlet.storming .list_wrap  ul li .count_wrap div.count div { display: inline-block; text-align: left; font-weight: normal; color: #B5B5B5;}

/* [롯데] 2024-01-03 / LR_DEV_008 / by 정유리 / 헬프클라우드 포틀릿 */
/*Help Colud*/
#roller1 {animation: cloudRollingleft1 calc(var(--cloudSpeed) * 1s) linear infinite; }
#roller2 { animation: cloudRollingleft2 calc(var(--cloudSpeed) * 1s) linear infinite; }
.lotterental .portlet.help_colud {grid-column: span 2;}
.lotterental .portlet.help_colud .gallery_wrap ul li {width: 156px;padding-right: 20px;}
.lotterental .portlet.help_colud .frame{width: 156px; height: 100px; margin-bottom: 5px}
.lotterental .portlet.help_colud .title{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; line-height: 1.2;}
.lotterental .portlet.help_colud .gallery_list{display:flex; overflow: hidden; width: 857px;margin: auto;}
.lotterental .portlet.help_colud .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; position: absolute; border: 1px solid  rgba(0,0,0,0.10); top: 91px;}
.lotterental .portlet.help_colud .title_wrap .btn.more{right:0px; top:10px; background: url(../img/ico_more.png) no-repeat 50%;}
.lotterental .portlet.help_colud .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; background: #fff url(../img/ico_right.png) no-repeat 50%;  position: absolute; border: 1px solid  rgba(0,0,0,0.10); top:83px;}
.lotterental .portlet.help_colud .rollingButtonRight{cursor: pointer;z-index: 1; right : 10px;}
.lotterental .portlet.help_colud .rollingButtonLeft{cursor: pointer; z-index: 1; left : 10px; transform: rotate(-180deg);}
.lotterental .portlet.help_colud .frame {width: 151px; height: 100px;margin-bottom: 5px;}

/* REQ115038 ilyeong */
#roller3 {animation: cloudRollingleft3 calc(var(--cloudSpeed) * 1s) linear infinite; }
#roller4 { animation: cloudRollingleft4 calc(var(--cloudSpeed) * 1s) linear infinite; }
.lotterental .portlet.rental_awards {grid-column: span 1;}
/* .lotterental .portlet.rental_awards .gallery_wrap ul li {width: 118px;padding-right: 20px;} */
.lotterental .portlet.rental_awards .gallery_wrap ul li {margin: 0 10px; width: 118px;}
.lotterental .portlet.rental_awards .frame{width: 118px; height: 100px; margin-bottom: 5px}
.lotterental .portlet.rental_awards .title{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; line-height: 1.2;}
.lotterental .portlet.rental_awards .gallery_list{display:flex; overflow: hidden; width: 417px;margin: auto;}
.lotterental .portlet.rental_awards .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; position: absolute; border: 1px solid  rgba(0,0,0,0.10); top: 91px;}
.lotterental .portlet.rental_awards .title_wrap .btn.more{right:0px; top:10px; background: url(../img/ico_more.png) no-repeat 50%;}
.lotterental .portlet.rental_awards .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; background: #fff url(../img/ico_right.png) no-repeat 50%;  position: absolute; border: 1px solid  rgba(0,0,0,0.10); top:83px;}
.lotterental .portlet.rental_awards .rollingButtonRight{cursor: pointer;z-index: 1; right : 10px;}
.lotterental .portlet.rental_awards .rollingButtonLeft{cursor: pointer; z-index: 1; left : 10px; transform: rotate(-180deg);}
/*.lotterental .portlet.rental_awards .frame {width: 151px; height: 100px;margin-bottom: 5px;}*/

/* REQ115038 Award portlets v2 2024.11.06 ilyeong*/
.lotterental .portlet.rental_awardsV2 .gallery_wrap ul li{ margin: 0 10px; width: 118px; position: relative} 
.lotterental .portlet.rental_awardsV2 .frame{ width: 118px; height: 100px; margin-bottom: 5px}
.lotterental .portlet.rental_awardsV2 .title{ display: flex; justify-content: space-between; align-items: center}
.lotterental .portlet.rental_awardsV2 .title .creator{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; text-align:right;display: inline-block;}
.lotterental .portlet.rental_awardsV2 .rollingButtonRight{cursor: pointer;z-index: 2;right : 0;}
.lotterental .portlet.rental_awardsV2 .rollingButtonLeft{cursor: pointer;z-index: 2;}
.lotterental .portlet.rental_awardsV2 .award_gallery_list{display:flex; overflow: hidden;}
.lotterental .portlet.rental_awardsV2 .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; background:#fff url( "../img/ico_right.png") no-repeat 50%;  position: absolute; border: 1px solid  rgba(0,0,0,0.10); top: 83px;}
.lotterental .portlet.rental_awardsV2 .awardRollingButtonRight{cursor: pointer; z-index: 2;right : 8px;}
.lotterental .portlet.rental_awardsV2 .awardRollingButtonLeft{cursor: pointer; z-index: 2;transform: rotate(-180deg);}
.lotterental .portlet.rental_awardsV2 .title_wrap .btn.more{right:0px; top:10px; background: url(../img/ico_more.png) no-repeat 50%;}

/*Fun 충전소*/
.lotterental .portlet.fun .gallery_wrap ul li{ margin: 0 10px; width: 118px; position: relative} 
.lotterental .portlet.fun .frame{ width: 118px; height: 100px; margin-bottom: 5px}
.lotterental .portlet.fun .title{ display: flex; justify-content: space-between; align-items: center}
.lotterental .portlet.fun .title .creator{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; text-align:right;display: inline-block;}
.lotterental .portlet.fun .rollingButtonRight{cursor: pointer;z-index: 2;right : 0;}
.lotterental .portlet.fun .rollingButtonLeft{cursor: pointer;z-index: 2;}
.lotterental .portlet.fun .fun_gallery_list{display:flex; overflow: hidden;}
.lotterental .portlet.fun .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; background:#fff url( "../img/ico_right.png") no-repeat 50%;  position: absolute; border: 1px solid  rgba(0,0,0,0.10); top: 83px;}
.lotterental .portlet.fun .funRollingButtonRight{cursor: pointer; z-index: 2;right : 8px;}
.lotterental .portlet.fun .funRollingButtonLeft{cursor: pointer; z-index: 2;transform: rotate(-180deg);}
.lotterental .portlet.fun .title_wrap .btn.more{right:0px; top:10px; background: url(../img/ico_more.png) no-repeat 50%;}

/*해피리워드*/
.lotterental .portlet.reward .gallery_wrap ul li{ margin: 0 11px; width:110px;} 
.lotterental .portlet.reward .happy_gallery_list{display:flex; overflow: hidden;}
.lotterental .portlet.reward .user{ display: flex; align-items: center}
.lotterental .portlet.reward .user div span{ display: block} 
.lotterental .portlet.reward .title{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; line-height: 1.2; margin-top: 15px; width: 109px;}
.lotterental .portlet.reward strong{ display: block; margin-bottom: 2px}
.lotterental .portlet.reward .frame { width: 35px; height: 35px; border-radius: 35px; flex-shrink: 0; margin-right: 8px}
.lotterental .portlet.reward .writer{ font-size: 12px; margin-top: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; width: 113px; white-space: nowrap;}
.lotterental .portlet.reward .btn{height: 26px; width: 26px; padding: 0; border-radius: 20px;  font-size: 0; text-indent: -9999px; background:#fff url( "../img/ico_right.png") no-repeat 50%;  position: absolute; border: 1px solid  rgba(0,0,0,0.10); top:83px;}
.lotterental .portlet.reward .happyRollingButtonRight{cursor: pointer;z-index: 1; right : 10px;}
.lotterental .portlet.reward .happyRollingButtonLeft{cursor: pointer; z-index: 1; left : 10px; transform: rotate(-180deg);}
.lotterental .portlet.reward .title_wrap .btn.more{right:0px; top:10px; background: url(../img/ico_more.png) no-repeat 50%;}

/* 해피리워드 하단 메모 */
div.happy_header_mymenu_wrap { z-index: 2; position: absolute; top:97px; margin-left: -115px; }
div.happy_header_mymenu { width: 250px; padding: 20px 20px 13px 20px; border: 1px solid #c8c8c8; box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-sizing: border-box; background: #fff; text-align: center; border-radius: 10px; margin-bottom: 15px;}
div.happy_header_mymenu:before { content: ""; position: absolute; display: block; right: 73px; top: -8px; width: 14px; height: 14px; border: 1px solid #c8c8c8; border-width: 1px 0 0 1px ; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff; }
.lotterental .portlet.reward .happyAddInfo{cursor: pointer;}
.lotterental .portlet.reward .happyImage-wrap{cursor: pointer; margin-left: 14px;}
.lotterental .portlet.reward .addInfoTitle{display: -webkit-box; -webkit-box-orient: vertical; line-height: 1.2; margin-top: 20px; text-align: left; word-wrap: break-word;font-size : 15px; color: #949494;}
.lotterental .portlet.reward .addInfoTitle span{font-size : 13px; margin-top:10px;}
.lotterental .portlet.reward .addInfoTitle strong{margin-bottom : 7px;color: #949494;}
.lotterental .portlet.reward .recomName{text-align: left; font-weight: bold; font-size: 15px;color: #949494;}
.lotterental .portlet.reward .addInfoWriter{ font-size: 12px; margin-top: 28px;color: #949494; text-align: right; font-weight: 800;}
.lotterental .portlet.reward .happyAddInfo .user .branch{max-width:180px;margin-top: 7px; box-sizing: border-box;border-radius: 26px;background: #333333;color: #fff;padding: 0 12px;font-size:11px;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}
.lotterental .portlet.reward .happyAddInfo a {font-size: 13px; color: #a39d9d; font-weight: 800; color: #9f9f9f;}
.lotterental .portlet.reward .happyAddInfo hr {margin : 10px 0; height: 1px; opacity: 0.2;}
.lotterental .portlet.reward .happyAddInfo .user .frame { width: 45px; height: 45px; border-radius: 35px; flex-shrink: 0; margin-right: 12px}
.lotterental .portlet.reward .happyAddInfo .icon_cross_bk { width: 4px !important; height: 8px !important; border: 0; background-position: center; padding:0px 3px 12px; background-repeat: no-repeat; position:absolute; margin-left:100px; margin-top:-10px; }
/*경조사*/
.lotterental .portlet.family_event .list_wrap a{ display: flex; width: 100%}
.lotterental .portlet.family_event .list_wrap .frame { width: 35px; height: 35px; border-radius: 35px; flex-shrink: 0; margin-right: 8px; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 35px; overflow: hidden; }

.lotterental .portlet.family_event .title{ display: flex; flex-direction: column; flex-grow: 1; margin-left: 15px}
.lotterental .portlet.family_event .name_ccr { color: #666; font-size: 12px; font-weight: normal; margin-top: 5px}
.lotterental .portlet.family_event .link{  overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;; width: 100%}
.lotterental .portlet.family_event .list_wrap { height:136px;}	
.lotterental .portlet.family_event .list_wrap ul li{margin-bottom: 13px}
.lotterental .portlet.family_event .event_state{ flex-shrink:0; margin-right: 4px }

/*바로가기*/
.lotterental .portlet.link_service .btn_group_wrap:before{ right:219px}
.lotterental .portlet.link_service .btn_group_wrap{ margin-top:15px; margin-bottom: 5px ; margin: 12px 0;position: relative }
.lotterental .portlet.link_service .btn_group_wrap .btn { height : 30px}
.lotterental .portlet.link_service .ui_wrap{ height : 105px}
.lotterental .portlet.link_service ul { display: grid; grid-template-columns: repeat(6, 65px); grid-auto-rows:60px; grid-gap:5px; margin:-5px auto }
.lotterental .portlet.link_service ul a{ display: block; text-align: center; width: 100%}

/* REQ114385 ux/ui 추가개선 요청 - 포틀릿 상하 사이즈 조절, 포상포틀릿 추가 2024.10.24 ilyeong */
.lotterental .portlet.link_service_mini .btn_group_wrap:before{ right:219px}
.lotterental .portlet.link_service_mini .btn_group_wrap{ margin-top:15px; margin-bottom: 5px ; margin: 12px 0;position: relative }
.lotterental .portlet.link_service_mini .btn_group_wrap .btn { height : 30px}

.lotterental .portlet.link_service_mini .ui_wrap{ height : 307px}
.lotterental .portlet.link_service_mini ul { display: grid; grid-template-columns: repeat(6, 65px); grid-auto-rows:60px; grid-gap:5px; margin:-5px auto }
.lotterental .portlet.link_service_mini ul a{ display: block; text-align: center; width: 100%}


/*제목만 나오는 게시판*/
.lotterental .portlet.info_bbs  { width:440px; height: 182px; padding: 0 10px; }
.lotterental .portlet.info_bbs .list_wrap { height:130px }

/* 게시글 즐겨찾기 */
/* [롯데] 2023-12-27 / LR_DEV_002 / by 이기주 / 게시물 즐겨찾기 기능 */
.eb_btn.icon_btn.icon_todo_imp.cef_favorbtn {padding-left: 25px; margin-right: 0px}
div.todo_wrap .todo_list ul > li > .cef_favorspan { display: inline-block; max-width: 230px; margin-bottom: 13px; font-size: 14px;word-break: break-word; cursor: pointer; }


/*탭형 게시판 포틀릿 */
.icon_portlet_set_btn { width: 13px; height: 13px; background: url("../../common/image/common/icon_cw_set.png") no-repeat center; }

.tabs_bbs .bbsNm{ width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  display: block;}
/* REQ114385 ux/ui 추가개선 요청 - 포틀릿 상하 사이즈 조절, 포상포틀릿 추가 2024.10.24 ilyeong */
.tabs_bbs_mini .bbsNm{ width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  display: block;}
.lotterental .tabs_bbs_mini .bbsNm{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  display: block;}

.portlet_user_setting .cef_sub_setting{width: 100%; margin-top: 30px; border-radius: 2px; background: #f2f6f8; box-sizing: border-box;padding: 15px}
.portlet_user_setting .cef_sub_setting > table { width: 100%; }
.portlet_user_setting .cef_sub_setting > table > tbody > tr > th { width: 70px; height: 34px;  font-weight: normal; color: #707070; text-align: left; }
div.portlet_setting_wrap.cef_portlet_setting_wrap {border: none;}
div.cef_portlet_info { position: relative; z-index: 55; overflow-y: auto; box-sizing: border-box; background: #ffffff; font-size: 16px;}
div.cef_portlet_info .sub_setting { width: 100%; border-radius: 2px; background: #f2f6f8; box-sizing: border-box; padding: 15px; }
div.cef_portlet_info .sub_setting .btn_wrap { margin: 0; margin-top: 10px;}
div.cef_contents_wrap { display: table; width: 100%; box-sizing: border-box; padding: 0 20px 0 20px; table-layout: fixed; }
div.cef_portlet_info .sub_setting table {border-spacing: 0 10px;}


/*포탈중앙정렬*/
.contents_wrap.lotterental_bg.TYPE_D{ padding:0}
.main_wrap_D {margin: 0 auto; width: 1820px; position: relative}
.contents_wrap.lotterental_bg.TYPE_E{ padding:0}
.main_wrap_E {margin: 0 auto; width: 1820px; position: relative}
/*.div_mdi_content { min-width:1820px !important;}*/

/* GNB수정*/
div.header_menu_wrap.lotterental {background-color: transparent !important}
div.header_menu_wrap.lotterental div.header_list div.gnb_more_menu .menu_title {padding-left:10px; background-image: none; border-bottom: 2px solid rgba(255, 255, 255, 0.80);; padding-bottom: 16px; font-size: 17px;  font-weight: bold;}
div.header_menu_wrap.lotterental div.header_list div.gnb_more_menu ul li a{font-size: 15px}
div.header_menu_wrap.lotterental div.header_list div.gnb_more_menu + div.gnb_more_menu{border-left: 1px solid rgba( 255, 255, 255, 0.0)}
div.header_menu_wrap.lotterental div.header_list div.gnb_more_menu ul{    padding-left: 10px}
div.header_menu_wrap.lotterental div.header_list { position: relative;min-height: 640px;padding: 20px 30px 40px 0;border-top: 1px solid rgba(0, 0, 0, 0.10);background-image:url("../img/bgGnb.png"); background-position: -80px bottom; background-repeat: no-repeat; background-size: 492px 400p}

/*메뉴셋팅버튼*/
div.header_menu_wrap.lotterental div.header_menu_bottom{position: absolute; bottom: 0; left: 0;border-top: 1px solid rgba( 255, 255, 255, 0)}
div.header_menu_wrap.lotterental div.header_menu_bottom .edit_none { padding-left: 45px ;text-align: left; background: url(../../common/image/layout/icon_gnb_edit.png) no-repeat 30px center;}
div.header_menu_wrap.lotterental div.header_menu_bottom .eb_btn.btn_gnb.btn_editing {  border: none;  padding: 0; background: none}

div.header_menu_wrap.lotterental div.header_menu.edit_mode .edit_active { display: flex;padding-left: 30px}
div.header_menu_wrap.lotterental div.header_menu_bottom .edit_notice {position: relative}
div.header_menu_wrap.lotterental div.menu_wrap{position: relative; display: table; margin: auto}


/* [롯데] 2024-01-25 / LR_DEV_020 / by 조은비 / 트리 구조 css 변경 */
/*롯데렌탈 왼쪽메뉴용 트리*/
div.lotterental_left_tree ul{margin:0; padding:0; list-style: none; font-size: 13px;}
div.lotterental_left_tree li{margin:0; padding:0 0 0 20px; list-style: none}
div.lotterental_left_tree > ul > #folder0 { margin: 0; }
div.lotterental_left_tree > ul > li {padding: 0}
/* div.eb_tree > ul ul { display: block; margin: 0; } */
/* div.eb_tree > ul ul ul { display: none; } */

div.lotterental_left_tree > ul > li > ul > li {border-bottom: 1px solid #EEE; padding-left: 15px;font-size: 14px; }
div.eb_tree ul > li:last-child > ul > li:last-child {border-bottom: none;}


div.lotterental_left_tree > ul > li .tree_item {line-height: 33px}
div.lotterental_left_tree .tree_item{width: 100%; position: relative; display: flex; flex-direction: row-reverse; align-items: center; padding: 0; }
div.lotterental_left_tree .tree_item a{width: 100%; flex-grow: 1; line-height: inherit; margin-left:5px;}
div.lotterental_left_tree .tree_item > .icon_tree,
div.lotterental_left_tree .tree_item > .icon_tree_bbs { display: none !important; }
div.lotterental_left_tree .tree_item > .icon_tree_depth { margin: 0; }

div.lotterental_left_tree .icon_tree_depth{ display: block; width: 24px; height: 24px; cursor: pointer; flex-shrink: 0; }
div.lotterental_left_tree .icon_tree_depth.close { background-image: url( "../img/arrow_tree.png"); }
div.lotterental_left_tree .icon_tree_depth.open { background-image: url( "../img/arrow_tree.png"); transform: rotate(90deg);}

/* 메가메뉴 팝업 사용시 css */
div.lotterental div.header_list div.gnb_more_menu {display: table-cell;height: 200px;width: 240px;padding-left: 30px;box-sizing: border-box;}

div.type_de .header_wrap {min-width : 1920px} 
div.type_de div.layout > div.header {z-index: 1000;position: relative;min-width: 1920px;min-height: 56px;box-sizing: border-box;} 
.type_de.layout { width: 100%; height: 100%; min-width: 1920px;}
div.type_de .div_mdi_content {position: absolute;width: 100%; top: 56px;bottom: 0px; min-width: 1920px;}

div.title_wrap.darkmode{color:#fff}
div.potato_count.darkmode{color:#fff}

/* 2024-03-22 / jj_baek / 다크모드 콘텐츠 영역 백그라운드 변경하는 토글버튼 */
.toggle_dark_wrap{
	width: 50px;
    height: 26px;
    background-color: transparent;
    margin-left: auto;
    margin-top: -15px;
    margin-right: 5px;
}
.toggle_dark_wrap_pop{
	width: 50px;
    height: 26px;
    background-color: transparent;
    margin-left: auto;
    margin-top: 5px;
    margin-right: 5px;
}
.toggle_checkbox{
	opacity:0;
	position: absolute;	
}
.toggle_checkbox_label{
	background-color: #111;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0px 1px 0px 0px rgba(127,127,125,0.6);
    transition: background-color 3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.toggle_checkbox:checked + .toggle_checkbox_label .toggleball {
    transform: translateX(24px);
}
.toggle_checkbox:checked + .toggle_checkbox_label{
    background-color:#cccccc;
    transition: background-color 3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.fa-moon { 
	color: #f1c40f;
	font-weight:900;
}
.fa-moon:before {
    content: "🌙";
}
.fa-sun {
    color: #f39c12;
    font-weight:900;
}
.fa-sun:before {
    content: "☀️";
}
.toggleball{
	background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
    transition: transform 0.4s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.darkmode-textarea-hidden{
	opacity:0;
}
.grayscale-color-4darkmode{
	color:#ebebeb !important;
	background-color:transparent !important;
}
table.grayscale-color-4darkmode{
	border-color:#ebebeb !important;
}
tr.grayscale-color-4darkmode{
	border-color:#ebebeb !important;
}
td.grayscale-color-4darkmode{
	border-color:#ebebeb !important;
}
/* 2024-04 / ahhyeon.lee / 개인 환경 설정 내 Google OTP 기능 */
.gotp_text { width:350px;height:18px; background-color:#f5f5f5; font-size:13px; vertical-align:middle; padding:6px 10px 4px 10px; margin:0 5px 0 0; color:black; border: 1px solid #d5d5d5;}
.gotp_div { display:inline-block; float:left;}
.darkmode .gotp_text { background-color: #252525 !important;color:#E0E0E0;border: 1px solid #3f3f3f !important;}
.gotp_description{font-size:13px;color:black; float:left;display:inline-block;vertical-align:center;padding:6px 10px 0 10px;}
.darkmode .gotp_description{font-size:13px;color:#fff; float:left;display:inline-block;vertical-align:center;padding:6px 10px 0 10px;}

/* [롯데] 2024-03-21 / LR_DEV_028 / by 정유리 / 챗봇 기능 개발 */
/* 2024-04-26 / jj_baek / 아이멤버 아이콘 조정, div wrapper 기준으로 동작하도록 수정 */
div .chat_bot{
	/* div wrapper */
	border: none;
	border-radius : 5px;
    height: 0px; /* ->800px */
    width: 60px; /* 최소사이즈 :아이콘사이즈(60px) ->  450px */
    background-color: #FFF;
    z-index: 1000;
    position: fixed;
    right: 20px;
    bottom: 40px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.darkmode div .chat_bot{
	/* div wrapper */
	border: none;
	border-radius : 5px;
    height: 0px; /* ->800px */
    width: 60px; /* 최소사이즈 :아이콘사이즈(60px) ->  450px */
    background-color: #262626;
    z-index: 1000;
    position: fixed;
    right: 20px;
    bottom: 40px;
}
.chat_bot .chat_bot_btn{
	/* 닫기 버튼 */
	display: block; 
	right: 0px; 
	width:35px; 
	height:35px; 
	border: 0px; 
	z-index: 9999; 
	position: absolute; 
	cursor: pointer;
	background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;
	/*animation: anim_fadedown 0.5s forwards;*/
	transform:scale(0);
	top: -40px;
    background-color: white;
    border-radius: 50%;
}
/* 닫기 버튼 */
.chat_bot .btnShow{
	animation: anim_fadedown 0.5s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chat_bot .btnClose{
	animation: anim_fadeup 0.5s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes anim_fadedown{
	0%{opacity:0;transform: translateY(-20px);}
	100%{opacity: 1;transform: translateY(0) scale(1);}
}
@keyframes anim_fadeup{
	0%{opacity: 1;transform: translateY(0) scale(1);}
	100%{opacity:0;transform: translateY(-20px) scale(0);}
}
.chat_bot .chat_bot_iframe {
	display: block; 
	/* bottom: 70px;
	right: 60px; */
	width:100%; 
	height:100%; 
	border: none; 
	z-index: 9998; 
	position: relative; 
	background-color:#FFF;
	border-radius : 5px;
}
.darkmode .chat_bot .chat_bot_iframe {
	display: block; 
	/* bottom: 70px;
	right: 60px; */
	width:100%; 
	height:100%; 
	border: none; 
	z-index: 9998; 
	position: relative; 
	background-color:#262626;
	border-radius : 5px;
}
.chat_bot .chat_bot_img{
	position:absolute; 
	cursor:pointer; 
	width:60px; 
	z-index:300; 
	border-radius: 50% 50% 50% 0;
	bottom: 0px; 
	right: 0px; 
	filter: drop-shadow(2px 1px 5px darkgrey); /*그림자*/
	transition:0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.chat_bot .chat_bot_img:hover{
	transition:0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	filter: drop-shadow(0px 0px 0px black);
}
.chat_bot .chat_bot_img.hide{
	animation: anim_icon_fadedown 0.4s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chat_bot .chat_bot_img.show{
	animation: anim_icon_fadeup 0.4s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes anim_icon_fadedown{
	0%{opacity:1;transform: translateY(0);}
	100%{opacity: 0;transform: translateY(70px);}
}
@keyframes anim_icon_fadeup{
	0%{opacity:0;transform: translateY(70px);}
	100%{opacity: 1;transform: translateY(0px);}
}
.chat_bot .ifr_show{
	animation: anime_aimember_show 0.5s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chat_bot .ifr_hide{
	animation: anime_aimember_disappear 0.5s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes anime_aimember_show {
  0% {transform-origin: 50% 50%; /*기준점 중심*/transform: scale(0, 0);}
  100%{transform-origin: 50% 50%;transform: scale(1, 1);}
}
@keyframes anime_aimember_disappear {
  0% {transform-origin: 50% 50%;transform: scale(1, 1);filter: brightness(1);}
  50%{transform-origin: 50% 50%; /*기준점 중심*/transform: scale(1, 0.01);filter: brightness(0);}
  100%{transform-origin: 50% 50%; /*기준점 중*/transform: scale(0.005, 0);filter: brightness(0);}
}

.aimb_div_show{
	animation: open_aimb_div 0.8s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.aimb_div_hide{
	animation: close_aimb_div 0.8s forwards;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
:root {
  --aimember_div_height_percent: 90%;
}
@keyframes open_aimb_div{
	from{height:0px;width:60px;}
	to{height:var(--aimember_div_height_percent);width:450px;}
}
@keyframes close_aimb_div{
	from{height:var(--aimember_div_height_percent);width:450px;}
	to{height:0px;width:60px;}
}
@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

.colorCode{
	border:0; padding:0; border: 1px solid #d5d5d5; background: white;
}
.colorCode::-webkit-color-swatch{
	border: none;
}

/* 2024-04 / ahhyeon.lee / 윈도우 배율에 따라 챗봇 높이 조절 
   2024-04-29 / jj_baek / div, iframe처리 변경으로 div 높이를 %로 처리해서 미디어 쿼리는 주석처리 함
*/
/*
@media (max-height:900px) and (min-height:800px) {
	.chat_bot .chat_bot_btn{display: block; bottom: 830px; right: 65px; width:35px; height:35px; border: 0px; z-index: 9999; position: fixed; cursor: pointer;background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;}
	.chat_bot .chat_bot_iframe {display: block; bottom: 70px; right: 60px; width:450px; height:700px; border: 0px; z-index: 9998; position: fixed; cursor: pointer;}
	.chat_bot .chat_bot_img{position:absolute; cursor:pointer; width:60px; z-index:300; border-radius: 50%;}
}
@media (max-height:820px) and (min-height:780px)  {
	.chat_bot .chat_bot_btn{display: block; bottom: 830px; right: 65px; width:35px; height:35px; border: 0px; z-index: 9999; position: fixed; cursor: pointer;background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;}
	.chat_bot .chat_bot_iframe {display: block; bottom: 70px; right: 60px; width:450px; height:620px; border: 0px; z-index: 9998; position: fixed; cursor: pointer;}
	.chat_bot .chat_bot_img{position:absolute; cursor:pointer; width:60px; z-index:300; border-radius: 50%;}
}
@media (max-height:780px) and (min-height:700px)  {
	.chat_bot .chat_bot_btn{display: block; bottom: 830px; right: 65px; width:35px; height:35px; border: 0px; z-index: 9999; position: fixed; cursor: pointer;background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;}
	.chat_bot .chat_bot_iframe {display: block; bottom: 70px; right: 60px; width:450px; height:570px; border: 0px; z-index: 9998; position: fixed; cursor: pointer;}
	.chat_bot .chat_bot_img{position:absolute; cursor:pointer; width:60px; z-index:300; border-radius: 50%;}
}
@media (max-height:700px) and (min-height:650px) {
	.chat_bot .chat_bot_btn{display: block; bottom: 830px; right: 65px; width:35px; height:35px; border: 0px; z-index: 9999; position: fixed; cursor: pointer;background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;}
	.chat_bot .chat_bot_iframe {display: block; bottom: 70px; right: 60px; width:450px; height:510px; border: 0px; z-index: 9998; position: fixed; cursor: pointer;}
	.chat_bot .chat_bot_img{position:absolute; cursor:pointer; width:60px; z-index:300; border-radius: 50%;}
}
@media (max-height:650px) and (min-height:600px) {
	.chat_bot .chat_bot_btn{display: block; bottom: 830px; right: 65px; width:35px; height:35px; border: 0px; z-index: 9999; position: fixed; cursor: pointer;background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;}
	.chat_bot .chat_bot_iframe {display: block; bottom: 70px; right: 60px; width:450px; height:480px; border: 0px; z-index: 9998; position: fixed; cursor: pointer;}
	.chat_bot .chat_bot_img{position:absolute; cursor:pointer; width:60px; z-index:300; border-radius: 50%;}
}
@media (max-height:600px) {
	.chat_bot .chat_bot_btn{display: block; bottom: 830px; right: 65px; width:35px; height:35px; border: 0px; z-index: 9999; position: fixed; cursor: pointer;background: url(../../common/image/popup/btn_cross_bk.png) no-repeat center;}
	.chat_bot .chat_bot_iframe {display: block; bottom: 70px; right: 60px; width:450px; height:430px; border: 0px; z-index: 9998; position: fixed; cursor: pointer;}
	.chat_bot .chat_bot_img{position:absolute; cursor:pointer; width:60px; z-index:300; border-radius: 50%;}
} 
*/

.btn_cst_for_account{
  background-color:#818182 !important;
  border:none;
  color:#FFF;
}
.btn_cst_for_account:first-child{
  border-radius:5px 0 0 5px !important;
}
.btn_cst_for_account:last-child{
  border-radius:0 5px 5px 0 !important;
}
.btn_cst_for_account:active{
  background-color:#818182 !important;
  border:none;
  color:#FFF;
  font-weight:bold;
}
.btn_glint_hover{
  overflow:hidden;
}
.btn_glint_hover:after{
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 5;
}
.btn_glint_hover:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
/* 2024-07-16 /jj_baek / 이노베이트 날씨 포틀릿 */
.weather_panel{height: 80px;background-color: rgba(0,0,0,0.2);color: rgba(255, 255, 255, 0.56);}
.weather_panel_title{padding-top: 15px;}
.weather_panel_title_span{font-weight: 600;}
.weatherlink_wrapper{padding-top: 10px;display: flex;}
.weatherlink_child{flex:1;}
.weatherlink_child_span{cursor:pointer;transition:all 0.6s ease-out;}
.weatherlink_child_span:hover{text-decoration:underline;font-weight:800;transition:all 0.2s ease;}

.weatherpop_notice_area{position: absolute;bottom: 10px;padding-left: 15px;}
.weatherpop_notice_wrapper{	
	border: 1px solid rgba(6, 44, 241, 0.46);
	background-color: rgba(7, 73, 149, 0.1);
	box-shadow: 0px 0px 2px #0396ff;
	color: #0396ff;
	transition: 0.5s;
	cursor: pointer;
	padding: 5px 10px 5px 10px;
	border-radius: 5px;
	font-weight: 600;
}
.weatherpop_notice_wrapper:hover{background-color: rgba(7, 73, 149, 0.3);transition:all 0.3s ease;}
.emoji_warning{font-style:normal;animation: flash 2s ease infinite;}
.emoji_warning:before{content:"⚠️";}
@keyframes flash{
	0%, 100%, 50% {opacity: 1;}
	25%, 75% {opacity: 0;}
}

/* 2024-08-02 / jj_baek / 이노베이트 안전팀 요청 날씨 팝업 지역 링크 */
.weather_location_area{ position: absolute; color: #FFF;width: 250px;display: flex;justify-content: center;align-items: flex-end;top: 40%;right: 25%;}
.weather_location_link{ flex: 1;text-align: center;transition:all 0.5s ease;cursor:pointer;}
.weather_location_link_selected:before{
	display: block;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: relative;
    background-color: #FFF;
    top: -5px;
    left: 50%;
 }
.weather_location_link:hover{text-decoration:underline;transition:all 0.2s ease;}

/* 2024-07-19 / jj_baek / 스티커 */
:root {
        --card_height: 350px;
        --card_width: 250px;
        --transition_bounce : cubic-bezier(.3, .7, .4, 1.5); /* 빠운스 느낌 */
        --transition_smooth : cubic-bezier(.9, 0, .33, 1); /* 슈욱 느낌 */
}
.sticker_background_dimm{
	width: 100%;
	height: 100%;
	background-color: transparent;
	position: fixed;
}
.dimm_off{
	transition:all 0.5s var(--transition_smooth);
	z-index: -1;
}
.dimm_on{
	z-index: 9;
	background-color: rgba(0,0,0,0.5);
	transition:all 0.5s var(--transition_smooth);
}
.sticker_area{justify-content: center;display: flex;margin-top: 4px;margin-bottom: -20px;/* 스티커 하단 eb_table의 margin-top이 있어서 조정함 */}
.sticker_area_hidden{display:none;}
.sticker_lineup{
	position:relative;
	height:30px;
	min-width: 50px;
	padding:4px 15px 4px 15px;
	background: linear-gradient(0deg, rgba(217, 217, 217, 0.4) 0%, rgba(250, 250, 250, 0.4) 50%, rgba(252, 252, 252, 0.55) 100%);
	border-radius:25px;
	display: flex;
    justify-content:center;
    gap:10px;
}
.bubble{
	width: 30px;
	height: 30px;
	border-radius:50px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3),inset 0 -2px 4px 1px rgba(255, 255, 255, 0.2);
	background-blend-mode: color-dodge;
	transition:all 0.8s cubic-bezier(0.23, 2, 0, -0.71);;
	margin-top: 0px !important;
	cursor:pointer;
	overflow:hidden;
}
.bubble:hover{
	transform: scale(0.8);
    transition: all 0.2s cubic-bezier(0.9, 0, 0.33, 1);
}
.bubble+.bubble{ /* 2번째 스티커 요소 부터는 relative */
	position:relative;
	transition:all 0.2s ease;
}
.bubble:after{
    content:"";
    width: 30%;
    height:30%;
    border-radius:50px;
    top: -30px;
    right: -15%;
    position:relative;
    display: inline-block;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    opacity:0.4;
    background-blend-mode: screen;
    z-index:1;
}
.sticker_inbubble{width: 30px;height: 30px;background-size: cover;}
.sticker_wrapper{margin-top:0px !important;}

.card_back{
	position: fixed;
    width: var(--card_width);
    height: var(--card_height);
    background-color: #000;
    border-radius: 5px;
    backface-visibility: hidden;
    transform:rotateY(180deg);
    background-color: #8d8f95;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card_back_inner{
    backface-visibility: hidden;
    width: calc(var(--card_width) - 16px);
    height: calc(var(--card_height) - 16px);
    position: absolute;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.45) inset;
    background: radial-gradient(circle, #2360a0 0%, #a2a2a2 100%), 
    			url("../../custom/img/favicon-128.png") no-repeat center;
    background-blend-mode: overlay;
}
.cardContainer_wrapper_notVisible{
    transform:scale(0);
    top: 20%;
    position: fixed;
    left: 50%;
    transition: all 0.5s var(--transition_smooth);
    z-index: 10;
}
.cardContainer_wrapper_visible{
    transform:scale(1) rotateY(2turn) translateX(-120px);
    transform-style: preserve-3d; /* 3D 변환 유지 */
    transition: all 1s var(--transition_smooth);
    backface-visibility: hidden;
    z-index:10;
    /* 조직도 상세 영역의 중앙에 위치하도록 */
    top: 20%;
    position: fixed;
    left: 50%;
}
.cardContainer { /* 카드의 최 외곽 테두리 */
    position:fixed;
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    width:var(--card_width);
    height:var(--card_height);
    border:none;
    background-color: #8d8f95;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    transition: all 0.5s var(--transition_bounce);
    margin-top:0px !important;
    backface-visibility: hidden;
}
/* 카드 테두리 스타일 선택 - 앞면 뒷면 같이 사용 */
.card_border_style_01{ background-color: #8d8f95; /* 기본 회색 */}
.card_border_style_02{ background-color: #e3c855; /* 푸키맨 yellow */}
.card_border_style_03{ background-color: rgba(237, 27, 36, 0.9); /* MOIN 테마1 레드 */}
.card_border_style_04{ background-color: rgba(50, 87, 146, 0.9); /* MOIN 테마2 블루 */}
.card_border_style_05{ background-color: rgba(0, 125, 95, 0.9); /* MOIN 테마3 그린 */}
.card_border_style_06{ background-color: rgba(63, 63, 63, 0.9); /* MOIN 테마4 다크그레이 */}
.card_border_style_07{ background-color: rgba(158, 137, 110, 0.9); /* MOIN 테마5 골드 */}
.card_border_style_08{ background-color: rgba(117, 164, 197, 0.9); /* MOIN 테마6 하늘색 */}
.card_border_style_09{ background-color: rgba(50, 54, 74, 0.9); /* MOIN 테마7 딥블루 */}
.card_border_style_10{ background-color: rgba(149, 70, 217, 0.9);; /* MOIN 테마8 렌탈 퍼플 */}
 /* 리니어 그라데이션 - 좌상 청록 우하 노랑 */
.card_border_style_11{ background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);}
 /* 리니어 그라데이션 - 바다색 */
.card_border_style_12{ background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);}
 /* 래디얼 그라데이션 - 분홍+보라 */
.card_border_style_13{ background: radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);}
 /* 래디얼 그라데이션 - 연보라+핑크 */
.card_border_style_14{ background: radial-gradient(circle,rgba(238, 174, 202, 1) 85%, rgba(148, 187, 233, 1) 100%);}


.cardContainer_inPosition{
    transition:all 0.5s var(--transition_bounce);
    transform: perspective(350px) rotateY(0deg) rotateX(0deg) !important;
}   
.cardContainer_dropShadow{
    box-shadow: 0px 0px 29px 5px rgba(0,0,0,0.61);
    -webkit-box-shadow: 0px 0px 29px 5px rgba(0,0,0,0.61);
    -moz-box-shadow: 0px 0px 29px 5px rgba(0,0,0,0.61);
    transition:all 0.2s var(--transition_bounce);
}
.cardContainer_spin{
    animation: spinAnimation 0.6s forwards;
}
@keyframes spinAnimation {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

.cardContainer_2X{transform: scale(2) !important;transform-origin: 0% 0%;transition: all 0.3s var(--transition_bounce);}

.cardContainer_cover{
    border-radius: 5px;
    width:var(--card_width);
    height:var(--card_height);
    border:none;
    background: linear-gradient(105deg, transparent 40%,
    rgba(255,219,112,0.8) 45%,
    rgba(132,50,255,0.6) 50%,
    transparent 54%);
    background-size: 150% 150%;
    position:absolute;
    top:0;
    filter:brightness(1.1) opacity(0.8);
    mix-blend-mode: color-dodge;
    transition:all 0.2s ease;
}
.cardContainer_cover2{
    position:absolute;
    top:0;
    border-radius: 5px;
    width:var(--card_width);
    height:var(--card_height);
    border:none;
    /*
    background : radial-gradient(circle at center, 
    rgba(255,255,255,0.2) 0%, 
    rgba(255,255,255,0.3) 6%, 
    rgba(0,0,0,0.25) 100%);
    */
    mix-blend-mode: screen;
    transition:all 0.5s ease;
    z-index:1000;
}

/* 카드 내부 배경 이미지 */
.card_inner_background{
	width:calc(var(--card_width) - 16px);
    height:calc(var(--card_height) - 16px);
    position:absolute;
    border-radius: 5px;
    display:flex;
    justify-content: center;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.45) inset;
}
/* 카드 내부 배경 선택 이미지&그라디언트 */
.card_inner_style_01{ /* 기본 어두운 파랑 */
	background: url("../../common/image/sticker/card/card_background_01.png") , 
	radial-gradient(circle, #084cbc4a 0%, #326088 100%);
	background-color: white;
	background-size:cover;
}
.card_inner_style_02{ /* 푸키맨 하늘색 */
	background: url("../../common/image/sticker/card/card_background_01.png") , 
	radial-gradient(circle, #9ddbf7 0%, #03a8df 100%);
	background-color: white;
	background-size:cover;
}
.card_inner_style_03{ /* 푸키맨 주황색 */
	background: url("../../common/image/sticker/card/card_background_01.png") , 
	radial-gradient(circle, #ffb546 0%, #ef5531 100%);
	background-color: white;
	background-size:cover;
}
.card_inner_style_04{ /* 푸키맨 녹색 */
	background: url("../../common/image/sticker/card/card_background_01.png") , 
	radial-gradient(circle, #d4dd2c 0%, #90c03e 100%);
	background-color: white;
	background-size:cover;
}
.card_inner_style_05{ /* 푸키맨 보라색 */
	background: url("../../common/image/sticker/card/card_background_01.png") ,
	radial-gradient(circle, #b483b8 0%, #a66fae 100%);
	background-color: white;
	background-size:cover;
}
.card_inner_style_06{ /* 어두운 녹색 */
	background: url(../../common/image/sticker/card/card_background_01.png), 
	radial-gradient(circle, rgb(6 42 43) 20%, rgb(187 243 251 / 46%) 100%);
    background-color: #034647;
    background-size: 400%;
}

.sticker_number{position: absolute;right: 4px;top: 6px;;font-weight: 800;font-size: 14px;}
.sticker_name{font-weight: 700;position: absolute;top: 22px;left: 16px;}
/* 스티커 감싸는 프레임 */
.sticker_frame{
	position: fixed;
	display: flex;
	width: 80%;
	height: 42%;
	top: 14%;
	border: 3px solid;
	border-image: linear-gradient(90deg, #979797 0%, #dbdbdb 50%, #979797 100%);
	border-image-slice: 1;
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.64), 1px 1px 0px 1px rgba(0, 0, 0, 0.64) inset;
	justify-content: center;
	align-items: center;
	background-color: #708fb4;
}
/* 스티커 프레임의 배경 패턴 선택 */
.sticker_frame_background_style_01{ /* 기본 파장*/
	background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #708fb4 32px), repeating-linear-gradient(rgba(78, 81, 250, 0.13), rgba(78, 81, 250, 0.13));
}
.sticker_frame_background_style_02{ /* 체스판 */
	background-image: repeating-conic-gradient(#6769bd 0% 25%, #66a3b7 0% 50%);
    background-position: 0 0, 18px 18px;
    background-size: 37px 37px;
    background-color: #66a3b7;
}
.sticker_frame_background_style_03{ /* 가로 스트라이프 */
	background-image: repeating-linear-gradient(0deg, #aeb0c0, #aeb0c0 2px, transparent 2px, transparent);
    background-size: 19px 10px;
    background-color: #757575;
}
.sticker_frame_background_style_04{ /* 마름모 패턴 */
	background: linear-gradient(45deg, #0000 calc(25% / 3), #aeb0c0 0 calc(50% / 3), #0000 0 calc(250% / 3), #aeb0c0 0 calc(275% / 3), #0000 0), linear-gradient(45deg, #aeb0c0 calc(25% / 3), #0000 0 calc(50% / 3), #aeb0c0 0 25%, #0000 0 75%, #aeb0c0 0 calc(250% / 3), #0000 0 calc(275% / 3), #aeb0c0 0), linear-gradient(-45deg, #0000 calc(25% / 3), #aeb0c0 0 calc(50% / 3), #0000 0 calc(250% / 3), #aeb0c0 0 calc(275% / 3), #0000 0), linear-gradient(-45deg, #aeb0c0 calc(25% / 3), #0000 0 calc(50% / 3), #aeb0c0 0 25%, #0000 0 75%, #aeb0c0 0 calc(250% / 3), #0000 0 calc(275% / 3), #aeb0c0 0) #757575;
    background-size: 37px 37px;
    background-position: 0 0, 18px 18px;
}
.sticker_frame_background_style_05{ /* 산 모양 패턴 */
	background:
      conic-gradient(from 135deg,#aebfaf 90deg,#0000 0) 24px calc(24px/2),
      conic-gradient(from 135deg,#0d5921 90deg,#0000 0),
      conic-gradient(from 135deg at 50% 0,#aebfaf 90deg,#0000 0) #0d5921;
	background-size: 48px 24px;
}
.sticker_frame_background_style_06{ /* 노란배경 폴카 도트 */
	background:
      conic-gradient(#eef46d 25%,#0000 0) 0 0/calc(2*24px) calc(24px/9.5),
      conic-gradient(#eef46d 25%,#0000 0) 0 0/calc(24px/9.5) calc(2*24px),
      repeating-conic-gradient(#0000 0 25%,#eef46d 0 50%) 
       24px 0 /calc(2*24px) calc(2*24px),
      radial-gradient(50% 50%,#ff3a3a 98%,#eef46d) 
       0 0/24px 24px;
}
.sticker_frame_background_style_07{ /* 보라색 최면 */
	background: radial-gradient(50% 50% at 100% 0, #6852e1 0% 5%, #9ba5b2 6% 15%, #6852e1 16% 25%, #9ba5b2 26% 35%, #6852e1 36% 45%, #9ba5b2 46% 55%, #6852e1 56% 65%, #9ba5b2 66% 75%, #6852e1 76% 85%, #9ba5b2 86% 95%, #0000 96%), radial-gradient(50% 50% at 0 100%, #6852e1 0% 5%, #9ba5b2 6% 15%, #6852e1 16% 25%, #9ba5b2 26% 35%, #6852e1 36% 45%, #9ba5b2 46% 55%, #6852e1 56% 65%, #9ba5b2 66% 75%, #6852e1 76% 85%, #9ba5b2 86% 95%, #0000 96%), radial-gradient(50% 50%, #6852e1 0% 5%, #9ba5b2 6% 15%, #6852e1 16% 25%, #9ba5b2 26% 35%, #6852e1 36% 45%, #9ba5b2 46% 55%, #6852e1 56% 65%, #9ba5b2 66% 75%, #6852e1 76% 85%, #9ba5b2 86% 95%, #0000 96%), radial-gradient(50% 50%, #6852e1 0% 5%, #9ba5b2 6% 15%, #6852e1 16% 25%, #9ba5b2 26% 35%, #6852e1 36% 45%, #9ba5b2 46% 55%, #6852e1 56% 65%, #9ba5b2 66% 75%, #6852e1 76% 85%, #9ba5b2 86% 95%, #0000 96%) 25px 25px;
    background-size: 50px 50px;
    background-color: #6852e1;
}
.sticker_frame_background_style_08 { /* 물결 파동 */
	background-image: radial-gradient(circle at center center, #9ba5b2, #496cf9), repeating-radial-gradient(circle at center center, #9ba5b2, #9ba5b2, 13px, transparent 26px, transparent 13px);
	background-blend-mode: multiply;
	background-color: #496cf9;
}
.sticker_frame_background_style_09 { /* 별 */
	background: conic-gradient(from 162deg at calc(49px* .5) calc(49px* .68), #fff220 36deg, #0000 0), conic-gradient(from 18deg at calc(49px* .19) calc(49px* .59), #fff220 36deg, #0000 0), conic-gradient(from 306deg at calc(49px* .81) calc(49px* .59), #fff220 36deg, #0000 0), #e181c2;
    background-position: 0 calc(49px* 0.4);
    background-size: calc(45px + calc(49px / 10)) calc(49px + calc(49px / 10));
}
.sticker_frame_background_style_10 { /* 지오매트릭 플라워 */
	background:
    radial-gradient(#c02942 24%,#0000 25%),
    radial-gradient(#53777a 30%,#0000 32%) calc(64px/2) calc(64px/2),
    repeating-conic-gradient(from 30deg,#ecd078 0 30deg,#d95b43 0 90deg);
  	background-size: 64px 64px; 
}
.sticker_frame_background_style_11{ /* 체크무늬 추가 */
    background-image: repeating-conic-gradient(#23af8f 0% 25%, #000000 0% 50%);
    background-position: 11px 4px;
    background-size: 40px 40px;
}

/* 프레임 내부 스티커 */
.sticker_common{
    width:100px;
    height:100px;
    background-size: cover;
    position: absolute;
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.6));
}

/* --------- 회사별 스티커 영역 시작  ---------*/
.sticker_033100_1240627172306230004_L{
	background-image:url("../../common/image/sticker/CPR(100x100).png");
}
.sticker_033100_1240627172306230004_S{
	background-image:url("../../common/image/sticker/CPR(40x40).png");
}
.sticker_033100_1240628102015296093_L{ /* 2024-12-31 / jj_baek / 23년도 심폐소생술 인증교육 취득자용 추가 */
	background-image:url("../../common/image/sticker/CPR(100x100).png");
}
.sticker_033100_1240628102015296093_S{ /* 2024-12-31 / jj_baek / 23년도 심폐소생술 인증교육 취득자용 추가 */
	background-image:url("../../common/image/sticker/CPR(40x40).png");
}
.sticker_033100_1240619175345336001_L{ /*검증 테스트용*/
	background-image:url("../../common/image/sticker/CPR(100x100).png");
}
.sticker_033100_1240619175345336001_S{ /*검증 테스트용*/
	background-image:url("../../common/image/sticker/CPR(40x40).png");
}
/* --------- 회사별 스티커 영역 종료  ---------*/
.sticker_detail{top: 62%;position: absolute;padding: 8%;font-size: 12px !important;font-weight:bold;}
.card_copyright_footer{position: absolute;display: grid;bottom: 1%;font-size: 6px !important;text-align:left !important;padding-left: 8px;padding-right: 8px;}
.card_copyright{bottom: -171px;position: relative;font-size: 6px;color: #c5c5c5;}
/* 레어도 영역 wrap*/
.rare_wrapper{display: grid;grid-template-columns: repeat(3, 0fr);gap: 0px;position: absolute;left: -4px;top: 2px;}
/* 레어도 영역 내부 */
.parallelogram_side{
    height: 12px;
    width: 10px;
    transform: skew(-20deg);
    background: #eeeeee;
    background: -webkit-linear-gradient(0deg, #eeeeee 0%, #6f6f6f 50%, #eeeeee 100%);
    background: linear-gradient(0deg, #eeeeee 0%, #6f6f6f 50%, #eeeeee 100%);
    -webkit-box-shadow: 0.5px 1px 2px 1px #828282;
    -moz-box-shadow: 0.5px 1px 2px 1px #828282;
    box-shadow: 0.5px 1px 2px 1px #828282;
    margin-top:0px !important;
}
.parallelogram_middle{
    height: 12px;
    width: 80px;
    background-color: grey;
    transform: skew(-20deg);
    background: #eeeeee;
    background: -webkit-linear-gradient(0deg, #eeeeee 0%, #bababa 50%, #eeeeee 100%);
    background: linear-gradient(0deg, #eeeeee 0%, #bababa 50%, #eeeeee 100%);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items:center;
    flex-wrap: wrap;
    -webkit-box-shadow: 0.5px 1px 2px 1px #828282;
    -moz-box-shadow: 0.5px 1px 2px 1px #828282;
    box-shadow: 0.5px 1px 2px 1px #828282;
    margin-top:0px !important;
}
.rare_star{
    transform: skew(20deg); /* 레어도 영역을 20도 기울였기 때문에, 반대로 20도 돌림 */
    height: 12px;width: 12px;
    background: url(../../common/image/sticker/card/rare_star.png);
    background-size: cover;
    margin-top:0px !important;
}
/* 2025-05-19 / jj_baek / 스티커 메타 정보 */
.stickerMetaWrap{
	width:30%;
	padding:5px;
	border-radius:10px;
	position:absolute;
	background:linear-gradient(135deg, #2c3e50, #34495e);
	right:1rem;
	opacity:0;
	transform-origin:top right;
	transition:opacity 0.5s ease;
	transition:opacity 1s ease, transform 0.5s ease;
}
.stickerMetaWrap.show{
	opacity:1 !important;  /* 2025-05-26 / jj_baek / 배포중 css 제대로 다운이 안되는 경우 대비에 jsp에 style opacity를 0으로 하고, show에서 보이게 처리 */
	transform:translateY(5px);
	transition:opacity 1s ease, transform 0.5s ease;
}
.stickerMetaWrap_name{text-align:center;color:#3498db;font-weight:bold;}
.stickerMetaWrap_retentionWrap{display: flex;justify-content: space-around;margin-top:4px;}
.stickerMetaWrap_regDate{display: flex;justify-content:center;margin-top:4px;}
.stickerMetaWrap_retentionRate{color:#bdc3c7;}
.stickerMetaWrap_retentionPercent{color:#ecf0f1;}
.stickerMetaWrap_progressBar{
	width: 100%;
    height: 6px;
    background-color: #2c3e50;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.stickerMetaWrap_progressFill{
	width: 0%;height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    border-radius: 3px;
    transition: width 1s ease-in-out;
}
.stickerMetaWrap_comment{text-align:center;margin-top:4px;color:#FFF;}

/* 2024-07-30 / 자사포털만 사용하는 사용자 개인정보 처리 방침 추가 */
.privacy_area{
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transform:scale(0);
}
.privacyConsent_area{
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.privacyConsent_area_agreed{
	transform:scale(0);
	transition:all 0.5s ease;
}
.privacy_area_show{
	transform:scale(1);
}
.ifr_privacy_area{
	position: relative;
	display: flex;
	width: 80%;
	height: 80%;
	border-radius: 10px;
	background-color:#FFF;
}
.accept_btn {
    position: absolute;
    right: 11%;
    bottom: 11%;
    width: 400px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    border-radius:5px;
    background-color:#05bf6f;
    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
	-webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
	transition:all 0.5s ease;
	opacity:0;
	transform:scale(0);
}
.accept_btn:hover{
	background-color:#00d379;
	transition:all 0.2s ease;
	box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.75);
	-webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.75);
}
.accept_btn_show{
	opacity:1;
	transform:scale(1);
	transition:all 0.5s ease;
}
.accept_btn_span{
    color:#FFF;
    font-weight:bold;
    font-size: 20px;
}

/*[Chilsung] 2025-08-26 / LMCH_007 / by 서보경 / 부문별 근무일 / 휴무 지정*/
/*일정 포틀릿*/
div.portal_calendar .businessday_list{ width: 260px; margin-bottom: 10px;}
div.portal_calendar .businessday_list .title_wrap{ border-bottom: none; padding-bottom: 0}
div.portal_calendar .businessday_list .title_wrap .title{font-size:14px }
div.portal_calendar .businessday_list .cont_box{ padding:20px 0 20px 0; -ms-overflow-style: none; scrollbar-width: none; max-height: 160px; overflow-y:auto; }

div.cont_box::-webkit-scrollbar { display: none; }
div.portal_calendar .businessday_list .cont_box .list_type_bd{ margin: 5px 0 5px 0; }
div.portal_calendar .businessday_list .cont_box .list_type_bd .color_bar{ height:18px; width:4px; border-radius: 2px; display:inline-block; vertical-align:middle }
div.portal_calendar .businessday_list .cont_box .list_type_bd .bd_info{ padding-left:10px; }
div.portal_calendar .businessday_list .cont_box .list_type_bd .bd_yn{ padding-left:10px; float:right; color:red;}

/* 평일인데 영업휴무일 - 빨간 동그라미 테두리 */
div.portal_calendar .calendear_table tbody td span.business-holiday {
	border: 2px solid #fc6e57 !important;
	box-sizing: border-box;
}

/* 휴일인데 영업일 - 검정 동그라미 테두리 */
div.portal_calendar .calendear_table tbody td span.business-workday {
	border: 2px solid #000000 !important;
	box-sizing: border-box;
}

/* 다크모드일 때 휴일인데 영업일 - 흰색 동그라미 테두리 */
.darkmode div.portal_calendar .calendear_table tbody td span.business-workday {
	border: 2px solid #ffffff !important;
	box-sizing: border-box;
}

.darkmode div.portlet_businessday { padding: 0 20px; border-radius: 8px; -webkit-box-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.04); background:#2c2d2e; border: 1px solid #4e5053; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.04); box-sizing: border-box; }
div.portlet_businessday { padding: 0 20px; border-radius: 8px; -webkit-box-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.04); background:#fff; box-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.04); box-sizing: border-box; }
div.portlet_businessday .no_data{ width: auto !important; height: auto !important; margin: auto !important; padding:10px 0 !important}

/*[Chilsung] 2025-07-23 / LMCH_003 / by 서보경 / 경제지표 포틀릿 추가 개발*/
/*[Chilsung] 2025-07-23 / LMCH_002 / by 서보경 / 시장지표 포틀릿 추가 개발*/
/* 포틀릿 - 공통 */
/* [Chilsung] 2025-07-31 / LMCH_005 / by 전형근 / 최초 접속 혹은 캐시 미적재 상태 로딩 지연 표시 - 로딩 css */
.chilsung_loading {position: absolute;top: 0; left: 0;width: 100%; height: 100%;background: rgba(255,255,255,0.8);display: flex;align-items: center;justify-content: center;z-index: 600;transition: all 0.3s; visibility:visible;opacity:1;}
.chilsung_spin {animation: spin infinite 3s linear; }
@keyframes spin {0% {transform: rotate(0deg);}     100% {transform: rotate(360deg);} }
@keyframes glow { 0% { transform: translate(0, 0) scale(1); opacity: 0.3; } 100% { transform: translate(20px, 20px) scale(1.2); opacity: 0.1; }}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }}

.darkmode div.portlet .row:nth-child(odd):not(.header) {  background-color: #2c2d2e;}
.darkmode div.portlet .badge {  display: inline-block;  padding: 4px;   border-radius: 3px;  font-weight: bold; background-color:#2c2d2e;  color: white;}

div.portlet .badge {  display: inline-block;  padding: 4px;   border-radius: 3px;  font-weight: bold;  background-color:black;  color: white;}
div.portlet .bluechg {  display: inline-block;  padding: 2px;  border-radius: 3px;  color: white;  width:50px;  background-color:#5ab7d2;}
div.portlet .redchg {  display: inline-block;  padding: 2px;  border-radius: 3px;  color: white;  width:50px;  background-color:#fc6e57;}
div.portlet .nochg {  display: inline-block;  padding: 2px;  border-radius: 3px;  color: white;  width:50px;  background-color: #dcdcdc;}
div.portlet tr.row { padding:6px 10px;  height:32px;  /*border-bottom: 1px solid #ddd;*/} /* 2025-10-14 / jj_baek / 칠성요청으로 가로줄 없앰 */
div.portlet .row:nth-child(odd):not(.header) {  background-color: #fafafa;}
div.portlet .content_wrap::-webkit-scrollbar {  display: none; /* Chrome, Safari, Edge */}
div.portlet .content_wrap {  max-height:200px;  overflow-y:scroll;}
div.portlet .last-call { float:right; font-size: 11px; opacity: 0.8; }

/*시장지표 포틀릿*/
div.commodities-portlet .list_commodity{border-collapse:collapse;width:100%;}
div.commodities-portlet .content_wrap .list_commodity .list_commodity_body{ width:100%; height:100%;}
div.commodities-portlet .bluechg {  display: inline-block;  padding: 2px;  border-radius: 3px;  color: white;  width:40px;  background-color:#5ab7d2;}
div.commodities-portlet .redchg {  display: inline-block;  padding: 2px;  border-radius: 3px;  color: white;  width:40px;  background-color:#fc6e57;}
div.commodities-portlet .nochg {  display: inline-block;  padding: 2px;  border-radius: 3px;  color: white;  width:40px;  background-color: #dcdcdc;}

/*경제지표 포틀릿*/
div.economic-portlet .list_currency {  border-collapse:collapse;  width:48%;  float:left;  overflow-y: auto;  max-height:200px;}
div.economic-portlet .list_stock {  border-collapse:collapse;  width:48%;  float:right; }

/*위젯포틀릿 - 공통*/
div.widget .last-call-widget { font-size: 10px; opacity: 0.8; color: rgba(255, 255, 255, 0.9); padding-top:5px;}
div.widget { width: 100%; height: 260px; background: linear-gradient(135deg, #064e3b 0%, #022c22 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; display: flex; flex-direction: column;}
div.widget::before { content: ''; position: absolute; top: -30%; left: -30%; width: 160px; height: 160px; background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%); border-radius: 50%; animation: glow 8s ease-in-out infinite alternate;}
div.widget .header {text-align: center; position: relative;z-index: 2;flex-shrink: 0;margin:10px;}    
div.widget .title {font-size: 16px; font-weight: 600; color: #10b981; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
div.widget .loading {opacity: 0.6;}
div.widget .pulse {animation: pulse 1.5s infinite;}
div.widget .item-list::-webkit-scrollbar { width: 6px;}
div.widget .item-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px;}
div.widget .item-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px;}
div.widget .item-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3);}
div.widget .item-list {position: relative;z-index: 2;flex: 1;overflow-y: auto;overflow-x: hidden;padding: 5px;border-top: 1px solid white;}
div.widget .item {display: flex;align-items: center;justify-content: space-between;padding: 12px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease;}
div.widget .item:hover {background: rgba(255, 255, 255, 0.1);border-radius: 8px;padding: 12px 10px;margin: 0 -10px;transform: translateX(3px);}
div.widget .item:last-child {border-bottom: none;}
div.widget .change-positive { color: #22c55e;}
div.widget .change-negative { color: #ef4444;}
div.widget .change-none { color: rgba(255, 255, 255, 0.8);}
div.widget .change-arrow {font-size: 10px; font-weight: bold;}
div.widget .info {display: flex;align-items: center;gap: 10px;}
div.widget .name {font-size: 13px;font-weight: 500;}
div.widget .rates {text-align: right;font-size: 11px;}

/*시장지표위젯포틀릿*/
div.commodities-widget .market-status { font-size: 11px; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; gap: 5px; padding-top:5px;}
div.commodities-widget .status-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; animation: pulse-dot 2s infinite;}
div.commodities-widget .commodity-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; margin: 8px 0; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; backdrop-filter: blur(10px); min-width: 0;}
div.commodities-widget .commodity-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
div.commodities-widget .commodity-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;}
div.commodities-widget .commodity-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); flex-shrink: 0;}
div.commodities-widget .sugar { background: linear-gradient(45deg, #ec4899, #f97316); font-size: 12px; font-weight: bold;}
div.commodities-widget .coffee {  background: linear-gradient(45deg, #8b4513, #d2691e); font-size: 12px; font-weight: bold;}
div.commodities-widget .corn { background: linear-gradient(45deg, #eab308, #f59e0b); font-size: 12px; font-weight: bold;}
div.commodities-widget .aluminum { background: linear-gradient(45deg, #64748b, #94a3b8); font-size: 12px; font-weight: bold;}
div.commodities-widget .wti { background: linear-gradient(45deg, #1f2937, #374151); font-size: 12px; font-weight: bold;}
div.commodities-widget .commodity-details { min-width: 0; flex: 1;	padding-left: 10px;}
div.commodities-widget .commodity-name { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.commodities-widget .commodity-code { font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.commodities-widget .commodity-price { text-align: right; flex-shrink: 0;}
div.commodities-widget .current-price {font-size: 14px; font-weight: 600; color: #34d399; display: block; line-height: 1.2; white-space: nowrap;}
div.commodities-widget .price-change { font-size: 11px; margin-top: 2px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; white-space: nowrap;}
div.commodities-widget .widget-footer { margin-top: 10px; text-align: center; font-size: 10px; color: rgba(255, 255, 255, 0.5); position: relative;z-index: 2; flex-shrink: 0;}

/*환율위젯포틀릿*/
div.widget .currency-flag {width: 24px; height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;color: white;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
div.exchange-widget .usd { background: linear-gradient(45deg, #1e40af, #3b82f6); }
div.exchange-widget .eur { background: linear-gradient(45deg, #1e3a8a, #3b82f6); }
div.exchange-widget .jpy { background: linear-gradient(45deg, #dc2626, #ef4444); }
div.exchange-widget .cny { background: linear-gradient(45deg, #dc2626, #f59e0b); }
div.exchange-widget .gbp { background: linear-gradient(45deg, #1e40af, #7c3aed); }
div.exchange-widget .rate-buy, .rate-sell {display: block;margin: 1px 0;}
div.exchange-widget .rate-buy {color: #bbf7d0;font-weight: 500;}
div.exchange-widget .rate-sell {color: #fed7d7;font-weight: 500;}
div.exchange-widget .rate-label {font-size: 9px;opacity: 0.7;margin-right: 2px;}

/*주식위젯포틀릿*/
div.stock-widget .stock-price {font-size: 14px;font-weight: 600;color: #34d399;display: block;line-height: 1.2;white-space: nowrap;}
div.stock-widget .stock-change {font-size: 11px;margin-top: 2px;display: flex;align-items: center;justify-content: flex-end;gap: 3px;white-space: nowrap;}

/*[Chilsung] 2025-08-27 / LMCH_008 / by 서보경 / 경조사 포틀릿 개발*/
div.event_tab_portlet .title {height:100%;min-width:100px;width:100px;margin-right:50px;}
div.event_tab_portlet .tab_wrap {display:inline-block; height:100%;}
div.event_tab_portlet .tab_wrap .eb_btn {margin-right:10px; padding:0px; background-color: transparent; border:none;}
div.event_tab_portlet .etc_wrap {height:100%;}

/*[Chilsung] 2025-07-22 / LMCH_001 / by 서보경 / 날씨 포틀릿 추가개발*/
/* 2026-05-27 / bjj / 날씨 포틀릿 height 100%로 되어있어서 미세하게 높이가 달랐던 부분 수정 */
div.weather-container {width: 100%;/*height:100%;*/max-width: 700px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;border-radius: 8px;overflow: hidden;}
div.weather-container .weather-box{width: 100%;height:100%;}
div.weather-container .location-bar {display: inline-block;padding: 0px 50px;justify-content: left;gap: 15px;}
div.weather-container .location-bar span {color: #aaa;cursor: pointer;} 
div.weather-container .location-bar .active {font-weight: bold;color: #000;}   
div.weather-container .forecast {display: flex;justify-content: space-between;float : right;width: 80%;	  height:100%; overflow: hidden;}
div.weather-container .weather-current {justify-content: space-between;float : left;width: 20%;height:100%;overflow: hidden;}
div.weather-container .day {flex: 1;text-align: center;border-right: 1px solid #eee;border-left: 1px solid #eee;padding: 37px 0px;box-sizing: border-box;}
div.weather-container .day:last-child {border-right: none;}   
div.weather-container .date-label {font-weight: bold;margin-bottom: 5px;}
div.weather-container .relative-label {font-weight: bold;margin-bottom: 5px;white-space: nowrap;}
div.weather-container .section {display: inline-block;justify-content: space-between;width: 45%;}
div.weather-container .period {font-size: 13px;color: #777;}
div.weather-container .temp {font-size: 14px;font-weight: bold;}
div.weather-container .temp-current{font-size: 24px;font-weight:bold;display:block;justify-content: center;padding: 50px 0px;text-align:center;width: 100%;}
div.weather-container .temp-range{font-size: 14px;font-weight: bold;text-align: center;}
div.weather-container .blue{color:#5ab7d2;}
div.weather-container .red{color:#fc6e57;}
div.weather-container .weather_icon{width: 90%;height: 90%;}

div.weather-container.normal_size .loc-btn-sel{font-size:12px; border: 0px;}
div.weatherContent_sm .label_info {	justify-content:center;	text-align:center;	font-weight: 600;}
div.weatherContent_sm .info_tmp{width:75px;	padding:0 5px;	}
div.weatherContent_sm .info_box{width:200px;}
div.weatherContent_sm .info_row{width:100%;height:40px;display:flex;align-items:center;	/*border-bottom: 1px solid #e5e5e5;*/margin:10px 0px;	} /* 2025-10-14 / jj_baek / 칠성요청 가로줄 없앰 */
div.weatherContent_sm .info_tmp > img{ width:30px;	}
div.weatherContent_sm .temp_txt{font-size: 12px;font-weight: 500;}
div.weatherContent_sm .info_date{width:50px;	font-size: 12px;font-weight: 500; white-space: nowrap;}
div.weatherContent_sm .curtemp_info{font-size: 13px;font-weight: 600; text-align:center;}
div.weatherContent_sm .today_txt{margin: 15px 0px 6px 0px;	}
div.weatherContent_sm .curtemp{	font-size: 13px;font-weight: 600; text-align:center;}
div.weatherContent_sm .curtemp_pic{	margin:15px 10px; align-items:center;display:flex;text-align:center	}
div.weatherContent_sm .curtemp_pic>div{	width: 50%;}
div.weatherContent_sm .curtemp_pic > div:first-child {border-right: 1px solid #e5e5e5;}
div.weatherContent_sm .curtemp_pic>div>img{	width: 35px;}
div.weatherContent_sm .info_line{width:100%;height:30px;margin:5px 0px;	display:flex;align-items:center;border-bottom: 1px solid #e5e5e5}
div.weatherContent_sm .tmp_line{width:100%;display:flex;align-items:center;	}
div.weatherContent_sm .today{width:100px;height:165px;}

/*[Chilsung] 2025-10-14 / LMCH_014 / by 전형근 / 칠성 식단 포틀릿 커스텀 - 헤더 영역 높이, 제목, select box css 수정 */
div.title_wrap.with_etc.cef_food {padding: 20px 0px 12px 0px;}
div.title_wrap.with_etc.for_portlet .title_food {vertical-align: top;}
div.select_food {max-width: 100px; margin-left: 10px; margin-top: -8px;}

/* 2025-07-03 / jj_baek / 새게시글 알림 폴링 아이콘 */
.polling_icon_wrap{
	width: 2.6rem;
    height: 2.6rem;
    border: 0.2rem solid #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content:center;
    transform: scale(0.5);
    transform-origin: top left;
    opacity: 0.9;
    position: absolute;
    left: 0.5rem;
    /* filter:blur(1px); */
}
.polling_icon_wrap::after{
	/*
    content: "beta";
    color: #FFF;
    width: 58px;
    height: 33px;
    background-color: #fc6e57;
    position: absolute;
    top: -29px;
    right: -30px;
    border-radius: 10px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    z-index: 10;
    text-indent: 0;
    */
    content: "";
    /* 채워진 종 이미지 base64 */
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABb0lEQVR4nO3ZvS5EQRTA8fGRdVWi4yE8guiFChGN2tpVKYRK4gmI8BJ68QCyGjZUChEfie+SZBPsX252qIi9s2fm3GV+ydZ7/vdOcXbWmCiKRACdwAiwDuwB58AbUAdugQNgExgDEpMXQAIsA5c07xFYA/q0hx8FznD3AExrDb9ij4eELaA71OAd9ixL2wkSASziz7bv4YeBV/ya8TV8F3CKf/dAv4+AWcJZ9REQ4ul/egIKksMPEd64ZMCSQsCGZMCuQsC+ZMCJQsCdZEC6fIVWkwx4VwhAMkCFiQFWDHBkYoD5+s2rJZEIKCsGlFodvge4Vgy4AXpbCSihb951+AJwoT09cJWeBJeAIvkx1y4b6E+qLgE18uPlX76BScGrw1bUgYnMATZiyr4J35dZ30m/8zh9kE7DR+0GqKBx4yAFWMgQUDR5Q2P1qDYx/KHotaEkYPCXiCNgwOQZjRW8bP+VfLafit1ssy9lURT9bR9xXEGSWm7NBgAAAABJRU5ErkJggg==) 
    			no-repeat center;
    background-size: contain;
    position: absolute;
    width: 2rem;
    height: 2rem;
    text-align: center;
}
.polling_icon_wrap.run .polling_icon_inner{
  width:20px;
  height:20px;
  background-color:#FFF;
  border-radius:50%;
}
.polling_icon_wrap.run .polling_icon_inner{
	box-sizing:border-box;
  	animation:anim_pollingicon_inner 1s infinite;
}
@keyframes anim_pollingicon_inner{
  10%{
  		transform:scale(1.4);
  		opacity:0.8;
  }
}
.polling_icon_wrap.modifying .polling_icon_inner_modifying{
	position:absolute;
	box-sizing:border-box;
    border-radius:50%;
    animation: anim_modifying_inner 0.8s forwards;
}
@keyframes anim_modifying_inner {
  0% {
    transform-origin: center;
    width: 0%;
    height: 0%;
    border-width: 0px;
    border-color: #FFF;
    border-style: solid;
  }
  50% {
    transform-origin: center;
    width: 100%;
    height: 100%;
    border-width: 20px;
    border-color: #FFF;
    border-style: solid;
  }
  100% {
    transform-origin: center;
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-color: #FFF;
    border-style: solid;
    background-color:transparent;
  }
}

/* 2025-11-03 / jj_baek / 경조사 게시판 콘페티 버튼 */
.confetti-launcher-wrapper { position: relative; display: flex; align-items: center; top:1rem;}
.confetti-main-section { display: flex; align-items: center; gap: 8px;}
.confetti-emoji-section { display: flex; gap: 8px; margin-left: 3rem; position:absolute; }
.confetti-main-trigger {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    user-select: none;
    z-index: 10;
}
.confetti-main-trigger:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); }
.confetti-main-trigger:active { transform: scale(0.95); }
.confetti-emoji-menu {
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.confetti-emoji-menu.confetti-menu-active { opacity: 1; transform: translateX(0); pointer-events: all; }
.confetti-emoji-option {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    user-select: none;
}
.confetti-emoji-option:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.confetti-emoji-option:active { transform: translateY(-2px) scale(1.05); }
.confetti-emoji-option:nth-child(1) { transition-delay: 0.05s; }
.confetti-emoji-option:nth-child(2) { transition-delay: 0.1s; }
.confetti-emoji-option:nth-child(3) { transition-delay: 0.15s; }
.confetti-emoji-option:nth-child(4) { transition-delay: 0.2s; }
.confetti-emoji-option:nth-child(5) { transition-delay: 0.25s; }
.confetti-counter-display {
    font-size: 14px;
    font-weight: 700;
    color: white;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor:pointer;
}
.darkmode .confetti-counter-display { color: white !important;}
.confetti-counter-display::after{
	cursor:pointer;
	content:"명이 축하합니다️";
	position:absolute;
	width: max-content;
	opacity:0;
	transform:translateX(-1rem);
}
.confetti-counter-display:hover::after{
	transition:all 0.5s ease;
	transform-origin:left;
	transform:translateX(0.4rem);
	opacity:1;
}
.confetti-counter-display.confetti-counter-hidden { opacity: 0; pointer-events: none; }

/* 2025-11-10 / jj_baek / 스티커 카드 디자인 모드 */
.cardDesignModeSelectArea{
	position: relative;
    top: 3rem;
    left: 1rem;
	opacity:0;
	transform:scale(0);
}
.cardDesignModeSelectArea.loaded{
	opacity:1;
	transform:scale(1);
}
.cardDesignModeSelectArea label{
	font-weight:800;
	color: #ffffff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* 2025-11-13 / jj_baek / A타입 워크플레이스 개인일정/부서일정 버튼 디자인 수정 */
.calendar-btn {
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding:4px;
}
.calendar-btn:hover::before { left: 100%; }
.calendar-btn.personal {
    background: #9fc6e7;
    color: white;
    box-shadow: 0 4px 12px rgba(93, 173, 226, 0.3);
}
.calendar-btn.personal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(93, 173, 226, 0.4);
}
.calendar-btn.personal:active { transform: translateY(0); }
.calendar-btn.department {
    background: #fad165;
    color: #333;
    box-shadow: 0 4px 12px rgba(244, 208, 63, 0.3);
}
.calendar-btn.department:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(244, 208, 63, 0.4); }
.calendar-btn.department:active { transform: translateY(0); }
.calendar-btn span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cal_btn_align{ display:flex; align-items: center; }
.cal_btn_align .etc_wrap{ display: flex; width: 23rem; gap: 5px; }

/* 2025-12-03 / jj_baek / 이전 아이피 체크 기능 */
.prevIpCheckModalWrap{
	position: fixed;
    border: 1px solid rgb(253 230 138 / 1);
    border-radius: 5px;
    width: 24rem;
    height: 12rem;
    right: 2rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    --tw-gradient-stops: #fffbeb, #fff7ed;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    opacity:0;
}
.prevIpCheckModalWrap.show{
	animation:modalShow 1s ease forwards;
}
@keyframes modalShow{
	0%{opacity:0;}
	100%{opacity:1;}
}
.prevIpCheckModalWrap .prevIpCloseBtn{
	cursor:pointer;
}
.prevIpCheckModalWrap.close{
	animation:modalClose 1s ease forwards;
}
@keyframes modalClose{
	0%{opacity:1;transform:translateY(0rem);}
	100%{opacity:0;transform:translateY(-1rem);}
}
.prevIpCheckModalContent{height:100%;}
.prevIpCheckModalContent.side{
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.prevIpCheckModalWrap .rounded-full{
	border-radius: 100%;
    background-color: rgb(254 243 199 / 1);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 2rem;
    height: 2rem;
}
.prevIpCheckModalWrap .prevIpBg{
    background-color: #FFF;
    border: 1px solid #fef3c7;
    border-radius: 8px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0.5rem 0;
}
.prevIpCheckModalWrap .prevIp{
	display: flex;
    justify-content: space-between;
}
.prevIpCheckModalWrap .text-base{
	margin: 0 0 0.4rem 0;
}
.prevIpCheckModalWrap .text-grey{
	color: #4b5563;
}
.prevIpCheckModalWrap .text-orange{
	color: #b45309;
}
.prevIpCheckModalWrap .text-black{
	color: #000;
}
.prevIpCheckModalWrap .text-orange{color: rgb(217 119 6 / 1);}
.prevIpCheckModalWrap .text-grey{color: rgb(156 163 175 / 1);}
.prevIpCheckModalContent.middle{
	width: 65%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}
/* 2025-12-10 / jj_baek / 공용 noti 모달 */
.cmnNotiModalWrap{
	position: fixed;
    /*border: 1px solid rgb(253 230 138 / 1);*/
    border-radius: 5px;
    width: 24rem;
    /* height: 12rem; */
    right: 2rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity:0;
    color:#FFF;
    background-color: #FFF;
}
:root{
	--cmnNotiModal-darkmode-background-color:#252424;
}
.darkmode .cmnNotiModalWrap{
	background-color: var(--cmnNotiModal-darkmode-background-color);
	border: 1px solid #4e5053;
}
.cmnNotiModalWrap .cmnNotiModalContent{
	width:100%;
	position:relative;
}
.cmnNotiModalWrap .cmnNotiModalContent.header{
	height:5rem;
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.cmnNotiModalWrap .cmnNotiModalContent.header .header-left{
	height:100%;width: 3rem;
}
.cmnNotiModalWrap .cmnNotiModalContent.header .header-middle{
	height: 100%;
    width: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:0.4rem;
}
.cmnNotiModalWrap .cmnNotiModalContent.header .header-title{
    font-size: large;
    font-weight: 800;
}
.cmnNotiModalWrap .cmnNotiModalContent.header .header-time{
}
.cmnNotiModalWrap .cmnNotiModalContent.header .header-right{
	height:100%;width: 3rem;
}
.cmnNotiModalWrap .cmnNotiModalContent.body{
	height: min-content;
	background-color: #FFF;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body{background-color:var(--cmnNotiModal-darkmode-background-color);}
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area{
	--tw-gradient-cmnmodal: rgba(255,247,237,1), #FFF;
    background-image: linear-gradient(to bottom, var(--tw-gradient-cmnmodal));
    height: min-content;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .point-area{background-image:linear-gradient(to bottom, var(--cmnNotiModal-darkmode-background-color), var(--cmnNotiModal-darkmode-background-color));}
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .hide{ display:none; }
/* point-wrapper 와 community-wrapper, loadingCompleteWrap 의 공통 css */
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .point-wrapper,
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-wrapper,
.loadingWrap .loadingCompleteWrapper
{
    width: 90%;
    height: 4rem;
    margin: 1rem 0 1rem 0;
    background-color: #FFF;
    box-shadow: 0 1px 2px 0px lightgrey;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .point-area .point-wrapper,
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-wrapper,
.darkmode .loadingWrap .loadingCompleteWrapper{
	background-color:#2c2d2e;
	box-shadow:none;
}
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-wrapper{ flex-direction: column; gap: 0.4rem; }
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .point-wrapper.hide,
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-wrapper.hide{ display:none; }
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-icon { margin-right:0.3rem; }
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-icon {color:#FFF;}

.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .point-wrapper .reward-point{ color:#d97706; font-size:x-large; font-weight:800; }
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .point-wrapper .reward-unit{ color:#4b5563; padding-left: 0.4rem; font-size:large; }
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .point-area .point-wrapper .reward-unit{ color:#FFF;}
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-name-wrap{ display:flex; align-items: center; }
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-name{ color:#111827; font-size:large; font-weight:700; }
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-name{ color:#FFF;}
.cmnNotiModalWrap .cmnNotiModalContent.body .point-area .community-member{ color:#6b7280; font-size:small; font-weight:500; }
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area{
    height: min-content;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper{
    width: 90%;
    height: 4rem;
    background-color: #FFF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper{background-color:var(--cmnNotiModal-darkmode-background-color);}
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper .from-profile-wrapper{
	width:20%;
	height:100%;
	display:flex;
	justify-content: center;
    align-items: center;
}
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper .from-profile-wrapper .from-profile{
	border-radius:100%;
	--tw-gradient-profile:#3b82f6, #a855f7;
	background-image: linear-gradient(to right, var(--tw-gradient-profile));
	height:3.5rem;width:3.5rem;
	display:flex;
	justify-content: center;
    align-items: center;
}
.cmnNotiModalWrap .img-from-profile{ width: 94%; height: 94%; border-radius: 50%; }
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper .from-info-wrapper{
	width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap:0.4rem;
}
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper .from-info-wrapper .from-info-name{
	color:#111827;
	font-size:larger;
	font-weight:600;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper .from-info-wrapper .from-info-name{color:#FFF;}
.cmnNotiModalWrap .cmnNotiModalContent.body .from-area .from-wrapper .from-info-wrapper .from-info-dept{
	color:#6b7280;
	font-size:larger;
	font-weight:500;
}

.cmnNotiModalWrap .cmnNotiModalContent.body .content-area{
    height: min-content;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.cmnNotiModalWrap .cmnNotiModalContent.body .content-area .content-wrapper{
    width: 90%;
    height: min-content;
    background-color: #f9fafb;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .content-area .content-wrapper{background-color: #2c2d2e;}
.cmnNotiModalWrap .cmnNotiModalContent.body .content-area .content-wrapper .content{
	color:#374151;
	padding: 0rem 1rem 0rem 1rem;
    line-height: 1.625;
    font-size: larger;
    height:3rem; /* 내용이 달라도 노티 높이 사이즈를 고정해야 함*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.body .content-area .content-wrapper .content{color:#FFF;}
.cmnNotiModalWrap .cmnNotiModalContent.footer{
	height:5rem;
	background-color:#FFF;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.footer{background-color: var(--cmnNotiModal-darkmode-background-color);}
.cmnNotiModalWrap .cmnNotiModalContent.footer .footer-area{
    height: min-content;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.cmnNotiModalWrap .cmnNotiModalContent.footer .btn-wrapper{
	width: 90%;
    height: 5rem;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.footer .btn-wrapper{background-color: var(--cmnNotiModal-darkmode-background-color);}
.cmnNotiModalWrap .cmnNotiModalContent.footer .btn-wrapper .btn-move{
    width: 45rem;
    height: 3rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 2px 0px lightgrey;
    cursor:pointer;
    transition:all 0.5s cubic-bezier(.4, 0, .2, 1);
    font-size: larger;
    font-weight: 600;
}
.darkmode .cmnNotiModalWrap .cmnNotiModalContent.footer .btn-wrapper .btn-move{background:none !important;background-color:#5c5b5b !important;}
.cmnNotiModalWrap .cmnNotiModalContent.footer .btn-wrapper .btn-move:hover{
	opacity:0.9;
	transition:all 0.5s cubic-bezier(.4, 0, .2, 1);
}
.cmnNotiModalWrap .cmnNotiModalContent.footer .btn-wrapper .btn-remove{
    width: 10rem;
    height: 3rem;
    border-radius: 5px;
    background-color: #f3f4f6;
    color: #374151;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    font-size: larger;
    font-weight: 600;
}
.cmnNotiModalWrap.show{
	animation:modalShow 1s ease forwards;
}
.cmnNotiModalWrap.show.notioff{
	animation:modalOff 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes modalOff{
	0%{transform:scale(1);opacity:1;}
	100%{transform:scale(0);opacity:0;}
}
.cmnNotiModalContent .cmnModalCloseBtn{
	display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
    cursor:pointer;
}
.cmnNotiModalWrap .noti-info-wrap{
	width: 90%;
    display: flex;
    flex-direction: row-reverse;
}
.darkmode .cmnNotiModalWrap .noti-info-wrap{background-color: var(--cmnNotiModal-darkmode-background-color);}
.cmnNotiModalWrap .noti-info{
	color:grey;
	padding:0.2rem;
}
img.reward-point-image{width:22px;height:22px;}
/* 2025-12-17 / jj_baek / 커뮤니티 초대 */
.communityInviteWrap { margin: 1rem; }
.communityInviteWrap .line, /* 공통 */
.loadingWrap .line{ margin-bottom: 0.4rem; }
.communityInviteWrap .toTitle{ font-size:medium;font-weight:500; }
.communityInviteWrap .toInput{ 
    height: 2rem;
    padding: 0 0.5rem 0 0.5rem;
    border: 1px solid lightgrey;
    color: lightgrey;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor:pointer;
}
.communityInviteWrap .toInput.essential{border-color:#eb765f;}
.communityInviteWrap .inputMsg{ width:100%; border: none;}
.darkmode .communityInviteWrap .inputMsg {background-color:#262626;color:#e8e8e8;}
.communityInviteWrap .inputMsg::placeholder{color:lightgrey;}
.communityInviteWrap .selectedUserList{ 
	border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 21rem;
    overflow: hidden;
    overflow-y: scroll;
}
.communityInviteWrap .selectedUserList .selectedUserListTitle {color:#4b5563;}
.darkmode .communityInviteWrap .selectedUserList .selectedUserListTitle {color:#d4e6ff;}
.communityInviteWrap .lineEnd-hr{margin-top:1rem;border: none; border-top: 1px solid lightgrey;}
.communityInviteWrap .selectedUserEle{
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background-color: #f9fafb;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.darkmode .communityInviteWrap .selectedUserEle{ background-color:#c2c2c2; }
.communityInviteWrap .selectedUserEle .selectedUserEle-left{
	display: flex;
    flex-direction: column;
    width: 80%;
}
.communityInviteWrap .selectedUserEle .selectedUserEle-right{cursor:pointer;}
.communityInviteWrap .selectedUserEle .selectedUserEle-left .selectedUserName{ color:#1f2937; font-weight:500; padding-bottom: 0.2rem;}
.communityInviteWrap .selectedUserEle .selectedUserEle-left .selectedUserMail{ color:#6b7280;}
.communityInviteWrap .inviteBtnWrap{ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 1rem; }
.communityInviteWrap .sendInvite{
	width: 16rem;
    height: 3rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 2px 0px lightgrey;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
    font-size: larger;
    font-weight: 600;
    color: #FFF;
    gap: 0.5rem;
}
.darkmode .communityInviteWrap .sendInvite {
	background: linear-gradient(to bottom, #1e70dc, #1d64c4) !important; 
	box-shadow: none !important; 
	border: 1px solid #1d64c4 !important;
}
.communityInviteWrap .sendInvite:hover{opacity:0.9;transition:all 0.5s cubic-bezier(.4, 0, .2, 1);}
.communityInviteWrap .sendCancel{
	width: 4rem;
    height: 3rem;
    border-radius: 5px;
    background-color: #f3f4f6;
    color: #374151;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: larger;
    font-weight: 600;
}
.loadingWrap{ height: 100%;background-color: #f3f4f6; }
.darkmode .loadingWrap{ background: none; }
.loadingWrap .loadingBar {height: 100%;opacity: 70%;animation: inviteLoading 1s ease forwards;}
@keyframes inviteLoading{
	0%{transform:scaleY(0);transform-origin:bottom;}
	100%{transform:scaleY(1);transform-origin:bottom;}
}
.loadingWrap .loadingComplete {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;height: 100%;
}
.loadingWrap .bg-green-round { background-color:#dcfce7; border-radius:50%; padding: 1rem;}
.loadingWrap .loadingCompleteWrapper {     
	flex-direction: column;
    padding: 1rem 0 1rem 0;
    height: 70%;
}
.darkmode .loadingWrap .loadingCompleteWrapper { background:none;}
.loadingWrap .complete-msg {    
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1rem;
}
.loadingWrap .complete-msg-bold{ color:#1f2937;font-weight:700;font-size: x-large;}
.darkmode .loadingWrap .complete-msg-bold{ color:#86a0c6;}
.loadingWrap .complete-msg-medium{ color:#6b7280;font-size: medium;}
/* 전체 */
.mini-MOIN-img-wrap {
  width: 200px;
  height: 110px;
  border: 1px solid lightgrey;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin-top: 1rem;
  animation: mini-MOIN-show 2s ease forwards;
}
@keyframes mini-MOIN-show{
	0%{opacity:0;}
	100%{opacity:1;}
}
/* 상단 헤더 */
.mini-MOIN-img-header {
  width: 100%;
  height: 5%;
  background-color: red;
  position: relative;
}
/* 노티 이미지 */
.mini-MOIN-img-header-noti {
  width: 30px;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 10px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 lightgrey;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: mini-MOIN-noti-show 2s ease infinite;
}
.mini-MOIN-img-header-noti.icon{
	animation:none;
	transform: scale(0.5);
	position: static;
	cursor:pointer;
	transition:all 0.5s ease;
}
.mini-MOIN-img-header-noti.icon.noti-x{
	transform: scale(0.4);
	transition:all 0.5s ease;
}
.mini-MOIN-img-header-noti.icon.noti-x::after{
    content: "";
    transform: scale(1.5);
    width: 1rem;
    height: 1rem;
    position: absolute;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="%23F44336" stroke-width="8" cx="50" cy="50" r="40"/><line stroke="%23F44336" stroke-width="8" stroke-linecap="round" x1="21.7" y1="21.7" x2="78.3" y2="78.3"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 3rem;
    height: 3rem;
    top: -3px;
    left: -9px;
}
.darkmode .mini-MOIN-img-header-noti { background-color: #8a8a8a; }
@keyframes mini-MOIN-noti-show{
	0%{opacity:0;transform:translateY(0);}
	100%{opacity:1;transform:translateY(4px);}
}
.reward-noti-toggle-wrap{
    display: flex;
    align-items: center;
    position:relative;
}
/* 노티 상단 바 */
.mini-MOIN-img-header-bar {
  width: 100%;
  height: 15%;
  background-color: red;
}

/* 노티 버튼 */
.mini-MOIN-img-header-dot {
  width: 15px;
  height: 5px;
  margin: 0 0 5px 4px;
  background-color: red;
  border-radius: 2px;
}
/* 본문 영역 */
.mini-MOIN-img-body {
  width: 95%;
  height: 85%;
  padding: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.darkmode .mini-MOIN-img-body { background-color: #636363; }
/* 포틀릿 */
.mini-MOIN-img-item {
  width: 30px;
  height: 27px;
  border-radius: 3px;
  background-color: #ededed;
  box-shadow: 0 1px 2px 0 lightgrey;
}
button.highlight{overflow:hidden;}
button.highlight::after{
	content: "";
    position: absolute;
    background-color: var(--currentTheme);
    width: 1rem;
    height: 1rem;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation:highlight-inner-btn 2s ease infinite;
}
@keyframes highlight-inner-btn{
	0%{ transform:translate(-50%, -50%) scale(0);opacity:0.8;}
	100%{transform:translate(-50%, -50%) scale(10);opacity:0;}
}

/* ===============================================
   플로팅 TODO (MOIN Extension 스타일 적용)
   2025-12-03 / 플로팅 드래그 가능 TODO 컴포넌트
   =============================================== */

/* 플로팅 TODO 컨테이너 */
/* ========================================
   플로팅 TODO 컨테이너
   ======================================== */
#floating-todo-container {
    --todo-theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --todo-theme-color: #667eea;
    position: fixed;
    top: 80px;
    right: 40px;
    width: 360px;
    height: 500px;
    background-color: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    resize: both;
    overflow: hidden;
    min-width: 300px;
    min-height: 350px;
    max-width: 600px;
    max-height: 80vh;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* 드래그 오버 하이라이트 효과 */
#floating-todo-container.drag-over {
    box-shadow: 0 0 0 2px var(--todo-theme-color), 0 10px 40px rgba(0,0,0,0.18);
}

#floating-todo-container.drag-over::before {
    content: '여기에 드롭';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(102, 126, 234, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--todo-theme-color);
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    border-radius: 16px;
    pointer-events: none;
}

/* 헤더 (드래그 핸들) */
#floating-todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: move;
    background: var(--todo-theme-gradient);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    flex-shrink: 0;
    user-select: none;
}

#floating-todo-header .todo-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

#floating-todo-header .todo-title {
    font-size: 16px;
    letter-spacing: -0.3px;
}

#floating-todo-header .todo-count {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

#floating-todo-header .todo-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 신 TODO 버전 전환 링크 */
#floating-todo-header .todo-switch-link {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 3px 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    transition: all 0.2s ease;
}

#floating-todo-header .todo-switch-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.3);
}

#floating-todo-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

#floating-todo-close-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.05);
}

/* 리스트 래퍼 */
#floating-todo-list-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
    padding-bottom: 8px;
    background: #fafbfc;
}

#floating-todo-list-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#floating-todo-list-wrapper li {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    margin: 4px 12px;
    background: #fff;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #eef0f2;
}

#floating-todo-list-wrapper li:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #e0e3e6;
}

#floating-todo-list-wrapper li.complete {
    background: #f8f9fa;
    border-color: #f0f0f0;
}

#floating-todo-list-wrapper li.complete span.todo-text {
    text-decoration: line-through;
    color: #adb5bd;
    cursor: default;
}

#floating-todo-list-wrapper li span.todo-text {
    flex-grow: 1;
    margin: 0;
    margin-right: 10px;
    line-height: 1.5;
    cursor: pointer;
    word-break: break-word;
    color: #343a40;
    font-size: 13px;
}

#floating-todo-list-wrapper li span.todo-text:hover {
    color: var(--todo-theme-color);
}

/* [롯데] 2025-12-05 / 인라인 편집 스타일 */
#floating-todo-list-wrapper li span.todo-text.editing {
    background-color: #fff;
    border: 1px solid var(--todo-theme-color);
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

#floating-todo-list-wrapper li span.todo-text[contenteditable="true"]:focus {
    background-color: #fff;
    border: 1px solid var(--todo-theme-color);
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
}

/* 체크박스 커스텀 스타일 */
#floating-todo-list-wrapper .todo-complete-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--todo-theme-color);
    flex-shrink: 0;
    border-radius: 4px;
    margin-right: 8px;
}

/* 중요 표시 아이콘 */
#floating-todo-list-wrapper .todo-impt-btn {
    flex-shrink: 0;
    margin-right: 10px;
    transition: transform 0.15s ease;
}

#floating-todo-list-wrapper .todo-impt-btn:hover {
    transform: scale(1.15);
}

/* 링크 버튼 */
#floating-todo-list-wrapper .todo-link-btn {
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.15s ease;
}

#floating-todo-list-wrapper .todo-link-btn:hover {
    transform: scale(1.15);
}

/* 삭제 버튼 */
#floating-todo-list-wrapper .todo-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #dee2e6;
    font-size: 16px;
    font-weight: 500;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#floating-todo-list-wrapper li:hover .todo-delete-btn {
    opacity: 1;
}

#floating-todo-list-wrapper .todo-delete-btn:hover {
    color: #fff;
    background: #ff6b6b;
}

/* TODO 항목 메인 영역 */
#floating-todo-list-wrapper .todo-item-main {
    display: flex;
    align-items: center;
    width: 100%;
}

/* 확장 패널 (수정) */
#floating-todo-list-wrapper .todo-item-expand {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 0 0;
    margin-top: 10px;
    border-top: 1px dashed #e9ecef;
}

#floating-todo-list-wrapper .todo-edit-row,
#floating-todo-list-wrapper .todo-date-row,
#floating-todo-list-wrapper .todo-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#floating-todo-list-wrapper .todo-item-expand label {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

#floating-todo-list-wrapper .todo-edit-content {
    flex: 1;
    min-width: 150px;
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
}

#floating-todo-list-wrapper .todo-edit-content:focus {
    border-color: var(--todo-theme-color);
    outline: none;
}

#floating-todo-list-wrapper .todo-start-date,
#floating-todo-list-wrapper .todo-limit-date {
    padding: 4px 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
}

#floating-todo-list-wrapper .todo-save-btn {
    padding: 6px 20px;
    background: var(--todo-theme-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

#floating-todo-list-wrapper .todo-save-btn:hover {
    opacity: 0.9;
}

#floating-todo-list-wrapper .todo-cancel-btn {
    padding: 6px 16px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-left: 6px;
}

#floating-todo-list-wrapper .todo-cancel-btn:hover {
    background: #5a6268;
}

/* 입력 폼 */
#floating-todo-add-form {
    display: flex;
    padding: 16px;
    border-top: 1px solid #eef0f2;
    background-color: #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    flex-shrink: 0;
    gap: 10px;
}

#floating-todo-new-content {
    flex-grow: 1;
    border: 2px solid #eef0f2;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
    background: #fafbfc;
}

#floating-todo-new-content:focus {
    border-color: var(--todo-theme-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

#floating-todo-new-content::placeholder {
    color: #adb5bd;
}

#floating-todo-add-btn {
    padding: 12px 20px;
    border: none;
    background: var(--todo-theme-gradient);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
    letter-spacing: -0.2px;
}

#floating-todo-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#floating-todo-add-btn:active {
    transform: translateY(0);
}

/* 로딩 상태 */
.floating-todo-loader {
    padding: 60px 20px;
    text-align: center;
    color: #868e96;
    font-size: 14px;
}

.floating-todo-loader::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 16px;
    border: 3px solid #eef0f2;
    border-top-color: var(--todo-theme-color, #667eea);
    border-radius: 50%;
    animation: todoSpin 0.8s linear infinite;
}

@keyframes todoSpin {
    to { transform: rotate(360deg); }
}

/* 완료 섹션 구분 */
.todo-section-divider {
    padding: 10px 20px;
    background-color: #f1f3f4;
    font-size: 11px;
    color: #868e96;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 8px 0;
}

/* 진행중 헤더 - 위쪽 여백 제거 */
.todo-section-divider:first-child,
.todo-active-header {
    margin-top: 0;
}

/* 완료됨 헤더 (접기/펼치기) */
.todo-completed-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.todo-completed-header:hover {
    background-color: #e9ecef;
}

.todo-completed-toggle {
    display: inline-block;
    font-size: 9px;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

/* 빈 상태 메시지 */
.todo-empty-message {
    padding: 50px 20px;
    text-align: center;
    color: #adb5bd;
    font-size: 14px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.todo-empty-message::before {
    content: '📝';
    display: block;
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* 액션 토스트 메시지 */
#floating-todo-action-wrap {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--todo-theme-gradient);
    color: white;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    display: none;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    animation: todoToastIn 0.3s ease;
}

@keyframes todoToastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 스크롤바 스타일 */
#floating-todo-list-wrapper::-webkit-scrollbar {
    width: 6px;
}

#floating-todo-list-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

#floating-todo-list-wrapper::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 10px;
}

#floating-todo-list-wrapper::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* 리사이즈 핸들 스타일 */
#floating-todo-container::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #dee2e6 50%);
    border-radius: 0 0 12px 0;
}

/* [롯데] 2025-12-08 / TODO 항목 애니메이션 효과 */
#floating-todo-list-wrapper {
    transition: opacity 0.15s ease;
}
#floating-todo-list-wrapper.todo-refreshing {
    opacity: 0.5;
}

#floating-todo-list-wrapper li {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* 완료 처리 애니메이션 - 오른쪽으로 사라짐 */
#floating-todo-list-wrapper li.todo-completing {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
}

/* 완료 취소 애니메이션 - 왼쪽으로 사라짐 */
#floating-todo-list-wrapper li.todo-uncompleting {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
}

/* 완료함에서 나타나는 애니메이션 */
#floating-todo-list-wrapper li.todo-appearing-completed {
    animation: todoAppearCompleted 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes todoAppearCompleted {
    from {
        opacity: 0;
        transform: translateX(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 진행함에서 나타나는 애니메이션 */
#floating-todo-list-wrapper li.todo-appearing-active {
    animation: todoAppearActive 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes todoAppearActive {
    from {
        opacity: 0;
        transform: translateX(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 중요도 토글 애니메이션 - 은은한 페이드 효과 */
#floating-todo-list-wrapper li.todo-toggling-important {
    animation: todoImportantFade 0.25s ease;
}

@keyframes todoImportantFade {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 중요 항목으로 올라가는 애니메이션 */
#floating-todo-list-wrapper li.todo-moving-up {
    animation: todoMoveUp 0.3s ease-out;
}

@keyframes todoMoveUp {
    0% {
        opacity: 0.5;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 중요 해제로 내려가는 애니메이션 */
#floating-todo-list-wrapper li.todo-moving-down {
    animation: todoMoveDown 0.3s ease-out;
}

@keyframes todoMoveDown {
    0% {
        opacity: 0.5;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 중요 항목 강조 효과 - 은은한 표시 */
#floating-todo-list-wrapper li[data-imptyn="Y"] {
    border-left: 2px solid #ffca28;
}

/* 새 항목 추가 애니메이션 */
#floating-todo-list-wrapper li.todo-new-item {
    animation: todoSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes todoSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 삭제 애니메이션 */
#floating-todo-list-wrapper li.todo-deleting {
    opacity: 0;
    transform: scale(0.8);
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* 구 TODO 버전 전환 링크 */
.todo_wrap .todo_title .todo_switch_link,
.todo_title .todo_switch_link,
a.todo_switch_link {
    display: inline-block !important;
    font-size: 11px !important;
    color: #666 !important;
    text-decoration: none !important;
    padding: 2px 8px !important;
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    margin: 0 5px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

.todo_wrap .todo_title .todo_switch_link:hover,
.todo_title .todo_switch_link:hover,
a.todo_switch_link:hover {
    color: #333 !important;
    background: #e0e0e0 !important;
    border-color: #ccc !important;
}

/* [롯데] 2025-01-14 / dongin.kang / 일정 좌측 메뉴 - 색상 변경 비활성화 */
.sub_depth_check span.color_set {
    cursor: default !important;
}

/* [롯데] 2025-01-14 / dongin.kang / 일정 +1 모달창 크기 확대 */
div.schedule_etc {
    width: 450px !important;
    min-height: 100px !important;
}
div.schedule_etc dl > dd .sc_title {
    width: 320px !important;
}

/* 2026-01-15 / jj_baek / 공유자원 정보 보기 div 팝업 용*/
div#shareDetailModal_div .popup_layer.popup_active{width:50%;}
div#shareDetailModal_div .contents_wrap {background-color:#FFF;border-radius:5px;padding: 2rem;box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);}
.darkmode div#shareDetailModal_div .contents_wrap {background-color:#2e2e2e;}
.svgCloseBtn { position: absolute;top: 1rem;right: 1rem;cursor: pointer;}

/* 2026-01-21 / dongin.kang / 이미지 탭형 게시판 포틀릿 */
/* 탭 텍스트 영역 (오른쪽 상단) - 주석: 표준 탭 버튼 사용으로 변경 */
/*
.bbs_image_tab_portlet .title_wrap .etc_wrap .tab_buttons {
	display: flex;
	gap: 0;
	align-items: center;
}
.bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn {
	padding: 0 8px;
	font-size: 13px;
	background: none;
	border: none;
	border-right: 1px solid #ddd;
	cursor: pointer;
	transition: all 0.2s;
	color: #888;
}
.bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn:last-child {
	border-right: none;
	padding-right: 0;
}
.bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn:first-child {
	padding-left: 0;
}
.bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn:hover {
	color: #333;
}
.bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn.active {
	color: #333;
	font-weight: bold;
}
*/

/* 다크모드 탭 텍스트 - 주석: 표준 탭 버튼 사용으로 변경 */
/*
.darkmode .bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn {
	border-right-color: #555;
	color: #aaa;
}
.darkmode .bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn:hover {
	color: #fff;
}
.darkmode .bbs_image_tab_portlet .title_wrap .etc_wrap .tab_btn.active {
	color: #fff;
	font-weight: bold;
}
*/

/* 포틀릿 전체 레이아웃 (flex로 구성하여 overflow 처리) */
.bbs_image_tab_portlet {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 0 !important;
}

/* 2026-04-03 / jj_baek / 포틀릿 padding 제거로 title_wrap에 margin으로 좌우 여백 부여 (border-bottom이 margin 안쪽에 그려져 20px 들여쓰기 유지) */
.bbs_image_tab_portlet div.title_wrap.with_etc.for_portlet {
	margin-left: 20px;
	margin-right: 20px;
}

.bbs_image_tab_portlet .title_wrap {
	flex-shrink: 0;
}
@keyframes bbs_tab_border_grow {
	from { border-bottom-width: 0px; }
	to   { border-bottom-width: 3px; }
}
div.tab_box.bbs_image_tab_portlet .title .eb_btn.active {
	border-bottom: 3px solid #8f8981;
	animation: bbs_tab_border_grow 0.35s ease forwards;
}

/* 리스트 영역 */
.bbs_image_tab_portlet .list_wrap {
	flex: 1;
	padding: 0;
	margin: 0;
}

.bbs_image_tab_list {
	padding: 0;
	margin: 0;
}

.bbs_image_tab_list ul {
	padding: 0;
	margin: 0;
}

.bbs_image_tab_list li {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr auto;
	gap: 0 8px;
	padding: 5px 20px 5px 20px;
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: background 0.15s;
}
.bbs_image_tab_list li::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: #e5e5e5;
}
.bbs_image_tab_list li:last-child::before {
	display: none;
}
.bbs_image_tab_list li:hover {
	background-color: #f8faff;
}
.bbs_image_tab_list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 2px;
	background: var(--graidient-theme);
	border-radius: 0 2px 2px 0;
	transition: opacity 0.5s;
	opacity: 0;
}
.bbs_image_tab_list li:hover::after {
	opacity: 1;
}

/* 텍스트 영역 (왼쪽) - wrapper 역할만 */
.bbs_image_tab_list li .text_area {
	display: contents;
}

/* 제목 영역 - 첫 번째 행 전체 */
.bbs_image_tab_list li .text_area .title {
	grid-row: 1;
	grid-column: 1;
	align-self: center;
	font-size: 14px;
	font-weight: 600;
	color: #000000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
	min-width: 0;
}
/* 2026-04-10 / jj_baek / 이노베이트 썸네일 포틀릿 읽어도 볼드 안한다고 해서 주석처리
.bbs_image_tab_list li.active .text_area .title {
	font-weight: 600;
	color: #000000;
}
*/

/* 2026-04-10 / jj_baek / 이노베이트 썸네일 포틀릿 게시시판 이름 표시 및 바로가기 */
.bbs_image_tab_portlet .bbs_chip {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	white-space: nowrap;
	cursor: pointer;
	background: var(--chip-color, rgba(0,0,0,0.12));
	color: #fff;
	flex-shrink: 0;
	margin-right: 5px;
	transition: background 0.15s;
}
.darkmode .bbs_image_tab_portlet .bbs_chip{background:#707070;}
.bbs_image_tab_portlet .bbs_chip:hover {
	background: var(--chip-color-hover, rgba(0,0,0,0.25));
}
.bbs_image_tab_portlet .text_area .title {
	display: flex;
	align-items: center;
	overflow: hidden;
}
.bbs_image_tab_portlet .text_area .title > .header_tag,
.bbs_image_tab_portlet .text_area .title > span.title_text {
	flex-shrink: 0;
}
.bbs_image_tab_portlet .text_area .title > .title_text_main {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* 말머리 태그 */
.bbs_image_tab_list li .text_area .title .header_tag {
	display: inline-block;
	padding: 2px 6px;
	background-color: var(--headerBgColor);
	color: var(--headerFontColor);
	font-size: 12px;
	border-radius: 3px;
	margin-right: 4px;
	font-weight: normal;
	border: 1px solid;
	border-color: var(--headerBgColor);
}

/* 메타 정보 (아이콘 포함) - 두 번째 행 */
.bbs_image_tab_list li .text_area .meta_info {
	grid-row: 2;
	grid-column: 1;
	display: flex;
	gap: 10px;
	font-size: 13px;
	align-items: center;
	color: #707070;
	min-width: 0;
}
.bbs_image_tab_list li .text_area .meta_info .meta_item {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #707070;
}
.bbs_image_tab_list li .text_area .meta_info .meta_date {
	color: #707070;
}
.bbs_image_tab_list li .text_area .meta_info .meta_sep {
	margin: 0 3px;
	color: rgba(0,0,0,0.35);
	flex-shrink: 0;
}
.bbs_image_tab_list li .text_area .meta_info .meta_stats {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 8px;
	flex-shrink: 0;
}

/* 아이콘 스타일 */
.bbs_image_tab_list li .text_area .meta_info i {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.6;
}
.bbs_image_tab_list li .text_area .meta_info i.icon_view {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}
.bbs_image_tab_list li .text_area .meta_info i.icon_like {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
.bbs_image_tab_list li .text_area .meta_info i.icon_comment {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* 썸네일 영역 (오른쪽) - 두 행 전체 차지 */
/* 2026-03-24 / dongin.kang / 썸네일 크기 106x57 변경 */
/* 2026-06-26 / dongin.kang / 썸네일 크기 106x70 변경 */
.bbs_image_tab_list li .thumbnail_area {
	grid-row: 1 / 3;
	grid-column: 2;
	width: 106px;
	height: 70px;
	overflow: hidden;
	border-radius: 5px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bbs_image_tab_list li .thumbnail_area img {
	width: 106px;
	height: 70px;
	object-fit: cover;
}
.bbs_image_tab_list li .thumbnail_area .no_img {
	font-size: 11px;
	color: #ccc;
	text-align: center;
}
.bbs_image_tab_list li .thumbnail_area.no_image {
	display: none;
}
.bbs_image_tab_list li .thumbnail_area.no_thumb {
	background: #f0f0f0;
}

/* 다크모드 지원 */
.darkmode .bbs_image_tab_list li::before {
	background: #444;
}
.darkmode .bbs_image_tab_list li:hover {
	background-color: #314169;
}
.darkmode .bbs_image_tab_list li .text_area .title {
	color: #fff;
}
.darkmode .bbs_image_tab_list li.active .text_area .title {
	color: #aaa;
}
.darkmode .bbs_image_tab_list li .text_area .title .header_tag {
	background-color: #3f3f3f;
	color: #FFFFFF;
	border-color: var(--headerBgColor);
	box-shadow: inset 0px 1px 0px 0px rgba(127, 127, 125, 0.6);
}
.darkmode .bbs_image_tab_list li .text_area .meta_info .meta_item {
	color: #777;
}
.darkmode .bbs_image_tab_list li .text_area .meta_info .meta_date {
	color: #666;
}
.darkmode .bbs_image_tab_list li .text_area .meta_info i.icon_view {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}
.darkmode .bbs_image_tab_list li .text_area .meta_info i.icon_like {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
.darkmode .bbs_image_tab_list li .text_area .meta_info i.icon_comment {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}
.darkmode .bbs_image_tab_list li .thumbnail_area {
	background: #3f3f3f;
}
.darkmode .bbs_image_tab_list li .thumbnail_area .no_img {
	color: #555;
}

/* 2026-06-15 / bjj / 썸네일 포틀릿 좌측탭형 (이노베이트) - 레이아웃 변형 (cefBbsImageTabPortletView_leftTab.jsp) */
.bbs_image_lefttab_portlet {
	height: 100%;
	box-sizing: border-box;
}
.bbs_image_lefttab_portlet .lefttab_inner {
	display: flex;
	height: 100%;
	min-height: 0;
	padding: 10px 0;
	box-sizing: border-box;
}
/* 좌측 탭 영역 - 기본 36px, 포틀릿 hover 시 92px로 확장 */
.bbs_image_lefttab_portlet .left_tab_area {
	display: flex;
	flex-direction: column;
	width: var(--left-tab-collapsed-width, 36px);
	flex-shrink: 0;
	border-right: 1px solid #eef0f3;
	padding: 6px 0;
	gap: 2px;
	transition: width 0.22s ease;
}
.bbs_image_lefttab_portlet:hover .left_tab_area {
	width: var(--left-tab-expanded-width, 92px);
}
/* 탭 버튼 - 첫 글자(tab_first)는 항상 고정, 나머지(tab_rest)는 hover 시 노출 */
.bbs_image_lefttab_portlet .left_tab_area .tab_btn {
	all: unset;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 6px 10px 10px;
	font-size: var(--ui-font-size-title, 16px);
	font-weight: 500;
	color: #aab0be;
	cursor: pointer;
	border-left: 3px solid transparent;
	line-height: 1.45;
	overflow: hidden;
	transition: color 0.15s, background-color 0.15s;
}
.bbs_image_lefttab_portlet .left_tab_area .tab_btn.active {
	color: #1c2d4e;
	font-weight: 700;
	border-left-color: var(--chip-color, #1c2d4e);
	background-color: rgba(28, 45, 78, 0.04);
}
.bbs_image_lefttab_portlet .left_tab_area .tab_btn:hover:not(.active) {
	color: #555;
	background-color: rgba(0, 0, 0, 0.03);
}
/* 탭 이름 나머지 글자 - 너비/투명도 전환으로 자연스럽게 나타남 */
html.user_font_l .bbs_image_lefttab_portlet {
	--left-tab-collapsed-width: 38px;
	--left-tab-expanded-width: 100px;
}
html.user_font_xl .bbs_image_lefttab_portlet {
	--left-tab-collapsed-width: 40px;
	--left-tab-expanded-width: 108px;
}
html.user_font_xxl .bbs_image_lefttab_portlet {
	--left-tab-collapsed-width: 42px;
	--left-tab-expanded-width: 116px;
}
html[class*="user_font_"] .bbs_image_lefttab_portlet .left_tab_area .tab_btn .tab_first,
html[class*="user_font_"] .bbs_image_lefttab_portlet .left_tab_area .tab_btn .tab_rest {
	font-size: var(--ui-font-size-title) !important;
}
.bbs_image_lefttab_portlet .left_tab_area .tab_btn .tab_rest {
	display: block;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	flex-shrink: 0;
	transition: max-width 0.22s ease, opacity 0.18s ease;
}
.bbs_image_lefttab_portlet:hover .left_tab_area .tab_btn .tab_rest {
	max-width: 200px;
	opacity: 1;
}
/* AJAX 탭 클릭 직후 transition 일시 비활성화 - JS에서 tab-no-anim 클래스로 제어 */
.bbs_image_lefttab_portlet.tab-no-anim .left_tab_area,
.bbs_image_lefttab_portlet.tab-no-anim .left_tab_area .tab_btn .tab_rest {
	transition: none !important;
}
/* 우측 게시글 목록 영역 */
.bbs_image_lefttab_portlet .right_content_area {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.bbs_image_lefttab_portlet .right_content_area .list_wrap {
	height: 100%;
}
/* 게시글 li 균등 높이 분배 */
.bbs_image_lefttab_portlet .right_content_area .list_wrap > ul {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bbs_image_lefttab_portlet .right_content_area .list_wrap > ul > li {
	flex: 1;
	min-height: 0;
}
/* 썸네일 높이를 li 높이에 맞게 확장 */
.bbs_image_lefttab_portlet .right_content_area .list_wrap > ul > li .thumbnail_area {
	align-self: stretch;
	height: auto;
}
.bbs_image_lefttab_portlet .right_content_area .list_wrap > ul > li .thumbnail_area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bbs_image_lefttab_portlet .bbs_image_tab_list li::before {
	display: none;
}

/* 이미지 탭형 게시판 포틀릿 Edit 페이지 */
.bbs_image_tab_portlet_edit .tabInfoChild {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 5px 0;
	line-height: 30px;
	flex-wrap: wrap;
}
.bbs_image_tab_portlet_edit .tabInfoChild > p {
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}
.bbs_image_tab_portlet_edit .tabInfoChild > p.w_100 {
	width: 100%;
	padding-left: 45px;
	color: #888;
	word-break: break-all;
	white-space: normal;
}
.bbs_image_tab_portlet_edit .tabInfoChild > input[type="text"] {
	width: 120px;
	flex-shrink: 0;
}
.bbs_image_tab_portlet_edit .tabInfoChild > div {
	flex-shrink: 0;
}

/* [Chilsung] 2026-01-29 이미지 탭형 포틀릿 부서명 스타일 */
.bbs_image_tab_portlet .meta_dept {
	font-weight: 500;
}
/*2026-01-26 / jj_baek / [이노베이트] 일정 포틀릿에 캘린더 페이지로 바로가기 기능 추가 */
.calendar-portlet-more{
	position: absolute;
	display: flex;
	width: 25px;
	height: 25px;
	right: 0.5rem;
	top: 0.5rem;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: x-large;
	color:#FFF;
	opacity:0;
	transition:all 0.5s ease;
}
.calendar-portlet-1x1:hover .calendar-portlet-more{ opacity:0.8;transition:all 0.5s ease; }
.calendar-portlet-1x1:hover .calendar-portlet-more:hover{
	opacity:1;
	transform:scale(1.1);
	transition:all 0.5s ease;
	transform-origin:center;
	box-shadow:0 6px 16px rgba(102, 126, 234, 0.5);
}
.calendar-portlet-1x1 .month.month-clickable{
	cursor:pointer;
	border-radius:10px;
	background:none;
	transition: all 0.5s ease;
}
.calendar-portlet-1x1 .month.month-clickable:hover{
    color: var(--hover-fontcolor);
    transition: all 0.5s ease;
    transform: translateX(-10px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-portlet-1x1 .month.month-clickable:hover::after{
	content: '→';
    position: absolute;
    font-size: small;
    left: 4rem;
}
.calendar-portlet-1x1-box-flex {
	display: flex;
    align-items: center;
}

/* ========================================
   장중/장마감 상태 인디케이터 (주가 포틀릿)
   ======================================== */
.market-status-indicator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.market-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
/* 장중: 녹색 점 + 펄스 애니메이션 */
.market-status-dot.market-open {
	background-color: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: pulse-market-open 2s infinite;
}
@keyframes pulse-market-open {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}
/* 장마감: 회색 점 */
.market-status-dot.market-closed {
	background-color: #9ca3af;
}
.market-status-text.market-closed {
	opacity: 0.7;
}

/* 2026-01-27 / jj_baek / [자체] 자원예약 일자부분에 캘린더 기능 추가 */
.select_month.select-month-wrap{
	display: flex;
    justify-content: center;
    align-items: center;
}
.select_month .selected_date_wrap{
	display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -14px;
}
.select-month-wrap .hidden-calendar-wrap{
	display:none; /* 일간 에서만 표시되어야 함 */
	margin-left: 0.5rem;
    width: 0.9rem;
    height: 0.9rem;
    background: url(../../common/image/common/icon_portlet_calendar.png) no-repeat center;
    background-size: 50%;
    border-radius: 50%;
    box-shadow: 0px 0px 13px 0px rgba(61, 61, 61, 0.35);
    padding: 0.4rem;
}
.darkmode .select-month-wrap .hidden-calendar-wrap{ background-color:grey !important; }

/* 2026-01-30 / jj_baek / 조직도 우측 상세 영역 겸직자에 대한 본소속 표시 디자인*/
.basic_info .origin-company-wrap{
	display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
.basic_info .origin-company{ font-weight: 800;}
.basic_info .origin-company-value{ font-weight: 500; padding:0 2px; }

/* 2026-02-09 / jj_baek / 자원예약 가이드 툴팁 */
.share-guide-tip-time{
	position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px;
    border-radius: 5px;
    color: #ffffff;
    background:var(--graidient-theme); /*jsp에 style에서 지정한 테마 변수를 사용*/
    transform:scaleX(0);
    opacity:0;
    transform-origin:right;
    transition:all 0.2s ease;
    user-select:none;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.share-table-thead:has(th#timeHeader:hover, td.findAvailableRes:hover):not(:has(td.findAvailableRes.selected)) .share-guide-tip-time{
	transform:scaleX(1);
	opacity:1;
	transition:all 0.5s ease;
}

/* 2026-02-13 / dongin.kang / 빠른 예약 */
div.header_wrap div.header_icon .eb_btn.btn_header_quick_reserve { background: url("../img/ico_quickreserve.png") no-repeat center center; background-size: 30px 30px; cursor: pointer; }
.quick_reserve_search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; }
.quick_reserve_list .available { color: #2196F3; font-weight: 600; }
.quick_reserve_list .occupied { color: #999; }
.darkmode .quick_reserve_search { border-bottom-color: #444; }
.darkmode .quick_reserve_list .available { color: #64b5f6; }
.darkmode .quick_reserve_list .occupied { color: #777; }
.qr_spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid #e0e0e0; border-top-color: #2196F3; border-radius: 50%; animation: qr_spin 0.6s linear infinite; }
@keyframes qr_spin { to { transform: rotate(360deg); } }

/* 2026-05-21 / dongin.kang / 빠른예약 디자인 v3 — 시안 토큰 기반 (Pretendard-like minimal modern)
   !important 는 .eb_input / .eb_select / .eb_btn 디자인시스템 기본 룰 override 용 */

/* 분리선, 화살표, 자원유형 마진 */
div.quick_reserve_search .qr_divider { display: inline-block; width: 1px; height: 22px; background-color: #e4e7ec; flex: 0 0 auto; }
div.quick_reserve_search .qr_arrow { display: inline-flex; align-items: center; color: #8a91a0; font-size: 13px; padding: 0 2px; flex: 0 0 auto; }
/* 달력과 자원유형 사이 추가 마진 제거 — gap 8px 만 사용 */
div.quick_reserve_search .qr_type_sel { margin-left: 0 !important; }

/* wrapper(.eb_input.input_date / .eb_select) 의 기본 박스 효과 제거 → 안쪽 input/select 가 직접 박스 역할 */
div.quick_reserve_search .eb_input.input_date,
div.quick_reserve_search .eb_select {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}
/* 날짜 input 앞 기본 여백 (디자인시스템 padding-left) 제거 + 좌측 정렬 */
div.quick_reserve_search .eb_input.input_date input[type="text"] {
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: left !important;
}

/* 통일 박스 — 시안 토큰 (height 36, radius 7, line #E4E7EC, ink #1F2433) */
div.quick_reserve_search .eb_input.input_date input[type="text"],
div.quick_reserve_search .eb_select select,
div.quick_reserve_search .eb_btn.btn_base {
    background-color: #ffffff !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 7px !important;
    color: #1f2433 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 36px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    line-height: 34px !important;
    cursor: pointer !important;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s !important;
}

/* hover / focus */
div.quick_reserve_search .eb_input.input_date input[type="text"]:hover,
div.quick_reserve_search .eb_select select:hover,
div.quick_reserve_search .eb_btn.btn_base:hover {
    border-color: #8a91a0 !important;
}
div.quick_reserve_search .eb_input.input_date input[type="text"]:focus,
div.quick_reserve_search .eb_select select:focus {
    border-color: #2d3858 !important;
    box-shadow: 0 0 0 3px rgba(45,56,88,0.08) !important;
    outline: none !important;
}

/* duration 칩 — 종료시간 빠른 세팅 보조용 (active 표시 없음) */
div.quick_reserve_search button.eb_btn.btn_base.qr_duration_btn { min-width: 56px !important; padding: 0 10px !important; color: #4b5263 !important; font-weight: 500 !important; }
div.quick_reserve_search button.eb_btn.btn_base.qr_duration_btn:hover { color: #1f2433 !important; border-color: #8a91a0 !important; }

/* 2026-05-22 / dongin.kang / 빠른예약 모달 헤더 — 자원예약 바로가기 + 닫기 버튼 톤/위치 정리 */
.inner_popup_close.qr_header_actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
button.eb_btn.btn_base.qr_link_btn {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e4e7ec !important;
    color: #4b5263 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
button.eb_btn.btn_base.qr_link_btn:hover {
    border-color: #2d3858 !important;
    color: #2d3858 !important;
    background-color: #eef1f8 !important;
}
button.eb_btn.qr_close_btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    color: #8a91a0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
button.eb_btn.qr_close_btn:hover {
    background-color: #f0f2f5 !important;
}
.darkmode button.eb_btn.btn_base.qr_link_btn {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #ccc !important;
}
.darkmode button.eb_btn.btn_base.qr_link_btn:hover {
    border-color: #4c5f8f !important;
    color: #fff !important;
    background-color: #1f2845 !important;
}
.darkmode button.eb_btn.qr_close_btn { color: #999 !important; }
.darkmode button.eb_btn.qr_close_btn:hover { background-color: #333 !important; }

/* 상세 폼의 취소(secondary) 버튼 — 흰 박스, 검색 버튼(navy)과 짝 */
button.eb_btn.btn_base.qr_secondary_btn {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e4e7ec !important;
    color: #1f2433 !important;
    font-weight: 500 !important;
    padding: 0 22px !important;
    min-width: 84px !important;
    height: 36px !important;
    border-radius: 7px !important;
}
button.eb_btn.btn_base.qr_secondary_btn:hover {
    border-color: #8a91a0 !important;
}
.darkmode button.eb_btn.btn_base.qr_secondary_btn {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #fff !important;
}
.darkmode button.eb_btn.btn_base.qr_secondary_btn:hover {
    border-color: #888 !important;
}

/* 검색 버튼 / 상세 확인 버튼 — navy primary (검색영역 밖에서도 박스 사양 유지되도록 height/radius 직접 명시) */
div.quick_reserve_search button.eb_btn.btn_base.qr_search_btn,
button.eb_btn.btn_base.qr_search_btn {
    background-color: #2d3858 !important;
    background-image: none !important;
    border: 1px solid #2d3858 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 22px !important;
    min-width: 84px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
}
div.quick_reserve_search button.eb_btn.btn_base.qr_search_btn:hover,
button.eb_btn.btn_base.qr_search_btn:hover {
    background-color: #1a2240 !important;
    border-color: #1a2240 !important;
    color: #ffffff !important;
}

/* 2026-05-22 / dongin.kang / 검색 조건 변경 → stale 표시 (리스트 dim + 안내 배너 + 예약 차단) */
#qr_step_search .qr_stale_notice { display: none; }
#qr_step_search.qr_stale .qr_stale_notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 9px 14px;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 7px;
    color: #6b4f00;
    font-size: 12px;
    font-weight: 500;
}
#qr_step_search.qr_stale .quick_reserve_list,
#qr_step_search.qr_stale #qr_result_count {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
}
.darkmode #qr_step_search.qr_stale .qr_stale_notice {
    background-color: #3a2f12;
    border-color: #6b4f00;
    color: #ffe082;
}

/* 결과 표 안의 [예약] 버튼 — 검색 버튼과 동일 톤 */
.quick_reserve_list button.eb_btn.btn_base.qr_reserve_btn,
button.eb_btn.btn_base.qr_reserve_btn {
    background-color: #2d3858 !important;
    background-image: none !important;
    border: 1px solid #2d3858 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    height: 32px !important;
    padding: 0 14px !important;
    line-height: 30px !important;
}
.quick_reserve_list button.eb_btn.btn_base.qr_reserve_btn:hover,
button.eb_btn.btn_base.qr_reserve_btn:hover {
    background-color: #1a2240 !important;
    border-color: #1a2240 !important;
    color: #ffffff !important;
}
.darkmode div.quick_reserve_search button.eb_btn.btn_base.qr_search_btn,
.darkmode button.eb_btn.btn_base.qr_search_btn,
.darkmode .quick_reserve_list button.eb_btn.btn_base.qr_reserve_btn,
.darkmode button.eb_btn.btn_base.qr_reserve_btn {
    background-color: #4c5f8f !important;
    border-color: #4c5f8f !important;
}
.darkmode div.quick_reserve_search button.eb_btn.btn_base.qr_search_btn:hover,
.darkmode button.eb_btn.btn_base.qr_search_btn:hover,
.darkmode .quick_reserve_list button.eb_btn.btn_base.qr_reserve_btn:hover,
.darkmode button.eb_btn.btn_base.qr_reserve_btn:hover {
    background-color: #3a4970 !important;
    border-color: #3a4970 !important;
}

/* 다크모드 */
.darkmode div.quick_reserve_search .qr_divider { background-color: #444 !important; }
.darkmode div.quick_reserve_search .qr_arrow { color: #a0a0a0 !important; }
.darkmode div.quick_reserve_search .eb_input.input_date input[type="text"],
.darkmode div.quick_reserve_search .eb_select select,
.darkmode div.quick_reserve_search .eb_btn.btn_base {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #ffffff !important;
}
.darkmode div.quick_reserve_search .qr_duration_btn { color: #ccc !important; }
.darkmode div.quick_reserve_search .qr_duration_btn:hover { color: #fff !important; }
.darkmode div.quick_reserve_search .qr_search_btn {
    background-color: #4c5f8f !important;
    border-color: #4c5f8f !important;
    color: #ffffff !important;
}
.darkmode div.quick_reserve_search .qr_search_btn:hover {
    background-color: #3a4970 !important;
    border-color: #3a4970 !important;
}

/* 2026-03-04 / jj_baek / [이노베이트] 지식인 포틀릿 UI 조정 */
.jisicin-portlet-searcharea {display:flex;align-items: center;justify-content: flex-end;}
.jisicin-post-item{
	cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    margin-top:0 !important;
    padding-top: 10px;
}
.jisicin-post-item:hover{background-color:#f8faff;}
.darkmode .jisicin-post-item:hover{background-color:#314169;}
.jisicin-post-item::after{
	content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 2px;
    background:var(--graidient-theme); /*jsp에 style에서 지정한 테마 변수를 사용*/
    border-radius: 0 2px 2px 0;
    transition: opacity 0.5s;
    opacity:0;
}
.jisicin-post-item:hover::after{
	opacity:1;
}
.jisicin-post-item.active .link{font-weight:normal;color:#707070;}
.jisicin-content-area-wrap{height:20px}
.jisicin-content-short{
	color:#94a3b8;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:240px;
}
.jisicin-comment-svg{ width:11px;height:11px;color:#94a3b8;}
.jisicin-content-meta{
    padding-left: 40px;
    padding-top: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}
.jisicin-comment-count{ font-weight:700;}
.darkmode .jisicin-comment-count{color:#FFF !important;}
div.jisicin-portlet-nopadding{ padding:0;}
.darkmode div.jisicin-portlet-nopadding{ padding:0;}
.jisicin-portlet-header{ padding:20px 20px 18px 20px;display: flex;justify-content: space-between; align-items: center;height:22px;}
.jisicin-portlet-title{ font-weight: bold;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size:16px;}
.jisicin-post-title{ padding-left: 20px;padding-right: 20px;width:290px;}
.jisicin-search-btn{
	padding: 7px 0 7px 0;
    background:var(--graidient-theme); /*jsp에 style에서 지정한 테마 변수를 사용*/
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s;
    letter-spacing: -0.2px;
}
.darkmode .jisicin-search-btn{
	background: linear-gradient(to bottom, #1e70dc, #1d64c4) !important;
}
.jisicin-search-btn:hover{
	filter:brightness(0.8);
	transition: filter 0.2s;
}
.jisicin-portlet-search-input-wrap{
	position:relative;
}
.jisicin-portlet-search-input-wrap-icon{
	position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    color: #94a3b8;
    pointer-events: none;
}
input.jisicin-portlet-search-input{
	width: 70%;
    padding: 7px 10px 7px 29px;
    border: 1px solid #dde5f0;
    border-radius: 7px;
    color: #1e293b;
    font-size: 12px;
    outline: none;
    transition: all 0.2s;
}
input.jisicin-portlet-search-input:focus{
	border-color:var(--theme-color);
	box-shadow:0 0 0 3px rgba(37,99,235,0.07);
}
.darkmode input.jisicin-portlet-search-input:focus{
	border : 3px solid #2C6E93;
	transition : 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);	
}
/* 2026-03-10 / jj_baek / 게시판 팝업 -> 게시판 바로가기 개선 */
.title-area-ofh{
	height:20.7px;
	overflow:hidden;
}
.bbsName-show{
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(20px);
    display:flex;
    opacity:0;
    cursor:pointer;
}
.arrow-chip{
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    margin-top: 2px;
    margin-left: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    transition:all 0.2s ease;
    display: flex;
    align-items: center; 
}
.bbsName-show:hover .arrow-chip{
	transform: translateX(5px);
	transition:all 0.5s ease;
	background-color: rgba(0, 0, 0, 0);
}
.bbsPopTitle-slideup-hide{
	position:absolute;
	transform: translateY(-20px);
	transition:all 0.5s ease;
	opacity:0;
}
.bbsPopTitle-slideup-show{
	transform: translateY(0px);
	transition:transform 0.5s ease;
	opacity:1;
}
span#bbsName{
	padding-left:24px;
}
span#bbsName::before{
	content:"📋";
	position:absolute;
	left:0px;
}

/* 2026-03-19 / jj_baek / 부서정보 작성 팝업 (deptInfoWrite.jsp) 및 조직도 우측영역 조정 */
#deptTopBar .dept-top-btn {
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    box-sizing: border-box;
    vertical-align: middle;
}
.title_wrap.org-title-wrap{display:flex;justify-content: space-between;align-items: center;}
.title_wrap.org-title-wrap::after{content:'';position:absolute;}
span.icon-i{
	width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-style: italic;
    font-weight: 600;
    flex-shrink: 0;
}
.dept-info-btn{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 0.5px solid rgba(31, 30, 29, 0.3);
    border-radius: 8px;
    font-size: 11px;
    color: rgba(31, 30, 29, 0.45);
    cursor: pointer;
}
.dept-info-btn:hover {
	background:var(--graidient-theme); /*jsp에 style에서 지정한 테마 변수를 사용*/
    border-color: rgba(31, 30, 29, 0.5);
    color: #FFF;
    transition:all 0.5s ease;
}
.darkmode .dept-info-btn {
    border-color: rgba(222, 220, 209, 0.35);
    color: rgba(222, 220, 209, 0.5);
}
.darkmode .dept-info-btn:hover {
    border-color: transparent;
    color: #FFF;
}
.dept-info-content-box {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    min-height: 50px;
    max-height: 450px;
    overflow: hidden;
}
#deptTopBar {
    display: flex;
    align-items: center;
    padding: 5px 0 10px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}
.dept-top-btn-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dept-info-content-title {
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.dept-info-empty-box {
    border: 1px solid #ddd;
    padding: 30px 15px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    text-align: center;
    color: #888;
}
#deptInfoWriterInfo {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    color: #999;
}

/* 2026-03-20 / jj_baek / 조직도 부서 소개 패널 슬래시 전환 효과 */
#sweep-overlay {
    position: fixed; inset: 0;
    z-index: 9997;
    pointer-events: none;
    overflow: hidden;
}
.sweep-slash {
    position: absolute;
    top: -10%; left: 0;
    width: 130%; height: 120%;
    transform: skewX(-10deg) translateX(-135%);
}
.sweep-slash-primary { z-index: 1; background: rgba(30, 30, 35, 0.88); }
.sweep-slash-shimmer { background: rgba(255,255,255,0.18); z-index: 2; }
.sweep-slash.in  { transform: skewX(-10deg) translateX(10%);  transition: transform 0.21s cubic-bezier(0.7,0,0.2,1); }
.sweep-slash.out { transform: skewX(-10deg) translateX(140%); transition: transform 0.21s cubic-bezier(0.8,0,0.3,1); }
.sweep-stagger { opacity: 0; transform: translateX(-12px); }
.sweep-stagger.in { opacity: 1; transform: translateX(0); transition: opacity 0.2s ease, transform 0.2s ease; }

/* 2026-03-23 / jj_baek / 저장 버튼 하이라이트 - OTP 키 발급·초기화 후 저장 유도 */
@keyframes highlight-inner-btn {
    0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(3); }
}
.btn_save.save-highlight { position: relative; overflow: hidden; }
.btn_save.save-highlight::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background-color: rgba(252, 110, 87, 0.8);
    width: 1rem;
    height: 1rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: 2s ease 0s infinite normal none running highlight-inner-btn;
}

/* 2026-03-23 / jj_baek / OTP 미설정 알림 모달 - 설정하러 가기 버튼 */
.otp-setup-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid rgba(252, 110, 87, 0.8);
    color: rgba(252, 110, 87, 1);
    background: transparent;
    cursor: pointer;
}
.otp-setup-btn:hover {
    background: rgba(252, 110, 87, 0.1);
}

/* 2026-03-24 / dongin.kang / BBS 썸네일 이미지 직접 업로드 */
/* 2026-06-26 / dongin.kang / 썸네일 미리보기 크기 106x70 변경 */
.thumb_upload_wrap {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.thumb_preview {
	width: 106px;
	height: 70px;
	border: 1px dashed #ccc;
	border-radius: 4px;
	background: #f9f9f9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.thumb_preview img {
	object-fit: cover;
}
.thumb_placeholder {
	font-size: 11px;
	color: #bbb;
}
.thumb_btn_area {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.thumb_guide {
	font-size: 11px;
	color: #999;
	margin-top: 2px;
}
.darkmode .thumb_preview {
	border-color: #555;
	background: #2a2a2a;
}
.darkmode .thumb_placeholder {
	color: #666;
}
.darkmode .thumb_guide {
	color: #777;
}
.darkmode .bbs_image_tab_list li .thumbnail_area.no_thumb {
	background: #333;
}

/* 2026-01-07 / jj_baek / 조직도에서 온라인 사용자 표시 */
.online-user-count-wrap{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0.4rem;
    right: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #FFF;
    opacity:0.1;
    cursor:pointer;
}
.online-user-count-wrap:hover{
	width: 120px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 1s ease;
    opacity: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0px 5px 0px 12px;
    align-items: center;
}
.online-user-count-wrap .wrap-col{display: none;}
.online-user-count-wrap:hover .wrap-col{ display: flex;align-items: center;justify-content: space-evenly;width: 40%; }
.online-count-wrap{display: none;}
.online-user-count-wrap:hover .online-count-wrap{display: block;}
.online-user-count-wrap:hover .online-user-icon{ display: flex;align-items: center; }
.online-user-count-wrap:hover .online-user-icon::before{
    content: "";
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #15f312;
    left: -4px;
    opacity:0;
    animation:onlineMarkShow 1s ease forwards 1s;
}
@keyframes onlineMarkShow{
	0%{opacity:0;}
	100%{opacity:1;}
}
.online-user-count-wrap:hover .online-user-icon-pre{display:none;}

/* 2026-04-01 / jj_baek / 스티커 갤러리 패널 */
.sg-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.28); display: flex; align-items: stretch; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.22s; z-index: 200; }
.sg-overlay.open { opacity: 1; pointer-events: auto; }
.sg-panel { width: 420px; max-width: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); border-left: 0.5px solid rgba(0,0,0,0.12); overflow: hidden; }
.sg-overlay.open .sg-panel { transform: translateX(0); }
.sg-header { padding: 14px 16px 12px; border-bottom: 0.5px solid rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: space-between; background: #f5f5f3; flex-shrink: 0; }
.sg-title { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.sg-sub { font-size: 11px; color: #6b6b67; margin-top: 1px; }
.sg-close { width: 26px; height: 26px; border: 0.5px solid rgba(0,0,0,0.22); border-radius: 6px; background: #fff; color: #6b6b67; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; font-family: inherit; }
.sg-close:hover { background: #e8e8e6; color: #1a1a1a; }
.sg-filters { padding: 10px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.1); display: flex; gap: 6px; flex-wrap: wrap; background: #f5f5f3; flex-shrink: 0; }
.sg-chip { padding: 4px 10px; border-radius: 20px; font-size: 11px; border: 0.5px solid rgba(0,0,0,0.22); background: #fff; color: #6b6b67; cursor: pointer; transition: all 0.12s; }
.sg-chip.active { background: #1d6ed8; color: #fff; border-color: #1d6ed8; }
.sg-stats { display: flex; border-bottom: 0.5px solid rgba(0,0,0,0.1); flex-shrink: 0; }
.sg-stat { flex: 1; padding: 10px 14px; text-align: center; border-right: 0.5px solid rgba(0,0,0,0.1); }
.sg-stat:last-child { border-right: none; }
.sg-stat-num { font-size: 18px; font-weight: 500; color: #1a1a1a; line-height: 1; }
.sg-stat-label { font-size: 10px; color: #6b6b67; margin-top: 2px; }
.sg-scroll { flex: 1; overflow-y: auto; padding: 12px 14px; }
.sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sg-card { border: 0.5px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: border-color 0.12s, background 0.12s; position: relative; background: #fff; }
.sg-card:hover { border-color: rgba(0,0,0,0.22); background: #f5f5f3; }
.sg-card.selected { border-color: #1d6ed8; border-width: 1.5px; }
.sg-card-img { width: 58px; height: 58px; border-radius: 10px; background: #f0f0ee center/cover no-repeat; flex-shrink: 0; }
.sg-card-name { font-size: 11px; font-weight: 500; color: #1a1a1a; text-align: center; line-height: 1.3; word-break: keep-all; }
.sg-card-badge { position: absolute; top: 6px; right: 6px; background: #1d6ed8; color: #fff; border-radius: 10px; font-size: 9px; font-weight: 500; padding: 1px 5px; min-width: 16px; text-align: center; }
.sg-stars { display: flex; gap: 1px; font-size: 9px; }
.sg-star-on { color: #e0a020; }
.sg-star-off { color: rgba(0,0,0,0.22); }
.sg-detail { border-top: 0.5px solid rgba(0,0,0,0.1); padding: 12px 14px; background: #f5f5f3; flex-shrink: 0; display: none; gap: 12px; align-items: flex-start; }
.sg-detail.visible { display: flex; }
.sg-detail-img { width: 56px; height: 56px; border-radius: 10px; background: #e8e8e6 center/cover no-repeat; flex-shrink: 0; }
.sg-detail-body { flex: 1; min-width: 0; }
.sg-detail-name { font-size: 13px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; }
.sg-detail-desc { font-size: 11px; color: #6b6b67; line-height: 1.5; margin-bottom: 6px; }
.sg-detail-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.sg-meta-item { font-size: 10px; color: #6b6b67; }
.sg-meta-val { font-weight: 500; color: #1a1a1a; }
.sg-meta-val.t1{background: #b5d4f4;}
.sg-meta-val.t2{background: #eaf3de;}
.sg-meta-val.t3{background: #faeeda;}
.sg-meta-val.t4{background: #eeedfe;}
.sg-meta-val.t5{background: #faece7;}
.sg-empty { text-align: center; color: #6b6b67; font-size: 12px; padding: 24px 0; grid-column: 1 / -1; }
.sg-loading { text-align: center; color: #6b6b67; font-size: 12px; padding: 32px 0; grid-column: 1 / -1; }
.darkmode .sg-panel { background: #1e1e1e; border-left-color: rgba(255,255,255,0.1); }
.darkmode .sg-header, .darkmode .sg-filters, .darkmode .sg-detail { background: #161616; border-color: rgba(255,255,255,0.1); }
.darkmode .sg-title, .darkmode .sg-card-name, .darkmode .sg-detail-name, .darkmode .sg-stat-num, .darkmode .sg-meta-val { color: #e8e8e8; }
.darkmode .sg-sub, .darkmode .sg-stat-label, .darkmode .sg-detail-desc, .darkmode .sg-meta-item, .darkmode .sg-empty { color: rgba(255,255,255,0.5); }
.darkmode .sg-card { background: #242424; border-color: rgba(255,255,255,0.1); }
.darkmode .sg-card:hover { background: #2c2c2c; border-color: rgba(255,255,255,0.2); }
.darkmode .sg-close { background: #2a2a2a; border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.darkmode .sg-chip { background: #2a2a2a; border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.darkmode .sg-stat { border-color: rgba(255,255,255,0.1); }
.darkmode .sg-card-img, .darkmode .sg-detail-img { background-color: #333; }
/* 2026-04-01 / jj_baek / 스티커 갤러리 탭 버튼 (telTab.jsp) */
.tree_tab .sg-tab-btn { position:absolute;right:0;bottom:4px;height:17px;}
.tree_tab .sg-tab-btn svg rect{fill:rgba(31, 30, 29, 0.45);}
.darkmode .tree_tab .sg-tab-btn svg rect{fill:rgba(222, 220, 209, 0.5);}
.tree_tab .sg-tab-btn:hover { opacity: 1; }
.tree_tab .sg-tab-btn:hover svg rect{fill:#FFF;}
.tree_tab .sg-tab-btn a { text-decoration: none; line-height: 1; }
.sg-page { display: flex; flex-direction: column; height: 100vh; background: #fff; overflow: hidden; }
.darkmode .sg-page { background: #1a1a1a; }
/* 2026-04-09 / jj_baek / 테스트 환경 표시 UI */
div.env-info{
	height: 50px;
    width: 200px;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #a9a9a957;
    gap:4px;
}
div.env-info .title{font-weight:700;}
div.env-info .env{font-weight:700;color:green;}
/* 2026-04-16 / jj_baek / 게시판 lnb, 리스트 및 툴팁, 지식인 showup 애니메이션 추가 */
div#tooltip_box {animation:tooltip-showup 0.8s forwards;}
@keyframes tooltip-showup{
	0%{opacity:0;}
	100%{opacity:1;}
}
div#lnb{animation:tooltip-showup 0.8s forwards;}
.opacity-change {animation:tooltip-showup 1.5s forwards;}
/* 2026-05-19 / bjj / 공유자원 더블클릭 힌트 & 예약 정보 말풍선 */
.sr-dblclick-hint {
	position: fixed;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 9999;
	transform: translate(-50%, -50%);
	display: none;
}
.darkmode .sr-dblclick-hint {
	background: rgba(255, 255, 255, 0.75);
	color: #222;
}
.sr-res-tooltip {
	position: fixed;
	pointer-events: none;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 12px;
	z-index: 9999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	min-width: 140px;
	line-height: 1.7;
	display: none;
}
.sr-res-tooltip .sr-tt-title { font-weight: bold; color: #222; }
.sr-res-tooltip .sr-tt-time  { color: #666; }
.sr-res-tooltip .sr-tt-user  { color: #666; }
.darkmode .sr-res-tooltip {
	background: #2d2d2d;
	border-color: #444;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.darkmode .sr-res-tooltip .sr-tt-title { color: #eee; }
.darkmode .sr-res-tooltip .sr-tt-time,
.darkmode .sr-res-tooltip .sr-tt-user  { color: #aaa; }

/* 2026-05-19 / bjj / 구글 OTP 설정 플로우 UI */
.otp-setup-wrap { max-width: 780px; }
.otp-setup-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.otp-setup-title { font-size: 13px; font-weight: 600; color: #374151; }
.otp-badge { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 500; }
.otp-badge-none { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.otp-badge-active { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.darkmode .otp-badge-none { background: #374151; color: #9ca3af; border-color: #4b5563; }
.darkmode .otp-badge-active { background: #14532d; color: #86efac; border-color: #166534; }

.otp-step-flow { display: flex; align-items: center; margin-bottom: 18px; }
.otp-step { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.otp-step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.otp-step-active .otp-step-num { background: #2563eb; color: #fff; }
.otp-step-done .otp-step-num { background: #16a34a; color: #fff; }
.otp-step-pending .otp-step-num { background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb; }
.otp-step-active .otp-step-label { color: #1a1a1a; font-weight: 600; }
.otp-step-done .otp-step-label { color: #16a34a; }
.otp-step-pending .otp-step-label { color: #9ca3af; }
.otp-step-label { white-space: nowrap; }
.otp-step-conn { flex: 1; height: 1px; background: #e5e7eb; margin: 0 8px; min-width: 20px; }
.darkmode .otp-step-pending .otp-step-num { background: #374151; border-color: #4b5563; color: #6b7280; }
.darkmode .otp-step-active .otp-step-label { color: #f3f4f6; }
.darkmode .otp-step-conn { background: #4b5563; }

.otp-panel { display: none; }
.otp-panel.otp-panel-show { display: block; }

.otp-info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #1d4ed8; margin-bottom: 14px; line-height: 1.7; }
.otp-warn-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #92400e; margin-bottom: 14px; line-height: 1.7; }
.darkmode .otp-info-box { background: #1e3a5f; border-color: #1d4ed8; color: #93c5fd; }
.darkmode .otp-warn-box { background: #431407; border-color: #b45309; color: #fcd34d; }

.otp-key-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.otp-key-input { border: 1px solid #d1d5db; border-radius: 5px; padding: 6px 10px; font-size: 13px; font-family: 'Courier New', monospace; background: #f9fafb; color: #374151; letter-spacing: 1.5px; width: 220px; }
.otp-copy-toast { font-size: 11px; color: #16a34a; opacity: 0; transition: opacity 0.3s; }
.darkmode .otp-key-input { background: #374151; border-color: #4b5563; color: #e5e7eb; }

.otp-qr-area { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.otp-qr-box { width: 120px; height: 120px; flex-shrink: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.otp-qr-guide { flex: 1; padding-left: 4px; }
.otp-qr-guide ol { padding-left: 18px; font-size: 12px; color: #4b5563; line-height: 2.2; }
.otp-qr-guide ol li strong { color: #1a1a1a; }
.darkmode .otp-qr-guide ol { color: #9ca3af; }
.darkmode .otp-qr-guide ol li strong { color: #e5e7eb; }

.otp-verify-area { border-top: 1px solid #f3f4f6; padding-top: 16px; }
.otp-verify-label { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.otp-digit-wrap { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.otp-digit { width: 36px; height: 42px; border: 1.5px solid #d1d5db; border-radius: 6px; text-align: center; font-size: 20px; font-weight: 600; font-family: 'Courier New', monospace; color: #1a1a1a; background: #fff; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.otp-digit:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.otp-digit.otp-digit-filled { border-color: #93c5fd; background: #eff6ff; }
.otp-dash { color: #d1d5db; font-size: 20px; margin: 0 2px; }
.darkmode .otp-digit { background: #374151; border-color: #4b5563; color: #e5e7eb; }
.darkmode .otp-digit.otp-digit-filled { border-color: #2563eb; background: #1e3a5f; }

.otp-verify-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.otp-verify-btn { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; font-weight: 600 !important; }
.otp-verify-btn:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.darkmode .otp-verify-btn { background: #3b82f6 !important; border-color: #3b82f6 !important; }
.darkmode .otp-verify-btn:hover { background: #2563eb !important; border-color: #2563eb !important; }
.otp-verify-msg { font-size: 12px; }
.otp-msg-error { color: #dc2626; }
.otp-msg-success { color: #16a34a; }

.otp-success-panel { text-align: center; padding: 20px 16px; }
.otp-success-icon { font-size: 36px; color: #16a34a; margin-bottom: 10px; }
.otp-success-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
.otp-success-desc { font-size: 13px; color: #6b7280; margin-bottom: 16px; line-height: 1.7; }
.darkmode .otp-success-title { color: #f3f4f6; }
.darkmode .otp-success-desc { color: #9ca3af; }

.otp-registered-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; flex-wrap: wrap; gap: 12px; }
.otp-reg-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.otp-reg-icon { font-size: 18px; color: #16a34a; font-weight: bold; }
.otp-reg-actions { display: flex; gap: 8px; }

/* 2026-06-29 / dongin.kang / 업무협조(CEFGUIDE) 포틀릿 - 제목 아래 작성부서 표시 (2줄 레이아웃) */
/* 2026-06-30 / dongin.kang / 기존 div.portlet 셀렉터보다 우선순위 낮아 height:20px 안 풀리던 문제 → div.portlet.guide_portlet 로 상향 */
div.portlet.guide_portlet ul.box_list.one > li { height: auto; }
div.portlet.guide_portlet ul.box_list.one > li + li { margin-top: 14px; }
/* 제목 ~ 목록 상단 간격 축소 (기존 공통 20px → 5px, 이 포틀릿만) */
div.portlet.guide_portlet ul.box_list { margin-top: 5px; }
/* 날짜를 제목 줄 우측 상단에 고정 (기존 top:50% 세로중앙 → 2줄에서 어긋나므로 보정) */
div.portlet.guide_portlet ul.box_list.one .update_log { top: 2px; margin-top: 0; }
/* 2026-07-01 / dongin.kang / 작성부서 우측정렬 + 이탤릭 (날짜 우측끝 right:0 에 맞춰 padding-right 제거) */
/* 2026-07-13 / dongin.kang / 부서명 [] 대괄호 제거(JSP) */
/* 2026-07-15 / dongin.kang / 부서명 색상 옅은 회색(#a5a5a5) → 기존 회색(#707070)으로 원복 요청 반영 */
/* 2026-07-15 / dongin.kang / 이탤릭 오버행이 overflow:hidden에 짤리는 문제 → padding-right 2px 확보 + margin-right -2px로 우측 정렬 유지 */
div.portlet.guide_portlet .guide_dept { margin-top: 3px; text-align: right; font-style: italic; box-sizing: border-box; font-size: 12px; color: #707070; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2px; margin-right: -2px; }
.darkmode div.portlet.guide_portlet .guide_dept { color: #a0a0a0; }
.darkmode .otp-reg-info { color: #e5e7eb; }

/* 2026-07-13 / dongin.kang / 이미지슬라이드 포틀릿 디자인 2안 (imageSliderBannerPortletView2.jsp)
   - 인디케이터: 하단 중앙 원형 → 우측 세로 스택 바(bar)
   - 원본(1안)은 <portlet:namespace/> 동적 클래스 인라인 스타일이라 이관 불가 — 2안은 정적 클래스(cef_banner_wrap2)로 스코프 */
.portlet.image_slide_box2 { padding: 0 !important; }
.image_slide_box2 .banner01 { width: 100%; height: 100%; }
.cef_banner_wrap2 { position: relative; overflow: hidden; width: 340px; height: 260px; }
.cef_banner_wrap2 > ul { list-style: none; margin: 0; padding: 0; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cef_banner_wrap2 > ul > li { margin: 0; padding: 0; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.cef_banner_wrap2 > ul > li:first-child { opacity: 1; }
/* 인디케이터(우측 세로 바) — nav_wrap은 JS가 동적 append */
.cef_banner_wrap2 .nav_wrap { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; }
.cef_banner_wrap2 .nav_wrap ul { display: block; position: relative; list-style: none; margin: 0; padding: 0; text-align: right; }
/* 2026-07-13 / dongin.kang / 인디케이터 시인성 개선: 바 두께 3px→6px, 폭 16→20px(활성 28px)로 통통하게 */
/* 숫자 텍스트(1,2..)는 JS 클릭 인덱스용 DOM — font-size:0 + transparent 로 렌더링만 완전 차단 */
/* 비활성 바는 활성(흰색)보다 살짝 얇게(4px vs 6px) */
.cef_banner_wrap2 .nav_wrap.bullet ul li { display: block; position: relative; margin: 10px 0 10px auto; cursor: pointer; font-size: 0; line-height: 0; color: transparent; text-indent: -1000px; overflow: hidden; width: 20px; height: 4px; border-radius: 2px; background-color: rgba(255,255,255,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.35); }
.cef_banner_wrap2 .nav_wrap.bullet ul li.on { width: 28px; height: 6px; border-radius: 3px; background-color: #FFF; }
/* 이미지 사이즈 (1안 인라인 스타일과 동일 값, 2안 스코프로만 적용) */
.cef_banner_wrap2 .cef_img_normal { height: 260px; width: 360px; }
.cef_banner_wrap2 .cef_img_widthexpand_2 { height: 260px; width: 700px; }
.cef_banner_wrap2 .cef_img_widthexpand_3 { height: 260px; width: 1060px; }
.cef_banner_wrap2 .cef_img_widthexpand_4 { height: 260px; width: 1420px; }
.cef_banner_wrap2 .cef_img_widthexpand_5 { height: 260px; width: 1780px; }
/* D/E 타입 */
.cef_banner_wrap2 .cef_img_widthexpand_d_2, .cef_banner_wrap2 .cef_img_widthexpand_d_3,
.cef_banner_wrap2 .cef_img_widthexpand_d_4, .cef_banner_wrap2 .cef_img_widthexpand_d_5,
.cef_banner_wrap2 .cef_img_widthexpand_e_2, .cef_banner_wrap2 .cef_img_widthexpand_e_3,
.cef_banner_wrap2 .cef_img_widthexpand_e_4, .cef_banner_wrap2 .cef_img_widthexpand_e_5 { height: 100%; width: 100%; object-fit: cover; }