@charset "UTF-8";
/* @import url("../font/font.css"); */

.pretendard {
   font-family: "Pretendard";
   font-weight: 600;
}

.monasans {
   font-family: "monasansWide";
   font-weight: 600;
}

body{
   -webkit-user-select:none;
   -webkit-touch-callout:none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   overflow-y:visible !important;
   font-family: "Pretendard";
}

/* body {
   background-color: #F4F5F7;
} */

#wrap {
   position: relative;
   width: 100%;
   margin: 0 auto;
   padding: 0;
}
#logo {
   position: absolute;
   left: 1.25rem;
   top: 1.25rem;
   font-size: 1rem;
}

/* header */
#header {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   padding: 1rem;
   height: 70px;
}

#header:after {
   display: block;
   clear: both;
   content: '';
}

#header .user {
   font-size: 1.5rem;
}

#header .user strong {
   font-weight: 700;
}

#header .notify {
   position: absolute;
   right: 3.25rem;
}
#header .notify i {
   color: #2E3236;
}

#header .notify .alarm {
   display: inline-block;
   width: 6px;
   height: 6px;
   position: absolute;
   top: 3px;
   right: 1px;
   -webkit-border-radius: 9px;
   border-radius: 9px;
}

.innerWrap {
   display: block;
   width: 100%;
   margin: 0 auto;
   padding-bottom: 0.5%
}

.innerWrap.wtr {
   padding: 1rem;
}
#wrap.db_back {
   background: #f4f4f4;
}
#user_wrap {
   width: 100%;
   display: flex;
   flex-direction: column-reverse;
   padding:0 1.25rem;
   /* background: linear-gradient(to bottom, white 80%, #f4f4f4); */
}
#user_wrap .user_name {
   font-size: 1.5rem;
   letter-spacing: -1px;
   margin-bottom: 1rem;
}
#user_wrap .user_name span {
   /* display: block; */

}
#user_wrap .user_name strong {

}
#user_wrap .user_date {
   letter-spacing: -.5px;
   margin-bottom: 5px;
}
#user_wrap .user_date .today_txt {
   display: block;
   font-size: .9rem;
   font-weight: 600;
   /* color: #93999F; */
   display: none;
}
#user_wrap .user_date .today_date {

}

#weather {
   position: relative;
   overflow: hidden;
   padding: 1.25rem 1rem;
   width: 100%;
   margin: 0 auto;
   background: #fff;
   border-radius: .625rem;
   -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

#weather:after {
   display: block;
   clear: both;
   content: '';
}

/* weather */
#weather .main_info {
   position: relative;
   height: 46px;
}

#weather .main_info .info_state {
   position: absolute;
   left: 12px;
   top: 0;
}

#weather .main_info .info_state .todaytemp {
   font-size: 1em;
   font-weight: 100;
   display: block;
   color: #fff;
}

#weather .main_info .info_state .todaytemp strong {
   display: inline-block;
   font-size: 2.45rem;
   font-weight: 600;
}

#weather .main_info .info_state .todaytemp i {
   font-size: 1.5rem;
   font-weight: 600;
}

#weather .main_info .info_state .place {
   display: block;
   /* font-size: 1.15rem; */
   font-weight: 600;
   letter-spacing: -.5px;
}

/* 날씨 아이콘 */
#weather .main_info .ico_state {
   width: 100px;
   height: 100px;
   background: url('../images/weather_ico.svg?ver=2') no-repeat;
   background-size: auto;
   -webkit-background-size: auto;
   position: absolute;
   right: 0;
   top: -12px;
}


/* 맑음 */
#weather .main_info .ico_state.ws1 {
   background-position: -4px 0px;
}

/* 구름많음 */
#weather .main_info .ico_state.ws2 {
   background-position: -4px -143px;
}

/*흐림*/
#weather .main_info .ico_state.ws3 {
   background-position: -4px -293px;
}

/*비*/
#weather .main_info .ico_state.ws4 {
   background-position: -4px -457px;
}

/*눈*/
#weather .main_info .ico_state.ws5 {
   background-position: -4px -610px;
}

/*비/눈*/
#weather .main_info .ico_state.ws6 {
   background-position: -4px -790px;
}

/*바람*/
#weather .main_info .ico_state.ws7 {
   background-position: -4px -925px;
}

/*번개*/
#weather .main_info .ico_state.ws8 {
   background-position: -4px -1081px;
}


/* 위치 */
.loca_info {
   margin-top: 6px;
   line-height: 140%;
}
.loca_info span {
   letter-spacing: -.3px;
}
.loca_info span {
   padding-left: 11px;

}

/* 아이콘 */
.all-ico {
   display: inline-block;
   background-image: url('/images/sprite.svg');
   background-repeat: no-repeat;
   vertical-align: middle;
}
.all-ico.map {
   width: 20px;
   height: 20px;
   background-position: 2px -3px;
}
.all-ico.r-arr {
   width: 21px;
   height: 24px;
   background-position: -46px -1px;
}
.all-ico.restart {
   width: 20px;
   height: 20px;
   background-position: -96px -4px;
}
.all-ico.logoutcon {
   width: 28px;
   height: 28px;
   background-position: -308px -79px;
}
.all-ico.seti {
   width: 28px;
   height: 28px;
   background-position: -363px -80px;
}
.all-ico.menu-con1 {
   width: 28px;
   height: 28px;
   background-position: 1px -80px;
}
.all-ico.menu-con2 {
   width: 28px;
   height: 28px;
   background-position: -54px -80px;
}
.all-ico.menu-con3 {
   width: 28px;
   height: 28px;
   background-position: -111px -80px;
}
.all-ico.menu-con4 {
   width: 28px;
   height: 28px;
   background-position: -167px -80px;
}
.all-ico.menu-con5 {
   width: 28px;
   height: 28px;
   background-position: -223px -80px;
}
.all-ico.close {
   width: 28px;
   height: 28px;
   background-position: -477px -75px;
}
.all-ico.sub-arr {
   width: 26px;
   height: 28px;
   background-position: -146px 2px;
}
.all-ico.search {
   width: 25px;
   height: 32px;
   background-position: -234px 3px;
}
.all-ico.search-b {
   width: 32px;
   height: 32px;
   background-position: -258px 3px;
}
.all-ico.s-left-arr {
   width: 20px;
   height: 20px;
   background-position: -284px -3px;
}
.paging a:hover .all-ico.s-left-arr,
.paging a:focus .all-ico.s-left-arr,
.paging a.selected .all-ico.s-left-arr {
   background-position: -302px -4px;
}
.all-ico.s-right-arr {
   width: 20px;
   height: 20px;
   background-position: -342px -3px;
}
.paging a:hover .all-ico.s-right-arr,
.paging a:focus .all-ico.s-right-arr,
.paging a.selected .all-ico.s-right-arr {
   background-position: -328px -4px;
}
.all-ico.ncc {
   width: 30px;
   height: 27px;
   background-position: 3px -154px
}
.all-ico.occ {
   width: 30px;
   height: 27px;
   background-position: -51px -154px;
}
.all-ico.popclose {
   width: 28px;
   height: 28px;
   background-position: -512px -80px;
}
.all-ico.cal {
   width: 28px;
   height: 28px;
   background-position: -551px -80px;
}
.all-ico.notify {
   width: 30px;
   height: 30px;
   background-position: -111px -154px;
}
.all-ico.add_file {
   width: 22px;
   height: 22px;
   background-position: 0px -207px;
}

