@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;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	배경
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */

body.skyblue { background:#e7f3fd; }
body.candy { background:url(../../images/eis/spring.jpg) 0 0 no-repeat; position:relative}
body.candy::before {}
body.candy::after {}
body.summer { background:url(../../images/eis/summer.jpg) 0 0 repeat-y #519fed; position:relative}
body.summer::before {content:''; width:160px; height:153px; position:absolute; right:10px; top:30%; display:inline-block; background:url(../../images/eis/swim.png) 0 0 no-repeat;animation: swim 2.5s infinite; background-size:100px}
body.summer::after {content:''; width:130px; height:174px; position:absolute; left:20px; bottom:0; display:inline-block; background:url(../../images/eis/swim_1.png) 0 0 no-repeat;animation: swim 1s infinite; background-size:70px;}
body.simple { background:url(../../images/eis/bg_green.jpg) 0 0 repeat}
body.simple::before {}
body.simple::after {}

body.rainbow {
  background: linear-gradient(-45deg, #f1c9c4 0%, #f0ded0 30%, #f0edcd 50%, #c4f3ee 70%, #cbd9f2 100%); position:relative;
  background-size: 600% 600%;
  animation: bg-motion 15s ease-in-out infinite;
}

  @keyframes bg-motion {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
    }

  @keyframes swim {
    0% {background-position-y: 0;}
    50% {background-position-y: .5rem;}
    100% {background-position-y: 0;}
  }

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	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;}




.main_wrap {width:1600px; margin:0 auto; position:relative;}
.main_wrap header {position:absolute; top:100px; left:-90px;}

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

/* 주메뉴 */
header#gnb {}
header#gnb ul {width:58px; overflow: hidden; border-radius: 10px;}
header#gnb ul li a {color:#ffffff; display:block; padding:22px 0; text-align:center;box-shadow: inset 2px 2px 5px rgba(51, 51, 51, 0.35);}


header#gnb ul li:nth-child(1) a {background:#11a1a1}
header#gnb ul li:nth-child(2) a {background:#3835c9}
header#gnb ul li:nth-child(3) a {background:#7331a7}
header#gnb ul li:nth-child(4) a {background:#df5366}
header#gnb ul li:nth-child(5) a {background:#eba000}
header#gnb ul li:nth-child(6) a {background:#00904c;  line-height:2rem; padding:15px 0 !important}
header#gnb ul li:nth-child(6) a span {display:block; }





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

h1{position: relative; z-index:0;} /* top: 33px; 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/cms/logo_b.png); 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:10px}
.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: #ffffff; 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/eis/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/eis/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/eis/util_step1.png) center 0 no-repeat;}
.top_util .top_step[data-step="2"] {background: url(../../images/eis/util_step2.png) center 0 no-repeat;}
.top_util .top_step[data-step="3"] {background: url(../../images/eis/util_step3.png) center 0 no-repeat;}
.top_util .top_step[data-step="4"] {background: url(../../images/eis/util_step4.png) center 0 no-repeat;}
.top_util .top_step span {padding:40px 0 0 0; display:inline-block; font-weight:600}


#main > .top_wrap {position:relative; display:flex; justify-content: space-between; flex-wrap: wrap;gap:10px; margin:0 10px 10px 0}
#main > .top_wrap > .portlet {width:calc((100% / 4) - 11px);}
#main > .top_wrap .updown {width:calc((100% / 2) - 6px);  display:flex; gap:10px }
#main > .top_wrap .updown > div:first-child {margin-bottom:0}

/*  display:flex; flex-wrap: wrap; align-content: space-between; */






/********************************************* 
    검색

*********************************************/
#search-form{
	position:absolute; left:0; top:100px; 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.2rem; 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/eis/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/eis/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 {}
#main .my_info { overflow: hidden; }
#main .my_info .top_box {padding:10px 20px; background:#0174b7; display:flex; align-items: center; justify-content: space-between;}
#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;}
.logout {display:inline-block; margin:0 0 0 5px;}

#main .my_info .top_box .goout {font-size:1.3rem}
#main .my_info .top_box .goout ul li:first-child {margin-bottom:3px;}
#main .my_info .top_box .goout ul li {display:flex; align-items: center;}
#main .my_info .top_box .goout ul li span.title {padding:3px 10px; color:#ffffff; background:#364496; border-radius: 5px;}
#main .my_info .top_box .goout ul li span {padding:3px 10px; height:25px; border-radius: 5px; background:#ffffff; margin-left:3px; display:inline-block; width:50px; text-align:center;}

.work_time {padding:10px 20px;  }
.work_wrap {background:#e7f3fd; border-radius: 5px;}
.work_wrap ul {display:flex; gap:5px; align-items: center; justify-content: space-between;padding:7px}
.work_wrap ul li {width:calc(100% / 4); text-align:center; border-radius: 5px; }
.work_wrap ul li span {display:block; color:#636363; font-size:1.2rem}
.work_wrap ul li span:nth-child(2) {color:#3551bb; font-size:1.5rem }
.work_wrap ul li:first-child {background:url(../../images/eis/my_info_icon_left.svg) center 10px no-repeat #ffffff; background-size:3rem 3rem ;padding: 40px 0 5px 0;}
.work_wrap ul li:nth-child(2) {background:url(../../images/eis/my_info_icon_basic.svg) center 10px no-repeat #ffffff; background-size:3rem 3rem ;padding: 40px 0 5px 0;}
.work_wrap ul li:nth-child(3) {background:url(../../images/eis/my_info_icon_plus.svg) center 10px no-repeat #ffffff; background-size:3rem 3rem;padding: 40px 0 5px 0;}
.work_wrap ul li:nth-child(4) a {display:block; height:100%; padding: 60px 0 5px 0; background: url(../../images/eis/my_info_icon_bike.svg) center 22px no-repeat #68709d; background-size:2.2rem 2.2rem; border-radius: 5px;}
.work_wrap ul li:nth-child(4) a p {color:#ffffff; font-size:1.6rem}
.work_wrap ul li:nth-child(4) a:hover {background: url(../../images/eis/my_info_icon_bike.svg) center 22px no-repeat #41476b; background-size:2.2rem 2.2rem;}

.mail_wrap {background:#fefae3; border-radius: 5px; padding:18px 8px; margin:10px 0 0 0}
.mail_wrap .in_mail {background:url(../../images/eis/my_info_icon_bluemail.svg) 10px 8px no-repeat; background-size: 4rem; padding:0 0 0 65px;}
.mail_wrap .out_mail {background:url(../../images/eis/my_info_icon_redmail.svg) 10px 8px no-repeat; background-size: 4rem; padding:0 0 0 65px; margin-top:10px}
.mail_wrap .in_mail p:first-child,
.mail_wrap .out_mail p:first-child {display:flex; justify-content: space-between; align-items: center; height:25px;}
.mail_wrap .in_mail p > span {color:#444444; font-size:1.2rem; font-weight:500;}
.mail_wrap .out_mail p > span {color:#444444; font-size:1.2rem; font-weight:500;display:inline-block;}
.mail_wrap .out_mail p > 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 p > span > b::before {content:''; display:inline-block; width:1px; height:12px; position:absolute; left:8px; top:8px; background:#a0a0a0;}

.mail_wrap .in_mail p a,
.mail_wrap .out_mail p a {border-radius: 5px; background:#ffffff; font-size:1.2rem; padding:3px 8px; font-weight:500}
.mail_wrap .in_mail p a b {color:#0073b7; font-weight:500;}
.mail_wrap .in_mail p:nth-child(2),
.mail_wrap .out_mail p:nth-child(2) {font-weight:500; height:20px;  font-size:1.2rem}
.mail_wrap .in_mail p:nth-child(2) b {color:#36ad12; font-weight:500;}

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


/*총 근로일수 */
.work_day {margin-top:16px;display:flex; flex-direction:column; gap:0;}
.work_day .work_title {display:flex; justify-content: space-between; align-items: center;}
.work_day .work_title p {font-size:1.2rem; 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.2rem;}

#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/eis/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: #ffffff; }
progress::-webkit-progress-bar {  background-color: #ffffff; 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 전자결재
*********************************************/
#main .updown .portlet {border-radius: 20px;}

#main .updown .e_paper {height:auto;}
#main .updown .e_paper ul {display: flex; flex-wrap: wrap; gap: 13px; padding: 0; margin: 15px 0 0 0;}
#main .updown .e_paper ul li {flex: 1 1 calc(50% - 6.5px); box-sizing: border-box;}
#main .updown .e_paper ul li a {border-radius: 5px; padding:12px 14px 12px 10px; display:block; color:#35478a; font-size:1.2rem;       
    display: flex; justify-content: space-between; position:relative; background: #edf0f7;}
#main .updown .e_paper ul li a span.paper_title {display:inline-block;width:100px; text-align:right;padding:0 8px 0 0;}
/* #main .updown .e_paper ul li a span:nth-child(2) {color:#363636;} */
#main .updown .e_paper ul li a span:nth-child(2) b {color:#00a0c7; font-weight:500; display:inline-block; text-align: right; padding:0 3px 0 0;}



/********************************************* 
    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/eis/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/eis/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/eis/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/eis/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/eis/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/eis/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;
}




/********************************************* 
    1-3 외부강의
*********************************************/
#main .updown .b_trip { height:280px; padding:27px 27px 15px 27px; background:url(../../images/eis/b_trip_bg.svg) 20px 55px no-repeat #fee0e2; background-size: 160px; border:none;}
.flex_box {display:flex; justify-content: flex-end;}
#main .updown .b_trip .approval {text-align:center; margin-bottom:10px;}
#main .updown .b_trip .approval p {font-size:2rem; color:var(--main-black);}
#main .updown .b_trip .approval a {display:inline-block; background:#7331a7; font-size:1.6rem; color:#ffffff; padding:10px 25px; border-radius: 10px;}

.b_trip_box {border-radius: 5px; background:#ffffff; padding:10px 15px;}
.b_trip_box > .title {padding:0;}
.b_trip_box .state_box {display:flex; justify-content: space-between;}
.b_trip_box .state_box .trip_state p {color:#4d4d4d; font-size:1.5rem}
.b_trip_box .state_box .trip_state p span.title {display:inline-block; width:30px; font-weight:600}
.b_trip_box .state_box .trip_state p span.time {position:relative; padding:0 0 0 10px}
.b_trip_box .state_box .trip_state p span.time::before {content:':'; width:2px; height:10px; display:inline-block; position:absolute; left:0; top:-3px;}
.b_trip_box .state_box .trip_state p:first-child span.title {color:#4567e0}
.b_trip_box .state_box .trip_state p:nth-child(2) span.title {color:var(--main-black)}

.trip_paper_list li a {color:var(--main-black); padding:0px;  font-size:1.2rem}
.trip_paper_list li a:hover {color:#4567e0}
.trip_paper_list li a span.title {display:inline-block}
.trip_paper_list li a span.paper_name {position:relative; padding:0 0 0 15px}
.trip_paper_list li a span.paper_name::before {content:'|'; width:2px; height:10px; display:inline-block; position:absolute; left:5px; top:-2px;}





/********************************************* 
    1-4 알림 게시판
*********************************************/
.alarm {padding:27px 20px 5px 20px}
.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; padding:2.6rem 0 2.6rem 7rem; border-bottom: 1px solid #e7f3fd; box-sizing:border-box;}
.issue_board > section {position:absolute; top:1.2rem; 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; font-size:1.2rem;}
.issue_board strong{display:inline-block;font-weight:600; width:32px; margin:0 10px 0 0}
.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;}



/********************************************* 
    1-5 배너 슬라이드 
*********************************************/
.banner {height:275px; overflow: hidden; border:none !important;}

/* 슬라이더 스타일 */
.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/eis/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: 110%; width: auto; 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/eis/icon_banner_arrow.svg) center center no-repeat ; background-size:6px; }

.slider-controls button#nextBtn {
   width:20px; height:25px; background:url(../../images/eis/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;}



/********************************************* 
    1-6 NIMS FAM 생일
*********************************************/
.middle_wrap .b_day {border:none !important; background:url(../../images/eis/b_day_bg.png) -120px center no-repeat #fff3e3; background-size:60rem; padding:2rem}
.b_day .b_title {display:flex; margin-bottom:10px;}
.b_day .b_title img {width:15rem;}
.b_day .b_title p {margin:0 0 0 17px;}
.b_day .b_title span {display:block; color:#9f5b13; line-height:18px; font-size:1.5rem}
.b_day .b_list_box {border-radius: 5px; background:#ffffff; padding:15px; height:193px; overflow-y: auto;}
/* .b_day .b_list_box::-webkit-scrollbar {display: none;} */
.b_day .b_list_box .one {display:flex; align-items: center; justify-content: space-between; margin-top:10px;}
.b_day .b_list_box .one:first-child {margin-top:0}
.b_day .b_list_box .one .pic {overflow: hidden; width:47px; height:47px; border-radius: 50%; position:relative}
.b_day .b_list_box .one .pic img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 110%; width: auto; max-width: none; max-height: none;}
.b_day .b_list_box .one .per_info {width:50%}
.b_day .b_list_box .one .per_info p {line-height:20px}
.b_day .b_list_box .one .per_info p.name {font-size:1.2rem;}
.b_day .b_list_box .one .per_info p.name span.day { font-size:1.5rem; color:#7957c2; background:#edf0f7; border-radius: 3rem; display:inline-block; margin-left:10px; padding:0px 8px; line-height:18px;}
.b_day .b_list_box .one .per_info p.team {color:#666666; font-size:1.2rem}
.b_day .b_list_box .one .per_info p.team span.position {position:relative; padding:0 0 0 15px}
.b_day .b_list_box .one .per_info p.team span.position::before {content:'|'; position:absolute; left:6px; top:-2px; color:#989898;}
.b_day .b_list_box .one .messege {background:#fff3e3; border-radius: 10px; position:relative; padding:2px 0 2px 20px; width:100px;}
.b_day .b_list_box .one .messege::before {content:'';position:absolute; top:5px; left:-7px; width:22px; height:15px; background:url(../../images/eis/b_day_letter.svg) 0 0 no-repeat; background-size: contain; display:inline-block;}
.b_day .b_list_box .one .messege a {color:#bc6515; font-size:1.5rem }

.new_per.b_day {background:url(../../images/eis/b_day_bg.png) -299px -154px no-repeat #edf0f7; background-size:80rem; padding:2rem; }
.new_per .welcome {background:#edf0f7; border-radius: 10px; position:relative; padding:2px 0 2px 20px; width:90px;}
.new_per .welcome::before {content:'';position:absolute; top:5px; left:-7px; width:22px; height:15px; background:url(../../images/eis/b_day_letter.svg) 0 0 no-repeat; background-size: contain; display:inline-block;}
.new_per .welcome a {color:#7957c2; font-size:1.5rem; padding:0 0 0 5px }
.new_per .b_title span {display:block; color:#393939; line-height:18px; font-size:1.5rem}


/* 생일축하 모달팝업 & 신규 입소자 환영 모달 팝업*/
.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;}

.modal-content {background: url(../../images/eis/b_day_bg.png) -201px -132px no-repeat #fff3e3; background-size:75rem; margin:auto; padding: 20px;
  width: 450px; border-radius: 10px; text-align: center;}
.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}

.birth_per {text-align: left;}
.birth_per .title {font-size:2.5rem; font-weight:700; margin:0 0 20px 0; text-align:center; border-bottom:1px solid #f4dec8; padding:10px 0; color:#232323}

.birth_per .wrap { display:flex;}
.birth_per .wrap .pic {overflow: hidden; width:47px; height:47px; border-radius: 50%; position:relative; margin:0 10px 0 0;}
.birth_per .wrap .pic img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 110%; width: auto; max-width: none; max-height: none;}
.birth_per .wrap .txt {color:#232323}
.birth_per .wrap .txt h2 {font-size:1.2rem}


/* 불편신고 모달 */
.error_modal {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; background: #fff;
  padding: 20px; border-radius: 12px; z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
.error_modal p {font-weight: bold; font-size: 18px; margin-bottom: 16px;}
.error_modal select,
.error_modal textarea,
.error_modal input[type="file"] { width: 100%; margin-bottom: 12px; font-size: 14px; padding: 8px; box-sizing: border-box; border-radius: 6px; border: 1px solid #ccc;}
.error_modal #etcInputArea textarea { width: 100%; padding: 8px; resize: vertical; height: 100px; margin-bottom: 8px;}
.error_modal select { width: 100%; padding: 8px; margin-bottom: 12px; height:37px;}
.error_modal .solution_box { background: #f8f8f8; border: 1px solid #ddd; padding: 10px; margin-bottom: 12px; font-size: 14px; border-radius: 6px; display: none;}
.error_modal .modal-buttons { display: flex; justify-content: space-between; gap: 10px; }
.error_modal .modal-buttons button {flex: 1; padding: 10px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer;background: #4567e0; color:#ffffff}
#cancelBtn { background-color: #8f8f8f; color: #fff;}
#directReportBtn { background-color: #169963; color:#fff;}

.dimmed { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9998; display: none; }
.error_modal #solutionBox { width: 100%; margin-bottom: 12px; font-size: 14px;
  padding:8px; box-sizing: border-box; border-radius: 6px; border: 1px solid #ccc; height:100px; overflow: auto;}


/* 신규입소자 모달팝업 */
.modal + .modal_backdrop { display: none; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 999;}
.cont {background: url(../../images/eis/b_day_bg.png) -201px -132px no-repeat #f1f2f7; background-size:75rem; margin:auto; padding: 20px;
  width: 450px; border-radius: 10px; text-align: center;}


.cont img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 2px solid #ddd; margin-bottom: 12px;}
.cont .info { margin-bottom: 16px; color:#232323}
.cont .info p:first-child {font-size:2.5rem; font-weight:600} 
.cont .info p:nth-child(2) { margin: 0 0 4px 0; font-size: 1.6rem;}
.cont textarea {width:100%; border-radius: 10px; padding:10px; margin:0 0 15px 0; resize: none; height:130px}
.cont button {padding: 10px 20px; border-radius: 5px; background:#ffffff; }


/* 헬로 DD 모달 */
.dd_modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex;
  justify-content: center; align-items: center; z-index: 10000;}

.dd_modal_dimmed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}
.dd_modal_content {
  position: relative; background: #ffffff; padding: 30px 24px 15px 24px;
  width: 800px; border-radius: 8px; z-index: 10001; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);}
.dd_modal_title {font-size:2.3rem; color:#232323}
.dd_modal_text {border:1px solid #f1f1f1; height:600px; border-radius: 5px; padding:10px; overflow: auto; background:#f9f9f9}
.dd_modal_body {font-size: 1.6rem; margin-bottom: 15px;}
.dd_modal_buttons {display: flex;justify-content: flex-end; gap: 10px;}
.dd_modal_buttons button {padding: 8px 16px;
  border: none;border-radius: 4px;cursor: pointer; background-color: #4567e0;
  color: #ffffff;}

.dd_modal_buttons #ddCloseBtn { background-color: #999;}
.info_group {padding:5px 15px; background:#edf0f7; margin:10px 0; border-radius: 5px;}
.info_group span {padding:0 30px 0 0; font-size:1.2rem; position:relative; color:#505575; font-weight: normal;}
.info_group span::before {content:''; width:1px; height:10px; position:absolute; right:11px; top:3px; background:#6f748d}
.info_group span:last-child::before {display:none;}

.dd_modal_content .img_box {border-radius: 5px; overflow: hidden;width:100%; height:300px; background:#f1f1f1; text-align:center; margin:0 0 5px 0}
.dd_modal_content img {display: inline-block; vertical-align: middle;  max-width: 100%; height: -webkit-fill-available;}
.dd_modal_content .img_alt {margin:0 0 10px 0; font-size:1.2rem; color:#636363}

.dd_modal_content .subheading {
    margin: 0 0 1.875rem;
    padding-left: .75rem;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: -0.05em;
    border-left: 3px solid #d6d6d6;
    word-break: normal;
    word-wrap: break-word
}


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

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

.middle_wrap {display:flex; gap:10px; margin:0 10px 10px 0;}
.middle_wrap > div {width:calc((100% / 5) - 10px); }
.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);} 



/********************************************* 
    2-2 달력 내부외부 일정
*********************************************/
.calendar {padding:20px 27px}
.calbox {display:flex; justify-content:space-between; gap:2.3%; position:relative; width:100%; margin:10px 0;}
.calbox .cal {flex-shrink:0; width:calc((100% - 2.3%) - 52%); min-width: 280px; transition: width 0.25s;}

.calbox .txts {width:calc((100% - 2.3%) - 45%); font-size:1.6rem; transition: width 0.25s; } /* height:400px;  */
.calbox .txts ol {background:#f1f2f7; border-radius: 5px; padding:15px; overflow-y: auto; height:220px;}
.calbox .txts ol > li {width:100%; border-radius: 5px; background:#ffffff; padding:4px 0; margin:10px 0 0 0; }
.calbox .txts ol > li:first-child {margin-top:0}
.calbox .txts ol > li strong {display:inline-block; width:80px; text-align:center;color:#555555; font-weight:600; vertical-align: top;}
.calbox .txts ol > li > ul {display:inline-block; vertical-align:middle; width:calc(100% - 90px); }
.calbox .txts ol > li > ul > li {line-height:25px; white-space:nowrap;text-overflow:ellipsis; overflow: hidden;padding:0 0 0 17px;} 


.calbox .txts ol > li > ul > li span.cate{position:relative;}
.calbox .txts ol > li > ul > li span.cate::before{width:9px;height:9px;border-radius:10px;content:"";position:absolute;left:-15px;top:4px;}

.calbox .txts ol > li > ul > li span.cate.inplan::before{background-color:#169963;}
.calbox .txts ol > li > ul > li span.cate.outplan::before{background-color:#6270f4;}



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

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



.portlet_wrap {display: flex; flex-direction: row; flex-wrap: wrap; gap:13px}
.portlet_wrap .portlet {padding:22px; width:calc((100% / 5) - 10px);height:290px; overflow: hidden;}
/* .portlet_wrap .portlet:nth-child(4n) {margin-right:0 !important;} */

.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.2rem; 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}

/********************************************* 
  오늘의 식단
*********************************************/
.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.2rem; 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/eis/food_bg.svg) center center no-repeat; background-size:contain; opacity: 0.1; }
.food_list ul {margin-top:10px; font-size:1.6rem; line-height:31px; text-align:center;}





/********************************************* 
  연구과제 진행중인 연구과제
*********************************************/
.project_wrap .project_step {padding:30px 0 0 0;}
.project_wrap .project_step .bg {padding:0 0 0 50px;}
.project_wrap .project_step:first-child .bg {background:url(../../images/eis/project_1_icon.svg) 0 0 no-repeat; background-size:40px;}
.project_wrap .project_step:nth-child(2) .bg {background:url(../../images/eis/project_2_icon.svg) 0 0 no-repeat; background-size:40px;}
.project_wrap .project_step p.title {font-size:1.6rem; color:var(--main-black); white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.project_wrap .project_step p:nth-child(2) {font-size:1.2rem}
.project_wrap .project_step p:nth-child(2) span {position:relative; color:#555555; padding:0 0 0 15px}
.project_wrap .project_step p:nth-child(2) span::before {content:''; width:1px; height:10px; background: #a9a9a9; display:inline-block;
 position:absolute; top:3px; left:8px;}
.project_wrap .project_step p:nth-child(2) span:first-child {padding:0;}
.project_wrap .project_step p:nth-child(2) span:first-child::before {display:none;}


/********************************************* 
  나의 보유자산
*********************************************/
.my_item {padding:22px;  height:280px; overflow: hidden;}
.my_item > div.title {border-bottom:2px solid #2f628f;display:flex; justify-content:space-between; align-items: center; padding:0 0 10px 0}
.my_item > div.title p span:first-child,
.my_item > div.title span  {font-size:2rem; font-weight:600; color:var(--main-black);}
.my_item > div.title p span:first-child + span {color:#555555; font-size:1.2rem; padding:0 0 0 5px;}
.my_item > div.title p span:first-child + span b {color:#2771d6; font-weight:600}

.edit {display:inline-block; width:30px; height:30px; background:url(../../images/eis/btn_icon_edit.png) center center no-repeat #f1f2f7; border-radius: 30px; background-size:15px;}
.option {display:inline-block; width:30px; height:30px; background:url(../../images/eis/btn_icon_option.png) center center no-repeat #f1f2f7; border-radius: 30px; background-size:15px;}

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

.my_item .my_item_list ul {height:185px; overflow: auto;}

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}


/********************************************* 
  개인현황
*********************************************/
.personal {padding:22px; height:280px; overflow: hidden;}
.personal > div.title {border-bottom:2px solid #2f628f;display:flex; justify-content:space-between; align-items: center; padding:0 0 10px 0}
.personal > div.title p span:first-child,
.personal > div.title span  {font-size:2rem; font-weight:600; color:var(--main-black);}
.personal > div.title p span:first-child + span {color:#555555; font-size:1.2rem; padding:0 0 0 5px;}
.personal > div.title p span:first-child + span b {color:#2771d6; font-weight:600}



.personal ul {display:flex; flex-wrap: wrap; padding:17px 0 0 0}
.personal ul li {width:50%; height:90px; padding:16px 0 0 0; box-sizing: border-box;}
.personal ul li:nth-child(2n-1) {border-right:1px solid #e7f3fd}
.personal ul li:nth-child(1), .personal ul li:nth-child(2) {border-bottom:1px solid #e7f3fd;}
.personal ul li p.title {font-size:1.5rem;color:#898989; padding:0 0 10px 30px; text-align:center; box-sizing: border-box;}
.personal ul li p.time {font-size:1.2rem; color:#414040; text-align:center;}

.personal ul li:nth-child(1) p.title {background:url(../../images/eis/personal_1.svg) 50px 1px no-repeat; background-size:22px;}
.personal ul li:nth-child(2) p.title {background:url(../../images/eis/personal_2.svg) 50px 1px no-repeat; background-size:22px;}
.personal ul li:nth-child(3) p.title {background:url(../../images/eis/personal_3.svg) 50px 1px no-repeat; background-size:22px;}
.personal ul li:nth-child(4) p.title {background:url(../../images/eis/personal_4.svg) 50px 1px no-repeat; background-size:22px;}

/********************************************* 
  나의 기념일
*********************************************/
.my_anniversary {background:url(../../images/eis/anniversary_bg.svg) center center no-repeat #f09797; background-size: 40rem; }
.my_anniversary .tit {position:relative}
.my_anniversary .tit > .title {background: url(../../images/eis/anniversary_title.svg) center center no-repeat; background-size: 130px; font-size:0; width:100%; height:30px;}
.my_anniversary .tit > .title + .edit {position:absolute; top:0; right: 0px; width:30px; height:30px; background:url(../../images/eis/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 0 0 0; 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.2rem; color:#373737}
.my_anniversary .list li .name .date {font-size:1.2rem; color:#8e8e8e;}

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



/********************************************* 
  나의 동호회  
*********************************************/
.my_club .club_wrap {margin-top:23px; display:flex; gap:14px; justify-content: space-between;}
.my_club .club_wrap .club {width:calc((100% / 2) - 7px)}
.my_club .club_wrap .club .title {border-radius: 10px; color:#ffffff; text-align:center; padding:18px 0; line-height:20px; margin-bottom:5px}
.my_club .club_wrap .club .title p.cate {font-size:1.2rem}
.my_club .club_wrap .club .title p.name {font-size:2rem}
.my_club .club_wrap .club:nth-child(1) .title {background-image:linear-gradient(to bottom right, #7331a7 0%, #181aa0 50%, #4e147a 100%);}
.my_club .club_wrap .club:nth-child(2) .title {background-image:linear-gradient(to bottom right, #181aa0 0%, #4e147a 50%, #181aa0 100%);}

/* .my_club .club_wrap .club .title.bowling {background:url(../../images/eis/club_bg_bowling.png) 0 0 no-repeat; background-size: 200px;}
.my_club .club_wrap .club .title.basketball {background:url(../../images/eis/club_bg.png) 0 0 no-repeat; background-size: 200px;} */
.my_club .club_wrap .club ul li {line-height:18px;padding:12px 0 0 10px;}
.my_club .club_wrap .club ul li a {position:relative;}
.my_club .club_wrap .club ul li a::before {content:''; width:2px; height:2px; background: #9cc1df;position:absolute; left:-7px; top:7px;}
.my_club .club_wrap .club ul li a p {white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.my_club .club_wrap .club ul li p.date {color:#959595; font-weight:400;}


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

.common_item ul 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 ul 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 ul 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 ul 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 {line-height:3.1rem;}
.dd_list ul li a{position:relative; 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; padding:0 0 0 20px}
.dd_list ul li a::before{width:4px;height:4px;border-radius:10px;background-color:#c3c3c3;content:"";position:absolute;left:2px;top:14px;}





/********************************************* 
  나의 메모
*********************************************/

.edit {width:30px; height:30px; background:url(../../images/eis/btn_icon_edit.png) center center no-repeat #f1f2f7; border-radius: 30px; background-size:15px;}

.memo_list ul {margin:20px 0 0 0; height:200px; overflow-y: auto;}
.memo_list ul li {line-height:3.1rem;}
.memo_list ul li a{position:relative; width:100%; text-decoration:none; color: #4f4f4f; font-size:1.6rem; display:flex; justify-content: space-between;}
.memo_list ul li a span {display:block; }
.memo_list ul li a .cate {width:55px; font-weight:700; margin:0 10px 0 0;}
.memo_list ul li a .subject { width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 10px 0 0;}
.memo_list ul li a .date { color:#8c8c8c}
/* .memo_list ul li a::before{width:4px;height:4px;border-radius:10px;background-color:#c3c3c3;content:"";position:absolute;left:2px;top:14px;} */

/********************************************* 
  TODO 
*********************************************/
.todo {background:#43569c;}
.todo .title span {color:#ffffff !important}
.todo .title {border-bottom:1px solid #f1f1f1 !important}
.todo-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid #6372ad; color:#ffffff }
.todo-list {height:200px; overflow-y: auto;}
.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"]:checked ~ .todo-title { text-decoration: line-through; color: #b0bef3;}

/* 숨긴 체크박스 */
.todo-checkbox input[type="checkbox"] { display: none;}
.todo-checkbox label { display: inline-block; width: 20px; height: 20px; background-image: url('../../images/eis/checkbox-off.png'); background-size: cover; cursor: pointer; margin-right: 10px;}
.todo-checkbox input[type="checkbox"]:checked + label { background-image: url('../../images/eis/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/eis/star-off.png'); background-size: cover; cursor: pointer;}
.favorite-toggle input[type="checkbox"]:checked + label { background-image: url('../../images/eis/star-on.png');}


/* 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; }
.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;}



.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; }

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


.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;}






/********************************************* 
  부서근무현황
*********************************************/
.work_people  {overflow: auto; height:190px; margin:10px 0 0 0;}
.work_people ul {margin:0 20px 0 0; display:flex; flex-wrap: wrap; justify-content: space-between;}
.work_people ul li {width:calc(50% - 20px); margin:9px 0 0 20px; box-sizing: border-box;}
.work_people ul li span.cate {display:inline-block; margin-right:10px; padding:3px 0; border-radius: 5px; width:45px; box-sizing: border-box; text-align: center;}

.work_people ul li span.cate.green {background:#eaf7e6; color:#4c6c45;}
.work_people ul li span.cate.yellow {background:#f9f2d8; color:#c09a35;}
.work_people ul li span.cate.gray {background:#dfe0e2; color:#585858;}
.work_people ul li span.cate.purple {background:#ebe7f8; color:#5d228e;}
.work_people ul li span.cate.pink {background:#fceeee; color:#d15c63;}
.work_people ul li span.cate.blue {background:#e3e6f7; color:#394479;}







/* 환경설정 */
.setup {position:fixed; right:50px; bottom:130px}
.setup ul li {margin:0 0 5px 0;}

.welcomekit {
  width: 50px; height: 50px;border-radius: 50%; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative;
background: linear-gradient(-45deg, #ba4459, #9321d1);}

/* 일반배경이 아닐때는 다크보드버튼을 숨김 */
body:not(.skyblue) .circle-btn.toggle-mode{display:none;}

.topBtn {
  width: 50px; height: 36px; background-color: #4567e0; border-radius: 20%; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative}

.circle-btn {
  width: 50px; height: 50px; background-color: #4567e0; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative}
.welcomekit::after,
.circle-btn.chatbot::after,
.circle-btn.bgset::after,
.circle-btn.set::after {
    content: '';  position: absolute; color: #fff;
    width: 2.7rem; height: 2.7rem; top: 50%;  left: 50%;
    transform: translateY(-50%) translateY(0.5px) translateX(-50%) translateX(0.5px);}
.circle-btn.bgset::after {background: url(../../images/eis/icon_painting.png) center center no-repeat;background-size: 25px;}
.circle-btn.set::after {background: url(../../images/eis/icon_setup.png) center center no-repeat;background-size: 25px;}
.circle-btn.chatbot::after {background: url(../../images/eis/icon_bot.png) center center no-repeat;background-size: 25px;}
.welcomekit::after {background: url(../../images/eis/setup_welcomekit.svg) center center no-repeat;background-size: 7px 23px;}


.circle-btn.chatbot:hover:after {content: '챗봇';}
.circle-btn.bgset:hover:after {content: '배경';}
.circle-btn.set:hover:after{content: '설정';}


.circle-btn.chatbot:hover:after, 
.circle-btn.bgset:hover:after, 
.circle-btn.set:hover:after{
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: none; animation: up .5s 1;}
.welcomekit::after {
  display: flex; align-items: center; justify-content: center; color: #fff;
    animation: motion 1s infinite;
}
@keyframes up {
    0% {
        top: 60%;
    }

    50% {
        top: 30%;
    }

    100% {
        top: 50%;
    }
}
@keyframes motion {
    0% {
        background-position-y: 0;
    }

    50% {
        background-position-y: .5rem;
    }

    100% {
        background-position-y: 0;
    }
}



.circle-btn.set {background:#4b4b4b}

.circle-btn img {
  width: 25px; height: 25px; position: absolute; transition: opacity 0.3s ease, transform 0.3s ease;}

.toggle-mode .light-icon { opacity: 1; transform: scale(1);}
.toggle-mode .dark-icon {opacity: 0; transform: scale(0.5);}

body.skyblue[data-dark="on"] .toggle-mode .light-icon {
  opacity: 0; transform: scale(0.5);}

body.skyblue[data-dark="on"] .toggle-mode .dark-icon {
  opacity: 1; transform: scale(1);}






/********************************************* 
    웰컴키트
*********************************************/
.modal_wrap {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center;}

.modal_wrap.active { display: flex;}

.modal_content {
  background: #f5f5f5; padding: 20px; position: relative; width: 1250px; height:1010px; border-radius: 20px;}
.modal_content .title {display: flex; justify-content: space-between; align-items: center; padding:10px 0 20px 0}
.modal_content .title p {font-size:2rem; color:#232323; }
.modal_content .title p b {color:#3a4fad !important}
.modal_content .title .modal_close {margin:15px 0 0 0; background:url(../../images/eis/icon_close_gray.svg) center center no-repeat #ebeff7; display:inline-block; width:40px; height:40px; background-size:16px; font-size:0; border-radius: 50%;}

.company_slider { overflow: hidden; position: relative;}
.company_slider .slides { display: flex; transition: transform 0.4s ease;}
.company_slider .kit_slide { width: 1210px; height:837px; flex-shrink: 0; overflow: hidden; border-radius: 20px;}

.modal_content .bottom {display:flex; align-items: center; justify-content: space-between; margin-top:20px}
.modal_content .bottom .btn_go {background:#3643a5; color:#ffffff;font-size:1.6rem; padding:10px 26px; border-radius: 10px;;}
.controls { text-align: center;}
#prevCompany  {background:url(../../images/eis/icon_banner_arrow.svg) center center no-repeat #3643a5; width:40px; height:40px; background-size:9px; border-radius: 10px;}
#nextCompany {background:url(../../images/eis/icon_banner_arrow.svg) center center no-repeat #3643a5; width:40px; height:40px; background-size:9px; border-radius: 10px; transform: rotate(180deg)}
#save {background:url(../../images/eis/icon_save.svg) center center no-repeat #3643a5; width:40px; height:40px; background-size:17px; border-radius: 10px; }

#prevCompany:hover {background:url(../../images/eis/icon_banner_arrow.svg) center center no-repeat #1d2777; width:40px; height:40px; background-size:9px; border-radius: 10px;}
#nextCompany:hover {background:url(../../images/eis/icon_banner_arrow.svg) center center no-repeat #1d2777;width:40px; height:40px; background-size:9px; border-radius: 10px; transform: rotate(180deg)} 
#save:hover {background:url(../../images/eis/icon_save.svg) center center no-repeat #1d2777;width:40px; height:40px; background-size:17px; border-radius: 10px; }

.controls button:disabled { opacity: 0.5; cursor: not-allowed;}

.modal_close { display: inline-block; position: absolute; top: 10px;
  right: 15px; font-size: 20px; color: #fff; text-decoration: none; cursor: pointer;}


.kit01 {background: url(../../images/eis/kit01_bg.png) 0 0  no-repeat; display: flex; align-items: center; justify-content: center;}
.kit01 .txt {font-size:3.2rem; color:#232323; line-height:80px; position:relative; text-align: center; }
.kit01 .txt::before {content:''; position:absolute; left:30px; top:11px; background:url(../../images/eis/icon_txt_start.png) 0 0 no-repeat; width:47px; height:33px;}
.kit01 .txt::after {content:''; position:absolute; right:-70px; bottom:45px; background:url(../../images/eis/icon_txt_end.png) 0 0 no-repeat; width:47px; height:33px;}

.kit02 .greeting {display:flex; justify-content: center; align-items: center; background:#ffffff; padding:70px 0 50px 0;}
.kit02 .greeting p.txt {display:inline-block; position:relative; padding:0 110px 0 0}
.kit02 .greeting p.txt::before {content:''; position:absolute; left:28%; top:-73px; background:url(../../images/eis/icon_txt_start.png) 0 0 no-repeat; width:47px; height:33px;}
.kit02 .greeting p.txt::after {content:''; position:absolute; right:55%; bottom:-60px; background:url(../../images/eis/icon_txt_end.png) 0 0 no-repeat; width:47px; height:33px;}
.kit02 .greeting .pic_box .pic {border-radius:10px; background:url(../../images/eis/kit02_pic.png) center bottom no-repeat #f4f5fb; width:375px; height:440px;}
.kit02 .greeting .pic_box p {font-size:2rem; color:#232323;padding:5px 0 0 0} 
.kit02 .greeting .pic_box p span {font-weight:700;} 
.kit02 .greeting .pic_box p b {font-size:3rem; font-weight:700; letter-spacing: 10px; display:inline-block; padding:0 0 0 30px} 
.kit02 .txt_box {background:url(../../images/eis/kit02_txtbox.png) 918px -197px no-repeat #656679;text-align: center;  color:#ffffff; padding:60px 0}
.kit02 .txt_box > p:first-child {font-size:2.5rem; margin-bottom:15px;}
.kit02 .txt_box .box p {font-size:2rem; line-height:35px;}

.kit03 {background:#ffffff;}

.kit03 .link_ul ul {display:flex; gap: 9px; justify-content: center; margin:40px 0 60px 0}
.kit03 .link_ul li {width:340px; height:403px; text-align:left; background:url(../../images/eis/kit03_bg.png) 5px 18px no-repeat #f2f8fb; border:1px solid #e3eef4; border-radius: 5px;}
.kit03 .link_ul li:first-child p {background: url(../../images/eis/kit03_pc.png) center center no-repeat; width:340px; height:330px;}
.kit03 .link_ul li:nth-child(2) p {background: url(../../images/eis/kit03_manual.png) center center no-repeat; width:340px; height:330px;}
.kit03 .link_ul li a {font-size:2.2rem; padding:0 0 0 32px; font-weight:600; color:#232323;  position:relative;}

.kit03 .link_ul li:nth-child(1) a::after,
.kit03 .link_ul li:nth-child(2) a::after {content:'NIMS';position:absolute; top:-30px; left:33px; font-size:1.2rem} 
.kit03 .link_ul li:nth-child(1) a::before,
.kit03 .link_ul li:nth-child(2) a::before {content:''; position:absolute; top:-18px; left:85px; width:210px; height:1px; background:#b9ced9} 

.kit03 .doc {padding:0 0 0 105px; text-align:left; }
.kit03 .doc div p {font-size:2rem; line-height:3rem; color:#232323}

.kit04 {background:url(../../images/eis/kit04_bg.png) 56px 150px no-repeat#e8ebf1; position:relative}
.kit04 .txt_box {border-radius: 10px; background:#ffffff; width:580px; height:400px; padding:60px 40px; text-align:left;
position:absolute; right:50px; top:250px;}
.kit04 .txt_box .con {font-size:2rem; line-height:3.5rem; color:#232323}
.kit04 .txt_box .con p:first-child {padding:10px 0 20px 0}

.kit05 {background:url(../../images/eis/kit05_bg.png) 15px 202px no-repeat #e8ebf1; position:relative}
.kit05 .txt_box {font-size:2rem; margin:310px 27px 0 27px; background:#ffffff; padding:50px 60px 40px 60px; text-align:left; border-radius: 10px;}
.kit05 .txt_box div {padding:0 0 30px 0; display:block; color:#232323}
.kit05 .txt_box ul {margin:0 70px; display:flex; gap:16px; flex-wrap: wrap;}
.kit05 .txt_box ul li {width: calc(50% - 8px); background:#deedf9; border-radius: 10px; color:#3d457f; font-weight:700; box-sizing: border-box;
padding:10px; text-align: center;}

.kit06 {background:#f9e8e7}
.kit06 .sub_title {text-align:left; padding:0 44px 0 44px}
.kit06 .sub_title .tit_con {font-size:2.5rem; font-weight:bold; color:#232323;}
.kit06 .sub_title .tit_sub {font-size:2rem; color:#232323}
.kit06 .txt_box {display:flex; justify-content: end;}
.kit06 .txt_box > div{text-align: left; position:relative; border-radius: 10px; background:#ffffff;
padding:60px 60px; width:500px; height:460px; margin:60px 44px 0 0}
.kit06 .txt_box > div::after {content:''; position:absolute; top:40px; left:-580px; width:600px; height:403px; background:url(../../images/eis/kit06_bg.png) 0 0 no-repeat;  }
.kit06 .txt_box dl {margin:0 0 30px 0}
.kit06 .txt_box dl:last-child {margin:0}
.kit06 .txt_box dl dt {font-size:2.5rem;  color:#232323; font-weight:700;}
.kit06 .txt_box dl dd { position:relative;}
.kit06 .txt_box dl dd p {font-size:2rem;color:#232323}
.kit06 .txt_box dl dd::before {content:''; width:23px; height:16px; position:absolute; top:3px; left:-29px; 
background:url(../../images/eis/icon_dd.png) 0 0 no-repeat;}
.kit06 .txt_box dl:first-child dd {color:#3643a5 !important; font-weight: bold; font-size:2rem;}


.kit07 {background:url(../../images/eis/kit07_bg.png) center 130px no-repeat #d4e2f1; }
.kit07 .txt_box { border-radius: 10px; background:#ffffff; margin:254px 44px 0 44px;}
.kit07 .welcome_tab .con {overflow: hidden; height:290px; display: flex;gap: 20px; padding:0 0 20px 0; color:#232323}
.kit07 .welcome_tab .con .tit {color:#232323 !important; font-weight:bold; padding:0 0 10px 0}

.kit07 .welcome_tab .con .box {width:calc((100% / 2) - 10px)}
.kit07 .welcome_tab .con .box:nth-child(1) {font-size:2rem; line-height: 3.5rem;}
.kit07 .welcome_tab .con .box:nth-child(1) p:nth-child(2) {padding:0 0 10px 0;}
.kit07 .welcome_tab .con .box:nth-child(2) {background:#f5faff; border-radius: 10px; padding:30px 30px;}
.kit07 .welcome_tab .con .box:nth-child(2) dl {padding:0 0 13px 0}
.kit07 .welcome_tab .con .box:nth-child(2) dl:last-child {padding:0}
.kit07 .welcome_tab .con .box:nth-child(2) dt {font-weight:700; color:#3643a5; font-size:2.2rem}
.kit07 .welcome_tab .con .box:nth-child(2) dd { font-size:2rem}

.kit_slide .tabs {display:flex} /* 슬라이드 내부 탭 */

.kit08 {background:#ebeff7;}
.kit08 .con {text-align:left; padding:60px}
.kit08 .con .tit p:first-child {font-size:2.5rem; font-weight:600; color:#232323;}
.kit08 .con .tit p:nth-child(2) {font-size:2rem; margin:0 0 10px 0; color:#232323}
.kit08 .con ul {background:#ffffff; border-radius: 10px; padding:33px; display:flex; gap: 60px;}
.kit08 .con ul li {position:relative; width:calc((100% / 6) - 10px); height:180px;} 


.kit08 .con ul li:nth-child(1) {background:url(../../images/eis/kit08_list1.png) center 40px no-repeat #f9f9f9;}
.kit08 .con ul li:nth-child(2) {background:url(../../images/eis/kit08_list2.png) center 40px no-repeat #f9f9f9;}
.kit08 .con ul li:nth-child(3) {background:url(../../images/eis/kit08_list3.png) center 40px no-repeat #f9f9f9;}
.kit08 .con ul li:nth-child(4) {background:url(../../images/eis/kit08_list4.png) center 40px no-repeat #f9f9f9;}
.kit08 .con ul li:nth-child(5) {background:url(../../images/eis/kit08_list5.png) center 40px no-repeat #f9f9f9;}
.kit08 .con ul li:nth-child(6) {background:url(../../images/eis/kit08_list6.png) center 40px no-repeat #f9f9f9;}


.kit08 .con ul li::before {content:''; position:absolute; top:50%; right:-35px; width:10px; height:16px; background:url(../../images/eis/kit08_arrow.png) 0 0 no-repeat}
.kit08 .con ul li:last-child::before {display:none;}
.kit08 .con ul li p {text-align:center; font-size:1.2rem; margin:125px 0 0 0;color:#232323}
.kit08 .con ul li:nth-child(4) p {margin:110px 0 0 0;}
.kit08 .con ul li p span {display:block;}

.kit08 .link_go {text-align:center; margin:50px 0 0 0}
.kit08 .link_go a {padding:15px; font-size:1.2rem; color:#ffffff; border-radius: 10px; width:350px; display:inline-block;}
.kit08 .link_go a:nth-child(1) {background:#2f3963; margin:0 10px 0 0}
.kit08 .link_go a:nth-child(2) {background:#2b94ae;}


.kit09 {background:#ffffff;}
.kit09 .con_box {background:#f4f5fb; margin:0 56px; border-radius: 10px;} 
.kit09 .welcome_tab .con {}
.kit09 .welcome_tab .con .tit {color:#232323; font-weight:600}
.kit09 .welcome_tab .con .tit + p {font-size:2rem; color:#232323}
.kit09 .welcome_tab .con .flex {display:flex; justify-content: end; position:relative}
.kit09 .welcome_tab .con .flex::after {content: ''; position:absolute; top:24px; left:6px;
width:510px; height:435px; background:url(../../images/eis/kit09_bg.png) 0 0 no-repeat; }
.kit09 .welcome_tab .con .flex .box {background:#ffffff; padding:50px 40px 40px 60px; margin: 30px 10px 30px 0; border-radius: 10px; width:560px; height:430px;}
.kit09 .welcome_tab .con .flex .box ul li {position:relative; font-size:1.2rem; padding:0 13px 0 0; color:#232323 }
.kit09 .welcome_tab .con .flex .box ul li::before {content:'';background:#275aad; width:4px; height:4px; border-radius: 2px; position:absolute; left:-13px; top:10px;}
.kit09 .welcome_tab .con .flex .box ul + p.point {color:#48508d; font-size:2rem; font-weight:700; position:relative; margin:70px 0;}
.kit09 .welcome_tab .con .flex .box ul + p.point::before {content:''; background:#f4f5fb; height:1px; width:100%; position:absolute; top:-36px; left:0;}
.kit09 .welcome_tab .con .flex .box ul + p.point::after {content:''; background:#f4f5fb; height:1px; width:100%; position:absolute; top:90px; left:0;}
.kit09 .welcome_tab .con .flex .box p.point + p {font-size:1.7rem; color:#232323 }

.kit10 {background:#ffffff;}
.kit10 .con_box {background:#f4f5fb; margin:0 56px; border-radius: 10px;} 
.kit10 .con .img_box {border-radius: 10px; overflow:hidden; height:420px; background:#0073b7; margin:20px 0; }
.kit10 .con .box {padding:0 0 20px 0}
.kit10 .con .box p:nth-child(2) {font-size:2rem; color:#232323}


.kit11 {background:url(../../images/eis/kit11_bg.png) 809px 200px no-repeat #ffffff;}
.kit11 .link_go {text-align:center; margin:50px 0 0 0}
.kit11 .link_go a {padding:15px; font-size:1.2rem; color:#ffffff; border-radius: 10px; width:350px; display:inline-block;}
.kit11 .link_go a:nth-child(1) {background:#2f3963; margin:0 10px 0 0}
.kit11 .link_go a:nth-child(2) {background:#2b94ae;}

.kit11 .move {margin:250px 0 0 0}
.kit11 .move {position:relative; text-align:center; font-size:2.8rem; color:#232323; font-weight:bold; padding:60px 0;}
.kit11 .move::before {content:''; position:absolute; left:400px; top:52px; background:url(../../images/eis/icon_txt_start.png) 0 0 no-repeat; width:47px; height:33px;}
.kit11 .move::after {content:''; position:absolute; right:400px; top:52px; background:url(../../images/eis/icon_txt_end.png) 0 0 no-repeat; width:47px; height:33px;}

.kit12 {background:#ffffff;}
.kit12 .con_box {background:#f4f5fb; margin:0 56px; border-radius: 10px;} 
.kit12 .welcome_tab .con {}
.kit12 .welcome_tab .con .tit {color:#232323; font-weight:600}
.kit12 .welcome_tab .con .tit + p {font-size:2rem; color:#232323}
.kit12 .welcome_tab .con .flex {display:flex; justify-content: end; position:relative}
.kit12 .welcome_tab .con .flex::after {content: ''; position:absolute; top:70px; left:51px;
width:350px; height:336px; background:url(../../images/eis/kit12_bg.png) 0 0 no-repeat; }
.kit12 .welcome_tab .con .flex .box {background:#ffffff; padding:50px 40px 40px 60px; margin: 30px 10px 30px 0; border-radius: 10px; width:560px; height:430px;}
.kit12 .welcome_tab .con .flex .box ul li {position:relative; font-size:1.2rem; padding:0 13px 0 0; color:#232323 }
.kit12 .welcome_tab .con .flex .box ul li::before {content:'';background:#275aad; width:4px; height:4px; border-radius: 2px; position:absolute; left:-13px; top:10px;}
.kit12 .welcome_tab .con .flex .box ul + ul.point { font-size:2rem;position:relative; margin:60px 0;}
.kit12 .welcome_tab .con .flex .box ul + ul.point li span {color:#48508d; font-weight:700; display:inline-block; padding:0 15px 0 0;}
.kit12 .welcome_tab .con .flex .box ul + ul.point::before {content:''; background:#f4f5fb; height:1px; width:100%; position:absolute; top:-28px; left:0;}
.kit12 .welcome_tab .con .flex .box ul + ul.point::after {content:''; background:#f4f5fb; height:1px; width:100%; position:absolute; top:109px; left:0;}
.kit12 .welcome_tab .con .flex .box ul.point + p {font-size:1.7rem; color:#232323 }


.kit13 {background:#ffffff;}
.kit13 .con_box {background:url(../../images/eis/kit13_bg.png) 68px 174px no-repeat #f4f5fb; margin:0 56px; border-radius: 10px;padding:30px 40px;} 
.kit13 .con_box .con {}
.kit13 .con_box .con p.tit {color:#232323; padding:0 0 10px 0}
.kit13 .con_box .con p:not(.tit) {font-size:2rem; color:#232323}
.kit13 .flex {display:flex; justify-content: end;}
.kit13 .protect {background: url(../../images/eis/kit13_icon.png) center 35px no-repeat #ffffff; padding:100px 40px 40px 60px; margin: 30px 10px 10px 0; border-radius: 10px; width:560px; height:430px; box-sizing:border-box;}
.kit13 .protect ul li {position:relative; font-size:1.2rem; line-height:3.2rem; color:#232323}
.kit13 .protect ul li::before {content:'';background:#275aad; width:4px; height:4px; border-radius: 2px; position:absolute; left:-13px; top:12px;}
.kit13 .protect ul + p {background:#0071bc; text-align:center; color:#ffffff; padding:5px 0; border-radius: 20px; font-size:1.2rem; margin:20px 0;}
.kit13 .protect .center_box {text-align:center; font-size:1.2rem; color:#0071bc; line-height:3rem}

.kit14 {background:#ffffff;}
.kit14 .con_box {background:#f4f5fb; margin:0 56px;border-radius: 10px;padding:30px 40px 10px 40px;}
.kit14 .con p.tit {color:#232323 !important;}  
.kit14 .con_box > .con ul {padding:10px 0 0 30px}
.kit14 .con_box > .con li {position:relative; font-size:1.2rem; color:#232323}
.kit14 .con_box > .con li::before {content:'';background:#275aad; width:4px; height:4px; border-radius: 2px; position:absolute; left:-13px; top:12px;}
.kit14 .con_box .info {color:#f04f4f}

.kit14 .box {position:relative}
.kit14 .box ul {display:flex; justify-content: space-between;}
.kit14 .box ul li {display: inline-block;  width: 190px; padding: 10px 7px; vertical-align: top}
/* .kit14 .box ul li a {display: block;} */

.kit14 .thumbnail { position: relative; overflow: hidden; height: 260px; border-radius: 5px;}

.kit14 .book img {  width: 100%; vertical-align: top;}
.kit14 .book { position: relative; overflow: hidden;  display: inline-block; width: 100%; vertical-align: middle}
.kit14 .book::before {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 2px; content: "";
    border: 1px solid rgba(0,0,0,.05); border-left-color: rgba(0,0,0,.2); }
.kit14 .book::after {
    position: absolute; top: 0; bottom: 0; left: 1px; width: 3px; content: "";
    background-image: linear-gradient(90deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.2) 58%,rgba(0,0,0,0) 96%); }
.kit14 .book_name {margin:10px 0 0 0; color:#232323;
 display: -webkit-box;-webkit-line-clamp: 2; /* 줄 수 제한 */
  -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

.kit14 .welcome_tab .tabs {margin:0 !important}
.kit14 .welcome_tab {padding:20px 0 5px 0; }


.kit15 {background:#ffffff}
.kit15 .con_box {background:#f4f5fb; margin:0 56px;border-radius: 10px;padding:30px 40px 10px 40px;}
.kit15 .con p.tit {color:#232323 !important;}  
.kit15 .con p {font-size:2rem; color:#232323}

.kit15 .flex {display:flex; justify-content: end; position:relative}
.kit15 .flex::after {content: ''; position:absolute; top:104px; left:67px;
width:350px; height:336px; background:url(../../images/eis/kit15_bg.png) 0 0 no-repeat; }
.kit15 .flex .pension {background:#ffffff; padding:50px 40px 40px 60px; margin: 30px 10px 30px 0; border-radius: 10px; width:560px; height:430px;}
.kit15 .flex .pension ul li {position:relative; font-size:1.2rem; padding:0 13px 0 0; color:#232323 }
.kit15 .flex .pension ul li::before {content:'';background:#275aad; width:4px; height:4px; border-radius: 2px; position:absolute; left:-13px; top:10px;}
.kit15 .flex .pension ul + ul.point { font-size:2rem;position:relative; margin:50px 0;}
.kit15 .flex .pension ul + ul.point li span {color:#48508d; font-weight:700; display:inline-block; padding:0 15px 0 0;vertical-align: top;}
.kit15 .flex .pension ul + ul.point li p { display:inline-block; padding:0 15px 0 0; width:370px;}
.kit15 .flex .pension ul + ul.point::before {content:''; background:#f4f5fb; height:1px; width:100%; position:absolute; top:-28px; left:0;}
.kit15 .flex .pension ul + ul.point::after {content:''; background:#f4f5fb; height:1px; width:100%; position:absolute; top:130px; left:0;}
.kit15 .flex .pension ul.point + p {font-size:1.7rem; color:#232323 }


.kit16,.kit17  {background:#ffffff}
.kit16 .con_box, .kit17 .con_box {margin:0 56px;}
.kit16 .con_box .info, .kit17 .con_box .info {font-size:2.2rem; color:#232323}
.kit16 .con_box .page, .kit17 .con_box .page {display: flex; justify-content: end; margin:0 0 10px 0;}
.kit16 .con_box .page span, .kit17 .con_box .page span {font-size:1.2rem; color:#232323}
.kit16 .con_box .page span b, .kit17 .con_box .page span b {font-weight: 700; color:#275aad;}



.btn_add {background:#5d668f; color:#ffffff; border-radius: 5px; display:inline-block; padding:5px 20px;}
.btn_add:hover {background:#3643a5; color:#ffffff}
.btn_info {border-radius: 5px; display:inline-block; padding:5px 20px; border:1px solid #dedede; background:url(../../images/eis/icon_pdf.png) 90px center no-repeat #ffffff; padding:5px 50px 5px 20px}
.btn_info:hover {border:1px solid #232323}

span.point {display:inline-block; width:12px; height:12px; background:#f79090; border-radius: 12px;}

.paper .tb th,.paper td {
  white-space : nowrap;
}

.table_wrap .paper th { position : sticky; top : 0;  border-top: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3; box-sizing: border-box;}

.table_wrap {height:500px; overflow: auto;}
.paper {width: 100%; border-top: 1px solid #c3c3c3;position:relative}
.paper thead tr {border-bottom: 1px solid #c3c3c3; }
.paper thead th {position: relative; height: 60px; font-weight: 600; font-size: 1.7rem; color: #232323; background: #f4f5fb;}
.paper tbody tr {border-bottom: 1px solid #dedede;}
.paper tbody td {padding: 8px; height: 60px; text-align: center; font-weight: 500; font-size: 1.6rem; color: #0b0b0b; word-break: break-all;
border-right:1px solid #f1f1f1;}
.paper tbody td:last-child {border-right:none;}
.paper tbody td:nth-child(2) {text-align:left; padding: 8px 8px 8px 20px;} 
.paper tbody tr:hover {background:#f8f8f8}

.infoTable {width: 100%; border-top: 1px solid #c3c3c3;position:relative}
.infoTable tbody tr {border-bottom:1px solid #dedede; height:52px}
.infoTable tbody tr th {background:#f4f5fb}
.infoTable tbody tr td {text-align:center}
.cont_input[type="text"] {width:90%;border:1px solid #e9e9e9;border-radius: 5px;height:44px; color:#232323; padding:0 0 0 10px; font-size:1.3rem;}


/* 공통 타이틀 */
.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/eis/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/eis/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}


/* 웰컴키트 공통 탭 */
.welcome_tab {padding:20px 30px 5px 30px; text-align:left;}
.welcome_tab .tabs {margin-bottom: 10px; padding:0 0 10px 0;}
.welcome_tab .tabs a {font-size:2rem; font-weight:600; color: #212121; display: inline-block; margin:0 13px 0 0; padding:7px 25px; border-radius: 30px; background:#e1e3f8;}
.welcome_tab .tabs a.active {color:#ffffff; background:#3643a5;}



/* 배경 모달팝업 */
.bg-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 999;}

.bg-modal-content {width:550px; background: #ffffff; padding: 20px; border-radius: 10px;}
.bg-modal-content h3 {font-weight: bold; font-size: 18px;}
.bg-modal-content h3 + p { margin-bottom: 30px; color:#888888;}

.bg_list {display:flex; gap: 10px;margin:0 0 30px 0; padding:20px 10px; border-radius: 10px; border:1px solid #ffed86; background:#fefae3;}
.bg_list li {width:20%; text-align:center; display:flex; justify-content: center;}
.bg_list li p {width:50px; height:50px; overflow: hidden; border-radius: 100px; display:block; display:flex; justify-content: center; align-items: center; margin:0 0 10px 0; border: 1px solid #c7c7c7}
.bg_list li p img {width:50px; }

.bg_list li p.simple {background: #ffebdb;}
.bg_list li p.rainbow {background:#e3f3ff}





.error_modal .modal-buttons { display: flex; justify-content: space-between; gap: 10px; }
.error_modal .modal-buttons button {flex: 1; padding: 10px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer;background: #4567e0; color:#ffffff}
#cancelBtn { background-color: #8f8f8f; color: #fff;}
#directReportBtn { background-color: #169963; color:#fff;}


.bg-modal .modal-buttons.btn_align {display: flex; justify-content: center; gap: 10px;}
.bg-modal .modal-buttons.btn_align button {padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer;background: #4567e0; color:#ffffff}
#closeBgModal { background-color: #8f8f8f; color: #fff;}






/********************************************* 
    공통 
*********************************************/
.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/eis/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;}

.portlet p.title span {font-size:2rem; font-weight:600; color:var(--main-black);}


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.2rem}
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.2rem; }
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;}











/********************************************* 
    로그인
*********************************************/
.wrap:has(.login_wrap) {background:#f3f2f6;}
.login_wrap {width:1240px; margin:0 auto; display:flex; padding:100px 0 50px 0;}
.login_wrap .left {width:600px; box-sizing: border-box; background:url(../../images/eis/login_bg.png) 484px -100px no-repeat #ffffff; border-radius: 30px 0 0 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/eis/icon_id.png) 20px center no-repeat #ffffff; margin:0 0 13px 0}
.login_wrap .left input.login_pw {background:url(../../images/eis/icon_pw.png) 20px center no-repeat #ffffff; margin:0 0 30px 0}
.login_wrap .left input.login_num6 {background:url(../../images/eis/icon_num6.png) 18px center no-repeat #ffffff; margin:0 0 13px 0}
.login_wrap .left input:disabled.login_num6 {background:url(../../images/eis/icon_num6.png) 18px center no-repeat #efefef}

.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/eis/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/eis/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.2rem }
.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.2rem; 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/eis/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/eis/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.2rem;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.2rem; 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/eis/icon_notice.png) 5px 5px no-repeat; margin:0 0 13px 0 }
.login_wrap .right_wrap .board_view .view {color:#353535; font-size:1.2rem; 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/eis/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/eis/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/eis/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;}
}




@media screen and (max-width: 2300px){
  .header,
  .main_wrap {width:1600px;}

  #main > .top_wrap > .portlet {width:calc((100% / 4) - 11px);}
  #main > .top_wrap .updown {width:calc((100% / 2) - 6px);  display:flex; gap:10px }
  #main .updown .e_paper {height:auto; }
  #main .updown .e_paper ul {display:block;}
  #main .updown .e_paper ul li {margin:0 0 15px 0;}
  #main .updown .e_paper ul li a {padding:20px 14px 20px 10px}
  #main > .top_wrap .updown > div:first-child {margin-bottom:0}
  .personal {height:300px;}
  .personal ul li {width:50%;height: 100px;padding: 23px 0 0 0;box-sizing: border-box;}

  #main > .top_wrap .updown > div { width:100%;}
  #main > .top_wrap {gap:10px}

  .food,
  .banner {height:280px;}

  .middle_wrap {}
  .setup {right:30px}

  .middle_wrap > div {width:calc((100% / 4) - 11px);}
  .middle_wrap .b_day {border:none !important;background:url(../../images/eis/b_day_bg.png) -120px center no-repeat #fff3e3;background-size:60rem;padding:2rem;position: absolute;top: 414px;right: 403px;}



  .portlet_wrap .portlet {width:calc((100% / 4) - 11px)}
}

@media screen and (max-width: 1800px){
.welcomekit {display:none;}
  .header,
  .main_wrap {width:1200px;}
  #main > .top_wrap > .portlet {width:calc((100% / 3) - 11px);}
  #main > .top_wrap .updown {width:calc((100% / 2) - 6px);  display:flex; gap:10px }
  #main > .top_wrap .updown:nth-child(2) {display:block; width:calc((100% / 3) - 6px);}


  #main .updown .portlet {border-radius: 20px;}

  #main .updown .e_paper {padding:27px; height:275px;}
  #main .updown .e_paper ul {display: flex; flex-wrap: wrap; gap: 13px; padding: 0; margin: 15px 0 0 0;}
  #main .updown .e_paper ul li {flex: 1 1 calc(50% - 6.5px); box-sizing: border-box;}
  #main .updown .e_paper ul li a {border-radius: 5px; padding:12px 14px 12px 10px; display:block; color:#35478a; font-size:1.2rem;       
      display: flex; justify-content: space-between; position:relative; background: #edf0f7;}
  #main .updown .e_paper ul li a span.paper_title {display:inline-block;width:100px; text-align:right;padding:0 8px 0 0;}
  /* #main .updown .e_paper ul li a span:nth-child(2) {color:#363636;} */
  #main .updown .e_paper ul li a span:nth-child(2) b {color:#00a0c7; font-weight:500; display:inline-block; text-align: right; padding:0 3px 0 0;}
  #main .updown .e_paper ul li {margin:0;}

  #main > .top_wrap .updown:nth-child(2) > div:first-child {margin-bottom:13px}
  .personal {height:280px}
  .personal ul li {padding:16px 0 0; height:90px}





  .portlet_wrap .portlet {width:calc((100% / 3) - 11px)}

  .middle_wrap {display:block;}
  .middle_wrap > div {width:100%;}
  .middle_wrap > div.b_day {width:calc((100% / 3) - 11px); top:970px; right:10px}
  .middle_wrap .notice {margin:0 0 13px 0}

  #main > .top_wrap .updown {display:block;}
  #main > .top_wrap .updown:nth-child(2) > div {width:auto;}
  #main > .top_wrap .updown:nth-child(4) {width:100%; display:flex}
  #main > .top_wrap .updown:nth-child(5) {width:789px; display:flex; justify-content: space-between;}
  #main > .top_wrap .updown:nth-child(4) > div {width:calc((100% / 2) - 6px)}
  #main > .top_wrap .updown:nth-child(5) > div {width:388px;}
  
  #main > .top_wrap .updown {width:calc((100% / 2) - 6px)}


}










@media screen and (max-width: 1400px){

  .setup {display:none;}


  
  .top_menu {display:block;}
  .top_util .work,
  .top_util .siren,
  .top_util .top_step {
    display: none; /* 기본적으로 숨김 */
  }

  .top_util.open .work,
  .top_util.open .siren,
  .top_util.open .top_step {
    /* display: block;
    color: #fff;
    padding: 20px; */
  }

  .top_util.open {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.55);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px; /* 필요 시 조정 */
  }
  /* top_menu 버튼 위치 */
  .top_util.open .top_menu {
    position: absolute;
    top: 34px;
    right: 50px;
  }

  .top_util .top_menu .menuclose_icon {
    display: none;
  }

  .top_util.open .top_menu .menuopen_icon {
    display: none;
  }

  .top_util.open .top_menu .menuclose_icon {
    display: inline;
  }

  .main_wrap header {top:0; left:70%;}


  /* 기존 top_util 내부 메뉴 스타일 맞춤 */
  .top_util.open {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px; /* 필요 시 조정 */
  }

}


@media screen and (max-width: 1400px) {
  .top_menu {
    display: block; /* 메뉴 보이도록 */
  }

  #gnb {
    position: fixed;
    top: 100px;
    right: 0;
    height: 100%;
    z-index: 999999999999999999;
    transform: translateX(100%); /* 초기에는 숨김 */
    transition: transform 0.3s ease;
 border-radius:10px 0 0 0; overflow: hidden; background:url(../../images/eis/login_bg.png) 100px bottom no-repeat #ffffff;
  }

  #gnb.open {
    transform: translateX(0); /* 열릴 때 보여짐 */
  }

  header#gnb ul {width:100%; border-radius:0; }
  header#gnb ul li a {background:#f1f1f1; color:#000000}

  header#gnb ul li:nth-child(1) a,
  header#gnb ul li:nth-child(2) a,
  header#gnb ul li:nth-child(3) a,
  header#gnb ul li:nth-child(4) a,
  header#gnb ul li:nth-child(5) a,
  header#gnb ul li:nth-child(6) a {background:#f1f1f1; color:#000000}
  header#gnb ul li:nth-child(6) a span {display:inline-block;}

  header#gnb ul li a {box-shadow:none; border-bottom:1px solid #ddd}
  header#gnb ul li:last-child a {border-bottom:none;}  
  header#gnb ul li a:hover {background: #0071bc; color:#fff} 



}



@media screen and (max-width: 1230px){
  .header,
  .main_wrap {width:900px;}

  .main_wrap header {top:0; left:70%;}
  #main > .top_wrap {gap:13px}
  #main > .top_wrap > .portlet {width: calc((100% / 2) - 7px);}
  #main > .top_wrap > .portlet.alarm {height:280px;}
  #main > .top_wrap > .portlet.alarm .tab-content.active {height:180px}
  .issue_board {padding:1.5rem 0 1.5rem 7rem;}
  .issue_board > section {top:0.4rem}
  #main > .top_wrap .updown {width:calc((100% / 2) - 7px);  display:flex; gap:13px }
  #main > .top_wrap .updown:nth-child(2) {display:block; width:calc((100% / 2) - 7px);}


  #main > .top_wrap .updown:nth-child(5) {width: 100%; display:flex;justify-content: space-between;}
  #main > .top_wrap .updown:nth-child(5) > div {width:calc((100% / 2) - 7px);}


  .middle_wrap > div.b_day {width: calc((100% / 2) - 10px); top: 680px; right:10px}

  .portlet_wrap {justify-content: space-between;}
  .portlet_wrap .portlet {width:calc((100% / 2) - 7px)}

}


@media screen and (max-width: 1000px){
  .header,
  .main_wrap {width:900px;}

  .main_wrap header {top:0; left:70%;}
  body.summer::after {top:15px; left:80%; background-size:50px;}
  body.summer::before {display:none;}
}

/* //////////////////////////////////////////////////////////////////////////////

	Dark Mode

////////////////////////////////////////////////////////////////////////////// */
:root {
  --main-black: #141414;
  --main-color-b: #000;
  --main-color-w: #fff;
  --main-color-g: #00904c;
  --line-color: #333;

  --dark-black:#272829;
  --dark-sub_black:#313233;
  --dark-2th_black:#414141;
  --dard-gray:#9e9e9e;
  --dark-white:#dbdbdb;


  --sub-color:#a8a8a8;
  --sub-color-t:#b9b9b9;
  --sub-color-g:#00707e;
  --sub-color-bg:#202020;
}


/* 다크 모드 스타일 */
body.skyblue[data-dark="on"] {background-color: #1e1e20 !important; color: #dbdbdb;}

body.skyblue[data-dark="on"] .portlet {background:var(--dark-black); border:none}

body.skyblue[data-dark="on"] .portlet p.title span {color:var(--main-color-w)}
body.skyblue[data-dark="on"] h1 a span:nth-child(2) {color:var(--dark-white)}

body.skyblue[data-dark="on"] .portlet_wrap .portlet > div.title p + a:before, 
body.skyblue[data-dark="on"] .portlet_wrap .portlet .title p + a:after {background:var(--dark-white)}

body.skyblue[data-dark="on"] .portlet_wrap .portlet > div.title p span:first-child, body.skyblue[data-dark="on"] .portlet_wrap .portlet > div.title span  {color:var(--main-color-w)}

body.skyblue[data-dark="on"] .tabs a.active,
body.skyblue[data-dark="on"] .notice .tabs .tab-item a.active {color:var(--main-color-w);}
 body.skyblue[data-dark="on"] .tab-more:before, 
body.skyblue[data-dark="on"] .tab-more:after {background:var(--main-color-w)}
body.skyblue[data-dark="on"] #main .updown .b_trip {padding:27px 27px 15px 27px; background:url(../../images/eis/b_trip_bg.svg) 20px 55px no-repeat var(--dark-black); background-size: 160px; border:none;}


body.skyblue[data-dark="on"] .color_blue {color:#4364d7 !important;}

body.skyblue[data-dark="on"] .b_trip_box,
body.skyblue[data-dark="on"] .my_anniversary .list,
body.skyblue[data-dark="on"] .b_day .b_list_box,
body.skyblue[data-dark="on"] .calbox .txts ol,
body.skyblue[data-dark="on"] #main .my_info .top_box,
body.skyblue[data-dark="on"] .work_wrap,
body.skyblue[data-dark="on"] .mail_wrap,
body.skyblue[data-dark="on"] #main .my_info .bottom {background:var(--dark-sub_black)}

body.skyblue[data-dark="on"] .calbox .txts ol > li,
body.skyblue[data-dark="on"] #main .my_info .top_box .goout ul li span,
body.skyblue[data-dark="on"] .mail_wrap .in_mail p a,
body.skyblue[data-dark="on"] .mail_wrap .out_mail p a,
body.skyblue[data-dark="on"] progress,
body.skyblue[data-dark="on"] progress::-webkit-progress-bar,
body.skyblue[data-dark="on"] .common_item ul li span.ing,
body.skyblue[data-dark="on"] .common_item ul li span.no_ing,
body.skyblue[data-dark="on"] .common_item ul li span.end {background:var(--dark-2th_black)}
body.skyblue[data-dark="on"] .common_item ul li span.gray {background:var(--dark-2th_black); color:#8e8e8e}


body.skyblue[data-dark="on"] .work_wrap ul li:first-child {background:url(../../images/eis/my_info_icon_left.svg) center 10px no-repeat var(--dark-2th_black); background-size:3rem 3rem ;}
body.skyblue[data-dark="on"] .work_wrap ul li:nth-child(2) {background:url(../../images/eis/my_info_icon_basic.svg) center 10px no-repeat var(--dark-2th_black); background-size:3rem 3rem ;}
body.skyblue[data-dark="on"] .work_wrap ul li:nth-child(3) {background:url(../../images/eis/my_info_icon_plus.svg) center 10px no-repeat var(--dark-2th_black); background-size:3rem 3rem;}


body.skyblue[data-dark="on"] #main .updown .e_paper ul li a {background:var(--dark-sub_black);}
body.skyblue[data-dark="on"] #main .updown .e_paper ul li:nth-child(1) a::before {background:url(../../images/eis/e_paper_wait_dark.svg) 0 center no-repeat var(--dark-sub_black); background-size:22px; }
body.skyblue[data-dark="on"] #main .updown .e_paper ul li:nth-child(2) a::before {background:url(../../images/eis/e_paper_return_dark.svg) 0 center no-repeat var(--dark-sub_black); background-size:22px; }
body.skyblue[data-dark="on"] #main .updown .e_paper ul li:nth-child(3) a::before {background:url(../../images/eis/e_paper_togetherwait_dark.svg) 0 center no-repeat var(--dark-sub_black); background-size:22px; }
body.skyblue[data-dark="on"] #main .updown .e_paper ul li:nth-child(4) a::before {background:url(../../images/eis/e_paper_finish_dark.svg) 0 center no-repeat var(--dark-sub_black); background-size:22px; }
body.skyblue[data-dark="on"] #main .updown .e_paper ul li:nth-child(5) a::before {background:url(../../images/eis/e_paper_order_dark.svg) 0 center no-repeat var(--dark-sub_black); background-size:22px; }
body.skyblue[data-dark="on"] #main .updown .e_paper ul li:nth-child(6) a::before {background:url(../../images/eis/e_paper_pending_dark.svg) 0 center no-repeat var(--dark-sub_black); background-size:22px; }


body.skyblue[data-dark="on"] .b_day .b_list_box .one .per_info p.team,
body.skyblue[data-dark="on"] .project_wrap .project_step p:nth-child(2) span,
body.skyblue[data-dark="on"] .portlet_wrap .portlet > div.title p span:first-child + span {color:var(--sub-color)}

body.skyblue[data-dark="on"] .issue_board strong.finish,
body.skyblue[data-dark="on"] span.usable.gray {color:var(--dard-gray)}


body.skyblue[data-dark="on"] #main .updown .b_day { background:url(../../images/eis/b_day_bg.png) -120px center no-repeat var(--dark-black); background-size:60rem; }
body.skyblue[data-dark="on"] .my_anniversary {background:url(../../images/eis/anniversary_bg.svg) center center no-repeat  var(--dark-black); background-size: 40rem; }


body.skyblue[data-dark="on"] .issue_board a span,
body.skyblue[data-dark="on"] #main .updown .b_trip .approval p,
body.skyblue[data-dark="on"] .trip_paper_list li a,
body.skyblue[data-dark="on"] .notice .tab-content ul a,
body.skyblue[data-dark="on"] #main .updown .e_paper ul li a,
body.skyblue[data-dark="on"] .calbox .txts ol > li strong,
body.skyblue[data-dark="on"] .work_wrap ul li span:first-child,
body.skyblue[data-dark="on"] .mail_wrap .in_mail p > span,
body.skyblue[data-dark="on"] .mail_wrap .out_mail p > span,
body.skyblue[data-dark="on"] .work_day p.info span:nth-child(1),
body.skyblue[data-dark="on"] .b_trip_box .state_box .trip_state p,
body.skyblue[data-dark="on"] .b_trip_box .state_box .trip_state p:nth-child(2) span.title,
body.skyblue[data-dark="on"] .b_day .b_title span,
body.skyblue[data-dark="on"] .project_wrap .project_step p.title,
body.skyblue[data-dark="on"] .personal ul li p.time,
body.skyblue[data-dark="on"] .my_anniversary .list li .name .title,
body.skyblue[data-dark="on"] .dd_list ul li a,
body.skyblue[data-dark="on"] #main .my_info .top_box .info .name span:nth-child(2) {color:var(--dark-white)}

body.skyblue[data-dark="on"] .work_wrap ul li span:nth-child(2) {color:#0996b9}
body.skyblue[data-dark="on"] .work_day .time,
body.skyblue[data-dark="on"] .work_day .work_title p span,
body.skyblue[data-dark="on"] .mail_wrap .out_mail p:nth-child(2) b {color:#a6baff;}

body.skyblue[data-dark="on"] .personal ul li:nth-child(2n-1) {border-right:1px solid var(--dark-2th_black)}
body.skyblue[data-dark="on"] .personal ul li:nth-child(1), 
body.skyblue[data-dark="on"] .personal ul li:nth-child(2),
body.skyblue[data-dark="on"] .my_anniversary .list li,
body.skyblue[data-dark="on"] .issue_board,
body.skyblue[data-dark="on"] .common_item ul li  {border-bottom:1px solid var(--dark-2th_black)}
body.skyblue[data-dark="on"] .common_item ul li:last-child {border:none;}

body.skyblue[data-dark="on"] select {background: var(--dark-sub_black) url(../../images/eis/icon_arrow_dark.svg) right center no-repeat; background-size:2rem; color:var(--dard-gray)}
body.skyblue[data-dark="on"] select option {background:var(--dark-2th_black);font-size:15px; font-weight:500;}

body.skyblue[data-dark="on"] .footer {background:var(--dark-sub_black)}


/* 검색 */
body.skyblue[data-dark="on"] #search-form .bg {background: var(--dark-2th_black); }
body.skyblue[data-dark="on"] #search-form .inner {background-image: linear-gradient(#414141, #414141), linear-gradient(to right, #36c2cf 0%, #446bdf 100%);}
body.skyblue[data-dark="on"] .bottom_search .box_wrap .list_box {background: var(--dark-sub_black);}
body.skyblue[data-dark="on"] #search-form .inner input[type="text"],
body.skyblue[data-dark="on"] .bottom_search .box_wrap .list_box strong,
body.skyblue[data-dark="on"] .bottom_search .box_wrap .list_box ul li a,
body.skyblue[data-dark="on"] .bottom_search .search_txt ul li a  {color:var(--dark-white)}

body.skyblue[data-dark="on"] .bottom_search .box_wrap .list_box ul li:nth-child(4) a,
body.skyblue[data-dark="on"] .bottom_search .box_wrap .list_box ul li:nth-child(5) a {color:#979797}


body.skyblue[data-dark="on"] #search-form .bg .up_search {border-bottom:1px solid #626262}
/* .search_open {background:#b0b0b0;} */




body.skyblue[data-dark="on"] .food > div.title p span:first-child,
body.skyblue[data-dark="on"] .food > div.title span,
body.skyblue[data-dark="on"] .my_item > div.title p span:first-child,
body.skyblue[data-dark="on"] .my_item > div.title span,
body.skyblue[data-dark="on"] .personal > div.title p span:first-child,
body.skyblue[data-dark="on"] .personal > div.title span    {font-size:2rem; font-weight:600; color:var(--dark-white);}



body.skyblue[data-dark="on"] .slide::after { background: var(--dark-black);}
body.skyblue[data-dark="on"] .edit {background:url(../../images/eis/btn_icon_edit_dark.png) center center no-repeat var(--dark-2th_black); border-radius: 30px; background-size:15px;}
body.skyblue[data-dark="on"] .my_anniversary .tit > .title + .edit {position:absolute; top:0; right: 0px; width:30px; height:30px; background:url(../../images/eis/btn_icon_edit_dark.png) center center no-repeat var(--dark-2th_black); border-radius: 30px; background-size:15px;}

body.skyblue[data-dark="on"] .b_day .b_list_box .one .messege,
body.skyblue[data-dark="on"] .new_per .welcome {background:var(--dark-2th_black);}
body.skyblue[data-dark="on"] .b_day .b_list_box .one .messege a,
body.skyblue[data-dark="on"] .new_per .welcome a { color:var(--dark-white)}


body.skyblue[data-dark="on"] .modal-content {background: url(../../images/eis/b_day_bg.png) -201px -132px no-repeat var(--dark-2th_black);  background-size:75rem; margin:auto; padding: 20px;
  width: 450px; border-radius: 10px; text-align: center;}
body.skyblue[data-dark="on"] .birth_per .title {color:var(--dark-white); border-bottom:1px solid var(--dard-gray)}
body.skyblue[data-dark="on"] .birth_per .wrap .txt,
body.skyblue[data-dark="on"] .birth_per .wrap .txt h2,
body.skyblue[data-dark="on"] .cont .info {color:var(--dark-white)}
body.skyblue[data-dark="on"] .modal-content textarea,
body.skyblue[data-dark="on"] .cont textarea {background:var(--dark-sub_black); border:1px solid var(--dark-black); color:var(--dark-white)}
body.skyblue[data-dark="on"] .modal-buttons button,
body.skyblue[data-dark="on"] #closeBgModal {background: var(--dark-black); color:var(--dark-white)}
body.skyblue[data-dark="on"] .modal-buttons button:nth-child(2),
body.skyblue[data-dark="on"] .bg-modal .modal-buttons.btn_align #applyBg {background: #4567e0;}

body.skyblue[data-dark="on"] .cont  {background: url(../../images/eis/b_day_bg.png) -201px -132px no-repeat var(--dark-2th_black); background-size:75rem; margin:auto; padding: 20px;
  width: 450px; border-radius: 10px; text-align: center;}
body.skyblue[data-dark="on"] .cont img {border:none;}


body.skyblue[data-dark="on"] .error_modal,
body.skyblue[data-dark="on"] .bg-modal-content {background: var(--dark-2th_black);}
body.skyblue[data-dark="on"] .error_modal select { border:1px solid var(--dark-black);}
body.skyblue[data-dark="on"] .error_modal #etcInputArea textarea {background:var(--dark-sub_black); border:1px solid var(--dark-black); color:var(--dark-white)}
body.skyblue[data-dark="on"] .error_modal #solutionBox {background:var(--dark-sub_black); border:1px solid var(--dark-black); }
body.skyblue[data-dark="on"] #cancelBtn {background:var(--dark-black)}
body.skyblue[data-dark="on"] .error_modal input[type="file"],
body.skyblue[data-dark="on"] .bg_list {background:var(--dark-sub_black); color:var(--dard-gray); border:none}

body.skyblue[data-dark="on"] .dd_modal_content {background:var(--dark-2th_black)}
body.skyblue[data-dark="on"] .dd_modal_title,
body.skyblue[data-dark="on"] .bg-modal-content h3 {color:var(--main-color-w)}
body.skyblue[data-dark="on"] .dd_modal_text {background: var(--dark-black); border:none;}
body.skyblue[data-dark="on"] .info_group {background: var(--dark-black);}
body.skyblue[data-dark="on"] .info_group span,
body.skyblue[data-dark="on"] .bg-modal-content h3 + p {color:var(--dark-white)}
body.skyblue[data-dark="on"] .dd_modal_buttons #ddCloseBtn {background: var(--dark-black); color:var(--dark-white)}
body.skyblue[data-dark="on"] .dd_modal_content .img_box {background:var(--dark-2th_black);}







/* 샘플*/
.sample-div {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

/* 백그라운드에 SAMPLE 텍스트 추가 */
.sample-div::after {
  content: "SAMPLE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-size: 75px;
  font-weight: bold;
  color: rgba(203, 5, 5, 0.5); /* 연한 회색 반투명 */
  pointer-events: none;             /* 클릭 막지 않음 */
  white-space: nowrap;
  overflow: hidden; /* 스크롤 방지 */
}
.sample-div::after { content: "SAMPLE"; }