/*한강의 생태경관 css*/
.sub-bnr ul.sub-menu li button,.tab-pages h2 { color:#007c51; }
.sub-bnr ul.sub-menu li button.active ,.sub-bnr ul.sub-menu li:hover button { background:#05593c; }
.sub-bnr li.sub-left { background:#f08437; } 
.sub-bnr li.sub-center{ flex-grow:4;  background:#007c51; }
.sub-bnr li.sub-right { background:#005ea2; } 

.tab-page .item { display: flex; height:600px; }
.tab-page dl {padding: 15px; font-size: 0.9vw;}
.tab-page dl:first-child { border-bottom: 2px dashed #007c51; }
.tab-page dl:last-child { padding-top:30px; }
#tab-3 dl:first-child { border-bottom:0; }
.tab-page dt { text-align:center; color:#007c51; margin-bottom:20px; font-size: 1.8rem; font-weight: 600;}
.tab-page dd span { display: inline-block; width: 90px; }
.des dl dd {display: flex; }
.des dl dd span:first-child {width:18%;min-width: 100px;}
.des dl dd span:last-child {width:75%; }
.tab-page h3 { position:absolute; bottom:5%; font-size:4rem; color: rgba(255,255,255,.9); }
.tab-page h3.align_l { left:5%; display:none; } 
.tab-page h3.align_r { right:5%; display:none;} 
.tab-page .item-l { width:65%; position:relative; }
.tab-page .item-r { width:35%; border-top: 5px solid #007c51; border-bottom: 5px solid #007c51; padding:40px 60px; box-sizing: border-box;display: flex;align-items: center;}
.bg-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bg { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: 0 0; }
#tab-1 .item1 .bg{ background-image: url('../../images/hangang/garden1-image1.jpg'); }
#tab-1 .item2 .bg{ background-image: url('../../images/hangang/garden1-image2.jpg'); }
#tab-1 .item3 .bg{ background-image: url('../../images/hangang/garden1-image3.jpg'); }
#tab-1 .item4 .bg{ background-image: url('../../images/hangang/garden1-image4.jpg'); }
#tab-1 .item5 .bg{ background-image: url('../../images/hangang/garden1-image5.jpg'); }

#tab-2 .item1 .bg{ background-image: url('../../images/hangang/garden2-image1.jpg'); }
#tab-2 .item2 .bg{ background-image: url('../../images/hangang/garden2-image2.jpg'); }
#tab-2 .item3 .bg{ background-image: url('../../images/hangang/garden2-image3.jpg'); }
#tab-2 .item4 .bg{ background-image: url('../../images/hangang/garden2-image4.jpg'); }
#tab-2 .item5 .bg{ background-image: url('../../images/hangang/garden2-image5.jpg'); }

#tab-3 .item1 .bg{ background-image: url('../../images/hangang/garden3-image1.jpg'); }
#tab-3 .item2 .bg{ background-image: url('../../images/hangang/garden3-image2.jpg'); }
#tab-3 .item3 .bg{ background-image: url('../../images/hangang/garden3-image3.jpg'); }

/* 팝업 모달 스타일 */
.modal { display: none; position: fixed; z-index: 999; padding-top: 150px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }

/* 팝업 모달 콘텐츠 스타일 */
.modal-content {margin: auto; display: block; width: 80%; max-width:900px;}

/* 팝업 모달 이미지 스타일 */
.modal-content img { width: 100%; height: auto; }

/* 팝업 모달 닫기 버튼 스타일 */
.close { position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; color: white; }

.close:hover,
.close:focus { color: #999; text-decoration: none; cursor: pointer; }
.img-btn {margin-left: 30px; font-size: .9rem!important; padding: 5px 10px; background: #007c51; color: #fff;display: inline-block; border: none; border-radius: 5px; cursor: pointer; transition: .3s;}
.img-btn:hover { opacity:.8; }