/* 습도 풍속 풍향 강수 */
#weather .sub_info {
   width: 100%;
   margin: 1rem auto 0;
}

#weather .sub_info ul {
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
}

#weather .sub_info ul li {
   width: calc(100% / 3 - 6px);
   padding: 8px;
   border-radius: 0.4rem;
}

#weather .sub_info ul li .name {
   position: relative;
   font-size: .95em;
   font-weight: 500;
   display: block;
   padding-left: 28px;
   margin-bottom: .4rem;
}
#weather .sub_info ul li .name i {
   content: '';
   background: #f4f4f4 url("../images/sprite.svg?ver=8") no-repeat;
   width: 24px;
   height: 24px;
   position: absolute;
   left: 0;
   top: -4px;
   border-radius: .25rem;
}
#weather .sub_info ul li .name .info_ico1 {
   background-position: -159px -156px;
}
#weather .sub_info ul li .name .info_ico2 {
   background-position: -199px -156px;
}
#weather .sub_info ul li .name .info_ico3 {
   background-position: -238px -156px;
}

#weather .sub_info ul li .data {
   display: inline-block;
   font-size: 1.2rem;
   font-weight: 600;
}
#weather .sub_info ul li .gm {
   font-size: .625rem;
   font-weight: 500;
}

/* 타입2 */
#weather .sub_info_aor {
   width: 100%;
   margin-top: 10px;
}

#weather .sub_info_aor ul {
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
}

#weather .sub_info_aor ul li {
   position: relative;
   width: calc(100% / 3 - 6px);
   text-align: center;
}
#weather .sub_info_aor ul li::after {
   content: '';
   position: absolute;
   top: 10%;
   bottom: 10%;
   width: 1px;
   background-color: rgb(255, 255, 255, 0.3);
}

#weather .sub_info_aor ul li:nth-child(1)::after {
   right: 0;
}

#weather .sub_info_aor ul li:nth-child(2)::after {
   right: -11px;
}
#weather .sub_info_aor ul li:nth-child(3)::after {
   display: none;
}

#weather .sub_info_aor ul li .name {
   position: relative;
   font-size: .95em;
   color: #FFF;
}
#weather .sub_info_aor ul li span {
   display: block;
}
#weather .sub_info_aor ul li .info_con {
   content: '';
   background: url("../images/sprite.svg?ver=8") no-repeat;
   width: 30px;
   height: 30px;
   display: inline-block;
   border-radius: .25rem;
   margin-top: 5px;
   display: none;
}
#weather .sub_info_aor ul li .info_con.ico1{
   background-position: -161px -154px;
}
#weather .sub_info_aor ul li .info_con.ico2{
   background-position: -201px -155px;
}
#weather .sub_info_aor ul li .info_con.ico3{
   background-position: -238px -156px;
   background-position: -282px -156px;
}

#weather .sub_info_aor ul li .data {
   font-size: 1.2rem;
   font-weight: 600;
   padding-top:3px;
   color:#fff
}
#weather .sub_info_aor ul li .gm {
   font-size: .95rem;
   font-weight: 500;
}

/* 컨테이너 */
#container {
   position: relative;
   overflow: hidden;
   width: 100vw;

}

#container.sub {
   background: #fff;
   margin-top: 0;
}

#container:after {
   display: block;
   clear: both;
   content: '';
}

#content {
   position: relative;
   width: 100%;
   box-sizing: border-box;
   /* margin-bottom: 5rem; */
}

/* 온실환경 */
/* 여기 */
.comm {}

