@charset "utf-8";

/* sub layout */
#sub-container{position: relative; display:block; width: 100%; /*padding-top: 152px;*/ padding-bottom:100px;}
#contents {position: relative; display:flex; width:100%; min-height: 700px; margin:40px 0 100px;}


@media all and (max-width:1200px) {
    #sub-container {padding-top:131px}
}
@media all and (max-width:1024px) {
    #sub-container {padding-top: 131px;}
}
@media all and (max-width:768px) {
    #sub-container{padding-bottom:50px;}
    #contents {margin:40px 0 50px;}
}

/* common */
.txtblk {font-size:1.2rem; vertical-align:super; display:inline-block; padding-left:5px;}
.tooltipped{cursor: pointer}
.material-tooltip {padding: 10px 8px; font-size:1.4rem; z-index: 2000; background-color: transparent; border-radius: 2px; color: #fff; min-height: 36px; line-height: 120%; opacity: 0; position: absolute; text-align: center; max-width: calc(100% - 4px); overflow: hidden; left: 0; top: 0; pointer-events: none; visibility: hidden; background-color: #323232;}

/* common :: box-style */
.text-box{position: relative; background:#fff; border:1px solid #ccc; padding:20px; clear:both; overflow:hidden;}
.line-box{background: #fff; border: 2px solid #222; box-shadow: 5px 5px 5px rgb(0 0 0 / 10%); border-radius:10px; padding: 30px;}
.gray-box{position: relative; padding:30px; background: #F6F6F6; border:1px solid #ccc; word-break: keep-all;}
.gray-box-st1{position: relative; padding:10px 20px; background: #F6F6F6; border:1px solid #ccc; word-break: keep-all;}
.blue-box{display:block; width:100%; border: 1px solid #3161c2; background:#e3ebfc; border-radius: 30px;}
.blue-box > p{display:inline-flex; line-height:1.5; align-content: center; padding:6px 20px 4px 43px; justify-content: center; align-items: center; color:#1b3c89; background:url('/nibr/images/ico/txt-icon.png') no-repeat 15px 50%;}
.overflow-box {height: 300px; padding: 10px; border: 1px solid #ccc; border-radius: 10px; overflow-y: auto; background-color:#fff;}

.text-box-shadow{position: relative; width:calc(100% - 7px); background-color: #fff; padding: 20px 30px; margin:0 0 20px 0;  background: #fff; border: 1px solid #ccc; border-radius: 10px;}
.text-box-shadow::after {content: ""; position: absolute; left: 7px; top: 7px; z-index: -1; width: 100%; height: 100%; background: rgba(0,0,0,0.04); border-radius: 7px;}
.text-box-shadow:before{width:0; height:0;}
.text-box-shadow.icon{display:flex; flex-shrink:0}
.text-box-shadow.icon .icon-wrap{margin-right:20px; display:flex; align-items:center; justify-content:center; width:80px; height:80px; background-color:#F6F6F6; border-radius:10px;}

.img-box {max-width:100%; text-align:center;}

@media all and (max-width:768px){
    .text-box-shadow.icon .icon-wrap{display:none;}
}

.radius10 {border-radius:10px;}
.radius20 {border-radius:20px;}

.info-box {position: relative; margin-bottom: 40px;}
.info-box .title-bg {padding: 30px 40px; background: #F6F6F6; border-radius: 10px; border:1px solid #ccc}
.info-box .title-bg-sm {padding: 20px 30px; background: #F6F6F6; border-radius: 10px; border:1px solid #ccc}
.info-box .title-bg2 {padding: 30px 40px; background: #f1f5fe; border-radius: 10px;}
.info-box .title-bg2-sm {padding: 20px; background: #f1f5fe; border-radius: 10px;}
.info-box .title-cover {display: flex; align-items: flex-start; }
.info-box .sub-h3 {margin-bottom: 20px; font-weight: 700; font-size:2.5rem; text-align: left; display:block; width:100%;}
.info-box .sub-h4 {margin-bottom: 10px; font-weight: 700; font-size:1.9rem; text-align: left; flex-basis: 1}
.info-box .sub-p2 span {display: block;}
.info-box .title-symbol {flex-shrink: 0; margin-right: 30px; border-radius: 10px; background: #fff; width:80px; height:80px; display:flex; align-items: center; justify-content: center;}
.info-box .title-symbol-sm {flex-shrink: 0; margin-right: 30px; border-radius: 10px; background: #fff; width:60px; height:60px; display:flex; align-items: center; justify-content: center;}
.info-box .title-text {font-weight:500; font-size: 1.7rem;}
.info-box .detail-txt{background-color:#fff; border-radius: 10px; padding:20px 30px; margin-top:30px; line-height:1.7}
.info-box .detail-txt p+p{margin-top:20px}

.info-box .detail-img{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:20px;}
.info-box .detail-img .img-wrap{border-radius: 10px; overflow:hidden; width:200px; height:100%;}
.info-box .detail-img .img-wrap img{width:100%}
.info-box .detail-img .txt-wrap{width: calc(100% - 230px);}
.info-line{padding-bottom: 0; margin-bottom:20px; border-bottom: 1px dashed #dbdbdb;}

@media screen and (max-width: 768px) {
    .gray-box{padding:20px;}
    .info-box {margin-bottom: 0;}
    .info-box .title-symbol {display:none;}
    .info-box .title-bg {padding: 30px; border-radius: 10px;}
    .info-box .sub-p1 span {display: inline;}
    .info-box .sub-h3 {margin-bottom: 5px; font-size:2.0rem;}
    /* .info-box .sub-h4 {font-size:1.6rem;} */
    
    .info-box .detail-img{flex-direction: column; margin-top:20px;}
    .info-box .detail-img .img-wrap{width:100%;}
    .info-box .detail-img .txt-wrap{width: 100%; padding-top:10px}
}


/* 콘텐츠 설명 영역*/
/* 사용된페이지 : 전문정보서비스 > 철새정보시스템 > 가락지발견보고
*/

.info-box.type02 {position: relative;
    background-color: var(--krds-light-color-surface-secondary-subtler);
    padding: var(--krds-pc-padding-card-small);
    border-radius: var(--krds-radius-xlarge1);
    font-size: 1.6rem;
}


/* img-box-style1 */
.img-box-style1{position:relative;margin: 50px 0; padding-top: 30px;}
.img-box-style1 .image-item{position:absolute; top:0; z-index:99; width: 480px; border-radius:10px 10px 10px 80px; background-color: #ccc; box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1); overflow: hidden;}
.img-box-style1 .info-box{min-height: 360px; background-color: #f2f2f2; width: calc(100% - 120px); margin-left: 120px; margin-top: 30px; border-radius: 20px;}
.img-box-style1 .info-box .cont-txt{padding:50px 50px 50px 410px;}
.img-box-style1 .info-box .cont-txt > .tit{display:block; position:relative; padding-bottom:30px; margin-bottom:30px; font-size:28px; line-height:38px; font-weight:700;}
.img-box-style1 .info-box .cont-txt > .tit:after{content: ""; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background-image:url(/nibr/images/sub/info-top-bg2.png); background-repeat:repeat-x; }

@media all and (max-width:1024px) {
    .img-box-style1{position:relative;margin: 50px 0; padding-top: 0;}
    .img-box-style1 .image-item{position:relative; top:0; z-index:99; width: 100%; border-radius:20px; box-shadow: none;}
    .img-box-style1 .image-item img{width:100%;}
    .img-box-style1 .info-box{min-height: auto; width: 100%; margin-left: 0; margin-top: 0; border-radius: 20px;}
    .img-box-style1 .info-box .cont-txt{margin-top:20px;}
    .img-box-style1 .info-box .cont-txt > .tit{padding-bottom:15px; margin-bottom:15px; font-size:25px; line-height:35px;}
    .img-box-style1 .info-box .cont-txt{padding:30px;}  
}

@media all and (max-width:768px) {
    .img-box-style1 .image-item{border-radius:10px;}
    .img-box-style1 .info-box{border-radius: 10px;}
    .img-box-style1 .info-box .cont-txt > .tit{padding-bottom:20px; margin-bottom:20px; font-size:18px; line-height:25px;}
}

/* img-box-style2 */
.img-box-style2{position:relative;margin: 50px 0; padding-top:40px;}
.img-box-style2 .image-item{position:absolute; top:0; z-index:99; width: 280px; border-radius:10px 10px 10px 60px; background-color: #fff; box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1); overflow: hidden;}
.img-box-style2 .info-box{position:relative; min-height:auto ; background-color: #fff; border:2px solid #222; width: calc(100% - 87px); margin-left: 80px; margin-right:7px; border-radius: 20px;}
.img-box-style2 .info-box::after {content: ""; position: absolute; left: 7px; top: 7px; z-index: -1; width: 100%; height: 100%; background: rgba(0,0,0,0.04); border-radius: 17px;}
.img-box-style2 .info-box:before{width:0; height:0;}
.img-box-style2 .info-box .cont-txt{padding:30px 30px 30px 240px;}
.img-box-style2 .info-box .cont-txt > .tit{display:block; position:relative; padding-bottom:20px; margin-bottom:20px; font-size:25px; line-height:35px; font-weight:700;}
.img-box-style2 .info-box .cont-txt > .tit:after{content: ""; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background-image:url(/nibr/images/sub/info-top-bg2.png); background-repeat:repeat-x; }

@media all and (max-width:768px) {
    .img-box-style2{position:relative; margin: 40px 0; padding-top: 0;}
    .img-box-style2 .image-item{position:relative; top:0; z-index:99; width: 100%; border-radius:10px; margin-bottom:10px; box-shadow: none;}
    .img-box-style2 .image-item img{width:100%;}
    .img-box-style2 .info-box{min-height: auto; width: 100%; margin-left: 0; margin-top: 0; border-radius: 10px;}
    .img-box-style2 .info-box .cont-txt > .tit{padding-bottom:15px; margin-bottom:15px; font-size:18px; line-height:35px;}
    .img-box-style2 .info-box .cont-txt{padding:30px;}  
}

/*** Notice_box ***/
.notice_box {display: flex; position: relative; width: 100%; flex-direction: row; border: 3px solid #D7E3FF; border-radius: 20px; margin-bottom: 40px; padding: 12px 40px; color: #222; align-items: center;}
.notice_box:after {position: absolute; content: ''; height: 30px;  width: calc(100% + 6px);  top: -3px; left: -3px; border-radius: 20px 20px 0 0; border-right: 3px solid var(--lightblue-color); border-left: 3px solid var(--lightblue-color); border-top: 3px solid var(--lightblue-color);}
.notice_box .icon {display: flex; width: 70px; height: 70px; background: url(/nibr/images/notibox_img.png) no-repeat; margin-right: 40px;}
.notice_box_txt {font-size: 0.1188rem; font-weight: 600;}

@media(max-width: 1080px) {
    .notice_box {padding: 12px 20px; }
    .notice_box .icon {margin-right: 25px; min-width: 70px;}
}

@media(max-width: 760px) {
    .notice_box {padding: 15px 20px; min-height: 80px; margin-bottom:30px;}
    .notice_box .icon {display: none;}
    .notice_box_txt {font-size: 0.1125rem;}
}

/* text */
.txt-left{text-align:left !important;}
.txt-right{text-align:right !important;}
.txt-center{text-align:center !important;}
.txt-justify{text-align:justify !important;}
.txt-ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.line-clamp2{overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.line-clamp3{overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.line-clamp4{overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 4;-webkit-box-orient: vertical;}

@media screen and (max-width: 768px) { 
	.line-clamp2{overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
	.line-clamp3{overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.line-clamp4{overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
}

/* common :: title */
.top-tit{position:relative; width:100%; overflow:hidden; padding-bottom:20px; margin-bottom:20px; border-bottom: 1px dashed #ccc;}
.top-tit p{display:block; font-size:1.8rem;}
.sc-title0{font-size: 3.4rem; display:block; font-weight: 700; color:#116a7b;}
.sc-title1{font-size: 25rem; line-height: 40px; font-weight: 700;}
.sc-title2{position:relative; font-size: 2.5rem; padding-left:25px; font-weight: 700; margin-bottom:15px; display:flex; align-items:center; min-height:20px;}
.sc-title2:after {content: ""; display: block; position:absolute; top:50%; left:0; width: 20px; height: 20px; border-radius:50px; border: 4px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(45deg, #fff, #fff), linear-gradient(45deg, #a2c642, #116a7b); transform:translateY(-50%);}
.sc-title2 .fc-red.fs16,
.sc-title2 > .fc-red.fs16 {margin-left: 0.5rem;}
.sc-title3{position:relative; font-size: 1.8rem; padding:0 18px 10px; font-weight: 700; display:block;}
.sc-title3:after {content: ""; display: block; position:absolute; top:8px; left:0; width: 12px; height: 12px; border-radius:50px; border: 3px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(45deg, #fff, #fff), linear-gradient(45deg, #a2c642, #116a7b);}
.sc-title4{display: block; font-size:2.0rem; font-weight:700; line-height: 1.4; margin-bottom: 0; color:#2946aa}
.sc-title5{display: flex; align-items: center; font-size:1.8rem; font-weight:700; line-height: 1.4; margin-bottom: 0; color:#2946aa}

@media all and (max-width:1200px) {
    .top-tit p{display:block; font-size:1.6rem;}
    .sc-title0{font-size: 2.5rem;}
    .sc-title1{font-size: 2.0rem;}
    .sc-title2{position:relative; font-size: 2.0rem; min-height:18px;}
    .sc-title2:after {top:50%;width:18px;height:18px;transform:translateY(-50%);}
    .sc-title4{font-size:1.8rem;}
}

@media all and (max-width:1024px) {
    .top-tit p{display:block; font-size:1.6rem;}
    .sc-title0{font-size: 2.0rem;}
    .sc-title1{font-size: 1.8rem;}
    .sc-title2{font-size: 1.8rem;}
}

/* common :: text tip */
.txt-tip{position:relative; padding-left:25px; padding-bottom:10px; color:#ea5449 !important;}
.txt-tip:before{content: ""; display: block; position:absolute; top:12px; left:0; width:19px; height:19px; background:url(/nibr/images/ico/sub_navi.png) 0 -451px no-repeat; transform:translate(0, -50%);}

.txt-wrap{position:relative; display:block;}
.txt-wrap > p{display:block; padding-bottom:20px; line-height:1.8}

/* common :: list */
.list-1st { margin: 10px 0; padding: 0}
.list-1st > li {position: relative; margin: 3px 0; padding-left: 20px; line-height:1.6;}
.list-1st > li:before {content: ''; background: #a0a0a0; width: 4px; height: 4px; position: absolute; top: 10px;  left: 0; display: inline-block; border-radius: 5px;}

.list-2st {margin: 15px 0; padding: 0}
.list-2st > li {position: relative; margin: 10px 0; padding-left: 20px; line-height: 1.6}
.list-2st > li:before{position: absolute; top: 9px;  left: 0; width: 3px; height: 3px; transform: rotate(45deg); border-top: 1px solid #29317A; border-right: 1px solid #29317A; background: transparent; content: ''; display: inline-block}

.list-3st {margin: 4px 0; padding: 0; }
.list-3st > li {position: relative; margin: 3px 0; padding-left: 20px;}
.list-3st > li::before {position: absolute; content: ''; top: 11px; left:0; width: 5px; height: 1px; background: #29317A; border-top: 0; border-right: 0; transform: none;}

.list-4st {margin: 4px 0; padding: 0; }
.list-4st > li {position: relative; margin: 3px 0;}

.list-num > li {margin: 7px 0; padding-left: 26px; line-height: 21px}
.list-num .badge {margin: 0 5px 0 -26px}
.list-num .badge.blue{background: #2678cc !important;}

.num-list > li{position: relative; margin: 15px 0; padding: 0; padding-left: 30px;}
.num-list > li > span {display: inline-block; position: absolute; left:0; top:3px; width: 20px; height: 20px; border-radius: 50%; background: #29317A; color: #fff; text-align: center; line-height: 20px; font-size: 1.5rem;}
.num-list > li > strong.tit{font-weight: 500}

.num-list-style2 > li{position: relative; width:calc(100% - 7px); background-color: #fff; padding: 20px 30px 20px 70px; margin:0 0 20px 0; font-weight: 500; color:#1b3c89; background: #fff; border: 1px solid #ccc; border-radius: 10px;}
.num-list-style2 > li::after {content: ""; position: absolute; left: 7px; top: 7px; z-index: -1; width: 100%; height: 100%; background: rgba(0,0,0,0.04); border-radius: 7px;}
.num-list-style2 > li:before{width:0; height:0;}
.num-list-style2 > li > span {display: inline-block; position: absolute; left:30px; top:18px; width: 30px; height: 30px; display:inline-block; border-radius: 8px;  background-image: linear-gradient(147deg, #086eb9 0%, #1b3c89 74%); margin-right:10px; font-size: 1.5rem; color:#fff; text-align:center; line-height:30px; font-weight: 500}


/* common :: Tab */
.sub-tab-wrapper{position:relative; margin-bottom:60px;}
.sub-tab-style ul{display:flex; align-items: center; justify-content: center; width:100%;}
.sub-tab-style ul li{flex: 1;font-size:1.9rem;line-height:1.5}
.sub-tab-style ul li a,
.sub-tab-style ul li button{display:table; height:60px; width:100%; border:1px solid #d9d9d9; border-left:0;}
.sub-tab-style ul li:first-child a,
.sub-tab-style ul li:first-child button { border-left:1px solid #ccc; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.sub-tab-style ul li:last-child a,
.sub-tab-style ul li:last-child button { border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.sub-tab-style ul li a:hover,
.sub-tab-style ul li button:hover{color:#000;}
.sub-tab-style ul li a em {display:table-cell; vertical-align:middle; text-align:center; font-weight: 500}
.sub-tab-style ul li button em{text-align:center; font-weight: 500}
.sub-tab-style ul li.active {border-color: #063A74;}
.sub-tab-style ul li a.active,
.sub-tab-style ul li button.active {background: #063A74; color: #fff; position: relative;}

@media all and (max-width:1024px) { 
    .sub-tab-wrapper{height:auto; margin-bottom:30px;}
    .sub-tab-style{background-color:transparent; height:auto; border-bottom:0 solid #ccc}
    .sub-tab-style ul{display:flex; flex-wrap: wrap; gap:5px; width:100%;}
    .sub-tab-style ul li{height:50px; flex: 1 1 30%; border-left:1px solid #d9d9d9}
    .sub-tab-style ul li:first-child{border-left:0}
    .sub-tab-style ul li a,
    .sub-tab-style ul li button{height:50px;}
    .sub-tab-style ul li:first-child a{border-top-left-radius: 0; border-bottom-left-radius: 0;}
    .sub-tab-style ul li:last-child a{border-top-right-radius: 0; border-bottom-right-radius: 0;}
    .sub-tab-style ul li a.active::after,
    .sub-tab-style ul li button.active::after {display: none;}
}

@media all and (max-width:768px){ 
    .sub-tab-wrapper{height:auto; margin-bottom:30px;}
    .sub-tab-style ul li{flex: 1 1 40%;}
}

/* common :: Tab2*/
.sub-tab-style2{margin-bottom:50px; height:auto; background: #fff; border:3px solid #1b3c89; border-radius:20px; padding:10px;}
.sub-tab-style2 ul{text-align: center; height: auto; display: flex; align-items: center; justify-content:center; flex-wrap: wrap;}
.sub-tab-style2 ul > li{position: relative; display:block; margin:2px 0; padding:0 5px;}
.sub-tab-style2 ul > li a{display: block; line-height:1.4; font-weight: 700; transition: 0.4s; letter-spacing: -.5px;}

.sub-tab-style2 ul > li.active a,
.sub-tab-style2 ul > li a.active,
.sub-tab-style2 ul > li:hover a,
.sub-tab-style2 ul > li:active a,
.sub-tab-style2 ul > li:focus a {text-decoration: none; color: #000;}
.sub-tab-style2 ul > li a:after {content: ""; position: absolute; top: 50%; right: 0; height: 15px; width: 1px; background: #d7d7d7; transform: translateY(-50%);}
.sub-tab-style2 ul > li:last-child a:after {content: none;}
.sub-tab-style2 ul > li a span {position: relative; display:block; height: 100%; z-index:2; padding: 10px 15px;}
.sub-tab-style2 ul > li a span:after {content: ""; position: absolute; top:0; bottom:0; left: 0%; width: 100%; height: 100%; background:#e3ebfc; opacity: 0; transition: 0.4s; border-radius:50px;}
.sub-tab-style2 ul > li.active a span:after,
.sub-tab-style2 ul > li a.active span:after,
.sub-tab-style2 ul > li:hover a span:after,
.sub-tab-style2 ul > li.focus a span:after,
.sub-tab-style2 ul > li:active a span:after {opacity: 1; z-index:-1;}

@media screen and (max-width:1024px){
    .sub-tab-style2 ul > li a {font-size: 1.5rem;}
    .sub-tab-style2 ul > li a span {padding:10px 15px;}
    .sub-tab-style2 ul > li a span:after {border-radius:10px;}
}

@media screen and (max-width:768px){
    .sub-tab-style2 {height: auto; border-radius: 0; border:0 none; padding:0;}
}

/*
.sub-tab-style2 ul > li a.active::after {display: block; content: ''; width: 35px; height: 18px; background: url('/nibr/images/sub/tab-arrow2.png') no-repeat center center; position: absolute; left: 50%; transform: translateX(-50%); bottom: -11px;}
*/

/* common :: 4depth Tab*/
.tab-4depth-group { margin-bottom:50px; height:auto; background: #fff; border:3px solid #1b3c89; border-radius:20px; padding:10px;}
.tab-4depth {text-align: center; height: auto; display: flex; align-items: center; justify-content:center; flex-wrap: wrap;}
.tab-4depth li {position: relative; display:block; margin:2px 0; padding:0 5px;}
.tab-4depth li a { display: block; line-height:1.4; font-weight: 700; transition: 0.4s; letter-spacing: -.5px; }
.tab-4depth li.active a,
.tab-4depth li a.active,
.tab-4depth li:hover a,
.tab-4depth li:active a,
.tab-4depth li:focus a {text-decoration: none; color: #000;}
.tab-4depth li a:after {content: ""; position: absolute; top: 50%; right: 0; height: 15px; width: 1px; background: #d7d7d7; transform: translateY(-50%);}
.tab-4depth li:last-child a:after {content: none;}
.tab-4depth li a span {position: relative; display:block; height: 100%; z-index:2; padding: 10px 15px;}
.tab-4depth li a span:after {content: ""; position: absolute; top:0; bottom:0; left: 0%; width: 100%; height: 100%; background:#e3ebfc; opacity: 0; transition: 0.4s; border-radius:50px;}
.tab-4depth li.active a span:after,
.tab-4depth li a.active span:after,
.tab-4depth li:hover a span:after,
.tab-4depth li.focus a span:after,
.tab-4depth li:active a span:after {opacity: 1; z-index:-1;}

@media screen and (max-width:1024px){
    .tab-4depth li a {font-size: 1.5rem;}
    .tab-4depth li a span {padding:10px 15px;}
    .tab-4depth li a span:after {border-radius:10px;}
}

@media screen and (max-width:768px){
    .tab-4depth-group {height: auto; border-radius: 0; border:0 none; padding:0;}
}

/* common :: 5depth Tab*/
.tab-5depth-group{position:relative; margin-bottom:60px;}
.tab-5depth{display:flex; align-items: center; justify-content: center; width:100%;}
.tab-5depth > li{flex: 1;}
.tab-5depth > li a{display:table; height:60px; width:100%; border:1px solid #d9d9d9; border-left:0;}
.tab-5depth > li:first-child a{ border-left:1px solid #ccc; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.tab-5depth > li:last-child a{ border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.tab-5depth > li a:hover{color:#000;}
.tab-5depth > li a span{display:table-cell; vertical-align:middle; text-align:center; font-weight: 500}
.tab-5depth > li.active {border-color: #116a7b;}
.tab-5depth > li a.active {background: #116a7b; color: #fff; position: relative;}
.tab-5depth > li a.active::after {display: block; content: ''; width: 35px; height: 18px; background: url('/nibr/images/sub/tab-arrow.png') no-repeat center center; position: absolute; left: 50%; transform: translateX(-50%); bottom: -11px;}


@media all and (max-width:1024px) { 
    .tab-5depth-group{background-color:transparent; height:auto; border-bottom:0 solid #ccc; margin-bottom:30px;}
    .tab-5depth{display:flex; flex-wrap: wrap; gap:5px; width:100%;}
    .tab-5depth > li{height:50px; flex: 1 1 30%; border-left:1px solid #d9d9d9}
    .tab-5depth > li a{height:50px;}
    .tab-5depth > li:first-child a{border-top-left-radius: 0; border-bottom-left-radius: 0;}
    .tab-5depth > li:last-child a{border-top-right-radius: 0; border-bottom-right-radius: 0;}
    .tab-5depth > li a.active::after {display: none;}
}

@media all and (max-width:768px){ 
    .tab-5depth > li{flex: 1 1 40%;}
}

/* common :: 6depth Tab*/
.tab-6depth-group{position:relative; margin-bottom:60px;}
.tab-6depth{display:flex; align-items: center; justify-content: center; width:100%;}
.tab-6depth > li{flex: 1; display: inline-block; height:50px; position: relative; margin-left: 3px; border-radius:8px; border: 1px solid #ccc; text-align: center; vertical-align: top; transition: 0.3s;}
.tab-6depth > li a:hover{color:#000;}
.tab-6depth > li a{display:table; height:50px; width:100%;}
.tab-6depth > li button{display:block;width:100%;height:50px}
.tab-6depth > li:hover{border-color:#4d4d4d}
.tab-6depth > li a span{display:table-cell; vertical-align:middle; text-align:center; font-weight: 500}
.tab-6depth > li button span{display:block;text-align:center;font-weight:500}
.tab-6depth > li.active {border-color: #116a7b;}
.tab-6depth > li a.active,
.tab-6depth > li button.active{background: #116a7b; color: #fff; position: relative;}
.tab-6depth > li a.active::after{display: block; content: ''; width: 35px; height: 18px; background: url('/nibr/images/sub/tab-arrow.png') no-repeat center center; position: absolute; left: 50%; transform: translateX(-50%); bottom: -11px;}


@media all and (max-width:1024px) { 
    .tab-6depth-group{background-color:transparent; height:auto; border-bottom:0 solid #ccc; margin-bottom:30px;}
    .tab-6depth{display:flex; flex-wrap: wrap; gap:5px; width:100%;}
    .tab-6depth > li{flex: 1 1 30%; border-left:1px solid #d9d9d9}
    .tab-6depth > li:first-child a{border-top-left-radius: 0; border-bottom-left-radius: 0;}
    .tab-6depth > li:last-child a{border-top-right-radius: 0; border-bottom-right-radius: 0;}
    .tab-6depth > li a.active::after {display: none;}
}

@media all and (max-width:768px){ 
    .tab-6depth > li{flex: 1 1 40%;}
}

/* common :: category Tab*/
.cate-tab {position: relative; height: 100px; width: 100%; background-color: #fff; border: 4px solid #1b3c89; border-radius: 20px; overflow: hidden; display: flex; justify-content: center; margin-bottom:60px;}
.cate-tab .cate-tab-item {display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% / 7); cursor: pointer; transition: 0.3s; position: relative; z-index: 2;}
.cate-tab .cate-tab-item:after {content: ""; position: absolute; top:0; left: 50%; transform: translate(-50%, 0); width: 100%; height: 100%; background: #f1f5fb; opacity: 0; transition: 0.4s; border-radius: 20px;}
.cate-tab .cate-tab-item.active:after{opacity: 1; z-index:-1; width:100%;}
.cate-tab .cate-tab-item.active .cate-tab-icon { transform: translate(0, -2px);}
.cate-tab .cate-tab-item.active .cate-tab-txt {opacity: 1; transform: translate(0, 5px);}
.cate-tab .cate-tab-icon {position: relative; display: block; color: #4298e7; transition-duration: 0.3s; line-height: 1; transform: translate(0, 5px);}
.cate-tab .cate-tab-txt {position: relative; display: block; font-weight: 700; font-size: 1.6rem; /*opacity: 0;*/ transition-duration: 0.3s; transform: translate(0, 10px); user-select: none;}
@media screen and (max-width: 1024px) {
    .cate-tab .cate-tab-txt {font-size: 1.6rem; transform: translate(0, 20px);}
}


@media screen and (max-width: 768px) {
    .cate-tab {height: auto; margin-bottom:30px;}
    .cate-tab .cate-tab-item {position: relative; min-height: 60px; padding:10px 0;} 
    .cate-tab .cate-tab-txt {font-size: 1.5rem; transform: translate(0, 10px);}
}

@media screen and (max-width: 640px) {
    .cate-tab {flex-wrap: wrap; border:0; border-radius: 0;}
    .cate-tab .cate-tab-item {position: relative; padding: 0; margin:3px; border: 2px solid #1b3c89; width:90px; height:90px; /* width: calc(100% / 5);*/}
    .cate-tab .cate-tab-item .cate-tab-icon { transform: translate(0, 8px);}
    .cate-tab .cate-tab-item.active .cate-tab-icon { transform: translate(0, 10px);}
    .cate-tab .cate-tab-txt {opacity: 1; transform: translate(0, 8px); padding: 10px 5px; font-weight: 500;}
    .cate-tab .cate-tab-item.active .cate-tab-txt {opacity: 1; transform: translate(0, 0);}
    .cate-tab .cate-tab-item:nth-child(4):before {width:0}
    .cate-tab .cate-tab-item:nth-child(7):before {width:0}
}

@media screen and (max-width: 500px) {
    .cate-tab .cate-tab-item {border-radius: 10px; height:80px; width: calc(25% - 6px);}
    .cate-tab .cate-tab-item:after {border-radius: 10px; }
}


/* common :: category Tab style2*/
.cate-tab.style2 {position: relative; height: 100px; width: 100%; background-color: #fff; border: 4px solid #1b3c89; border-radius:20px; overflow: hidden; display: flex; justify-content: center; margin-bottom:60px;}
.cate-tab.style2 .cate-tab-item {display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% / 7); cursor: pointer; transition: 0.3s; position: relative; z-index: 2;}
.cate-tab.style2 .cate-tab-item:after {content: ""; position: absolute; top:0; left: 50%; transform: translate(-50%, 0); width: 100%; height: 100%; background: #f1f5fb; opacity: 0; transition: 0.4s; border-radius: 20px;}
.cate-tab.style2 .cate-tab-item.active:after{opacity: 1; z-index:-1; width:100%;}
.cate-tab.style2 .cate-tab-item.active .cate-tab-icon {transform: translate(0, 0);}
.cate-tab.style2 .cate-tab-item.active .cate-tab-txt {opacity: 1; transform: translate(0, 5px);}
.cate-tab.style2 .cate-tab-icon {position: relative; display: block; color: #4298e7; transition-duration: 0.3s; line-height: 1; transform: translate(0, -8px);}
.cate-tab.style2 .cate-tab-txt {position: relative; display: block; font-weight: 500; text-align:center; line-height: 1; font-size: 1.4rem; /*opacity: 0;*/ transition-duration: 0.3s; transform: translate(0, 10px); user-select: none;}

@media screen and (max-width: 1024px) {
    .cate-tab.style2 {flex-wrap: wrap; height:auto; justify-content:center; border:0; border-radius: 0; margin:0 -3px 30px -3px;}
    .cate-tab.style2 .cate-tab-item {position: relative; padding: 0; margin:3px; border: 2px solid #1b3c89; width:90px; height:90px; /* width: calc(100% / 5);*/}
    .cate-tab.style2 .cate-tab-item .cate-tab-icon { transform: translate(0, -3px);}
    .cate-tab.style2 .cate-tab-item.active .cate-tab-icon { transform: translate(0, 0px);}
    .cate-tab.style2 .cate-tab-txt {opacity: 1; transform: translate(0, 3px); padding: 5px 0; font-weight: 500}
    .cate-tab.style2 .cate-tab-item.active .cate-tab-txt {opacity: 1; transform: translate(0, 0);}
}

@media screen and (max-width: 500px) {
    .cate-tab.style2 .cate-tab-item {border-radius: 10px; height:80px; width: calc(25% - 6px);}
}


/* common :: tableType */
table.txt-left td,
table td.table-tl{text-align:left !important;}
table td.table-tc{text-align:center !important;}
.td-link table td > a{color:#f99930 !important; font-weight: 500}
.table-wrap{width:100%; position:relative}
.tableType1{border-top:2px solid #000; width:100%}
.tableType1 table{width:100%; table-layout: fixed;}
.tableType1 table.txt-left td{text-align:left;}
.tableType1 td,.tableType1 th{word-wrap:break-word; word-break:break-all; word-break:keep-all; vertical-align: middle; }
.tableType1 table thead{background:#f8f8f8;}
.tableType1 table thead th{padding:10px 0; border-bottom:1px solid #ccc; border-left:1px solid #ccc; text-align:center; font-weight: 500; }
.tableType1 table thead th:first-child{border-left:0;}
.tableType1 table tbody th{border-left:1px solid #ccc; border-bottom:1px solid #ccc; padding:10px 0; word-break:keep-all; background:#f8f8f8;}
.tableType1 table tbody td{border-left:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; padding:10px 12px; word-break:keep-all}
/* 이용지식 컬럼 말줄임표 처리 */
.tableType1 table tbody td.txt-ellipsis {
	word-break: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	position: relative;
}
/* 이용지식 컬럼 커스텀 툴팁 */
.tableType1 table tbody td.usage-text-tooltip {
	cursor: help;
}
.tableType1 table tbody td.usage-text-tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 0;
	bottom: 100%;
	margin-bottom: 5px;
	padding: 8px 12px;
	background-color: #333;
	color: #fff;
	border-radius: 4px;
	font-size: 13px;
	white-space: normal;
	word-break: break-word;
	width: 300px;
	max-width: 90vw;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.1s ease;
}
.tableType1 table tbody td.usage-text-tooltip:hover::before {
	content: '';
	position: absolute;
	left: 10px;
	bottom: 100%;
	margin-bottom: -5px;
	border: 5px solid transparent;
	border-top-color: #333;
	z-index: 1001;
	pointer-events: none;
}
/* 이용지식 컬럼 최대 너비 확보 */
.tableType1 table colgroup col:last-child {
	width: auto;
	min-width: 60%;
}
/* 다른 컬럼들의 최대 너비 제한 */
.tableType1 table colgroup col:not(:last-child) {
	max-width: 10%;
}
.tableType1 table tbody td.text-center{text-align:center; padding:18px 0;}
.tableType1 table tbody td:first-child{border-left:0;}
.tableType1 table tbody th:first-child{border-left:0;}
.tableType1 table tbody td.bd-line{border-left:1px solid #ccc;}

.tableType2{border-top:2px solid #000; letter-spacing:-1px}
.tableType2 table th{padding:12px 15px; border-bottom:1px solid #dcdcdc; background:#f7f8fa; vertical-align:middle; text-align:left; word-break:keep-all}
.tableType2 table td{padding:12px 15px; border-bottom:1px solid #dcdcdc; vertical-align:middle; word-break:keep-all}

.tableType4 table tbody{border-top:1px solid #dcdcdc;}
.tableType4 table tbody th{border-bottom:1px solid #dcdcdc; border-left:1px solid #dcdcdc; background:#f7f8fa; padding:20px 50px; color:#000; font-size:1.6rem; line-height:24px;}
.tableType4 table tbody td{border-left:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; font-size:1.6rem; padding:10px 18px; line-height:18px; text-align:center;}
.tableType4 table tbody th:first-child{border-left:0;}
.tableType4 table tbody td:first-child{border-left:0;}

.tableType5{border-top:2px solid #000; letter-spacing:-1px}
.tableType5 table{table-layout:fixed; width:100%; border-right:1px solid #d9d9d9; background-color:#fff;}
.tableType5 table th{padding:5px 10px; border-bottom:1px solid #dcdcdc; border-left:1px solid #d9d9d9; background:#f7f8fa; vertical-align:middle; text-align:center; word-break:break-all}
.tableType5 table td{padding:5px 10px; border-bottom:1px solid #dcdcdc ; border-left:1px solid #d9d9d9; /* font-size:1.5rem; */ vertical-align:middle; word-break:keep-all; text-align:center;}
.tableType5 table thead th:first-child{border-right:1px solid #d9d9d9;}
.tableType5 table tbody th{text-align:center; background:#f7f8fa; border-right:1px solid #d9d9d9;}

@media screen and (max-width:1024px){
	/* common */
	.imgTmv{position: absolute; z-index: 99; top: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50px; box-shadow: -1px 1px 10px grey; align-items: center; justify-content: center; transition: all .5s ease-in-out; background:#fff url("/nibr/images/ico/mControll.png") no-repeat center center; transition: all .5s ease-in-out;  animation-name: hand-move; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
	.table-responsive {position: relative; display: block; width: 100%; overflow-x: auto;}
	.table-responsive > div.table {width: 1000px;}
	.tableType1 td,.tableType1 table tbody td:first-child{font-size:14px; -webkit-text-size-adjust: 100%;}
	.tableType1 th,.tableType1 table thead th{font-size:15px; -webkit-text-size-adjust: 100%;}
}

/* common > form */
.form-group *[class*=input-wrap] > *{margin-left:5px;}
.form-group-inline{display: flex;flex-direction: row!important; flex: 1 0 0%; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%;}
.form-group-inline *[class*=input-wrap]{display:flex; flex-grow: 1; flex-basis: 0; flex-shrink: 1; align-items: center;}
.form-group-inline *[class*=input-wrap] input[type="text"],
.form-group-inline *[class*=input-wrap] select{width:100%;}
.form-group-inline *[class*=input-wrap] .input-line-text{border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-group-inline *[class*=input-wrap].flex > :not(:first-child){ margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.form-group-inline *[class*=input-wrap] .btn {padding-right: 15px; padding-left: 15px;}

.form-group-inline2{display: flex; flex-wrap: wrap;align-items: center; width: 100%;}
.form-group-inline2 *[class*=input-wrap]{display:flex; align-items: center;}
.form-group-inline2 *[class*=input-wrap] input[type="text"],
.form-group-inline2 *[class*=input-wrap] select{width:100%;}
.form-group-inline2 *[class*=input-wrap] .input-line-text{border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-group-inline2 *[class*=input-wrap].flex > :not(:first-child){ margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.form-group-inline2 *[class*=input-wrap] .btn {padding-right: 15px; padding-left: 15px;}

@media(max-width: 1024px) {
    .form-group.w50,
    .form-group select{width: 100% !important;}
    .form-group *[class*=input-wrap] > *,
    .form-group *[class*=input-wrap] + *{margin-left:0;}
	.form-group-inline *[class*=input-wrap]{display:block; min-width:100%; margin-bottom:5px}
    .form-group-inline *[class*=input-wrap].flex{display:flex;}
	.form-group-inline .bar{display:none; font-size:0}
    .form-group .btn{width:100%; text-align:center;}
    
    .form-group-inline2 *[class*=input-wrap]{display:block; min-width:100%; margin-bottom:5px}
    .form-group-inline2 *[class*=input-wrap].flex{display:flex;}
}

/* 전문정보 버튼 */
.quick div.quick-menu {background-color: #1b3c89; height: 380px; position: fixed; top:170px; right: -320px; width: 320px; transition: all .4s;}
.quick div.quick-menu.open {right: 0;}
.quick div.quick-menu #menuToggle{position: absolute; background-color: #1b3c89; display: block; width: 70px; height: 380px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; left: -70px; top: 0;}

@media all and (max-width:1600px) {
    .quick div.quick-menu #menuToggle{width: 30px; height: 50px; border-top-left-radius:10px; border-bottom-left-radius: 10px; top:0; left: -30px;} 
    .quick div.quick-menu #menuToggle span.util-txt {text-indent: -999999; font-size:0;}
    .quick div.quick-menu #menuToggle span.material-icons-outlined{bottom: 13px; left: 5px; font-size: 2.4rem;}
    .quick div.quick-menu #menuToggle:hover span.material-icons-outlined,
    .quick div.quick-menu.open #menuToggle span.material-icons-outlined{bottom: 13px;}
    .quick div.quick-menu {border-bottom-left-radius: 30px;}
}

@media all and (max-width:1200px) {
    .quick{display:none;} 
}


.sub-container{position: relative; width: calc(100% - 300px); margin-left:60px; /*padding-top: 152px;*/ padding-bottom:100px;}
.sub-container.wide{position: relative; width: 100%; margin-left:0; max-width: 1400px; margin: 0 auto; padding: 152px 20px 100px;}

.sub-content {
    width: 100%;
}

/* 회원가입 및 로그인 페이지 컨텐츠 영역 */
.con00 {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

@media all and (max-width:1400px) {
    /* lnb */
    .sub-container{width: 100%; margin:0}
}

/* sub-title */
.sub-title { position:relative; display:block; width:100%; border-bottom:2px solid #40434b; padding-bottom:15px;  margin-bottom : 50px;}  
.sub-title h2.pageTitle {font-size: 3.0rem; font-weight: 600;}

@media all and (max-width:768px) {
    .sub-title {margin-bottom : 30px;}  
    .sub-title h2.pageTitle {font-size: 2.5rem; font-weight: 600; }
}

/* badge */
.badge-list{display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.badge{padding:3px 10px; font-size: 1.2rem; border-radius:100px; color:#fff; text-align:center;}
.badge-lg{padding:5px 10px; font-size: 1.4rem; border-radius:100px; color:#fff; min-width: 80px; display:inline-block; text-align:center;}
.badge-xlg{padding:5px 20px; font-size: 1.4rem; border-radius:100px; color:#fff; min-width: 80px; display:inline-block; text-align:center;}

/* btn more */
.btn-more{display:inline-flex; align-items:center; color:#666; background-color:#222; font-size:1.4rem; padding:7px 15px; border-radius: 30px; text-align:center; color:#fff;}
.btn-more span{transition:.3s; font-size:1.5rem; margin-left:5px; }
.btn-more:hover span{transform:rotate(180deg);}

/****** 종상세 페이지 ******/

.det-view{position:relative}

/* 종이미지 
.photo-wrap {position:relative; height:430px; width:100%; transition:0.5s ease-in-out; z-index:1}
.photo-wrap .swiper {width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.photo-wrap .swiper-slide .visual-bg01{position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-size: cover; background-position:center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center;}
*/

 /* 종이미지  */
.photo-wrap {position:relative; height: 500px; width:100%; transition:0.5s ease-in-out; z-index:1; border-top-left-radius: 20px; border-top-right-radius: 20px; border:1px solid #ccc;}
.photo-wrap .swiper {width: 100%; height: 100%; border-top-left-radius: 20px; border-top-right-radius: 20px; overflow:hidden; }
/* .photo-wrap .swiper-slide .visual-bg01{position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1;  width: 100%; height: 100%; background-color:#222; background-size:auto 70%; background-position: center; background-repeat: no-repeat; background-image:url(/nibr/images/common/noimg-b.png); display: flex; justify-content: center; align-items: center;} */
.photo-wrap .swiper-slide .visual-bg01{position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;  width: 100%; height: 100%; background-color:#222; background-size:auto 70%; background-position: center; background-repeat: no-repeat; background-image:url(/nibr/images/common/noimg-b.png);}
.photo-wrap .swiper-slide .visual-bg01 .img{height:100%;}
.photo-wrap .swiper-slide .visual-bg02{width:100%; height:auto;}

/* control */
.photo-wrap .swiper-pagination{bottom:50px; display:flex; justify-content: center;}
.photo-wrap .swiper-pagination-bullet{display:block; flex-shrink: 0; position:relative; width:8px; height:8px; margin:2px 4px !important; background-color:#fff; opacity: 0.5; border-radius:50%; transition:transform 0.2s;}
.photo-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;}
.photo-wrap .swiper-button-next:after,
.photo-wrap .swiper-button-prev:after {color: #fff;}
.photo-wrap .swiper-button-prev{left:20px}
.photo-wrap .swiper-button-next{right:20px}

@media all and (max-width:1500px) {
    .photo-wrap{width:100%;}
}

@media all and (max-width:1200px) {    
    /* main-visual > control*/
    .photo-wrap .swiper-button-next:after,
    .photo-wrap .swiper-button-prev:after {font-size: 25rem;}
}

@media all and (max-width:768px) {
    .photo-wrap {height: 300px;}
    .photo-wrap .swiper-button-prev{left:10px}
    .photo-wrap .swiper-button-next{right:10px}
}

.QR{position:absolute; right:80px; bottom:-40px; z-index:99; border:1px solid #ccc; background-color:#fff; border-radius: 20px; padding:20px; width:145px; text-align:center;}

@media all and (max-width:1200px) {    
    .QR{right:40px; border-radius: 5px; padding:10px; width:80px;}
}


/* 종 설명 */
.det-viewT{position:relative;border:1px solid #ccc; border-top:0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding:60px 30px 30px 30px;}
.det-viewT .tit-wrap{position:relative; width:100%;}
.det-viewT .btn-modify{position:absolute; right:0; top:20px}
/* .det-viewT .txtW{display:flex; align-items: center; word-break: break-all; width:calc(100% - 200px);} */
.det-viewT .txtW{display:flex; align-items: center; justify-content: space-between; word-break: break-all; width:100%;}
.det-viewT .txtW .icons_size{font-size:40px}
.det-viewT .txtW .icons_on{color:#111; }
.det-viewT .txtW .icons_off{color:#ccc; }
.det-viewT .txtW .tit {font-size: 3.5rem; font-weight: 700; line-height: 1.4; margin-bottom:30px; display:inline-block;}
.det-viewT .txtW .tit span.stxt{margin-left:10px; /* text-decoration: underline; */ font-size: 1.8rem; font-weight:400;}

.det-viewT .class-system{border-top:1px solid #222; border-bottom:1px solid #222; }
.det-viewT .class-system strong{display:inline-block; background-color:#116a7b; color:#fff; padding:5px 40px; border-bottom-right-radius: 60px; text-align:center; font-weight: 500}
.det-viewT .class-system .txt{padding: 15px 0 15px; color:#116a7b;}
.det-viewT .class-system .txt a{color:#116a7b;}
.det-viewT .gray-box{display:grid; gap:20px; grid-template-columns: 250px 1fr; background-color:#f7f7f7; border:1px solid #ccc; padding:20px; border-radius: 15px; margin-top:30px;}
/* .det-viewT .target-box{background-color:#e4032f; align-items: center; border-radius: 10px; padding:20px 18px; color:#fff; text-align:center; display:inline-block;} */
.det-viewT .target-box .txt{font-size:1.8rem; font-weight:500; letter-spacing:-0.5px;}
.det-viewT .target-box .link{ display:block; width:100%; border-top:1px solid rgba(255,255,255,0.7); padding-top:8px; margin-top:8px;}
.det-viewT .target-box .link a{color:#fff; display:flex; justify-content: center; align-items: center;}

.det-viewT .resour-list{display:grid; gap:20px; grid-template-columns:1fr 1fr 1fr 1fr; width:100%; align-items: center;justify-content: space-between;}
.det-viewT .resour-list > li{background-color:#fff; border-radius: 10px; padding:20px 18px; text-align:center; display:inline-block;}
.det-viewT .resour-list > li > .tit{font-weight:500; font-size:1.7rem; margin:0;}
.det-viewT .resour-list > li > strong{display:block; font-size:2.5rem; font-weight: 700}
.det-viewT .resour-list > li > a.btn{font-size:1.4rem; background-color:#222; color:#fff; border-radius: 30px; text-align:center; padding:8px 15px; min-height:auto;}

/* 종설명 - 슬라이드 추가 */
.det-viewT .target-box .swiper-slide{border-radius: 10px; align-items: center; width:100%; height:100%; min-height:142px; padding:20px 18px; color:#fff; text-align:center; display:inline-block;}
.det-viewT .target-box .swiper-slide.tbg00{background-color:#3a687f}
.det-viewT .target-box .swiper-slide.tbg01{background-color:#107d29}
.det-viewT .target-box .swiper-slide.tbg02{background-color:#5b99f3}
.det-viewT .target-box .swiper-slide.tbg03{background-color:#ea5449}
.det-viewT .target-box .swiper-slide.tbg04{background-color:#fd7e14}
.det-viewT .target-box .swiper-slide.tbg05{background-color:#2d316c}
.det-viewT .target-box .swiper-slide.tbg06{background-color:#1b3c89 }
.det-viewT .target-box .swiper-slide.tbg07{background-color:#030637}
.det-viewT .target-box .swiper-slide.tbg08{background-color:#3085C3}
.det-viewT .target-box .swiper-slide.tbg09{background-color:#F4CE14}
.det-viewT .target-box .swiper-slide.tbg10{background-color:#D04848}
.det-viewT .target-box .swiper-slide.tbg11{background-color:#088395}
.det-viewT .target-box .swiper-slide.tbg12{background-color:#504099}
.det-viewT .target-box .swiper-slide.tbg13{background-color:#445069}
.det-viewT .target-box .swiper-slide.tbg14{background-color:#5b99f3}
.det-viewT .target-box .swiper-slide.tbg15{background-color:#107d29}

@media all and (max-width:1200px) { 
    .det-viewT{padding:30px;}
    .det-viewT .txtW .tit {font-size: 2.5rem; margin-bottom:20px;}
}

@media all and (max-width:1024px) { 
    .det-viewT .gray-box{grid-template-columns:100%;}
}

@media all and (max-width:768px) { 
    .det-viewT .resour-list{grid-template-columns:2fr 2fr;}
    .det-viewT .txtW{width:100%;}
    .det-viewT .txtW .tit {margin-bottom:0;}
    .det-viewT .txtW .tit span.stxt{display:block; width:100%; font-size: 1.6rem; margin-left:0;}
    .det-viewT .btn-modify{position:relative; left:0; right:0; top:0; width:100%; margin-bottom:10px;}
    .det-viewT .btn-modify .btn{width:100%}
}

/* 종 설명 > 분포 / 생태 / 분포지역 */
.det-viewM{display:flex; justify-content: space-between; margin-top:60px; margin-bottom:60px;}
.det-viewM > div{display:flex; justify-content: space-between}
.det-viewM > .left-wrap{width:calc(100% - 500px);}
.det-viewM > .left-wrap .info-list{display:flex; flex-direction:column; gap:10px; width:100%;}
.det-viewM > .left-wrap .info-list .tit-btn{position:relative; z-index:2; display:flex; align-items:center; padding:0 30px; height:60px; background:#f7f7f7; border:1px solid #ccc; border-radius:10px; width:100%; font-size: 1.8rem; font-weight:700; transition:.3s;}
.det-viewM > .left-wrap .info-list .tit-btn span{position:absolute; right:20px; top:17px; color:#116a7b;}
.det-viewM > .left-wrap .info-list .tit-btn.active span{transform:rotate(180deg);}
.det-viewM > .left-wrap .info-list .info-item{display:none; position:relative; z-index:1; padding:30px 20px 20px 20px; background:#fff; border:1px solid #ccc; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; transform:translateY(-10px);}
.det-viewM > .left-wrap .info-list .info-item *{word-break:break-all;}

.det-viewM > .right-wrap{background:#f7f7f7; border:1px solid #ccc; border-radius:10px; width:480px; padding:30px;  align-self: flex-start}
.det-viewM > .right-wrap .right-tit{display:flex; justify-content:space-between; height:30px; margin-bottom:10px;}
.det-viewM > .right-wrap .right-tit h3{font-size: 1.8rem; font-weight:700;}
.det-viewM > .right-wrap .right-tit a.btn{font-size:1.4rem; background-color:#222; color:#fff; border-radius: 30px; text-align:center; padding:8px 15px; min-height:auto; display:flex; align-items: center;}
.det-viewM > .right-wrap .right-tit a.btn span{font-size:1.2rem;}
.map-view{position:relative; display:block; text-align:center;}
.map-view p.txt{color:#fff; width:100%; text-align:center; position: absolute; top:50%; transform: translate(0, -50%);}

.det-viewB{}
.det-viewB .info-list{display:flex; flex-direction:column; gap:10px; width:100%;}
.det-viewB .info-list .tit-btn{position:relative; z-index:2; display:flex; align-items:center; padding:0; height:60px; border-bottom:2px solid #116a7b; width:100%; font-size: 1.8rem; font-weight:700; transition:.3s;}
.det-viewB .info-list .tit-btn span{position:absolute; right:0; top:17px; color:#ccc;}
.det-viewB .info-list .tit-btn.active span{transform:rotate(180deg); color:#116a7b;}
.det-viewB .info-list .info-item{display:none; position:relative; z-index:1; padding:40px 0; background:#fff; border-bottom:1px solid #222; }
.det-viewB .info-list .info-item *{word-break:keep-all;}
.det-viewB .info-list .info-item .list-1st > li{position: relative; width:calc(100% - 7px); background-color: #fff; padding: 20px 30px; margin:0 0 20px 0;  background: #fff; border: 1px solid #ccc; border-radius: 10px;}
.det-viewB .info-list .info-item .list-1st > li::after {content: ""; position: absolute; left: 7px; top: 7px; z-index: -1; width: 100%; height: 100%; background: rgba(0,0,0,0.04); border-radius: 7px;}
.det-viewB .info-list .info-item .list-1st > li:before{width:0; height:0;}
.det-viewB .info-list .info-item .list-1st > li .area-box{display:block; background: rgba(17,106,123,0.05); padding:5px 15px; margin-top:10px; color:#116a7b; font-size:1.4rem;}

@media all and (max-width:1024px) { 
    .det-viewM > .left-wrap{width:calc(100% - 370px);}
    .det-viewM > .right-wrap{width:350px;}
}

@media all and (max-width:768px) { 
    .det-viewM{flex-direction:column; margin-top:30px; margin-bottom:30px;}
    .det-viewM > .left-wrap{width:100%; margin-bottom:30px;}
    .det-viewM > .right-wrap{width:100%;}
    .det-viewM > div{display:block;}
    .map-view .map-img img{width:100%;}
}

/* 종 설명 :: Tab */
.det-viewB .info-list .info-item .sub-tab-wrapper{position:relative; height:60px; margin-bottom:40px;}
.det-viewB .info-list .info-item .sub-tab-style{background-color:#f2f2f2; height:60px; border-bottom:1px solid #ccc}
.det-viewB .info-list .info-item .sub-tab-style ul{display:table; width:100%; table-layout:fixed;}
.det-viewB .info-list .info-item .sub-tab-style ul li{display:table-cell; vertical-align:middle; position:relative; border:0}
.det-viewB .info-list .info-item .sub-tab-style ul li a{display:table; height:60px; width:100%; border:1px solid #ccc; border-left:0; background: #fff;}
.det-viewB .info-list .info-item .sub-tab-style ul li:first-child a{ border-left:1px solid #ccc; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.det-viewB .info-list .info-item .sub-tab-style ul li:last-child a{ border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.det-viewB .info-list .info-item .sub-tab-style ul li a em span.num{display:block; margin-top:5px; font-size:1.4rem;}
.det-viewB .info-list .info-item .sub-tab-style ul li a.active {border-color: #116a7b; background: #116a7b; color: #fff; position: relative;}

.jongtit-wrap{display:flex; justify-content: space-between; margin-bottom:10px}
.jongtit-wrap .flt_btn a{display:flex; align-items: center;}

@media all and (max-width:1024px) { 
    .det-viewB .info-list .info-item .sub-tab-wrapper{height:auto; margin-bottom:30px;}
    .det-viewB .info-list .info-item .sub-tab-style{background-color:transparent; height:auto; border-bottom:0 solid #ccc}
    .det-viewB .info-list .info-item .sub-tab-style ul{display:flex; flex-wrap: wrap; gap:5px; width:100%;}
    .det-viewB .info-list .info-item .sub-tab-style ul li{height:50px; width:calc((100% / 3) - 4px);}
    .det-viewB .info-list .info-item .sub-tab-style ul li a{height:50px; border:1px solid #ccc;}
    .det-viewB .info-list .info-item .sub-tab-style ul li:first-child a{border-top-left-radius: 0; border-bottom-left-radius: 0;}
    .det-viewB .info-list .info-item .sub-tab-style ul li:last-child a{border-top-right-radius: 0; border-bottom-right-radius: 0;}
    .det-viewB .info-list .info-item  .sub-tab-style ul li a.active::after {display: none;}
}

@media all and (max-width:768px){ 
    .det-viewB .info-list .info-item .sub-tab-style ul li{width:calc((100% / 2) - 4px);}
}


/* 종 설명 :: 멀티미디어 > 소리 */
.sound-list {position: relative; width: 100%; display: grid; gap:20px; width: 100%; grid-template-columns: repeat(4, 1fr);}
.sound-list > li {position: relative; display: inline-block; text-align: center;}
.sound-list > li a{display:block; padding:15px 10px; border-radius: 100px; background-color:#e6f5f8; border:3px solid #fff; transition: all 0.2s ease;}
.sound-list > li a span{font-size:40rem; color:#116a7b;}
.sound-list > li a:before {transition: all 0.5s ease; border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0;}
.sound-list > li a:hover {box-shadow: 0 0 0 8px #b7dde5;}
.sound-list > li a:before:hover {transform: scale(0.925); box-shadow: 0 0 0 5px #fff; opacity: .5; }

@media all and (max-width:768px){ 
    .sound-list {gap:10px; width: 100%; grid-template-columns: repeat(3, 1fr);}
}


.search-list{ position: relative; padding: 50px 0;}
/* .search-list + .search-list{border-top: 1px dashed #ccc;} */
.search-item {display:flex; justify-content: space-between}
.search-item .line-box{background-color:#fff; border:1px solid #ccc; border-radius: 10px; padding:20px;}
.search-item .left-wrap{width:420px; margin-right:20px;}
.search-item .right-wrap{width:calc(100% - 440px);}

.search-card {display: block; overflow: hidden;}
.search-card + .search-card {border-top:1px dashed #ccc; padding-top:50px}
.search-card .gray-box{padding:10px 15px}
.search-card .img {overflow: hidden; position: relative; border-radius:10px;}
.search-card .img:before {content: ''; display: block; padding-bottom: 74.8571%;}
.search-card .img img {position: absolute;top: 0;left: 0;width: 100%; height: 100%; object-fit: cover;}
.search-card .txt {padding: 24px 0;}
.search-card .txt .info-txt{display: -webkit-box; overflow:hidden;  text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical}
.search-card .tit-infotop {overflow: hidden; font-weight: 700; font-size: 2.0rem; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.search-card .st-name {font-size: 1.5rem;}

.card-link{position:relative; overflow:hidden; line-height:1.7}
.card-link::before{opacity:0; z-index:1; position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; background:rgba(255,255,255,0.3); transition:.3s;}
.card-link::after{opacity:0; z-index:1; position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:100px; height:100px; border-radius: 80px; background:rgba(0,0,0,0.5) url(/nibr/images/ico/ico-plus.png) no-repeat 50% 50%; transition:.3s;}
.card-link:hover::before,
.card-link:hover::after{opacity:1;}

.row-card{display:flex; align-items: flex-start; justify-content: space-between;}
.row-card .img {overflow: hidden; position: relative; margin-right:20px; width:240px;/*width:calc(100% - 300px)*/}
.row-card .img:before {content: ''; display: block; padding-bottom: 100%;}
.row-card .img img {position: absolute;top: 0;left: 0;width: 100%; height: 100%; object-fit: cover;}
.row-card .txt {padding:  0; width:calc(100% - 260px);}
.row-card .txt .info-txt{display: -webkit-box; overflow:hidden;  text-overflow: ellipsis; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical}

.multi-list .photo-list{display:flex; gap:10px; flex-wrap:wrap;}
.multi-list .photo-list > li{width:calc(33.333% - 7px);}

@media all and (max-width:1200px) {
    .pd_searchSec {padding:10px 20px 30px 20px; background: #f7f7f7; border:1px solid #ccc; border-radius: 20px;  box-sizing: border-box;}
    .search-input {width: 95%; height: 60px; border-bottom: 3px solid #000; position: relative; margin:0 auto;}
    .search-input input {width: 100%; display: block; height: 100%; padding-right: 90px; border: none; font-size: 1.6rem; outline: none; background: transparent;}
    .search-input button {position: absolute; height: 100%; display: flex; align-items: center; right: 0; top: 0;}
    .search-input button span {font-size: 48rem; font-weight: 500; line-height: 1; color: #000;}
    
    .search-list{padding: 50px 0 0 0;}
    .search-list + .search-list{border-top: 0 dashed #ccc;}
    .search-item {flex-direction:column}
    .search-item .left-wrap{width:100%; margin-right:0; margin-bottom:20px;}
    .search-item .right-wrap{width:100%; margin-left:0;}
    
    .search-card .img:before {content: ''; display: block; padding-bottom: 56.25%;}
    .row-card{display:flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
    .row-card .img {overflow: hidden; position: relative; margin-right:20px; width:100%;/*width:calc(100% - 300px)*/}
    .row-card .img:before {content: ''; display: block; padding-bottom: 56.25%;}
    .row-card .img img {position: absolute;top: 0;left: 0;width: 100%; height: 100%; object-fit: cover;}
    .row-card .txt {padding-top:24px; width:100%;}

}

/* 구축현황 */
.current-search{position:relative; margin:0 0 50px 0; padding: 20px 36px; border: none; background: #f1f5fb; border: 1px solid #cfdcee; text-align:center; border-radius: 10px;transition:all 0.4s ease}
.current-search .hs-item{display: flex; justify-content: space-between;}

/* 구축현황 > modal */
#cu-modal01.modal-center {width:700px !important;}
#cu-modal01 .modal-content-fixed{display: flex; align-items: stretch; justify-content: space-between}
#cu-modal01 .modal-content-fixed .item{width:48%; position: relative; margin-top: 40px; border-radius: 20px; background-color: #f6f6f6;}
.item-inner .overflow-box {height: 115px; padding: 10px 15px; border: 1px solid #ccc; border-radius: 10px; overflow-y: scroll; background-color:#fff;}
.item-inner .overflow-box li{font-size:1.5rem; font-weight: 500;}
.item-title {display: inline-flex; align-items: center; top: -25px; left:0; position: relative; padding: 10px 30px 10px 25px; border-radius: 15px 15px 15px 0;  background-color: #323841; font-weight: 500; letter-spacing: -0.025em; color: #fff;}
.item-title  span.material-icons{font-size:17rem; margin-right:5px;}
.item-inner {padding: 10px 15px 30px 15px;}
.item-inner .d-flex{justify-content: center; display:flex;}
.item-inner .d-flex select{min-width:180px}

/* 구축현황 > 히스토리 비교하기 */
/* .hs-form{display:none} */
.hs-form{overflow:hidden;max-height:0;transition:max-height 0.4s ease}
.hs-form.open{max-height:500px}
.hs-search{display:flex; flex-wrap:wrap; gap:20px 20px; align-items:center; justify-content: center; margin:20px 0 0 0; padding:20px 0 0 0; border-top:1px solid #dbdbdb;}
.hs-search > li{display:flex; gap:10px 5px; align-items:center;}
.hs-search > li .tit{position:relative; padding-left:10px; font-weight:500;}
.hs-search > li .tit::before{position:absolute; content:''; left:0; top:10px; width:4px; height:4px; background:#222; border-radius:100%;}
.btn-history.active{border-color:#00788c; background:#00788c; color:#fff !important;}
.transformbox {display: block; position: relative; padding: 45px; background-color: #FFF; border-radius: 20px; border:1px solid #f2f2f2; box-shadow: rgba(0, 0, 0, 0.07) 10px 17px 35px;}
.transformbox h4{font-size: 25rem; text-align:center; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 50px; font-weight: 700}

/* 구축현황 > 히스토리 비교하기 > table */
.current-table td[class*=bg],
.current-table td[class*=bg] a{color:#fff;}

@media all and (max-width:768px) {
    #cu-modal01.modal-center {width:90% !important;}
    .item-inner .d-flex select{width:calc(100% - 95px); min-width:auto;}

    #cu-modal01 .modal-content-fixed{display: flex; flex-direction: column; justify-content: flex-start}
    #cu-modal01 .modal-content-fixed .item{width:100%;}
    
    .current-search{padding: 20px;}
    .current-search .hs-item{display: flex; flex-direction: column; justify-content: flex-start;}
    .current-search .hs-item .w200px{width:100% !important;  margin-bottom:5px}
    .current-search .hs-item .btn-item a.btn{width:100%;}
    .current-search .hs-item .btn-item>*{margin-bottom:5px;}
    
    .hs-search{display:flex; flex-wrap:wrap; flex-direction: column; gap:10px 10px; align-items:flex-start; justify-content: flex-start; margin:20px 0 0 0; padding:20px 0 0 0; border-top:1px solid #dbdbdb;}
    .hs-search > li{display:flex; gap:10px 5px; align-items:flex-start; flex-direction: column; width:100%;}
    .hs-search > li select,
    .hs-search > li .btn {min-width:100%;}
}

/* 구축현황 > 발간자료 */
.txtW{position:relative; width:100%; margin-bottom:10px;}
.txtW .tit{padding-top:15px; font-size: 2.0rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.3s;}
.etc{position:relative; left:0; display:flex; flex-wrap:wrap; gap:15px; padding-top:20px; border-top:1px dashed #dbdbdb; width:100%;}
.etc li{position:relative; display:flex; align-items: center;}
.etc span.material-icons-outlined{font-size:1.8rem; color:#116a7b; margin-right:5px;}

/* Member > Login */
/* .login-wrap {position:relative; border: 1px solid #222; border-top: 3px solid #1b3c89; background-color: #fff; width: 100%; box-shadow: 0 0 0 rgba(0, 0, 0, .08); margin:80px auto; padding: 80px 30px;}
.login-form{width: 580px; margin: 0px auto;}
.login-form > h2 {font-size: 45rem; font-weight: 500; text-align: center;  font-weight: 700}
.login-form > p {text-align: center; line-height: 1.4; color: #777; padding-bottom: 44px;}
.login-wrap .input-group input {background-color: #F4F5FC; border: none; height: 60px; line-height: 40px; border-radius: 10px; padding: 0 0 0 64px; background-position: 20px 50%; background-repeat: no-repeat; background-image: url('/nibr/images/ico/input-id.png');}
.login-wrap .input-group input[type=password] {background-image: url('/nibr/images/ico/input-pw.png'); background-position: 23px 50%;}
.login-wrap .input-group + .input-group { margin-top: 10px;}
.login-wrap .btn.btn-login {display: block; background-color: #1b3c89; border: none; font-size: 24prem; height: 70px; line-height: 70px; border-radius: 10px; text-align:center; font-weight: 500; color: #fff; padding: 0; margin-top: 15px;}

.login-wrap .btn-wrap {width: 100%; display:flex; margin-top: 10px;}
.login-wrap .btn-wrap .btn {width: 50%; margin: 0; height: 60px; border: none; display: flex; align-content: center; justify-content: center; background-position: 40px 50%; background-repeat: no-repeat; background-color:#222; border-radius: 0;}
.login-wrap .btn-wrap .btn:first-child{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.login-wrap .btn-wrap .btn:last-child{border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color:#5F6769;}
.login-wrap .btn-wrap .btn > span {color:#fff;}
.login-wrap .btn-wrap .btn > span:first-child{font-size:22rem; margin-right:5px;} */

.login-coment > li{display:flex; align-content: flex-start; margin-top:10px}
.login-coment > li > span{padding-right:5px; padding-top:2px; font-size:2.1rem;}

/* 차트 */
.current-chart {height: 500px;}

@media all and (max-width:768px) {
    /* .login-form > h2 {font-size: 35rem;}
    .login-wrap {padding: 50px 30px;}
    .login-form{width: 100%;}
    .login-wrap .btn.btn-login {font-size: 2.0rem; height: 60px; line-height: 60px;}
    .login-wrap .btn-wrap {flex-direction:column;}
    .login-wrap .btn-wrap .btn {width: 100%; height: 60px;}
    .login-wrap .btn-wrap .btn:first-child{border-radius: 10px;}
    .login-wrap .btn-wrap .btn:last-child{border-radius: 10px; margin-top: 10px;} */
}

/* Member > 회원가입 */
.login-coment {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f6f6f6;
  border-radius: 10px;
}

.login-coment li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #333;
}

.login-coment li:last-child {
  margin-bottom: 0;
}

.login-coment .material-icons {
  color: #3161c2;
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.join-wrap {display: flex; gap: 30px; margin-top: 40px; align-items: stretch;}

.join-item {
  flex: 1;
  padding: 40px 35px;
  background-color: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: 15px;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  height: auto;
}

.join-item.kids-box {
  background-color: #F8FAFC;
  border-color: #E2E8F0;
  background-image: url("/nibr/images/ico/join-left.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) calc(100% - 10px);
  background-size: 150px 150px;
}

.join-item.kids-box:hover {
  background-color: #FFF3E0;
  border-color: #FFB74D;
  box-shadow: 0 5px 15px rgba(255, 152, 0, 0.2);
}

.join-item.general-box {
  background-color: #F8FAFC;
  border-color: #E2E8F0;
  background-image: url("/nibr/images/ico/join-right.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) calc(100% - 10px);
  background-size: 150px 150px;
}

.join-item.general-box:hover {
  background-color: #E3F2FD;
  border-color: #64B5F6;
  box-shadow: 0 5px 15px rgba(33, 150, 243, 0.2);
}

.join-item .box-icon {
  width: 70px;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #fff;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.join-item.kids-box .box-icon {
  background-color: #fff;
}

.join-item.kids-box .box-icon .material-icons {
  font-size: 42px;
  color: #999;
  transition: color 0.3s ease;
}

.join-item.kids-box:hover .box-icon {
  background-color: #FFE0B2;
}

.join-item.kids-box:hover .box-icon .material-icons {
  color: #FF9800;
}

.join-item.general-box .box-icon {
  background-color: #fff;
}

.join-item.general-box .box-icon .material-icons {
  font-size: 42px;
  color: #999;
  transition: color 0.3s ease;
}

.join-item.general-box:hover .box-icon {
  background-color: #BBDEFB;
}

.join-item.general-box:hover .box-icon .material-icons {
  color: #2196F3;
}

.join-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.join-item .box-title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.2;
  margin-top: 0;
}

.join-item.kids-box .box-title {
  color: #666;
  transition: color 0.3s ease;
}

.join-item.kids-box:hover .box-title {
  color: #FF6F00;
}

.join-item.general-box .box-title {
  color: #666;
  transition: color 0.3s ease;
}

.join-item.general-box:hover .box-title {
  color: #1976D2;
}

.join-item .box-txt {
  display: block;
  font-size: 1.6rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 30px;
  flex: 1;
}

.join-item .btn-join {
  padding: 15px 30px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-start;
}

.join-item.left-box.kids-box .btn-join {
  background-color: #FFB74D;
}

.join-item.left-box.kids-box:hover .btn-join {
  background-color: #FF9800;
}

.join-item.left-box.kids-box .btn-join:hover {
  background-color: #F57C00;
}

.join-item.right-box.general-box .btn-join {
  background-color: #64B5F6;
}

.join-item.right-box.general-box:hover .btn-join {
  background-color: #2196F3;
}

.join-item.right-box.general-box .btn-join:hover {
  background-color: #1976D2;
}

@media all and (max-width:768px) {
  .join-wrap {
    flex-direction: column;
    gap: 20px;
  }
  
  .join-item {
    padding: 40px 30px;
  }
  
  .join-item .box-title {
    font-size: 2.4rem;
  }
  
  .join-item .box-icon {
    width: 60px;
    height: 60px;
  }
  
  .join-item.kids-box .box-icon .material-icons,
  .join-item.general-box .box-icon .material-icons {
    font-size: 36px;
  }
  
  .join-item .box-txt {
    font-size: 1.4rem;
  }
  
  .login-coment li {
    font-size: 1.4rem;
  }
}

/* Member > 개인정보 수집 동의 */
.join-step-warp .regist-box {position: relative; padding: 0; text-align: left; background-color: #fff; margin:0 auto 80px auto;}
.join-step-warp .regist-box .agree-total {position: relative; background: #e3ebfc ; border: 1px solid #3161c2; border-radius: 10px; padding:17px 0; justify-content: center; align-items: center; margin-top: 40px; font-weight:500; font-size:1.8rem}
.join-step-warp .regist-box .overflow-box {height: 400px; padding: 20px; border: 1px solid #c8c8c8; border-radius: 10px; overflow-y: auto;}
.join-step-warp .regist-box .agree-form-group{display:flex; justify-content: flex-end; align-items: center; margin-top:15px;}

.join-step-warp .step {border-top:0 solid #c8c8c8; margin:20px 0; width: 100%; display: flex; justify-content: center; align-items: center;}
.join-step-warp .step li {position: relative; padding: 20px 54px 16px; text-align: center; display: inline-block;}
.join-step-warp .step li:before {position: absolute; content: ''; width: 20px; height: 35px; background: url('/nibr/images/ico/step_arr.png') no-repeat; right: -15px; top: 45px;}
.join-step-warp .step li:last-child::before{display: none;}
.join-step-warp .step li .step-icon {width:100px; height: 100px; margin: 0 auto; border:3px solid #c8c8c8; border-radius:50%; display:block;}
.join-step-warp .step li:nth-child(1) .step-icon {background: url('/nibr/images/ico/step_icon1.png') no-repeat center;}
.join-step-warp .step li:nth-child(2) .step-icon {background: url('/nibr/images/ico/step_icon2.png') no-repeat center;}
.join-step-warp .step li:nth-child(3) .step-icon {background: url('/nibr/images/ico/step_icon3.png') no-repeat center;}

.join-step-warp .step li:nth-child(1).on .step-icon {background:#1b3c89 url('/nibr/images/ico/step_icon1_on.png') no-repeat center; border-color:#1b3c89;}
.join-step-warp .step li:nth-child(2).on .step-icon {background:#1b3c89 url('/nibr/images/ico/step_icon2_on.png') no-repeat center; border-color:#1b3c89;}
.join-step-warp .step li:nth-child(3).on .step-icon {background:#1b3c89 url('/nibr/images/ico/step_icon3_on.png') no-repeat center; border-color:#1b3c89;}

.join-step-warp .step li .steptt {font-size: 1.8rem; margin-top: 12px; display: inline-block;}
.join-step-warp .step li.on .steptt {color: #1b3c89;}

@media(max-width: 768px) {
    .join-step-warp .regist-box .agree-total {font-size:1.5rem;}
	.join-step-warp .step li {padding: 5px 10px;}
    .join-step-warp .step li:before {top: 35px; transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8);}
    .join-step-warp .step li .step-icon {transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8);}
    .join-step-warp .step li .steptt {font-size: 1.5rem; margin-top: 5px; display: inline-block;}
        
}

.explanation{display: block; width:100%; opacity: 0; height:0; } 
.explanation > p{display:inline-flex; align-content: center; border: 1px solid #3161c2; border-radius: 30px; margin:5px 0 15px 0; padding:6px 20px 4px 43px; justify-content: center; align-items: center; color:#1b3c89; background:#e3ebfc url('/nibr/images/ico/txt-icon.png') no-repeat 15px 50%; font-weight: 500; font-size:1.4rem;}
.explanation > p span.material-icons-outlined{transform: rotate( 0deg );}
.purpose-area div:nth-child(1) input:checked ~ .explanation {opacity: 1; height:auto;} 
.purpose-area div:nth-child(2) input:checked ~ .explanation {opacity: 1; height:auto;} 
.purpose-area div:nth-child(3) input:checked ~ .explanation {opacity: 1; height:auto;} 


/* mypage */
.tit-flex{display:flex; justify-content: space-between; align-items: center; margin-bottom:10px;}
.txt-year > span,
.txt-sign > span{display:inline-block;}
.txt-year .write-txt{text-align:right;}
.txt-sign .sign{min-width:180px; border-bottom:1px solid #ccc;}

@media only screen and (max-width: 1024px){
    .dist-wrap .btn-mobile {display:inline-block;} 
    .dist-wrap .btn-pc {display:none;}
}


.flex-list{position: relative; display:flex; align-items: center;  width:100%; padding-top:20px;}
.flex-list:after{content:""; position:absolute; left:0; top:0; display:block; border-top:1px dashed #dbdbdb; height:1px; width:100%;}
.flex-list > li{margin-left:15px}
.flex-list > li:first-child{margin-left:0; padding-left:0}
.flex-list > li > span{display:inline-block; color:#000; font-weight: 500; margin-right:8px;}
.flex-list > li > span.badge{padding: 3px 15px; border-radius: 100px; color: #fff; text-align: center; font-size:1.4rem;}
/*.flex-list li span:after{content:""; display:inline-block; width:1px; height:15px; margin:0 6px 2px 8px; background:#ccc; vertical-align:middle}*/

@media all and (max-width:710px){
    .flex-list li{width:50%; margin-left:0}
}
@media all and (max-width:500px){
    .flex-list li{float:none; width:100%}
}

/* 자료실 */
.includ-form{display:none; margin-top:20px;}
.btn-includ.active {background-color:#1b3c89 !important; color:#fff !important;}
.btn-border.btn-includ span.material-icons-outlined{transition: all 0.4s ease;}
.btn-includ.active span.material-icons-outlined{transform: rotate(-180deg); }

.icon {position: relative; display: inline-block; vertical-align: middle; margin:2px 0}
.icon:after {content: ""; position: absolute;}

.icon-csv {width: 28px; height: 32px;}
.icon-csv:after {top: 0; left: 0;width: 26px; height: 32px; background: url(/nibr/images/ico/ico-csv.png) no-repeat center;}

.icon-xls {width: 28px; height: 32px;}
.icon-xls:after {top: 0; left: 0;width: 26px;height: 32px; background: url(/nibr/images/ico/ico-xls.png) no-repeat center;}

.icon-img {width: 28px; height: 32px;}
.icon-img:after {top: 0; left: 0;width: 26px;height: 32px; background: url(/nibr/images/ico/ico-img.png) no-repeat center;}

.icon-mp4 {width: 28px; height: 32px;}
.icon-mp4:after {top: 0; left: 0;width: 26px;height: 32px; background: url(/nibr/images/ico/ico-mov.png) no-repeat center;}

.icon-mp3 {width: 28px; height: 32px;}
.icon-mp3:after {top: 0; left: 0;width: 26px;height: 32px; background: url(/nibr/images/ico/ico-sou.png) no-repeat center;}

.con_box01 {position: relative; border: 2px solid #222; box-shadow: 5px 5px 5px rgb(0 0 0 / 10%); border-radius: 10px; padding: 30px; overflow: hidden; margin-bottom: 40px;}

/* 전문위원 리스트 */
.filedata-list {position:relative; border:2px solid #222; box-shadow: 5px 5px 5px rgb(0 0 0 / 10%); border-radius:10px; padding:20px 30px; display:flex; align-items: center; justify-content: space-between; margin-bottom:30px;}
.file-title {display:flex; align-items:center; flex-wrap: wrap}
.file-title strong.title-txt{font-weight: 700; font-size:1.8rem; margin-left:10px; line-height:1.4; width:calc(100% - 36px);}

@media screen and (max-width:1024px){
	.file-title strong.title-txt{font-weight: 700; font-size:1.6rem; margin-left:10px; margin-bottom:10px;}
}

@media screen and (max-width:768px){
	.filedata-list {flex-direction: column; align-items: flex-start; justify-content: flex-start;}
}


.kogi-info{display:inline-block; text-align:center;}


/* 우리생물이야기 게시글 미리보기 */
.board-view-detail {}
.view-slider {width:calc(100% - 30px); position: relative; margin: 0 0 0 30px; background: #F7F7F7; border:1px solid #ccc; /*box-shadow: 0px 14px 20px rgba(34, 35, 58, 0.2);*/ margin-bottom:60px; padding: 30px; border-radius: 20px; height: 400px; transition: all 0.3s;}
.view-slider-item {display: flex !important; align-items: center;}

.view-slider-item.swiper-slide-active .view-slider-img img {opacity: 1;transition-delay: 0.3s;}
.view-slider-item.swiper-slide-active .view-slider-content > * {opacity: 1; transform: none;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(1) {transition-delay: 0.3s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(2) {transition-delay: 0.4s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(3) {transition-delay: 0.5s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(4) {transition-delay: 0.6s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(5) {transition-delay: 0.7s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(6) {transition-delay: 0.8s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(7) {transition-delay: 0.9s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(8) {transition-delay: 1s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(9) {transition-delay: 1.1s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(10) {transition-delay: 1.2s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(11) {transition-delay: 1.3s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(12) {transition-delay: 1.4s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(13) {transition-delay: 1.5s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(14) {transition-delay: 1.6s;}
.view-slider-item.swiper-slide-active .view-slider-content > *:nth-child(15) {transition-delay: 1.7s;}

.view-slider-img {width: 450px; flex-shrink: 0; height: 300px; background-color:#222; /*background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);*/ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border-radius: 20px; transform: translateX(-60px); overflow: hidden;}
.view-slider-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s;}
.view-slider-content {padding-right: 50px;}
.view-slider-content > * {opacity: 0; transform: translateY(50px); transition: all 0.4s;}
.view-slider-title {font-size: 2.4rem;font-weight: 700; margin-bottom: 20px;}
.view-slider-text { margin-bottom: 30px; line-height: 1.7; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.view-slider-button {display: inline-flex; background-image: linear-gradient(147deg, #086eb9 0%, #1b3c89 74%); padding: 15px 35px; border-radius: 50px; color: #fff; /*box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);*/ text-decoration: none; font-weight: 500; font-size:1.4rem; justify-content: center; text-align: center; letter-spacing: 1px;}

.view-slider .swiper-container-horizontal > .swiper-pagination-bullets, 
.view-slider .swiper-pagination-custom, 
.view-slider .swiper-pagination-fraction {bottom: 10px; left: 0; width: 100%;}

.view-slider-pagination {position: absolute; z-index: 21; right: 30px; width: 11px !important;text-align: center; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%);}
.view-slider-pagination.swiper-pagination-bullets .swiper-pagination-bullet {margin: 8px 0;}

.view-slider-pagination .swiper-pagination-bullet {width: 11px; height: 11px; display: block; border-radius: 10px; background: #333; opacity: 0.2; transition: all 0.3s;}
.view-slider-pagination .swiper-pagination-bullet-active {opacity: 1;background-image: linear-gradient(147deg, #086eb9 0%, #1b3c89 74%); height: 30px;}

@media screen and (max-width: 1024px) {
    .view-slider {height: 400px;}
    .view-slider-img {width: 350px; flex-shrink: 0; height: 300px;}
}

@media screen and (max-width: 768px) {
    .view-slider {min-height: 500px; height: auto; margin: 180px auto 60px auto;}
    .view-slider-item {flex-direction: column;}
    .view-slider-img {transform: translateY(-50%); width: 90%;}
    .view-slider-content {margin-top: -80px; text-align: center; padding: 0 30px;}
    .view-slider-content > * {opacity: 0; transform: translateY(20px); transition: all 0.4s;}
    .view-slider-title {font-size: 2.0rem; font-weight: 700; margin-bottom: 10px;}
    .view-slider-pagination {transform: translate(-50%, 0); left: 50% !important; top: 210px !important; width: 100% !important; display: flex; justify-content: center; align-items: center;}
    .view-slider-pagination.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 5px;}
    .view-slider-pagination .swiper-pagination-bullet-active {height: 11px; width: 30px;}
}

@media screen and (max-width: 576px) {
    .view-slider-img {width: 95%;}
    .view-slider-content {padding: 0;}
    .view-slider-button {width: 100%;}
}

@media screen and (max-height: 500px) and (min-width: 992px) {
    .view-slider {height: 350px;}
    .view-slider-img {height: 250px;}
}

/* 자료실 > 멀티미디어 카테고리 선택 */


/* 국가가 지정관리하는 생물 > 한국의 고유종 */
.cont-info{position: relative; border:8px solid #f1f5fb; border-radius: 0 0 100px 0; margin:0 0 60px;}
.cont-info .inner{display:flex;}
.cont-info .inner .pic{flex: 1; background-color:#ccc;}
.cont-info .inner .pic img {aspect-ratio: 800 / 600; width: 100%; height: 100%; object-fit: cover;}
.cont-info .inner .cont-txt{display: inline-block; width:calc(100% - 480px); color:#1b3c89; font-weight: 500; padding:60px;}
.cont-info .inner .cont-txt .title{padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #cfdcee; display:block; font-size:3.0rem; line-height: 1.2; font-weight: 700;}
.cont-info .inner .cont-txt p + p {margin-top: 20px;}

@media(max-width:1024px){
    .cont-info .inner{display:flex; flex-direction: column}
    .cont-info .inner .pic img {aspect-ratio: 800 / 400;}
    .cont-info .inner .cont-txt{display:block; margin-left:0; width:100%; padding:40px 30px;}
    .cont-info .inner .cont-txt .title{font-size:2.5rem;}
}

@media(max-width:768px){
    .cont-info .inner .cont-txt .title{font-size:2.0rem; padding-bottom:15px;}
}


/* 국가가 지정관리하는 생물 > 보호·관리종 */
.sethist{background: #fff; border: 2px solid #222; box-shadow: 5px 5px 5px rgb(0 0 0 / 10%); border-radius:10px; padding: 30px; height:520px;}
.sethist > ul{position:relative; display:flex; height:100%;padding:0 150px 0 30px;}
.sethist > ul::before {content: '';background: linear-gradient(90deg, #a2c642 0%, #116a7b 100%);width: calc(100% - 34px);height: 68px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.sethist > ul::after {content: '';position: absolute;top: 50%;right: -33px; transform: translateY(-50%); border: 34px solid transparent; border-left-color: #116a7b;}
.sethist > ul > li{position:relative; width:calc(100% / 5); display:flex; align-items:center; }
.sethist > ul > li:nth-child(odd){flex-direction:column-reverse; top:-193px;}
.sethist > ul > li:nth-child(even){flex-direction:column; top:193px;}
.sethist .year{position:relative; display:flex; align-items:center; width:100%; font-size:1.8rem; font-weight:500; color:#fff; line-height:1; height:68px; padding-left:20px;}
.sethist .year::before{content:''; position:absolute; left:0; display:block; width:1px; height:43px; background-color:#fff;}
.sethist > ul > li:nth-child(odd) .year::before{top:-1px;}
.sethist > ul > li:nth-child(even) .year::before{bottom:-1px;}
.sethist > ul > li:nth-child(odd) .content{padding-bottom:30px; bottom:68px;}
.sethist > ul > li:nth-child(even) .content{padding-top:30px; top:68px; }

.sethist > ul > li:nth-child(1) .content{border-color:#36a11d; left:0; width:200%;}
.sethist > ul > li:nth-child(2) .content{border-color:#1c8f3e; left:0; width:200%;}
.sethist > ul > li:nth-child(3) .content{border-color:#0d8451; left:0; width:200%;}
.sethist > ul > li:nth-child(4) .content{border-color:#037a4e; left:0; width:200%;}
.sethist > ul > li:nth-child(5) .content{border-color:#037a4e; left:0; width:200%;}
.sethist > ul > li:nth-child(6) .content{border-color:#116a7b; left:0; width:200%;}
.sethist > ul > li:nth-child(1) .title{color:#36a11d;}
.sethist > ul > li:nth-child(2) .title{color:#1c8f3e;}
.sethist > ul > li:nth-child(3) .title{color:#0d8451;}
.sethist > ul > li:nth-child(4) .title{color:#07805a;}
.sethist > ul > li:nth-child(5) .title{color:#007b67;}
.sethist > ul > li:nth-child(6) .title{color:#116a7b;}

.sethist .content{position:absolute; width:100%;  padding:0 20px; border-style:solid; border-width:0 0 0 1px;}
.sethist .content .title{display:block; font-size:1.8rem; letter-spacing:-0.5px; line-height:1.4; color:#1b3c89; font-weight: 500; min-height:60px;}
.sethist .content .txt-list{}
.sethist .content .txt-list li::before{content:'-'; margin-right:5px;}
.sethist .content .more{display:flex; align-items:center; justify-content:center; width:120px; height:30px; font-size:1.4rem; font-weight: 500; border: 1px solid #222; margin-top:10px; background-color:#fff; border-radius:30px; line-height:1;}


@media (max-width:1024px) {	
	.sethist{height:auto; border: 1px solid #222; padding:20px;}
	.sethist > ul{flex-direction:column; width:100%; background:none; padding:0;}
	.sethist > ul::before, .sethist > ul::after {display: none;}
	.sethist > ul > li{width:100%; flex-direction:column !important; position:static;}
	.sethist .year{width:100%; font-size:1.7rem; height:40px; min-height:auto;}
	.sethist .year::before{display:none;}
	.sethist > ul > li:nth-child(odd) .year{background:#a2c642;}
	.sethist > ul > li:nth-child(even) .year{background:#116a7b;} 	
	.sethist .content{position:static; width:100% !important; padding:10px;}

    .sethist .content{padding:20px 10px;}
	.sethist .content .title{font-size:1.5rem; min-height:auto; margin-bottom:15px;}
	.sethist .content .txt-list li{font-size:1.4rem;}	
}


/* 국가가 지정관리하는 생물 > 보호·관리종 > 지역별분포현황 */
.map-wrap{display:flex; align-items: center; justify-content: center; background-color:#f1f5fb; border: 1px solid #cfdcee; padding:30px 0; border-radius: 10px;}
.sigungu-box{position: relative; display:flex !important; align-items: center; justify-content: center; width: 450px; height: 520px; margin-left:50px; background: #fff; border-radius: 20px; box-shadow: 3px 4px 27px rgba(81, 136, 245, 0.15)}

.chart-wrap{display: flex; flex-direction: column; border-width: 2px 0 1px; border-color: #333 transparent #cdcdcd; border-style: solid; padding: 30px 0; margin-top:40px;}
.chart-item{display: flex;}
.chart-item > div{width:calc(100% /2)}

.sido_chart_wrapper1{display:inline-block; width:100%; border-right:1px dashed #666}
.sido_chart_wrapper1 .chiart_title{text-align:center; width:100%; height:30px; margin-top: 0px; font-weight: bold; font-size: 2.0rem;}
#sido_chart{width:320px; height:320px; margin:0 auto; text-align:center;}

.sido_chart_wrapper2{display:inline-block; vertical-align:top;}
.sido_chart_wrapper2 .chiart_title2{text-align:center; width:100%; height:30px; margin-top: 0px; z-index:1; font-weight: bold; font-size: 2.0rem;}
#sido_chart2{width:320px; height:320px; margin:0 auto; text-align:center;}

#ulChartColor{position: relative; display:flex; justify-content: center; flex-wrap: wrap; align-items: center; padding:10px 20px; background: #f6f6f6; border:1px solid #ccc; margin-top:30px;}
#ulChartColor li {position: relative; display: block; margin: 0;  padding:0 20px;}
#ulChartColor li::before {content: ""; width:12px; height:12px; display:block; position: absolute; left:0; top:7px;}
#ulChartColor li:nth-child(1)::before { background-color: #7ab4b8; }
#ulChartColor li:nth-child(2)::before { background-color: #9bc890; }
#ulChartColor li:nth-child(3)::before { background-color: #73ad81; }
#ulChartColor li:nth-child(4)::before { background-color: #2b8a81; }
#ulChartColor li:nth-child(5)::before { background-color: #4eb3d3; }
#ulChartColor li:nth-child(6)::before { background-color: #2b8cbe; }
#ulChartColor li:nth-child(7)::before { background-color: #1c6da7; }
#ulChartColor li:nth-child(8)::before { background-color: #1f577f; }
#ulChartColor li:nth-child(9)::before { background-color: #396c79; }
#ulChartColor li:nth-child(10)::before { background-color: #508f93; }

@media (max-width:1024px) {	
    .map-wrap{display:flex; flex-direction: column}
    .sigungu-box{width: 90%; height: 520px; margin-left:0; margin-top:20px;}
    
    .chart-item{display: flex; flex-direction: column;}
    .chart-item > div{width:100%}
    .sido_chart_wrapper1{border-right:0 dashed #666; border-bottom:1px dashed #666}
}

/* 국가가 지정관리하는 생물 > 보호·관리종 > 조사사업 */
.inves-list{display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
.inves-list > .inves-item{flex: 0 0 33.333333%; max-width: 33.333333%; padding-right: 15px; padding-left: 15px;}
.invesbox {position: relative; display: flex; margin-bottom: 30px; padding: 30px; background: #fff; border: 2px solid #222; box-shadow: 5px 5px 5px rgb(0 0 0 / 10%); border-radius: 10px; min-height:200px;}
.inves-list > .inves-item:nth-child(1) .invesbox {min-height:220px;}
.inves-list > .inves-item:nth-child(2) .invesbox {min-height:220px;}
.inves-list > .inves-item:nth-child(3) .invesbox {min-height:220px;}
.invesbox .invesbox-icon {position: absolute; top:20px; right:20px; width:80px; height:80px; display: flex; align-items: center; justify-content: center; background-color:#f1f5fb; border-radius: 80px;}
.invesbox .invesbox-detail {flex: 1;}

@media (max-width:1024px) {	
    .inves-list > .inves-item{flex: 0 0 50%; max-width: 50%;}
    .inves-list > .inves-item:nth-child(3) .invesbox {min-height:200px;}
}

@media (max-width:640px) {	
    .inves-list > .inves-item{flex: 0 0 100%; max-width: 100%;}
    .invesbox {min-height:auto; margin-bottom: 20px;}
    .inves-list > .inves-item:nth-child(1) .invesbox {min-height:auto;}
    .inves-list > .inves-item:nth-child(2) .invesbox {min-height:auto;}
    .inves-list > .inves-item:nth-child(3) .invesbox {min-height:auto;}
}

/* 국가가 지정관리하는 생물 > 보호·관리종 > 적색목록 */
.redData-box {/* height: 400px;  */padding:50px; background: #F7F7F7; border:1px solid #ccc; border-radius: 10px}
.redData-info {overflow: auto; height: 100%;}

.redData .list-item > li{position: relative; width:calc(100% - 7px); background-color: #fff; padding: 20px 30px; margin:0 0 30px 0;  background: #fff; border: 1px solid #ccc; border-radius: 10px;}
.redData .list-item > li::after {content: ""; position: absolute; left: 7px; top: 7px; z-index: -1; width: 100%; height: 100%; background: rgba(0,0,0,0.04); border-radius: 7px;}
.redData .list-item > li:before{width:0; height:0;}
.redData .list-item > li .area-box{display:block; background: rgba(17,106,123,0.05); padding:20px 30px; margin-top:20px; color:#116a7b;}
.redData .list-item > li .area-box > .tit{display:block; border-bottom:1px dashed rgba(17,106,123,0.3); font-size:17px; font-weight: 500; padding-bottom:10px; margin-bottom:15px; line-height:1.7}

.redData .list-item > li .txt-wrap{height: 250px}
.redData .list-item > li .txt-wrap.hauto{height: auto;}
.redData .list-item > li .txt-wrap-inner{overflow: auto; height: 230px;}
.redData .list-item > li .txt-wrap-inner > p{padding-bottom:20px}

/*custom-scroll*/
.redData-info.custom-scroll::-webkit-scrollbar-track {background-color: #F7F7F7;}
.redData-info.custom-scroll::-webkit-scrollbar-thumb {background-color: #ccc;}
.txt-wrap-inner.custom-scroll::-webkit-scrollbar-track {background-color: #fff;}
.txt-wrap-inner.custom-scroll::-webkit-scrollbar-thumb {background-color: #ccc;}

@media all and (max-width:1024px){
    .redData-box {height: 400px; padding:30px; background: #F7F7F7; border:1px solid #ccc; border-radius: 10px}
    .redData-info {overflow: auto; height: 340px;}
}


/* 한국의 철새 */
.movie-box{border-radius: 10px; display:inline-block; /*box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.2);*/ overflow:hidden;}
.kb-movie{position:absolute; top:-80px; right:40px;}
.korean-bird{display:flex; justify-content: space-between}
.kb-tab{position: relative; width: 120px; margin-top: 30px; z-index:99;}
.kb-tab > ul{display: flex; flex-direction: column;}
.kb-tab > ul > li{display:block; margin-bottom:20px;}
.kb-tab > ul > li > button{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 120px; height: 120px; padding: 10px; text-align: center; background-color: #fff; box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1); border-radius: 100%; transition-duration: 0.3s;}
.kb-tab > ul > li > button .icon {position: relative; display: block; transition-duration: 0.3s; line-height: 1;}
.kb-tab > ul > li > button .txt {position: relative; display: block; font-weight: 500; transition-duration: 0.3s; user-select: none; margin-top: 10px;}

.kb-tab > ul > li > button.active{flex-direction: row; align-items: center; justify-content: center; width:220px; height:80px; border:0 solid #1b3c89; background-image: linear-gradient(147deg, #086eb9 0%, #1b3c89 74%); border-radius: 50px;}
.kb-tab > ul > li > button.active .txt {opacity: 1; margin-top:0; margin-left:10px; font-size:1.8rem; color:#fff}

.korean-bird .tabgroup{position: relative; border:0 solid #1b3c89; border-radius: 20px; overflow: hidden; width:calc(100% - 140px); margin-left:30px;}

/* 한국의 철새 > 이동하는 이유 / 관찰하는 방법 */
.korean-bird-move {position: relative; display:block;}
.korean-bird-move > .kb-image-item{position: relative; z-index: 1; padding: 0; border:0 solid #1b3c89; border-radius: 20px; overflow:hidden;}
.korean-bird-move > .info-box{display:block; position:absolute; top:60px; width:400px; height:auto; padding:40px; border-radius:10px 10px 80px 10px; background-image: linear-gradient(147deg, #086eb9 0%, #1b3c89 74%); background-color:#fff; z-index:99; box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);}
.korean-bird-move > .info-box.w500{width:500px;}

.korean-bird-move.topWidely{margin-bottom:190px;}
.korean-bird-move.topWidely > .info-box{top:150px;}

.korean-bird-move.item-left > .kb-image-item{margin: 0 0 0 120px;}
.korean-bird-move.item-left > .info-box{left:0; border-radius:10px 10px 10px 80px;}

.korean-bird-move.item-right > .kb-image-item{margin: 0 120px 0 0 ;}
.korean-bird-move.item-right> .info-box{right:0;}

.korean-bird-move.item-bottom > .kb-image-item{margin: 0 0 0 0 ;}
.korean-bird-move.item-bottom> .info-box{position: relative; left:0; top:0; width:100%;}

.korean-bird-move > .info-box .info-top{position:relative; width:100%; display:block;}
.korean-bird-move > .info-box .info-top .tit{display:block; position:relative; padding:5px 0 30px 100px; margin-bottom:30px; font-size:28px; line-height:38px; color:#fff; font-weight:500;}
.korean-bird-move > .info-box .info-top .tit:before{content: ""; display:block; position:absolute; top:0; left:0; width:80px; height:80px; border-radius:20px; background-color:#fff; background-image:url(/nibr/images/ico/title-ico02.png); background-repeat:no-repeat; background-position: center center;}
.korean-bird-move > .info-box .info-top .tit:after{content: ""; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background-image:url(/nibr/images/sub/info-top-bg.png); background-repeat:repeat-x; }

.korean-bird-move > .info-box .info-top .tit.sm{display:block; position:relative; padding:5px 0 30px 80px; margin-bottom:30px; font-size:28px; line-height:38px; color:#fff; font-weight:500;}
.korean-bird-move > .info-box .info-top .tit.sm:before{content: ""; display:block; position:absolute; top:0; left:0; width:60px; height:60px; border-radius:10px; background-color:#fff; background-image:url(/nibr/images/ico/title-ico03.png); background-repeat:no-repeat; background-position: center center;}

.korean-bird-move > .info-box .txt{line-height:26px; color:#fff;}

.kb-info {position: relative; margin-bottom: 40px;}
.kb-info .title-bg {padding: 30px 40px; background: #F6F6F6; border-radius: 10px; border:1px solid #ccc}
.kb-info .title-cover {display: flex; justify-content: space-between}
.kb-info .sub-h3 {margin-bottom: 20px; font-weight: 700; font-size:2.4rem; text-align: left; display:block; width:100%;}
.kb-info .title-symbol {flex-shrink: 0; margin-right: 30px; border-radius: 10px; background: #fff; width:80px; height:80px; flex-shrink: 0; display:flex; align-items: center; justify-content: center;}
.kb-info .title-text {font-weight:500;}
.kb-info .detail-txt{background-color:#fff; border-radius: 10px; padding:20px 30px; margin-top:30px; line-height:1.7}
.kb-info .detail-txt p+p{margin-top:20px}
.kb-info .detail-img{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:20px;}
.kb-info .detail-img .img-wrap{border-radius: 10px; overflow:hidden; width:200px; height:100%;}
.kb-info .detail-img .img-wrap img{width:100%}
.kb-info .detail-img .txt-wrap{width: calc(100% - 230px);}
.kb-info .movie-box{flex-shrink: 0; margin-left: 30px; width: 200px; height:133px;}
.kb-info .movie-box img{width:100%; height:100%;}
.text-box-ab{position:absolute; bottom:30px; right:30px; z-index:99; width:400px; font-weight: 500;}


@media all and (max-width:1024px) {
    .kb-info .title-symbol,
    .kb-info .title-text br{display:none;}
    
    /* 한국의 철새 */
    .korean-bird{display:flex; flex-direction: column; justify-content:center}
    .kb-tab{position: relative; width: 100%; margin-top: 0; margin-bottom:20px;}
    .kb-tab > ul{display: flex; align-content: center;  justify-content:center; flex-direction:row;}
    .kb-tab > ul > li{display:block; margin:0 5px;}
    .kb-tab > ul > li > button.active{flex-direction: column; align-items: center; justify-content: center; width:120px; height:120px; border-radius: 100%;}
    .kb-tab > ul > li > button.active .txt {margin-top:10px; margin-left:0; font-size:1.5rem;}
    .korean-bird .tabgroup{width:100% ; margin-left:0;}

    .korean-bird-move > .info-box{position:relative; top:auto; right:auto; width:100%; height:auto; margin-top:20px; padding:30px; border-radius:20px; box-shadow:none;}
    .korean-bird-move.item-left > .kb-image-item{margin: 0 0 0 0;}
    .korean-bird-move.item-left > .info-box{border-radius:20px;}
    .korean-bird-move.item-right > .kb-image-item{margin: 0 0 0 0;}
    .korean-bird-move.item > .kb-image-item{margin: 0 0 0 0;}
    .korean-bird-move.item > .info-box,
    .korean-bird-move.topWidely > .info-box{position:relative; top:auto; right:auto; width:100%; height:auto;}
    .korean-bird-move.topWidely{margin-bottom:0;}
    .korean-bird-move > .info-box.w500{width:100%;}

    .korean-bird-move > .info-box .info-top .tit{padding:0 0 20px 0 ; margin-bottom:20px; font-size:20px; line-height:25px;}
    .korean-bird-move > .info-box .info-top .tit:before{display:none}
    
    .korean-bird-move > .info-box .info-top .tit.sm{padding:0 0 20px 0; margin-bottom:20px; font-size:20px; line-height:25px;}
    .korean-bird-move > .info-box .info-top .tit.sm:before{display:none;} 
    
    .text-box-ab{position:relative; top:0; bottom:0; right:0; z-index:99; border-radius:10px; width:100%; font-weight: 500;}

}

@media all and (max-width:768px) {
    .kb-info {margin-bottom: 50px;}
    .kb-info .title-bg {padding: 30px; border-radius: 10px;}
    .kb-info .sub-p1 span {display: inline;}
    .kb-info .sub-h3 {margin-bottom: 5px; font-size:2.0rem;}
    .kb-info .sub-h4 {font-size:1.6rem;}
    
    .kb-info .detail-img{flex-direction: column; margin-top:20px;}
    .kb-info .detail-img .img-wrap{width:100%;}
    .kb-info .detail-img .txt-wrap{width: 100%; padding-top:10px}
    
    .kb-info .title-cover {display: flex; flex-direction: column; justify-content: space-between}
    .kb-info .movie-box{margin-top:20px; margin-left: 0; width: 100%; height:auto;}
    .kb-info .movie-box img{width:100%; height:100%;}
    
    .kb-tab > ul{width:100%; flex-wrap: wrap}
    .kb-tab > ul > li{flex: 1 1 20%; flex-shrink:0; margin:2px;}
    .kb-tab > ul > li > button{width: 100%; height: 45px; padding: 0; border:1px solid #ccc; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); border-radius: 10px;}
    .kb-tab > ul > li > button .icon {display: none;}
    .kb-tab > ul > li > button .txt {margin-top: 0;}
    .kb-tab > ul > li > button.active{width:100%; height:45px; border-radius: 10px;}
    .kb-tab > ul > li > button.active .txt { margin-top:0; margin-left:0;}
    
    .korean-bird-move > .info-box .info-top .tit{padding:0 0 15px 0; margin-bottom:15px; font-size:20px; line-height:25px;}
    .korean-bird-move > .info-box .info-top .tit:before{content: ""; display:none;}
}

@media all and (max-width:640px) {
    .kb-info {margin-bottom: 10px;}
    .kb-info .title-symbol {display:none;}
    .kb-info .title-bg {padding: 20px;}
    
    .kb-tab > ul > li{flex: 1 1 25%;}
    .korean-bird-move > .info-box .info-top .tit{font-size:18px;}
}

/* 철새연구 */
.img-box-style1 .info-box.bg01{position:relative; display: block; padding-bottom:130px;}
.img-box-style1 .info-box.bg01:before{content: ""; position:absolute; bottom:30px; right:30px; width: 287px; height: 171px; display:block; background-image: url(/nibr/images/sub/bird_center-bg01.png); background-repeat: no-repeat; background-position:center;}

/* 철새연구 > photo list */
.photo > .pic-list.w3fr {position: relative; width: 100%; display: grid; gap:20px; width: 100%; grid-template-columns: repeat(3, 1fr);}
.photo > .pic-list.w4fr {position: relative; width: 100%; display: grid; gap:20px; width: 100%; grid-template-columns: repeat(4, 1fr)}
.photo > .pic-list.w5fr {position: relative; width: 100%; display: grid; gap:20px; width: 100%; grid-template-columns: repeat(5, 1fr)}
.photo > .pic-list > li {display:block; width: 100%; vertical-align: top; overflow:hidden;}
.photo > .pic-list > li .list-img{position:relative; padding-top:53%; border-radius: 10px; overflow:hidden; background:#f5f5f5; background:url(/nibr/images/common/noimg.png)no-repeat center;}
.photo > .pic-list > li .list-img:before {content: ''; display: block; padding-bottom: 12.25%;}
.photo > .pic-list > li .list-img img{position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: .3s; transform: scale(1);}
.photo > .pic-list > li > .list-txt{position: relative; display:block; padding:10px 0 0 0;}
.photo > .pic-list > li > .list-txt .tit-infotop {text-align:center; overflow: hidden; display:block; width:100%; font-weight: 500; line-height:1.4}
.photo > .pic-list.w3fr > li > .list-txt .tit-infotop {font-size:1.8rem;}

.photo > .pic-list.style2 > li .list-img{position:relative; padding-top:53%; border-radius:10px 10px 0 0; overflow:hidden; background:#f5f5f5; background:url(/nibr/images/common/noimg.png)no-repeat center;}
.photo > .pic-list.style2 > li > .list-txt{position: relative; display:block; min-height:240px; padding:45px 20px; text-align:left; background-color:#f7f7f7; border-radius:0 0 10px 10px; margin-top:0;}
.photo > .pic-list.style2 > li > .list-txt .tit-infotop {position: absolute; top: -20px; left: 0; display:block; width:100%; font-size:18px; font-weight: 500;  z-index: 1; width: auto; border-radius: 0 5px 10px 0 ; padding:5px 20px; color: #fff; text-align: center; min-width:150px; line-height: 34px; background-color:#116a7b}

.photo > .pic-list.style3 > li .list-img{position:relative; padding-top:53%; border-radius:10px 10px 0 0; overflow:hidden; background:#f5f5f5; background:url(/nibr/images/common/noimg.png)no-repeat center;}
.photo > .pic-list.style3 > li > .list-txt{position: relative; display:block; padding:20px 0; text-align:left; margin-top:0;}
.photo > .pic-list.style3 > li > .list-txt .tit-infotop {position: absolute; top: -20px; left: 0; display:block; width:100%; font-size:18px; font-weight: 500;  z-index: 1; width: auto; border-radius: 0 5px 10px 0 ; padding:5px 20px; color: #fff; text-align: center; min-width:150px; line-height: 34px; background-color:#116a7b}

@media all and (max-width:1024px) {
    .photo > .pic-list.w3fr{gap:20px; grid-template-columns: repeat(2, 1fr);}
    .photo > .pic-list.style2 > li > .list-txt .tit-infotop {font-size:16px; min-width:120px; line-height: 30px;}
}

@media all and (max-width:768px) {
    .photo > .pic-list.w4fr,
    .photo > .pic-list.w5fr  {gap:20px; grid-template-columns: repeat(2, 1fr);}
    .photo > .pic-list > li > a .list-img {width: 100%; height:100px;}
    .photo > .pic-list > li > a .list-img:before {content: ''; display: block; padding-bottom:56.25%;}
}


@media all and (max-width:640px) {
    .photo > .pic-list.w3fr{gap:20px; grid-template-columns: repeat(1, 1fr);}
    .photo > .pic-list.style2 > li > .list-txt{min-height:auto;}
}

/*MapKorea*/
.nodisp { display : none; }
.mapcontain {width:100%; min-height:550px; background:#fafbf7; padding:50px; display:flex; justify-content: space-between; align-items: center;}
.mapcontain .mapkorea {width:35%;}
.mapcontain .maplist {width:50%;}
.mapcontain .maplist .bg_box {width:100%; min-height:450px; background:#fff; border: 1px solid #b0b0b0; padding:20px 20px; border-radius: 10px;}
.mapcontain .maplist .bg_box p.map_tit {margin:0;padding:0;line-height:30px;height:40px;font-size:20px; display:flex; align-items: center;}
.mapcontain .maplist .bg_box p.map_tit strong {color:#2946aa;font-weight:700; margin:0 5px 0 3px;}
.mapcontain .maplist .bg_box p.map_tit span {color:#2946aa;font-weight:500;}
.mapcontain .maplist .bg_box .maptable {width: 100%; height: 370px; overflow-y: auto; border-top:2px solid #000; }
.mapcontain .maplist .bg_box .maptable ul {padding:20px 0;}
.mapcontain .maplist .bg_box .maptable ul li {background:url(/nibr/images/ico/bull_map.gif) no-repeat 0 12px;padding:2px 0 2px 10px; float: left; width:49%;}
.mapcontain .map {display: inline-block; margin-bottom: 0px; }
.mapcontain .map_respond {display: none;}
.mapcontain .map .mapImg{position:relative; width:369px; height:100%; background:url(/nibr/images/sub/map_korea.png) center center no-repeat;}
.mapcontain .map .mapArea {position:absolute; cursor:pointer}
.mapcontain .map .mapArea p{padding: 14px; width: 100px; height: 57px;}
.mapcontain .map .mapArea a{position: absolute;}
.mapcontain .map .mapArea p {position:relative; color: #4c4c4c; font-size: 11pt;}

.maplist_help {margin-top:100px; height:80px; background: url(/nibr/images/ico/title-ico13.png) no-repeat top left; }
.maplist_help p {font-size:18px; padding-left:60px; padding-top:10px;}

@media all and (max-width:1024px){
	.mapcontain {width:100%; min-height:auto; padding:30px;}
	.mapcontain .mapkorea {width:40%;}
	.mapcontain .maplist {width:55%;}
	.mapcontain .maplist .bg_box {min-height:420px;}

	.mapcontain .map {display: none;}

	.mapcontain .map_respond {width: 100%; overflow: hidden; display: block; }
    .mapcontain .map_respond ul{display:flex; flex-wrap: wrap; justify-content: space-between;}
    .mapcontain .map_respond ul li{width:calc(50% - 4px); margin:2px}
	.mapcontain .map_respond ul li a {display:block; width: 100%; line-height: 40px; background-color: #e8eae4; border: 1px solid #ccc; text-align: center; border-radius:5px;}
	.mapcontain .maplist .bg_box .maptable {height: 340px;}
	.mapcontain .map_respond ul li a:hover {background-color: #070707;color: #fff;border: 1px solid #070707;}
}

@media all and (max-width:768px){
	.mapcontain {flex-direction: column;}
	.mapcontain .mapkorea {width:100%;}
	.mapcontain .maplist {width:100%;}

	.mapcontain .map_respond {width: 100%; overflow: hidden; display: block; }
    .mapcontain .map_respond ul{display:flex; flex-wrap: wrap; justify-content: flex-start; margin-bottom:8px;}
    .mapcontain .map_respond ul li{width:calc(20% - 2px); flex-shrink: 1; margin:0 1px 2px 1px;}
}

@media all and (max-width:580px){
    .mapcontain .map_respond ul li{width:calc(50% - 2px);}
}

/* 자료실 > 교과서 수록생물 */
.info-item{position: relative}
.class-textbook{position: relative; width:818px; height:325px; display:flex; margin:40px auto; padding:25px; background:url(/nibr/images/sub/textbook-img02.png) no-repeat 0 0;}
.class-textbook .class-item{position: relative; display:flex; flex-direction: column; margin-right:175px}
.class-textbook .class-item strong{font-size:2.0rem; color:#fff; display:flex; justify-content: center; align-items: center; font-weight: 500;}
.class-textbook .class-item .class-cate{position:absolute; bottom:-25px; left:50%; margin-left:-65px; border-radius: 60px; height:40px; width:130px; line-height:40px; background-color:#fff; border:2px solid #1b3c89; text-align:center;}
.class-textbook .class-item:last-child {margin-right:0}
.class-textbook .class-item:nth-child(1) strong{width:191px; height:191px;}
.class-textbook .class-item:nth-child(2) strong{width:135px; height:135px; margin-top:28px}
.class-textbook .class-item:nth-child(3) strong{width:93px; height:93px; margin-top:49px}

.class-textbook .class-item:nth-child(2) .class-cate{border:2px solid #458d0f;}
.class-textbook .class-item:nth-child(3) .class-cate{border:2px solid #00788c;}

.list_thumnail_pop2 {width: 100%; overflow: hidden; clear: both; height: auto;}
.list_thumnail_pop2 .fltleft p.imgcnt {border: 1px solid #d5d5d5; width: 152px; height: 108px; background:url(/nibr/images/common/noimg.png)no-repeat center;}
.list_thumnail_pop2 .fltleft {float: left; width: 170px;}
.list_thumnail_pop2 .fltright {float: right; width: calc(100% - 170px); text-align: left;}


@media all and (max-width:1024px){
	.class-textbook{width:569px; background:url(/nibr/images/sub/textbook-img02-m.png) no-repeat 0 0;}
    .class-textbook .class-item {margin-right:51px}
}

@media all and (max-width:640px){
	.class-textbook{width:100%; height:auto; background:none; justify-content: center; margin:30px auto; padding:0;}
    .class-textbook .class-item {margin-right:30px}
    .class-textbook .class-item .class-cate{position:relative; bottom:0; margin-left:-60px; border-radius: 60px; width:120px; margin-top:10px;}
    .class-textbook .class-item strong{width:120px; height:120px; border-radius: 120px; font-size:1.6rem}
    .class-textbook .class-item:nth-child(1) strong{width:120px; height:120px; background-color:#1b3c89}
    .class-textbook .class-item:nth-child(2) strong{width:120px; height:120px; background-color:#458d0f; margin-top:0}
    .class-textbook .class-item:nth-child(3) strong{width:120px; height:120px; background-color:#00788c; margin-top:0}
}

@media all and (max-width:480px){
    .class-textbook{display:flex; justify-content: space-between;}
    .class-textbook .class-item {margin-right:0}
    .class-textbook .class-item .class-cate{position:relative; bottom:0; margin-left:-50px; width:100%;}
    .class-textbook .class-item strong{width:100px; height:100px;}
    .class-textbook .class-item:nth-child(1) strong{width:100px; height:100px; background-color:#1b3c89}
    .class-textbook .class-item:nth-child(2) strong{width:100px; height:100px; background-color:#458d0f; margin-top:0}
    .class-textbook .class-item:nth-child(3) strong{width:100px; height:100px; background-color:#00788c; margin-top:0}
}


/* 국가가지정관리하는 생물 > 국가보호종 */
.organ-box{position:relative; width: 100%;}
.organ-list{display: flex; justify-content: space-between;}
.organ-list > li{position:relative; width: calc(25% - 20px); text-align: center; background: #fff; border:2px solid #088486; border-radius: 20px;transition: all 0.3s ease-in-out; min-height: 327px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);}
.organ-list > li > div{position: relative; display: flex; align-items: center; flex-direction: column; width: 100%; height: 100%; padding: 40px 25px 25px;}
.organ-list > li > div > .logo-wrap{display:flex; align-items: center; justify-content: center; background-color:#fff; padding:0 20px; height:50px; min-width:200px; border-radius: 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); margin-bottom:15px;}

.organ-list > li > div > .txt-wrap{min-height:210px; border-bottom:1px dashed #ccc; padding-bottom:0; margin-bottom:25px; width:100%; display:block;}
.organ-list > li > div > .txt-wrap > p{padding-top:20px; line-height:1.5}
.organ-list > li > div > .txt-wrap .tit{font-size:21px; display:block; font-weight:700; margin-bottom:15px; letter-spacing: -0.05em;}
.organ-list > li > div > .txt-wrap .txt-num{display: flex; align-items: center; justify-content: center; width: 100%; height:50px; line-height: 50px; text-align: center; border-radius: 60px; font-size: 25px; font-weight: 500; color: #fff; background-color: #088486;}

.organ-list > li .btn-warp{display:block; width:100%;}
.organ-list > li .btn-warp > a{width:100%; margin-top:5px;}

.organ-list > li:before,
.organ-list > li:after {position: absolute; content: ""; right: 0; top: 0; background: #088486;transition: all 0.3s ease;}
.organ-list > li:before {height: 0%; width: 2px;}
.organ-list > li:after {width: 0%; height: 2px;}
.organ-list > li:hover{border-radius: 0; background-color:#edf7f7;}
.organ-list > li:hover:before {height: 100%;}
.organ-list > li:hover:after {width: 100%;}

.organ-list > li > div:before,
.organ-list > li > div:after {position: absolute; content: ""; left: 0; bottom: 0; background: #088486;transition: all 0.3s ease;}
.organ-list > li > div:before {width: 2px; height: 0%;}
.organ-list > li > div:after {width: 0%;height: 2px;}
.organ-list > li > div:hover:before {height: 100%;}
.organ-list > li > div:hover:after {width: 100%;}


@media all and (max-width:1200px){    
    .organ-list{flex-wrap: wrap;}
    .organ-list > li{position:relative; width: calc(50% - 20px); margin-bottom:40px;}
    
    .organ-list > li > div{flex-direction: column;}
    .organ-list > li > div > .logo-wrap{min-width:100%;}
}

@media all and (max-width:640px){    
    .organ-list{flex-wrap: wrap;}
    .organ-list > li{position:relative; width:100%; margin-bottom:40px;}
    
    .organ-list > li > div{flex-direction: column;}
    .organ-list > li > div > .logo-wrap{min-width:100%;}
}


/**** 키워트 검색하기 ****/
.frame, .bar {fill: none;}
.field-box {position:relative; display:flex; width:100%; margin-bottom:50px;}
.field-box li label{display: inline-block; cursor: pointer; width:100%; padding:130px 20px 20px 20px; text-align:center; font-size:18px; border-radius: 20px; border: 1px solid #cfdcee; transition: 0.4s; background-color:#f1f5fb; background-repeat:no-repeat; background-position:center 25px;}
.field-box li.btn-source01 label{background-image:url('/nibr/images/sub/db_icon01.png');}
.field-box li.btn-source02 label{background-image:url('/nibr/images/sub/db_icon02.png');}
.field-box li.btn-source03 label{background-image:url('/nibr/images/sub/db_icon03.png');}
.field-box li.btn-source04 label{background-image:url('/nibr/images/sub/db_icon04.png');}
.field-box div:hover label,
.field-box div input:checked + label {background-color:#1b3c89; color:#fff; border: 1px solid #1b3c89;}
.field-box div input[type=radio] {display: none; height:30px !important; margin-right:10px;}

.field-box > li > ul{position:relative; width:100%; display:flex;}
.field-box > li > ul > li{width:calc(100% / 3 - 20px); margin-right:20px;}
.field-box li .source-box{display:block; background: #f1f5fb; border: 1px solid #cfdcee; color:#0c2b5a; padding:5px 20px; font-weight: 500; margin-top:10px; border-radius:5px; text-align:center;}
.field-box li:nth-child(1) .source-box{margin-right:20px;}
.field-box > li:nth-child(1) { width:calc(75% + 20px); }
.field-box > li:nth-child(2) { width:calc(25% - 20px);} 
    
.kw-detail {position:relative;}
.kw-dtail img {text-align:center;}
.kw-dtail .left {width:calc(100% - 240px);float:left;margin-right:20px;border-right: 1px dashed #d8d8d8;height: 100%; padding-right:20px;}
.kw-dtail .right {float:left;width:220px;/* border: 1px solid #b6b6b6; */}
.kw-dtail .right ul {padding:0 10px;}
.kw-dtail .right ul li{position:relative;letter-spacing:-0.5px;}
.kw-dtail .right div.top_tt{background: #f5f5f5; padding:20px 15px; border-radius:0; border:1px solid lightgray;}
.kw-dtail .right div.top_tt strong{position: relative; display:block; font-weight: 500; font-size:15px; text-align:left; padding-left:13px;}
.kw-dtail .right div.top_tt strong:after{content:'';position:absolute; top: 8px;left: 0;width: 0px;height: 0px;border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid none;border-left: 5px solid #0c2b5a;}
.kw-dtail .right div.top_tt > button.btn{font-size:13px;}
.kw-dtail .right div.top_tt > .ect_txt{padding:0 0 10px 13px; font-size:13px;}
.kw-dtail .right div.top_tt > ul{border-top:1px dashed rgba(0, 0, 0, 0.5); margin-top:15px; padding-top:10px;}
.kw-dtail .right .del_btn {background:url('/nibr/images/delete_con_w.png')no-repeat; width:15px; height:15px; margin-left:10px;}
.kw-dtail .right .text-box01 li {padding-left:5px;}
.kw-dtail .right .text-box01 li strong {color:#3372d1;}
.kw-dtail .right .text-box01 li:nth-child(1):before {content:''; width:20px; height:20px; background:#3372d1; position:absolute; left:-20px; top:0; border-radius:30px;}
.kw-dtail .right .text-box01 li:nth-child(2):before {content:''; width:20px; height:1px; background:#3372d1; position:absolute; left:-20px; top:12px; border-radius:30px;} 
.kw-dtail .w2 {position:relative; width:calc(100% / 2); text-align:center; padding:30px;}
.kw-dtail .w2.rline{border-right:1px dashed #cdcdcd;}
.kw-dtail .w2 .text {display:inline-block; font-size:15px;}
.kw-dtail .circle_progress_wrap {position: relative; width: 100%;}
.kw-dtail .value {position: absolute;left: 0; top: 0;text-align: center; font-weight: 500;  font-size: 16px; background-color:#fff ; display:inline; line-height: 37px;width: 100%; border-radius: 5px; border:1px solid #ccc;}


.plus-box {background: #f9f9f9;padding:10px 20px; margin:10px 0;position: relative; border: 1px solid #d8d8d8;}
.plus-box .delete {background:url('/nibr/images/sub/delete_con.png')no-repeat; width:16px; height:16px; position: absolute; right: 20px;bottom: 20px;}

.tooltip-list {position: relative; display: inline-block; margin: auto; font-size: 14px;}
.tooltip-list .tooltip-content {visibility: hidden; width:235px; padding:15px; background-color: #7e7e7e;color: white;text-align:left;position: absolute;z-index: 1;top: 32px;left: -24px;font-weight:300;}
.tooltip-list .tooltip-content:before {content:'';position:absolute;top: -6px;left: 29px;width: 0px;height: 0px;border-top: 6px solid none;border-bottom: 6px solid #7e7e7e;border-right: 6px solid transparent;border-left: 6px solid transparent;}
.tooltip-list:hover .tooltip-content { visibility: visible; }

.tooltip-comment {position: relative;display: inline-block;margin: auto;font-size: 14px; line-height:24px;}
.tooltip-comment .tooltip-content {visibility: hidden;width: 313px; padding:5px 10px; background-color: #0b2f54;padding: 0;color: white; text-align: center;position: absolute;z-index: 1;top:-35px;left:0;  font-weight:300;}
.tooltip-comment .tooltip-content:before {content:''; position:absolute; bottom:-5px; left:30px; width: 0px;height: 0px;  border-top:5px solid #0b2f54;  border-bottom:6px solid none;border-right: 6px solid transparent;  border-left: 6px solid  transparent;}
.tooltip-comment:hover .tooltip-content { visibility: visible; }
.nodisp {display: none;}

@media all and (max-width:1024px){ 
    .kw-dtail .d-flex{flex-direction: column; }
    .kw-dtail .tit.d-flex{align-items: flex-start}
    .kw-dtail .w2 {position:relative; width:100%; text-align:left; padding:30px;}
    .kw-dtail .w2.rline{border-right:0 dashed #cdcdcd; border-bottom:1px dashed #cdcdcd;}

    .kw-dtail .left {width:100%; float:none; margin-right:0; border-right: 0 dashed #d8d8d8; height: 100%; padding-right:0;}
    .kw-dtail .right {float:none; margin-top:10px; width:100%;}
    
    .tooltip-list {position: relative; display: inline-block; margin: 0; font-size: 14px;}
    .plus-box {background: #f9f9f9;padding:10px 20px 40px 10px;}
}

@media all and (max-width:768px){ 
    .field-box {justify-content: center; flex-direction: column; flex-wrap: wrap;}
    .field-box li .source-box{display:block; background: #f1f5fb; border: 1px solid #cfdcee; color:#0c2b5a; padding:5px 20px; font-weight: 500; margin-top:10px; border-radius:5px; text-align:center;}
    .field-box li label{width:100%; padding:90px 20px 20px 20px; text-align:center; font-size:15px; border: 1px solid #cfdcee;  background-size:60px;}
    .field-box li:nth-child(1) .source-box{margin-right:0; margin-bottom:20px;}
    .field-box > li:nth-child(1) {width:100%}
    .field-box > li:nth-child(2) {width:100%} 

    .field-box > li > ul{position:relative; width:100%; display:flex;}
    .field-box > li > ul > li{width:calc(33.333% - 20px); margin: 0 10px;}
}

/* 기관AIP > 순서도 */
.api-warp .step-area{position: relative; }
.step-top-txt{display: flex; align-items: center; color:#ea5449;}
ul.step-list {display: flex; flex-direction: row; flex-wrap: wrap; margin-top:30px;}
ul.step-list li {position: relative; border: 3px solid #222; background-color:#fff; border-radius: 20px 60px 20px 20px; height: 247px; width: calc(25% - 20px); margin: 0 20px 20px 0; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);}
ul.step-list li:after {content: ''; position: absolute; width: 70px; height: 60px; bottom: 30px; left: 32px;}
ul.step-list .m1:after {background: url(/nibr/images/ico/step-list01.png) no-repeat right;}
ul.step-list .m2:after {background: url(/nibr/images/ico/step-list02.png) no-repeat right;}
ul.step-list .m3:after {background: url(/nibr/images/ico/step-list03.png) no-repeat right;}
ul.step-list .m4:after {background: url(/nibr/images/ico/step-list04.png) no-repeat right;}
ul.step-list .m5:after {background: url(/nibr/images/ico/step-list05.png) no-repeat right;}
ul.step-list .m6:after {background: url(/nibr/images/ico/step-list06.png) no-repeat right;}
ul.step-list li:before {content: ""; position: absolute; top: 50%; right: -20px; width: 45px; height: 45px; border:1px solid #f2f2f2; border-radius: 50px; background:#fff url(/nibr/images/ico/step_arr2.png) no-repeat center center; background-size:7px 12px; transform: translateY(-50%); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); z-index:99;}
ul.step-list li:last-child:before {content: ""; display:none;}
ul.step-list .txt {position: absolute; top: 40px; left: 32px;padding-right:32px}
ul.step-list li h4 {display: block; font-size: 20px; font-weight: 700; color:#222;}
ul.step-list li span {font-size: 15px; display: block; text-transform: uppercase;}


/* 기관AIP > 담당자 안내 */
.manager-info{padding:0 0; border: 1px solid #ccc; background-color:#f9f9f9; margin-top:50px;}
.manager-info h3{text-align:left; padding: 15px 30px; background-color: #fff; border-bottom: 1px solid #ccc;}
.manager-info ul{padding:15px 30px; display:flex; align-items: center; justify-content: flex-start}
.manager-info ul li{width:auto; margin:2px 78px 5px 0; line-height: 18px; display:flex; align-items: center;}
.manager-info ul li span{position:relative; margin-right:5px; font-size:18px; line-height:18px; color:#222; letter-spacing:0; font-weight:500;}
.manager-info ul li span.info-item{padding:0 20px 0 5px}

@media all and (max-width:1024px){ 
    ul.step-list li {border:2px solid #222; border-radius: 20px 60px 20px 20px; width: calc(50% - 20px);}
    ul.step-list li h4 {font-size: 18px;}
    .step-top-txt{display: flex; align-items: flex-start; color:#ea5449;}
    .step-top-txt .material-icons-outlined{margin-top:5px;}
    .manager-info h3{padding: 15px 20px;}
    .manager-info ul{flex-direction: column; padding: 15 20px;}
    .manager-info ul li{width:100%; margin:8px 0 5px 0; font-size:16px; line-height: 18px;}
    .manager-info ul li span{position:relative; margin-right:5px; font-size:16px; line-height:18px; color:#222; letter-spacing:0; font-weight:500;}
    .manager-info ul li span.info-item{min-width:80px; padding-left:5px;}
}

@media all and (max-width:540px){ 
    ul.step-list li {border:2px solid #222; border-radius: 20px 60px 20px 20px;  height: 200px; width: 100%; margin-right:0;}
    ul.step-list li h4 {font-size: 18px;}
    ul.step-list li:before {content: ""; position: absolute; top:180px; left: 50%; transform: translate( 0%); transform: rotate( 90deg ); margin-left:-22px;}

}

/* 국가생물다양성위원회 */
.cmt-wrap {text-align:center; position:relative; margin-top:40px;}
.cmt-wrap .cmt-one {position:relative; margin:0 auto; font-weight:500; color: #fff; background-color: #1b3c89; min-width:260px; display:inline-block; border-radius:10px; padding:20px 30px; box-shadow: 1px 5px 10px 5px rgba(0, 0, 0, 0.2);}
.cmt-wrap .cmt-one :after {content: ""; position: absolute; top: 90px; left: 50%; width: 1px; height:264px; background: #d1d1d1; z-index:-1;}
.cmt-wrap .cmt-one span{display:block; font-size:14px;}

.cmt-wrap .cmt-two{display:flex; justify-content: center; align-items: center; width:100%; margin-top:60px;}
.cmt-wrap .cmt-two > li{width: 50%; text-align:center;}
.cmt-wrap .cmt-two > li div.innertxt{color: #fff; background-color: #079fae; font-weight:500; font-size:16px; display:inline-block; border-radius:10px; padding:20px 30px; width:260px; box-shadow: 1px 5px 10px 5px rgba(0, 0, 0, 0.2);}
.cmt-wrap .cmt-two > li div.innertxt span{display:block; font-size:14px;}

.cmt-wrap .cmt-thr{display:flex;}
.cmt-wrap .cmt-thr > li:nth-child(1){width:73%}
.cmt-wrap .cmt-thr > li:nth-child(2){width:25%; margin-left:2%;}
.cmt-wrap .cmt-thr > li .thr-txt {position:relative; display:block; width:120px; height: 120px; border-radius:120px; background: #fff; line-height:120px; font-weight:bold; margin: 80px auto;}
.cmt-wrap .cmt-thr > li:nth-child(1) .thr-txt {margin:50px 0 80px 70px; border:3px solid #1b3c89;}
.cmt-wrap .cmt-thr > li:nth-child(2) .thr-txt {border:3px solid #079fae;}
.cmt-wrap .cmt-thr > li .thr-list{display:flex;}
.cmt-wrap .cmt-thr > li .thr-list > li {margin-right:3px; margin-bottom: 50px;}
.cmt-wrap .cmt-thr > li:nth-child(1)  .thr-list > li {width: calc(100% / 6);}
.cmt-wrap .cmt-thr > li:nth-child(2)  .thr-list > li {width: calc(100% / 2);}

.cmt-wrap .cmt-thr > li .thr-txt {display:block; width:120px; height: 120px; border-radius:120px; background: #fff; line-height:120px; font-weight:bold; margin: 50px auto 80px;}
.cmt-wrap .cmt-thr > li:nth-child(1) .thr-txt:after {content: ""; position: absolute; top: 55px; right: -358px; width: 356px; height: 1px; background: #d1d1d1;}
.cmt-wrap .cmt-thr > li:nth-child(1) .thr-txt:before {content: ""; position: absolute; top: 100px; left: 50%; width: 1px; height:68px; background: #d1d1d1; z-index:-1;}
.cmt-wrap .cmt-thr > li:nth-child(2) .thr-txt:after {content: ""; position: absolute; top: 55px; left: -350px; width: 348px; height: 1px; background: #d1d1d1;}
.cmt-wrap .cmt-thr > li:nth-child(2) .thr-txt:before {content: ""; position: absolute; top: 100px; left: 50%; width: 1px; height:68px; background: #d1d1d1; z-index:-1;}

.cmt-wrap .cmt-thr > li .thr-list > li {position:relative; display:block;}
.cmt-wrap .cmt-thr > li .thr-list > li:after {content: ""; position: absolute; top: -30px; left: 50%; width: 1px; height:30px; background: #d1d1d1; z-index:-1;}
.cmt-wrap .cmt-thr > li .thr-list > li:before {content: ""; position: absolute; top: -30px; right: -68px; width: 134px; height: 1px; background: #d1d1d1;}
.cmt-wrap .cmt-thr > li .thr-list > li:last-child:before{width:0; height:0;}
.cmt-wrap .cmt-thr > li .thr-list > li strong{height:70px; font-weight:500; display:block; margin-bottom:20px; text-align:center; color: #fff; line-height: 1.4; border-radius:5px; padding:15px 0;}
.cmt-wrap .cmt-thr > li .thr-list > li .tit-blue {background: #6d8bb3;}
.cmt-wrap .cmt-thr > li .thr-list > li .tit-green {background: #3c84b3;}
.cmt-wrap .cmt-thr > li .thr-list > li .pt25{padding-top:25px;}
.cmt-wrap .cmt-thr .line_box > li { margin-bottom: 4px; border: 1px solid #ddd; padding: 10px 0; text-align: center; background: #f6f6f6; word-break: break-all;font-size:13px}

/* 국가생물종목록 실무위원회 주요 기능 */
.function-list {position:relative; border-top:2px solid #000;}
.function-list > ul  > li {padding:35px 0; border-bottom:1px solid #c8c8c8; overflow:hidden;}
.function-list > ul  > li  .list-tit{display:inline-block; background:#222; font-size:18px; color:#fff; padding: 5px 40px; margin-bottom:15px; border-radius:5px 5px 30px 5px; text-align: center; font-weight: 500;}
.function-list > ul  > li  .list-stit{display:block; color:#2946aa; font-size:18px; margin-bottom:5px; font-weight: 700;}

/* 국가생물종목록 구축 성과 */
.result-warp{padding:50px; width:100%; display:block; overflow:hidden; text-align:center;}
.result-warp ul{display:flex; justify-content: center; align-items: center;}
.result-warp ul li{margin:0 -15px;}
.result-warp .result-box {width:250px; height:250px; display:block; border-radius:250px; padding:70px 0 0 0; border:0; text-align:center; }
.result-warp li:nth-child(1) .result-box{background:#00a4db;}
.result-warp li:nth-child(2) .result-box{background: rgba(2,20,37,0.5);}
.result-warp li:nth-child(3) .result-box{background: rgba(12,43,90,0.8);}
.result-warp .result-box p {line-height:1.5; margin-top:10px; color:#fff;}
.result-warp .result-box i{height:60px; width:70px; margin:0 auto; display:block;}
.result-warp .result-box .ico1{background:url(/nibr/images/ico/icon_result01.png) 50% top no-repeat;}
.result-warp .result-box .ico2{background:url(/nibr/images/ico/icon_result02.png) 50% top no-repeat;}
.result-warp .result-box .ico3{background:url(/nibr/images/ico/icon_result03.png) 50% top no-repeat;}

.csi-btn-wrap {padding: 0; margin-top:20px; display:flex;}
.csi-btn-wrap .small-link {display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;position: relative; width: auto;height:4.8rem; margin-right:5px; padding:0 1.6rem;border:0.1rem solid #222; background: #222; border-radius:0.6rem; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); transition: all .3s;}
.csi-btn-wrap .small-link .link {color: #fff; font-weight: 400; line-height:1.4;}
.csi-btn-wrap .small-link:hover {background-color: #1b3c89;}
.csi-btn-wrap .material-icons-outlined {width: 20px; height: 20px; color: #fff; font-size:1.8rem; font-weight: 400}

@media all and (max-width:1024px){ 
    /* 국가생물다양성위원회 */
    .cmt-wrap {text-align:left; position:relative; margin-top:40px;}
    .cmt-wrap .cmt-one {position:relative; margin:0; text-align:center;}
    .cmt-wrap .cmt-one :after {content: ""; position: absolute; top: 90px; left: 50%; width: 1px; height:264px; background: #d1d1d1; z-index:-1;}
    .cmt-wrap .cmt-one span{display:block; font-size:14px;}

    .cmt-wrap .cmt-two{display:flex; justify-content: flex-start;  margin-top:30px;}
    .cmt-wrap .cmt-two > li{width: 260px; text-align:center;}

    .cmt-wrap .cmt-thr{display:flex; flex-direction: column}
    .cmt-wrap .cmt-thr > li:nth-child(1){width:100%}
    .cmt-wrap .cmt-thr > li:nth-child(2){width:100%; margin-left:0;}
    .cmt-wrap .cmt-thr > li .thr-txt {text-align:center; margin:30px 0 30px 70px;}
    .cmt-wrap .cmt-thr > li:nth-child(1) .thr-txt {margin:30px 0 30px 70px;}
    .cmt-wrap .cmt-thr > li .thr-list{display:flex; flex-direction: column}
    .cmt-wrap .cmt-thr > li .thr-list > li {margin-right:0; margin-left:170px; margin-bottom: 10px;}
    .cmt-wrap .cmt-thr > li:nth-child(1)  .thr-list > li {width: 200px;}
    .cmt-wrap .cmt-thr > li:nth-child(2)  .thr-list > li {width: 200px;}

    .cmt-wrap .cmt-thr > li:nth-child(1) .thr-txt:after {height: 0;}
    .cmt-wrap .cmt-thr > li:nth-child(1) .thr-txt:before {height:782px;}
    .cmt-wrap .cmt-thr > li:nth-child(2) .thr-txt:after {width: 0; height: 0;}
    .cmt-wrap .cmt-thr > li:nth-child(2) .thr-txt:before {height:234px;}

    .cmt-wrap .cmt-thr > li .thr-list > li:after {width: 0;}
    .cmt-wrap .cmt-thr > li .thr-list > li:before {top: 25px; left:-40px; right: 0; width: 40px;}
    .cmt-wrap .cmt-thr > li .thr-list > li:last-child:before{width:40px; height:1px;}
    .cmt-wrap .cmt-thr > li .thr-list > li strong{height:50px; margin-bottom:5px; padding:15px 0;}
    .cmt-wrap .cmt-thr > li .thr-list > li strong br{display:none}
    .cmt-wrap .cmt-thr > li .thr-list > li .pt25{padding-top:15px !important;}
    
    .result-warp{padding:40px 20px;}
	.result-warp ul{flex-direction: column;}
	.result-warp ul li{margin:-10px 0;}
	.result-warp .result-box p {font-size: 15px;}
}

@media all and (max-width:768px){ 
    .cmt-wrap .cmt-thr > li:nth-child(1)  .thr-list > li {width: 150px;}
    .cmt-wrap .cmt-thr > li:nth-child(2)  .thr-list > li {width: 150px;}
    
    .csi-btn-wrap {padding: 0; margin-top:20px; display:flex; flex-direction:column;}
    .csi-btn-wrap .small-link {width: 100%; margin-bottom:10px;}
}

/* 개인정보처리방침 > 라벨링 박스 */
.label-box {width: 100%; display: flex; flex-flow: row wrap;justify-content:space-between;}
.label-item {position: relative; width: 30%; height: 320px; border: 1px solid #ccc; box-shadow: 0 2px 8px rgb(0 0 0 / 20%); padding: 20px 30px; border-radius: 10px; text-align: center; cursor: pointer;  margin-bottom:30px;}
.label-txt {width: 100%; z-index: 1; margin-top:20px; text-align:center;}
.label-top { width: 100%; color:#1b3c89; font-weight: 700; font-size:18px; display:block; margin-bottom:10px;}

/* 개인정보처리방침 > 박스 */
.list-index {position: relative; display:flex; flex-wrap: wrap; text-align: left; width:100%;}
.list-index > li{width: 50%; padding: 5px 0; letter-spacing: -0.1em;}
.list-index > li img {width: 35px; height: 35px; margin-right: 5px;} 

.tit_privacy {position: relative; display:block; font-size:18px; padding:0 0 0 40px; margin-bottom: 10px; font-weight: 500} 
.tit_privacy:after {content: ""; position: absolute; left:0; top:-2px; width:35px; height:35px; background-position: left center; background-repeat:no-repeat; background-size:35px 35px;}
.tit_privacy.tit01:after {background-image:url(/nibr/images/ico/ico_privacy_01.png);}
.tit_privacy.tit02:after {background-image:url(/nibr/images/ico/ico_privacy_02.png);}
.tit_privacy.tit03:after {background-image:url(/nibr/images/ico/ico_privacy_03.png);}
.tit_privacy.tit04:after {background-image:url(/nibr/images/ico/ico_privacy_04.png);}
.tit_privacy.tit05:after {background-image:url(/nibr/images/ico/ico_privacy_05.png);}
.tit_privacy.tit06:after {background-image:url(/nibr/images/ico/ico_privacy_06.png);}
.tit_privacy.tit07:after {background-image:url(/nibr/images/ico/ico_privacy_07.png);}
.tit_privacy.tit08:after {background-image:url(/nibr/images/ico/ico_privacy_08.png);}
.tit_privacy.tit09:after {background-image:url(/nibr/images/ico/ico_privacy_09.png);}
.tit_privacy.tit10:after {background-image:url(/nibr/images/ico/ico_privacy_10.png);}
.tit_privacy.tit11:after {background-image:url(/nibr/images/ico/ico_privacy_11.png);}
.tit_privacy.tit12:after {background-image:url(/nibr/images/ico/ico_privacy_14.png);}
.tit_privacy.tit13:after {background-image:url(/nibr/images/ico/ico_privacy_15.png);}
.tit_privacy.tit14:after {background-image:url(/nibr/images/ico/ico_privacy_16.png);}

ul.listprivacy2 li {padding:3px 0 3px 0px;}
ul.listprivacy2 li ul li {background: none;padding:0px 0 0 15px;position:relative;margin-bottom:5px;}
ul.listprivacy2 li ul li span {position:absolute; top:0; left:0;} 
[id^="privacy_article"] {margin-top: -120px;padding-top: 120px;}
.boxgray2 {padding: 20px 10px;border: 1px solid #d8d8d8;background: #f9f9f9;text-align: center;margin-bottom: 25px;} 

@media (max-width:1024px) {
	[id^="privacy_article"] {margin-top: -65px; padding-top: 65px;}
    .label-item {position: relative; width:48%;}
    .list-index > li{width: 100%;}
} 

@media (max-width:768px) {
	.label-item {position: relative; width:100%; height:auto}
}


/* 저작권보호정책 */
.nuri-list {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin:40px 0; width:100%;}
.nuri-list > li {display: flex; width:calc(25% - 20px); align-items: center; padding:30px 10px; border: 2px solid #222; border-radius:10px; flex-direction: column; height: 270px;}
.nuri-list .nuri-text ul > li {font-size:14px; letter-spacing:-0.1rem}
.nuri-text span.tit {font-weight: 500; display:block; text-align:center; background-color:#f2f2f2; padding:3px 15px; border-radius: 5px; margin:20px 0;}

@media (max-width:1024px) {
    .nuri-list {gap: 10px;}
	.nuri-list > li {width:calc(50% - 10px);}
}

@media (max-width:640px) {
    .nuri-list {gap: 0;}
	.nuri-list > li {width:100%; margin-bottom:20px;}
    .btn_w.copyright a.btn{width:100%;}
} 

/* 서비스안내 */
.service-wrap *[class*=service-box]{margin-bottom:30px}
.service-wrap *[class*=service-box] .btn{margin:2px}
.service-box1 {background:#fff url(/nibr/images/ico/box_service01.png) no-repeat 50px 30px;}
.service-box2 {background:#fff url(/nibr/images/ico/box_service02.png) no-repeat 50px 30px;}
.service-box3 {background:#fff url(/nibr/images/ico/box_service03.png) no-repeat 50px 30px;}
.service-box4 {background:#fff url(/nibr/images/ico/box_service04.png) no-repeat 50px 30px;}
.service-box5 {background:#fff url(/nibr/images/ico/box_service05.png) no-repeat 50px 30px;}
.service-box6 {background:#fff url(/nibr/images/ico/box_service06.png) no-repeat 50px 30px;}
dl.service {padding:0 0 0 160px;}
dl.service dd {padding:10px 0;}

@media (max-width:768px) {
	dl.service {padding:100px 0 0 0; text-align:center}
    dl.service dt{text-align:center; width:100%; display:block;}
    .service-box1, 
    .service-box2, 
    .service-box3, 
    .service-box4, 
    .service-box5, 
    .service-box6 {background-position: center 30px;}
}

/* 문의처 */
.help-desk{display:flex; align-items: stretch; gap: 40px; width:100%;}
.help-desk .col1 {display:flex; gap:40px; max-width:680px; width:60%; flex-direction: column;}
.help-desk .col2 {max-width:480px; width:40%;}
.help-desk .box {border-radius:20px; padding:75px 70px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, .1);}
.help-desk .label {padding: 4px 16px; border-radius:30px; font-size:18px; color:#FFF; letter-spacing:0;}
.help-desk .box .txt{margin-top:15px; font-size: 30px; font-weight: 600; line-height: 150%;}

.help-desk .b1 {background:#EAFAF2 url(/nibr/images/ico/info-ico01.png) calc(95% - 30px) calc(85% - 30px) no-repeat; border: 1px solid #3ED087;}
.help-desk .b2 { background:#e6f1fd url(/nibr/images/ico/info-ico02.png) calc(95% - 30px) calc(85% - 30px) no-repeat; border: 1px solid #4690e2;}
.help-desk .b3 {background:#F4F6F9 url(/nibr/images/ico/info-ico03.png) calc(50% - 0px) calc(85% - 30px) no-repeat; height: 100%; border: 1px solid #ccc; justify-content: space-between}

.help-desk .b1 .label{background:#3ED087;}
.help-desk .b2 .label{ background:#2866AB;}
.help-desk .b3 .label{background:#25CAD3;}

@media (max-width:1024px) {
    .help-desk{display:flex; flex-direction: column; align-items: stretch; gap: 40px; width:100%;}
    .help-desk .col1 {display:flex; gap:40px; max-width:100%; width:100%; flex-direction: column;}
    .help-desk .col2 {max-width:100%; width:100%;}
    .help-desk .box {border-radius:20px; padding:50px 40px;}
    .help-desk .b1,
    .help-desk .b2,
    .help-desk .b3{background-size:110px 110px; background-position:calc(95% - 30px) calc(50% + 5px);}
    .help-desk .box .txt{margin-top:10px; font-size: 25px; font-weight:700;}
}

@media (max-width:500px) {
    .help-desk{gap: 20px;}
    .help-desk .col1 {gap:20px;}
    .help-desk .box {padding:40px; text-align:center;}
    .help-desk .b1,
    .help-desk .b2,
    .help-desk .b3{background-image:none;}
}

/* 2024.03.19 추가 */
.btn-group > div{position: relative; display:flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 20px 0 40px 0;}
.btn-group > div > a,
.btn-group > div > select{flex-grow: 1; flex-shrink: 0;}

.btn-group.st1 > div > a,
.btn-group.st1 > div > select{flex-grow: 0; flex-shrink: 0;}

.open-img{position: relative; display:block; margin-top:10px; width: 100%; }

/* 2024.03.25 k-bon 콘텐츠 추가 */
.kbon-warp ul.step-list .m1:after {background: url(/nibr/images/ico/kbon-ico01.png) no-repeat right;}
.kbon-warp ul.step-list .m2:after {background: url(/nibr/images/ico/kbon-ico02.png) no-repeat right;}
.kbon-warp ul.step-list .m3:after {background: url(/nibr/images/ico/kbon-ico03.png) no-repeat right;}
.kbon-warp ul.step-list .m4:after {background: url(/nibr/images/ico/kbon-ico04.png) no-repeat right;}

.selection-list{overflow:hidden; margin-top:15px;}
.selection-list .list{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; margin-right:calc(50px * -1);}
.selection-list .list > li{flex:0 1 20%; box-sizing:border-box; position:relative; margin-top:0px; margin-bottom:10px; padding-right:50px;}
.selection-list .list > li span{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; min-height:115px; height:100%; padding:75px 10px 20px 10px; box-sizing:border-box; background-color:#f1f5fb; border:1px solid #1b3c89; /*border-top-width:4px;*/ border-radius:10px; text-align:center; color:#29317A; font-weight:500; line-height:1.4;}
.selection-list .list > li:after{content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); right:22px; border-left:12px solid #1b3c89; border-top:8px solid transparent; border-bottom:8px solid transparent;}
.selection-list .list > li:before{content:''; display:block; position:absolute; top:20px; left:calc(50% - 25px); transform:translate(-50%,0); width:50px; height:50px;}
.selection-list .list > li:nth-child(1):before{background: url(/nibr/images/ico/kbon-ico05.png) no-repeat 0 0;}
.selection-list .list > li:nth-child(2):before{background: url(/nibr/images/ico/kbon-ico06.png) no-repeat 0 0;}
.selection-list .list > li:nth-child(3):before{background: url(/nibr/images/ico/kbon-ico07.png) no-repeat 0 0;}
.selection-list .list > li:nth-child(4):before{background: url(/nibr/images/ico/kbon-ico08.png) no-repeat 0 0;}
.selection-list .list > li:nth-child(5):before{background: url(/nibr/images/ico/kbon-ico09.png) no-repeat 0 0;}
.selection-list .list > li:last-child:after,
.selection-list .list > li:last-child span:before{display:none;}

/* 아이콘 박스 */
.kbon-warp .icon-box{display:flex; align-items: flex-start;}
.kbon-warp .icon-box .box-item{padding: 30px; text-align: center; line-height: 28px; border: 1px solid #ccc; border-radius: 15px; background-color: #fff; min-height:285px; }
.kbon-warp .icon-box .box-item{display: inline-block;width: calc((100% - 30px) / 2); margin-right: 30px; vertical-align: top;}
.kbon-warp .icon-box .box-item:nth-child(2n){margin-right: 0;}
.kbon-warp .icon-box .box-item .sc-title4{background: #116A7B linear-gradient(to right, rgba(17, 106, 120, 0.3), rgba(34, 182, 157, 0.8));font-size: 18px; line-height: 30px; color: #fff; margin-bottom:20px; display:inline-block; padding: 8px 15px; border-radius: 30px; min-width:180px;}
.kbon-warp .icon-box .box-item .box-title{position: relative; padding-top: 20px;}
.kbon-warp .icon-box .box-item.box-icon .box-title{padding-top:100px;}
.kbon-warp .icon-box .box-item.box-icon .box-title:before{content: ''; display: block;position: absolute;top: 0; left: calc(50% - 40px);width: 80px; height: 80px; border-radius: 50%; background:#F6F6F6 url(/nibr/images/ico/kbon-ico10.png) no-repeat center;}

@media all and (max-width: 1024px) {
    .selection-list .list{margin-right:calc(20px * -1); justify-content: center;}
    .selection-list .list > li{flex:0 1 32%; padding-right:20px;}
    .selection-list .list > li:after{right:7px; border-left:8px solid #1b3c89; border-top:5px solid transparent; border-bottom:5px solid transparent;}
    .selection-list .list > li:before{left:calc(50% - 5px);}
    
    .kbon-warp .icon-box .box-item{padding: 30px 15px; width: calc((100% - 20px) / 2); margin-right: 20px;}
}

@media all and (max-width: 768px) {
    .kbon-warp .icon-box{flex-direction: column;} 
    .kbon-warp .icon-box .box-item{width: 100%; margin-right: 0; min-height:auto; height:auto;}
    .kbon-warp .icon-box .box-item:nth-child(1){margin-bottom: 20px;}
}

@media all and (max-width: 600px) {
    .selection-list .list{margin-right:0; justify-content: center;}
    .selection-list .list > li{flex:0 1 100%; padding-right:0; margin-bottom:30px;}
    .selection-list .list > li:after{right:calc(50% - 7px); top:105%; transform:translate(0); border-top: 12px solid #1b3c89; border-left: 8px solid transparent; border-right: 8px solid transparent;}
    .selection-list .list > li:before{left:calc(50% - 5px);}
}

@media all and (max-width: 540px) {
    .kbon-warp ul.step-list li{height: 180px;}
    .kbon-warp ul.step-list li br{display:none}
}

/* 2024.03.27 추가 */
.modal-hidden .contents-nav .nav-warp > ul > li {z-index: 1;}

/* 2024.03.28 추가 */
@media all and (max-width:500px) { 
    /* .det-viewT .resour-list{grid-template-columns:1fr;} */
    .det-viewT .resour-list{grid-template-columns:2fr 2fr;}
    .det-viewT .resour-list > li{padding:20px 0;}
    .det-viewT .resour-list > li > .tit{font-size:1.4rem;}
    .det-viewT .resour-list > li > strong{font-size:2.0rem;}
    .det-viewT .resour-list > li > a.btn{font-size:1.2rem; padding:4px 8px;}
}

/* 멀티미디어 이미지 원본 보기 */
.multi-gallery-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -40%); width:auto; border-radius: 20px; border:1px solid #ccc; background-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); display: none; z-index: 1000; padding:30px;}
.multi-box{display:flex; max-width:100%; max-height:auto; overflow-y:auto; align-items: center; justify-content: center;}
.multi-gallery-modal .multi-box > img {max-width:100%; width:auto; height:100%; cursor: pointer; }
.multi-gallery-modal .close i { position: fixed; top: -10px; right: -10px; height: 40px; width: 40px; border-radius: 50px; background-color: #222; display:flex; align-items: center; justify-content: center;}
.multi-gallery-modal .bar { display: block; position: absolute; width: 20px; border-bottom: 3px solid #fff; transform: rotate(45deg);}
.multi-gallery-modal .bar:first-child { transform: rotate(-45deg);}

@media all and (max-width: 2000px) {
    .multi-box{display:flex; max-width:100%; max-height:500px; overflow-y:auto; }
    .multi-gallery-modal .multi-box > img { width: auto; height:100%;}
}

@media all and (max-width: 768px) {
    .multi-gallery-modal{max-width: 100%; width:calc(100% - 40px); max-height:100%; border-radius: 10px; padding:10px;}
}


/* 검색 결과 추가 css */
.class-system .display-flex {display: flex; justify-content: space-between; align-items: flex-start; border-bottom:none;}
.class-system .system_add_txt ul li {display: inline-block;color: #777;}
.class-system .system_more {font-size: 22px;cursor: pointer; background:#116a7b; width:22px; height:22px; color:#fff; border-radius: 100px; margin:10px;line-height: 1;}
.system_add_txt {display: none; overflow: hidden;}
.system_add_txt.expanded {display: block;}
@media (max-width: 1500px) {
    .system_add_txt {
        display: none; 
    }
    .system_more {
        display: inline-block;
    }
}
@media (min-width: 1501px) {
    .system_more {
        display: none;
     }
    .system_add_txt {
        display: block; 
    }
}

.modal_width_size{max-width:600px;}


.photo_view {width:100%; transition: height 0.3s ease;}
.photo_view .big_photo .swiper-slide{height:auto;}
.photo_view .big_photo .big_photo_in{position:relative; margin-bottom:15px;}
.photo_view .big_photo .big_photo_in .img_open{position:absolute; left:2%; top:2%; background:#fff; z-index:99;}
.photo_view .big_photo .big_photo_in .img_open img{ width:145px; height:45px;}
.photo_view .big_photo .big_photo_in img {height:300px;}

.photo_view .big_photo2 .swiper-slide{height:auto;}
.photo_view .big_photo2 .big_photo_in{position:relative; margin-bottom:15px;}
.photo_view .big_photo2 .big_photo_in .img_open{position:absolute; left:2%; top:2%; background:#fff; z-index:99;}
.photo_view .big_photo2 .big_photo_in .img_open img{ width:145px; height:45px;}
.photo_view .big_photo2 .big_photo_in img {height:300px;}

.modal-content-fixed-add{height:auto; overflow:hidden; overflow-y:auto; max-height:700px; min-height:auto;}

.photo_view .thumbs {width: 100%;height: 100px;margin-top: 10px;}
.photo_view .thumbs .swiper-slide {width: 100px;height: 70px; overflow:hidden;}
.photo_view .thumbs img {width: 100%;height: 70px;object-fit: cover;cursor: pointer;}

.photo_view .thumbs2 {width: 100%;height: 100px;margin-top: 10px;}
.photo_view .thumbs2 .swiper-slide {width: 100px;height: 70px; overflow:hidden;}
.photo_view .thumbs2 img {width: 100%;height: 70px;object-fit: cover;cursor: pointer;}

.photo_view .swiper-container{position:relative; overflow:hidden;}
.photo_view .swiper-slide-thumb-active{border:2px solid #111;}
.photo_view .btn_flex{display:flex; justify-content: space-between; margin-top:15px;}

.photo-slider .swiper-slide .visual-bg01:hover{cursor:pointer;}
.photo-slider .swiper-slide .visual-bg01:hover::before{content:'+ 자세히보기'; position:absolute; background:rgba(0,0,0,0.5); width:100%; height:100%; left:0; top:0; color:#fff; display:flex; justify-content: center; align-items: center; border:1px solid #fff; }
.open-img-sliderin{position:absolute; top:20px; left:20px; z-index:999; background:#fff;}



@media (max-width: 1500px) {
	.modal-content-fixed-add{height:auto; overflow:hidden; overflow-y:auto; max-height:700px; min-height:auto;}
}

@media (max-width: 768px) {
    .open-img-sliderin{width:100px;}
    .open-img-sliderin img{width:100%;}
    .photo_view .big_photo .big_photo_in img{height:200px;}
}

@media (max-height: 900px) and (max-width: 768px) {
	.modal_width_size{max-height:400px; }
	.modal-content-fixed-add{height:auto; overflow:hidden; overflow-y:auto; max-height:400px; min-height:auto;}
}

/* 생물종 상세보기 종 이름 추가 */
.display-flex-title{display:flex; align-items: center; gap:10px;}
.display-flex-title p.text{font-weight:500; color:#116a7b;}
@media (max-width: 768px){
	.display-flex-title{align-items: normal; justify-content: flex-start; flex-direction: column; gap:0;}
}




/*kbon*/
	/* 이미지 리스트 */
	.background_cont{width:100%;}
	.background_cont .top_cont{width:100%; display:flex; justify-content: space-between; align-items: stretch; gap:20px;}
	.background_cont .title {margin-top:10px; padding-bottom:20px; display:flex; justify-content: space-between; align-items: flex-end;}
	.background_cont .title h3{font-size:1.8rem; font-weight:700; }
	.background_cont .title span{font-size:2.0rem; color:#1b3c89;}
	.background_cont .title p{font-size:1.4rem;} 
	.background_cont .swiper-container {width: 100%; max-width:400px; min-width:300px; height: 100%;overflow: hidden; position:relative;flex: 1; display: flex; flex-direction: column;}
	.background_cont .swiper-slide {display: flex;justify-content: space-between;align-items: center; position:relative; flex-direction: column; gap:10px; width:400px; padding-bottom:5px;}
	.background_cont .swiper-slide > a {display: block; width: 100%;vertical-align: top;border: 1px solid #ccc;border-radius: 20px;overflow: hidden; height:456px;}
	.background_cont .swiper-slide .swiper_btn{position:relative; bottom:0; text-align:center; }
	.background_cont .swiper-slide .swiper_btn a{color:#fff; display:flex; align-items: center; justify-content: center; gap:5px; background:#1b3c89; padding:10px 20px;  border-radius:10px;}
	.background_cont .swiper-slide .swiper_btn a:hover{background:#fff; color:#1b3c89;}
	.background_cont .swiper-slide .swiper_btn a:hover:before{position:absolute; left:0; top:0; width:100%; height:100%; content:''; border:1px solid #1b3c89; border-radius:10px;}
	.background_cont .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#fff;}
	.list-box2 > li > a {position: relative; display: block; width: 100%; background:#fff; border:1px solid #ccc; border-radius: 20px; }
	.list-box2 > li > a::after {content: ""; border: 5px solid #116a7b; width: 100%; height: 100%; border-radius: 20px; position: absolute; top: 0; left: 0; box-sizing:border-box; opacity: 0; transition: all .3s;}
	.list-box2 > li > a:hover::after {opacity: 1}
	.list-box2 > li > a .list-img {display: block; width: 100%; position: relative; border-radius: 2px; overflow: hidden; background:url(/nibr/images/common/noimg.png)no-repeat center;}
	.list-box2 > li > a .list-img:before {content: ''; display: block; padding-bottom: 74.8571%;}
	.list-box2 > li > a .list-img img {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: .3s; transform: scale(1);}
	.list-box2 > li > a .list-img img:hover {transform: scale(1.1);}
	/* .list-box2 > li > a .list-txt{position: relative; display:block; min-height: 140px;  padding: 20px;} */
	.list-box2 > li > a .list-txt{position: relative; display:flex; flex-direction: column; min-height: 140px;  padding: 20px;}
	.list-box2 > li > a .list-txt .tit-infotop {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; font-weight: 700; height:30px; font-size: 1.8rem;}
	.list-box2 > li > a .list-txt .st-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.4rem; margin-bottom:5px; }
	
	.list-box2 > li > a .list-txt .step-txt { font-size: 1.4rem; line-height: 1.5;background: #f6f6f6;border: 1px solid #ccc;word-break: keep-all;border-radius: 8px;;max-height: 100px; padding:10px; text-align:center;display: flex; justify-content: center;align-items: center;}
	.list-box2 > li > a .list-txt .step-txt p{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis}
	
	.list-box2 > li > a .list-txt .info-txt{display: -webkit-box; overflow:hidden; text-overflow: ellipsis; word-break: break-word; height:50px; -webkit-line-clamp: 2; line-height:1.5; -webkit-box-orient: vertical; margin-top:15px; word-break:keep-all;}
	.list-box2 > li > a .list-txt > ul > li{padding:5px 0;}
	.list-box2 > li > a .list-txt .btn-down{position:absolute; bottom:20px; right:20px; background-color: #e6f5f8; width:45px; height:45px; border-radius: 50px; text-align:center; }
	.list-box2 > li > a .list-txt .btn-down span{color:#116a7b;}
	
	/* kbon 지도 영역 */
	.top_location{background:#F7F7F7; padding:20px; border-radius:20px; flex:1;}
	.top_location .map_location{width:100%;  height:auto; display:flex; justify-content: center; flex-direction: column;}
	.map {height: 500px;width: 100%;border-radius: 20px;}
	
		/* 지도 popup */
		.map_popup {position: absolute;background: white;padding: 10px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.5);display: none;max-width: 250px; min-width: 200px;}
		.map_popup .title{margin-top:0; padding-bottom:0;}
		.map_popup h3 {margin: 0 0 10px;font-size: 20px;font-weight: 500;}
		.map_popup table{display:table; font-size:12px;}
		.map_popup table tr{}
		.map_popup table tr:nth-last-child(1){border-bottom:none;}
		.map_popup table th,.map_popup table td{vertical-align: middle; display:table-cell; padding:5px 0;}
		.map_popup table th{background:#111; color:#fff; width:20%; border-bottom:1px solid #666;}
		.map_popup table td{text-align:center; width:60%; padding:5px 5%; line-height:16px; border-bottom:1px solid #efefef;}
		.map_popup .title .close-btn {position: absolute;top: -10px;right: -10px;background: #111;color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;font-weight: 700;}
		.map_popup .title .close-btn span{transition: transform 0.5s ease-in-out; color:#fff; display: block;width: 100%;height: 100%;text-align: center;line-height: 30px;text-decoration: none; font-size:16px;}
		.map_popup .title .close-btn span:hover { animation: rotateX 0.5s linear; animation-iteration-count: 1; color:#ccc;}
		.table-wrapper .arrow{display:none;}
	
	#mapoptions {position:absolute; left:10px; top:10px; margin: 20px 0; padding: 10px; border-radius: 10px; border: 1px solid #ddd; font-size: 16px;}
	
	@keyframes rotateX {0% {transform: rotateY(0deg);}100% {transform: rotateY(180deg);}}
	
	@media all and (max-width:1200px) {
		.list-box2.w4fr {grid-template-columns: repeat(2, 1fr)}
		.list-box2 > li > a .list-txt{height:auto;}
		.list-box2 > li > a .list-txt .info-txt{height:65px; -webkit-line-clamp: 3;}
		.map{height:auto;}
		.background_cont .title{flex-direction: column; align-items: flex-start;}
		.list-box2 > li > a .list-img{width:100%;}
	
		.background_cont .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#111; top:30%;}
	}
	
	@media all and (max-width:1024px) {
		.list-box2.w3fr,
		.list-box2.w4fr {gap:30px; grid-template-columns:1fr;}
		.list-box2 > li {border-radius: 1px; border-radius: 20px;}
		.list-box2 > li > a {display: flex; justify-content: space-between; align-items: center;}
		.list-box2 > li > a::after {border-radius: 20px;}
		.list-box2 > li > a .list-img {width: 100%; border-radius: 0;}
		.list-box2 > li > a .list-img:before {content: ''; display: block; padding-bottom:56.25%;}
		.list-box2 > li > a .list-txt{position: relative; display:block; }
		
		.background_cont .swiper-slide > a{height:auto; min-height:335px; width:300px;}
		.background_cont .swiper-container {max-width:auto; min-width:auto; width:300px;}
		.background_cont .swiper-slide {width:300px;}
	}
	
	@media all and (max-width:768px) {
		.list-box2 > li > a {flex-direction: column;}
		.list-box2 > li > a .list-img {display: block; width: 100%;}
		.list-box2 > li > a .list-txt{width:100%; min-height: auto; padding:20px;}
		
	
		.background_cont .swiper-slide > a{min-height:auto; width:70%;}
		.background_cont .swiper-container {max-width:100%; min-width:auto; width:100%; }
	
		.background_cont .swiper-slide {width:100%;}
		.background_cont{height:auto;}
		.background_cont .title p{font-size:13px;}
		.background_cont .top_cont{flex-direction: column-reverse; }
		/* .map{height:300px;}
		.map_popup{width:150px; min-width:auto; max-width:auto; }
		.map_popup .table-wrapper {overflow-x: auto;width: 100%;}
		.map_popup table {width: auto; white-space: nowrap;}
		.map_popup table td{text-align:left; padding-left:5px;}
		.map_popup table th{padding:0 10px;} */
		.map {height: 300px;}
		.map_popup {width: 150px;min-width: auto;max-width: auto;position: relative;}
		.table-wrapper {overflow-x: auto;width: 100%;position: relative;padding: 10px;box-sizing: border-box; filter: grayscale(100%);transition: filter 0.5s; }
		.table-wrapper.scrolled {filter: none;}
		.table-wrapper .arrow{display:block; width:100%;}
		.table-wrapper .scroll-left,.table-wrapper .scroll-right{display:fixed;}
		.table-wrapper .scroll-icon {position: fixed;top: 50%;transform: translateY(-50%);font-size: 24px;color: rgba(0, 0, 0, 0.5);pointer-events: none;animation: fadeInOut 1.5s infinite;}
		.table-wrapper .scroll-left {left: 5px;}
		.table-wrapper .scroll-right {right: 5px;}
		@keyframes fadeInOut {0%, 100% { opacity: 0; }50% { opacity: 1; }}
		.map_popup table {width: auto;white-space: nowrap;}
		.map_popup table td {text-align: left;padding-left: 5px;}
		.map_popup table th {padding: 0 10px;}
	}
	
	
	
	
/* 마이페이지 add240718 */
.link_align{display:flex; justify-content: flex-end; width:100%;}
.flex_wrap_wrap{flex-wrap: wrap}
.button_table_align{justify-content: center}
.sub-tab-wrapper {margin: 20px;}
.tab-content {display: none;margin-top: 20px;}
.tab-content.active {display: block;}

/* 게시판 - 신청서 보기 */
.board .sc-title2{font-size: 20px;}
.board .sc-title2:after{top: 1px;}

#sale-modal .board .tbl_view tbody th{width: 50%;}
#sojae-modal .board .tbl_view tbody th{width: auto;}
.board .tbl_view3 tbody th{text-align: center;}
.board .tbl_view3 .border_r{border-right: 1px solid #ccc;}
.board .tbl_view3 .txt_c td{text-align: center;}
.board .tbl_view3 .table_number{width:10px; text-align:center;}
.board .tbl_view3 .table_name{width:10%; text-align:center;}
.board .tbl_view3 .table_address{width:100%;}

.board_tbl_add a{color:#116a7b; border-bottom:1px solid #116a7b;}
.board_tbl_add a:hover{color:#1b3c89; border-bottom:1px solid #1b3c89;}


.board_fini{padding: 32px 20px;}
.board_fini .txt{margin-bottom: 32px;}
.board_fini .date{margin-bottom: 16px; font-size: 20px;font-weight: 500; text-align: center;color: #222;}
.board_fini .sign{margin-bottom: 4px; text-align: right;}
.board_fini .name{text-align: right;}

.board .box_style{margin-bottom: 20px; padding: 16px; border: 1px solid #ccc;}

@media only screen and (max-width: 1024px) {
    .board .sc-title2{font-size: 17px;}
    .board .sc-title2:after{top: 0;}
    .board .tbl_view3 tbody th{text-align: left;}
    .board .tbl_view3 .border_r{padding-bottom: 15px; background: #e0e9fd;}
    .board .tbl_view3 .m_none{display: none;}
    .board .tbl_view3 .m_before td::before{content:'';display: inline-block; min-width: 80px;font-weight: 700;}
    .board .tbl_view3 .borrow.m_before td:nth-child(1)::before{content: '순번';}
    .board .tbl_view3 .borrow.m_before td:nth-child(2)::before{content: '표본번호';}
    .board .tbl_view3 .borrow.m_before td:nth-child(3)::before{content: '종명';}
    .board .tbl_view3 .borrow.m_before td:nth-child(4)::before{content: '비고';}
    .board .tbl_view3 .genome.m_before td:nth-child(1)::before{content: 'DNA';}
    .board .tbl_view3 .genome.m_before td:nth-child(2)::before{content: 'CDS';}
    .board .tbl_view3 .genome.m_before td:nth-child(3)::before{content: 'Protein';}
    .board .tbl_view3 .genome.m_before td:nth-child(4)::before{content: 'Full Gene';}
    .board .tbl_view3 .genome.m_before td:nth-child(5)::before{content: 'Gene set';}
    .board .tbl_view3 .m_before td{text-align: left;}
    .board .tbl_view3 .m_before td:first-child{padding-top: 20px;}
    .board .tbl_view3 .m_before td:last-child{padding-bottom: 20px;}
    .board .tbl_view3 tbody td{padding: 4px 10px 12px;}
    .board_fini .date{font-size: 18px;}

    #sale-modal .board .tbl_view tbody th{width: 100%;}
    
    .button_table_align{justify-content: flex-start;}
}

.termsbox { border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 20px;  background-color: #f9f9f9; font-weight:400;}
.termsbox ul { list-style-type: none; padding: 20px 0; }
.termsbox ul li:before{content:'-'; padding-right:5px;}
.termsbox a{color:#111;}
.termsbox .date-container{text-align:center;}
.termsbox .date {margin-top:20px;}
.termsbox .address{font-weight:600; font-size:20px;}

.termsboxfoot{padding-top:10px;}
.termsboxfoot p{padding-left:5px; cursor:pointer;}



/* 생물종 상세정보 이미지뷰어 */
	/* 기존 스타일 */
	.newimg-modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);z-index: 99999;overflow: hidden;justify-content: space-between;align-items: center;flex-direction: column;padding: 20px;}
	.newimg-modal .top {display: flex; justify-content: space-between; align-items: flex-start; color: #ffffff; margin-bottom: 20px; width: 100%; position:relative;}
	
	.newimg-modal .title {font-size: 20px;color: #ffffff;}
	.newimg-modal .title p{font-size: 15px;color: #ffffff;}
	.newimg-modal .pagenumber {font-size: 14px;color: #ffffff;}
	.newimg-modal .close a{display:block;}
	.newimg-modal .close i {color: #ffffff;font-size: 30px; }
	.newimg-modal .close i{transition: transform 0.3s ease;}
	.newimg-modal .close i:hover {transform: rotate(90deg);}
	.newimg-modal .gallery {text-align: center;display: flex;align-items: center;justify-content: center;width: 100%;height: 80vh;}
	.newimg-modal .gallery img {max-width: 100%;max-height: 100%;height: auto;width: auto;object-fit: contain;transition: transform 0.5s ease, opacity 0.5s ease;}
	.newimg-modal .gallery img.zoomed {transform: scale(2); cursor: zoom-out;} 
	.newimg-modal .images {width: 100%;}
	.newimg-modal .images .image-container {width: 100%;height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;}
	.newimg-modal .images .image-container .images_cont_img_position{position:absolute; z-index:9999; background-image:url("/nibr/assets/images/sub/img_open03.png"); margin-left:10px; margin-top:10px;  opacity: 0; transition: opacity 0.5s ease-in-out; }
	.newimg-modal .images .image-container .images_cont_img_position.show-after {opacity: 1;}
    .newimg-modal .images .image-container .images_cont {position: relative;}
    .newimg-modal .images .image-container .images_cont:after {content: '';position: absolute;left: 20px;top: 20px;z-index: 22222;background-color:#fff; background-image:url('/nibr/assets/images/sub/img_open03.png'); background-repeat:no-repeat; background-position:0 0; width: 166px;height: 50px;opacity: 0; transition: opacity 0.5s ease; }
    .newimg-modal .images .image-container .images_cont.show-after:after {opacity: 1;}
    .newimg-modal .images .image-container_media .images_cont_img_position_media{position:absolute; z-index:9999; background:#fff; margin-left:10px; margin-top:10px;  opacity: 0; transition: opacity 0.5s ease-in-out; }
    .newimg-modal .images .image-container_media .images_cont_img_position_media.show-after_media {opacity: 1;}
	
	.newimg-modal .foot_list_img {position: relative;width: 100%;}
	.newimg-modal-btn {position: absolute;bottom: 90px;left: 50%;transform: translateX(-50%);background: rgba(255, 255, 255, 0.9);padding: 2px 20px;border: none;cursor: pointer;border-radius: 30px;}
	.newimg-modal-btn ul {list-style: none;padding: 0;margin: 0;display: flex;gap: 15px;}
	.newimg-modal-btn ul li {position: relative;display: flex;align-items: center;justify-content: center; width: 30px;height: 32px;cursor: pointer;transition: transform 0.3s ease;}
	.newimg-modal-btn ul li i {font-size: 24px;transition: transform 0.3s ease, color 0.3s ease;}
	.newimg-modal-btn ul li:hover i {color: #1b3c89;  animation: turn 0.6s ease-in-out;}
	.newimg-modal-btn ul li span {position: absolute;bottom: -20px;opacity: 0;transition: bottom 0.3s ease, opacity 0.3s ease;}
	.newimg-modal-btn ul li:hover span {bottom: 40px;opacity: 1;}
	.arrow {color: #111;font-size: 36px;cursor: pointer;z-index: 3; background:#fff; width:40px; height:40px; border-radius:100px; display:flex; align-items: center; justify-content: center; transition:transform 0.3s ease;}
	.arrow:hover{transform: scale(125%); }
	.left-arrow {left: 0;}
	.right-arrow {right: 0;}
	.hidden {opacity: 0; transform: translateX(100%);}
	.visible {opacity: 1;transform: translateX(0);}
	
	.newimg-modal .gallery img.zoomed {transform: scale(2); cursor: grab;}
	
	/* Swiper 관련 스타일 */
	.imgview-container {width: 100%;padding: 10px 0;overflow: hidden;}
	.imgview-container_media {width: 100%;padding: 10px 0;overflow: hidden;}
	.imgview-swiper {display: flex;}
	.imgview-slide {flex-shrink: 0; width: auto; max-width:110px; height:60px; position: relative; overflow:hidden;}
	.imgview-slide img{width:200%;}
	.swiper-slide-active::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0; box-sizing: border-box;z-index: 1;pointer-events: none;  }
	
	/* 모바일 반응형 */
	@media (max-width: 768px) {
	    .newimg-modal .gallery .image-container {width: 100%;}
		.arrow{border-radius:0;}
		.newimg-modal .title p{display:none;}
	}
	
	.newimg-modal img {-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;}
	
	#loading-indicator {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1000;background: rgba(0, 0, 0, 0.5); padding: 20px;border-radius: 50%;display: none;}
	#loading-indicator .material-icons {font-size: 50px;color: #fff;animation: spin 1s linear infinite;}
	#main-image, #main-image_media {width: auto;max-width: 100%;max-height: 80vh;object-fit: contain;display: block;margin: 0 auto;transition: transform 0.5s ease, opacity 0.5s ease;}
	
	@keyframes spin {
	    from { transform: rotate(0deg); }
	    to { transform: rotate(-360deg); }
	}
	
	@keyframes turn {
	    0% {transform: rotateY(0deg);}
		100% {transform: rotateY(180deg);}
	}
	
	/* 툴팁 스타일링 */
	.tooltip-container {position: relative;display: inline-block;cursor: pointer;}
	.tooltip-content {visibility: hidden; width: 120px;background-color: #333; color: #fff;text-align: center;border-radius: 6px;padding: 5px;position: absolute;z-index: 1;bottom: 125%; left: 50%;margin-left: -60px; opacity: 0;transition: opacity 0.3s;}
	.tooltip-container:hover .tooltip-content {visibility: visible; opacity: 1;}
		
		
	/* 한국의 철새 */
.tab-menu {
   display: flex;
   gap:5px;
}

.tab-item {
    padding: 2px 15px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius:5px;
    background:#fff;
    display:flex;
    align-items: center;
    gap:5px;
}

.tab-item i{font-size:20px;}

.tab-item.active {
    background-color: #256ef4;
    color: white;
    border-color: #256ef4;
}

.tab-item.active i {
    color: white;
}

@media (max-width: 1024px) {
    .tab-menu{flex-wrap: wrap; gap:5px; margin-top:20px; }
    .tab-item{padding:10px 20px;}
} 

@media (max-width: 770px) {
	.tab-menu{flex-wrap: wrap;}
    .tab-item{padding:10px; width:100%;}
} 



/* 철새정보시스템 */
.kb-image-wrap{position:relative;}
.swiper-container{width:100%;}
.swiper-container-img{position:absolute; width:600px; overflow:hidden;}
.swiper-container-right{right:1vw; bottom:5vh;}
.swiper-container-left{left:1vw; bottom:5vh;}
.swiper-container-img .swiper-button-prev:after,.swiper-container-img .swiper-button-next:after{font-size:20px;}
.swiper-container-img .swiper-button-next:after{color:#fff;}
.swiper-container-img .nextbtn{right:0; color:#fff;}
.swiper-container-img .nextprev{left:0; color:#fff;}
.swiper-container-img .swiper-pagination{bottom:0;}
.swiper-container-img .swiper-slide-active::before{border:none;}

.swiper-container-width{position:absolute; left:0; bottom:5vh; width:100% !important; overflow:hidden;}
.swiper-container-width .swiper-button-prev:after,.swiper-container-width .swiper-button-next:after{font-size:20px;}
.swiper-container-width .swiper-button-next:after{color:#fff;}
.swiper-container-width .nextbtn{right:0; color:#fff;}
.swiper-container-width .nextprev{left:0; color:#fff;}
.swiper-container-width .swiper-pagination{bottom:0;}
.swiper-container-width .swiper-slide-active::before{border:none;}

.swiper-container-img .swiper-wrapper .swiper-slide{width:100%; margin:0 auto; text-align:center;}
.swiper-container-width .swiper-wrapper .swiper-slide{width:100%; margin:0 auto; text-align:center;}

@media (max-width: 1024px) {
	.swiper-container-img{width:100%; position:relative; overflow:visible; background:#F6F6F6; padding:30px 0; border:1px solid #ccc; border-radius:0 0 20px 20px;}
	.swiper-container-right{right:0; bottom:0;}
	.swiper-container-left{left:0; bottom:0;}
	.swiper-container-width{left:0; bottom:0; width:100% important;}
	.swiper-container-img .swiper-button-next:after{color:#111;}
	.swiper-container-img .nextbtn{right:0; color:#111;}
	.swiper-container-img .nextprev{left:0; color:#111;}

	.swiper-container-width{width:100%; position:relative; overflow:visible; background:#F6F6F6; padding:30px 0; border:1px solid #ccc; border-radius:0 0 20px 20px;}
	.swiper-container-width{left:0; bottom:0; width:100% important;}
	.swiper-container-width .swiper-button-next:after{color:#111;}
	.swiper-container-width .nextbtn{right:0; color:#111;}
	.swiper-container-width .nextprev{left:0; color:#111;}
}

.download_flex{display:flex; justify-content: space-between; padding:0 10px}


/* ==================== 철새정보시스템 > 통계 페이지 스타일 ==================== */
/* 버튼 그룹 래퍼 - 좌우 배치 */
.btn-group-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-left {
    display: flex;
    gap: 10px;
}

.btn-right {
    flex-shrink: 0;
}

/* 엑셀 다운로드 버튼 */
.excel-download-btn {
    background-color: #d4f4dd;
    color: #2d6a3e;
    border: 1px solid #b3e8c4;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.excel-download-btn:hover {
    background-color: #c1eecd;
}

.excel-download-btn .svg-icon {
    flex-shrink: 0;
}

/* 참고 문구 */
.info-notice {
    background-color: #f8f9fa;
    padding: 15px 20px;
    margin: 0 0 20px 0;
    line-height: 1.6;
    font-size: 14px;
}

.highlight-orange {
    color: #ff8c00;
    font-weight: bold;
}

.highlight-red {
    color: #dc3545;
    font-weight: bold;
}

/* 가로 배치 검색 폼 */
.search-form-horizontal {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.search-table {
    width: 100%;
    border-collapse: collapse;
}

.search-table thead th {
    background-color: #6c757d;
    color: #fff;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border-right: 1px solid #5a6268;
}

.search-table thead th:last-child {
    border-right: none;
}

.search-table tbody td {
    padding: 20px 15px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #dee2e6;
}

.search-table tbody td:last-child {
    border-right: none;
}

.search-table td .krds-form-check {
    margin: 0;
}

.search-table select {
    width: 100%;
    max-width: 200px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

/* 버튼 간격 */
.btn-left button,
.btn-right button {
    margin-right: 8px;
}

.btn-left button:last-child,
.btn-right button:last-child {
    margin-right: 0;
}

/* 요약 타이틀 + 버튼 영역 */
.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-header .btn-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-header.mt20 {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.summary-dot {
    color: #6c757d;
}

/* 요약 표 그래프 헤더 */
.graph-select-header {
    text-align: center;
    padding-left: 0;
}

.graph-select-header label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.graph-cell {
    text-align: left;
    padding-left: 16px;
}

/* 그래프보기 버튼 흰색 배경 */
.krds-btn.btn-white {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ced4da !important;
}

.krds-btn.btn-white:hover {
    background: #f8f9fa !important;
}

/* 아이콘 색상 */
.summary-header .btn-right .krds-btn .svg-icon {
    color: inherit;
    background-color: currentColor;
}

.summary-header .btn-right .krds-btn.btn-white .svg-icon {
    color: #333 !important;
}

.summary-header .btn-right .krds-btn.blue .svg-icon {
    color: #fff !important;
}

/* 상세검색 폼 (세로 배치) */
.detail-search-form .txt-box {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 20px;
}

.detail-search-form .tbl01 {
    width: 100%;
    border-collapse: collapse;
}

.detail-search-form .tbl01 th {
    background-color: #f8f9fa;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    vertical-align: top;
    border: 1px solid #dee2e6;
}

.detail-search-form .tbl01 td {
    padding: 15px;
    border: 1px solid #dee2e6;
}

.detail-search-form .select {
    width: 100%;
    max-width: 250px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

/* 유틸리티 클래스 */
.mx10 {
    margin: 0 10px;
    color: #6c757d;
}

.mb10 {
    margin-bottom: 10px;
    display: block;
}

.mt10 {
    margin-top: 10px;
}

/* 라디오 버튼 가로 정렬 */
.inline-radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

.inline-radio-group .krds-form-check {
    margin-bottom: 0;
}

/* 셀렉트박스 가로 정렬 */
.inline-select-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.inline-select-group .select {
    flex: 1;
    max-width: 200px;
}

/* 탭 메뉴 반응형 */
.tab-mobile {
    display: none;
}

.tab-desktop {
    display: block;
}

/* 반응형: 768px 이하 */
@media (max-width: 768px) {
    /* 탭 메뉴 셀렉트박스로 전환 */
    .tab-desktop {
        display: none;
    }
    
    .tab-mobile {
        display: block;
        padding: 10px 0;
        width: 100%;
    }
    
    .tab-select {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 500;
        background-color: #fff;
    }

    /* 버튼 그룹 */
    .btn-group-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .btn-left,
    .btn-right {
        width: 100%;
        display: flex;
        gap: 8px;
        flex-direction: column;
    }
    
    .btn-left button,
    .btn-right button {
        width: 100%;
        margin-right: 0;
    }
    
    .excel-download-btn {
        justify-content: center;
    }
    
    .krds-btn {
        width: 100%;
    }
    
    .summary-header {
        flex-direction: column;
    }
    
    .summary-title {
        margin-bottom: 10px;
    }
}

/* 도서조사 안내 문구 스타일 */
.info-notice {
    background-color: #f8f9fa;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.info-notice .highlight-orange {
    color: #ff6600;
    font-weight: 600;
}

.info-notice .highlight-red {
    color: #e74c3c;
    font-weight: 600;
}