@import url(common.css);
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo');

/*basic*/
.wrap{width: 1200px; margin: 0 auto; position: relative;}
.wrap-1000{width: 1000px; margin: 0 auto; position: relative;}
.fl{float: left;}
.fr{float: right;}
a{text-decoration: none;}
a:hover{text-decoration: none;}

/*active*/

/*============================ defalut ==================================*/
.skipNav{position:relative; width:100% ;z-index:99999;}
.skipNav a{position:absolute; left:0;top:-1000px;display:block;width:100%; padding:7px 0; text-align:center;font-weight:bold; color:#ffffff;background:#4f586c;}
.skipNav a:active,
.skipNav a:focus{top:0;text-decoration:none;color:#ffffff;}

/*== 헤더 ==*/
#header{width: 100%; position: absolute; z-index: 50;}
/* #header{width: 100%; position: relative; z-index: 50;} */

.utill-menu{height: 15px; padding: 12px 0px;}
.utill-menu ul li{float: left;}
.utill-menu ul li a{font-size: 15px; text-align: center; color: #000; font-weight:bold}

.utill-menu ul li a{padding:3px 13px;  background:#004896; color: #fff; border-radius: 15px;}
.utill-menu ul li a:hover{ background:#00A785; color: #fff; }
.utill-menu ul li:last-child a{text-align: right;}
.utill-menu ul li a span{display: inline-block; color: #ffffff; margin: 0px 15px;  }









#header-in{width: 100%; height: 90px; background: rgba(255, 255, 255, 0.7); }
#header-in h1{display: inline-block; float: left; width: 14.583333%; height: 73px; padding: 9px 0px 8px;}

#top-nav > .gnb{float: right; position: relative;}
#top-nav > .gnb > li{float: left; padding: 0px 60px; height: 90px; line-height: 90px;}
#top-nav > .gnb > li:last-child{padding-right: 0px;}
#top-nav > .gnb > li > a{display: block; font-size: 18px; font-weight: bold; color: #22334f; text-align: center;}

.sub-gnb{display: none; position: absolute; top: 90px; left: 0px; z-index: 300; width: 100%; height: 40px; background: #4f586c;}
#top-nav > .gnb > li:nth-child(1) > ul{left: 0px;}
#top-nav > .gnb > li:nth-child(2) > ul{left: 20px;}
/* #top-nav > .gnb > li:nth-child(3) > ul{left: 20px;} */
#top-nav > .gnb > li:nth-child(3) > ul{width: 1100px; left: -200px;}

.sub-gnb li{float: left; height: 30px; line-height: 30px; padding: 5px 15px;}
.sub-gnb li:first-child{padding-left: 0px;}
.sub-gnb li a{display: inline-block; color: #ffffff; font-size: 16px;}

.sub-gnb-bg{display: block; width: 100%; height: 40px; background: #4f586c; margin: 0px auto; position: absolute; top: 130px; z-index: 10;}

/*== 토글버튼 & 모바일 메뉴 ==*/
.menu_toggle_btn{display: none;}
.m_gnb_area{display: none;}
.m_gnb{display: none;}

/*== 모바일용 메뉴 ==*/
.m-gnb-btn{display: none; position: absolute; top: 40px; right: 25px; width: 30px; height: 30px; background: url(/cityofliterature/fnc_images/main/all_menu.png) no-repeat center center; background-size: cover; cursor: pointer;}
#m-gnb-area{display: none;}
#m-gnb-area .m-gnb{position: absolute; top: 0; right: 0; width: 320px; height: 5000px; z-index: 8000; background: #fff;}
/*주메뉴 */
#m-gnb-area .m-gnb .m-gnb-close{padding: 15px 0; background: #4f586c; cursor: pointer;}
#m-gnb-area .m-gnb .m-gnb-close span{display: inline-block; text-indent: 20px; font-size: 22px; font-weight: bold; color: #fff;}
#m-gnb-area .m-gnb .m-gnb-close img{float: right; width: 30px; margin-right: 5px;}
#m-gnb-area .m-gnb > ul > li{display: block; line-height: 50px; color: #333; font-size: 16px; text-indent: 20px; font-weight: normal; border-bottom:1px solid #ddd; text-align: justify; cursor: pointer;}
#m-gnb-area .m-gnb ul li .m_gnb_btn_off{float: right; padding-top: 12px; padding-right: 10px; width: 24px; height: 24px;}
#m-gnb-area .m-gnb .m-util-menu ul li{float: left; width: 33.3%; height: 60px; line-height: 60px; box-sizing: border-box; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;}
#m-gnb-area .m-gnb .m-util-menu ul li:last-child{border-right: none;}
#m-gnb-area .m-gnb .m-util-menu ul li a{font-size: 16px; color: #333; font-weight: normal;}
.gnb-title1-link{display: block;}
/*서브메뉴(2dp)*/
.m-sub-gnb{display: none; background: #f3f3f3; padding: 0px 0px; box-sizing: border-box; border-top: 1px solid #ddd;}
.m-sub-gnb > li > a{display: block; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #ddd; line-height: 23px; text-indent: 0px; font-size: 14px; color:#333; text-align: justify; }
.m-sub-gnb > li:last-child{border-bottom: none;}
.m-gnb-bg{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; background: rgba(0,0,0,0.7); z-index: 7000;}

/*========= 메인비주얼 =========*/
/* #main_visual_area{position: relative; top: -130px; z-index: -10; width: 100%; height: auto;} */
#main_visual_area{width: 100%; height: auto;}
#main_visual_area .swiper-slide{width: 100%; height: 500px;}
#main_visual_area .swiper-slide img{display: block; width: 100%; max-width: 1960px; margin: 0 auto; height: 100%;}
#mobile_visual_area{display: none;}
#mobile_visual_area .swiper-slide img{display: block; width: 100%; height: 50vh;}

/*=== 메인컨텐츠 =*/
#main-contents{width: 100%; margin-top: -130px; background: #ffffff;}

/*== a-side ==*/
#a-side{float: left; width: 68.583333%; height: 100%; min-height: 820px; box-sizing: border-box; border-left: 1px solid #000000; border-right: 1px solid #000000; margin: 25px 1.9% 0px 0px;}
#a-side > div{float: left; width: 33.25%; border-right: 1px solid #000000;}
#a-side > div:last-child{border-right: none;}
#a-side div .Acont-tit-area{width: 100%; height: 15px; background: #6a7690; margin: 0px 0px 55px 0px;}

#a-side div ul li{margin-bottom: 40px;} 
#a-side div ul li:last-child{margin-bottom: 20px;}
#a-side div ul li div.cont-img-box{width: 227px; height: 144px; margin: 0px auto;box-sizing: border-box; border: 1px solid #cccccc;}
#a-side div ul li div.cont-img-box img{width: 100%; height: 100%;}
#a-side div ul li div.cont-txt-box{width: 84%; padding: 20px 20px 0 20px; min-height: 180px;}
#a-side div ul li div.cont-txt-box a.cont-tit{letter-spacing: -1px; display: block; font-family: 'Nanum Myeongjo', serif; font-size: 20px; font-weight: bold; margin: 0px 0px 12px 0px;}
#a-side div ul li div.cont-txt-box p.cont-txt{display: inline-block; width: 100%; height: 100%; min-height: 115px; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal;  word-break: break-word; -webkit-word-break: break-word; -ms-word-break: break-word; -moz-word-break: break-word; -o-word-break: break-word; display: -webkit-box; display: -ms-box;  -webkit-line-clamp: 5;-ms-line-clamp: 5;-moz-line-clamp: 5;-o-line-clamp: 5;-webkit-box-orient: vertical;-ms-box-orient: vertical;-moz-box-orient: vertical;-o-box-orient: vertical; font-family: 'Nanum Myeongjo', serif; font-size: 15px; /*font-size: 13px;*/ margin: 0px 0px 8px 0px;}
#a-side div ul li div.cont-more-btn{width: 60px; height: 20px; line-height: 20px; margin: 0px 0px 0px 15px; border-radius: 10px; background: #4f586c;}
#a-side div ul li div.cont-more-btn span a{display: block; font-size: 12px; color: #ffffff; font-weight: bold; margin: 0px 0px 0px 8px;}
#a-side div ul li div.cont-more-btn span a:hover{text-decoration: none; color:#ffffff;}

/*== b-side ==*/
#b-side{float: left; width: 29.5%; height: 100%; min-height: 820px; padding-top: 25px;}

#popupzone-area{position: relative; width: 100%; height: 100%; min-height: 350px; margin: 0px 0px 22px 0px;}

#popupzone-area .popup-title{position: absolute; top:0; left: 0; z-index: 100; width: 100%; height: 40px; background: rgba(0,0,0,0.8);}
#popupzone-area .popup-title ul{float: right; margin: 5px 0px 0px 0px;}
#popupzone-area .popup-title ul li{float: left; margin-right: 15px; cursor: pointer;}
#popupzone-area .popup-title ul li:first-child{display: none;}
#popupzone-area .popup-title ul li:last-child{margin-right: 8px;}
#popupzone-area .popup-title .pop-tit{float: left; padding-left: 12px; line-height: 40px; color: #ffffff; font-weight: bold; font-size: 20px;}

.popupzone li{width: 100%; min-height: 350px; clear: both; position: absolute; display: none;}
.popupzone li:first-child{display: block;}
.popupzone li a img{display: block; width: 100%; min-height: 350px; margin-left: auto; margin-right: auto;}

#facebook-area{width: 100%; height: 100%; min-height: 375px; overflow-x: hidden; margin: 0px 0px 22px 0px;}
#facebook-area img{display: block; width: 100%; margin-left: auto; margin-right: auto;}
._10b4{max-height: 220px !important;}

#video-area{width: 100%; height: 100%; min-height: 102px; background: url(/cityofliterature/fnc_images/main/video_bg.png) no-repeat top center; margin: 0px 0px 20px 0px; text-align: center;}
#video-area a{display: inline-block; width: 220px; height: 60px; padding: 0px 25px; line-height: 30px; border: 2px solid #ffffff; margin: 20px auto 0px; text-align: center; -ms-text-align: center; font-size: 20px; color: #abc0f2; font-weight: bold;} 

#uccn-area{position: relative;width: 100%; height: 100%; min-height: 215px; background: #677595; border-radius: 10px;}
#uccn-area .uccn-img-box{display: none; float: right; margin: 15px 33px 0px 0px;}
#uccn-area .uccn-img-box img{width: 100%; height: 100%;}
#uccn-area .uccn-btn-box{position: absolute; width: 90%; height: 50px; bottom: 15px; left: 50%; -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -o-transform: translateX(-50%); border: 4px solid #000000; border-radius: 40px;}
#uccn-area .uccn-btn-box p{width: 97%; height: 44px; line-height: 44px; background: #000000; border-radius: 40px; margin: 3px auto;}
#uccn-area .uccn-btn-box p a{display: block; color: #dba8b2; font-size: 22px; font-weight: bold; text-align: center;}
#uccn-area .uccn-btn-box p a span.go-btn{float: right; display: inline-block; width: 36px; height: 36px; margin: 4px 4px 0px 0px; border-radius: 50%; background: #dba8b2; font-size: 18px; line-height: 38px; font-weight: bold; color: #000000;}

/*== 퀵메뉴 ==*/
#quick-menu-area{width: 100%; height: 100%; min-height: 255px; background: #d9dbdf; }
#quick-menu-area > div > div  > ul > li{float: left;width: 22%; margin: 24px 3.125% 0px 0px;}
#quick-menu-area > div > div  > ul > li:last-child{margin-right: 0px;}
#quick-menu-area > div > div  > ul > li > ul > li > a{display: block; font-size: 15px; font-weight: normal; padding: 0px 0px 10px 0px;}
#quick-menu-area > div > div  > ul > li > ul > li.quick-tit > a{font-size: 16px; padding: 16px 0px; font-weight: bold;}
#quick-menu-area > div > div  > ul > li:first-child > ul > li.quick-tit{border-top: 8px solid #bac2ca;}
#quick-menu-area > div > div  > ul > li:nth-child(2) > ul > li.quick-tit{border-top: 8px solid #9aa8b4;}
#quick-menu-area > div > div  > ul > li:nth-child(3) > ul > li.quick-tit{border-top: 8px solid #718798;}
#quick-menu-area > div > div  > ul > li:nth-child(4)> ul > li.quick-tit{border-top: 8px solid #33556e;}
#quick-menu-area > div > div  > ul > li:last-child > ul > li.quick-tit{border-top: 8px solid #093352;}


/*== 롤링배너존 ==*/
#rolling_banner{clear: both; height:44px; background: #ffffff; border-top: 1px solid #000000; padding: 10px 0px;}
.banner-img-see{height: 44px; margin: 0px auto 0px; overflow: hidden; }
.banner-img-box{width: 2000px; height: 44px;}
.banner-img-box li{float: left; width: 170px; height: 44px; margin-right: 10px;}

.banner-left-btn{position: absolute; top: 0; left: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
.banner-right-btn{position: absolute; top: 0; right: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
.banner-right-btn > img{float: right;}


/*======= 푸터 =======*/
#footer{width: 100%; min-height: 75px; padding: 30px 0px; background: #4f586c;}
#footer .footer-logo{float: left; }
/* #footer .copy{float: right; width: 69%; margin: 20px 0px 0px 190px;} */
#footer .copy{position: absolute; left: 50%; transform: translateX(-50%);}
#footer .copy p{font-size: 12px; color: #ececec; line-height: 20px;} 





/*=========================================== responsive =================================================*/
@media (max-width: 575px){ 


	.wrap{width: 100%; min-width: 320px;}
	.wrap-in{padding: 0 25px;}
	.wrap-1000{width: 220px !important;}

	/*== 헤더 ==*/
	#header{position: static; margin: 10px 0;}
	.utill-menu{display: none;}
	#header-in{background: none;}
	#header-in h1{display: inline-block; float: none; width: 80px; height: auto; padding: 13px 0px 0px;}
	#header-in h1 img{width: 100%;}
	#top-nav{display: none;}

	/*== 모바일용 메뉴 ==*/
	.m-gnb-btn{display: block;}

	/*========= 메인비주얼 =========*/
	#main_visual_area{display: none;}
	#mobile_visual_area{display: block;}
	.swiper-pagination-bullet{width: 18px !important; height: 18px !important;}

	/*=== 메인컨텐츠 =*/
	#main-contents{width: 100%; margin-top: -130px; background: #ffffff;}

	/*== a-side ==*/
	#a-side{float: none; width: 100%; height: 100%; min-height: 1240px; box-sizing: border-box; border: none; margin: 25px 1.9% 0px 0px;}
	#a-side > div{float: none; width: 100%; margin-bottom: 30px; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000;}
	#a-side > div:last-child{border-right: 1px solid #000;}
	#a-side div .Acont-tit-area{margin: 0px 0px 35px 0px;}
	#a-side div ul{padding: 0 20px;}
	#a-side div ul li{float: none; width: 100%; margin: 0 auto 25px;}
	#a-side div ul li:last-child{margin-bottom: 15px;}
	#a-side div ul li div.cont-img-box{width: 227px; height: 144px; margin: 0px auto;box-sizing: border-box; border: 1px solid #cccccc;}
	#a-side div ul li div.cont-img-box img{width: 100%; height: 100%;}
	#a-side div ul li div.cont-txt-box{width: 100%; min-height: auto; padding: 0; text-align: center;}
	#a-side div ul li div.cont-txt-box p.cont-txt{min-height: auto;}
	#a-side div ul li div.cont-txt-box a.cont-tit{display: block; font-family: 'Nanum Myeongjo', serif; font-size: 20px; font-weight: bold; margin: 10px 0px 12px 0px;}
	#a-side div ul li div.cont-more-btn{width: 60px; height: 20px; line-height: 20px; margin: 0px auto; border-radius: 10px; background: #4f586c;}
	#a-side div ul li div.cont-more-btn span a{display: block; font-size: 12px; color: #ffffff; font-weight: bold; margin: 0px 0px 0px 8px;}
	#a-side div ul li div.cont-more-btn span a:hover{text-decoration: none; color:#ffffff;}

	/*== b-side ==*/
    #b-side{float: none; width: 100%; min-height: 350px; padding:20px 0px;}

    #popupzone-area{float: none; width: 100%; max-width: 320px; min-height: 350px; margin: 0px auto 20px;}
	#popupzone-area .popup-title{position: absolute; top:0; left: 0; z-index: 100; width: 100%; height: 40px; background: rgba(0,0,0,0.8);}
	#popupzone-area .popup-title ul{float: right; margin: 5px 0px 0px 0px;}
	#popupzone-area .popup-title ul li{float: left; margin-right: 15px; cursor: pointer;}
	#popupzone-area .popup-title ul li:first-child{display: none;}
	#popupzone-area .popup-title ul li:last-child{margin-right: 8px;}
	#popupzone-area .popup-title .pop-tit{float: left; padding-left: 12px; line-height: 40px; color: #ffffff; font-weight: bold; font-size: 20px;}
	.popupzone li{width: 100%; min-height: 350px; clear: both; position: absolute; display: none;}
	.popupzone li:first-child{display: block;}

	#facebook-area{float: none; width: 100%; max-width: 320px; min-height: 350px; margin: 0px auto 20px;}
	._42ft{margin-right: 20px;}

    #video-area{clear: both; float: none; width: 100%; width: 320px; min-height: 230px; background: url(/cityofliterature/fnc_images/main/video_bg.png) repeat-y top center; margin: 0px auto 20px; text-align: center;}
    #video-area a{width: auto; padding: 10px; margin: 90px auto 0px; font-size: 18px;} 

	#uccn-area{clear: both; float: none; width: 100%; width: 320px; min-height: 230px; margin: 0 auto 20px;}
    #uccn-area .uccn-img-box{float: none; width: 88px; height: 80px; margin: 0px auto; padding: 30px 0 0 0;}
    #uccn-area .uccn-btn-box{bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -o-transform: translateX(-50%);   border: 4px solid #000000; border-radius: 40px;}
    #uccn-area .uccn-btn-box p{width: 97%; height: 44px; line-height: 44px; background: #000000; border-radius: 40px; margin: 3px auto;}
    #uccn-area .uccn-btn-box p a{font-size: 18px;}
    #uccn-area .uccn-btn-box p a span.go-btn{display: none;}

	/*== 퀵메뉴 ==*/
	#quick-menu-area{min-height: 535px; padding: 20px 0 20px;}
	#quick-menu-area > div > div > ul > li{clear: both; float: none; width: 95%; margin: 0px auto 0px;}
	#quick-menu-area > div > div > ul > li:last-child{margin-right: auto;}
	#quick-menu-area > div > div > ul > li > ul > li.quick-tit > a{font-size: 19px; padding: 16px 0px; font-weight: bold;}
	#quick-menu-area > div > div > ul > li:first-child > ul > li.quick-tit{border-top: 8px solid #bac2ca;}
	#quick-menu-area > div > div > ul > li:nth-child(2) > ul > li.quick-tit{border-top: 8px solid #9aa8b4;}
	#quick-menu-area > div > div > ul > li:nth-child(3) > ul > li.quick-tit{border-top: 8px solid #718798;}
	#quick-menu-area > div > div > ul > li:nth-child(4)> ul > li.quick-tit{border-top: 8px solid #33556e;}
	#quick-menu-area > div > div > ul > li:last-child > ul > li.quick-tit{border-top: 8px solid #093352;}


	/*== 롤링배너존 ==*/
	#rolling_banner{clear: both; height:44px; background: #ffffff; border-top: 1px solid #000000; padding: 10px 0px;}
	.banner-img-see{width: 170px !important;}
	.banner-img-box{width: 2000px; height: 44px;}
	.banner-img-box li{float: left; width: 170px; height: 44px; margin-right: 10px;}

	.banner-left-btn{position: absolute; top: 0; left: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
	.banner-right-btn{position: absolute; top: 0; right: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
	.banner-right-btn > img{float: right;}


	/*======= 푸터 =======*/
	#footer{width: 100%; min-height: 75px; padding: 20px 0px; background: #4f586c;}
	#footer .footer-logo{float: none; width: 80px; margin: 0 auto;}
	#footer .copy{position: static; left: 0; transform: translateX(0); width: 100%; margin: 20px 0 0 0; text-align: center;}

}


@media (min-width: 576px) and (max-width: 767px){ 

	.wrap{width: 100%;}
	.wrap-in{padding: 0 25px;}
	.wrap-1000{width: 430px !important;}

	/*== 헤더 ==*/
	#header{position: static; margin: 10px 0;}
	#header-in{background: none;}
    .utill-menu{display: none;}
	#top-nav{display: none;}

	/*== 모바일용 메뉴 ==*/
	.m-gnb-btn{display: block;}

	/*========= 메인비주얼 =========*/
	#main_visual_area{display: none;}
	#mobile_visual_area{display: block;}
	.swiper-pagination-bullet{width: 18px !important; height: 18px !important;}

	/*=== 메인컨텐츠 =*/
	#main-contents{width: 100%; margin-top: -130px; background: #ffffff;}

	/*== a-side ==*/
	#a-side{float: none; width: 100%; height: 100%; min-height: 1240px; box-sizing: border-box; border: none; margin: 25px 1.9% 0px 0px;}
	#a-side > div{float: none; width: 100%; margin-bottom: 30px; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000;}
	#a-side > div:last-child{border-right: 1px solid #000;}
	#a-side div .Acont-tit-area{margin: 0px 0px 35px 0px;}
	#a-side div ul{padding: 0 20px;}
	#a-side div ul li{float: none; width: 100%; margin: 0 auto 25px;}
	#a-side div ul li:last-child{margin-bottom: 15px;}
	#a-side div ul li div.cont-img-box{width: 227px; height: 144px; margin: 0px auto;box-sizing: border-box; border: 1px solid #cccccc;}
	#a-side div ul li div.cont-img-box img{width: 100%; height: 100%;}
	#a-side div ul li div.cont-txt-box{width: 100%; min-height: auto; padding: 0px 0px; text-align: center;}
	#a-side div ul li div.cont-txt-box p.cont-txt{min-height: auto;}
	#a-side div ul li div.cont-txt-box a.cont-tit{display: block; font-family: 'Nanum Myeongjo', serif; font-size: 20px; font-weight: bold; margin: 10px 0px 12px 0px;}
	#a-side div ul li div.cont-more-btn{width: 60px; height: 20px; line-height: 20px; margin: 0px auto; border-radius: 10px; background: #4f586c;}
	#a-side div ul li div.cont-more-btn span a{display: block; font-size: 12px; color: #ffffff; font-weight: bold; margin: 0px 0px 0px 8px;}
	#a-side div ul li div.cont-more-btn span a:hover{text-decoration: none; color:#ffffff;}

	/*== b-side ==*/
    #b-side{float: none; width: 100%; min-height: 350px; padding:20px 0px;}

    #popupzone-area{float: none; width: 100%; max-width: 320px; min-height: 350px; margin: 0px auto 20px;}
	#popupzone-area .popup-title{position: absolute; top:0; left: 0; z-index: 100; width: 100%; height: 40px; background: rgba(0,0,0,0.8);}
	#popupzone-area .popup-title ul{float: right; margin: 5px 0px 0px 0px;}
	#popupzone-area .popup-title ul li{float: left; margin-right: 15px; cursor: pointer;}
	#popupzone-area .popup-title ul li:first-child{display: none;}
	#popupzone-area .popup-title ul li:last-child{margin-right: 8px;}
	#popupzone-area .popup-title .pop-tit{float: left; padding-left: 12px; line-height: 40px; color: #ffffff; font-weight: bold; font-size: 20px;}
	.popupzone li{width: 100%; min-height: 350px; clear: both; position: absolute; display: none;}
	.popupzone li:first-child{display: block;}

	#facebook-area{float: none; width: 100%; max-width: 320px; min-height: 350px; margin: 0px auto 20px;}

    #video-area{clear: both; float: left; width: 49%; min-height: 230px; background: url(/cityofliterature/fnc_images/main/video_bg.png) repeat-y top center; margin: 0px 2% 20px 0px; text-align: center;}
    #video-area a{width: auto; padding: 10px 30px; margin: 90px auto 0px; font-size: 18px;} 

	#uccn-area{float: left; width: 49%; min-height: 230px; margin: 0 0 20px 0;}
    #uccn-area .uccn-img-box{float: none; width: 88px; height: 80px; margin: 35px auto 0px;}
    #uccn-area .uccn-btn-box{bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -o-transform: translateX(-50%);   border: 4px solid #000000; border-radius: 40px;}
    #uccn-area .uccn-btn-box p{width: 97%; height: 44px; line-height: 44px; background: #000000; border-radius: 40px; margin: 3px auto;}
    #uccn-area .uccn-btn-box p a{display: block; color: #dba8b2; font-size: 12px;  font-weight: bold; text-align: center;}
    #uccn-area .uccn-btn-box p a span.go-btn{display: none;}

	/*== 퀵메뉴 ==*/
	#quick-menu-area{min-height: 535px;}
	#quick-menu-area > div > div  > ul > li{float: left; width: 45%; margin: 20px 2% 0px 0px;}
	#quick-menu-area > div > div  > ul > li:last-child{margin-right: 0px;}
	#quick-menu-area > div > div  > ul > li > ul > li > a{display: block; font-size: 18px; font-weight: 500; padding: 0px 0px 10px 0px;}
	#quick-menu-area > div > div  > ul > li > ul > li.quick-tit > a{font-size: 19px; padding: 16px 0px; font-weight: bold;}
	#quick-menu-area > div > div  > ul > li:first-child > ul > li.quick-tit{border-top: 8px solid #bac2ca;}
	#quick-menu-area > div > div  > ul > li:nth-child(2) > ul > li.quick-tit{border-top: 8px solid #9aa8b4;}
	#quick-menu-area > div > div  > ul > li:nth-child(3) > ul > li.quick-tit{border-top: 8px solid #718798;}
	#quick-menu-area > div > div  > ul > li:nth-child(4)> ul > li.quick-tit{border-top: 8px solid #33556e;}
	#quick-menu-area > div > div  > ul > li:last-child > ul > li.quick-tit{border-top: 8px solid #093352;}


	/*== 롤링배너존 ==*/
	#rolling_banner{clear: both; height:44px; background: #ffffff; border-top: 1px solid #000000; padding: 10px 0px;}
	.banner-img-see{width: 340px !important;}
	.banner-img-box{width: 2000px; height: 44px;}
	.banner-img-box li{float: left; width: 170px; height: 44px; margin-right: 10px;}

	.banner-left-btn{position: absolute; top: 0; left: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
	.banner-right-btn{position: absolute; top: 0; right: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
	.banner-right-btn > img{float: right;}


	/*======= 푸터 =======*/
	#footer{width: 100%; min-height: 75px; padding: 30px 0px; background: #4f586c;}
	#footer .footer-logo{float: none; width: 174px; height: 74px; margin:0 auto;}
	#footer .copy{float: none; width: 100%; margin: 20px 0 0 0; text-align: center;}

}


@media (min-width: 768px) and (max-width: 991px){

	.wrap{width: 730px;}
	.wrap-1000{width: 630px !important;}

	/*== 헤더 ==*/
	#header{position: static; margin: 10px 0;}
	#header-in{background: none;}
    .utill-menu{display: none;}
	#top-nav{display: none;}

	/*== 모바일용 메뉴 ==*/
	.m-gnb-btn{display: block;}

	/*========= 메인비주얼 =========*/
	#main_visual_area{display: none;}
	#mobile_visual_area{display: block;}


	/*=== 메인컨텐츠 =*/
	#main-contents{width: 100%; margin-top: -130px; background: #ffffff;}

	/*== a-side ==*/
	#a-side{float: none; width: 100%; height: 100%; min-height: 1240px; box-sizing: border-box; border: none; margin: 25px 1.9% 0px 0px;}
	#a-side > div{float: none; width: 100%; margin-bottom: 30px; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000;}
	#a-side > div:last-child{border-right: 1px solid #000;}
	#a-side div .Acont-tit-area{margin: 0px 0px 35px 0px;}
	#a-side div ul li{float: left; width: 33.3%; margin-bottom: 15px;}
	#a-side div ul li:last-child{margin-bottom: 15px;}
	#a-side div ul li div.cont-img-box{width: 227px; height: 144px; margin: 0px auto;box-sizing: border-box; border: 1px solid #cccccc;}
	#a-side div ul li div.cont-img-box img{width: 100%; height: 100%;}
	#a-side div ul li div.cont-txt-box{width: 84%; padding: 20px;}
	#a-side div ul li div.cont-txt-box a.cont-tit{display: block; font-family: 'Nanum Myeongjo', serif; font-size: 20px; font-weight: bold; margin: 0px 0px 12px 0px;}
	#a-side div ul li div.cont-more-btn{width: 60px; height: 20px; line-height: 20px; margin: 0px 0px 0px 15px; border-radius: 10px; background: #4f586c;}
	#a-side div ul li div.cont-more-btn span a{display: block; font-size: 12px; color: #ffffff; font-weight: bold; margin: 0px 0px 0px 8px;}
	#a-side div ul li div.cont-more-btn span a:hover{text-decoration: none; color:#ffffff;}

	/*== b-side ==*/
    #b-side{float: none; width: 100%; min-height: 350px; padding:20px 0px;}

    #popupzone-area{float: left; width: 49%; min-height: 350px; margin: 0px 2% 20px 0px;}
	#popupzone-area .popup-title{position: absolute; top:0; left: 0; z-index: 100; width: 100%; height: 40px; background: rgba(0,0,0,0.8);}
	#popupzone-area .popup-title ul{float: right; margin: 5px 0px 0px 0px;}
	#popupzone-area .popup-title ul li{float: left; margin-right: 15px; cursor: pointer;}
	#popupzone-area .popup-title ul li:first-child{display: none;}
	#popupzone-area .popup-title ul li:last-child{margin-right: 8px;}
	#popupzone-area .popup-title .pop-tit{float: left; padding-left: 12px; line-height: 40px; color: #ffffff; font-weight: bold; font-size: 20px;}
	.popupzone li{width: 100%; min-height: 350px; clear: both; position: absolute; display: none;}
	.popupzone li:first-child{display: block;}

	#facebook-area{float: left; width: 49%; min-height: 350px; margin: 0px 0% 20px 0px;}

    #video-area{clear: both; float: left; width: 49%; min-height: 230px; background: url(/cityofliterature/fnc_images/main/video_bg.png) repeat-y top center; margin: 0px 2% 20px 0px; text-align: center;}
    #video-area a{width: auto; padding: 10px 30px; margin: 90px auto 0px; font-size: 18px;} 

	#uccn-area{float: left; width: 49%; min-height: 230px; margin: 0 0 20px 0;}
    #uccn-area .uccn-img-box{float: none; width: 88px; height: 80px; margin: 35px auto 0px;}
    #uccn-area .uccn-btn-box{bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -o-transform: translateX(-50%);   border: 4px solid #000000; border-radius: 40px;}
    #uccn-area .uccn-btn-box p{width: 97%; height: 44px; line-height: 44px; background: #000000; border-radius: 40px; margin: 3px auto;}
    #uccn-area .uccn-btn-box p a{display: block; color: #dba8b2; font-size: 12px;  font-weight: bold; text-align: center;}
    #uccn-area .uccn-btn-box p a span.go-btn{display: none;}

	/*== 퀵메뉴 ==*/
	#quick-menu-area{min-height: 535px;}
	#quick-menu-area > div > div > ul > li{float: left; width: 45%; margin: 20px 2% 0px 0px;}
	#quick-menu-area > div > div > ul > li:last-child{margin-right: 0px;}
	#quick-menu-area > div > div > ul > li > ul > li.quick-tit > a{font-size: 19px; padding: 16px 0px; font-weight: bold;}
	#quick-menu-area > div > div > ul > li:first-child > ul > li.quick-tit{border-top: 8px solid #bac2ca;}
	#quick-menu-area > div > div > ul > li:nth-child(2) > ul > li.quick-tit{border-top: 8px solid #9aa8b4;}
	#quick-menu-area > div > div > ul > li:nth-child(3) > ul > li.quick-tit{border-top: 8px solid #718798;}
	#quick-menu-area > div > div > ul > li:nth-child(4)> ul > li.quick-tit{border-top: 8px solid #33556e;}
	#quick-menu-area > div > div > ul > li:last-child > ul > li.quick-tit{border-top: 8px solid #093352;}


	/*== 롤링배너존 ==*/
	#rolling_banner{clear: both; height:44px; background: #ffffff; border-top: 1px solid #000000; padding: 10px 0px;}
	.banner-img-see{width: 500px !important;}
	.banner-img-box{width: 2000px; height: 44px;}
	.banner-img-box li{float: left; width: 170px; height: 44px; margin-right: 10px;}

	.banner-left-btn{position: absolute; top: 0; left: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
	.banner-right-btn{position: absolute; top: 0; right: 0px; width: 2%; height: 22px;cursor: pointer; margin: 10px 0px 0px 0px;}
	.banner-right-btn > img{float: right;}


	/*======= 푸터 =======*/
	#footer{width: 100%; min-height: 75px; padding: 30px 0px; background: #4f586c;}
	#footer .footer-logo{float: left; width: 174px;}
}

@media (min-width: 992px) and (max-width: 1199px){ 

	.wrap{width: 970px;}
    .wrap-1000{width: 870px !important;}
    
    /*== 헤더 ==*/
    #header{width: 100%;}
   
    #header-in h1{width: 10%; max-width: 80px;}
	#top-nav{display: block;}
	#top-nav > .gnb > li{padding: 0px 10px; height: 90px; line-height: 90px;}
	#top-nav > .gnb > li:last-child{padding-right: 0px;}
	#top-nav > .gnb > li > a{display: block; font-size: 15px; font-weight: bold; color: #22334f; text-align: center;}

    #top-nav > div > .gnb > li:last-child{padding-right: 20px;}
    
	#top-nav > .gnb > li:nth-child(5) > ul{left: 0;}
	.sub-gnb li{padding: 5px;}
	.sub-gnb li:nth-child(5){clear: both;}
	.sub-gnb li a{font-size: 14px;}


    /*== a-side ==*/
    #a-side{float: none; width: 100%; min-height: 1420px; margin: 0px; padding: 25px 0px 0px 0px; border-right: none; border-left: none;}
    #a-side > div{float: none; width: 100%; margin-bottom: 30px; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;}
    #a-side-1{border-left: 1px solid #000000; box-sizing: border-box;}
    #a-side-3{border-right: 1px solid #000000 !important; box-sizing: border-box;}
	#a-side div ul li{float: left; width: 33.3%; margin-bottom: 15px;}
	#a-side div ul li:last-child{margin-bottom: 15px;}
	#a-side div .Acont-tit-area{margin: 0px 0px 35px 0px;}
    #a-side div ul li div.cont-img-box{width: 84%; height: 177px; margin: 0px auto;}
	#a-side div ul li div.cont-txt-box a.cont-tit{min-height: 47px;}
	#a-side div ul li div.cont-txt-box{min-height: auto;}

    /*== b-side ==*/
    #b-side{float: none; width: 100%; min-height: 350px; padding:50px 0px;}

    #popupzone-area{float: left; width: 36.494845%; min-height: 350px; margin: 0px 2.577319% 0px 0px;}
    #facebook-area{float: left; width: 36.494845%; min-height: 350px; margin: 0px 2.577319% 0px 0px;}
    #video-area{float: left; width: 19.27835%;  min-height: 110px; background: url(/cityofliterature/fnc_images/main/video_bg.png) repeat-y top center; margin: 0px 0px 10px 0px;}
    #video-area a{width: 140px; height: 30px; line-height: 30px; border: 2px solid #ffffff; margin: 35px auto 0px; font-size: 18px;  padding: 5px 10px;} 

    #uccn-area{float: left; width: 19.27835%; min-height: 230px;}
    #uccn-area .uccn-img-box{float: none; width: 88px; height: 80px; margin: 35px auto 0px;}
    #uccn-area .uccn-btn-box{bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -o-transform: translateX(-50%);   border: 4px solid #000000; border-radius: 40px;}
    #uccn-area .uccn-btn-box p{width: 97%; height: 44px; line-height: 44px; background: #000000; border-radius: 40px; margin: 3px auto;}
    #uccn-area .uccn-btn-box p a{display: block; color: #dba8b2; font-size: 12px;  font-weight: bold; text-align: center;}
    #uccn-area .uccn-btn-box p a span.go-btn{display: none;}

	/*== 퀵메뉴 ==*/
	#quick-menu-area{min-height: 445px;}
	#quick-menu-area > div > div > ul > li{float: left; width: 30%; height: 100%; min-height: 180px; margin: 20px 2% 0px 0px;}
	#quick-menu-area > div > div > ul > li:last-child{margin-right: 0px;}
	#quick-menu-area > div > div > ul > li > ul > li.quick-tit > a{font-size: 19px; padding: 16px 0px; font-weight: bold;}
	#quick-menu-area > div > div > ul > li:first-child > ul > li.quick-tit{border-top: 8px solid #bac2ca;}
	#quick-menu-area > div > div > ul > li:nth-child(2) > ul > li.quick-tit{border-top: 8px solid #9aa8b4;}
	#quick-menu-area > div > div > ul > li:nth-child(3) > ul > li.quick-tit{border-top: 8px solid #718798;}
	#quick-menu-area > div > div > ul > li:nth-child(4)> ul > li.quick-tit{border-top: 8px solid #33556e;}
	#quick-menu-area > div > div > ul > li:last-child > ul > li.quick-tit{border-top: 8px solid #093352;}

	.banner-img-see{width: 700px !important;}

}

@media (min-width: 1200px) and (max-width: 1440px){ 

	#header-in h1{width: 10%; max-width: 80px;}
	#top-nav{display: block;}
	#top-nav > .gnb > li{padding: 0px 40px; height: 90px; line-height: 90px;}
	#top-nav > .gnb > li:last-child{padding-right: 0px;}
	#top-nav > .gnb > li > a{display: block; font-size: 18px; font-weight: bold; color: #22334f; text-align: center;}

    #top-nav > div > .gnb > li:last-child{padding-right: 20px;}

	#top-nav > .gnb > li:nth-child(5) > ul{}
	.sub-gnb li{padding: 5px;}
	.sub-gnb li:nth-child(10){clear: both;}
	.sub-gnb li a{font-size: 15px;}
}