.comm .sensor_area {
   position: relative;
   overflow: hidden;
   padding: 1.25rem;
   width: 100%;
   margin: 0 auto;
   background: #fff;
   border-radius: .625rem;
   -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.sensor_list {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
   flex-wrap: wrap;
}
.sensor_list .item {
   width: calc(100% / 3);
   padding: .85rem;
   border-left: 1px solid #f4f4f4;
   border-top: 1px solid #f4f4f4;
}
.sensor_list .item:nth-child(1),
.sensor_list .item:nth-child(2),
.sensor_list .item:nth-child(3) {
   border-top:0
}
.sensor_list .item:nth-child(1),
.sensor_list .item:nth-child(4) {
   border-left:0
}

.sensor_list .item dl .name {
   font-size: .95em;
   font-weight: 500;
   margin-bottom: .4rem;
   color: #747474;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.sensor_list .item .info_con {
   content: '';
   background: url(../images/sprite.svg?ver=1) no-repeat;
   width: 25px;
   height: 25px;
   display: inline-block;
   border-radius: .425rem;
   filter: grayscale(100);
}

.pd_1 {padding: 0.8rem 0.5rem !important;}

.sensor_list .item .info_con.ico1 {
   background-position: -156px -153px;
}
.sensor_list .item .info_con.ico2 {
   background-position: -187px -154px;
}
.sensor_list .item .info_con.ico3 {
   background-position: -276px -154px;
}
.sensor_list .item .info_con.ico4 {
   background-position: -216px -154px;
}
.sensor_list .item .info_con.ico5 {
   background-position: -246px -154px;
}
.sensor_list .item .info_con.ico6 {
   background-position: -306px -154px;
}
.sensor_list .item dl .data {
   font-size: 1.2rem;
   font-weight: 600;
   display: flex;
   align-items: baseline;
   flex-direction: row;
   justify-content: space-between;
}
.sensor_list .item dl .data .unit {
   font-size: .625rem;
   font-weight: 500;
}
.pd125 {padding: 1rem 1rem 0 1rem !important}
.mb25 {margin-bottom: 3.5rem !important;}
.mt1rem {margin-top: 1rem !important;}

.comm > .tit,
.w100_area > .tit {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-bottom: 1rem;
}
.comm .tit h4,
.w100_area .tit h4 {
   position: relative;
   font-size: 1.4rem;
   letter-spacing: -.05rem;
}
.w100_area > .tit {
   margin: .8rem 0;
}
.comm .tit h4 a,
.w100_area .tit h4 a {
   display: flex;
   align-items: center;
}
.tit .restart {
   color: #717171;
   letter-spacing: -.3px;
}

.unit {
   font-size: 0.75rem;
   font-weight: 600;
   margin-left: 0.2rem;
}

.mois_stress .ms_graph img {
   width: 100%;
   margin: 0 auto;
   image-rendering: -webkit-optimize-contrast;
   transform: translateZ(0);
   backface-visibility: hidden;
   margin: 1rem 0;
}
.mois_stress .ms_info {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: 5px;
}
.mois_stress .ms_info .txt {
   width: calc(100% - 26px);
}
.mois_stress .ms_info .all-ico.msInfo {
   width: 20px;
   height: 20px;
   background-position: -159px -192px;
}

.mois_stress .ms_info .txt p {
   font-size: .95em;
   color: #7E8081;
   line-height: 1.2rem;
}
.mois_stress .ms_info .ms_i_btn a {
   color: #27B06E;
   font-size: .9rem;
   font-weight: 500;
   display: block;
   margin-top: 5px;
}

/* -- */
.w100_area {
   padding: 1rem;
   background-color: #fff;
}

.farm_diy_area {}
.farm_diy .list {
   border-bottom: 1px solid #e9e9e9;
   margin-bottom: 1.25rem;
   padding-bottom: 1.25rem;
}
.farm_diy .list:last-child {
   border-bottom: 0;
   margin-bottom: 0;
   padding-bottom: 0;
}
.farm_diy .list a {
   display: block;
}
.farm_diy .list a .tit_box {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.farm_diy .list a .tit {
   display: block;
   font-weight: 600;
   font-size: 1.05rem;
}
.farm_diy .list a .txt {
   font-size: .95rem;
   line-height: 1.25rem;
   overflow: hidden;
   text-overflow:ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:2;
   -webkit-box-orient:vertical;
   margin: .4rem 0 1rem;
   color: #7E8081;
}
.farm_diy .list a .sm_btn{
   /* background-color: #E8FDF3; */
   color: #27B06E;
   border: 1px solid #27B06E;
   padding: .3rem .6rem;
   border-radius: 4rem;
   letter-spacing: -1px;
   font-weight: 500;
}
.farm_flag {
}
.farm_flag .ico_flag {
   display: inline-block;
   padding: .35rem .65rem;
   font-size: .85rem;
   font-weight: 500;
   border-radius: .3rem;
   color: #fff;
   margin-left: .2rem;
}
.farm_flag .ico_flag:first-child {
   margin-left:0;
}
.farm_flag .ico_flag.control {
   background-color: hsl(171, 84%, 42%);
}
.farm_flag .ico_flag.harvest {
   background-color: #FDA643;
}
.farm_flag .ico_flag.irrigate {
   background-color: #00B0D7;
}
.mainboard_area {
   background: #fff;
}

.house .sensor {
   width: 100%;
}

.house .sensor ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
}

.house .sensor ul li {
   display: flex;
   width: calc(100% / 3 - 6px);
   background: #F5F8FB;
   padding: .9rem;
   border-radius: 0.625rem;
   margin-top: 8px;
   border: 1px solid #e5ecff
}
.house .sensor ul li:nth-child(1),
.house .sensor ul li:nth-child(2),
.house .sensor ul li:nth-child(3) {
   margin-top: 0;
}

.house .sensor ul li dl {
   width: 100%;
   text-align: center;
}
.house .sensor ul li dl dt {
   font-size: .95rem;
   color: #555658;
   font-weight: 600;
}

.house .sensor ul li dl dd {
   font-size: 1.375rem;
   color: #2E3236;
   font-weight: 700;
   margin-top: 0.1rem;
}

.house .sensor ul li dl dd .unit {
   display: block;
}

.house .sensor ul li dl dd.kor {
   font-size: 1em;
}

/* 숙기판별 */
.ripe {
   border-top: 1px solid #464667;
   border-left: 1px solid #dee5f8;
   border-right: 1px solid #dee5f8;
   border-bottom: 1px solid #dee5f8;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   /* -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.08);
   box-shadow: 0 2px 8px rgba(0,0,0,.08); */
}

.ripe ul {
   display: flex;
   border-radius: 10px;
}

.ripe ul li {
   width: calc(100%/ 6);
   text-align: center;
   padding: 1rem 0;
   border-left: 1px solid #e3e6e8;
   border-top: 1px solid #e3e6e8;
   font-size: 1rem;
   font-weight: bold;

}

.ripe ul.area.num1 li {
   border-top: 0;
}

.ripe ul.title {
   background-color: #EFF8FF;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   position: relative;
   border-bottom: 1px solid #dee5f8;
   -webkit-border-radius: 10px 10px 0 0;
   border-radius: 10px 10px 0 0;
}

.ripe ul.title li {
   border-left: 1px solid #dee5f8;
   font-weight: 600;
   border-top: 0;
   font-size: 14px
}

.ripe ul li:first-child {
   border-left: 0;
   font-size: 14px
}

.ripe ul.area {
   border-radius: .625rem;
}

/* 병해탐지 */
.illn {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
}

.illn .area {
   background: #f3faff;
   width: calc(100% / 3);
   margin: 0 0.6rem;
   padding: 1.5rem 1rem 1.2rem;
   border-radius: .625rem;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   /* border: 1px solid #efeff0; */
   /* box-shadow: 0 2px 8px rgba(0, 0, 0, .04); */
}

.illn .area:nth-child(odd) {
   margin: 0
}

.illn .area .badge {
   display: block;
   width: 4.063rem;
   height: 4.063rem;
   background: #437CFF;
   /* background: #00b771; */
   border-radius: 150px;
   display: flex;
   align-items: center;
   justify-content: center;

}

.illn .area .badge::before {
   position: absolute;
   content: "";
   width: 4.688rem;
   height: 4.688rem;
   display: inline-block;
   background: #437CFF;
   /* background: #3bdc9c; */
   border-radius: 150px;
   opacity: .2;
}

.illn .area .badge i {
   position: relative;
   font-size: 0.925rem;
   color: #fff;
   font-weight: 500;
}

.illn .area .txt {
   display: block;
   font-size: 1rem;
   font-weight: 700;
   margin-top: 0.9rem;
}

.illn .area.warn {
   /* background: #FFF3F7;
   background: rgb(255 0 0 / 4%); */
}

.illn .area.warn .badge {
   background: #E83425;
}

.illn .area.warn .badge::before {
   background: #E83425;
   opacity: .15;
}

/* 초록 */
/* .illn .area {background:#ecf5f0;}
.illn .area .badge {background:#03c75a;}
.illn .area .badge::before {background:#03c75a;} */


/* 경락가 */
.price_area {}

.price_area li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #f1f4f7;
   padding: 1rem 0;
}

.price_area li:last-child {
   border-bottom: 0;
}

.price_area li .p_name {
   position: relative;
   padding-left: 1.15rem;
   font-size: 1.2rem;
   font-weight: 700;
}

.price_area li .p_name::before {
   width: 11px;
   height: 11px;
   background: #36d094;
   content: "";
   position: absolute;
   top: 6px;
   left: 0px;
   border-radius: 50px;
}

.price_area li:nth-child(1) .p_name::before {
   background: #EA6E43;
}

.price_area li:nth-child(2) .p_name::before {
   background: #EFBFAC;
}

.price_area li:nth-child(3) .p_name::before {
   background: #F4CF8E;
}

.price_area li:nth-child(4) .p_name::before {
   background: #B3A13E
}

.price_area li .price {
   font-size: 1.25rem;
   display: flex;
   align-items: center;
}

.price_area li .price i {
   font-weight: 400;
   color: #919191;
   font-size: 1.125rem;
}

/* footTab */
#foot {
   position: fixed;
   bottom: 0;
   overflow: hidden;
   width: 100%;
   background: #fff;
   /* border-top:1px solid #e9ecf0; */
   box-shadow: 0px -5px 12px rgba(0, 0, 0, .04);
}

#foot .qmenu {
   float: left;
   width: 100%;

}

#foot .qmenu ul {
   display: table;
   table-layout: fixed;
   width: 100%
}

#foot .qmenu ul li {
   display: table-cell;

}

#foot .qmenu ul li a {
   display: block;
   text-align: center;
   padding: 1.1rem 0 1.25rem;

}

#foot .qmenu ul li a i {
   display: block;
   width: 20px;
   height: 20px;
   transform: translateX(-50%);
   margin-left: 50%;
   font-size: 1.5rem;
   color: #c0c4cd;
   margin-bottom: 6px;
}

#foot .qmenu ul li a span {
   font-size: 0.875rem;
   color: #c0c4cd;
   font-weight: 500;
}

