/*한강의 생명 css*/
/* .inner { padding-bottom:100px!important; } */
.sub-bnr ul.sub-menu li button,.tab-pages h2 { color:#ce7200; }
.sub-bnr ul.sub-menu li button.active ,.sub-bnr ul.sub-menu li:hover button { background:#ce7200; }
.sub-bnr li.sub-left { background:#005ea2; } 
.sub-bnr li.sub-center { flex-grow:4; }
.sub-bnr li.sub-center { background:#f08437;  }
.sub-bnr li.sub-right { background:#007c51; } 

.tit-box { align-items: center; }
.tit-box>* ,.graph-wrap>div {width: calc(95%/2); }
#tab-2 .graph-wrap div.map-box {margin-top: 50px;} 
.sub-tit { display: inline-block; color:#ce7200; background:#f4f4f4; padding:10px 20px; border-left: 2px solid #ff994e; margin-bottom: 20px; font-size: 1.2rem; font-weight: 600; }
.boxs { margin:60px 0; display:flex; flex-wrap: wrap; gap: 1rem;}

.graph-wrap img { width:100%; max-width:450px; }
.graph-img { margin-top:30px; }
.graph-wrap h3.sub-tit { margin-bottom:50px; }

.accordion { display: flex; flex-direction: column; gap: 1rem; }
.accordion-item { background: #f8f8f8; transition: .3s;}
.accordion-header { background-color: #ce7200; border: none; cursor: pointer; padding: 1rem; text-align: left; width: 100%; color:#fff; font-weight: 600;}
.accordion-header i { font-size: 1.2rem; font-weight: bold; margin-left: 0.5rem; text-align: right; display: inline-block; }
.accordion-content { max-height: 0; overflow: hidden; padding: 0rem 1rem; background: #f8f8f8;}
.accordion-item.active .accordion-content { max-height: 100%; }
.accordion .table { margin:30px 0; border: 1px solid #eee;}
.accordion .table th, td { text-align:center; padding:20px 10px; vertical-align: middle; word-break: break-all; white-space: pre-wrap;}
.accordion .table thead tr { background:#fef2e8; color:#ce7200; font-weight: 600;}
.accordion .table tbody tr { border-bottom:1px solid #eee; background:#fff; }
.accordion .table th:last-child, td:last-child { max-width:280px; }

.shrink-box { width:100%; height:100%; display:flex; overflow:hidden; justify-content:flex-end; position:relative; z-index:20; }
.shrink-box>div{ position:relative; display:inline-block;  height:500px; transition:1s;  box-shadow:4px 0px 4px 2px rgba(0, 0, 0, 0.2) inset; cursor:auto;}
.shrink-box1>div,.shrink-box8>div,.shrink-box9>div{width:calc(100%/6);}
.shrink-box2>div,.shrink-box6>div,.shrink-box7>div,.shrink-box10>div,.shrink-box11>div {width:calc(100%/8);}
.shrink-box3>div {width:calc(100%/7);}
.shrink-box4>div,.shrink-box5>div,.shrink-box12>div {width:calc(100%/5);}
.shrink-box>div:hover { width:20%; }
.shrink-box4>div:hover,.shrink-box5>div:hover,.shrink-box12>div:hover {width:25%;}
.shrink-box>div:hover .front { opacity:0; transition:0.5s;}
.shrink-box>div:hover .back-box { opacity:1; transition:0.5s;}
.shrink-box .shrink { background-position: center center; background-repeat: no-repeat; background-size: cover;}
#tab-1 .srk1 { background-image:url('../../images/hangang/식물01_긴병꽃풀.jpg');}
#tab-1 .srk2 { background-image:url('../../images/hangang/식물02_큰개불알풀.jpg');}
#tab-1 .srk3 { background-image:url('../../images/hangang/식물03_자주괴불주머니.jpg');}
#tab-1 .srk4 { background-image:url('../../images/hangang/식물04_갈풀.jpg');}
#tab-1 .srk5 { background-image:url('../../images/hangang/식물05_달뿌리풀.jpg');}
#tab-1 .srk6 { background-image:url('../../images/hangang/식물06_말냉이3.jpg');}
#tab-1 .srk7 { background-image:url('../../images/hangang/식물07_갯버들1.jpg');}
#tab-1 .srk8 { background-image:url('../../images/hangang/plants8.png');}
#tab-1 .srk9 { background-image:url('../../images/hangang/식물08_흰제비꽃1.jpg');}
#tab-1 .srk10 { background-image:url('../../images/hangang/식물09_개나리1.jpg');}
#tab-1 .srk11 { background-image:url('../../images/hangang/식물11_애기똥풀.jpg');}
#tab-1 .srk12 { background-image:url('../../images/hangang/식물12_아까시나무1.jpg');}
#tab-1 .srk13 { background-image:url('../../images/hangang/식물13_가시박.jpg');}
#tab-1 .srk14 { background-image:url('../../images/hangang/식물14_환삼덩굴.jpg');}
#tab-2 .srk1 { background-image:url('../../images/hangang/수곤01_동양하루살이.jpg');}
#tab-2 .srk2 { background-image:url('../../images/hangang/수곤02_강하루살이.jpg');}
#tab-2 .srk3 { background-image:url('../../images/hangang/수곤03_북방아시아실잠자리.jpg');}
#tab-2 .srk4 { background-image:url('../../images/hangang/수곤04_참갯지렁이.jpg');}
#tab-2 .srk5 { background-image:url('../../images/hangang/수곤05_개똥하루살이.jpg');}
#tab-2 .srk6 { background-image:url('../../images/hangang/수곤06_꼬마줄날도래.jpg');}
#tab-2 .srk7 { background-image:url('../../images/hangang/수곤07_새뱅이.jpg');}
#tab-3 .srk1 { background-image:url('../../images/hangang/양파01_맹꽁이.jpg');}
#tab-3 .srk2 { background-image:url('../../images/hangang/양파02_두꺼비.jpg');}
#tab-3 .srk3 { background-image:url('../../images/hangang/양파03_청개구리.jpg');}
#tab-3 .srk4 { background-image:url('../../images/hangang/양파04_참개구리.jpg');}
#tab-3 .srk5 { background-image:url('../../images/hangang/양파05_도롱뇽.jpg');}
#tab-3 .srk6 { background-image:url('../../images/hangang/양파06_누룩뱀.jpg');}
#tab-3 .srk7 { background-image:url('../../images/hangang/양파07_줄장지뱀.jpg');}
#tab-3 .srk8 { background-image:url('../../images/hangang/양파08_유혈목이.jpg');}
#tab-3 .srk9 { background-image:url('../../images/hangang/양파09_표범장지뱀.jpg');}
#tab-3 .srk10 { background-image:url('../../images/hangang/양파10_자라.jpg');}

#tab-4 .srk1 { background-image:url('../../images/hangang/어류01.jpg');}
#tab-4 .srk2 { background-image:url('../../images/hangang/어류02_황복.jpg');}
#tab-4 .srk3 { background-image:url('../../images/hangang/어류03_꺽정이.jpg');}
#tab-4 .srk4 { background-image:url('../../images/hangang/어류04_줄납자루.jpg');}
#tab-4 .srk5 { background-image:url('../../images/hangang/어류05_몰개(한국특산종).jpg');}
#tab-4 .srk6 { background-image:url('../../images/hangang/어류06_미꾸리.jpg');}
#tab-4 .srk7 { background-image:url('../../images/hangang/어류07_잉어.jpg');}
#tab-4 .srk8 { background-image:url('../../images/hangang/어류08_피라미.jpg');}
#tab-4 .srk9 { background-image:url('../../images/hangang/어류09_참갈겨니(한국특산종).jpg');}
#tab-4 .srk10 { background-image:url('../../images/hangang/어류10_갈문망둑.jpg');}
#tab-4 .srk11 { background-image:url('../../images/hangang/어류11_가시납지리(한국특산종).jpg');}
#tab-4 .srk12 { background-image:url('../../images/hangang/어류12_누치.jpg');}
#tab-4 .srk13 { background-image:url('../../images/hangang/어류13_긴몰개(한국특산종).jpg');}
#tab-4 .srk14 { background-image:url('../../images/hangang/어류14_각시붕어(한국특산종).jpg');}
#tab-4 .srk15 { background-image:url('../../images/hangang/어류15_참붕어.jpg');}
#tab-4 .srk16 { background-image:url('../../images/hangang/어류16_파랑볼우럭(블루길).jpg');}

#tab-5 .srk1 { background-image:url('../../images/hangang/tab5-insect1.jpg');}
#tab-5 .srk2 { background-image:url('../../images/hangang/tab5-insect2.jpg');}
#tab-5 .srk3 { background-image:url('../../images/hangang/tab5-insect3.jpg');}
#tab-5 .srk4 { background-image:url('../../images/hangang/tab5-insect4.jpg');}
#tab-5 .srk5 { background-image:url('../../images/hangang/tab5-insect5.jpg');}
#tab-5 .srk6 { background-image:url('../../images/hangang/tab5-insect6.jpg');}
#tab-5 .srk7 { background-image:url('../../images/hangang/tab5-insect7.jpg');}
#tab-5 .srk8 { background-image:url('../../images/hangang/tab5-insect8.jpg');}
#tab-5 .srk9 { background-image:url('../../images/hangang/tab5-insect9.jpg');}
#tab-5 .srk10 { background-image:url('../../images/hangang/tab5-insect10.jpg');}
#tab-5 .srk11 { background-image:url('../../images/hangang/tab5-insect11.jpg');}
#tab-5 .srk12 { background-image:url('../../images/hangang/tab5-insect12.jpg');}

#tab-6 .srk1 { background-image:url('../../images/hangang/tab6-birds1.jpg');}
#tab-6 .srk2 { background-image:url('../../images/hangang/tab6-birds2.jpg');}
#tab-6 .srk3 { background-image:url('../../images/hangang/tab6-birds3.jpg');}
#tab-6 .srk4 { background-image:url('../../images/hangang/tab6-birds4.jpg');}
#tab-6 .srk5 { background-image:url('../../images/hangang/tab6-birds6.jpg');}
#tab-6 .srk6 { background-image:url('../../images/hangang/tab6-birds5.jpg');}
#tab-6 .srk7 { background-image:url('../../images/hangang/tab6-birds7.jpg');}
#tab-6 .srk8 { background-image:url('../../images/hangang/tab6-birds8.jpg');}
#tab-6 .srk9 { background-image:url('../../images/hangang/tab6-birds9.jpg');}
#tab-6 .srk10 { background-image:url('../../images/hangang/tab6-birds10.jpg');}
#tab-6 .srk11 { background-image:url('../../images/hangang/tab6-birds11.jpg');}
#tab-6 .srk12 { background-image:url('../../images/hangang/tab6-birds12.jpg');}
#tab-6 .srk13 { background-image:url('../../images/hangang/tab6-birds13.jpg');}
#tab-6 .srk14 { background-image:url('../../images/hangang/tab6-birds14.jpg');}
#tab-6 .srk15 { background-image:url('../../images/hangang/tab6-birds15.jpg');}
#tab-6 .srk16 { background-image:url('../../images/hangang/tab6-birds16.jpg');}

#tab-7 .srk1 { background-image:url('../../images/hangang/tab7-mammalia1.jpg');}
#tab-7 .srk2 { background-image:url('../../images/hangang/tab7-mammalia2.jpg');}
#tab-7 .srk3 { background-image:url('../../images/hangang/tab7-mammalia3.jpg');}
#tab-7 .srk4 { background-image:url('../../images/hangang/tab7-mammalia4.jpg');}
#tab-7 .srk5 { background-image:url('../../images/hangang/tab7-mammalia5.jpg');}

.shrink-box .front{ position:absolute; padding:20px; box-sizing:border-box; width:100%; position:absolute; top:75%; left:50%; transform:translateX(-50%); z-index:99; text-align:center; }
.front h4 { color:#fff; font-size:1.6rem; text-shadow:3px 3px 5px rgba(0,0,0,.5); line-height:130%; font-weight: 600;}
.shrink-box .front p { display:inline-block; transition:.5s; font-size:1.1rem; color:#fff; width:170px; padding:10px; border-radius:50px; background:#ff8415; margin:15px 0 0; }
.back-box { position:absolute; left:0; top:0; background:rgba(255,153,78,0.9); z-index:100; width:100%; height:100%; opacity:0;  transition:0.3s; display:flex; justify-content:center; align-items:center; padding: 30px; box-sizing: border-box;}
.back-txt { max-width:100%; width:240px; }
.back-txt h5 {font-weight: 600;}
.back-txt h5 ,.back-txt span {text-align: center;}
.back-txt span { display: block; padding: 15px 0; color: #333; }
.back-txt p { font-size:1vw;}

.shrink-box > a{ position:relative; display:inline-block;  height:500px; transition:1s;  box-shadow:4px 0px 4px 2px rgba(0, 0, 0, 0.2) inset; }
.shrink-box1 > a, .shrink-box8 > a, .shrink-box9 > a{width:calc(100%/6);}
.shrink-box2 > a, .shrink-box6 > a, .shrink-box7 > a, .shrink-box10 > a, .shrink-box11 > a{width:calc(100%/8);}
.shrink-box3 > a{width:calc(100%/7);}
.shrink-box4 > a, .shrink-box5 > a, .shrink-box12 > a {width:calc(100%/5);}
.shrink-box .front{word-wrap: break-word;}
.shrink-box > a:focus, .shrink-box > a:hover{ width:20%; }
.shrink-box4 > a:focus, .shrink-box5 > a:focus, .shrink-box12 > a:focus,
.shrink-box4 > a:hover, .shrink-box5 > a:hover, .shrink-box12 > a:hover{width:25%;}
.shrink-box > a:focus .front, .shrink-box > a:hover .front{ opacity:0; transition:0.5s;}
.shrink-box > a:focus .back-box, .shrink-box > a:hover .back-box{ opacity:1; transition:0.5s;}