@charset "utf-8";
 
#wrap{min-width:1500px /* 스크롤 생겼을때 안짤리게 하기 위해*/}
.inner{width:1500px;margin:0 auto;}


/*header*/
#header{width:100%;min-width:1500px;position: relative;top: 0;left: 0;z-index: 1;background: #fff;}
#header .header_top{height: 45px;border-bottom: 1px solid #dedede;}
#header .header_top{position:relative;} 
#header .header_top h1{position:absolute; top:25px; left:50%; }
#header .header_top .left_link{float:left;border-left: 1px solid #dedede;}
#header .header_top .left_link li{float:left;}
#header .header_top .left_link li a{font-size:16px;border-right: 1px solid #dedede;height: 45px;line-height: 45px;display: block;padding: 0px 28px;box-sizing: border-box;}
#header .header_top .left_link li.total_menu a span.ico{float:left; width:17px; height:19px; margin-right:5px; background:url('/images/common/layout/layout_sp.png') no-repeat 0 4px}
#header .header_top .left_link li.mokpo a span.ico{float:left; width:27px; height:20px; margin-right:5px; background:url('/images/common/layout/layout_sp.png') no-repeat 0 -45px}
#header .header_top .right_link{float:right;}
#header .header_top .right_link .link_list{float:left;margin-right: 30px;}
#header .header_top .right_link .link_list li{float:left;}
#header .header_top .right_link .link_list li:first-child{margin-left:0}
#header .header_top .right_link .link_list li > a {display:block;height: 45px;line-height: 45px;padding: 0 10px;}
#header .header_top .allpage_wrapper{float: left;}
#header .header_top .allpage_wrapper > a{background: #046fd9;color: #fff;height: 45px;line-height: 45px;display: block;padding: 0 20px;}
#header .header_top .allpage_wrapper > a i.mp_symbol{display: inline-block;vertical-align: middle;width:27px;height: 18px;margin-right: 8px;background: url('/images/common/layout/layout_sp.png') no-repeat 0px -48px;}

#header .header_bottom{height:122px;box-sizing:border-box;text-align: center;}
#header .header_bottom .inner{/* position:relative; */text-align: center;}
#header .header_bottom h1{width: 294px;height: 63px;position: relative;left: 0;top: 34px;float: left;}
#header .header_bottom h1 a{background:url("/images/mayor_2023/common/logo_b.png") no-repeat; width:100%; height:100%; display:block;}
#header .header_bottom h1 a span{display: block; text-indent:-999em;}
#header .header_bottom .right_util{position: relative;right:0;top: 45px;float: right;}
#header .header_bottom .right_util > li{float:left;}
#header .header_bottom .right_util > li.sitemap > a{text-indent:-9999em;display: block;width: 35px;height: 35px;background: url("/images/mayor_2023/common/layout_sp.png") -80px -67px no-repeat;}
#header .header_bottom .right_util > li.search > a{text-indent:-9999em;display: block;width: 35px;height: 35px;background: url("/images/mayor_2023/common/layout_sp.png") 0px -67px no-repeat;margin-right: 50px;}



#top_menu{display: inline-block;}
#top_menu ul.gnb:after{display:block; content:""; clear:both}
#top_menu ul.gnb > li{float:left;text-align:center;box-sizing:border-box;margin-right: 48px;}
#top_menu ul.gnb > li:last-child{margin-right:0;}
#top_menu ul.gnb > li > a{display:block;font-size: 22px;padding: 50px 0;}
#top_menu ul.gnb > li:hover > a { color:#046fd9; font-weight:400; position:relative;}
#top_menu ul.gnb > li:hover > a:after {content:''; position:absolute; bottom:0; left:0; height:3px; width:100%; background-color:#046fd9; }
#top_menu ul.gnb > li.on > a { color:#046fd9; font-weight:400;}
#top_menu ul.gnb > li > a.newwin:before {content:'';background: url("/images/mayor_2023/common/layout_sp.png") no-repeat -237px -74px; float:right;text-indent:-9999px;width:20px;height: 20px;display: block;margin-left:5px;}
#top_menu ul.gnb > li.on > a.newwin:before, #top_menu ul.gnb > li > a:hover.newwin:before {background-position: -237px -74px;}