#foot .qmenu ul li a.active i,
#foot .qmenu ul li a.active span {
   color: #437cff;

}

.hmenu {
   overflow: hidden;
   position: absolute;
   right: 11px;
   bottom: 17px;
   width: 30px;
   height: 30px;
}



#areaChoose {
   display: block;
   height: 90vh;
   background: #3760c2;
   padding: 20px;
   box-sizing: border-box;
}

#areaChoose .ch_tit {
   text-align: center;
}

#areaChoose .ch_tit h2 {
   color: #fff;
   font-size: 25px;
   font-weight: 500;
}

#areaChoose .ch_tit span {
   color: #fff;
}

#areaChoose .ch_btn {
   display: block;
   margin-top: 10px;
   box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, .25);
}

#areaChoose .ch_btn a {
   position: relative;
   background: #6495ed;
   padding: 20px 0 20px 25px;
   display: block;
   color: #fff;
   border-radius: 3px;
   font-weight: 500;
}

/* 5b8ae5 */
#areaChoose .ch_btn a:after {
   width: 20px;
   height: 20px;
   content: "〉";
   position: absolute;
   top: 14px;
   right: 10px;
   font-weight: normal;
   font-size: 22px;
}


/* 로그인 */
#loginArea {
   position: relative;
   background: #f4f4f4;
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
}

#loginArea .loginInner {
   padding: 6rem 2rem 0;
   box-sizing: border-box;
}

#loginArea .loginInner .login_logo {
   width: 100%;
   margin-bottom: 3rem
}

#loginArea .loginInner .login_logo h2.logo-stxt {
   font-size: 1rem;
   color: #242424;
   font-weight: 600;
   line-height: 1.35rem;
   letter-spacing: -.5px;
}

#loginArea .loginInner .login_logo h2.logo-txt {
   font-size: 2.6rem;
   color: #242424;
   color: #27B06E;
   margin-bottom: 10px;
   letter-spacing: -2px;
}

#loginArea .loginInner .login_logo h2 img {
   width: 100%;
}

#loginArea .loginInner .class_id,
#loginArea .loginInner .class_pwd {
   width: 100%;
   height: 58px;
   border: 0;
   border-radius: 0.425rem;
   background: #fff;
   margin-bottom: .8rem;
   padding-left: 1rem;
}

#loginArea .loginInner .class_id::placeholder,
#loginArea .loginInner .class_pwd::placeholder {
   color: #747474
}

#loginArea .loginInner .css-label {
   font-size: 15px;
   color: #666
}

#loginArea .loginInner .loginBtn {
   background: #27B06E;
   height: 58px;
   line-height: 58px;
   border-radius: 0.425rem;
   font-size: 17px;
}
.login_chk {
   display: flex;
   flex-direction: row;
   margin:.3rem 0 1.3rem;
}
.login_chk .def-form-label {
   margin-left: 8px;
}
/* #loginArea .loginInner .controlBtn {
   margin-top: 30px;
} */
/* 하단로고 및 카피 */
.foot_area {
   width: 100%;
}
.foot_area.sub{
   margin: 1rem 0 0;
}
.foot_logo {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 90%;
   margin: 0 auto;
   gap: 10px;
   text-align: center;
}
.foot_logo li img {
   width: 100%;
}
.foot_logo li:nth-child(2) img {
   width: 90%;
}
.copy {
   color: #929294;
   font-size: 14px;
   font-weight: 400;
   line-height: 16px;
   text-align: center;
   display: block;
   padding: 1.2rem 0 1.2rem;
}

#loginArea .foot_area {
   width: 100%;
}


/* 설정 */
.set_user {

}
.set_user h3 {
   font-size: 1.3rem;
   font-weight: 600;
}
.set_user span {
   display: block;
   color: #666;
   font-size: 1rem;
   margin-top: 10px;
}
.set_user_list {
   margin-top: 1.5rem;
}
.set_user_list .item {
   border-top: 1px solid #dfe2e6
}
.set_user_list .item:first-child {
   border-top: 0;
}
.set_user_list .item a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem 0;
}
.set_user_list .item span {
   font-size: 1.15rem;
}
.set_user_list .item a i {
   font-size: 1.5rem;
}
.set_user_list .arm {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem 0;
}
.lineBtn {
   border: 0.094rem solid #27B06E;
   background-color: #fff;
   color: #27B06E;
   height: 55px;
   line-height: 55px;
   border-radius: .4rem;
   font-size: 17px;
   width: 100%;
   margin-top: 1rem;
   font-weight: 500;
}
.solidBtn {
   background-color: #27B06E;
   color: #fff;
   height: 55px;
   line-height: 55px;
   border-radius: .4rem;
   font-size: 17px;
   width: 100%;
   margin-top: 1rem;
   font-weight: 500;
}


/* sidemenu */
#main-sidebar {
   position: fixed;
   top: 0;
   bottom: 0;
   background: #f5f6f8;
   width: 300px;
}

#main-sidebar .close-sb {
   background: #27B06E;
   height: 45px;
   text-align: right;
   padding: 0.625rem 0.7rem 0 0;
}

#main-sidebar .close-sb i {
   font-size: 1.9rem;
   color: #fff
}

.today_data {
   font-size: .95rem;
   color: #747474;
   margin-top: 10px;
}

.today_data i {
   margin-right: 3px;
}
.log_info {
   position: relative;
   padding: 3rem 1rem 1rem;
}

.log_info li {
}

.log_info .user_name {
   font-size: 1.5rem;
   font-weight: 600;
}

.log_info .user_name span {
   font-weight: 300;
}

.log_info .user_set {
   display: flex;
   justify-content: space-around;
   background: #F4F4F4;
   margin-top: 1.2rem;
   border-radius: .4rem;
}

.log_info .user_set button {
   position: relative;
   padding: .7rem .5rem;
}
.log_info .user_set button:after {
   content: '';
   position: absolute;
   width: 1px;
   height: 15px;
   background-color: #c5c5c5;
   top: 14px;
   right:-2.1rem
}

.log_info .user_set button:nth-child(2):after {
   display: none;
}

.log_info .user_set i {
   font-size: 1.5rem;
}

.log_info .user_set span {
   display: block;
   font-size:1rem;
   color: #747474;
}

#main-sidebar .menu {
   margin-top: 1.5rem;
   padding-left: 1rem;
   padding: .5rem 0;
   width: 90%;
   margin: .5rem auto 0;
}

#main-sidebar .menu ul {}

#main-sidebar .menu ul li {}

#main-sidebar .menu ul li>a {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 1rem 0 1rem .5rem;
}

#main-sidebar .menu ul li>a i {
   font-size: 1.3rem;
   margin-right: 0.625rem
}

#main-sidebar .menu ul li>a span {
   font-size: 1.1rem;
   font-weight: bold;
   margin-left: 5px;
}







/* 더보기 */
#backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: black;
   z-index: 3;
   visibility: hidden;
   opacity: 0;
   transition: all 100ms linear;
}

.add-event-section {
   position: fixed;
   right: 50px;
   bottom: 120px;
}

.add-event-section a {
   text-decoration: none;
   color: rgba(0, 0, 0, 0.9);
   display: block;
   visibility: hidden;
   opacity: 0;
   margin: 0;
   text-align: right;
   background-color: white;
   padding: 5px 15px 5px 30px;
   border-radius: 20px;
   position: relative;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
   transition: all 100ms linear;
   font-size: 17px;
   z-index: 4;
}

