@charset "utf-8";

:root {
    --point1:#14106d;
    --point2:#0228b5;
    --point3:#0049f0;
    --bg_gray:#f2f2f2;
}

/* set */
body {font-size:16px !important;margin:0;padding:0;font-family: 'Paperlogy', "페이퍼로지", Dotum, "돋움", sans-serif;color:#111 !important;font-weight:400;}
input, select, button{font-family: 'Paperlogy', "페이퍼로지", Dotum, "돋움", sans-serif;}
body *{ box-sizing:border-box;}
a {color: #111;}
::selection {background:#382d70;color:#fff;text-shadow:none;}

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}

.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}


.header_wrap{margin: 0 15px;}

/* 상단 GNB */
.gnb{position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}
.gnb .g_link button{display: inline-block; width: 140px; height: 45px; border-radius: 50px; background: var(--bg_gray); color: #666; font-size: 15px;}
.gnb .g_link button::after{content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 6px; margin-bottom: 3px; background: url('/images/mayor2026/common/gnb_btn.png') no-repeat; vertical-align: middle;}
.gnb .g_link ul{display: none; position: absolute; width: 140px; padding: 10px 0; background: #fff; border: 1px #f2f2f2 solid; z-index: 1; border-radius: 30px;}
.gnb .g_link ul.on{display: block;}
.gnb .g_link ul li a{display: block; margin: 10px 0; font-size: 15px; text-align: center;}

.gnb .g_util{display: flex;}
.gnb .g_util .lag{position: relative; margin-right: 14px;}
.gnb .g_util .lag button{font-size: 15px; color: #666; background: #fff;}
.gnb .g_util .lag button::after{content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 6px; margin-bottom: 3px; background: url('/images/mayor2026/common/gnb_btn.png') no-repeat; vertical-align: middle;}
.gnb .g_util .lag ul{display: none; position: absolute; left: 0; right: 0; margin-top: 6px; padding: 6px 0; background: #fff; border: 1px #f2f2f2 solid; z-index: 9; border-radius: 20px;}
.gnb .g_util .lag ul.on{display: block;}
.gnb .g_util .lag ul li a{display: block; margin: 10px 0; font-size: 15px; text-align: center; color: #666;}
.gnb .g_util .login a{color: #666;}

/* 상단 MENU */
.head{position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}
.head h1 a{display: block; line-height: 22px;}
.head h1 a span{display: inline-block;width: 120px;height: 22px;background: url('/images/mayor2026/common/logo.png') no-repeat center;font-size: 0;background-size: contain;}
.head h1 a strong{display: inline-block;font-size: 18px;color: #111;font-weight: 700;}


.head .head_content{display: flex; gap: 0 10px;}
.head .head_content>button{display: inline-block; width: 45px; height: 45px; background: var(--point2) url('/images/mayor2026/common/head_tool.png') no-repeat; background-position: 50% -34px; font-size: 0; border-radius: 50%;}
.head .menu>button{display: inline-block; position: absolute; top: -60px; right: 25px; width: 45px; height: 45px; background: var(--point2) url('/images/mayor2026/common/head_tool.png') no-repeat; background-position: 50% -66px; font-size: 0; border-radius: 50%;}
.head .menu{display: none; position: absolute; top: 60px; left: -15px; width: calc(100% + 30px);  background: #fff; border-top: 1px #f2f2f2 solid; z-index: 9;}
.head .menu.on{display: block;}
/* 상단 1차메뉴 */
.head .menu ul li a{display: block;position: relative;padding: 20px;border-bottom: 1px #f2f2f2 solid;font-size: 20px;font-weight: 600;color: #111;}
.head .menu ul li.on>a{border: none; color: var(--point2); }
.head .menu ul li:has(ul)>a::before{content: '';display: block;position: absolute;top: 22px;right: 20px;width: 15px;height: 15px;background: url('/images/mayor2026/common/menu_area.png') no-repeat;background-position: 50% -29px;filter: grayscale(100%);}
.head .menu ul li.on:has(ul)>a::before{filter: grayscale(0);}
.head .menu ul li a:hover{color: var(--point2);}
/* 상단 2차메뉴 */
.head .menu li.on ul{display: block;}
.head .menu ul ul{display: none; margin: 0 15px; padding: 10px 25px; border-radius: 15px; background: #f9f9f9;}
.head .menu ul li li a{padding: 8px 0;  font-size: 15px; font-weight: 400; border: none;}
.head .menu ul li li:has(ul)>a::before{display: none;}
.head .menu ul li li .new_win{display: inline-block; }
/* 상단 3차메뉴 */
.head .menu ul ul ul{margin: 6px 0; padding: 10px 18px; background: #fff; border-radius: 15px;}
.head .menu ul li li li a{padding: 4px 0; color: #666; font-size: 14px; }

/* 새창열림 */
.head .menu ul li a .new_win{display: inline-block;width: 11px;height: 11px;margin-left: 4px;font-size: 0;background: url('/images/mayor2026/common/new_win.png') no-repeat;vertical-align: middle;}



/* 상단 검색/사이트맵 버튼 */
.head .h_tool .search a{display: inline-block; width: 45px; height: 45px; background: var(--bg_gray)url('/images/mayor2026/common/head_tool.png') no-repeat; background-position: 50% 1px; font-size: 0; border-radius: 50%;}
.head .h_tool .allmenu{display: none;}

/* 하단 */
.footer_wrap{margin: 0 15px; padding-bottom: 60px;}
.footer_wrap .f_logo a{display: inline-block; margin-bottom: 30px; line-height: 22px;}
.footer_wrap .f_logo a span{display: inline-block;width: 120px;height: 22px;background: url('/images/mayor2026/common/logo.png') no-repeat center;font-size: 0;background-size: contain;}
.footer_wrap .f_logo a strong{display: inline-block;font-size: 18px;font-weight: 700;}
.footer_wrap .f_link{display: flex; flex-wrap: wrap; padding: 20px; gap: 10px 24px; background: var(--bg_gray); border-radius: 30px; margin-bottom: 30px;}
.footer_wrap .f_link li a{font-size: 15px; color: #666;}
.footer_wrap .f_link li a .new_win{display: inline-block;width: 11px;height: 11px;margin-left: 4px;font-size: 0;background: url('/images/mayor2026/common/new_win.png') no-repeat;vertical-align: middle;}
.footer_wrap .f_add p{font-size: 15px; margin: 6px 0;}
.footer_wrap .f_add .copy{color: #666;}

/* 서브페이지 */
.sub_container{margin: 15px 0; padding: 30px 0; background: #f5f7fc;}
.sub_wrap{margin: 0 15px;}
/* 서브페이지 - 타이틀/네비게이션 */
.sub_head .s_title p{color: var(--point2); font-weight: 700;}
.sub_head .s_title h2{margin-bottom: 15px;font-size: 34px;font-weight: 700;line-height: 1.2em;}
.sub_head .s_title .s_nav{display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 30px;}
.sub_head .s_title .s_nav li a{color: #666;}
.sub_head .s_title .s_nav li::after{content:''; display: inline-block; width: 5px; height: 10px; margin-left: 12px; background: url('/images/mayor2026/common/sub_arr.png') no-repeat;}
.sub_head .s_title .s_nav li:last-of-type::after{display: none;}

/* 서브페이지 인쇄 및 공유 버튼 */
.sub_head .s_tool{display: flex; gap: 0 6px; justify-content: flex-end; margin: 15px 0 30px;}
.sub_head .s_tool p button{display: block; width: 45px; height: 45px; border-radius: 50%; font-size: 0; background: url('/images/mayor2026/common/sub_tool.png') no-repeat;}
.sub_head .s_tool .print button{background-color: var(--point2);background-position: 50% 7px;}
.sub_head .s_tool .copy button{background-color: var(--point3);background-position: 50% -24px;}

/* 서브페이지 - 2차메뉴TAB */
.sub_head .s_menu_dep2 ul{display: flex; flex-wrap: wrap; gap: 6px 2%;}
.sub_head .s_menu_dep2 ul li{flex-basis: 49%;}
.sub_head .s_menu_dep2 ul li a{display: block; height: 40px; padding: 12px 0; border-radius: 50px; background: #fff; font-size: 14px; text-align: center;}
.sub_head .s_menu_dep2 ul li.on a{background: var(--point2); color: #fff !important;}
.sub_head .s_menu_dep2 ul li a:hover,.sub_head .s_menu_dep2 ul li a:focus{color: var(--point2); font-weight: 600;}
.sub_head .s_menu_dep2 ul li a .new_win{display: inline-block;width: 11px;height: 11px;margin-left: 4px;font-size: 0;background: url('/images/mayor2026/common/new_win.png') no-repeat;vertical-align: middle;}


/* 서브페이지 흰색배경 */
.sub_content{position: relative;margin-top: 270px;padding: 60px 20px;background: #fff;border-radius: 15px;}
.sub_content::before{content: '';position: absolute;top: -240px;right: 10px;display: block;width: 240px;height: 275px;background: url('/images/mayor2026/common/sub_bg.png') no-repeat;background-size: contain;}

/* 서브페이지 - 3차메뉴TAB */
.sub_content .s_menu_dep3{margin-bottom: 30px;}
.sub_content .s_menu_dep3 ul li a{display: block; padding: 12px 0; text-align: center; border-bottom: 1px #f2f2f2 solid;}
.sub_content .s_menu_dep3 ul li.on a{border-bottom:2px var(--point3) solid; color: var(--point3) !important; font-weight: 600;}
.sub_content .s_menu_dep3 ul li a:hover,.sub_content .s_menu_dep3 ul li a:focus{color: var(--point3); font-weight: 600;}
.sub_content .s_menu_dep3 ul li a .new_win{display: inline-block;width: 11px;height: 11px;margin-left: 4px;font-size: 0;background: url('/images/mayor2026/common/new_win.png') no-repeat;vertical-align: middle;}

.sub_content .sub_bottom{margin-top: 40px; padding: 10px 20px; background: #f9f9f9; border-radius: 30px;}
.sub_content .sub_bottom p{margin: 10px 0; font-size: 15px;}
.sub_content .sub_bottom p strong{display: inline-block; margin: 0 6px 0 0; padding: 0 6px 0 0; border-right: 1px solid #dbdbdb; font-weight: 600;}



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

/* 상단 로고 - 템블릿 */
.head h1 a{line-height: 25px;}
.head h1 a span{width: 160px; height: 25px; background-size: auto;}
.head h1 a strong{font-size: 24px;}


/* 하단 - 템블릿 */
.footer_wrap .f_logo a{line-height: 25px;}
.footer_wrap .f_logo a span{width: 160px; height: 25px; background-size: auto;}
.footer_wrap .f_logo a strong{font-size: 24px;}

.footer_wrap .f_link{display: inline-flex; height: 45px; padding: 0 40px; gap: 0 30px;}
.footer_wrap .f_link li a{display: inline-block; height: 45px; padding: 14px 0;}

.sub_content{padding: 80px 60px;margin-top: 0;}
 .sub_content::before{width: 270px;height: 300px;top: -263px;}


/* 서브페이지 - 2차메뉴TAB - 템블릿*/
.sub_head .s_menu_dep2 ul{width: 60%;}
.sub_head .s_tool{justify-content:flex-start;}


/* 서브페이지 - 3차메뉴TAB */
.sub_content .s_menu_dep3{margin-bottom: 60px;}
.sub_content .s_menu_dep3 ul{display: flex;flex-wrap: wrap;border-top: 1px #f2f2f2 solid;}
.sub_content .s_menu_dep3 ul li{flex-basis: 33.33%;}
.sub_content .s_menu_dep3 ul li a{padding: 20px 0;font-size: 17px;}

.sub_content .s_menu_dep3 ul.col2 li{flex-basis:50%;}
.sub_content .s_menu_dep3 ul.col4 li{flex-basis:25%;}
.sub_content .s_menu_dep3 ul.col5 li{flex-basis: 20%;}

.sub_content .sub_bottom{display: flex; justify-content: space-between; padding: 14px 60px;}
.sub_content .sub_bottom p{display: inline-block; margin-right: 20px; font-size: 16px; color: #666;}
.sub_content .sub_bottom p strong{color: #111;}
}

@media all and (min-width:1023px) {

.header_wrap,
.footer_wrap{max-width: 820px; margin: 0 auto;}

.sub_container{margin: 30px auto;}
.sub_wrap{max-width: 820px; margin: 0 auto;}

}

@media all and (min-width:1339px) {

.header_wrap,
.footer_wrap{max-width: 1260px;}

.sub_wrap{max-width: 1260px;}

}

@media all and (min-width:1550px) {
.header_wrap,
.footer_wrap{max-width: 1520px;}

/* 상단 GNB - PC*/
.gnb{margin-top: 30px;}
.gnb .g_link button{display: none;}
.gnb .g_link ul{display: flex; gap: 0 30px; position: static; width: max-content; padding: 0 40px; background: var(--bg_gray); border: none;}
.gnb .g_link ul li a{height: 45px; margin: 0; padding: 14px 0; color: #666;}

.head{margin-top: 30px;}
.head .head_content{gap: 0 50px; align-items: center;}
.head .head_content>button{display: none;}
.head .menu{display: block; position: static; border: none;}
.head .menu>button{display: none;}
/* 상단 1차메뉴 - PC*/
.head .menu>ul{display: flex; gap: 0 100px;}
.head .menu ul li{position: relative;}
.head .menu ul li a{padding: 0; border: none;}
.head .menu ul li:has(ul)>a::before{display: none;}
/* 상단 2차메뉴 - PC*/
.head .menu li.on>ul{position: absolute;left: calc(-50% - 100px);right: calc(-50% - 100px);min-width: 200px;width: max-content;margin: 15px auto 0;background: #fff;border: 1px var(--point2) solid;}
/* 상단 3차메뉴 - PC*/
.head .menu ul ul ul{background: #f9f9f9;}
/* 상단 전체메뉴보기 */
.head .h_tool{display: flex; gap: 0 8px;}
.head .h_tool .allmenu{display: block;}
.head .h_tool .allmenu a{display: inline-block; width: 45px; height: 45px; background: var(--point2)url('/images/mayor2026/common/head_tool.png') no-repeat; background-position: 50% -34px; font-size: 0; border-radius: 50%;}

/* 서브페이지 - 기본세팅 - PC */
.sub_container{margin: 50px auto; padding: 75px 0; border-radius: 100px;}
.sub_wrap{width: 1520px; max-width: none; }
.sub_head{position: relative; margin-bottom: 60px;}

/* 서브페이지 - 타이틀/네비게이션 */
.sub_head .s_title h2{margin-bottom: 30px; font-size: 60px; font-weight: 800;}
.sub_head .s_title .s_nav{margin-bottom: 50px;}

/* 서브페이지 인쇄 및 공유 버튼 */
.sub_head .s_tool{position: absolute; bottom: 0; left: 1010px; margin: 0 0 8px;}

/* 서브페이지 - 2차메뉴TAB - PC*/
.sub_head .s_menu_dep2 ul{width: 1000px; gap: 4px 0; background: #fff; border-radius: 60px;}
.sub_head .s_menu_dep2 ul li{flex-basis: auto;}
.sub_head .s_menu_dep2 ul li a{position: relative; height: 60px; padding: 20px 40px; text-align: left; font-size: 18px; font-weight: 500; background: none;}
.sub_head .s_menu_dep2 ul.col1 li{flex-basis: 50%;}
.sub_head .s_menu_dep2 ul.col2 li{flex-basis: 50%;}
.sub_head .s_menu_dep2 ul.col3 li{flex-basis: 33.33%;}
.sub_head .s_menu_dep2 ul.col4 li{flex-basis: 25%;}
.sub_head .s_menu_dep2 ul.col5 li{flex-basis: 20%;}
.sub_head .s_menu_dep2 ul li.on a::after{content: ''; position: absolute; top: 24px; right: 40px; display: block; width: 10px; height: 10px; background: url('/images/mayor2026/common/menu_area.png') no-repeat; background-position: 50% -6px;}

/* 서브페이지 흰색배경  - PC*/
.sub_content{ padding: 100px; border-radius: 100px;}
.sub_content::before{top: -330px;right: 60px;width:320px;height:370px;background-size:auto;}
}                                                                                     

@media all and (min-width:1920px) {
.sub_container{width: 1750px;}
}