/* CSS Document */

.cont_wrap{margin-top:80px;/*border-top:1px solid #ebebeb*/}
/*고탑*/
	div.goTop{max-width:1600px;margin: 0 auto;position:relative;}
	div.goTop a{display:block;position:absolute;bottom:-120px;right:0;width:64px;height:64px;text-indent:-9999px;background:url(/wetland/images/common/gotop_bg.png)}
	@media screen and (-webkit-min-device-pixel-ratio:0) {		div.goTop a{bottom:-120px;}	}

	.main div.goTop a{bottom:-120px;}
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.main div.goTop a{bottom:-120px;}
	}
	div.goTop a:hover,
	div.goTop a:focus{filter:alpha(opacity=50);opacity:0.5;}
	@media only screen and (max-width:1600px){
		div.goTop{max-width:100%;top:auto;}
		div.goTop a{bottom:-120px}
	}
	@media only screen and (max-width:1222px){
		div.goTop{max-width:100%;top:auto;}
		div.goTop a{bottom:-91px}
	}


/*달력*/
/*스케쥴게시판*/
.w100{width:100%!important}

.cate1{background:#209784;color:#fff;padding:0 5px;font-size:12px}
.cate2{background:#7d2f73;color:#fff;padding:0 5px;font-size:12px}
.cate3{background:#84621f;color:#fff;padding:0 5px;font-size:12px}
.cate4{background:#ca5f08;color:#fff;padding:0 5px;font-size:12px}
.cate5{background:#503a0f;color:#fff;padding:0 5px;font-size:12px}

div.schedule div.calendar p.yymm{text-align:center;font-weight:bold;color:#fff;font-size: 24px;margin: 30px 0;}
div.schedule div.calendar p.yymm a{width: 0;height: 37px;overflow: hidden;display: inline-block;padding: 4px 16px 22px 8px;margin: 0 4px -2px 0;color: #A0A0A0;}
div.schedule div.calendar p.yymm a:first-child {margin-right:10px;}
div.schedule > div.calendar table.table td{height: 60px;width:14.2%;vertical-align:top}
div.schedule > div.calendar table.table td.select{background:#F5F5F5;}

div.schedule > div.calendar table.table td.data{background:url(../images/calendar_data.png) no-repeat left 2px top 2px;}

div.schedule > div.calendar table.table td.today{background:url(../images/calendar_today.png) no-repeat left 2px top 2px;}
div.schedule > div.calendar table.table td.today a{color:#fff;}

div.schedule > div.calendar table.table td.on {background:url(../images/calendar_day.png) no-repeat left 2px top 2px;}
div.schedule > div.calendar table.table td.on a {color:#fff;}
div.schedule > div.calendar table.table td.single{padding-left:4px}

div.schedule > div .day {padding-left:4px}
div.schedule > div.calendar table.table td.data .day {color:#fff;padding-left:4px}
div.schedule > div.calendar table.table td.data .cnt {position: absolute;margin: 22px 22px 22px 1px;font-size: 16px;text-align: center;color: #888;font-weight: bold;}
div.todaySch {min-height:100px;margin-top:30px;}
.container-fluid .todaySch {width:100%!important;display: inline-block;padding: 30px;margin: 0;}
div.todaySch p.bl {font-weight:bold;font-size: 15px;margin-bottom: 13px;margin-top: 5px;}
div.todaySch .r_box ul {padding: 10px 0;display: inline-block;width: 100%;background: #FFF;border: 1px solid #DBDBDB;margin:0}
div.todaySch .r_box ul li {border-bottom: 1px solid #DDD;padding: 5px 0;margin: 0 2%;width: 96%;display: block;float: left;font-size: 12px;background:none}
div.todaySch .r_box ul li a span {color:#838383;}
div.schedule {min-height: 560px;margin-top:-70px}
div.schedule div.calendar {display: inline-block;width: 35%;float: left; position: relative;}
div.schedule div.calendar .remarks {position:absolute;left:240px;top:105px;float: right;letter-spacing:-1px}
div.schedule div.calendar .remarks ul{}
div.schedule div.calendar .remarks li{float: left; padding-right: 15px;font-size: 14px; line-height: 14px; }
 .schedule div.calendar .remarks .remarks_today{font-size: 12px;line-height: 12px;color: #24aed2; margin-right: 0}
div.schedule div.calendar .remarks .remarks_on { font-size: 12px; line-height: 12px; color: #23508b; margin-right: 3px; }
div.schedule div.calendar .remarks .remarks_schedule{font-size: 12px;line-height: 12px;color: #5f7383; margin-right: 3px}
div.schedule div.calendar p.yymm {color: #3C3C3C;font-family: "Malgun Gothic", 'Nanum Gothic', "dotum", "gulim",'NanumSquare', sans-serif;letter-spacing:-0.03em}
div.schedule div.calendar p.yymm span {color:#03a9d0;}
div.schedule div.calendar .calTable th:first-child {color: #f37075;}
div.schedule div.calendar .calTable th:last-child {color: #1680CD;}
/*
.icon-chevron-left::before{background:url(/kr/common/img/calendar_btn_next.png) no-repeat;width:50px;height:49px}
.icon-chevron-right::before{background:url(/kr/common/img/calendar_btn_prev.png) no-repeat;width:50px;height:49px}
*/

div.todaySch div.tab-header p{margin:10px;font-size:15px;font-weight:bold;}
div.schedule div.todaySch ul.todayList {padding:5px;background: #FFF;border: 1px solid #DBDBDB;}
div.schedule div.todaySch ul.todayList li {border-bottom: 1px dashed #ccc;padding:5px 9px;}

div.schedule div.today_list {display: inline-block;width: 61%;margin: 30px 2% 0;}
div.schedule div.today_list ul {margin-top:15px; padding: 10px 10px 20px 10px;display: inline-block;width: 100%;background: #FFF;  border: 1px solid #DBDBDB; border-radius:0px;}
div.schedule div.today_list ul li {border-bottom: 1px dotted #DDD;padding: 15px 0 5px 10px;margin: 0 5%;width: 90%;display: block;float: left;font-size: 16px;background-position:0 24px}
.schedule_time {background: url(../images/icon_time.png) no-repeat; padding-left:22px; margin-right:15px; color:#555}
.schedule_title {margin-right:15px; letter-spacing:-1px;color:#000}
.schedule_station {background: url(../images/icon_location.png) no-repeat; padding-left:15px;color:#555;letter-spacing:-1px}

div.schedule .tab-header p {font-size: 20px;margin-bottom: 24px;text-align:center;color:#333}
div.schedule .tab-header p span{display: inline-block;width: 40px !important;height: 28px !important;background-color: #03a9d0;border-radius: 100px;margin: 0 3px;text-align: center;line-height: 28px;color:#fff}

ol, ul {margin: 0;padding: 0;}





/* 주변관광지 */
.grid{width:600px;height:auto;float:left;display:inline-block;box-sizing:border-box;margin:0 22px 20px 0;position:relative;overflow:hidden;box-sizing:border-box}
.grid.webR{margin:0 0 20px 0 !important}
.grid.sizeB{width:793px}
.grid a{width:100%;height:100%;display:block}
.grid a:focus{border: 1px dotted #000;}
.grid figure{width:100%;position:relative;overflow:hidden;text-align:center;cursor:pointer}
.grid figure figcaption{color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption,
.grid figure figcaption > a{position:absolute;top:0;left:0;width:100%;height:100%}

figure.effect-julia{width:100%;position:relative;background:url('/garden/images/cont/bg_hover01.png') repeat;box-sizing:border-box}
figure.effect-julia .introListTit0101{right:30px;bottom:25px;text-align:right;font-size:24px;font-weight:400;color:#fff;letter-spacing:-0.075em;text-shadow:#000 1px 1px;position:absolute;-webkit-transition:opacity 1s, -webkit-transform 1s;	transition:opacity 1s, transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia img{width:100%;height:360px;right:0;-webkit-transition:opacity 1s, -webkit-transform 1s;transition:opacity 1s, transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia:hover img{opacity:.1;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
figure.effect-julia:hover .introListTit0101{opacity:0}

figure.effect-julia figcaption{text-align:center !important;margin:0 auto}
figure.effect-julia .introTit_over01{width:100%;font-size:25px;font-weight:400;color:#fff;opacity:0;text-align:center;margin:70px 0 0 0}
figure.effect-julia .detailBar01{width:90%;height:2px;background:#fff;opacity:0;margin:0 auto;margin-top:25px;opacity:0}
figure.effect-julia p.introAd_over01{font-size:18px;font-weight:400;color:#b8b8b8;text-align:center;opacity:0;margin:15px 0 28px 0}
figure.effect-julia .btn_detail01{width:126px;height:29px;background:url('/garden/images/cont/icon_detail01.png') 85% 50% no-repeat;border:2px solid #fff;opacity:0;margin:45px 0 0 0;padding:0;font-size:14px;color:#fff;text-align:left;padding:3px 30px 4px 18px;
line-height:24px;cursor:pointer}
figure.effect-julia:hover .introTit_over01{opacity:1;-webkit-transition:opacity 1s, -webkit-transform 1s;transition:opacity 1s, transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia:hover p.introAd_over01{opacity:1;-webkit-transition:opacity 1s, -webkit-transform 1s;transition:opacity 1s, transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia:hover .btn_detail01{opacity:1;-webkit-transition:opacity 1s, -webkit-transform 1s;transition:opacity 1s, transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia:hover .detailBar01{opacity:0.4;-webkit-transition:opacity 1s, -webkit-transform 1s;transition:opacity 1s, transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia .introListTit0101 {	right: 30px;	bottom: 10px;	text-align: right;	font-size: 18px;	font-weight: 400;	color: #fff;	letter-spacing: -0.075em;	text-shadow: #000 1px 1px;
	position: absolute;	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;	transition: opacity 0.5s, transform 0.5s;	-webkit-backface-visibility: hidden;	backface-visibility: hidden;	z-index: 70;
}
figure.effect-julia .introListTitBg {	width: 100%;	height: 44px;	right: 0;	bottom: 0;	position: absolute;	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, transform 0.5s;	-webkit-backface-visibility: hidden;	backface-visibility: hidden;	background: #000;	opacity: 0.7}
figure.effect-julia:hover .introListTit0101 {	opacity: 0}
figure.effect-julia:hover .introListTitBg{opacity:0}
figure.effect-julia:hover img {	opacity: .1}
.no_web{display:none}

@media all and (max-width:1223px){
.grid{width:48%;}
}
@media all and (max-width:880px){
figure.effect-julia .introListTit0101{font-size: 15px;}
}
@media all and (max-width:719px){
.grid{width:100%;}
}

/*테마별 정원*/
.pub_list ul.pub_list_blog{	border-top:2px solid #af664f;	margin-top: 17px;font-family: NotoSansKR,'맑은 고딕','Malgun Gothic','Apple SD Gothic Neo','돋움',dotum, sans-serif;}
.pub_list ul.pub_list_blog li{padding:30px 0;border-bottom:1px solid #dbdbdb;width:100%}
.pub_list ul.pub_list_blog li p.img_publist_blog{float:left;border:1px solid #f1f1f1;margin-right:30px}
.pub_list ul.pub_list_blog li p.img_publist_blog a img{width:300px;height:200px; cursor: pointer;}
.pub_list ul.pub_list_blog li .explanation .txt_publist_blog01 {padding:9px 0 0px 0;height:108px;overflow:hidden;margin-bottom: 15px;}
.pub_list ul.pub_list_blog li .explanation .tit_publist_blog01 a{letter-spacing:-1px;color:#323232;color:#787878;font-size:1.5rem; cursor: pointer;}
.pub_list ul.pub_list_blog li .explanation .txt_publist_blog01 a{font-weight:200;color:#000; cursor: pointer;}
.pub_list ul.pub_list_blog li .explanation .star_publist_blog01 a{float:right;line-height:13px;text-align:left;padding:14px 10px 3px 10px;color:#2aade5;font-weight:600}
.pub_list ul.pub_list_blog li .explanation button.btn{border:0}
.pub_list ul.pub_list_blog li.end{margin-right:0}
.world_name{padding:8px;width:220px}




/* 갯벌 생물 사전 상단 검색 - 200215 13:20 iworks 디자인팀 추가 */
.searchBoxWrap .search_row .searchBox2{margin:4px 0 0 290px}
.searchBoxWrap .search_row .searchBox2 .srch_btn{border: 0; padding:0 66px 0 23px; height:40px;line-height:40px;color:#fff;font-size:18px;font-weight: 400; letter-spacing:-1px;background:#af664f url("/garden/images/common/search_iconWhite_02.png") no-repeat 72px 50%}
.searchBoxWrap .search_row .searchBox2 .srch_box{width:342px;padding:8px;margin-right:5px}
.serchWordBox{display:block;width:621px;margin:10px auto;background:#fff;border:2px solid #b17131}
.serchWordBox .tab .tab_btn{margin-top:4px;display: inline-block;border: 1px solid #ddd;padding: 4px 6.5px;cursor: pointer;margin-right: 2px; margin-bottom: 5px; text-align: center;font-size: 15px;}
.serchWordBox .tab .tab_btn.on{background-color: #b17131; color: #fff;}
.serchWordBox .tab span.srch_word{padding:0 5px 0 10px;color:#793d01}

.searchBoxWrap .search_row .searchBox2 .select_type2{font-size: 1em; height: 41px;}




@media all and (max-width:1200px){
.searchBoxWrap .search_row .searchBox2{margin-left:0!important}	
.serchWordBox{margin-left:0!important;position:relative;}
}
@media all and (max-width:767px){
.serchWordBox{width: 100%;}
.searchBoxWrap .search_row .searchBox2 .srch_box{width:30%;}
}
@media all and (max-width:600px){
.world_srch_btn{width:19%!important;float:right;}
.world_name{width:80%;border:1px solid #e0e0e0;box-sizing:border-box}
.searchBoxWrap .search_row .searchBox{margin-left:0!important; text-align: left;}
.searchBoxWrap .search_row .searchBox2{margin-left:0!important; text-align: left;}
}
@media all and (max-width:400px){
.searchBoxWrap .search_row .searchBox2 .srch_box{width:34%;}
.searchBoxWrap .search_row .searchBox2 .srch_btn{padding:0 15px; background-image:none;}
}
.paging {
	clear: both;
	vertical-align: middle;
	text-align: center;
	font-size: 0px;
	margin: 20px 0 20px 0;
}
.paging a.first, .paging a.prev, .paging a.next, .paging a.last {
	vertical-align: top;
	display: inline-block;
	width: 35px;
	height: 35px;
	border: 1px solid #d5d5d5;
}
.paging a.first {
	background: #fff url('/images/front/page_btn_left_img_01.gif') no-repeat 50% 50%;
}
.paging a.prev {
	background: #fff url('/images/front/page_btn_left_img_02.gif') no-repeat 50% 50%;
	margin: 0 10px 0 2px;
}
.paging .num {
	font-size: 0px;
}
.paging .num a.on {
	border: 1px solid #f7660d;
	color: #f7660d;
	font-weight: bold;
}
.paging .num a {
	vertical-align: top;
	display: inline-block;
	width: 35px;
	height: 30px;
	border: 1px solid #eaeaea;
}
.paging .num a {
	padding: 2px 0px 0 0px;
	margin: 0 1px 0 1px;
	height: 35px;
	line-height: 30px;
	display: inline-block;
	border: 1px solid #eaeaea;
	color: #666;
	background: #fff;
	font-size: 11px !important;
	font-family: "Verdana", "Arial", "Lucida Grande", "Tahoma", "sans-serif";
}
.paging a.next {
	background: #fff url('/images/front/page_btn_right_img_01.gif') no-repeat 50% 50%;
	margin: 0 2px 0 10px;
}
.paging a.last {
	background: #fff url('/images/front/page_btn_right_img_02.gif') no-repeat 50% 50%;
}
.paging a {
	position: relative;
	z-index: 10;
}


/*svg {  background: white;}*/
.path {  fill: none;  stroke: cornflowerblue;  stroke-width: 1;}
.blur {  filter: url('#dropshadow');}

/* 생태체험선 운항시간표 더보기 레이어팝업 */
#shipScheduleDialog{height: auto!important;}
#shipScheduleDialog .time{width: 100%;}
#shipScheduleDialog .time_wrap{width: 100%; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; overflow: hidden;}
#shipScheduleDialog .time p{width: 100%; color: #333; font-size: 1rem; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid #e1e1e1; text-align: center;}
#shipScheduleDialog .time dl{float: left; width: 4.34%; text-align: center; border-left: 1px solid #e1e1e1;}
#shipScheduleDialog .time dl dt{padding: 8px 0 5px; border-bottom: 1px dashed #e1e1e1;}
#shipScheduleDialog .time dl dd{padding: 5px 0 6px; border-bottom: 1px dashed #e1e1e1;}
@media all and (max-width:1600px){
#shipScheduleBox2 .ui-dialog{width: 88%!important; left: 100px!important;}	
}
@media all and (max-width:1280px){
#shipScheduleBox2 .ui-dialog{width: 96%!important; left: 28px!important;}	
#shipScheduleDialog .time dl dt,
#shipScheduleDialog .time dl dd{font-size: 0.8rem;}
}
@media all and (max-width:1000px){
#shipScheduleBox2 .ui-dialog{width: 94%!important;}	
#shipScheduleDialog .time dl{width: 8.3%;}
#shipScheduleDialog .time dl:last-child{width: 8.4%; border-right: 1px solid #e1e1e1;}
#shipScheduleDialog .time dl dd{border-bottom: 1px solid #e1e1e1;}
}
@media all and (max-width:600px){
#shipScheduleBox2 .ui-dialog{left:8px!important;}	
}
@media all and (max-width:470px){
#shipScheduleDialog .time dl{width: 12.5%;}
#shipScheduleDialog .time dl:last-child{width: 12.7%;}
#shipScheduleDialog .time dl dt,
#shipScheduleDialog .time dl dd{font-size: 0.7rem;}

}

/*행사안내*/
.schedule a.btn_list{float:right}


/*입장권예매 20210628-접근성작업하면서 정원 css랑 분리*/
.booking_wrap{margin-bottom:20px;position:relative;overflow: hidden;}
.booking_wrap .booking{width:100%;background:#f5f4f4;border:1px solid #ebebeb;}
.booking_wrap .booking01{float:left;padding:40px 0 20px 0}
.booking_wrap .booking02{float:right;padding:48px 0;/*width:100%*/}
.booking_wrap .booking p{text-align:center;font-size:2.3rem;font-weight:200;color:#000;padding-top:10px;letter-spacing:-2px}
.booking_wrap .booking span.booking_orange{color:#dd6f1d;font-weight:600}
.booking_wrap .booking span.booking_green{color:#04821c;font-weight:600}
.booking_wrap .booking01 p a{color:#fff;width:300px;display:inline-block;height:40px;line-height:40px}
.booking_wrap .booking01 p.booking_etc{text-align:center;font-size:1rem;letter-spacing:-0.5px}
/*a.btn_booking_orange:after{content:"\f08e";color:#fff;font-family:FontAwesome;text-decoration:inherit;font-size:1rem;padding-left:5px;vertical-align:middle}*/

.booking_wrap .booking02 p a{color:#fff;width:300px;display:inline-block;height:40px;line-height:40px}

.btn_booking_orange{background:#dd6f1d;font-size:1rem}
.btn_booking_green{background:#06891f;font-size:1rem}
/*p a.booking_btn:after{content:"\f08e";color:#fff;font-family:FontAwesome;text-decoration:inherit;font-size:1rem;padding-left:5px;vertical-align:middle}*/
@media all and (max-width:860px){
.booking_wrap .booking p{font-size:1.6rem;}
.booking_wrap .booking01 p.booking_etc{font-size:0.8rem}
.booking_wrap .booking01 p a, 
.booking_wrap .booking02 p a{width:235px;}
.booking_wrap .booking02{padding:45px 0}

}
@media all and (max-width:600px){
.booking_wrap .booking p{font-size:1.2rem;}
.booking_wrap .booking01 p a, 
.booking_wrap .booking02 p a{width:190px; font-size: 0.9rem;}
.inside .MainImg{width:100%!important;height:auto!important}
}
@media all and (max-width:500px){
.booking_wrap{height: auto;}
.booking_wrap .booking{width: 100%; padding: 10px 0 20px;}
.booking_wrap .booking01,
.booking_wrap .booking02{float: none;}
}