.add-event-section a:hover {
   background-color: rgba(150, 210, 255, 0.9);
}

.add-event-section a:before {
   font-family: "FontAwesome";
   position: absolute;
   left: 10px;
   top: 9px;
}

.add-event-section #upload:before {
   content: "";
}

.add-event-section #add:before {
   content: "";
}

.add-event-section input[type=checkbox] {
   display: none;
}

.add-event-section input[type=checkbox]:checked~a {
   visibility: visible;
   opacity: 1;
   margin: 25px 0;
}

.add-event-section input[type=checkbox]:checked~#backdrop {
   opacity: 0.65;
   visibility: visible;
}

.add-event-section .floating-action-button {
   position: fixed;
   bottom: 124px;
   right: 24px;
   display: flex;
   width: 60px;
   height: 60px;
   z-index: 100;
   border-radius: 50%;
   background-color: #437cff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   line-height: 16px;
   text-align: center;
   color: #fff;
   cursor: pointer;
   transition: all 100ms ease-in-out;
   font-size: 14px;
   font-weight: 500;
   justify-content: center;
   align-items: center;
}

.add-event-section .floating-action-button:hover {
   transform: scale(1.05);
}

.add-event-section .floating-action-button i {
   transition: transform 100ms linear;
}

.events {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   padding: 20px 0 50px;
}

.events .event-card {
   display: inline-block;
   background: white;
   width: 450px;
   margin: 20px;
   cursor: default;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
   transition: all 100ms ease-in-out;
   border-radius: 6px;
   color: rgba(0, 0, 0, 0.9);
}

.events .event-card:hover {
   transform: scale(1.02);
   box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}

.events .event-card img {
   width: 100%;
   height: 250px;
   border-radius: 2px 2px 0 0;
}

.events .event-card .description {
   padding: 5px 15px 15px;
}

.events .event-card .description h3 {
   padding-bottom: 5px;
   font-size: 26px;
}

.events .event-card .description .controls {
   display: flex;
   justify-content: space-around;
   margin-top: 10px;
}

.events .event-card .description .controls a {
   color: black;
   cursor: pointer;
   font-size: 20px;
   width: 20%;
   text-align: center;
   padding: 2px;
}

.events .event-card .description .controls a:hover {
   background-color: #ddd;
   border-radius: 20px;
}

.events .event-card .description .location {
   font-size: 18px;
}

.events .event-card .description .location:before {
   font-family: "FontAwesome";
   content: "";
   display: inline-block;
   height: 18px;
   margin-right: 8px;
}



/* ------------------------------------------------------------------- sub ------------------------------------------------------------------- */
#container.sub {
   margin-top: -10px;
}

.sub-title {
   display: flex;
   align-items: center;

}

.sub-title i {
   font-size: 2.25rem;
}

.sub-title h2 {
   margin-left: 2px;
   font-size: 1.5rem;
   font-weight:600
}

/* 탭 롤링 */
.stage {
   clear: both;
   position: relative;
   width: 100%;
   /* margin-bottom: 50px; */
}

.stage .slider-nav {
   width: 100%;
   background: #fff;
   color: #93999F;
   margin-bottom: .8rem;
   border-bottom: 1px solid #DADADA;
}

.stage .slider-nav .slick-slide .tab_dep1 {
   height: 50px;
   line-height: 50px;
   text-align: center;
   font-weight: 600;
   transition: all 300ms;
   font-size: 1.2rem;
}

.stage .slider-nav .slick-slide.slick-current {
   color: #282828 !important;
   border-bottom: .18rem solid #282828;
}
/* 슬라이드없앰 */
.stage .slider-nav {
   display: flex;
   flex-direction: row;
}
.stage .slider-nav .tab_dep1 {
   height: 50px;
   line-height: 50px;
   text-align: center;
   font-weight: 600;
   transition: all 300ms;
   font-size: 1.2rem;
   width: calc(100% / 2);
}
.stage .slider-nav .tab_dep1.on {
   color: #282828 !important;
   border-bottom: .18rem solid #282828;
}
.fixed-side {
   /* border:1px solid #707070; */
   visibility:visible;
}
.stage .slider-for {
   width: 100%;
   margin: 0 auto;
   min-height: 300px;
   overflow: hidden;
   box-sizing: border-box;
}

.serh_top {
   position: relative;
}
.serh_top.flex_row {
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
}
.serh_top .serh_top_right {
   position: absolute;
   right: 0;
   top: 0;
}
.serh_top .serh_top_right .def-btn {
   height: 54px;
   padding:.65rem .85rem;
   border-radius: 0 .4rem .4rem 0;
}
padding
.serh_top .def-form-area {
   margin-right: 5px;
}
.serh_top .def-top {
   position: relative;
}
.serh_top .def-top .all-ico {
   position: absolute;
   right: 8px;
   top: 12px;
}
.serh_top .def-btom {
   display: flex;
   margin-top: 5px;
}

/* select */
.def-top.sel2 {
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 100%;
}
.sel2 .left_sel, .right_sel {
   width: 50%;
   display: flex;
}

.sel2 .left_sel select:nth-child(2), .sel2 .right_sel select:nth-child(2) {
   width: 60%;
   margin-left: 3%;
}

.def-top.sel2 select {
   background: url(/images/plus.png) no-repeat 92% 19px;
   background-size: 16px 16px;
}
.def_btn_100 button.def-btn {
   width: 100%;
   margin-top: 5px;
   border-radius: 4px;
}

/* paging */
.paging {
   font-size: 13px;
   text-align: center;
   margin: 1.25rem 0;
   transition: all 300ms;
}

.paging a {
   display: inline-block;
   min-width: 34px;
   height: 34px;
   border-radius: .2rem;
   padding: 0 6px;
   line-height: 33px;
   color: #282828;
   vertical-align: middle;
   cursor: pointer;
   margin: 0 1px;
   border: 1px solid #dadada
}

.paging a:hover,
.paging a:focus,
.paging a.selected {
   color: #fff;
   text-decoration: none;
   background-color: #27B06E;
   border: 1px solid #27B06E;
}

.graph-box {
   border: 1px solid #dfe2e6;
   padding: 1rem;
   min-height: 300px;
}

/* 숙기 판별 */
/* .ripe-area {
   border: 1px solid #efeff0;
   padding: 1.25rem;
   border-radius: .625rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
}
.ripe-area a {
   display: block;
}
.ripe-area a .title {
   display: flex;
   justify-content: space-between;
}
.ripe-area a .title h5 {
   font-size: 1.15rem;
}
.ripe-area a .cont {
   display: flex;
   justify-content: space-between;
   margin-top: 0.625rem;
   background: #f5f6f8;
   border-radius: .625rem;
   padding: .5rem .5rem .55rem;
}
.ripe-area a .cont li {
   position: relative;
   width: calc(100% / 5);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   background: #f5f6f8;
   padding: 0.625rem;
}
.ripe-area a .cont li::after {
   width: 1px;
   height: 30px;
   background: #d4dbe7;
   content: "";
   position: absolute;
   top: 18px;
   right: 4px;
   opacity: 0.5;
}
.ripe-area a .cont li:last-child::after {
   display: none;
}
.ripe-area a .cont li:first-child {
   margin-left: 0;
}
.ripe-area a .cont li .pec {
   font-size: 0.95rem;
   color: #666;
}
.ripe-area a .cont li .pec_num {
   display: block;
   margin-top: 5px;
   font-size: 1.25rem;
   font-weight: bold;
} */

