@charset "utf-8";
/***** 메인 CSS *****/

.popup_layer{display: none;}

.cont_wrap{position: relative; width: 100%; padding-bottom: 45px; background: url(/town/img/main/all_bg.jpg) top center no-repeat; overflow: hidden;}
.main_container{width: 100%; max-width: 1288px; margin: 0 auto; overflow: hidden;}

.visual_text{height: 168px; text-align: center; line-height: 168px;}

.main_container .fl{width: 37.6%; margin-right: 2.1%;}
.main_container .fr{width: 60.3%;}
/* 팝업존 */
.kr_main_02{position: relative; width: 100%; max-width: 484px; margin-bottom: 20px; text-align: center; background: rgba(255,255,255,.5); border: 1px solid #dadcda; border-radius:3px;}
.kr_main_02 p img{width: 100%; max-width: 484px; height: 518px;}
.kr_main_02 .control_btn{position: absolute; width: 131px; height: 23px; right: 0; bottom: 0; background: #fff; border: 1px solid #dedede; z-index: 90;}
.kr_main_02 .control_btn div{float: left;}
.kr_main_02 .control_btn .crt_page{float: left; width: 58px; padding: 4px 0 0; color: #333; font-size: 12px; text-align: center;}
.kr_main_02 .control_btn a{display: block; padding: 0 8px 2px; border-left: 1px solid #dedede;}
.kr_main_02 .control_btn .crt_all{display:none}

.kr_main_02 .bx-wrapper {border: none!important; margin: 0!important; box-shadow:none;}
.kr_main_02 .bx-wrapper .bx-viewport img{width: 484px!important; height: 518px!important;}


/* 아이콘링크 */
.quick_link{clear: both; width: 100%; max-width: 484px; height: 132px; background: #fff; border: 1px solid #e7e2de; border-radius:3px;}
.quick_link ul{width: 100%; overflow: hidden;}
.quick_link ul li{display: inline-block; width: 24.1%; border-right: 1px solid #e7e2de;}
.quick_link ul li a{display: block; padding: 95px 0 20px 0; font-size: 14px; color: #555; text-align: center;}
.quick_link ul li:nth-child(1){background: url(/town/img/main/icon_link01.gif) 50% 35% no-repeat;}
.quick_link ul li:nth-child(2){background: url(/town/img/main/icon_link02.gif) 50% 36% no-repeat;}
.quick_link ul li:nth-child(3){background: url(/town/img/main/icon_link03.gif) 50% 36% no-repeat;}
.quick_link ul li:nth-child(4){background: url(/town/img/main/icon_link04.gif) 50% 37% no-repeat; border-right: none;}

/* 공지사항 */
.notice{position: relative; width: 100%; height: 367px; margin-bottom: 21px;}
.notice .tab_on{position: absolute; left: 0; top: 0; width: 50%; height: 85px; color: #fff; font-size: 18px; text-align: center; background: url(/town/img/main/tab_notice_on.png) left top no-repeat; line-height: 55px;}
.notice .tab_on span{display: block; height: 64px; background: url(/town/img/main/tab_notice_arow.png) center bottom no-repeat;}

.notice .tab_off{position: absolute; right: 0; top: 0; width: 50%; height: 85px; font-size: 18px; text-align: center; background: url(/town/img/main/tab_notice.png) right top no-repeat; line-height: 55px;}
.notice .tab_off a{color: #333;}

.notice .list{position: relative; top: 85px; border: 1px solid #e7e8e9; border-radius:3px; background: #fff url(/town/img/main/dotline.gif) center 68px no-repeat; overflow: hidden;}
.notice .list h3.tit{height: 67px; color: #333; font-size: 24px; font-weight: 600; padding-left: 3.1%; border-bottom: 1px solid #e0e0e0; line-height: 67px;}
.notice .list ul{display: block; float: left; width: 50%; height: 214px; padding: 15px 3% 0;}
.notice .list ul li{line-height: 45px;}
.notice .list ul li a{display: block; width: 100%; color: #333; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.notice .list ul li a span{display: inline-block; padding: 3px 0; margin-right: 12px; line-height: 17px; color: #fff; font-size: 14px; border-radius:10px; width: 55px; text-align: center;}

.notice .list ul li a span.t{background: #6c7276; border: 1px solid #6c7276;font-size:12px!important;letter-spacing:-1px}
.notice .list ul li a span.t01{background: #55a5dc; border: 1px solid #55a5dc;}
.notice .list ul li a span.t02{background: #2f5d7d; border: 1px solid #2f5d7d;}
.notice .list ul li a span.t03{background: #1f5b84; border: 1px solid #1f5b84;}
.notice .list ul li a span.t04{background: #1d6158; border: 1px solid #1d6158;}
.notice .list ul li a span.t05{background: #427f9a; border: 1px solid #427f9a;}
.notice .list ul li a span.t06{background: #5b0454; border: 1px solid #5b0454;}
.notice .list ul li a span.t07{background: #425a6b; border: 1px solid #425a6b;}
.notice .list ul li a span.t08{background: #1283d0; border: 1px solid #1283d0;}
.notice .list ul li a span.t09{background: #2877ad; border: 1px solid #2877ad;}
.notice .list ul li a span.t10{background: #442e7a; border: 1px solid #442e7a;}
.notice .list ul li a span.t11{background: #325c6d; border: 1px solid #325c6d;}
.notice .list ul li a span.t12{background: #363a90; border: 1px solid #363a90;}
.notice .list ul li a span.t13{background: #0796f7; border: 1px solid #0796f7;}
.notice .list ul li a span.t14{background: #496c83; border: 1px solid #496c83;}
.notice .list ul li a span.t15{background: #55a5dc; border: 1px solid #55a5dc;}
.notice .list ul li a span.t16{background: #1283d0; border: 1px solid #1283d0;}
.notice .list ul li a span.t17{background: #3511c6; border: 1px solid #3511c6;}
.notice .list ul li a span.t18{background: #2b9789; border: 1px solid #2b9789;}
.notice .list ul li a span.t19{background: #033d7f; border: 1px solid #033d7f;}
.notice .list ul li a span.t20{background: #5a6e77; border: 1px solid #5a6e77;}
.notice .list ul li a span.t21{background: #7753d3; border: 1px solid #7753d3;}
.notice .list ul li a span.t22{background: #334e4a; border: 1px solid #334e4a;}
.notice .list ul li a span.t23{background: #090daf; border: 1px solid #090daf;}
.notice .list ul li a span.t24{background: #4652cc; border: 1px solid #4652cc;}
.notice .list .more{position: absolute; right: 3%; top: 25px;}
.notice .list .more a{padding: 8px 15px 6px; color: #fff; font-size: 14px; background: #1286d5; border: 1px solid #bbb; border-radius:16px;}


/* 우리마을앨범 */
.photo{position: relative; width: 100%; height: 284px; padding-left: 3.1%; background: #fff; border: 1px solid #cbc3bc; border-radius:3px;}
.photo h3.tit{height: 67px; color: #333; font-size: 24px; font-weight: 600; line-height: 67px;}
.photo .list{float: left; width: 30%; margin-right: 3%;}
.photo .list dl dt{color: #666; font-size: 16px; font-weight: 500; line-height: 33px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.photo .list dl dd{color: #aaa; font-size: 14px; font-weight: 400;}
.photo .img{display: block; position: relative;}
.photo .img img{width: 100%; max-width:223px; height: 149px; border: 1px #d8dbd7 solid;}
.photo .img span{position: absolute; left: 0; bottom: 0; padding: 7px 13px; color: #fff; font-size: 14px;}
.photo .img span.t01{background: #55a5dc;}
.photo .img span.t02{background: #2f5d7d;}
.photo .img span.t03{background: #1f5b84;}
.photo .img span.t04{background: #1d6158;}
.photo .img span.t05{background: #427f9a;}
.photo .img span.t06{background: #5b0454;}
.photo .img span.t07{background: #425a6b;}
.photo .img span.t08{background: #1283d0;}
.photo .img span.t09{background: #2877ad;}
.photo .img span.t10{background: #442e7a;}
.photo .img span.t11{background: #325c6d;}
.photo .img span.t12{background: #363a90;}
.photo .img span.t13{background: #0796f7;}
.photo .img span.t14{background: #496c83;}
.photo .img span.t15{background: #55a5dc;}
.photo .img span.t16{background: #1283d0;}
.photo .img span.t17{background: #3511c6;}
.photo .img span.t18{background: #2b9789;}
.photo .img span.t19{background: #033d7f;}
.photo .img span.t20{background: #5a6e77;}
.photo .img span.t21{background: #7753d3;}
.photo .img span.t22{background: #334e4a;}
.photo .img span.t23{background: #090daf;}
.photo .img span.t24{background: #4652cc;}
.photo .more{position: absolute; right: 3%; top: 25px;}
.photo .more a{padding: 8px 15px 6px; color: #fff; font-size: 14px; background: #1286d5; border: 1px solid #bbb; border-radius:16px;}





/**PC_Ver 1366*****************************************************/
@media screen and (max-width: 1366px) {
.main_container{padding: 0 10px;}
}

/**PC_Ver 1200*****************************************************/
@media screen and (max-width: 1200px) {
/* 아이콘링크 */
.quick_link ul li a{letter-spacing: -1px;}
}

/**PC_Ver 1100*****************************************************/
@media screen and (max-width: 1100px) {
/* 팝업존 */
.kr_main_02 .bx-wrapper .bx-viewport img{height: 434px!important;}
/* 아이콘링크 */
.quick_link ul li a{font-size: 13px;}
/* 공지사항 */
.notice{height: 327px;}
.notice .list{background-size: 1px 164px;}
.notice .list h3.tit{height: 57px; line-height: 57px;}
.notice .list ul{height: 185px; padding-top: 10px;}
.notice .list ul li{line-height: 41px;}
.notice .list .more{top: 20px;}
/* 우리마을앨범 */
.photo{height: 240px;}
.photo h3.tit{height: 57px; line-height: 57px;}
.photo .img img{height: 129px;}
.photo .list dl dd {font-size: 13px;}
.photo .more{top: 20px;}
}

/**Tab_Ver 1000*****************************************************/
@media screen and (max-width: 1000px) {
.main_container .fl{width: 40.6%;}
.main_container .fr{width: 57.3%;}
.quick_link ul li a{padding: 83px 0 17px 0; font-size: 12px; line-height: 16px;}
.quick_link ul li a span{display: block;}
}

/**Tab_Ver 800*****************************************************/
@media screen and (max-width: 800px) {
.main_container .fl{width: 44.6%;}
.main_container .fr{width: 53.3%;}
/* 공지사항 */
.notice .list ul li a{font-size: 16px;}
/* 우리마을앨범 */
.photo{height: 220px;}
.photo .img img{height: 109px;}
.photo .list dl dt{font-size: 15px;}
/* 아이콘링크 */
.quick_link{height: 112px;}
.quick_link ul li{width: 23.9%;}
.quick_link ul li a{padding: 73px 0 8px 0;}
.quick_link ul li:nth-child(1){background-position: 50% 30%;}
.quick_link ul li:nth-child(2){background-position: 50% 31%;}
.quick_link ul li:nth-child(3){background-position: 50% 31%;}
.quick_link ul li:nth-child(4){background-position: 50% 32%;}
}

/**Mobile_Ver 640*****************************************************/
@media screen and (max-width: 640px) {
.cont_wrap{background-size: 100% 100%;}
.main_container .fl{width: 100%; margin-right: 0; margin-top: 20px;}
.main_container .fr{width: 100%;}
.visual_text img{width: 100%; max-width: 462px;}
.kr_main_02{max-width: 100%!important;}
.kr_main_02 .bx-wrapper .bx-viewport img{width: 100%!important; max-width: 100%!important; height: auto!important;}
.quick_link{max-width: 100%;}
}
/**Mobile_Ver 480*****************************************************/
@media screen and (max-width: 480px) {
.visual_text{height: 148px; line-height: 148px; padding: 0 15px;}
}