#top_menu ul.gnb > li > div{display:none;position:absolute;left:0;width:100%;padding: 30px 0;background: #eff6fc;box-sizing:border-box;height: auto !important;border-top: 1px solid #dedede;}
#top_menu ul.gnb > li > div .gnbB{width: 1500px;margin:0 auto;text-align: center;}

#top_menu ul.gnb > li > div > ul > li.gnb_title{display:none;}
#top_menu ul.gnb > li > div > ul > li{display: inline-block;width: 18.5%;margin: 1% 1.5% 1% 0;} 
#top_menu ul.gnb > li > div > ul > li:nth-child(6n){margin-right:0;}
#top_menu ul.gnb > li > div > ul > li:first-child{padding-left:0}
#top_menu ul.gnb > li > div > ul > li > a{display:block;background:#fff;border:1px solid #dedede;border-radius:5px;padding: 18px 20px 18px 30px;text-align: left;}
#top_menu ul.gnb > li > div > ul > li > a:hover{background-color:#046fd9; color:#fff}
#top_menu ul.gnb > li > div > ul > li > ul{display:none}

#top_menu ul.gnb > li > div > ul > li > a.newwin span {background: url("/images/mayor_2023/common/layout_sp.png") no-repeat -238px -76px;float:right;text-indent:-9999px;width:20px;height: 20px;display: block;}
#top_menu ul.gnb > li > div > ul > li > a:hover.newwin span {background-position: -238px -14px;}