/* 숙기 판별 */
.ripe-area {
   padding: 1.4rem 1.25rem;
   border-radius: .625rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
   background: #f9f9f9;
   border: 1px solid #E9ECF5;
   /* box-shadow: 0 2px 8px rgba(0, 0, 0, .04); */
}
.ripe-area a {
   display: block;
}
.ripe-area a .title {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.ripe-area a .title h5 {
   font-size: 1.2rem;
}
.ripe-area a .title span {
   color: #717171;
   font-size: 1rem;
}
.ripe-area a .cont {
   display: flex;
   justify-content: space-between;
   margin-top: 1rem;

}
.ripe-area a .cont li {
   position: relative;
   width: calc(100% / 5);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 0.625rem;
   margin-left: .35rem;
   border-radius: 0.5rem;
   background: #fff;
   border: 1px solid #E9ECF5
}
/* .ripe-area a .cont li::after {
   width: 1px;
   height: 30px;
   background: #d4dbe7;
   content: "";
   position: absolute;
   top: 18px;
   right: 4px;
   opacity: 0.5;
}
.ripe-area a .cont li:last-child::after {
   display: none;
} */
.ripe-area a .cont li:first-child {
   margin-left: 0;
}
.ripe-area a .cont li .pec {
   font-size: 0.95rem;
   color: #666;
}
.ripe-area a .cont li .pec_num {
   display: block;
   margin-top: 2px;
   font-size: 1.25rem;
   font-weight: bold;
}




/* 설정 */
.setArea {
   width: 100%;
   margin: 0 auto;
   padding: 0 0 0.5%;
   /* display: table !important; */
}

.setArea .inner {
   width: 100%;
   height: auto;
   overflow: hidden;
   background: #fff;
   padding: 1.25rem;
   margin-bottom: 10px
}

.inner {
   width: 100%;
   height: auto;
   overflow: hidden;
   background: #fff;
   padding: 1.25rem;
   margin-bottom: 10px
}

.setArea .inner h4 {
   font-size: 1.05em;
   font-weight: 600;
   margin-bottom: 10px
}

.setArea .inner ul {
   width: 100%;
   overflow: hidden;
}

.setArea .inner ul li.timeSet {
   float: left;
}

.setArea .inner ul li.sliBtn {
   float: right;
}

.setArea .inner ul li.contents {
   float: right;
   width: 55%;
   text-align: right;
}

.setArea .inner ul li.contents input[type=text] {
   width: 90px;
   height: 42px;
   line-height: 42px;
   padding-left: 10px;
   font-size: 1.4rem;
   font-weight: 600;
   border: 1px solid #d1d1d1;
   vertical-align: baseline;
   border-radius: 4px;
}

.setArea .inner ul li.contents .tempmark {
   display: inline-block;
   min-width: 32px;
}

.setArea .inner ul li .statusBar {
   position: relative;
   float: left;
   width: 100%;
   text-align: center;
   height: 20px;
}

.setArea .inner ul li .statusBar .sampleBar {
   width: 100%;
}

.setArea .inner ul li.line {
   border-bottom: 1px solid #f6f6f6;
   padding: 10px 0
}

.setArea .inner ul li.line:first-child {
   padding-top: 0
}

.setArea .inner ul li.line:last-child {
   border-bottom: 0;
   padding-bottom: 0;
}

.setArea .inner ul li.line h4 {
   margin-top: 7px;
}


/* 원격제어 */
.controlArea .inner {
   width: 100%;
   height: auto;
   overflow: hidden;
   border: 1px solid #dfe9f0;
   margin-top: 15px;
}

.controlArea .inner h4 {
   background: #f5f8fa;
   padding: 10px;
   text-align: center;
}

.controlArea .inner ul {
   width: 100%;
   padding: 0 5%;
   overflow: hidden;
   border-top: 1px solid #dfe9f0;
}

.controlArea .inner ul li {
   width: 100%;
   padding: 8px 0;
   overflow: hidden;
}

/* 버튼 3개 각각 */
.controlArea .inner ul.allSet li a {
   margin-top: 5px
}

.controlArea .inner ul.allSet li a:first-child {
   margin-top: 0;
}

.controlBtn a {
   width: 100%;
   min-width: 70px;
   height: 45px;
   line-height: 45px;
   color: #fff;
   font-weight: 400;
   text-align: center;
   display: block;
   border-radius: 12px;
}

.controlBtn.ty2 a {
   width: 100%;
   width: 75px;
   height: 43px;
   line-height: 43px;
   color: #fff;
   font-weight: 400;
   text-align: center;
   display: block;
   border-radius: 50px;
}

.controlBtn a.openBtn {
   border: 1px solid #d1d1d1;
   background: #fff;
   color: #333
   /* background:#ff6055 */
}

.controlBtn a.SaveBtn {
   background: #ff6055
}

.controlBtn a.closeBtn {
   background: #8b8b8b;
}

.controlBtn a.stopBtn {
   background: #ff6055
   /* background:#bcbcbc */
}

.controlBtn a.on {
   background: #ff6055
}

.controlBtn a.off {
   background: #bcbcbc
}

.controlBtn a.loginBtn {
   background: #3760c2
}

.controlBtn a.auto {
   background: #49bffc
}

/* a:focus {background:#f44336; box-shadow: 2px 2px 10px 4px #f44336 inset; color:#fff;} */

/* .controlArea ul li a:focus {background:#4f86db; box-shadow: 2px 2px 10px 4px #4372bb inset; color:#fff;}
.controlArea ul li:nth-child(2) {border-right:1px solid #acacac;}
.controlArea ul li:last-child {border-right:1px solid #acacac;}
 */
.timeSet input[type=text] {
   float: left;
   width: 70px;
   border-radius: 12px;
   height: 46px;
   margin-right: 5px;
}

.timeSet select {
   width: 75px;
   border-radius: 12px;
}

.timeSet input[type=button] {
   width: 20%;
   min-width: auto;
   height: 50px;
   line-height: 50px;
   background: #333;
   color: #fff;
   border-radius: 0;
}

.timeSet .controlBtn {
   float: right;
   width: 31%
}

.timeSet .controlBtn a {
   height: 45px;
   line-height: 45px;
}


/* 그래프 */
.search_area {
   position: relative;
   width: 100%;
}

.search_area .setHouse {
   position: relative;
   float: left;
   width: 35%;
   height: 45px;
   line-height: 45px;
   padding: 0 10px;
   border-radius: 0;
}

.search_area input[type=text] {
   float: left;
   width: 45%;
   border-left: 0;
   border-radius: 0;
}

.search_area input[type=button] {
   width: 20%;
   min-width: auto;
   height: 45px;
   line-height: 45px;
   background: #333;
   color: #fff;
   border-radius: 0;
}

.search_area select:nth-child(2) {
   border-left: 0;
}

/* 비밀번호 변경 */
.pwd-area {
   margin-top: 1rem;
}
.pwd-area li {
   display: flex;
   flex-direction: column;
   padding: .8rem 0;
}
.pwd-area li label {
   font-size: 1rem;
   margin-bottom: .25rem;
}
.pwd-area li input {
   border: 1px solid #dfe2e6;
   height: 46px;
   padding: 6px 12px;
   border-radius: .4rem;
}

.stk {
   position: relative;
   font-size: 1.6rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.stk .txt {font-size: .925rem;}

/* .stk::before {
   font-family: 'remixicon';
   content: "\ec8c";
   color: #437CFF;
}
 .stk.warn::before {
   font-family: 'remixicon';
   content: "\ec93";
   color: #E83425;
 } */

.comm.house .ripe-area {
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid #f1f4f7;
   margin-bottom: 0;
   margin-top: 0;
   padding: 1.3rem 0;
   background: #fff;
   box-shadow: none;
}
.comm.house .ripe-area .cont li {
   background: #f9f9f9;
}
.comm.house .ripe-area:last-child {
   border-bottom: 0;
}
.comm.house .ripe-area.first {
   padding-top: .5rem;
}

.notice-board {

}
.notice-board li {
   border-bottom: 1px solid #efeff0;
   display: flex;
   flex-direction: column;
   padding: 1.2rem 0;
}
.notice-board li:last-child {
   border-bottom: none;
}
.notice-board li .tit {
   display: flex;
}
.notice-board li .tit .txt {
   /* font-size: 1.05rem; */
   line-height: 1.438rem;
   font-weight: 500;
}
.notice-board li .tit .num {
   min-width: 30px;
   font-weight: 600;
   margin-top: 1px;
}
.notice-board li .date {
   margin-top: .4rem;
   color: #8E8E8E;
   margin-left: 30px;
}

.notice_board_view {

}
.notice_board_view .subject_wrap {
   padding-bottom: 1.25rem;
}
.notice_board_view .subject_wrap .tit {
   font-size: 1.06rem;
   line-height: 1.438rem;
   font-weight: 500;
}
.notice_board_view .subject_wrap .date {
   margin-top: .3rem;
   color: #8E8E8E;
}
.notice_board_view .cont_wrap {
   padding: 1.25rem 0;
   line-height: 1.55rem;
   border-top: 1px solid #efeff0;
   border-bottom: 1px solid #efeff0;
}
.notice_board_view .add_file_list {
   padding: 1.25rem 0;
}
.notice_board_view .add_file_list .tit {
   color: #8E8E8E;
   margin-bottom: .5rem;
   font-weight: 500;
}
.notice_board_view .add_file_list .f_list {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
}
.notice_board_view .add_file_list .f_list a {
   padding: 0.35rem 0;
   /* font-weight: 500; */
}
.notice_board_view .add_file_list .f_list a .filesize{
   letter-spacing: -1px;
   color: #8E8E8E;
}


.pop_con.report .h4_tit {
   background: #016bef;
   border-radius: 0.625rem 0.625rem 0 0;
   padding-bottom: 1rem !important;
   color: #fff;
   text-align: center;
}
.pop_con.report dl.list {
   border-bottom: 1px solid #efeff0;
   margin-top: 13px;
   padding-bottom: 13px;
}
.pop_con.report dl.list:first-child {
   margin-top: 0;
}
.pop_con.report dl.list:last-child {
   padding-bottom: 0;
   border-bottom: 0;
}
.pop_con.report dl.list dt {
   font-size: 17px;
   font-weight: bold;
}
.pop_con.report dl.list dd {
   line-height: 24px;
}

/* 알람설정 */
.setting_area {

}
.setting_area .item {
   border-top: 7px solid #F4F4F4;
   padding: 0 1.25rem 1.25rem;
}
.setting_area .item:first-child {
   border-top: 0;
}
.setting_area .item:last-child {
   border-bottom: 8px solid #F4F4F4;
}
.setting_area .item .tit {
   color: #282828;
   font-weight: 600;
   margin-bottom: .8rem;
}
.setting_area .item .cnt_box {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
}
.setting_area .item .cnt_box .cnt_left {
   color: #747474;
   letter-spacing: -1px;
}
.setting_area .item .cnt_box .cnt_right {

}

.set-input {
   width: 50px;
   height: 36px;
   padding: 6px 12px;
   background: #F4F4F4;
   border-radius: .3rem;
   outline: none;
   -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
   -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   position: relative;
   text-align: left;
}

.boardFaq {
   position: relative;
   margin: 0 auto;
}

.boardFaq ul {
   position: relative;
   border-top: 1px solid;
}

.boardFaq ul li {
   position: relative;
   border-bottom: 1px solid #efeff0;
}

.boardFaq ul li .question {
   position: relative;
   color: #333;
   padding: 1.2rem 0;
   cursor: pointer;
   outline: none;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
}

.boardFaq ul li .question .ico_q {
   font-style: normal;
   font-weight: 700;
   color: #C62C4E;
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 5px;
}

.boardFaq ul li .question .tit {
   line-height: 1.438rem;
   font-weight: 500;
}

.boardFaq ul li .answer {
   display: none;
   padding: 1.25rem;
   line-height: 1.6rem;
   background: #F4F4F4;
   letter-spacing: -1px;
}

/* 화살표를 background images로 했을때 */
.boardFaq ul li .question::after {
   background: url('/images/ico_faq_arr.svg') no-repeat;
   width: 15px;
   height: 11px;
   background-size: 15px auto;
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 20px;
   transition: all 300ms;
}

.boardFaq ul li .question.ui-state-active::after {
   transform: rotate(180deg);
   top: 46%;
}

.board_total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.625rem;
}
.board_total .board_total_left {
   color: #747474;
}
.board_total .board_total_left strong {
   color: #27B06E;
   font-weight: 500;
}
.board_total .board_total_right .def-btn {
   font-size: .85rem;
}

.checkList_area {
   background-color: #fff;
   padding: 1rem 0 .4rem;
}
.checkList_area h5 {
   font-size: 1.15rem;
   font-weight: 600;
   margin-bottom: .75rem;
}
.checkList {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
   flex-wrap: wrap;
   margin-left: -5px;
}
.checkList li {
   border:0.094rem solid #dfe2e6;
   padding: 0 10px;
   vertical-align:middle;
   height: 38px;
   line-height: 36px;
   float:left;
   border-radius: .25rem;
   background: #fff;
   color: #888;
   font-weight: 500;
   width: auto;
   text-align: center;
   margin-bottom: 5px;
   margin-left: 5px;
}

.checkList li.on {
   border:0.094rem solid #27B06E;
   background:#fff;
   color: #27B06E;
}

#wrap.colorwhite {}
#wrap.colorwhite #weather {
   background-color: #01A884;
   /* background:linear-gradient(140deg, #27B06E 50%, #62d9a0);
   background: linear-gradient(249deg, #27b06e, #19806d); */
}
#wrap.colorwhite #weather .main_info,
#wrap.colorwhite #weather .loca_info {color:#fff}
#wrap.colorwhite #weather .sub_info_aor ul li::before {display: none;}

