@charset "utf-8";
@import url('font.css');
@import url('baseM.css');

#wrap::before{ content: ''; position: fixed; background: transparent; top:0; left: 0; bottom: 0; right: 0; z-index:10; transition: background .3s; z-index:-1;}
#wrap.gnbNavi_active::before{ content: ''; background: rgba(0,0,0,0.8); z-index:13;}
#wrap .ci{width:88px; height:32px; margin:10px; position: absolute; display:block;}
#wrap .sub{ display: inline-block;  font-size: 1.07em; font-weight: 600; margin:15px;}
#wrap .subHeader{text-align:center; }
#realHeader{ background: #fff; border-top: 3px solid #012854; }
#realHeader .menu_open, .menu_close{ display: block; width: 40px; height: 40px; background: #1f8ce6; position: absolute; right: 0.5rem; top: 10px; font-size: 0}
#realHeader .menu_open:before, .menu_close:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat 0 0;  width: 18px; height: 16px; margin: 12px auto 0;}
.menu_close:before{ background-position: -18px 0}
.gnbNavi{ display: block; position:fixed; bottom:0; top:0; right:-90%; padding-left:0; z-index:555; width: 90%; background: #123962; border-top:0; overflow-y:auto; transition:right .3s;}
.gnbNavi.active{ display: block; right: 0}
.gnbNavi .gnb_tp{ background: #fff; padding: 10px 0 9px 15px;}
.gnbNavi .gnb_tp>a{ display: inline-block; line-height: 40px; padding: 0 15px; color: #fff; font-size: 1em; background: #78c753}
.gnbNavi .gnb_tp>a.btnLogout{ background: #1f8ce6}
.accordion>ul> li>a{ display: block; background: #123962; border-bottom: 1px solid #899cb1; color: rgba(255,255,255,0.8); padding: 15px; font-size: 1.25em; position: relative; font-weight: 500}
.accordion>ul>li>a:after{ content: '+'; display: block; width: 25px; height: 25px; position: absolute; right: 0.5rem; top: 15px; text-align: center; line-height:23px; font-weight: 600}
.accordion>ul>li.active>a:after{ content: '\2012'; color: #fff; ; font-weight: 600}
.accordion>ul>li.active>a{ color: #fff}
.accordion>ul>li>ul{ display:none; background: #1f8ce6; padding: 8px 0;}
.accordion li li a{ display: block; padding: 0 0 0 25px; line-height: 35px; font-size: 1.085em; color: #fff; position: relative}
.accordion li li a:before{ content: ''; display: inline-block; width: 5px; height: 1px; background: #fff; position: absolute; left: 15px; top: 18px}
.accordion>ul>li.active>ul{ display:block;}
.accordion>a{ display: block; background: #e4e4e4; text-align: center; font-size: 1.18em; color: #323232; border-top: 1px solid #ccc; padding: 12px 0; font-weight: 400;}
.accordion>a:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -33px -17px; width: 26px; height: 26px; vertical-align: middle; margin-right: 8px}

#container h1{ background: #123962; text-align: center; font-size: 1.4em; font-weight: 400; color: #fff; padding: 12px 0; position: relative}
#container h1 strong{ display: block; position: absolute; right: 0.8rem; top: 0.8rem; font-size: 0.8em; font-weight: 300; color: #1f8ce6}
.content{ padding: 0.5rem 0.5rem 2rem}
.sch_box label{ display: inline-block; line-height: 40px; color: #898989; font-weight: 500; font-size: 1rem; margin: 0 0 0.3rem}
#container .inputData{ background: #fff; border: 1px solid #a2a2a2; padding: 5px; margin: 0 0 0.3rem; height: 32px}
#container .inputData.hasDate{ background: #f5f5f5 url(../images/common/calendar.png) no-repeat 95% 50%; padding-right: 40px}
.sch_box .w50{ width: calc(50% - 8px) !important}
.sch_box .w70{ width: calc(70% - 4px) !important}
.btn_sch{ display: inline-block; background: #1f8ce6; text-align: center; font-size: 1.05rem; font-weight: 500; color: #fff; line-height: 42px; margin: 5px 0}
.count{ margin: 1.5rem 0 0.5rem;}
.board_list{ border-top: 2px solid #323232;}
.board_list ul li { display: block; border-bottom: 1px solid #a8a8a8; background: #fff; padding: 0  0.5rem 0.5rem}
.board_list ul li:nth-child(even) { background: #fff}
.board_list ul li .subj{ display: block; font-size: 1.05rem; font-weight: 400; color: #323232; line-height: 1.3; padding: 0.5rem 0}
.board_list ul li .date{ display: block; font-size: 1rem; color: #777}
.board_list.detail .title{ text-align: center; font-size: 1.2rem; font-weight: 400; padding: 0.8rem 0; line-height: 1.5}
.board_list.detail .date{ display: block; background: #f5f5f5; color: #323232; font-size: 1rem; padding: 0.3rem 0.5rem; text-align: center}
.board_list.detail .cont{ padding: 1rem 0 2rem; font-size: 1rem; color: #323232}
.tbl{ border-top: 2px solid #236dc7;}
.tbl table{ width: 100%; border-collapse: collapse;}
.tbl table thead th, .tbl table tbody th, .tbl table tbody td{ border: 1px solid #ccc; padding: 0.5rem 0.3rem; text-align: center; word-break:break-all; box-sizing: border-box; border-collapse: collapse;}
.tbl table thead th, .tbl table tbody th{ background: #ededed; border-top: 0}
.tbl table tbody th label{ display: inline-block; font-weight: 400; font-size: 1rem}
.tbl.detail table tbody td{ text-align: left}
#container .tbl.detail table tbody td .inputData, #container .tbl.detail table tbody td .inputData.hasDate{ margin: 0}

/* 페이징 */
.paging{ text-align: center; margin: 20px 0 50px;}
.paging a, .paging span{ display: inline-block; box-sizing: border-box}
.paging span{ margin: 0 0 3px}
.paging span a{ font-size: 1rem; border: solid 1px #b7b7b7; color: #323232; width: 33px; height: 33px; margin: 0 1px;  line-height: 33px;}
.paging span.on a{ font-weight: bold; border: 1px solid #1f8ce6; background: #1f8ce6; color: #fff}
.paging .first, .paging .prev, .paging .next, .paging .last{ width: 25px; height: 33px; font-size: 0; line-height: 0; padding: 0; vertical-align: top;}
.paging>a{ border: solid 1px #b7b7b7; vertical-align: middle;}
.paging>a:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat; width: 11px; height: 11px; margin: 0 auto; margin-top: 10px}
.paging>a.prev{ margin-right: 10px}
.paging>a.next{ margin-left: 10px}
.paging>a.first:before{ background-position: -38px 0}
.paging>a.prev:before{ background-position: -51px 0; width: 6px;}
.paging>a.next:before{ background-position: -59px 0; width: 6px;}
.paging>a.last:before{ background-position: -67px 0}

/* 버튼 스타일 */
.btnArea{ margin: 20px 0 10px; text-align: center}
.btnArea:after{ content: ''; display: block; clear: both}
.button,
.button *{ position:relative; margin:0 2px; padding:0; display:inline-block; text-decoration:none !important; border:0; white-space:nowrap; vertical-align:top; overflow:visible; cursor: pointer; color: #fff; background: #23507b;  box-sizing: border-box;}
.button.small{ height:32px; line-height:32px; font-size: 0.95em; padding:0 10px; font-weight: 300; margin:5px;}
.button.medium{ height:42px; line-height:42px; font-size: 1.05em; padding:0 20px; font-weight: 400;}
.bgGray{ background: #dadada; color: #323232}
.bgWhite{ background: #fff; color: #323232; border: 1px solid #a2a2a2}
.bgBlue{ background: #1f8ce6;}
.bgGreen{ background: #78c753;}
.prev:before, .next:after{ content: '\276E'; display: inline-block; margin: 0 0.5rem 0 -0.5rem}
.next:after{ content: '\276F'; margin: 0 -0.5rem 0 0.5rem}

.move_top{ position: fixed; right: 0.8rem; bottom: 1.8rem; transition: all .2s; -webkit-transition: all .2s; opacity: 0; background: rgba(18,57,98,.8); width: 50px; color: #fff;  line-height: 40px; width: 45px; height: 40px; text-align: center; border: 1px solid #fff; opacity: 0}
.move_top.on{ opacity: 1;  z-index: 300;}
#footer{ border-top: 1px solid #d4d4d4; text-align: center; padding: 0 0 20px}
#footer>a{ display: inline-block; padding: 10px; color: #323232; font-size: 1.05em; font-weight: 400}
#footer>p{ font-size: 1em; color: #9b9b9b; text-transform: uppercase;}

/* 로그인 */
.login{ background: #ebeeef;}
.login h1{ margin: 2rem 0 1rem; background: url(../images/common/ci.png) no-repeat 50% 0 / 125px auto; padding-top: 40px; font-size: 1.6rem; font-weight: 500; text-align: center}
.login dl{ margin: 0 auto; width: 80%}
.login dl dd{ margin-bottom: 3px;}
.login dl dd input{ border: 1px solid #c2c2c2; border-radius: 8px; padding: 0 20px; height: 50px; line-height: 50px; width: 100%}
.login .formS{ margin: 0 0.5rem; border-bottom: 1px solid #b8baba; padding: 0.8rem 0 1rem; text-align: center}
.login .formS .formLabel{ display: inline-block}
.login .formS .formLabel span{ display: inline-block; margin: 0 0.5rem; line-height: 30px; position: relative; font-size: 1rem; padding-left: 28px}
.login .formS .formLabel input{ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: visible;}
.login .formS .formLabel span:before{ content: ''; display: block; position: absolute; left: 0; top: 3px; background: url(../images/common/check.png) no-repeat 0 0; width: 24px; height: 24px; transition: all .2s; -webkit-transition: all .2s;}
.login .formS .formLabel input:checked+span{ font-weight: 500}
.login .formS .formLabel input:checked+span:before{ background-position: 0 -24px}
.login .btnLogin{ display: block; width: 80%; margin: 0.8rem auto 0; line-height: 60px; font-size: 1.1rem; font-weight: 400}

/* 메인 */
.main{ background: #ebeeef}
.mainMenu>ul{ background: #123962;}
.mainMenu>ul:after, .poultryMenu>ul:after, .mainBanner:after{ content: ''; display: block; clear: both;}
.mainMenu>ul>li{ float: left; width: 25%;}
.mainMenu>ul>li a{ display: block; text-align: center; font-size: 1.1rem; color: rgba(255,255,255,.6);font-weight: 500; line-height: 50px; position: relative}
.mainMenu>ul>li.ui-state-active a{ color: #fff}
.mainMenu>ul>li.ui-state-active a:after{ content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #1f8ce6}
.poultryMenu>ul{ text-align: center}
.poultryMenu>ul li{ display: inline-block; position: relative}
.poultryMenu>ul li:before{ content: ''; display: block; width: 1px; height: 10px; background: #b5b5b5; position: absolute; left: 0; top: 18px}
.poultryMenu>ul li:first-child:before{ width: 0}
.poultryMenu>ul li a{ display: block; line-height: 45px; font-size: 1.08rem; padding: 0 1rem;}
.poultryMenu>ul li.ui-state-active a{ font-weight: 500; color: #1f8ce6}
.iconMenu{ padding: 1rem 0 0.7rem; text-align: center}
.poultryMenu .iconMenu{ padding-top: 0}
.iconMenu li{ display: inline-block; margin: 0 0 10px; vertical-align: top;}
.iconMenu li a{ display: block; font-size: 1.02rem; color: #000; width: 85px; text-align: center; line-height: 1.2; word-break: keep-all; font-weight: 400}
.iconMenu li i{ display: block; width: 80px; height: 70px; box-sizing: border-box; border-radius: 8px; border: 2px solid #d4d4d4; background: #fff; margin: 0 auto 5px; position: relative}
.iconMenu li:first-child i{ background: #78c753; border-color: #78c753}
.iconMenu li i:before{ content: ''; display: block; background: url(../images/common/menuIcon.png) no-repeat 0 0; background-size: auto 85px; height: 40px; width: 30px; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: 12px;}
.mainNoti{ background: #d0d0d0; position: relative; padding: 0 1rem 0 2.5rem; font-size: 1rem}
.mainNoti:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -33px -17px; width: 26px; height: 26px; position: absolute; left: 0.5rem; top: 10px}
.mainNoti a{ display: block;  line-height: 45px; width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400}
.mainNoti span{ display: block; position: absolute; right: 1rem; top: 0; line-height: 45px; color: rgba(23,32,46,.6)}
.mainBanner{ padding: 0.8rem 0.1rem 0.5rem}
.mainBanner>a{ float: left; display: block; margin: 0 3px 5px; background: #fff; border: 1px solid #d8d8d8; line-height: 1.4; padding: 15px 10px 13px 50px; width: 50%; box-sizing: border-box; width: calc(50% - 6px); position: relative}
.mainBanner>a:before{ content: ''; display: block; position: absolute; left: 10px; top: 12px; width: 26px; height: 26px; background: url(../images/common/mainBanner.png) no-repeat; background-size: auto 26px;}
.mainBanner>a:nth-child(2):before{ background-position: -27px 0; width: 34px}
.mainBanner>a:nth-child(3):before{ background-position: -62px 0; width: 25px}
.mainBanner>a:nth-child(4):before{ background-position: -91px 0; width: 30px}

/* 한우일 경우 */
#menuCow .iconMenu li.mn1 i:before{ background-position: -388px -45px; width: 38px}/* 기록현황 */
#menuCow .iconMenu li.mn2 i:before{ background-position: -343px 0; width: 43px}/* 개체정보 */
#menuCow .iconMenu li.mn3 i:before{ background-position: -429px 0; width: 34px}/*출하/판매 */
#menuCow .iconMenu li.mn4 i:before{ background-position: -302px 0; width: 38px}/* 등급정보 */
#menuCow .iconMenu li.mn5 i:before{ background-position: -520px 0; width: 45px}/* 번식정보 */
#menuCow .iconMenu li.mn6 i:before{ background-position: -167px 0; width: 29px}/* 경영관리 */
#menuCow .iconMenu li.mn7 i:before{ background-position: -233px 0; width: 37px}/* 나의 일정 */
#menuCow .iconMenu li.mn8 i:before{ background-position: -272px 0; width: 27px}/* 공지사항 */
#menuCow .iconMenu li.mn9 i:before{ background-position: -699px 0; width: 32px}
#menuCow .iconMenu li.mn10 i:before{ background-position: -664px 0; width: 32px}
#menuCow .iconMenu li.mn11 i:before{ background-position: -735px 0; width: 27px}

/* 젖소일 경우 */
#menuMilkCow .iconMenu li.mn1 i:before{ background-position: -388px -45px; width: 38px}/* 기록현황 */
#menuMilkCow .iconMenu li.mn2 i:before{ background-position: -343px 0; width: 43px}/* 개체정보 */
#menuMilkCow .iconMenu li.mn3 i:before{ background-position: 0 0;}/*기록관리정보 */
#menuMilkCow .iconMenu li.mn4 i:before{ background-position: -466px 0; width: 52px}/* 우유생산기록정보 */
#menuMilkCow .iconMenu li.mn5 i:before{ background-position: -568px 0; width: 50px}/* 번식정보 */
#menuMilkCow .iconMenu li.mn6 i:before{ background-position: -167px 0; width: 29px}/* 경영관리 */
#menuMilkCow .iconMenu li.mn7 i:before{ background-position: -233px 0; width: 37px}/* 나의 일정 */
#menuMilkCow .iconMenu li.mn8 i:before{ background-position: -272px 0; width: 27px}/* 공지사항 */
#menuMilkCow .iconMenu li.mn9 i:before{ background-position: -699px 0; width: 32px}
#menuMilkCow .iconMenu li.mn10 i:before{ background-position: -664px 0; width: 32px}

/* 산란계일 경우 */
#chicken1 .iconMenu li.mn1 i:before{ background-position: 0 -45px;}/*기록관리정보 */
#chicken1 .iconMenu li.mn2 i:before{ background-position: -32px 0; width: 46px}/* 출하정보 */
#chicken1 .iconMenu li.mn3 i:before{ background-position: -80px 0; width: 32px}/* 입추정보 */
#chicken1 .iconMenu li.mn4 i:before{ background-position: -116px 0; width: 48px}/* 육성관리 */
#chicken1 .iconMenu li.mn5 i:before{ background-position: -167px 0; width: 29px}/* 경영정보 */
#chicken1 .iconMenu li.mn6 i:before{ background-position: -199px 0; width: 30px}/* 산란정보 */
#chicken1 .iconMenu li.mn7 i:before{ background-position: -233px 0; width: 37px}/* 나의 일정 */
#chicken1 .iconMenu li.mn8 i:before{ background-position: -272px 0; width: 27px}/* 공지사항 */

/* 육계일 경우 */
#chicken2 .iconMenu li.mn1 i:before{ background-position: 0 -45px;}/*기록관리정보 */
#chicken2 .iconMenu li.mn2 i:before{ background-position: -32px 0; width: 46px}/* 출하정보 */
#chicken2 .iconMenu li.mn3 i:before{ background-position: -80px 0; width: 32px}/* 입추정보 */
#chicken2 .iconMenu li.mn4 i:before{ background-position: -116px 0; width: 48px}/* 사육정보 */
#chicken2 .iconMenu li.mn5 i:before{ background-position: -167px 0; width: 29px}/* 경영정보 */
#chicken2 .iconMenu li.mn7 i:before{ background-position: -233px 0; width: 37px}/* 나의 일정 */
#chicken2 .iconMenu li.mn8 i:before{ background-position: -272px 0; width: 27px}/* 공지사항 */

/* 육계일 경우 */
#duck .iconMenu li.mn1 i:before{ background-position: 0 -45px;}/*기록관리정보 */
#duck .iconMenu li.mn2 i:before{ background-position: -32px 0; width: 46px}/* 출하정보 */
#duck .iconMenu li.mn3 i:before{ background-position: -621px 0; width: 38px}/* 입추정보 */
#duck .iconMenu li.mn4 i:before{ background-position: -116px 0; width: 48px}/* 사육정보 */
#duck .iconMenu li.mn5 i:before{ background-position: -167px 0; width: 29px}/* 경영정보 */
#duck .iconMenu li.mn6 i:before{ background-position: -233px 0; width: 37px}/* 나의 일정 */
#duck .iconMenu li.mn7 i:before{ background-position: -272px 0; width: 27px}/* 공지사항 */

/* 돼지일 경우 */
#menuPig .iconMenu li.mn1 i:before{ background-position: -388px -45px; width: 38px}/* 기록현황 */
#menuPig .iconMenu li.mn2 i:before{ background-position: 0 0;}/*기록관리정보 */
#menuPig .iconMenu li.mn3 i:before{ background-position: -233px 0; width: 37px}/* 나의 일정 */
#menuPig .iconMenu li.mn4 i:before{ background-position: -272px 0; width: 27px}/* 공지사항 */

/* 2025 04 02 카드뉴스 추가 */
.cardNews{ margin: 10px 5px; border-radius: 8px; border: 1px solid #d4d4d4; background: #fff; padding: 10px;}
.cardNews > a{ display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center;}
.cardNews > a img{ max-width: 100%; width: 100%;}
.cardNews > a span{ font-size: .95rem; line-height: 1.5; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: center;}
.mainBanner{ padding-top: 0}

.board_list.cardN ul li a{ display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; padding: 10px;}
.board_list.cardN ul li a .subj, .board_list.detail.cardN .subj{ padding: 0; text-align: left; display: block; line-height: 1.6;}
.board_list.cardN ul li a .date, .board_list.detail.cardN .date{ display: block; text-align: left; width: 100%; margin: -5px 0 0;}
.board_list.cardN ul li a img {width:100%; height:100%;}

.detail.cardN{ display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; padding: 10px;}
.detail.cardN > div{ position: relative; width: 100%;}
.detail.cardN .subj{ font-size: 1.07rem; font-weight: 400;}
.detail.cardN .date{ background: #fff; text-align:center;}
.detail.cardN .cardView img{ max-width: 100%; width: 100%}
.detail.cardN .swiper-controls > div{ font-size: 0; left: -10px}
.detail.cardN .swiper-controls > div.swiper-button-next{ left: auto; right: -10px;}
.detail.cardN .swiper-button-next:after, .swiper-button-prev:after{ color: #245079; font-weight: 600;}
/* 2025 04 02 카드뉴스 추가 END */

/* 2025 05 21 */
 .cardNews{ display: flex;}
.cardNews > a{ margin: 0 5px}

.board_list.cardN ul{ display: flex; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid #a8a8a8;}
.board_list.cardN ul li{ width: 49%; padding: 0 0 0 0;}
.board_list.cardN ul li img{ max-width: 100%}
.board_list.cardN ul li a{ border-bottom: 0}

.accordion>a{ display: inline-flex; width: 50%; justify-content: center;}
.accordion>a+a{ float: right; background: #fff;}
.accordion>a+a:before{ background: url(../images/common/icon_card.png) no-repeat 0 0 / 23px 23px;}
/* 2025 05 21 End */