/*검색박스*/
.top_search_box {display:none;position:absolute;top: 55px;right:0;background-color:#046fd9;padding:0 0 0 18px;height:42px;width: max-content;border-radius: 100px;}
.top_search_box label[for="total_search_word"]{position: absolute;top: 14px;left: 18px;cursor: text;color: #fff;}
.top_search_box input#total_search_word {background-color:#046fd9;border:none;color:#fff;width: 180px;}
.top_search_box input[type="submit"] {background: url('/images/common/layout/layout_sp.png') no-repeat -38px -88px;background-color:#046fd9;border:none;text-indent:-9999px;width:42px;height:41px;}
.top_search_box a.close { display:block; text-indent:-9999px; width:42px; height:42px; float:right; border-left:1px solid #046fd9;background:url('/images/common/layout/layout_sp.png') no-repeat -136px 14px;}



/*footer*/
#footer{background: #fff;clear:both;}
#footer .footer_top{padding: 40px 0 30px 0;}
#footer .footer_top{border-bottom:1px solid rgba(255,255,255,.15)}
#footer .footer_mid{overflow: hidden;margin-bottom: 30px;}
#footer .footer_mid .footer_link{float:left; height:44px; line-height:44px}
#footer .footer_mid .footer_link > li{float:left; margin-left:35px}
#footer .footer_mid .footer_link > li:first-child{margin-left:0}
#footer .footer_mid .footer_link > li.personal_info a{color: #046fd9;}

#footer .footer_top .tab_box{position:relative;float: left;width: 23%;margin-right: 2%;}
#footer .footer_top .tab_box:last-child{margin-right:0;}
#footer .footer_top .tab_box > a{display:block;padding: 20px 30px;background: #f2f4f7;width: 100%;box-sizing: border-box;border-radius: 8px;}
#footer .footer_top .tab_box > a > span{float:right;width: 13px;height: 8px;background: url('/images/mayor_2023/common/layout_sp.png') no-repeat -165px -82px;text-indent:-9999px;margin-top: 4px;overflow: hidden;}
#footer .footer_top .tab_box > a > span.open{background-position:-165px -82px;}
#footer .footer_top .tab_box > a > span.close{ transform: rotate(180deg);}

#footer .footer_top .tab_box .linkbox {display: none;position: absolute;bottom: 54px;width: 100%;z-index: 1;}
#footer .footer_top .tab_box .linkbox strong { display: none;}
#footer .footer_top .tab_box .linkbox ul {border: 1px solid #d2d2d2;border-radius: 12px 12px 0 0;background: #fff;padding: 20px 10%;box-sizing: border-box;}
#footer .footer_top .tab_box .linkbox ul li {font-size: 15px; line-height: 1.2; margin-top: 10px;}


#footer .footer_bottom .inner{position:relative;border-top: 1px solid #dedede;}
#footer .footer_bottom .inner .left_article{padding: 30px 0 80px 0; line-height: 26px;}
#footer .footer_bottom .inner .left_article > span{float:left;width: 162px;height:33px;background: url('/images/mayor_2023/common/footer_logo.png') no-repeat;margin-right: 53px;}

#footer .footer_bottom .inner > p.top{position:absolute;top: 24px;right:0;width: 66px;height: 66px;background:#046fd9;border-radius: 20px;}
#footer .footer_bottom .inner > p.top a{display:block; text-align:center; color:#fff; font-size:14px; padding-top:13px}
#footer .footer_bottom .inner > p.top a span{display:block;width:16px;height: 16px;background: url('/images/mayor_2023/common/layout_sp.png') no-repeat -202px -14px;margin: 0 auto 6px;}

/* popup */
#wrap.h100{height:100%;overflow:auto;}
#popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;}
#popup .pop_bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);}
#popup .pop_cnt{position:absolute;top:50%;left:50%;transform:translate(-50.5%, -50%);width:1550px;height:85%;border-radius:45px;background-color:#fff;padding:94px 0 76px 76px;box-sizing:border-box;}
#popup .pop_cnt .pop_close{position:absolute;top:0;left:50%;transform:translate(-50%, -50%);display:block;width:58px;height:58px;border:0;background:url(/images/www/main/sp_main.png) no-repeat -178px -865px;text-indent:-9999px;}
#popup .pop_cnt .exp{font-size:19px;color:#333;margin-bottom:20px;}
#popup .pop_cnt .exp b{color:#046fd9;}
#popup .pop_cnt .box{height:100%;overflow-y:auto;padding-right:76px;}
#popup .pop_cnt .box::-webkit-scrollbar{width:10px;border-radius:40px;background-color:#fff;box-shadow:3px 3px 9px rgba(0,0,0,.3);}
#popup .pop_cnt .box::-webkit-scrollbar-thumb{width:10px;border-radius:40px;background-color:#8b8b8b;}
#popup .pop_cnt .box .list{display:flex;flex-wrap:wrap;justify-content:space-between;}
#popup .pop_cnt .box .list a{display:block;border-radius:18px;overflow:hidden;}
#popup .pop_cnt .box .list img{width:100%;height:100%;}

#pop_family{padding:0 !important;}
#pop_family .top{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:172px;border-radius:45px 45px 0 0;background-color:#f8f8f8;}
#pop_family .top .tit{font-size:31px;color:#333;}
#pop_family .top .tit b{display:inline-block;width:178px;height:43px;background:url(/images/www/common/logo_mokpo.png) no-repeat center;vertical-align:middle;text-indent:-9999px;margin-right:10px;}
#pop_family .top strong{position:absolute;bottom:0;transform:translateY(42%);width:100%;font-size:78px;font-weight:400;text-align:center;color:#fff;}
#pop_family .bot{height:calc(100% - 178px);padding:65px 0 65px 9%;box-sizing:border-box;}
#pop_family .bot .box{display:flex;flex-wrap:wrap;justify-content:space-between;padding-right:9%;}
#pop_family .bot .list{display:block !important;width:21%;}
#pop_family .bot .list .tit{width:100%;height:72px;font-size:21px;line-height:72px;text-align:center;color:#fff;border-radius:12px;margin-bottom:36px;}
#pop_family .bot .list:nth-child(odd) .tit{background-color:#046fd9;}
#pop_family .bot .list:nth-child(even) .tit{background-color:#1fcc8d;}
#pop_family .bot .list a{position:relative;display:block;font-size:17px;line-height:1.2;color:#333;padding-left:16px;box-sizing:border-box;margin-top:10px;}
#pop_family .bot .list a::before{position:absolute;top:7px;left:3px;content:'';display:block;width:3px;height:3px;}
#pop_family .bot .list:nth-child(odd) a::before{background-color:#046fd9;}
#pop_family .bot .list:nth-child(even) a::before{background-color:#1fcc8d;}

@media screen and (max-width:1586px){
    #popup .pop_cnt{width:calc(100% - 50px);}
}

@media screen and (max-width:980px){
    #pop_family .bot .list{width:48%;margin-bottom:36px;}
}

@media screen and (max-width:768px){
    #popup .pop_cnt{left:18px;transform:translate(0, -50%);width:716px;}
}