#wrap.colorblack {}
#wrap.colorblack #user_wrap {background-color: #27B06E; color: #fff;}
#wrap.colorblack #weather .sub_info_aor ul li {border: 1px solid #f4f4f4;}


/* 메인자료실 */
.mainboard_area {background: transparent;}
.mainboard_area .notice-board li {border-radius: .625rem;
   padding: 1.25rem;margin-bottom: .75rem;background-color: #fff;border-bottom: 0;}
/* .mainboard_area .notice-board li .tit .txt {font-size: 1.05rem;} */


/* S : slick이 추가하는 요소들을 무시하기 위한 스타일 */
.stage .slider-nav .slick-list,
.stage .slider-nav .slick-track {
   display: flex !important; /* 요소들을 flex 컨테이너로 설정 */
}

.stage .slider-nav .slick-slide {
   flex: 1 1 50%; /* 각 슬라이드가 50%의 너비를 가짐 */
   max-width: 50%;
}

.stage .slider-nav .slick-list,
.stage .slider-nav .slick-track {
   width: 100%;
   padding: 0;
}

.stage .slider-nav .slick-slide.slick-current .tab_dep1,
.stage .slider-nav .slick-slide.slick-active .tab_dep1 {
   color: #282828 !important;
   border-bottom: none; /* slick-current와 slick-active에서 밑줄을 제거 */
}
/* E : slick이 추가하는 요소들을 무시하기 위한 스타일 */

#total-elements {
   color: #27B06E;
}
.down_btn_ex {

}
.down_btn_ex button {
   display: flex;
   align-items: center;
   background: #f4f4f4;
   border: 1px solid #dfdede;
   font-weight: 600;
   padding: 5px 6px;
   border-radius: .325rem;
   border: 1px solid rgba(0, 167, 140, .12);
   background-color: rgba(0, 167, 140, .04);

}

