@charset "utf-8";

.btn{font-size: 1.25rem;}
.search select,
.search input[type=text]{font-size: 1rem;}
.search_array div.term input{font-size: .95rem;}
.introduce:After,
.guidemap:after{display: block; content: ''; clear: both;}
.search_array div.term input+img{visibility:hidden}

/* 소개 */
.introduce{position: relative}
.introduce img{font-size: 0px; border-radius:1.3rem; overflow:hidden; box-shadow:0px 1px 3px rgba(0,0,0,.2)}
.introduce .txt{float:right; position: relative; margin-top: -8.2em; margin-right:2.3em; padding: 3em 4em; background:rgba(255,255,255,.9); border-radius:1.3rem; overflow:hidden; box-shadow:0px 1px 3px rgba(0,0,0,.2); max-width: 710px; font-size: 1.05em; transform:rotate(-0.2deg)}
.introduce .txt span{display: block; margin-bottom: .5em; font:bold 1.23529em "Elice Digital Baeum", sans-serif; }
.guidemap{position: relative; min-height: 660px;}
.floor{position: absolute; top: 0px;  width: 24%; max-width: 325px; z-index: 1;}
.floor>li{border-top:1px dashed #ddd; border-width:1px 0px 0px 0px; transition:border-radius ease .2s, background ease .2s }
.floor>li:first-child{border-top:2px solid var(--color)}
.floor>li:last-child{border-bottom:1px solid #ddd}
.floor>li>a{display: block; padding: 1em; transition:all ease .3s; }
.floor>li .space{display: none; margin:auto; padding:2em 15% 3em; background: #F5F5F5; transition:opacity ease .2s, background ease .4s; border-radius:0px 0px .8em .8em ; color: #F5F5F5;}
.floor>li .space>li{font-size: 1.05em; margin-bottom: .5em;}
.floor>li .space ul{margin-top: .5em; margin-bottom: 1em; margin-left: 1em; font-size: .88em;}
.floor>li.on{background: var(--color); border-radius:.8em; color: #fff; border:0px !Important}
.floor>li.on .space{background: var(--color); color: #fff; }
.floor>li.on+li{border-top:0px}
.floor>li.on>a{padding: .8em 0px; margin:0em 1.2em; font-size: 2.6em; font-weight: bold; border-bottom:1px solid rgba(0,0,0,.1)}
#floorMap{float:right; text-align: center; margin-top: 1.5em; padding: 5% 2em 5% calc(2em + 9%); width:85%; background: #F5F5F5; border-radius:1em}
#floorMap .space{display: none !Important; flex-wrap:Wrap; gap:10px 20px; text-align: left; margin-top: 20px;}
#floorMap .space>li{font-weight: bold;}
#floorMap .space>li ul{font-weight: normal;}
.map{height: 500px; border-radius:1em; box-shadow:0px 1px 5px rgba(0,0,0,.2); overflow: hidden;}

/* 시설안내 */
#viewFacility{display: none; text-align: center; margin: auto;  padding: 4% 4%; max-width: 920px; background:#f5f5f5; border-radius:.8em; margin-bottom: 2em;}
#viewFacility .img{display:flex; justify-content: center; align-items:center; height: 290px; overflow:hidden}
#viewFacility .img img{width: 100%; height: 100%; object-fit:cover}
.facilities{display: flex; flex-wrap:wrap; gap:1%}
.facilities>li{position: relative; flex:0 0 24%; /* max-width:10%;  */margin-top: 1em}
.facilities>li p.img{height: 10vw; max-height: 250px; font-size: 0px; border-radius:6px; overflow:hidden}
.facilities>li p.img img{width: 100%; height:100%; object-fit:cover}
.facilities>li .onImg{position: absolute; top: -3rem ;left: calc(50% - min(25vw, 360px)); width: 50vw; max-width: 720px; max-height:660px; font-size: 0px; z-index: 1; border-radius: .7rem; overflow:hidden; box-shadow:0px 1px 3px rgba(0,0,0,.3)}
.facilities>li .onImg img{ width: 100%; height: 100%; object-fit:contain; object-position:center 0px; box-shadow:0px 5px 10px rgba(0,0,0,.5)}
.facilities>li p.name{margin-top:.5em; font-size: .95em;}
.gobtn_reserve{position: relative; text-align: center; margin-bottom: 2rem;}
.gobtn_reserve:AFter{display: block; content: ''; margin-top: -1.5rem; width: 100%; height: 3rem; background: linear-gradient(90deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 20%, #F5F5F5 80%, rgba(245, 245, 245, 0.00) 100%); z-index: -1;}
.gobtn_reserve a{display: block; position: relative; margin: auto; padding: 0rem 4vw; max-width: 615px; font-size: 0px; background: #fff; border:2px dashed #EACBCB; border-radius:.8rem; z-index: 1;}
.gobtn_reserve a:before{display: inline-block; content: ''; position: relative; bottom: -1rem; vertical-align: middle; width: 26%; height:30vw;max-width: 119px; max-height: 132px; background: url(/seochang/img/sub/ic_reserve.png) no-repeat left center / contain}
.gobtn_reserve a img[src*=txt]{width: 69%; max-width: 201px; vertical-align: middle; margin-left:5%}
.gobtn_reserve a span{display: inline-block; vertical-align: middle; text-align: center; margin-left: 1rem; width: 2.6rem; height: 2.6rem; line-height: 2.6rem; font-size: 1.2rem; color: #fff; background: var(--color01); border-radius:50px}
.facility{display: flex; flex-wrap:wrap; justify-content: space-between; margin-top: 2em;}
.facility_photo{flex:0 1 45%}
.facility_photo img{width: 100%; height: 100%; object-fit:cover}
.facility_photo .facility_list{overflow:hidden}
.facility_photo .facility_list>ul{position: relative; font-size: 0px; white-space: nowrap}
.facility_photo .facility_list>ul>li{display: inline-block; width: 100%; height: 350px; overflow:hidden; border-radius:7px}
.facility_photo .facility_btn{display: flex; gap:5px; margin-top: .7rem;}
.facility_photo .facility_btn>li{flex:0 1 calc(16.6% - 5px); height:55px; overflow:hidden; border-radius:2px}
.facility_photo .facility_btn>li.on{outline:2px solid #333}
.facility_con{flex:0 1 50%}
.facility_con dt{padding: .5em 0px 1.5em; margin-bottom: 1.5rem; font-size: 1.25em; font-weight: bold; border-bottom:1px solid #333}
.h4Box[id^=facility]{margin-top: 0px}
@media screen and (min-width:681px){
	.h4Con .facility_photo .facility_btn>li{flex:0 1 calc(20% - 5px);}
	.h4Con .facility_photo .facility_list>ul>li{height: 300px;}
}

/* 프로그램 */
.program_culture{margin: 0px auto 2rem; max-width: 900px; border-radius:.8rem}
.program_culture img{border-radius:.8rem; overflow:hidden}
.culture_exhibit{display: flex; flex-wrap:wrap; gap:.8rem}
.culture_exhibit .onlyImg{flex-basis:30%; font-size: 0px}
.culture_exhibit .onlyImg img{box-shadow:0px 1px 3px rgba(0,0,0,.1); border-radius:.8rem}
.culture_exhibit dl{flex-grow: 1; padding:max(3.5%, 2.3rem) max(2.8rem, 4%) max(3.5%, 2rem);  border:1px solid #ddd; border-radius:.8rem; box-shadow:2px 3px 0px rgba(0,0,0,.1)}
.culture_exhibit dt{font-weight: bold;}
.culture_exhibit dd+dt{margin-top: 1rem;}

/* 정보마당 */
.how_step{display: flex; flex-wrap:wrap; justify-content: space-between; gap:1em 1%}
.how_step li{flex:1 1 49%; padding: 5%; ;background: #f5f5f5; border-radius:10px}
.how_step .txt{position: relative; padding-left: 45px; ;margin-bottom: 2rem; }
.how_step .txt span.num{display: block; position: absolute; left: 0px; padding:0px 15px; background: #333; color: #fff; border-radius:50px}
.how_step .txt span.arr{display: inline-block; margin: 0px 3px; font-family: '돋움'; font-size: 12px;}

/*program*/
.c_bl{color: var(--color) !important}
.btn_preview{padding-top: 4px; text-shadow: 0px 0px 2px #000; font-size: .85em;}
.search_array select{margin-top: 1.5px;}
.board_list ul.generalList>li div.writer_info ul{display: flex; justify-content: flex-end; gap:5px}
.board_list ul.generalList>li div.writer_info ul li{width: auto !important; min-width: unset !important; padding-left: 13px;}
.board_list ul.generalList>li div.writer_info ul li:first-child{padding-left: 5px;}
.board_view div.con img{max-width: 650px !important;}


/***************************************************************************************************************************/



@media screen and (max-width:680px){
	.introduce .txt{float:none; margin-top: 0em; width: 100%; margin-bottom:5em; box-shadow:none; padding:20px}
	.guidemap{min-height:unset}
	.floor>li.on{border-radius:.4em;}
	.floor>li.on>a{padding: .8em 0px; margin:0em 1.2em;  font-size: 1em}
	.floor>li .space{display: none !important}
	#floorMap .space{display:flex !important; }
	.map{height: 150px;}
	.facilities>li{flex-basis:49%; }
	.facilities>li p.img{height: 18vw;}
	.gobtn_reserve a span{display: none;}
	.facility{flex-direction: column;}
	.facility_photo{order: 1; margin: 2rem 5% 0px}
	.facility_photo .facility_list>ul>li{height: 220px}
	.facility_photo .facility_btn>li{height: 45px;}
	.culture_exhibit .onlyImg{flex-basis:100%;}
	.how_step{flex-direction: column;}
	.board_list ul.generalList>li div.writer_info ul{justify-content: flex-start}
}