@charset "utf-8";

/* 비주얼&주변 복지정보 검색 */
.main_vis_bg {width:100%; height:500px; background:url('./images/main_vis_02.png') no-repeat center bottom; display:inline-block;}
.main_vis_con {width:100%; max-width:1200px; margin:0 auto; position:relative; padding:55px 0px 35px 0px;}
.main_vis_con > img {display:block; margin:20px auto 10px 225px; width:100%; max-width:357px;}

.quick_01 {width:53%; display:inline-block; margin-right:10px;}
.quick_01 > span {background:#00446b; border-radius:10px 10px 0px 0px; padding:10px 20px; display:inline-block;}
.quick_01 > ul {text-align:center; background:url('./images/quick_bg_01.png') no-repeat center center; background-color:#01629a; border-radius:0px 10px 10px 10px; padding:25px 20px 10px 20px; display:block;}
.quick_01 > ul > li {display:inline-block; width:24%; display:inline-block; text-align:center; margin-bottom:15px;}
.quick_01 > ul > li > a {text-align:center; display:inline-block; color:#fff; font-size:17px; font-family:'NanumSquareR';}
.quick_01 > ul > li > a > img {display:block; margin:0 auto 10px auto;}

.quick_02 {width:45%; display:inline-block;}
.quick_02 > span {background:#00446b; border-radius:10px 10px 0px 0px; padding:10px 20px; display:inline-block;}
.quick_02 > ul {text-align:center; background:url('./images/quick_bg_02.png') no-repeat center center; background-color:#01629a; border-radius:0px 10px 10px 10px; padding:25px 20px 10px 20px; display:block;}
.quick_02 > ul > li {display:inline-block; width:32%; display:inline-block; text-align:center; margin-bottom:18px;}
.quick_02 > ul > li > a {text-align:center; display:inline-block; color:#fff; font-size:15px;}
.quick_02 > ul > li > a > img {display:block; margin:0 auto 10px auto;}

/* 상세검색 */
.d_search {display:inline-block; background:url('/_main/img/d_search_bg.png') no-repeat center center; width:236px; height:465px; position:absolute; top:0; right:0; text-align:center; padding-top:280px;}
.d_search > a{ overflow:hidden;    display: block;    height: 150px;}
.d_search > a > img {display:block; margin:0 auto 10px auto;}
.d_search > a:focus { border:3px solid #000000 !important;}


.quick_01 a:focus { border:2px solid #ffffff !important; }
/* 공지사항&상담실&오시는 길 */
.notice_wrap {background:#fff; width:100%; padding:35px 0px 15px 0px;}
.notice_con {width:100%; max-width:1200px; margin:0 auto;}

.banner_wrap{ float: right; width: 31%; margin-left:1%; margin-right:0.8%; height: 310px;}
.banner_wrap{overflow:hidden;}
.banner_wrap ul li{  border-radius: 10px;float:left; width: calc( 50% - 10px ); margin-right: 20px; text-align:center; margin-bottom:10px; height: 150px; padding: 20px;}
.banner_wrap ul li img { margin-bottom: 10px;}
.banner_wrap ul li:nth-child(2n){margin-right:0;}
.banner_wrap ul li:nth-child(1){background:#e7d835;}
.banner_wrap ul li:nth-child(2){background:#ba9e00;}
.banner_wrap ul li:nth-child(3){background:#f1a983;}
.banner_wrap ul li:nth-child(4){background:#e9ae36;}

/*상당실&오시는길 공통*/

/* 가활/세부사업안내 & 사진첩 */
.gall_wrap {width:100%; background:#fff; padding:0 0 35px 0;}
.gall_con {width:100%; max-width:1200px; margin:0 auto;}

/* 가활/세부사업안내 */
.gawhal_bg { position: relative;background:url('/_main/img/gawhal_bg.png') no-repeat center center; width:423px; height:245px; border-radius:10px; display:inline-block; padding:25px; vertical-align:middle; margin-right:15px;}
.gawhal_ul {padding-left:60%; padding-top:30px;}
.gawhal_ul > li {background:url('/_main/img/gawhal_li_bg.png') no-repeat 90% center; background-color:#224a87; display:inline-block; width:100%; border-radius:3px; margin-bottom:3px; padding:5px 20px;}
.gawhal_ul > li > a {color:#fff; display:inline-block; width:100%; font-size:15px;}

/* 사진첩 */
.photo_wrap {display:inline-block; width:calc( 100% - 450px ); border:1px solid #ccc; border-radius:10px; padding:20px; vertical-align:middle; position:relative;}
.photo_tit {font-size:19px; font-family:'NanumSquareR'; color:#222; display:inline-block;}
.photo_more {color:#fff; padding:1px 8px; background:#4b4b4b; border-radius:3px; position:absolute; top:20px; right:20px;}
.amazon_scroller_nav {top:58.5px !important;}
.amazon_scroller {	padding: 0px;	margin: 0px;	border-radius: 10px;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	-o-border-radius: 10px;	-khtml-border-radius: 10px;}
.amazon_scroller .amazon_scroller_nav {position: absolute;}
.amazon_scroller .amazon_scroller_nav li {cursor: pointer;position: absolute;}
.amazon_scroller .amazon_scroller_mask {position: absolute;padding-top: 5px;margin-left: 25px;margin-right: 25px;overflow: hidden;}
.amazon_scroller ul {padding: 0px;margin: 0px;float: left;}
.amazon_scroller ul li {padding: 0px;margin: 0px;margin-left: 15px;margin-right: 15px;list-style: none;float: left;text-align: center;display: inline;}
.amazon_scroller ul li a {text-decoration: none;}
.amazon_scroller ul li a amazon_scroller_title {overflow: hidden;}
.amazon_scroller ul li a:hover {text-decoration: underline;}
.lbtn{left:0; margin : 0 !important; }
.rbtn{right:0; margin : 0 !important; }
.amazonimg{ }
.amazon_scroller_title{ margin-top : 15px; font-size:15px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gallery_wrap{ margin-top: 10px;}


.bbs_wrap{ margin-right: 1%; display: inline-block;  vertical-align: top;  width:385px; height:310px;    border-radius: 10px; padding:15px; border:1px solid #ccc;}
.bbs_tit_wrap{ margin-bottom:20px; position:relative; height:155px; width:100%; border-radius:5px; background:url(/_main/img/notice_bg2.png) bottom right no-repeat;  background-color:#e8e9ee; padding:20px; border: 1px solid #ccc;}
.bbs_tit_img{position:absolute;top: 20px; left: -16px;}
.bbs_tit_text{ font-size:15px; color:#555555;position:absolute;top: 82px;left: 20px;font-weight:bold;}
.bbs_wrap ul li{  padding:6px ; padding-left:12px; position:relative; }
.bbs_wrap ul li span.tit{ vertical-align:bottom; margin-right: 20px;width: calc( 100% - 80px ); font-size:15px; color:#222222; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.bbs_wrap ul li span.date{ font-size:14px; color:#555555; vertical-align:bottom;}
.bbs_wrap ul li:before{content: " "; width: 5px; height: 5px; top: 15px; left: 0px;  background: #aa6105; border-radius: 50%;position: absolute;}

.slider_wrap_wrap{ display: inline-block;  vertical-align: top;  }


@media screen and (max-width:1230px) {
	.gall_con {padding:0px 20px;}
	.bbs_wrap{ width: calc( 100% - 417px );}

	.notice_con {padding:0px 20px;}

	.banner_wrap{ float:none; width:100%; margin:0; margin-top: 10px; height:150px;}
	.banner_wrap ul li{  width: calc( 25% - 12px ); margin-right: 16px; }
	.banner_wrap ul li:nth-child(2n){margin-right: 16px; }
	.banner_wrap ul li:last-child{margin-right: 0; }
}

@media screen and (max-width:1150px) {
	.main_vis_bg {height:auto; background:#d7e6ff;}
	.main_vis_con {padding:5px 20px 5px 20px;}
	.main_vis_con > img {margin:20px auto;}
	.quick_01, .quick_02 {width:100%; margin-right:0px; margin-bottom:15px;}
	.quick_01 > ul {background:#01629a;}
	.quick_02 > ul {background:#01629a;}
	.quick_02 > span > img {width:100%; max-width:259px;}
	.quick_01 > ul > li {width:100%; max-width:110px; display:inline-block;}
	.quick_02 > ul > li {width:100%; max-width:150px; display:inline-block;}

	.d_search {width:100%; background:#f5fddc; border:3px solid #639324; border-radius:10px; margin-bottom:10px; height:auto; position:relative; top:auto; right:auto; padding-top:10px;}
	.d_search > a > img {display:inline-block;}
}

@media screen and (max-width:840px) {
	.gawhal_bg {background:#d1f1fa; width:100%; margin-right:0px; margin-bottom:15px; height:auto;}
	.gawhal_ul {text-align:center; width:100%; padding-left:0px; padding-top:15px;}
	.gawhal_ul > li {width:150px; display:inline-block; text-align:left;}
	
	.photo_wrap {width:100%;}
}

@media screen and (max-width:750px) {
	.bbs_wrap{ width: 100%;}
	.slider_wrap_wrap{ display:block; margin-top:10px;text-align:center; background:#4f7e12;  border-radius:10px;}
	.slider_wrap{ display:inline-block;}
}

@media screen and (max-width:640px) {
	.banner_wrap{ height:310px;}
	.banner_wrap ul li{  width: calc( 50% - 10px ); margin-right: 20px; }
	.banner_wrap ul li:nth-child(2n){margin-right: 0px; }
}

@media screen and (max-width:600px) {
	.main_con1 {padding-left:0; padding-right:0; background:url(../_main/img/mcon01_bg.png) repeat-y -190px; background-color:rgb(249, 250, 250);}	
}


@media screen and (max-width:400px) {
	.photo_more {position:relative; top:auto; right:auto; display:inline-block; margin-left:calc( 100% - 60px );}
}