@charset "utf-8";

html{font-size: 10px; scroll-behavior: smooth;}

/* layout */
body{position: relative; width: 100%; font-family: 'Pretendard'; letter-spacing: -1px; font-weight:500}
*,*:before,*:after{box-sizing: border-box}
a,a:hover,a:focus{text-decoration: inherit; color: inherit;}
body.fixed {position: fixed;}
body[data-gnb="on"]:after{content: "";position: fixed; z-index:10; width: 100%;height: 100%;top: 0;left: 0;background:rgba(0, 0, 0, 0.5);}



.js_tablet_check,
.js_mobile_check{display: none;}
.user #wrap{overflow: hidden; position: relative;}
.user .layout{position: relative; max-width: 90em; margin: 0 auto; padding:0 1.25em; box-sizing: border-box;}
.user#sub .layout{position: relative; max-width: 1440px;; margin: 0 auto; padding:0 20px; box-sizing: border-box;}

body,h1,h2,h3,h4,h5,h6,th,td,input,select,textarea {font-family:'Pretendard',Arial,sans-serif; line-height: 1.5;}
th,td,input,select,textarea {font-family: 'Pretendard',Arial,sans-serif;}

button {border:0; cursor:pointer;}

@media screen and (max-width: 1024px){
    body{font-size: 10px;}
    #body_layout {font-size:1.5rem}

    .js_mobile_check{display: block;}
}

@media screen and (max-width: 640px){
    body{font-size: 8px;}
}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	Skip
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#skip{position:absolute; left:0; top:0; width:100%; margin:0 auto; z-index:9999;}
#skip a{display:block; position:absolute; left:0; padding:10px; color:#fff; background:#000;}
#skip a:link,
#skip a:visited,
#skip a:active{top:-10000px;}
#skip a:hover,
#skip a:focus{top:0;}