.down_btn_ex button .txt{
   padding-left: 4px;
   font-weight: 500;
   letter-spacing: -.5px;
}
.ico_down_excel {
   display: inline-block;
   width: 15px;
   height: 15px;
   background: url('/images/ico_excel.png') no-repeat center;
   background: url('/images/file_type_excel_icon.svg') no-repeat center;
}

.mypage {
   padding:0 1.25rem 1.25rem;
}
.mypage .item {
   border-top: .115rem solid #F4F4F4;
   padding: 1rem 0;
}
.mypage .item:first-child {
   border-top: 0;
}
.mypage .item .tit {
   color: #747474;
   font-weight: 500;
   margin-bottom: .5rem;
   font-size: .9rem;
}
.mypage .item .txt {
   color: #282828;
   font-weight: 600;
}
.mypage .item .cnt_box {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
}
.mypage .item input {
   width: 100%;
   height: 45px;
}
.sel_ty2 {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
}
.sel_ty2 button {
   width:48%;
}
.mb5 {margin-bottom: 5px !important;}


.bnr {width:100%; margin:0 auto; padding:0 1rem 0 1rem}
.bnr a {
   display: block;
   background-color: #528EEF;
   border-radius: .625rem;
   padding: .6rem 1.25rem 0 1.25rem;
}
.bnr a img {width: -webkit-fill-available}


.ledger_title {
   margin: 26px 0 10px;
   letter-spacing: -1px;
}
.ledger_list{

}

.ledger_list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.ledger_list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem;
   background: #F4F4F4;
   border-bottom: 1px solid #eee;
   gap: 12px;
}
.ledger_list li:first-child {
   border-radius: .625rem .625rem 0 0;
}
.ledger_list li:last-child {
   border-radius: 0 0 .625rem .625rem ;
}
.ledger_list li:only-child {
   border-radius: .625rem;
}

/* 아이콘 */
.ledger_list .icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 17px;
   flex-shrink: 0;
   color: white;
}

/* 텍스트 부분 */
.ledger_list .text {
   display: flex;
   flex-direction: column;
   flex: 1; /* 남는 공간 차지 */
}

.ledger_list .title {
   font-weight: 600;
   font-size: 16px;
   color: #222;
}

.ledger_list .category {
   font-size: 15px;
   color: #777;
}

/* 금액 */
.ledger_list .cost {
   font-weight: 600;
   font-size: 16px;
   white-space: nowrap; /* 줄바꿈 방지 */
   letter-spacing: -.5px;
}

#weather.ledgen{
   margin-top:0.75rem;
   padding:.5rem 1rem;
   /* background-color:#E5F4ED; */
   border: 2px solid #27b06e;
}
#weather.ledgen .sub_info_aor{
   margin-top:0
}
.ledger_list .positive,
.positive { color: #2055D2 !important; }
.ledger_list .negative,
.negative { color: #DA1E3A !important; }

.ledger_list .orange { background: #ff8a5c; }
.ledger_list .green { background: #66d2a5; }
.ledger_list .blue { background: #6da7ff; }
.ledger_list .gray { background: #ccc; }

/* 플로팅 버튼 */
.fab {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 55px;
   height: 55px;
   background: #01A884;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 32px;
   color: white;
   text-decoration: none;
   box-shadow: 0 4px 8px rgba(0,0,0,0.3);
   transition: background 0.2s;
}

/* 경영장부 버튼 */
.btn-group {
   display: flex;      /* 버튼들을 가로로 배치 */
   gap: 10px;          /* 버튼 사이 간격 */
   background: #F4F4F4;
   padding: 6px;
   border-radius: 100px;
}

.btn-check {
   display: none;
}

.btn-check + label {
   flex: 1;            /* 버튼 너비를 균등하게 */
   padding: 10px 0;
   text-align: center;
   border-radius: 20px;
   cursor: pointer;
   background: transparent;
   color: #9f9f9f;
   transition: all 0.2s;
   box-sizing: border-box;
   font-weight: 600;
}

.btn-check:checked + label {
   background: #27B06E;
   color: white;
}

#weather.ledgen .sub_info_aor ul {
   flex-direction: column;
   align-items: stretch;
}
#weather.ledgen .sub_info_aor ul li {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   padding: 14px 0;
   border-bottom: 1px solid #eee;
}
#weather.ledgen .sub_info_aor ul li:last-child {
   border-bottom: none;
}

#weather.ledgen .sub_info_aor ul li::after {display: none;}
#weather.ledgen .sub_info_aor ul li .data,
#weather.ledgen .sub_info_aor ul li .name { color: #222}
#weather.ledgen .sub_info_aor ul li .data {
   font-size: 1.1rem;
   font-weight: 700;
}
#weather.ledgen .sub_info_aor ul li .name {
   font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: -1px;
}
#weather.ledgen .sub_info_aor ul li .gm { margin-left: 2px;}
#weather.ledgen .sub_info_aor ul li span {display: inline-block;}
.pd-t-125 {padding-top: 1.25rem;}

/* S: checkList - checkbox type */
.checkList input[type="checkbox"] {
   display: none;  /* 기본 체크박스 숨김 */
}

.checkList li.checkbox-item {
   border: none;
   padding: 0;
}

.checkList li.checkbox-item label {
   display: inline-block;
   border: 0.094rem solid #dfe2e6;
   padding: 0 10px;
   height: 38px;
   line-height: 36px;
   border-radius: .25rem;
   background: #fff;
   color: #888;
   font-weight: 500;
   cursor: pointer;
   margin-left: 5px;
   margin-bottom: 5px;
}

/* checkbox:checked + label */
.checkList li.checkbox-item input:checked + label {
   border: 0.094rem solid #27B06E;
   background: #fff;
   color: #27B06E;
}

/* E: checkList - checkbox type */

.btn-wrap {
   display: flex;
   width: 100%;
   gap: 10px; /* 버튼 사이 간격 */
}

.btn-wrap .btn {
   flex: 1; /* 기본적으로는 동일한 비율 */
}

/* 버튼이 2개일 때 비율 제어 */
.btn-wrap .btn-1 {
   flex: 1;  /* 1 */
}
.btn-wrap .btn-2 {
   flex: 2;  /* 2 → 결과적으로 1:2 */
}