.top_100 {width:100%; background:#00707e; height:40px;}
.top_100 .wrap {width:1400px; margin:0 auto; color:#ffffff; font-weight:normal; text-align:right;}
.top_100 .wrap .top_info {padding:8px 0 0 0}
.top_100 .wrap span {display:inline-block; font-size:14px; margin:0 10px 0 0}
.top_100 .wrap span.ip {position:relative; padding:0 0 0 25px;}
.top_100 .wrap span.ip::before {content:''; width:12px; height:15px; background:url(../../images/eep/my_info_icon_location.svg) 0 0 no-repeat; background-size:12px;
    position:absolute; left:8px; top:3px;}


.main_100  {width:100%; background:#eeeeee; padding:0 0 60px 0;}
.header_100 {width:100%; background:#ffffff}
.main_100 .main_wrap {width:1400px; margin:0 auto; position:relative;  background:#eeeeee; }
.header_100 .header {width:1400px; margin:0 auto; background: #ffffff;}

.main_down_100 {width:100%; background:#f7f8fa; padding:50px 0 80px 0;}
.main_down_100 .main_wrap {width:1400px; margin:0 auto; position:relative; background:#f7f8fa;}

.footer {width:100%; background:#4d4d4d; color:#e3e3e3; }
.footer p {width:1400px; margin:0 auto; text-align:center; font-weight:300; letter-spacing: 0; padding:40px 0; font-size:1.5rem}




/* 로고 */
.header { margin:0 auto; position:relative; display:flex; justify-content: space-between; align-items: center;  height:80px;}

h1{position: relative; z-index:0;top: 8px; left: 0;}
h1 a{display: inline-block; text-decoration: none; font-size: 3rem; color: var(--main-black);}
h1 a span:first-child{ display: inline-block; width:170px ; height:30px ; text-indent: -99999px;
    background-image: url(../../images/eep/nims_logo.svg); background-size:contain; background-repeat: no-repeat;margin-right: 10px;}
h1 a span:nth-child(2) {font-size:2rem; position:relative; top:-11px; font-weight:600; color:var(--main-black);}

/* 탑유틸 */
.top_util {display: flex; align-items: center; gap:15px}
.top_menu {display:none;}

.top_menu {display:none;}
.menu_open {
  width: 36px; height: 36px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative; z-index:999999999}

.menu_open img {
  width: 15px; height: 14px; position: absolute; transition: opacity 0.3s ease, transform 0.3s ease;}
#menu_btn.active { background-color: #333; /* 원하는 닫기 상태 배경색 지정 */}
.top_util:has(#menu_btn.active) .search_open {display:none;}
.search_open {
  width: 36px; height: 36px; background-color: #f8f6f6; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative; z-index:999}

.search_open img {width: 18px; height: 19px; position: absolute; transition: opacity 0.3s ease, transform 0.3s ease;}

.top_util .work {height:60px; position:relative}
.top_util .work span {padding:40px 0 0 0; display:inline-block; font-weight:600}
.top_util .work:after {
    content: ''; position: absolute; width: 27px; height: 27px; top: 10px; right: 1.2rem;
    background: url(../../images/eep/util_work.svg) center 0 no-repeat; background-size:27px; }
.top_util .siren {height:60px; position:relative}
.top_util .siren span {padding:40px 0 0 0; display:inline-block; font-weight:600}
.top_util .siren:after {
    content: ''; position: absolute; width: 27px; height: 27px; top: 7px; right: 1.7rem;
    background: url(../../images/eep/util_siren.svg) center 0 no-repeat; background-size:27px; }


.top_util .top_step {background-size:36px; height:60px;}
.top_util .top_step[data-step="1"] {background: url(../../images/eep/util_step1.png) center 0 no-repeat;}
.top_util .top_step[data-step="2"] {background: url(../../images/eep/util_step2.png) center 0 no-repeat;}
.top_util .top_step[data-step="3"] {background: url(../../images/eep/util_step3.png) center 0 no-repeat;}
.top_util .top_step[data-step="4"] {background: url(../../images/eep/util_step4.png) center 0 no-repeat;}
.top_util .top_step span {padding:40px 0 0 0; display:inline-block; font-weight:600}



/*********************************************
메인 : 전자결재 , SMS 발송, 게시판
*********************************************/
#main > .top_wrap {display:grid; grid-template-columns: 32% 68%; position:relative; margin-bottom:28px; padding-top:30px; width:100%;}
#main > .top_wrap .portlet_2wrap {margin:0 0 0 28px;}
#main > .top_wrap .portlet_2wrap .wrap_2ea {display:flex; gap:28px; margin-bottom:28px;}
#main > .top_wrap .portlet_2wrap .wrap_2ea > div {width:100%;}



/*********************************************
    1-2 전자결재
*********************************************/
.portlet_2wrap .portlet p.title span {font-size:2.2rem; font-weight:600; color:var(--main-black); }
#main > .top_wrap .portlet_2wrap .wrap_2ea .portlet {border-radius: 20px;padding:27px;height:443px; }
#main > .top_wrap .portlet_2wrap .wrap_2ea + .portlet {border-radius: 20px;padding:27px;}


.mid_wrap {display:flex; gap:28px; width:100%;}
.mid_wrap > div {width:100%; height:356px; }


.e_paper .title {margin:0 0 20px 0;}
.e_paper ul { display: flex;  flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.e_paper ul li { width:  calc(100% / 3); margin-bottom: 10px; box-sizing: border-box; padding: 10px; text-align: center; position:relative; padding:115px 0 20px 0; }
.e_paper ul li span:first-child {font-size:1.6rem}
.e_paper ul li span:nth-child(2) {position:absolute; background:#00707e; color:#ffffff; bottom:53px; right:20px;
  display:inline-block;width:30px; height:30px; border-radius: 50%; text-align: center; line-height:30px;}

.e_paper ul li:nth-child(1) {background:url(../../images/eep/icon_paper_1.png) center 15px no-repeat;}
.e_paper ul li:nth-child(2) {background:url(../../images/eep/icon_paper_2.png) center 15px no-repeat;}
.e_paper ul li:nth-child(3) {background:url(../../images/eep/icon_paper_3.png) center 15px no-repeat;}
.e_paper ul li:nth-child(4) {background:url(../../images/eep/icon_paper_4.png) center 15px no-repeat;}
.e_paper ul li:nth-child(5) {background:url(../../images/eep/icon_paper_5.png) center 15px no-repeat;}
.e_paper ul li:nth-child(6) {background:url(../../images/eep/icon_paper_6.png) center 15px no-repeat;}


/*********************************************
SMS 발송
*********************************************/
.sms .sms_title {display:flex; justify-content: space-between; align-items: center; margin-bottom:17px;}
.sms .sms_title .btn {border-radius: 5px; padding:5px; display:inline-block; width:50px; text-align: center;}
.sms .sms_title .more {background: #00707e; color:#ffffff; margin:0 5px 0 0; font-size:1.3rem}

.text_wrap {background:#f4f4f4; border-radius: 10px; padding:10px; margin-bottom:10px;}
.text_wrap textarea {width:100%; box-sizing: border-box; height: 120px; border: none; margin: 0; padding: 0 15px;
    border-radius: 5px 5px 0 0; outline: 0; background-color: transparent; font-size: 15px; resize: none;}
.text_wrap .text_limit {text-align: right; display:block}
.text_wrap .text_limit b {color:#c54646; font-weight: 500;}

.num_wrap {background:#f4f4f4; border-radius: 10px; padding:10px; margin-bottom:10px;}
.num_wrap input {width:100%; box-sizing: border-box; height: 23px; border: none; margin: 0; padding: 0 15px;
    border-radius: 5px 5px 0 0; outline: 0; background-color: transparent; font-size: 15px; resize: none;}

.num_wrap textarea {width:100%; box-sizing: border-box; height: 23px; border: none; margin: 0; padding: 0 15px;
    border-radius: 5px 5px 0 0; outline: 0; background-color: transparent; font-size: 15px; resize: none;}


.num_area {display:flex; justify-content: space-between; gap:20px;  border-bottom:1px solid #e9e9e9; padding:0 0 30px 0; margin:0 0 20px 0;}
.num_area .title {display:flex; gap: 10px; margin:10px 0 0 0;}
.num_area .title span {margin:5px 0 0 0}
.portlet_2wrap .portlet .num_area p.title span { font-size:1.5rem !important}
.num_area .btn {border-radius: 5px; padding:5px; display:inline-block; width:40px; height:30px; text-align: center;}
.num_area .add {background: #43569c; color:#ffffff; margin:0 5px 0 0; font-size:1.3rem}
.num_area .number {width:100%;}

.num_wrap {display:flex; align-items: center;}

.send_area {display:flex; justify-content: space-between; align-items: center; float: right;}
.send_area .list {position:relative; padding:0 0 0 28px}
.send_area a:hover {color:#00707e}
.send_area .list::before {content:''; background: url(../../images/eep/icon_list.png); width:20px; height:20px; display:block; position:absolute; left:0;}

.btn_area .btn {border-radius: 5px; padding:5px; display:inline-block; width:60px; text-align: center;}
.btn_area .btn.send {background: #00707e; color:#ffffff; margin:0 5px 0 0}
.btn_area .btn.reset {background: #dddddd; color:#3d3d3d}


/* 라디오 버튼 디자인 */
.radio-group { display: flex; gap: 20px; }
.radio-option { position: relative; padding-left: 30px; cursor: pointer; font-size: 16px; user-select: none; display: flex; align-items: center;}
.radio-option input[type="radio"] {position: absolute; opacity: 0;  cursor: pointer;}
.radio-mark {position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 20px; width: 20px; background-color: #ffffff; border-radius: 50%; border: 1px solid #b8b8b8;}
.radio-option input:checked ~ .radio-mark { background-color: #00707e; border-color: #00707e; }
.radio-mark::after {  content: "";  position: absolute;  display: none; }
.radio-option input:checked ~ .radio-mark::after { display: block;}
.radio-option .radio-mark::after { top: 4px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; }






.data {padding:27px; background: #ffffff; border-radius: 20px;}
.my_memo {padding:27px; background: #ffffff; border-radius: 20px; position:relative}
.my_memo .title .btn_wrap {position:absolute; top:45px; right:22px; display:flex;}
.my_memo .title .btn_wrap a {margin-right:5px}
.todo {padding:27px; background: #43569c; border-radius: 20px;}

.todo .title {font-size:2.2rem; text-align:center; color:#ffffff; margin:15px 0 15px 0; position:relative}
.todo .title .edit {position:absolute; top:4px; right:12px;}
.todo .title + .todo-list {overflow-y:auto; height:240px;}

/* TODO */
.todo-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid #6372ad; color:#ffffff;}
.todo-left { display: flex; align-items: center;}
.todo-left .todo-checkbox + label {overflow:hidden; display:block;  padding:3px 4px 0 0; white-space:nowrap; text-overflow:ellipsis; width:300px}

/* 숨긴 체크박스 */
.todo-checkbox input[type="checkbox"] { display: none;}
.todo-checkbox label { display: inline-block; width: 20px; height: 20px; background-image: url('../../images/eep/checkbox-off.png'); background-size: cover; cursor: pointer; margin-right: 10px;}
.todo-checkbox input[type="checkbox"]:checked + label { background-image: url('../../images/eep/checkbox-on.png');}
.todo-title { font-size: 16px;}

/* 즐겨찾기 토글 스타일 */
.favorite-toggle { position: relative;}
.favorite-toggle input[type="checkbox"] { display: none;}
.favorite-toggle label { display: inline-block; width: 13px; height: 13px; background-image: url('../../images/eep/star-off.png'); background-size: cover; cursor: pointer;}
.favorite-toggle input[type="checkbox"]:checked + label { background-image: url('../../images/eep/star-on.png');}


/* 나의 메모장 */
.my_memo > .title {background: url(../../images/eep/memo_bg.png) center 15px no-repeat;}
.my_memo .title p {text-align:center;font-size:2.2rem; font-weight: 600; position:relative; padding:20px 0 30px 0; }
.my_memo ul {height:220px; overflow-y:auto}
.my_memo ul li a {display:flex; justify-content: space-between; gap:10px; line-height:3.3rem}
.my_memo ul li span {font-size:1.6rem;}
.my_memo ul li .cate {color:#151515; font-weight:600;  display:inline-block; width:60px;}
.my_memo ul li .title {color:#414040;overflow:hidden; display:block;  white-space:nowrap; text-overflow:ellipsis; width:240px}
.my_memo ul li .date {color:#8c8c8c; font-weight:400;width:90px;}

/* TODO, memo 작성, 관리 팝업*/
.todo-modal, .memo-modal{display:flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;}
.todo_content {background:#43569c; background-size:75rem; margin:auto; padding: 20px; width: 450px; border-radius: 10px; text-align: center;}
.todo_content .todo-list {height:160px !important; margin:0 0 40px 0; overflow-y:auto}
.todo_per {text-align: left;}
/* title 닫기버튼 */
.todo_per .title,
.todo_per .title span {color:#ffffff;}
.title_close .title {font-weight:700; margin:0 0 20px 0; text-align:center; border-bottom:1px solid #8f9dd3; padding:10px 0; position:relative}
.title_close .title span {font-size:2.5rem; font-weight:700; margin:0 0 20px 0; text-align:center;}
.title_close .title a.close {  width: 36px; height: 36px; background-color: #8f9dd3; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: absolute; right:0; top:5px; z-index:999}
.title_close .title a.close .close_icon { display: inline;}
.title_close .title a.close .close_icon {width:14px; height:15px;}


/* 생일축하 모달팝업 & 신규 입소자 환영 모달 팝업*/
.birthday-modal, .modal-backdrop,
.modal, .modal_backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;}
.modal-backdrop { background: rgba(34,34,34,0.8); z-index: 9998;}



.common_content {background:#ffffff; background-size:75rem; margin:auto; padding: 20px; width: 450px; border-radius: 10px; text-align: center;}
.common_content .todo-list {height:160px !important; margin:0 0 40px 0; }
.common_per {text-align: left;}
.common_per .title {font-size:2.5rem; font-weight:700; margin:0 0 20px 0; text-align:center; border-bottom:1px solid #8f9dd3; padding:10px 0;}
.common_wrap .line {display:flex; margin:0 0 10px 0;}
.common_wrap .line p {width:70px; font-weight:700; padding:4px 0 0 0}
.common_wrap .line p + select {width:calc(100% - 80px); padding:5px 3px 5px 10px;}
.common_wrap .line p + input {width:calc(100% - 80px); padding:5px 3px 5px 10px; box-sizing: border-box; border:1px solid #ccc; border-radius: 5px;}
.common_wrap .line p + textarea {resize: none; width:calc(100% - 80px); box-sizing: border-box; padding:10px; height:100px; border-radius: 5px;}

.common_wrap .input_wrap {margin:0 0 20px 0}
.common_wrap .input_wrap input {width:100%; padding:5px 3px 5px 10px; box-sizing: border-box; border:1px solid #ccc; border-radius: 5px; margin:0 0 5px 0}


.modal-buttons.btn_align button.gray {padding: 10px 20px; border-radius: 5px; background:#f1f1f1; }
.modal-buttons.btn_align {display:flex;gap: 10px;justify-content: center;}
.modal-buttons.btn_align button {padding: 10px 20px; border-radius: 5px; background:#ffffff; }
.modal-buttons.btn_align button:nth-child(2) {background:#4567e0; color:#ffffff; }
.modal-content textarea {width:100%; border-radius: 10px; padding:10px; margin:15px 0; resize: none; height:130px}

.finish_wrap {margin:0 0 30px 0; background:#435183; border-radius: 5px; }
.finish_wrap .sub_title {color:#ffe400; padding: 15px 10px 10px 10px; background:#171d64; border-radius:5px 5px 0 0}


.add_todo {display:flex}
.add_todo input.add { padding:5px 5px 5px 15px; border-radius: 5px; border:none; width:calc(100% - 55px); box-sizing: border-box; margin:0 5px 0 0}
.add_todo .send {width:50px; text-align:center; display:inline-block; border:none; border-radius: 5px; background:#4364d7; color:#ffffff; padding:10px;}





/* 통계 데이터 */
.data .title p {font-size:2.2rem; text-align:center; margin:15px 0 0 0;}
.data .title span {display:block; text-align:center; font-size:1.8rem}
.data_area {height:200px; margin:20px 0 0 0; background:#f8f8f8; border-radius: 5px;}

.align {display: flex; justify-content: flex-end; margin:10px 0 0 0}
.edit {display:block; width:30px; height:30px; background:url(../../images/eep/btn_icon_edit.png) center center no-repeat #f1f2f7; border-radius: 30px; background-size:13px;}
.option {display:inline-block; width:30px; height:30px; background:url(../../images/eep/btn_icon_option.png) center center no-repeat #f1f2f7; border-radius: 30px; background-size:15px;}






/*********************************************
    검색
*********************************************/
/* #search-form{
	position:absolute; left:0; top:121px; z-index:9; width:100%; height:calc(100vh - 100px);
	-webkit-transition:top 0.3s linear; transition:top 0.3s linear;
   background-color:rgba(34,34,34,0.9); box-shadow: 0px px 0px 0px rgba(0, 0, 0, 0.3); 
}
#search-form .bg {background: #ffffff; z-index: 999999; position:relative}
#search-form .bg .up_search {border-bottom:1px solid #eeeeee; padding:44px 0 37px 0}
#search-form .up_search .wrap {width:800px; margin:0 auto;display: flex; align-items: center; justify-content: center; }
#search-form .inner{width:520px; position:relative; box-sizing: border-box;  height: 52px;
    border: 3px solid transparent; border-radius: 24px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #36c2cf 0%, #446bdf 100%);
    background-origin: border-box; background-clip: content-box, border-box;}
#search-form .inner input[type="text"]{position:relative; z-index:0; width:100%; height:45px; padding:0 60px 0 20px;border:none;background-color:transparent;  font-size:1.8rem; color:var(--main-black); font-weight:400; font-family:'Pretendard'; outline: none;}
#search-form .inner input[type="text"]::placeholder{color:#8c8c8c; font-weight:400; font-size:1.6rem}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;

   -webkit-text-fill-color: #fff !important;
}
#search-form .inner button{position:absolute; right:20px; top:10px; z-index:20; width:23px; height:22px; border:none; background-color:transparent; background:url(../../images/eep/icon_search.svg) 0 0 no-repeat; background-size:21px;}
#search-form .inner button>span{position:absolute; font-size:0; color:transparent;}

*/

.bottom_search {padding:40px 0 30px 0; position:relative;  background:url(../../images/eep/search_bg.png) 10px 130px no-repeat;}
.bottom_search::before {content:''; position:absolute;bottom:0; left:0;border:1px solid red;}
.bottom_search .wrap {width:800px; margin:0 auto;}
.bottom_search .search_txt {display:flex; align-items: center; justify-content: center }
.bottom_search .search_txt strong {border-radius: 20px; background:#25348a; color:#ffffff; padding:7px 20px}
.bottom_search .search_txt ul {display:flex;}
.bottom_search .search_txt ul li {margin:0 0 0 15px;}
.bottom_search .search_txt ul li a{letter-spacing: 0; color:#2c2c2c}
.bottom_search .search_txt ul li a:hover {color:#0174b7}
.bottom_search .box_wrap {display: flex; gap: 15px; margin:30px 0 0 0; justify-content: center;}
.bottom_search .box_wrap .list_box{width:200px; border-radius: 10px; background:#e7f3fd; padding:25px 26px 15px 26px; overflow: hidden;}
.bottom_search .box_wrap .list_box strong {font-size:2rem; color:#313131; font-weight:bold; padding:0 0 10px 0; display:block;}
.bottom_search .box_wrap .list_box ul li {margin:0 0 10px 0;}
.bottom_search .box_wrap .list_box ul li:last-child {margin:0}
.bottom_search .box_wrap .list_box ul li a {line-height:2rem; padding:0 0 0 20px; display:block; color:var(--main-black)}
.bottom_search .box_wrap .list_box ul li:nth-child(4) a,
.bottom_search .box_wrap .list_box ul li:nth-child(5) a {color:#545454}


.search_wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.search_dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(34,34,34,0.8);
  z-index: -1; /* 폼보다 아래에 깔리도록 */
}



.search_wrap { display: none; }
/* .search_wrap::before {content:''; position: fixed; top: 100px; left: 0; width: 100%; height: 100%; background-color:rgba(34,34,34,0.9); z-index: 999;} */
.search_wrap.active { display: block;}
.search_open img { display: none;}
.search_open.active .close_icon { display: inline;}
.search_open:not(.active) .open_icon { display: inline;}
.search_open.active .close_icon {width:14px; height:15px;}
.search_open.active{background:#4a4a4a;}



/*********************************************
    1-1 나의 정보
*********************************************/
#main .my_info {background:#00707e;}
#main .my_info { overflow: hidden; }
#main .my_info .top_box {padding:10px 20px 0 20px; background:#00707e;}
#main .my_info .top_box .info {display:flex; align-items: center;}
#main .my_info .top_box .info span.pic {width:74px; height:74px; border-radius: 50%; overflow: hidden; margin-right:10px;}
#main .my_info .top_box .info .name {font-size:2rem; color:#ffffff; }
#main .my_info .top_box .info .name span:first-child {font-size:2.6rem;}
#main .my_info .top_box .info .name span:nth-child(2) {color:#ccdcec; font-size:1.6rem;display:block;}
#main .my_info .top_box .goout {font-size:1.6rem; font-weight:400; margin:10px 0 0 0;}
#main .my_info .top_box .goout ul {display:flex;gap: 5px;}
#main .my_info .top_box .goout ul li {background:#308b96; color:#ffffff; border-radius: 10px; padding:10px; width:50%; }
#main .my_info .top_box .goout ul li a {padding:3px 10px; color:#ffffff; background:#364496; border-radius: 5px;}
#main .my_info .top_box .goout ul li span {width:45%; border-radius: 5px; display:inline-block; text-align:center; position:relative}
#main .my_info .top_box .goout ul li span:nth-child(1)::before {content:''; display:inline-block; width:2px; height:15px; background:#5f9fa8; position:absolute; right:0; top:4px}
#main .my_info .top_box .goout ul li span:nth-child(2) {color:#f6f3c3}

.work_time {padding:10px 20px 20px 20px;  }
/* .work_wrap {background:#ffffff; border-radius: 5px;} */

.work_wrap ul {display:flex; flex-wrap: wrap; padding:10px 0 0 0; gap: 10px;}
.work_wrap ul li {width:calc(50% - 5px); height:80px; padding:16px 0 0 0; box-sizing: border-box; background: #ffffff; border-radius: 10px;}
.work_wrap ul li p.title {font-size:1.5rem;color:#898989; padding:0 0 5px 30px; text-align:center; box-sizing: border-box;}
.work_wrap ul li p.time {font-size:1.8rem; color:#414040; text-align:center;}

.work_wrap ul li:nth-child(1) p.title {background:url(../../images/eep/personal_1.jpg) 60px 2px no-repeat; }
.work_wrap ul li:nth-child(2) p.title {background:url(../../images/eep/personal_2.jpg) 60px 2px no-repeat; }
.work_wrap ul li:nth-child(3) p.title {background:url(../../images/eep/personal_3.jpg) 60px 2px no-repeat; }
.work_wrap ul li:nth-child(4) p.title {background:url(../../images/eep/personal_4.jpg) 40px 2px no-repeat; }
.work_wrap ul li:nth-child(5) p.title {background:url(../../images/eep/personal_5.jpg) 60px 2px no-repeat; }
.work_wrap ul li:nth-child(6) p.title {background:url(../../images/eep/personal_6.jpg) 60px 2px no-repeat; }















.mail_wrap {background:#ffffff; border-radius: 5px; padding:18px 8px;}
.mail_wrap .in_mail {background:url(../../images/eep/my_info_icon_bluemail.svg) 10px 8px no-repeat; background-size: 4rem; padding:0 0 0 65px;}
.mail_wrap .out_mail {background:url(../../images/eep/my_info_icon_redmail.svg) 10px 8px no-repeat; background-size: 4rem; padding:17px 0 0 65px; margin-top:20px; height:55px; border-top:1px solid #afafaf; }
.mail_wrap .in_mail .mail_part:first-child,
.mail_wrap .out_mail .mail_part:first-child {display:flex; justify-content: space-between; align-items: center; height:25px;}
.mail_wrap .in_mail .mail_part > span {color:#444444; font-size:1.8rem; font-weight:500;}
.mail_wrap .out_mail .mail_part > span {color:#444444; font-size:1.8rem; font-weight:500;display:inline-block;}
.mail_wrap .out_mail .mail_part > span > b {color:#a0a0a0; font-weight:300; position:relative; padding:0 0 0 15px;display:inline-block; height:21px; width:90px; overflow: hidden;}
.mail_wrap .out_mail .mail_part > span > b::before {content:''; display:inline-block; width:1px; height:12px; position:absolute; left:8px; top:8px; background:#a0a0a0;}

.mail_wrap .in_mail .mail_part p,
.mail_wrap .out_mail .mail_part p {border-radius: 5px; background:#f5f5f5; font-size:1.4rem; padding:3px 8px; font-weight:500; width:150px; text-align:right;}
.mail_wrap .in_mail .mail_part p b {color:#0073b7; font-weight:500;}
.mail_wrap .in_mail .mail_part:nth-child(2),
.mail_wrap .out_mail .mail_part:nth-child(2) {font-weight:500; height:20px;  font-size:1.4rem}
.mail_wrap .in_mail .mail_part:nth-child(2) b {color:#36ad12; font-weight:500;}

.mail_wrap .out_mail .mail_part a b {color:#f04f4f; font-weight:500;}
.mail_wrap .out_mail .mail_part:nth-child(2) b {color:#4567e0; font-weight:500;}


/*총 근로일수 */
.work_day {margin-top:10px;display:flex; flex-direction:column; gap:0; background: #ffffff; border-radius: 10px; padding:10px 15px}
.work_day .work_title {display:flex; justify-content: space-between; align-items: center;}
.work_day .work_title p {font-size:1.8rem; font-weight:700}
.work_day .work_title p span {font-size:1.5rem; color:#0073b7; padding:0 0 0 5px; font-weight: 400;}
.work_day p.info {display:flex; justify-content: space-between; align-items: center; margin:14px 0 0 0;}
.work_day p.info span:nth-child(1) {color:#444444; font-size:1.5rem;}
.work_day p.info span:nth-child(2) {color:#a8a8a8; font-size:1.5rem;}

.work_day .time {color:#3835c9; font-size:1.4rem;}

#main .my_info .bottom {background:#0073b7; padding:10px 0; color:#ffffff; font-weight:300; letter-spacing: 0; display:flex; justify-content: center; font-size:1.5rem}
#main .my_info .bottom span {width:40%; text-align:center; display:inline-block;}
#main .my_info .bottom span.date_time {}
#main .my_info .bottom span.ip_add {position:relative}
#main .my_info .bottom span.ip_add::before {content:''; width:12px; height:15px; background:url(../../images/eep/my_info_icon_location.svg) 0 0 no-repeat; background-size:12px;
    position:absolute; left:8px; top:2px;}


/* 프로그레스 바 */
progress { width: 100%; height: 12px; border-radius: 10px; background-color: #f2f2f2; }
progress::-webkit-progress-bar {  background-color: #f2f2f2; border-radius: 10px;}

progress.green::-webkit-progress-value { background-color: #36ad12;  border-radius: 10px;}
progress.green::-moz-progress-bar { background-color: #36ad12; border-radius: 10px;}

progress.blue::-webkit-progress-value { background-color: #4567e0; border-radius: 10px;}
progress.blue::-moz-progress-bar { background-color: #4567e0; border-radius: 10px;}

progress.darkblue { width: 100%; height: 12px; border-radius: 10px; background-color: #ebebeb;}
progress.darkblue::-webkit-progress-bar { background-color: #ebebeb; border-radius: 10px;}
progress.darkblue::-webkit-progress-value { background-color: #364496; border-radius: 10px;}
progress.darkblue::-moz-progress-bar { background-color: #364496; border-radius: 10px;}

progress.red { width: 100%; height: 12px; border-radius: 10px; background-color: #ebebeb;}
progress.red::-webkit-progress-bar { background-color: #ebebeb; border-radius: 10px;}
progress.red::-webkit-progress-value { background-color: #f3897b; border-radius: 10px;}
progress.red::-moz-progress-bar { background-color: #f3897b; border-radius: 10px;}





/*********************************************
    1-2 전자결재 + animation
*********************************************/
#main .updown .e_paper ul li a::before {content:''; position:absolute; left:13px; width: 27px; height: 27px; }
#main .updown .e_paper ul li:nth-child(1) a::before {background:url(../../images/eep/e_paper_wait.svg) 0 center no-repeat; background-size:22px; }
#main .updown .e_paper ul li:nth-child(2) a::before {background:url(../../images/eep/e_paper_return.svg) 0 center no-repeat; background-size:22px; }
#main .updown .e_paper ul li:nth-child(3) a::before {background:url(../../images/eep/e_paper_togetherwait.svg) 0 center no-repeat; background-size:22px; }
#main .updown .e_paper ul li:nth-child(4) a::before {background:url(../../images/eep/e_paper_finish.svg) 0 center no-repeat; background-size:22px; }
#main .updown .e_paper ul li:nth-child(5) a::before {background:url(../../images/eep/e_paper_order.svg) 0 center no-repeat; background-size:22px; }
#main .updown .e_paper ul li:nth-child(6) a::before {background:url(../../images/eep/e_paper_pending.svg) 0 center no-repeat; background-size:22px; }

#main .updown .e_paper ul li:nth-child(1) a:hover::before,
#main .updown .e_paper ul li:nth-child(2) a:hover::before,
#main .updown .e_paper ul li:nth-child(3) a:hover::before,
#main .updown .e_paper ul li:nth-child(4) a:hover::before,
#main .updown .e_paper ul li:nth-child(5) a:hover::before,
#main .updown .e_paper ul li:nth-child(6) a:hover::before {
      transform: rotateY(360deg);
    transition: all .5s ease;
}






/*********************************************
    나의 보유자산 + 공동장비현황
*********************************************/
.alarm {padding:27px 20px 5px 20px; border:1px solid #d7d7d7; margin-right:28px;}
.alarm .tabs {display: flex; margin-bottom: 10px;border-bottom:2px solid #2f628f;padding:0 0 10px 0;}
.alarm .tabs a {font-size: 2rem;color: #848484;display: inline-block;}
.alarm .tabs .tab-item {width:calc(100% / 4);}

.alarm .tabs .tab-item:first-child,
.alarm .tabs .tab-item:nth-child(2) {width:33%;}
.alarm .tabs .tab-item:nth-child(3) {width:23%;}
.alarm .tabs .tab-item:nth-child(4) {width:30%;}
.alarm .tabs a span.num {display:inline-block;margin:0 0 0 5px; width:23px; height:23px; line-height:2.3rem; text-align:center; vertical-align: middle; border-radius: 50%; color:#ffffff; font-size:1.3rem; background:#b0b0b0;}
.alarm .tabs a.active span.num {background:#4567e0}

.tabs a.active {color:#000000; font-size:2rem}
.tab-content {display: none;}
.tab-content.active {display: block;}
.alarm .tab-content.active {display: block;overflow-y: auto; height:480px;}

.issue_board {position:relative; height:auto; margin:0 0px 0 0 0; border-bottom: 1px solid #e7f3fd; box-sizing:border-box;}
.issue_board > section {position:absolute; top:1.4rem; left:0; text-align:center;padding-left:0.3rem; display:inline-block;}
.issue_board > section > span.date {color:#b3b3b3; font-weight:600; font-size:2.8rem;line-height:3.5rem;display:block;}
.issue_board > section > p{font-size:1.3rem; line-height: 10px; margin:0; color: #b3b3b3; font-weight: 500; letter-spacing: 0;}
.issue_board a {display:flex;justify-content: space-between; font-size:1.8rem;}
.issue_board strong{display:inline-block;font-weight:600; width:90px;}
.issue_board a span{display:inline-block;color: #414040; white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.issue_board strong.ing {color:#4567e0;}
.issue_board strong.finish {color:var(--main-black);}

.tab-content .issue_board:last-child {border-bottom:none;}



/*********************************************
  나의 보유자산
*********************************************/
.my_item {height:220px; overflow: auto;}


.my_item li {padding:10px 0 0 0}
.my_item li span {display:inline-block; font-size:1.5rem}
.my_item li span.type {color:#ffffff; padding:1px; border-radius: 20px; width:80px; text-align:center;}
.my_item li span.name {width:calc(100% - 210px); padding:0 0 0 10px; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; vertical-align: middle;}
.my_item li span.date {text-align:center; width:70px; color:#929292; }
.my_item li span.sta {text-align:center; width:45px;}
.my_item li span.usable {text-align:center; width:50px; }

.my_item li span.sta.ing {color:#4473c5}
.my_item li span.sta.no_ing {color:#30883e}
.my_item li span.sta.gray {color:#414040}
.my_item li span.sta.end {color:#ff5a5a}

/*********************************************
  공동장비현황
*********************************************/
.common_item {height:220px; overflow: auto;}
.common_item li {display:flex; justify-content: space-between; align-items: center; border-bottom:1px solid #e7f3fd; padding:12px 0 }
.common_item li:last-child {border-bottom:none;}
.common_item li span.name {width:calc(100% - 120px); white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.common_item li span.cate {display:inline-block; width:60px; color:#595959; }
.common_item li span.cate {}

.common_item li span.ing {display:inline-block;  text-align:center;color:#647ee3; background:#edf0f7; border-radius: 5px; padding:2px 10px; width:60px; box-sizing: border-box;}
.common_item li span.no_ing {display:inline-block;  text-align:center; color:#326c71; background:#e8f7f6; border-radius: 5px; padding:2px 10px; width:60px; box-sizing: border-box;}
.common_item li span.end {display:inline-block;  text-align:center; color:#d15c63; background:#fceeee; border-radius: 5px; padding:2px 10px; width:60px; box-sizing: border-box;}
.common_item li span.gray {display:inline-block;  text-align:center; color:#585858; background:#dfe0e2; border-radius: 5px; padding:2px 10px; width:60px; box-sizing: border-box;}


span.usable.ing {color:#4473c5}
span.usable.end {color:#ff5a5a}
span.usable.no_ing {color:#2c8b19}
span.usable.gray {color:#414040}



/*********************************************
  헬로DD
*********************************************/
.dd_list ul {margin:20px 0 0 0}
.dd_list ul li {position:relative}
.dd_list ul li a {display:flex; padding:0 0 0 25px; }
.dd_list ul li:nth-child(1) a {padding:0 0 30px 25px}
.dd_list ul li:nth-child(1)::before {content:'1';position:absolute; left:0; top:-3px; font-size:2.3rem; font-weight:600}
.dd_list ul li:nth-child(2)::before {content:'2';position:absolute; left:0; top:-3px; font-size:2.3rem; font-weight:600}
.dd_list ul li .con .title {padding:0 10px 0 0;width:240px; display: -webkit-box;-webkit-line-clamp: 2; /* 줄 수 제한 */ -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.dd_list ul li .con .date {color:#757575; display:inline-block; margin-top:15px;}
.dd_list ul li .thumnail {width:200px; height:80px; border-radius: 5px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.dd_list ul li .thumnail img {width:105%}


/*********************************************
    1-5 배너 슬라이드
*********************************************/
.banner {height:275px; overflow: hidden; border:1px solid #d7d7d7;}

/* 슬라이더 스타일 */
.slider { position: relative;  width: 100%; height:100%; overflow: hidden; border-radius: 8px;}
.slides { display: flex; transition: transform 0.5s ease; height:100%;}
.slide {background:url(../../images/eep/logo_en.png) center center no-repeat; background-size:300px; min-width: 100%; height:100%; overflow: hidden; box-sizing: border-box; position:relative; display:block;   position: relative;
  isolation: isolate; }
.slide::after {
  content: '';
  position: absolute;
  background: white;
  z-index: -1;
  inset: 0;
  opacity: 0.4;
}
.slide img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; width: 100%; max-width: none; max-height: none;}
.slide_control {position:absolute; bottom:0; right:0; background-color: rgba(0, 0, 0, 0.5); width:130px;border-radius: 15px 0 15px 0;
display:flex; justify-content: space-between; padding:5px 15px}

.slider-controls button#prevBtn {
  width:20px; height:25px; background:url(../../images/eep/icon_banner_arrow.svg) center center no-repeat ; background-size:6px; }

.slider-controls button#nextBtn {
   width:20px; height:25px; background:url(../../images/eep/icon_banner_arrow.svg) center center no-repeat; background-size:6px; transform: rotate(180deg);}
.slider-controls button span {font-size:0;}
.slide-indicator {
    position: relative; z-index: 1; display: inline-block; vertical-align: top; background-color: rgba(0, 0, 0, 0.5); padding: 3px 10px; box-sizing: border-box;
    border-radius: 50px; -webkit-border-radius: 50px; color:#ffffff; font-size:1.3rem;}




/*********************************************
    2-1 탭 게시판
*********************************************/

/* .notice {width:calc((100% / 2) - 10px);} */
/* .calendar {width:calc((100% / 2));} */

.middle_wrap {display:flex; gap:14px; margin-bottom:13px;}
.middle_wrap > div {width:calc((100% / 5) - 11px); }
.middle_wrap .notice {padding:27px 27px 20px 27px;  background:#ffffff; height:280px }

.middle_wrap > div:nth-child(1) { flex-grow: 2; }
.middle_wrap > div:nth-child(2) { flex-grow: 2; }
/* .middle_wrap > div:nth-child(3) { flex-grow: 1; } */

.notice .tabs {display: flex; gap: 10px; margin-bottom: 10px; border-bottom:2px solid #2f628f; padding:0 0 10px 0; position: relative; }
.notice .tabs .tab-item a:first-child {font-size:2rem; color: #848484;display: inline-block; }
.notice .tabs .tab-item {width:calc(100% / 7); }
.notice .tabs .tab-item a.active {color:var(--main-black);}
.notice .tab-content.active {overflow: hidden; height:175px;}

.notice .tab-content.active a.more {}

.notice .tab-content ul{width:100%; overflow: hidden;}
.notice .tab-content ul li{position:relative; box-sizing:border-box; line-height:2.7rem}
.notice .tab-content ul li span:first-of-type{position:relative;}
.notice .tab-content ul li span:first-of-type::before{width:4px;height:4px;border-radius:10px;background-color:#c3c3c3;content:"";position:absolute;left:2px;top:14px;}
.notice .tab-content ul li span{display:inline-block; vertical-align:top; color:#414040;}
.notice .tab-content ul li span.subject{width:100%; padding:0 80px 0 15px; box-sizing:border-box;}
.notice .tab-content ul li span.date{position:absolute; top:0; right:0; padding:3px 0; color:#8c8c8c; font-size:1.6rem; font-weight:400; }
.notice .tab-content ul a{overflow:hidden; display:block; width:100%; padding:3px 4px 0 0; white-space:nowrap; text-overflow:ellipsis; text-decoration:none; color: #4f4f4f; font-size:1.6rem}



/* 더보기 css */
.tab-more { position: absolute;  right: 0px; top: 15px; transform: translateY(-50%); display: none; width:18px; height:18px; font-size:0;}
.tab-link.active ~ .tab-more { display: inline-block; }
.tab-content.active {display: block;}
.tab-more:before, .tab-more:after{content: ""; position: absolute; background-color: black; transition: transform 0.25s ease-out;}
.tab-more:before{top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px;}
.tab-more:after{top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px;}
.tab-more:hover:before,
.tab-more:hover:after{ transform: rotate(180deg);}






/*********************************************
  포틀릿 공통

  *********************************************/
/* 전체 공통 포틀릿 디자인 */
.portlet {border-radius: 20px;  background:#ffffff;} /* border:1px solid #d7d7d7; */



.portlet_wrap {display: flex;}
.portlet_wrap .portlet { width:calc(100% / 3);height:310px; overflow: hidden;}
/* .portlet_wrap .portlet:nth-child(4n) {margin-right:0 !important;} */

.portlet_wrap .portlet.common_item {margin-right:28px; border:1px solid #d7d7d7;padding:22px;}
.portlet_wrap .portlet.banner {margin-right:28px;}
.portlet_wrap .portlet.helloDD {border:1px solid #d7d7d7;padding:22px;}

.portlet_wrap .portlet > div.title {border-bottom:2px solid #2f628f;display:flex; justify-content:space-between; align-items: center; padding:0 0 10px 0}
.portlet_wrap .portlet > div.title p span:first-child,
.portlet_wrap .portlet > div.title span  {font-size:2rem; font-weight:600; color:var(--main-black);}
.portlet_wrap .portlet > div.title p span:first-child + span {color:#555555; font-size:1.8rem; padding:0 0 0 5px;}
.portlet_wrap .portlet > div.title p span:first-child + span b {color:#2771d6; font-weight:600}


/* 더보기 css */
.portlet_wrap .portlet > div.title p + a {width:18px; height:18px; font-size:0; position:relative}
.portlet_wrap .portlet > div.title p + a:before, .portlet_wrap .portlet .title p + a:after{
      content: ""; position: absolute; background-color: black; transition: transform 0.25s ease-out;}

.portlet_wrap .portlet > div.title p + a:before{top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px;}
.portlet_wrap .portlet > div.title p + a:after{top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px;}
.portlet_wrap .portlet > div.title p + a:hover:before,
.portlet_wrap .portlet > div.title p + a:hover:after{ transform: rotate(180deg);}

/* 제목 + 셀렉트 가로 사이즈 */
.stats_data select, .helloDD select, .team_work select {width:140px}












span.type.blue {background:#727ded}
span.type.purple {background:#aa6ec6}
span.type.gray {background:#8f8f8f}

span.usable.ing {color:#4473c5}
span.usable.end {color:#ff5a5a}
span.usable.no_ing {color:#2c8b19}
span.usable.gray {color:#414040}







/* 공통 타이틀 */
.top_title {position:relative; text-align:center; font-size:2.8rem; color:#232323; font-weight:bold; padding:60px 0;}
.top_title::before {content:''; position:absolute; left:59px; top:52px; background:url(../../images/eep/icon_txt_start.png) 0 0 no-repeat; width:47px; height:33px;}
.top_title::after {content:''; position:absolute; right:70px; top:52px; background:url(../../images/eep/icon_txt_end.png) 0 0 no-repeat; width:47px; height:33px;}
.top_title .sub_tit {font-size:2rem; margin:20px 0 0 0; color:#484848;}
.top_title:has(.sub_tit) {padding:60px 0 30px 0;font-weight:500}

.company_slider .kit_slide p.tit {font-size:2.5rem; color:#3643a5; font-weight:600;}
.top_title b {font-weight:bold; color:#3643a5}
.company_slider .kit_slide p.tit b.black {color:#232323; font-weight:600}


/*********************************************
    공통
*********************************************/
.color_blue {color:#3835c9 !important;}
.color_red {color:#d65948 !important;}
select{min-width:80px; border:none; border-radius: 5px;height:30px; padding:0 0 0 15px; font-size:15px; font-weight:500; background:#f1f2f7 url(../../images/eep/icon_arrow.svg) right center no-repeat;background-size:2rem; appearance:none;-webkit-appearance:none;}
select option {background:#ffffff;font-size:15px; font-weight:500;}




ul[data-list-type='num'] li:hover::before {color:#4567e0;}

ul[data-list-type='num'] li {position:relative;}
ul[data-list-type='num'] > li::before {width:20px; display:inline-block; text-align:center; font-size:1.4rem}
ul[data-list-type='num'] > li:nth-child(1)::before { content: '1. '; }
ul[data-list-type='num'] > li:nth-child(2)::before { content: '2. '; }
ul[data-list-type='num'] > li:nth-child(3)::before { content: '3. '; }
ul[data-list-type='num'] > li:nth-child(4)::before { content: '4. '; }
ul[data-list-type='num'] > li:nth-child(5)::before { content: '5. '; }
ul[data-list-type='num'] > li:nth-child(6)::before { content: '6. '; }
ul[data-list-type='num'] > li:nth-child(7)::before { content: '7. '; }
ul[data-list-type='num'] > li:nth-child(8)::before { content: '8. '; }
ul[data-list-type='num'] > li:nth-child(9)::before { content: '9. '; }
ul[data-list-type='num'] > li:nth-child(10)::before { content: '10. '; }
ul[data-list-type='num'] > li:nth-child(11)::before { content: '11. '; }
ul[data-list-type='num'] > li:nth-child(12)::before { content: '12. '; }
ul[data-list-type='num'] > li:nth-child(13)::before { content: '13. '; }
ul[data-list-type='num'] > li:nth-child(14)::before { content: '14. '; }







/* ul[data-type='num'] li:hover::before {color:#4567e0 !important;} */

ul[data-type='num'] li {position:relative;}
ul[data-type='num'] > li::before {position:absolute; width:20px; display:inline-block; text-align:center; font-size:1.4rem; }
ul[data-type='num'] > li:nth-child(1)::before { content: '1. '; color:#4567e0 !important;}
ul[data-type='num'] > li:nth-child(2)::before { content: '2. '; color:#4567e0 !important;}
ul[data-type='num'] > li:nth-child(3)::before { content: '3. '; color:#4567e0 !important;}
ul[data-type='num'] > li:nth-child(4)::before { content: '4. '; color:#b3b3b3;}
ul[data-type='num'] > li:nth-child(5)::before { content: '5. '; color:#b3b3b3;}




/* 내부 스크롤 디자인 */
[data-scroll="custom"]::-webkit-scrollbar {width: 17px;}
[data-scroll="custom"]::-webkit-scrollbar-thumb {height:40px;background-color: #35478a;border-radius: 10px;background-clip: padding-box;border: 6px solid transparent;}
[data-scroll="custom"]::-webkit-scrollbar-track {background-color: transparent;border-radius: 10px;}

/*********************************************
  오늘의 식단
*********************************************/
.food {padding:22px;  height:275px; overflow: hidden;}
.food > div.title {border-bottom:2px solid #2f628f;display:flex; justify-content:space-between; align-items: center; padding:0 0 10px 0}
.food > div.title p span:first-child,
.food > div.title span  {font-size:2rem; font-weight:600; color:var(--main-black);}
.food > div.title p span:first-child + span {color:#555555; font-size:1.8rem; padding:0 0 0 5px;}
.food > div.title p span:first-child + span b {color:#2771d6; font-weight:600}

.food_list {position:relative; z-index:1}
.food_list::after { width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0; z-index: -1;
 background:url(../../images/eep/food_bg.svg) center center no-repeat; background-size:contain; opacity: 0.1; }
.food_list ul {margin-top:50px; font-size:1.6rem; line-height:31px; text-align:center;}




/*********************************************
  나의 기념일
*********************************************/
.my_anniversary {background:url(../../images/eep/anniversary_bg.svg) center center no-repeat #f09797; background-size: 40rem; }
.my_anniversary .tit {position:relative}
.my_anniversary .tit > .title {background: url(../../images/eep/anniversary_title.svg) center center no-repeat;background-size: 140px;font-size:0;width:100%;height: 55px;margin: 20px 0;}
.my_anniversary .tit > .title + .edit {position:absolute; top:0; right: 0px; width:30px; height:30px; background:url(../../images/eep/btn_icon_edit.png) center center no-repeat #ffffff; border-radius: 30px; background-size:15px;}


.my_anniversary .list {border-radius: 10px;background:#ffffff;padding:0 17px;margin: 15px 15px;height:200px;overflow-y:auto}
.my_anniversary .list li {display:flex; justify-content: space-between; align-items: center; padding:13px 10px 13px 50px; border-bottom:1px solid #e7f3fd; }
.my_anniversary .list li:last-child {border-bottom:none;}

.my_anniversary .list li span.d_day {color:#e85b6e; font-size:1.6rem; position:relative;}
.my_anniversary .list li span.plus::before {content:'D +'; display:inline-block; padding:0 5px 0 0}
.my_anniversary .list li span.minus::before {content:'D -'; display:inline-block; padding:0 5px 0 0}

.my_anniversary .list li .name {line-height:20px}
.my_anniversary .list li .name .title {font-size:1.8rem; color:#373737}
.my_anniversary .list li .name .date {font-size:1.4rem; color:#8e8e8e;}

.my_anniversary .list li.marry {background: url(../../images/eep/anniversary_heart.svg) 7px center no-repeat; background-size: 28px;}
.my_anniversary .list li.bday {background: url(../../images/eep/anniversary_candle.svg) 5px center no-repeat; background-size: 30px;}
.my_anniversary .list li.test {background: url(../../images/eep/anniversary_test.svg) 5px center no-repeat; background-size: 33px;}




/*********************************************
    로그인
*********************************************/
 .wrap:has(.login_wrap) .footer { height: auto; display:none !important;}

#body_layout {position:relative;}
/* #body_layout::before {content:'';display: block;width: 600px;height: 600px;background:url(../../images/eis/login_emblem_bg.svg) 0 0 no-repeat;background-size: 600px;opacity: 0.2;position: absolute;right: 0;top: -117px;}*/
.wrap:has(.login_wrap) {}

    /* 비디오를 화면 전체에 고정 */
    .bg-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
       object-fit: cover; /*화면 가득 채우기(비율 유지, 잘림 발생 가능) */
      z-index: -1;       /* 배경으로 배치 */
    }


/* .wrap:has(.login_wrap) {background:#f3f2f6;}  */
.login_wrap {width:770px; margin:0 auto; display:flex; padding:200px 0 145px 0;} /* 1240px; */
.login_wrap .left {width:770px; box-sizing: border-box; background:url(../../images/eep/login_bg.png) 484px -100px no-repeat #ffffff; border-radius: 30px;}
.login_wrap .right {width:calc(1240px - 770px);  box-sizing: border-box; border-radius: 0 30px 30px 0;}
/* .login_wrap > div {padding:60px;} */
.left_wrap {width:460px;margin:0 auto; padding:80px 0 46px 0}

.login_wrap .left div.title {font-size:2.1rem; color:#303030; font-weight:500; padding:0 0 40px 0}
.login_wrap .left div.title b {font-weight:500; color:#505050}
.login_wrap .left div.title .title {color:#303030; font-size:4rem; font-weight:700}

.login_wrap .left input {height:56px; border:1px solid #dddddd; border-radius:10px; width:100%; padding:0 10px 0 50px;}
/*
.login_wrap .left input.login_id {background:url(../../images/eep/icon_id.png) 20px center no-repeat #ffffff; margin:0 0 13px 0}
.login_wrap .left input.login_pw {background:url(../../images/eep/icon_pw.png) 20px center no-repeat #ffffff; margin:0 0 30px 0}
*/

 .login_wrap .left input.login_id {margin:0 0 13px 0; }
.login_wrap .left input.login_pw {background:#ffffff; margin:0 0 30px 0}

.login_wrap .left input.login_num6 {background:url(../../images/eep/icon_num6.png) 18px center no-repeat #ffffff; margin:0 0 13px 0}
.login_wrap .left input:disabled.login_num6 {background:url(../../images/eep/icon_num6.png) 18px center no-repeat #efefef}


/* 자동완성 수정 + 자동완성 검색 주석처리 + 라벨추가 */
.login_wrap .input_form ul.text li:nth-child(1) label {font-size:0; position:relative; display:block}
.login_wrap .input_form ul.text li:nth-child(1) label::before {content:'';position:absolute;width: 20px;height: 20px;top: 19px;left: 18px;background: url(../../images/eep/icon_id.png) 0 0 no-repeat;}

.login_wrap .input_form ul.text li:nth-child(2) label {font-size:0; position:relative; display:block}
.login_wrap .input_form ul.text li:nth-child(2) label::before {content:'';position:absolute;width: 20px;height: 20px;top: 19px;left: 18px;background: url(../../images/eep/icon_pw.png) 0 0 no-repeat;}



.login_wrap .left .num_btn,
.login_wrap .left .login_btn {display:flex; gap:5px;}
.login_wrap .left .num_btn .btn {border-radius: 10px; color:#ffffff; padding:10px; width:100%; text-align:center; font-size:1.6rem;}
.login_wrap .left .num_btn .btn span {position: relative; padding:0 0 0 20px}
.login_wrap .left .num_btn .btn.btn_time span::before {content:'';position:absolute;width: 20px;height: 20px;top:0;left: -4px;background: url(../../images/eep/icon_time.png) 0 center no-repeat;}
.login_wrap .left .num_btn .btn.btn_numreset span::before {content:'';position:absolute;width: 20px;height: 20px;top: 0;left: -4px;background: url(../../images/eep/icon_reset.png) 0 center no-repeat}
.login_wrap .left .num_btn .btn.btn_time {background:#575e85;}
.login_wrap .left .num_btn .btn.btn_numreset {background:#727272;}


.login_wrap .left .num_btn +.txt_box {margin:15px 0 30px 0; text-align:center; font-size:1.4rem }
.login_wrap .left .num_btn +.txt_box b {color:#4567e0; font-weight:500}

.login_wrap .left .login_btn .btn {border-radius: 10px; color:#ffffff; padding:15px 10px; width:100%; text-align:center; font-size:1.6rem;}
.login_wrap .left .login_btn .btn.btn_login {background:#3b638a}
.login_wrap .left .login_btn .btn.btn_pwreset {background:#727272}
.login_wrap .left .down_box {background:#f6f6f6; border-radius: 5px; margin:24px 0 0 0; padding:15px 20px; font-size:1.4rem; text-align:center;}
.login_wrap .left .down_box p {margin:0 0 10px 0;}
.login_wrap .left .down_box ul {display:flex; gap:5px; justify-content: center;}
.login_wrap .left .down_box ul li a {background:url(../../images/eep/icon_download.png) 13px center no-repeat #ebecf2; border-radius: 5px; display:inline-block; padding:5px 20px 5px 30px}

.login_wrap .right {background:url(../../images/eep/login_right_bg.png) 0 0 no-repeat #303c7e; background-size: cover; }
.login_wrap .right .box {background-color: rgba(0, 0, 0, 0.2); color:#ffffff; border-radius: 10px; margin:0 0 15px 0}
.login_wrap .right .box:last-child {margin:0;}
.login_wrap .right .right_wrap {width:330px; margin:0 auto; padding:50px 0 35px 0}
.login_wrap .right_wrap .box:first-child {padding:10px; text-align:center; font-size:1.5rem; font-weight:400}

.login_wrap .right_wrap .box:nth-child(2) {padding:22px 17px 17px 17px}
.login_wrap .right_wrap .box:nth-child(2) > .title {text-align:center; font-size:1.8rem;margin:0 0 25px 0}
.login_wrap .right_wrap .box:nth-child(2) > .title + ul {}
.login_wrap .right_wrap .box:nth-child(2) > .title + ul li a {position:relative; font-size:1.4rem; padding:0 0 0 20px; line-height: 2.5rem;}
.login_wrap .right_wrap .box:nth-child(2) > .title + ul li a:hover,
.login_wrap .right_wrap .box:nth-child(2) > .title + ul li a.on {color:#fff2b3}
.login_wrap .right_wrap .box:nth-child(2) > .title + ul li a::before{content:''; position:absolute; width:3px; height:3px; border-radius: 3px; background:#ffffff; left:7px; top:7px;}
.login_wrap .right_wrap .box:nth-child(2) > .title + ul li a:hover::before,
.login_wrap .right_wrap .box:nth-child(2) > .title + ul li a.on::before {background:#fff2b3}
.login_wrap .right_wrap .board_view {border-radius:10px; background:#ffffff; padding:10px; margin:10px 0 0 0}
.login_wrap .right_wrap .board_view .title {color:#20274f; font-size:1.6rem; border-bottom:1px solid #ced2e5; padding:0 0 10px 25px; background:url(../../images/eep/icon_notice.png) 5px 5px no-repeat; margin:0 0 13px 0 }
.login_wrap .right_wrap .board_view .view {color:#353535; font-size:1.4rem; height:140px; overflow: auto;}

.login_wrap .right_wrap .box:nth-child(3) {padding:25px 35px}
.login_wrap .right_wrap .box:nth-child(3) ul li {position:relative; padding:0 0 0 20px; font-weight:400}
.login_wrap .right_wrap .box:nth-child(3) ul li::before {content:''; position:absolute; width:3px; height:3px; border-radius: 3px; background:#ffffff; left:7px; top:7px;}

.login_wrap .right_wrap .info a {color:#ffffff; display: block; border-radius: 10px;padding:18px; text-align:center; background: rgba(255, 255, 255, 0.2);}
.login_wrap .right_wrap .info a span {position:relative; padding:0 0 0 50px;}
.login_wrap .right_wrap .info a span::before {content:'';background:url(../../images/eep/icon_info.png) 0 center no-repeat;position:absolute;width: 50px;height: 50px;top: -14px;left: 25px;}

@media screen and (max-width: 1300px){
  .login_wrap {display:block; width:600px; padding:50px 10px}
  .login_wrap .left,
  .login_wrap .right {width:100%;}
  .login_wrap .left {border-radius: 20px 20px 0 0;background: url(../../images/eep/login_bg.png) 383px -100px no-repeat #ffffff;}
  .login_wrap .right {border-radius: 0 0 20px 20px;}
  .login_wrap .right .right_wrap {width:92%}

}

@media screen and (max-width: 640px){
  .login_wrap {width:98%; padding: 30px 10px 0 10px}
  .login_wrap .left_wrap {width:85%; padding:40px 0}
  .login_wrap .left .down_box ul {display:block;}
  .login_wrap .left .down_box ul li a {display:block;}
  .login_wrap .left .down_box ul li:first-child {margin:0 0 10px 0}
  .login_wrap .left {border-radius: 10px 10px 0 0; background: url(../../images/eep/login_bg.png) 283px -100px no-repeat #ffffff;}
  .login_wrap .right {border-radius: 0 0 10px 10px;}

  .login_wrap .left div.title {font-size:1.6rem; padding:0 0 20px 0}
  .login_wrap .left div.title .title {font-size:3rem}
  .login_wrap .left .num_btn .btn,
  .login_wrap .left .login_btn .btn {font-size:1.3rem}
  .footer p {font-size:1.3rem}
  .footer p span {display: block;}
}