@charset "utf-8"; @font-face { font-family: 'Paper'; src: url('/main/lib/font/Paperlogy-5Medium.woff2') format('woff2'); font-weight: normal; /* font-display: swap; */ } @font-face { font-family: 'Paper'; src: url('/main/lib/font/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 500; } @font-face { font-family: 'Paper'; src: url('/main/lib/font/Paperlogy-7Bold.woff2') format('woff2'); font-weight: bold; } /* 웹접근성 */ *:focus-visible { outline: 2px dashed #000; outline-offset: 2px; box-shadow: -6px -6px 0 #fff, 6px 6px 0 #fff, -6px 6px 0 #fff, 6px -6px 0 #fff, 0 -6px 0 #fff, 0 6px 0 #fff, 6px 0 0 #fff, -6px 0 0 #fff; z-index: 99999;} .focus-visible1 { outline-offset: -2px;} /* 2026 메인변경 레이아웃 */ #header *{font-family: 'Paper';} .nuri-txt{background: #edf0f5; padding:6px 0px} .nuri-txt:before{display: none;} .nuri-txt>div{display: flex; align-items: center; gap:5px; color: #333;} .header-family{border-bottom: 1px solid #ddd; padding:0px; position: relative; z-index: 4; } .header-family .header_family_site{border-bottom: 0px} .header-family .weather_area{display: none !important;} .header-family .main_inner{display: flex; justify-content: space-between; align-items: center;} .header-family .other{display: flex; gap:15px; align-items: center} .header-family .other a, .header_family_site .family_site_liste2 > li > a{font-size: 14.5px; color: #666} .header_family_site .family_site_liste2 > li > a > span:before{display: none !important} .header_family_site .family_site_liste2 > li > a[target=_blank] > span:after{display: block; content:''; width: 15px; height: 15px; margin-left: 5px; background: url(/main/images/main2026/ic_gnb.png) no-repeat center top / cover} .header_family_site .family_site_liste2 > li.type2 > a > span:after{width: 15px; height: 15px; margin-left: 5px; background: url(/main/images/main2026/ic_gnb.png) no-repeat center bottom / cover} .header-family .lang_wrap { position: relative; font-size: 16px; display: inline-block; } .header-family .lang_arrow { font-size: 14px; color: #333; background: url(../../images/common/icon_a_down1.png) right 5px no-repeat; padding-right: 25px; } .header-family .lang_arrow.on { background-image: url(../../images/common/icon_a_up2.png); } .header-family .lang_select { position: absolute; right: 0; top: 20px; padding: 5px 20px; margin: 7px 0; text-align: right; background-color: #fff; box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.15); display: none; white-space: nowrap; } .header-family .lang_select a { font-size: 14px; color: #333; } .header-family .lang_select a:after { content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 16px; background: #ddd; margin: 0 15px; } .header-family .lang_select a:last-child { padding-right: 0; } .header-family .lang_select a:last-child:after { display: none; } .header-family .lang_select a:first-child { padding-left: 0px; } /* #header-gnb{height:105px} #header-gnb .menu-wrap{padding-top: 20px;} #header-gnb .menu > ul { padding-left: calc((100vw - 1470px) / 2 + 220px); padding-right: 510px; } #header-gnb .menu > ul > li > a{font-size: calc(var(--fz) * 2.2); font-weight: normal; color: #111;} #header-gnb .util-area {right: calc((100vw - 1470px) / 2)} #header-gnb .util .search_area{border-bottom-color:#333} #header-gnb .util .search_area .input1{padding:0px; padding-right: 50px} #header-gnb .util .search_area .btn_search{top:7px; background: var(--gra); border-radius:100%; width:35px; height:35px; border-radius: 35px;} #header-gnb .util .search_area .btn_search:before{display: block; content: ''; position: absolute; left: 50%; top: 50%; width: 10%; aspect-ratio:1/1; border: 1px solid #fff} #header-gnb .util .search_area .btn_search:after{display: block; content: ''; position: absolute; width: 10%; aspect-ratio:1/1; border: 1px solid #fff} */ /* 푸터 */ #footer{padding:max(2%, 30px); background: #F5F5F5;} #footer *{color: #333 !important; font-family: 'Paper';} #footer>div{ width: 100%; max-width: 1470px; margin: 0 auto; padding: 0 15px; } #footer .footer-site .btn-site-open{padding:15px 18px; padding-right: 40px; background: #fff; border-radius:5px; border:0px; color:#333} #footer .footer-site .btn-site-open:before{border-color: #333; right:20px; width: 10px; height:10px; border-width:1.5px} #footer .links-list-area{padding-bottom: 30px; margin-bottom: 30px; border-bottom:1px solid rgba(0,0,0,.1)} #footer .links-list{margin:0px} #footer .links-list > li{padding:0px 10px} #footer .links-list > li > a{font-size: calc(var(--fz) * 1.6);} #footer .links-list > li:after{display: none;} #footer .copy-area{padding-left: 150px;} #footer .copy-area .foot_logo{top:10px; left: 5px; width: 103px; height:84px; background: url(/main/images/main2026/btm_logo.png) no-repeat center center / cover; text-indent: -6000px;} #footer .copy-area .info-list > li{font-size: calc(var(--fz) * 1.5);} #footer .snsul { --icSize:calc(var(--fz) * 4); top:calc(-60px - var(--fz) * 4); bottom:unset} #footer .snsul > li{margin-right: 3px;} #footer .snsul > li > a { display: block; width: var(--icSize); height: var(--icSize); border-radius:100%; overflow: hidden; background-position: center top; background-size: cover; background-repeat: no-repeat; background-color: #333; background-image:url(/main/images/main2026/ic_sns.png); text-indent: 100%; white-space: nowrap; } #footer .snsul > li:nth-child(1) > a { background-position-y: calc(0 * var(--icSize)); background-color: #4868AC;} /* 페이스북 */ #footer .snsul > li:nth-child(2) > a { background-position-y: calc(-1 * var(--icSize)), top; background-image: url(/main/images/main2026/ic_sns.png), linear-gradient(45deg, #FFC107 9.15%, #F44336 50.57%, #9C27B0 90.03%);} /* 인스타그램 */ #footer .snsul > li:nth-child(3) > a { background-position-y: calc(-2 * var(--icSize)); background-color: #2EB34A;} /* 블로그 */ #footer .snsul > li:nth-child(4) > a { background-position-y: calc(-4 * var(--icSize)); background-color: #E02F2F;} /* 유튜브*/ #footer .snsul > li:nth-child(5) > a { background-position-y: calc(-5 * var(--icSize)); background-color: #FF6F0E ; } /* 당근 */ #footer .copy-area .info{bottom:unset; top:5px} #footer .copy-area .national_symbol{width: 84px; height:58px; background: url(/main/images/main2026/btm_flag.png) no-repeat center center / cover; border-radius: 8px; border-width:0px; } #footer .copy-area .wa_mark{width: 94px; height:65px; background: url(/main/images/main2026/btm_web.png) no-repeat center center / cover; } #footer .footer-site .site-content{background-color: #fff;} @media (max-width: 1023px) { #footer {padding:30px 0px !important} #footer .footer-site{padding:2px} #footer .footer-site .btn-site-open{border:0px !important; } #footer .links-list > li{width: auto !important; ; } #footer .links-list > li> a{ border:0px !important; padding:0px !important; } } /* 레이아웃 */ .sub-container { padding-right: 160px; } .sub-content { position: relative; max-width: 1280px; margin: 0 auto; padding: 30px 0; padding-top: 0; } .sub-content:after { content: ""; display: block; clear: both; } .subr-content { position: relative; float: right; width: calc(100% - 300px); } .subr-content.full { width: 100%; } #footer .copy-area .wa_mark { display: block; } #footer .copy-area .national_symbol { display: block; } /* 헤더 */ #header-gnb { position: relative; height: 105px; font-family:'Paper' ; } #header-gnb h1 { display: inline-block; z-index: 2; position: relative; margin: 12px 0 0 8px; } #header-gnb h1.m-logo { display: none; } #header-gnb h1 > a { display: block; width: 200px; height: 87px; background: url(../../images/common/logo2026.png) no-repeat center center / contain; } #header-gnb h1 > a > span { font-size: 0; } @media (max-width: 1023px) { #header-gnb h1 > a {width: 105px; ;height: 50px !important; } } #header-gnb .logo { z-index: 1; position: relative; width: 173px; height: 55px; } #header-gnb .weather { display: flex; align-items: center; height: 85px; margin-left: 20px; padding-top: 12px; } #header-gnb .weather .weatherapi { display: flex; align-items: center; } #header-gnb .weather .weatherapi .temper-wrap { margin-left: 20px; } #header-gnb .weather .weatherapi .temper-wrap .txt { margin-left: 3px; color: #444; font-size: 14px; } #header-gnb .weather .weatherapi .temper { display: block; color: #000; font-weight: bold; font-size: 32px; line-height: 1; letter-spacing: -0.8px; } #header-gnb .weather .weatherapi .munji { display: flex; flex-direction: column; justify-content: space-between; height: 40px; margin-left: 19px; color: #444444; font-size: 15px; letter-spacing: -0.38px; } #header-gnb .weather .weatherapi .munji .normal { color: #008a00; } #header-gnb .weather .weatherapi .munji .good { color: #007ac7; } #header-gnb .weather .weatherapi .munji .bad { color: #c95100; } #header-gnb .weather .weatherapi .munji .toobad { color: #dd2424; } #header-gnb .menu-wrap { display: block; position: absolute; top: 0; left: 0; width: 100%; min-width: 1580px; padding-top: 20px; } #header-gnb .menu { position: relative; } #header-gnb .menu > ul { padding-left: calc((100vw - 1470px) / 2 + 220px); padding-right: 510px; font-size: 0; text-align: center; } #header-gnb .menu > ul > li { display: inline-block; padding: 0 3.3%; } #header-gnb .menu > ul > li > a { display: block; font-weight: bold; padding: 20px 0; color: #000; font-size: calc(var(--fz) * 2.2); font-weight: normal; color: #111; line-height: 1; letter-spacing: -0.05em; } #header-gnb .menu > ul > li > a.active, #header-gnb .menu > ul > li > a:hover, #header-gnb .menu > ul > li > a:focus { color: #5f469a; font-weight: bold; } #header-gnb .menu .sub { display: none; z-index: 10000; position: absolute; top: 85px; left: 0; width: 100%; border-top: 1px solid #ececec; border-bottom: 1px solid #ddd; background: #fff; text-align: left; word-break: keep-all; } #header-gnb .menu .sub .title-area { position: absolute; top: 0; left: 0; width: 440px; height: 100%; background: #fff url(../../images/gnb/menu_bg.png) no-repeat left bottom; } #header-gnb .menu .sub .title-content { position: relative; height: 100%; padding: 50px 0; padding-left: 160px; background-position: left bottom; background-size: contain; background-repeat: no-repeat; background-color: #f7f4fb; } #header-gnb .menu .sub .title-content:before { display: block; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } #header-gnb .menu .sub.sub1 .title-content { background-image: url(/main/images/gnb/n_menu_bg1.png); } #header-gnb .menu .sub.sub2 .title-content { background-image: url(/main/images/gnb/n_menu_bg2.png); } #header-gnb .menu .sub.sub3 .title-content { background-image: url(/main/images/gnb/n_menu_bg1.png); } #header-gnb .menu .sub.sub4 .title-content { background-image: url(/main/images/gnb/n_menu_bg2.png); } #header-gnb .menu .sub.sub5 .title-content { background-image: url(/main/images/gnb/n_menu_bg1.png); } #header-gnb .menu .sub.sub1 .title-content:before { background-image: url(../../images/gnb/menu1.png); } #header-gnb .menu .sub.sub2 .title-content:before { background-image: url(../../images/gnb/menu2.png); } #header-gnb .menu .sub.sub3 .title-content:before { background-image: url(../../images/gnb/menu3.png); } #header-gnb .menu .sub.sub4 .title-content:before { background-image: url(../../images/gnb/menu4.png); } #header-gnb .menu .sub.sub5 .title-content:before { background-image: url(../../images/gnb/menu5.png); } #header-gnb .menu .sub .title-content .title { display: inline-block; position: relative; margin-bottom: 30px; color: #fff; font-weight: bold; font-size: 36px; line-height: 1; } #header-gnb .menu .sub .title-content .title:after { position: absolute; bottom: -20px; left: 0; width: 26px; height: 3px; content: ""; } #header-gnb .menu .sub.sub1 .title-content .title { color: #5f469a; } #header-gnb .menu .sub.sub1 .title-content .title:after { background: #5f469a; } #header-gnb .menu .sub.sub2 .title-content .title { color: #e95d82; } #header-gnb .menu .sub.sub2 .title-content .title:after { background: #e95d82; } #header-gnb .menu .sub.sub3 .title-content .title { color: #5f469a; } #header-gnb .menu .sub.sub3 .title-content .title:after { background: #5f469a; } #header-gnb .menu .sub.sub4 .title-content .title { color: #e95d82; } #header-gnb .menu .sub.sub4 .title-content .title:after { background: #e95d82; } #header-gnb .menu .sub.sub5 .title-content .title { color: #5f469a; } #header-gnb .menu .sub.sub5 .title-content .title:after { background: #5f469a; } #header-gnb .menu .sub .title-content .intro-desc { color: #444; font-size: 18px; line-height: 1.4; } #header-gnb .menu .sub .depth-list-area { position: relative; min-height: 340px; margin-left: 440px; padding: 30px; } #header-gnb .menu .sub .depth2 { margin: 0 -15px; } #header-gnb .menu .sub .depth2 > li { display: inline-block; width: 20%; padding: 0 15px; vertical-align: top; } #header-gnb .menu .sub.sub5 .depth2 > li { width: 25%; padding: 15px; } #header-gnb .menu .sub .depth2 > li > a { display: block; padding: 7px 15px; border: 1px solid #ddd; color: #222; font-size: 16px; word-break: break-all; border-radius: 5px; } #header-gnb .menu .sub .depth2 > li > a:hover, #header-gnb .menu .sub .depth2 > li > a:focus { border-color: transparent; background-color: #5f469a; color: #fff; box-shadow: 2.5px 4.33px 5px 0px rgba(34, 34, 34, 0.21); } #header-gnb .menu .sub.sub5 .depth2 > li > a:hover, #header-gnb .menu .sub.sub5 .depth2 > li > a:focus { border-color: transparent; background-color: #5f469a; color: #fff; } #header-gnb .menu .sub .depth3 { padding: 13px 0; } #header-gnb .menu .sub .depth3 > li > a { display: block; padding: 5px; padding-left: 34px; background-image: url(../../images/common/bullet3.png); background-position: left 20px center; background-repeat: no-repeat; color: #222; font-size: 16px; } #header-gnb .menu .sub .depth3 > li > a:hover, #header-gnb .menu .sub .depth3 > li > a:focus { text-decoration: underline; color: #5f469a; } #header-gnb .util-area { z-index: 3; position: absolute; top: 15px; right: calc((100vw - 1470px) / 2); font-size: 0; } @media screen and (max-width:1470px){ #header-gnb .util-area {right:15px} } #header-gnb .util-area .mobile-menu-btn { display: none; width: 40px; height: 40px; border: 1px solid #dedede; background-image: url(../../images/common/icon_hammenu.png); background-position: center; background-size: 19px; background-repeat: no-repeat; background-color: #fff; } #header-gnb .util-area .mobile-menu-btn span { font-size: 0; } #header-gnb .util { position: relative; } #header-gnb .util > * { display: inline-block; vertical-align: middle; } #header-gnb .util .search_area { display: inline-flex; justify-content: space-between; width: 300px; height: 50px; border: 2px solid transparent; border-top:none; border-left: none; border-right: none; border-bottom-color:#333; } #header-gnb .util .search_area > form { position: relative; width: 100%; } #header-gnb .util .search_area .input1 { width: 100%; height: 100%; padding:0px; padding-right: 50px; border: 0 none; font-size: 16px; } #header-gnb .util .search_area .input1:focus { outline: none; } #header-gnb .util .search_area .input1:focus-visible { border: 3px solid transparent; border-radius: 5px; outline: 2px dashed #000; outline-offset: 6px; } #header-gnb .util .search_area .btn_search { position: absolute; top: 7px; right: 0; border-radius:100%; width:35px; height:35px; border-radius: 35px; border: 0 none; background:url(/main/images/main2026/gnb_ic_search.svg) no-repeat center, var(--gra); ; vertical-align: top; cursor: pointer; } #header-gnb .util .search_area.active { border: 3px solid transparent; border-radius: 5px; } #header-gnb .util .other { padding-left: 50px; font-size: 0; } #header-gnb .util .other > a { display: inline-block; color: #333; font-size: 14px; } #header-gnb .util .other > a:after { display: inline-block; width: 1px; height: 16px; margin: 0 15px; background: #ddd; content: ""; vertical-align: middle; } #header-gnb .menu .sub.sub5 .depth2 > li.type2 { width: auto; } #header-gnb .menu .sub.sub5 .depth2 > li.type2 > a { width: 118px; height: 118px; padding: 0; padding-top: 17px; border: 1px solid #ddd; font-size: 16px; text-align: center; } #header-gnb .menu .sub.sub5 .depth2 > li.type2 > a:before { content:""; display: block; width: 55px; height: 55px; margin: 0 auto; margin-bottom: 3px; border-radius: 0; background-color: transparent; } #header-gnb .menu .sub.sub5 .depth2 > li.type2.type2-menu1 > a:before { background-image: url(/main/images/main/icon_family3.png); } #header-gnb .menu .sub.sub5 .depth2 > li.type2.type2-menu2 > a:before { background-image: url(/main/images/main/icon_family7.png); } #header-gnb .menu .sub.sub5 .depth2 > li.type2.type2-menu3 > a:before { background-image: url(/main/images/main/icon_family6.png); } #header-gnb .menu .sub.sub5 .depth2 > li.type2.type2-menu4 > a:before { background-image: url(/main/images/main/icon_family9.png); } /* 공통 스타일 */ .subr-title-area { position: relative; margin-bottom: 41px; } .subr-right-smenu { float: right; margin-top: -45px; } /* 민원안내 - 민원종합안내 - 민원실위치도 - 종합민원실 */ #floor-info dl { border: 1px solid #ddd; box-sizing: border-box; } #floor-info dl:after { content: ""; display: block; clear: both; } #floor-info dl > dt, #floor-info dl > dd { float: left; } #floor-info dt { max-width: 100px; width: 100%; } #floor-info dd { width: calc(100% - 100px); padding: 39px; display: none; } #floor-info dd:after { content: ""; display: block; clear: both; } #floor-info dd > img { display: block; margin: 0 auto; } #floor-info .floor-title { display: block; margin-bottom: 27px; padding-bottom: 42px; border-bottom: 1px solid #ddd; line-height: 1; font-size: 26px; font-weight: bold; } #floor-info .floor-ul-s1 li { display: table; width: 100%; height: 226px; border: 1px solid #ddd; box-sizing: border-box; } #floor-info .floor-ul-s1 li.active > a { background: #00909e; color: #FFF; font-weight: bold; } #floor-info .floor-ul-s1 li > a { display: table-cell; width: 100%; height: 221px; vertical-align: middle; text-align: center; background: #eee; cursor: pointer; } #floor-info .floor-ul-s2 { display: inline-block; float: right; margin-top: 19px; text-align: right; } #floor-info .floor-ul-s2:after { content: ""; display: block; clear: both; } #floor-info .floor-ul-s2 li { float: left; margin-top: 5px; text-align: left; font-size: 16px; line-height: 30px; } #floor-info .floor-ul-s2 li > img { margin-right: 10px; } #floor-info .floor-ul-s2 li:not(:last-child) { margin-right: 60px; } #floor-info .dept-info { margin-bottom: 50px; } #floor-info .dept-info li { display: none; } #floor-info .floor-info-title { display: inline-block; width: 100%; margin-bottom: 14px; line-height: 1; font-size: 20px; font-weight: bold; } #floor-info.map_01 .floor-ul-s1 li { height: 140px; } #floor-info.map_01 .floor-ul-s1 li > a { height: 140px; } #floor-info.map_02 .floor-ul-s1 li { height: 340px; } #floor-info.map_02 .floor-ul-s1 li > a { height: 340px; } #floor-info.map_03 .floor-ul-s1 li { height: 250px; } #floor-info.map_03 .floor-ul-s1 li > a { height: 250px; } #floor-info.map_04 .floor-ul-s1 li { height: 150px; } #floor-info.map_04 .floor-ul-s1 li > a { height: 150px; } .floor_map { margin-top: 50px; } /* 민원안내 - 민원종합안내 - 다양한 온라인민원 */ #kind-complain ul { font-size: 0; margin: -20px; } #kind-complain ul > li { display: inline-block; padding: 20px; width: 33.3333%; } #kind-complain ul > li .item > .image-box { width: 100%; min-height: 200px; padding: 0 15px; line-height: 200px; text-align: center; border: 1px solid #ddd; } #kind-complain ul > li .item > .image-box img { width: auto; vertical-align: middle; } #kind-complain ul > li .item > a { display: block; position: relative; margin: 0; } #kind-complain ul > li .item > a:after { position: absolute; width: 20px; height: 20px; right: 27px; background: url(../../images/common/icon_link_go2.png) no-repeat; background-size: 16px; content: ""; } #kind-complain ul.type2 { margin: -10px; } #kind-complain ul.type2 > li { padding: 10px; } #kind-complain ul.type2 > li .item > .image-box { min-height: auto; padding: 0; line-height: 1; border: 0; } #kind-complain ul.type2 > li .item > .image-box img { width: 100%; } #kind-complain ul.type2 > li .item > a:after { right: 15px; } /* 민원안내 - 민원종합안내 - 민원행정, 제도개선 지침 */ #admin .admin-img-con { text-align: center; } #admin .admin-ul-s1 { margin: -10px; font-size: 0; } #admin .admin-ul-s1 > li { display: inline-block; width: 50%; padding: 10px; font-size: 16px; vertical-align: top; } #admin .admin-ul-s1 > li .item { border: 1px solid #ddd; } #admin .admin-ul-s1 > li .item > strong { display: block; padding: 28px 10px; line-height: 1; text-align: center; font-size: 20px; font-weight: bold; } #admin .admin-ul-s1 > li .item .admin-ul-s2 { min-height: 158px; padding: 32px 40px; background: #f9f9f9; line-height: 2; } #admin .admin-ul-s1 > li .item .admin-ul-s2 span { display: inline-block; margin-right: 20px; font-weight: bold; color: #00909e; } /* 민원안내 - 민원발급안내 - 정부24 */ #gove .sub-title { margin-top: 30px; margin-bottom: 35px; font-size: 18px; font-weight: bold; color: #00909e; } #gove .often-gove > ul { font-size: 0; margin: -22px 0; padding: 30px; text-align: center; border: 1px solid #ddd; } #gove .often-gove > ul li { display: inline-block; width: 16.6667%; padding: 22px 0; vertical-align: top; font-size: 16px; } #gove .often-gove > ul li .item { padding: 0 10px; } #gove .often-gove > ul li .item > p { margin-top: 15px; } /* 민원안내 - 분야별민원 - 주민/인감/가족관계등록 - 주민등록/인감 - 본인서명사실확인제도 */ .signature { margin: 0 -38px; font-size: 0; } .signature:after { content: ""; display: block; clear: both; } .signature li { display: inline-block; width: 25%; text-align: center; padding: 0 38px; vertical-align: top; } .signature li .item { position: relative; padding-right: 15px; } .signature li:not(:first-child) .item:after { content: ""; position: absolute; display: block; top: 54.5px; left: -38px; width: 22px; height: 9px; margin-top: -4.5px; background: url(../../images/common/icon_a_right2.png) no-repeat center; background-size: 22px; z-index: 1; } .signature li p { margin-top: 20px; font-size: 16px; } /* 민원안내 - 분야별민원 - 교통/자동차 - 자동차관리 - 의무보험 */ .insurance { margin-top: 25px; padding: 38px; border: 1px solid #ddd; } /* 민원안내 - 분야별민원 - 건축/주택 - 옥외광고물 - 옥외광고물이란? */ #advertising .process { padding: 22px 95px 22px 40px; background: #f9f9f9; font-size: 0; } #advertising .process .process-ol-s1 { margin: 0 -46px; } #advertising .process .process-ol-s1 li { display: inline-block; position: relative; width: 33.33333%; padding: 18px 46px; vertical-align: top; text-align: center; } #advertising .process .process-ol-s1 > li:not(:last-child):after { content: ""; position: absolute; display: block; top: 50%; right: -10px; width: 19px; height: 14px; margin-top: -4.5px; background: url(../../images/common/icon_a_right9.png) no-repeat center; background-size: 19px; z-index: 1; } #advertising .process .process-ol-s1 .item strong { display: block; padding: 15px 10px; border: 1px solid #00909e; background: #00909e; font-size: 18px; font-weight: bold; color: #FFF; } #advertising .process .process-ol-s1 li.active .item strong { border: 1px solid #006670; background: #006670; } #advertising .process .process-ol-s1 .item p { min-height: 108px; padding: 15px; font-size: 16px; border: 1px solid #00909e; background: #FFF; text-align: left; } /* 2020-08-21작업 */ #floor-info .title-s1 { display: none; } /* 적극행정 소극행정 정의 */ .admns-box { background-color: #f9f9f9; border: 1px solid #00909e; padding: 20px 18px; } .admns-box .admns_title { display: inline-block; font-size: 20px; font-weight: bold; color: #fff; background-color: #00909e; min-width: 110px; height: 40px; line-height: 40px; text-align: center; margin-bottom: 20px; } .admns-box .admns_list b { font-weight: bold; color: #00909e; font-size: 17px; } .admns-box .admns_list li { font-size: 16px; letter-spacing: -0.03em; color: #444; } .admns-box .admns_list > li { margin-bottom: 5px; background: url(../../images/common/bullet4.png) no-repeat left top 12px; padding: 0 0 0 12px; } .admns-box .admns_list > li > ul { margin: 5px 0; } .admns-box .admns_list > li > ul > li.num1 { position: relative; padding-left: 15px; } .admns-box .admns_list > li > ul > li.num1:before { position: absolute; top: 0; left: 0; content: "1."; display: block; } .admns-box .admns_list > li > ul > li.num2 { position: relative; padding-left: 15px; } .admns-box .admns_list > li > ul > li.num2:before { position: absolute; top: 0; left: 0; content: "2."; display: block; } /* 적극행정 추진방향 */ .admns-way .admns-way-list1-wrap { margin-bottom: 40px; } .admns-way .admns-way-list1 { display: table; width: 100%; font-size: 0; padding-bottom: 45px; } .admns-way .admns-way-list1:last-child { padding-bottom: 0; } .admns-way .admns-way-list1 > * { vertical-align: middle; display: inline-block; } .admns-way .admns-way-list1 dt { width: 160px; height: 80px; line-height: 80px; text-align: center; font-size: 26px; font-weight: bold; color: #00909e; border: 1px solid #00909e; border-radius: 40px; } .admns-way .admns-way-list1 dd { width: calc(100% - 160px); text-align: center; font-size: 33px; color: #222; padding: 0 15px; } .admns-way .admns-way-list1 dd b { font-weight: bold; color: #00909e; } .admns-way .admns-way-list1 dd.bg { position: relative; } .admns-way .admns-way-list1 dd.bg:before { position: absolute; left: 50%; bottom: 30px; margin-left: -97.5px; content: ""; width: 195px; height: 70px; display: block; background: url(../../images/sub/admns/p_bg.png) no-repeat center; z-index: -1; } .admns-way .admns-way-table { min-width: auto; } .admns-way .admns-way-table td.tit { background-color: #00909e; font-size: 24px; color: #fff; padding: 12px 15px; vertical-align: middle; text-align: center; } .admns-way .admns-way-table td { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; vertical-align: top; } .admns-way .admns-way-table .item { padding: 20px; padding-bottom: 30px; } .admns-way .admns-way-table .item .item-title { display: table; width: 100%; font-weight: bold; font-size: 22px; color: #10ab9e; min-height: 52px; margin-bottom: 25px; line-height: 1.2; } .admns-way .admns-way-table .item .item-title span { display: table-cell; text-align: center; vertical-align: middle; } .admns-way .admns-way-list2 > li { position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 16px; } .admns-way .admns-way-list2 > li:last-child { margin-bottom: 0; } .admns-way .admns-way-list2 .num { position: absolute; display: block; left: 0; top: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; color: #fff; font-size: 15px; border-radius: 2px; } .admns-way .admns-way-list2 .num.num1 { background-color: #10ab9e; } .admns-way .admns-way-list2 .num.num2 { background-color: #00909e; } .admns-way .admns-way-list2 .num.num3 { background-color: #006670; } /* 미추홀구 워크넷 */ .chk_wrap { width: 100%; background-color: #f5f5f5; padding: 20px; border: 1px solid #dddddd; margin-top: -21px; } .chk_wrap .jab { border-bottom: 1px solid #dddddd; height: 310px; } .chk_wrap .jab .c-chk_box { margin-left: 120px; } .chk_wrap .jab .c-chk_box .c-chk { margin-bottom: 20px; width: 50%; float: left; } .chk_btn .more-btn { background-color: #00909e; background-image: url(../../images/common/icon_a_down1_w.png); background-repeat: no-repeat; background-position: right 20px center; width: 150px; border: 0; color: #fff; font-size: 16px; height: 45px; } .chk_btn .more-btn > p { text-align: left; margin-left: 20px; } .chk_wrap .career { border-bottom: 1px solid #dddddd; padding: 20px 0 0; } .chk_wrap .career .c-chk_box { margin-left: 120px; margin-top: -5px; } .chk_wrap .career .c-chk { width: 18%; margin-bottom: 20px; } .chk_wrap .career .c-chk:nth-child(3) { margin-right: -20px; } .chk_wrap .career .c-chk_box > select { height: 35px; width: 135px; margin: 0 20px; } .chk_wrap .level { border-bottom: 1px solid #dddddd; padding: 20px 0 0; } .chk_wrap .level .c-chk { width: 18%; margin-bottom: 20px; } .chk_wrap .level .c-chk_box { margin-left: 120px; margin-top: -5px; } .chk_wrap .employment { padding: 20px 0 0; } .chk_wrap .employment .c-chk { width: 30%; margin-bottom: 20px; vertical-align: top; } .chk_wrap .employment .c-chk_box { margin-left: 120px; margin-top: -5px; } .chk_wrap > div { position: relative; } .chk_wrap > div > strong { position: absolute; font-weight: bold; font-size: 17px; } .worknet_wrap { margin-top: 20px; width: 100%; overflow: hidden; } .worknet_wrap .l-left-content { font-weight: bold; } .worknet_wrap .l-left-content > p > span { color: #00909e; } .worknet_wrap .workn_wrap { font-size: 0; margin: 0 -1rem; flex-wrap: wrap; display: flex; } .worknet_wrap .workn_wrap .workn_box { display: flex; padding: 1em; font-size: 16px; width: 50%; flex-direction: row-reverse; } .worknet_wrap .workn_wrap .workn_box .work_con { flex: auto; border: 1px solid #dddddd; position: relative; padding: 30px; display: flex; flex-direction: column; width: 100%; } .worknet_wrap .workn_wrap .workn_box .work_con .d-day { position: absolute; top: 0; right: 0; width: 80px; height: 40px; background-color: #00909e; } .worknet_wrap .workn_wrap .workn_box .work_con .d-day > p { color: #fff; font-size: 18px; line-height: 37px; text-align: center; } .worknet_wrap .workn_wrap .workn_box .work_con .work { flex: 1 1 auto; padding: 1em; padding-left: 0; border-bottom: 1px solid #dddddd; } .worknet_wrap .workn_wrap .workn_box .work_con .work > h3 { font-size: 21px; /* padding: 1em 0; */ } .worknet_wrap .workn_wrap .workn_box .work_con > em { padding-top: 20px; margin-bottom: 3px; color: #00909e; } .worknet_wrap .workn_wrap .workn_box .work_con > p { margin-bottom: 5px; } /* 미추홀구 워크넷 상세페이지 */ #worknet_detail .workn_box { position: relative; border: 1px solid #000; padding: 20px; } #worknet_detail .workn_box .work_con .d-day { position: absolute; background-color: #00909e; padding: 0 10px; min-width: 80px; height: 40px; top: 0; right: -1px; line-height: 40px; } #worknet_detail .workn_box .work_con .d-day > p { font-size: 17px; text-align: center; color: #fff; } #worknet_detail .workn_box .work_con .work { margin-bottom: 20px; } #worknet_detail .workn_box .work_con .work > h3 { font-size: 22px; font-weight: bold; width: 80%; } #worknet_detail .workn_box .work_con > p { padding: 5px 0; } #worknet_detail .workn_box .work_con > p > em { color: #00909e; } #worknet_detail .workn_box .work_con .date { margin: 20px 0; color: #666666; } #worknet_detail .line { border: 1px solid #ddd; margin-bottom: 20px; } #worknet_detail .w_con_b { overflow: hidden; } #worknet_detail .w_con_b > p { float: left; line-height: 40px; height: 40px; margin-right: 20px; } #worknet_detail .w_con_b > span { float: right; height: 40px; line-height: 40px; } #worknet_detail .board-view-s2 { border-top: 0px; } #worknet_detail .board-view-s2 table th { background-color: #f3f9fd; border-top: 1px solid #000; } #worknet_detail .board-view-s2 table td { border-top: 1px solid #000; } #worknet_detail .work-sub { border: 1px solid #ddd; width: 100%; height: 100px; } #worknet_detail .business_inf { border: 1px solid #ddd; padding: 20px; } #worknet_detail .business_inf h2 { font-size: 22px; font-weight: bold; color: #00909e; } #worknet_detail .business_inf .business_inf_wrap { margin-top: 20px; overflow: hidden; font-size: 0; } #worknet_detail .business_inf .business_inf_wrap:after { display: block; content: ""; clear: both; } #worknet_detail .business_inf .business_inf_wrap > dl { font-size: 16px; float: left; vertical-align: top; width: 50%; margin-bottom: 10px; } #worknet_detail .business_inf .business_inf_wrap > dl:after { display: block; content: ""; clear: both; } #worknet_detail .business_inf .business_inf_wrap > dl > dt { float: left; width: 150px; font-weight: bold; } #worknet_detail .business_inf .business_inf_wrap > dl > dd { float: left; width: calc(100% - 150px); } /* 재난 신고 */ #dis_contents { width: 100%; padding-top: 30px; padding-bottom: 25px; } #dis_contents .box { padding-bottom: 30px; } #dis_contents .box:after { content: ""; display: block; clear: both; } #dis_contents .box .square { float: left; width: 220px; height: 240px; border: 1px solid #ddd; margin-right: 30px; margin-bottom: 30px; border-radius: 20px; text-align: center; overflow: hidden; } #dis_contents .box .square:nth-child(4) { margin-right: 0px; } #dis_contents .box .square .d_top { height: 164px; } #dis_contents .box .square .d_top > img { display: inline-block; margin-top: 33px; } #dis_contents .box .square .d_top > p { color: #00909e; font-size: 20px; font-weight: bold; margin-top: 27px; } #dis_contents .box .square .d_bottom { background-color: #f9f9f9; height: 75px; padding-top: 15px; } #dis_contents .box .square .d_bottom > span { font-size: 28px; font-weight: bold; } /* 선수소개 */ #box_1 { width: 100%; padding: 30px; border: 1px solid #ddd; } #box_1:after { content: ""; display: block; clear: both; } #box_1 > .box_1_left { float: left; width: 50%; } #box_1 > .box_1_right { float: left; width: 50%; padding-top: 40px; } #box_1 > .box_1_left > img { display: inline-block; max-width: 130px; width: 100%; } #box_1 > .box_1_left > ul { display: inline-block; padding-left: 20px; } #box_1 > .box_1_left > ul > li > b { display: block; font-weight: bold; font-size: 22px; margin-bottom: 10px; } #box_1 > .box_1_left > ul > li > ul { line-height: 1.8; } #box_1 > .box_1_right .career_1 { font-size: 0; } #box_1 > .box_1_right .career_2 { font-size: 16px; line-height: 1.8; } #box_1 > .box_1_right .career_2 dt { display: inline-block; width: 73px; vertical-align: top; } #box_1 > .box_1_right .career_2 dd { display: inline-block; width: calc(100% - 80px); vertical-align: top; } #con_b { font-size: 0; margin: -10px; } #con_b > li { display: inline-block; width: 50%; padding: 10px; } #box_2 { padding: 30px; border: 1px solid #ddd; overflow: hidden; } #box_2:nth-child(2n) { margin-right: 0px; } #box_2 > img { width: 130px; height: 173px; float: left; } #box_2 > ul { padding-left: 160px; font-size: 16px; line-height: 1.8; } #box_2 > ul > li > b { display: block; font-weight: bold; font-size: 22px; } /* 도시농업이란 */ #con_farm { width: 100%; overflow: hidden; } #con_farm .con_l .img_box { width: 100%; } #con_farm .con_l .img_box > img { width: 100%; } #con_farm .con_r > h3 { margin: 20px 0 30px 0; } #con_farm .con_r > p { font-size: 16px; line-height: 30px; } #con_farm .con_r > .f_icon_box { overflow: hidden; } #con_farm .con_r > .f_icon_box > .f_icon { float: left; width: 16.6667%; padding-top: 40px; text-align: center; } #con_farm .con_r > .f_icon_box > .f_icon > img { height: 63px; } #con_farm .con_r > .f_icon_box > .f_icon > span { display: block; padding-top: 18px; font-size: 16px; } /* 도시농업지원센터 교욱사업 */ .fedu { width: 100%; overflow: hidden; } .fedu .fedu_conl { width: 50%; float: left; } .fedu .fedu_conl > img { margin-bottom: 20px; } .fedu .fedu_conl > p { line-height: 25px; } .fedu .fedu_conr { width: 50%; float: left; padding-left: 40px; padding-top: 20px; } .fedu .fedu_conr .icon_box { width: 100%; font-size: 0; margin-top: 15px; } .fedu .fedu_conr .icon_box .icon_wrap { display: inline-block; width: 33.3%; padding: 15px 0; text-align: center; } .fedu .fedu_conr .icon_box .icon_wrap > p { font-size: 16px; margin-top: 20px; } .fedu .fedu_conr .icon_box .icon_wrap > img { width: 40%; font-size: 15px; } /* 텃밭지원사업 */ .support { width: 100%; overflow: hidden; } .support > img { width: 50%; float: left; } .support > .support_box { width: 50%; float: left; } .support > .support_box .support_wrap { border: 1px solid #ddd; margin: 20px; margin-right: 0; padding: 20px; } .support > .support_box .support_wrap.together { padding: 16px; } .support > .support_box .support_wrap:first-child { margin-top: 0; } .support > .support_box .support_wrap > h2 { display: inline-block; height: 35px; line-height: 35px; font-size: 20px; font-weight: bold; margin-bottom: 20px; margin-left: 10px; } .support > .support_box .support_wrap > img { position: relative; height: 32px; top: 3px; } /* 도시농업지원센터 정보제공사업 */ .cityf_news { border: 1px solid #ddd; padding: 30px; margin-bottom: 30px; } .cityf_news > img { height: 35px; margin-right: 10px; margin-bottom: 15px; } .cityf_news > h2 { display: inline-block; font-size: 20px; height: 35px; line-height: 35px; } .cityf_news > p { margin-bottom: 10px; } .cityf_promote { border: 1px solid #ddd; padding: 30px; margin-bottom: 30px; } .cityf_promote > img { height: 35px; margin-right: 10px; margin-bottom: 15px; } .cityf_promote > h2 { display: inline-block; font-size: 20px; height: 35px; line-height: 35px; } .cityf_promote > p { margin-bottom: 10px; } /* 교육 */ .f_edu_main { width: 100%; overflow: hidden; } .f_edu_main > p { text-align: center; color: #00909e; font-size: 22px; font-weight: bold; } .f_edu_main > p > span { display: block; color: #000; font-weight: normal; } .f_edu_iconbox { width: 100%; height: 380px; background-color: #f9f9f9; border: 1px solid #ddd; overflow: hidden; margin-top: 40px; padding-bottom: 30px; } .edu_icon { float: left; text-align: center; width: 19.9%; height: 50%; } .edu_icon > img { height: 104px; padding-top: 35px; } .edu_icon > p { font-size: 18px; line-height: 30px; padding-top: 15px; } .edu_btn { margin-top: 28px; text-align: center; } /* 사이버 교육 안내 */ .cyber_edu.guide-s1 { margin: 0; display: inherit; padding: 10px 40px; } .cyber_edu.guide-s1:before { float: none; margin: 0 auto; margin-bottom: 50px; } .cyber_edu.guide-s1 .guide-txt { padding: 0; } .cyber_edu1.guide-s1:before { float: none; width: 0; height: 0; background: none; } .cyber_edu1.guide-s1 { padding: 10px 40px; } .cyber_edu1.guide-s1 .guide-txt { padding: 0; padding-bottom: 50px; } .cyber_edu.guide-s1 .guide-txt { padding: 0; padding-bottom: 50px; } .cyber_edu1.guide-s1 .guide-desc { margin-bottom: 20px; } .cyber_edu.guide-s1 .guide-desc { margin-bottom: 20px; } /* 특색(음식)거리 */ .box_r { position: relative; } .discount { float: right; text-align: center; position: absolute; top: 15px; right: 30px; } .discount > p { font-size: 16px; font-weight: bold; } .dis_box { width: 177px; height: 45px; border: 1px solid #00909e; font-size: 20px; padding-top: 6px; font-weight: bold; } .dis_box > p { width: 64px; height: 45px; display: inline-block; color: #00909e; } .dis_box > span { background-color: #00909e; color: #fff; padding: 9px; margin-right: -8px; } /* 식품진흥기금융자사업 */ .application { width: 100%; overflow: hidden; } .application_box_1 { width: 100%; padding-left: 27px; } .ap_box1 { display: table; width: 100%; min-height: 116px; border: solid 1px #00909e; } .ap_box1_1 { display: table-cell; width: 35%; height: 100%; background-color: #f3f9fd; vertical-align: middle; } .ap_box1_1 > p { text-align: center; font-weight: bold; font-size: 20px; } .ap_box1_2 { display: table-cell; width: 65%; height: 100%; vertical-align: middle; } .ap_box1_2 > ul { padding: 21px; } .ap_box2 { display: table; width: 100%; min-height: 116px; border: solid 1px #bbb; } .ap_box2_1 { display: table-cell; width: 35%; height: 100%; background-color: #f9f9f9; vertical-align: middle; } .ap_box2_1 > p { text-align: center; font-weight: bold; font-size: 20px; } .ap_box2_2 { display: table-cell; width: 65%; height: 100%; vertical-align: middle; padding: 30px 20px; } .ap { text-align: center; padding: 12px; } /* 그린파킹사업 */ #park_img_box { width: 100%; height: auto; overflow: hidden; } #park_img_box #park_box_l { float: left; width: 50%; padding-right: 4.69%; } #park_img_box #park_box_l .before { width: 100%; height: 45px; margin-bottom: 10px; background-color: #00909e; } #park_img_box #park_box_l .before > p { text-align: center; font-size: 18px; font-weight: bold; color: #fff; padding-top: 10px; } #park_img_box #park_box_l > img { width: 100%; margin-bottom: 10px; } #park_img_box #park_box_r { float: right; width: 50%; padding-left: 4.69%; } #park_img_box #park_box_r .after { width: 100%; height: 45px; margin-bottom: 10px; background-color: #006670; } #park_img_box #park_box_r .after > p { text-align: center; font-size: 18px; font-weight: bold; color: #fff; padding-top: 10px; } #park_img_box #park_box_r > img { width: 100%; margin-bottom: 10px; } /* 문화콘텐츠산업지원센터 */ #center_con_box1 { width: 100%; overflow: hidden; height: 658px; margin-top: 30px; } #center_con_box1 > img { width: 30%; margin-right: 22px; margin-top: 22px; } #center_con_box2 { width: 100%; height: 300px; background-color: #f9f9f9; overflow: hidden; margin-bottom: 20px; display: flex; } #center_con_box2 .conbox_l { width: 41.53%; height: 230px; border: 1px solid #00909e; margin-left: 4.081%; margin-top: 4.081%; } #center_con_box2 .conbox_l .con_title_1 { width: 100%; height: 45px; background-color: #00909e; text-align: center; } #center_con_box2 .conbox_l .con_title_1 > p { font-size: 18px; color: #fff; font-weight: bold; padding-top: 8px; } #center_con_box2 .conbox_l .con_sub_1 { padding-top: 5%; padding-left: 5%; } #center_con_box2 .conbox_l .con_sub_1 > ul > li { display: flex; } #center_con_box2 .conbox_l .con_sub_1 > ul > li > p { width: 25px; height: 25px; background-color: #00909e; text-align: center; margin-bottom: 15px; margin-right: 10px; } #center_con_box2 .conbox_l .con_sub_1 > ul > li > p > span { color: #fff; } .con_center { width: 19px; height: 14px; margin: 165px auto; } #center_con_box2 .conbox_r { width: 41.53%; height: 230px; border: 1px solid #006670; margin-right: 4.081%; margin-top: 4.081%; } #center_con_box2 .conbox_r .con_title_2 { width: 100%; height: 45px; background-color: #006670; text-align: center; } #center_con_box2 .conbox_r .con_title_2 > p { font-size: 18px; color: #fff; font-weight: bold; padding-top: 8px; } #center_con_box2 .conbox_r .con_sub_2 { padding-top: 5%; padding-left: 5%; } #center_con_box2 .conbox_r .con_sub_2 > ul > li { display: flex; } #center_con_box2 .conbox_r .con_sub_2 > ul > li > p { width: 25px; height: 25px; background-color: #006670; text-align: center; margin-bottom: 15px; margin-right: 10px; } #center_con_box2 .conbox_r .con_sub_2 > ul > li > p > span { color: #fff; } .ol-wrap > ul > li > ol > strong { font-weight: bold; } /* 대형폐기물 배출신고 */ #top_btn { width: 100%; overflow: hidden; } #top_btn > a { float: right; } #main_con_box { width: 100%; height: 325px; overflow: hidden; margin-top: 15px; } #main_con_box > img { float: left; margin-right: 3.67%; } #main_con_box #main_con_sub_box1 { margin-top: 2.04%; } #main_con_box #main_con_sub_box1 > h2 { font-size: 18px; } #main_con_box #main_con_sub_box1 > h3 { font-size: 26px; margin-bottom: 28px; } #main_con_box #main_con_sub_box1 .sub_box1 { overflow: hidden; } #main_con_box #main_con_sub_box1 .sub_box1 .type { width: 100%; float: left; margin-right: 1.938%; } #main_con_box #main_con_sub_box1 .sub_box1 .type > div { position: relative; height: 100%; margin-bottom: 3%; } #main_con_box #main_con_sub_box1 .sub_box1 .type > div > p { text-align: center; padding-top: 10px; width: 96px; height: 46px; border: 1px solid #00909e; background-color: #f3f9fd; } #main_con_box #main_con_sub_box1 .sub_box1 .type > div > p > span { color: #00909e; } #main_con_box #main_con_sub_box1 .sub_box1 .type > div > em { position: absolute; top: 0; left: 110px; } #main_con_sub_box2 { width: 100%; height: 139px; border: 1px solid #bbb; overflow: hidden; display: flex; margin-bottom: 30px; } #main_con_sub_box2 .box2_con_r { width: 25.14%; height: 100%; background-color: #f3f9fd; text-align: center; padding-top: 36px; line-height: 28px; } #main_con_sub_box2 .box2_con_r > span { font-size: 30px; } #main_con_sub_box2 .box2_con_l { width: 74%; margin-top: 43px; } #main_con_sub_box2 .box2_con_l .qr { float: left; margin-left: 6.28%; width: 43%; } #main_con_sub_box2 .box2_con_l .qr > img { float: left; margin-right: 5%; } #main_con_sub_box2 .box2_con_l .qr > p { padding-left: 2.85%; } #main_con_sub_box2 .box2_con_l .player { float: left; margin-left: 6.28%; width: 42%; } #main_con_sub_box2 .box2_con_l .player > img { float: left; margin-right: 5%; margin-bottom: 5px; } .ol-s1.trash-ol .item > strong { min-height: 90px; } /* 인사말(청장님) */ #intro:before { content: ""; display: block; width: 100%; padding-top: 30.61%; background: url(../../images/sub/sq=464/img1.jpg) no-repeat center; background-size: cover; } #intro:after { content: ""; display: block; clear: both; } #intro .intro-title { font-size: 28px; line-height: 1.3; padding-top: 40px; padding-bottom: 60px; } #intro .intro-sub-title { display: block; font-size: 22px; padding: 40px 0; } #intro .intro-desc { margin-bottom: 25px; } #intro .intro-sign .sign { margin-top: 20px; } #intro .left { float: left; width: 35.71%; background: #fff; margin-top: -50px; padding-right: 15px; } #intro .right { float: left; width: 64.29%; padding: 0 13px; } /* 도시농업공장-옥상텃밭-자투리텃밭 */ .cf_img { position: relative; width: 100%; } .cf_img > img { width: 50%; margin-bottom: 40px; } .cf_img .cf { position: absolute; top: 62px; left: 44.89%; width: 55.10%; height: 260px; padding-right: 20px; background-color: #00909e; background-image: url(../../images/sub/sq=466/box_line.png); background-repeat: no-repeat; background-position: left 17px top 0 } .cf_img .cf > h2 { color: #fff; font-size: 24px; font-weight: bold; margin-top: 13.923%; margin-left: 9.27%; } .cf_img .cf > p { color: #fff; margin-top: 6%; margin-left: 9.27%; line-height: 30px; } /* 도시농업지원센터란 */ .cf_center { width: 100%; overflow: hidden; } .cf_center .center_bg { float: left; height: 487px; width: 55%; background: url(../../images/sub/sq=469/01.jpg) no-repeat center; background-size: cover; } .cf_center .center { float: right; width: 50%; background: url(../../images/sub/sq=469/bg.png) no-repeat top; background-size: cover; margin-top: -446px; margin-bottom: 40px; } .cf_center .center .conter_txt { margin: 50px; } .cf_center .center .conter_txt > h3 { font-size: 18px; font-weight: bold; color: #fff; margin: 17px 0; } .cf_center .center .conter_txt > p { color: #fff; } .cf_center .center .conter_txt > ul { color: #fff; list-style: inside; } .cf_center .center .conter_txt > ul > li { color: #fff; } /* 인사말(센터장) */ #intro_1:before { content: ""; display: block; width: 100%; padding-top: 30.61%; background: url(../../images/sub/sq=470/img.jpg) no-repeat center; background-size: cover; } #intro_1:after { content: ""; display: block; clear: both; } #intro_1 .intro-title { font-size: 28px; line-height: 1.3; padding-top: 40px; padding-bottom: 60px; } #intro_1 .intro-sub-title { display: block; font-size: 22px; padding: 40px 0; } #intro_1 .intro-desc { margin-bottom: 25px; } #intro_1 .intro-sign .sign { margin-top: 20px; } #intro_1 .left { float: left; width: 35.71%; background: #fff; margin-top: -50px; padding-right: 15px; } #intro_1 .right { float: left; width: 64.29%; padding: 0 13px; } /* 분양 */ .parcel_title { margin-bottom: 27px; font-size: 22px; font-weight: bold; color: #00909e; text-align: center; } .parcel_box { width: 100%; border: 1px solid #dddddd; background-color: #f9f9f9; overflow: hidden; } .parcel_box .parcel_icon_box { width: 624px; font-size: 0; margin: 10px auto; } .parcel_box .parcel_icon_box .parcel_icon { display: inline-block; vertical-align: middle; width: 33.3%; text-align: center; margin: 35px 0; } .parcel_box .parcel_icon_box .parcel_icon > img { height: 65px; } .parcel_box .parcel_icon_box .parcel_icon > p { font-size: 18px; padding-top: 20px; } .parcel_btn { text-align: center; margin-top: 30px; } /* 목공예거리 */ .wood_b1 { width: 100%; border: 1px solid #ddd; margin-bottom: 22px; display: inline-flex; overflow: hidden; } .wood_b1 > .wood_img_box { width: 50%; } .wood_b1 > .wood_txt { width: 50%; padding: 30px; margin: auto; } .wood_b1 > .wood_txt > h3 { font-size: 18px; font-weight: bold; margin-bottom: 20px; } .wood_b1 > .wood_txt > p { line-height: 28px; } .wood_b2 { width: 100%; margin-bottom: 20px; font-size: 0; } .wood_b2 > .wood_b2_1 { width: 100%; display: inline-flex; } .wood_b2 > .wood_b2_1 > img { width: 25%; } /* 목공예 갤러리 상세 */ .crafts.board-view-s2 { border-top: none; border-bottom: 1px solid #ddd; } .crafts p { padding-bottom: 20px; } /* 목공예-센터소개 */ .branch-banner-wrap { position: relative; margin-bottom: 88px; } .branch-banner { position: relative; cursor: grab; } .branch-banner-box { position: absolute; max-width: 640px; width: 100%; padding: 28px 32px; background: #00909e; right: 0; bottom: -40px; font-size: 17px; color: #FFF; z-index: 10; } .branch-banner-box:after { content: ""; display: block; clear: both; } .branch-banner-box .banner-box-title { float: left; width: 70%; } .branch-banner-box .banner-box-option { float: left; width: 30%; text-align: right; } .branch-banner-box .banner-box-option .banner-prev { width: 29px; height: 15px; display: inline-block; background: url(../../images/sub/icon_prev.png)no-repeat center; cursor: pointer; } .branch-banner-box .banner-box-option .banner-stop { width: 7px; height: 15px; display: inline-block; background: url(../../images/sub/icon_stop.png)no-repeat center; cursor: pointer; } .branch-banner-box .banner-box-option .banner-next { width: 29px; height: 15px; display: inline-block; background: url(../../images/sub/icon_next.png)no-repeat center; cursor: pointer; } #w_con { width: 100%; overflow: hidden; } .w_con_left { width: 40%; } .w_con_left > h3 { font-size: 28px; float: left; margin-right: 30px; } .W_con_right > p { margin-left: 30px; } .W_con_right > p > em > span { font-size: 20px; } .W_box { width: 100%; border: 1px solid #ddd; overflow: hidden; margin-top: 50px; } .W_box .w_img_box { float: left; width: 25%; text-align: center; border-right: 1px solid #ddd; padding: 20px; } .W_box .w_img_box:last-child { border-right: none; } .W_box .w_img_box > p { font-size: 20px; font-weight: bold; margin-top: 20px; } /* 미추홀 서브 - 비전 */ .vision_title { margin: 24px 0; text-align: center; } .vision_title > h3 { font-size: 26px; font-weight: bold; text-decoration-line: underline; margin-top: 40px; } #vision_conbox { width: 100%; margin-top: 50px; } #vision_conbox .icon_box { display: inline-block; padding-right: 40px; } #vision_conbox .icon_box .con_t { width: 100%; height: 87px; margin-bottom: 27px; border-bottom: 1px solid #ddd; overflow: hidden; padding-bottom: 27px; } #vision_conbox .icon_box .con_t > img { width: 18%; float: left; margin-right: 29px; } #vision_conbox .icon_box .con_t > h5 { font-size: 24px; } #vision_conbox .con_b { margin-bottom: 75px; line-height: 40px; } #vision_conbox .con_b > ul > li > span { font-size: 20px; font-weight: bold; color: #00909e; margin-right: 20px; } /* 미추홀 서브 - 연혁 */ .history .history-list { position: relative; font-size: 0; } .history .history-list:before { content: ""; position: absolute; left: 155px; width: 1px; height: 100%; background-color: #ddd; } .history .history-list > li { margin-bottom: 10px; } .history .history-left { display: inline-block; vertical-align: top; width: 120px; margin-right: 56px; } .history .history-right { display: inline-block; vertical-align: top; width: calc(100% - 176px); } .history .year { position: relative; display: block; font-size: 20px; color: #fff; width: 100%; padding: 8px 10px; background: #00909e; text-align: center; border-radius: 100px; } .history .year:before { content: ""; position: absolute; top: 50%; right: -37px; display: block; width: 37px; height: 1px; background-color: #00909e; } .history .year:after { content: ""; position: absolute; top: 50%; right: -40px; margin-top: -4px; display: block; width: 9px; height: 9px; background-color: #00909e; border-radius: 100%; } .history .content { padding-top: 9px; } .history .content > * { display: inline-block; vertical-align: top; } .history .content dt { width: 110px; font-size: 17px; color: #222; font-weight: bold; } .history .content dd { width: calc(100% - 110px); font-size: 16px; color: #333; padding-top: 1px; } .history .content li { margin-bottom: 5px; } .history2 .history-list { position: relative; } .history2 .history-list:before { content:""; display: block; position: absolute; left: 4.5px; top: 10px; bottom: 10px; background: #ddd; width: 1px; } .history2 .history-list > li { position: relative; margin-bottom: 10px; padding-left: 25px; } .history2 .history-list > li:last-child { margin-bottom: 0; } .history2 .history-list > li:before { content:""; display: block; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius:100%; background-color: #00909e; } .history2 .content { display: flex; flex-wrap:wrap; } .history2 .content dt { flex: 0 0 auto; width: 120px; margin-right: 15px; font-size: 17px; color: #222; font-weight: bold; } .history2 .content dd { width: calc(100% - 135px); } /* 미추홀 서브 - 구상징물 */ .simbol_1 { width: 100%; } .s_box { margin-bottom: 30px; } .simbol_1 .s_box > img { width: 48.5%; margin-right: 2%; } .simbol_1 .s_box > img:last-child { margin-right: 0; } .simbol_btn { margin-top: 30px; text-align: center; } .simbol_btn > a { margin: 10px; } /* 미추홀 서브 - 구민의 노래 */ .mchgusong { border: 1px solid #ddd; text-align: center; padding: 30px 0; } .mchgusong_audio { text-align: center; margin: 40px 0; } /* 미추홀 서브 - 미추홀구민헌장 */ #charter_t { width: 100%; overflow: hidden; } #charter_t .con_l { float: left; width: 39.79%; height: 270px; text-align: center; background: url(../../images/sub/sq=12/bg1.png) no-repeat left; } #charter_t .con_l > img { width: 67px; margin-top: 53px; margin-bottom: 35px; } #charter_t .con_l > h2 { font-size: 27px; font-weight: bold; color: #fff; } #charter_t .con_l > p { font-size: 17px; color: #8dc1c8; margin-top: 15px; } #charter_t .con_r { height: 250px; border: 2px solid #dedede; margin-top: 20px; padding-left: 47.95%; padding-top: 45px; } #charter_t .con_r > p { margin: 15px 0; margin-right: 120px; } #charter_b { background-color: #f9f9f9; padding-top: 22px; padding: 39px 84px; } .charter_b_con { padding: 18px 24px; display: flex; border-bottom: 1px dashed #bbbbbb; } .charter_b_con:nth-child(5) { border: 0; } .charter_b_con > img { width: 31px; height: 48px; margin-right: 17px; } .charter_b_con > p { line-height: 48px; } #charter_b > p { margin-top: 35px; text-align: center; } /* 미추홀 서브 - 조직도 */ #organizational_main .organizational_box { width: 100%; } #organizational_main .organizational_box .tit_circle1 { position: relative; width: 222px; height: 57px; margin: 0 auto 80px; font-size: 22px; font-weight: bold; color: #fff; line-height: 57px; text-align: center; background: #006670; } #organizational_main .organizational_box .tit_circle1:before { position: absolute; top: 57px; left: 50%; width: 1px; height: 80px; margin-left: -0.5px; background: #888; content: ""; } #organizational_main .organizational_box .tit_circle2 { position: relative; width: 222px; height: 57px; margin: 0 auto; font-size: 22px; font-weight: bold; color: #fff; line-height: 57px; text-align: center; background: #00909e; } #organizational_main .organizational_box .tit_circle2:before { position: absolute; top: 57px; left: 50%; width: 1px; height: 40px; margin-left: -0.5px; background: #888; content: ""; } #organizational_main .organizational_box .tit_square { background: #fff; position: relative; float: right; margin-right: 125px; width: 222px; height: 55px; line-height: 55px; text-align: center; color: #006670; font-weight: bold; border: 2px solid #006670; margin-top: -67.5px; } #organizational_main .organizational_box .tit_square:after { position: absolute; top: 27.5px; right: 220px; width: 144px; height: 1px; background: #888; content: ""; } #organizational_main .org_list { position: relative; display: flex; flex-wrap: wrap; width: 100%; font-size: 0; z-index: 2; } #organizational_main .org_list:after { position: absolute; top: 40px; left: 12.5%; right: 12.5%; height: 1px; background: #888; content: ""; z-index: -1; } #organizational_main .org_list.org_list2:after { display: none; } #organizational_main .org_list .shorts { position: relative; display: flex; flex-direction: column; width: 25%; padding: 0 15px; font-size: 16px; vertical-align: top; } #organizational_main .org_list .shorts > dd:first-child { margin-top: 135px; } #organizational_main .org_list > dl:after { position: absolute; top: 40px; left: 50%; width: 1px; height: 105px; margin-left: -0.5px; background: #888; content: ""; z-index: -1; } #organizational_main .org_list.org_list2 > dl:after { display: none; } #organizational_main .org_list .shorts > dt { background-color: #fff; border: 2px solid #00909e; color: #00909e; font-weight: bold; text-align: center; height: 55px; line-height: 55px; margin-top: 80px; z-index: 2; } #organizational_main .org_list .shorts > dt.none{ visibility:hidden; } #organizational_main .org_list.org_list2 .shorts > dt { margin-top: 30px; } #organizational_main .org_list .shorts > dd { border: 1px solid #ddd; background-color: #fff; flex: 1 1 auto; padding: 20px 10px; } #organizational_main .org_list .shorts > dd .sub-wrap.active .sub-1 { display: block; } #organizational_main .org_list .shorts > dd .sub-wrap > dt { line-height: 50px; font-size: 17px; padding-left: 20px; font-weight: bold; } #organizational_main .org_list .shorts > dd .sub-wrap > dd { display: block; line-height: 30px; font-size: 17px; padding-left: 20px; } #organizational_main .org_list .shorts > dd .sub-wrap .sub-1 { display: none; } #organizational_main .org_list .shorts > dd .sub-wrap .sub-1 > li { height: 45px; line-height: 40px; background-color: #f7f7f7; padding-left: 20px; } #organizational_main .org_list3 { display: flex; flex-wrap: wrap; margin: 0 -15px; } #organizational_main .org_list3 > li { width: 25%; display: flex; padding: 0 15px; margin-bottom: 20px; } #organizational_main .org_list3 > li > a { display: block; flex: 1 1 auto; text-align: center; font-size: 16px; color: #000; padding: 16px 10px; border: 1px solid #ddd;} /* 미추홀 서브 - 조직도(기획예산실/직원업무/게시물) */ .org_sub1 { overflow: hidden; width: 100%; padding-bottom: 40px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .org_sub1 > li { width: 100%; } .org_sub1 > li > ul { display: flex; margin-top: 10px; } .org_sub1 > li > ul > li { display: flex; } .org_sub1 > li > ul > li > p { margin-right: 20px; } .org_sub1 > .org_sub2 { padding: 10px 0; } .org_sub1 > .org_sub2 > li > ul { display: flex; width: 100%; padding: 5px 0; margin-left: 10px; } .org_sub1 > .org_sub2 > li > ul > li { width: 33.3%; list-style: disc; } #org_sub_nav { border-top: 1px solid #ddd; padding-top: 20px; } #org_sub_nav > div > ul > li > a { position: relative; font-size: 20px; font-weight: bold; padding-right: 20px; } #org_sub_nav > div > ul > li > a:before { content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -3.5px; width: 12px; height: 7px; background: url(../../images/common/icon_a_up1.png) no-repeat center / contain; } #org_sub_nav > div > ul > li > a.active:before { background-image: url(../../images/common/icon_a_down3.png); } #org_sub_nav > div > ul > li > ul { margin-top: 10px; } #org_sub_nav div > ul > li > a > label.toggle_menu { background-image: url(../../images/common/icon_a_up1.png); background-repeat: no-repeat; position: absolute; width: 50px; text-indent: -6000px; overflow: hidden; margin-top: 10px; margin-left: 10px } input#toggle_menu:checked + #org_sub_nav label.toggle_menu { background: url(../../images/common/icon_a_down3.png); background-repeat: no-repeat; position: absolute; width: 50px; text-indent: -6000px; overflow: hidden; margin-top: 10px; overflow: hidden; } /* 부서별 안내 */ #organ .dept-box-s1 { width: 100%; border: 1px solid #ddd; padding: 29px 30px; margin-bottom: 50px; } #organ .dept-box-s1 h3 { margin-top: 0; margin-bottom: 30px; } #organ .dept-box-s1 .dept-info-s1 { line-height: 1; padding-bottom: 20px; } #organ .dept-box-s1 .dept-info-s1:after { content: ""; display: block; clear: both; } #organ .dept-box-s1 .dept-info-s1 span { display: block; float: left; margin-top: 15px; margin-right: 30px; } #organ .dept-box-s1 .dept-info-s1 dl { display: inline-block; margin-top: 12px; line-height: 1.6; vertical-align: top; } #organ .dept-box-s1 .dept-info-s1 dl:nth-of-type(1) { margin-right: 80px; } #organ .dept-box-s1 .dept-info-s1 dl > dt { display: inline-block; margin-right: 20px; vertical-align: top; } #organ .dept-box-s1 .dept-info-s1 dl > dt > strong { font-weight: bold; } #organ .dept-box-s1 .dept-info-s1 dl > dd { display: inline-block; } #organ .dept-box-s1 .task-info-s1 h3 { font-weight: bold; font-size: 20px; margin-bottom: 21px; } #organ .dept-box-s1 .task-info-s1:after { content: ""; display: block; clear: both; } #organ .dept-box-s1 .task-info-s1 .task-ul-s1 > li { float: left; width: 33.3333% } #organ .dept-table-wrap { margin-top: 20px; } /* 미추홀 서브 - 역대구청장 */ .generation { width: 100%; margin-bottom: 20px; } .generation:after { content: ""; display: block; clear: both; } .generations_box { width: 25%; height: 320px; float: left; padding: 0 10px; margin-bottom: 20px; } .generations_box .background { position: relative; text-align: center; border: 1px solid #ddd; padding-bottom: 15px; } .generations_box .background:before { content: ""; display: block; position: absolute; height: 129px; background-color: #f9f9f9; z-index: -1; width: 100%; } .generations_box .background > img { margin-top: 35px; margin-bottom: 20px; } .generations_box .background > div > p { margin: 0 auto; padding: 0 17px; width: max-content; height: 30px; border: 1px solid #0693a0; border-radius: 30px; color: #0693a0; line-height: 30px; } .generations_box .background > div > h3 { margin: 13px 0; font-size: 26px; font-weight: bold; } .generations_box .background > div > span { font-size: 15px; color: #666666; } .generations_box1 { width: 23.5%; height: 320px; border: 1px solid #ddd; margin-right: 20px; } .generations_box1:last-child { margin-right: 0px; } .generations_box1 .background { height: 129px; background-color: #f9f9f9; text-align: center; } .generations_box1 .background > img { margin-top: 35px; margin-bottom: 20px; } .generations_box1 .background > div > p { margin: 0 auto; padding: 0 17px; width: max-content; height: 30px; border: 1px solid #0693a0; border-radius: 30px; color: #0693a0; line-height: 30px; } .generations_box1 .background > div > h3 { margin: 13px 0; font-size: 26px; font-weight: bold; } .generations_box1 .background > div > span { font-size: 15px; color: #666666; } /* 미추홀 서브 - 전시관소개 */ .documentary { display: flex; margin-bottom: 30px; } .documentary .docu_wrap { border: 1px solid #ddd; width: 31.3%; text-align: center; margin: 1.5%; } .documentary .docu_wrap:first-child { margin-left: 0; } .documentary .docu_wrap:last-child { margin-right: 0; } .documentary .docu_wrap > h3 { border: 1px solid #0693a0; background-color: #f3f9fd; padding: 20px; color: #0693a0; } .documentary .docu_wrap > div > p { padding: 20px; } .donation { display: flex; margin: 0 -1.5%; } .donation .dona_wrap { border: 1px solid #ddd; width: 50%; text-align: center; margin: 1.5%; } .donation .dona_wrap > h3 { border: 1px solid #0693a0; background-color: #f3f9fd; padding: 20px; color: #0693a0; } .donation .dona_wrap > p { padding: 20px; } .dona_ul > li { margin: 0; } .donation1 { display: table; width: 100%; background-image: url(../../images/sub/sq=25/01.jpg); background-repeat: no-repeat; height: 240px; background-size: cover; background-position: center; } .donation1 .donation_box { display: table-cell; vertical-align: middle; padding: 0 40px; } .donation1 .donation_box > p { color: #fff; font-size: 24px; } .donation1 .donation_box > .donation_box_btn { background-color: #fff; width: 230px; height: 57px; margin-top: 30px; background-image: url(../../images/common/icon_a_right4.png); background-repeat: no-repeat; background-position: right 32px center; } .donation1 .donation_box > .donation_box_btn > p { font-size: 16px; height: 57px; line-height: 57px; } .donation1 .donation_box > .donation_box_btn > p > a { display: block; padding-left: 30px; } .donation2 { display: flex; border: 1px solid #ddd; flex-wrap: wrap; } .donation2 .donation_con { border-right: 1px solid #ddd; width: 25%; text-align: center; padding: 50px 0; } .donation2 .donation_con:nth-of-type(4) { border-right: 0; } .donation2 .donation_con > h4 { margin-top: 23px; margin-bottom: 20px; font-size: 18px; font-weight: bold; } .donation2 .donation_con > p { padding: 0 10%; } .donation3 { display: flex; flex-wrap: wrap; border: 1px solid #ddd; height: 60px; margin-top: -21px; margin-bottom: 15px; } .donation3 .dona_l { width: 190px; background-color: #656e79; text-align: center; height: 60px; line-height: 60px; color: #fff; margin-left: -1px; margin-top: -1px; } .donation3 .dona_r { margin-left: 30px; height: 60px; line-height: 60px; } /* 기증신청 */ .donor_info { border-top: 1px solid #000; border-bottom: 1px solid #ccc; padding: 10px 0; margin: 20px 0; } .donor_info .donor_info_con { display: flex; } .donor_info .donor_info_con > p { width: 110px; padding-left: 20px; height: 65px; line-height: 65px; } .donor_info .donor_info_con .form-style { height: 45px; margin: 10px 20px; } .donor_info .donor_info_con .form-style1 { width: 70%; height: 45px; } .donor_info .donor_info_con .donor_select { margin: 10px 7px; } .donor_info .donor_info_con .donor_date { display: flex; margin-top: 10px; } .donor_info .donor_info_con .donor_date .datepicker { height: 45px; background-image: url(../../images/common/icon_date.png); background-repeat: no-repeat; background-position: right 20px center; } .donor_info .donor_info_con .donor_date > h3 { font-size: 16px; width: 40px; height: 40px; line-height: 40px; text-align: center; } .donor_info .donor_info_con .textarea { height: 160px; } .donor_info .donor_info_con .donor_info_con_btn input[type="file"] { overflow: hidden;position: absolute;width: 1px;height: 1px;margin: -1px;font-size: initial;clip: rect(0 0 0 0); } .donor_info .donor_info_con .donor_info_con_btn label { display: inline-block; cursor: pointer; width: 103px; height: 45px; line-height: 45px; text-align: center; color: #00909e; border: 1px solid #00909e; font-size: 16px; margin-left: 7px; margin-top: 10px; } .donor_info .donor_info_con .donor_info_con_btn input[type="file"]:focus-visible ~ label { outline: 2px dashed #000; outline-offset: 2px; } .agreement { margin: 30px 20px; } .agreement > p { margin-bottom: 10px; } .agreement .chk_agree { text-align: right; margin-top: 10px; margin-right: -15px; } .donor_personal { margin: 0 auto; overflow-y: scroll; height: 160px; padding: 20px; background: #f9f9f9; border: 1px solid #ddd; } .donor_personal::-webkit-scrollbar { width: 6px; } .donor_personal::-webkit-scrollbar-track { background-color: transparent; } .donor_personal::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #dee1e6; } .donor_personal::-webkit-scrollbar-button { width: 0; height: 0; } .donor_btn { margin: 40px 0; text-align: center; } .donor_btn > button { margin-bottom: 40px; height: 65px; width: 200px; text-align: center; font-size: 18px; background-color: #00909e; color: #fff; } /* 미추홀 서브 - 기록물검색 */ .search-s7 .search-box .search-more { width: 150px; background-color: #fff; border: 1px solid #ddd; font-size: 16px; color: #444; padding: 0 20px; padding-right: 40px; height: 45px; background-image: url(../../images/common/icon_a_down2.png); background-repeat: no-repeat; background-position: right 20px center; } .search-s7 .search-box .search-more-close { background-image: url(../../images/common/icon_a_close.png); background-repeat: no-repeat; } .search-s7 .search-box .search-form-t { width: calc(100% - 558px); } .search-s7 .search-box > fieldset { overflow: hidden; } .search-s7 .search-box > fieldset .date { float: left; background: #fff; height: 45px; width: 150px; border: 1px solid #ddd; background-image: url(../../images/common/icon_date.png); background-repeat: no-repeat; background-position: left 20px center; } .search-s7 .search-box > fieldset > h3 { float: left; height: 45px; line-height: 42px; } /* 미추홀 서브 - 온라인전시-목록 */ #online_con .board-list-s3 .list-item .list-info .list-contents > p { font-size: 16px; } /* 미추홀 서브 - 온라인전시-상세 */ * { box-sizing: border-box } .slideshow-container { max-width: 580px; position: relative; margin: auto; } .mySlides { display: none; } .sli_prev, .sli_next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px 23px; color: white; font-size: 18px; transition: 0.6s ease; background: #888; user-select: none; } .sli_next { right: -80px; } .sli_prev { left: -80px; } .sli_prev:hover, .sli_next:hover { background-color: #00909e; } .sli_text { color: #000; font-size: 16px; padding: 8px 12px; position: absolute; bottom: -50px; width: 100%; text-align: center; } .sli_fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } /*도시농업메인*/ .fmain_slider_l { overflow: hidden; } .fmain_slider_l .card2 { position: relative; float: left; width: 730px; height: 100%; border-radius: 5px; overflow: hidden; } .fmain_slider_l .card2 .main-visual > li > a { display: block; } .fmain_slider_l .card2 .main-visual > li > a:focus { border: 1px dotted #000; } .fmain_slider_l .card2 .main-visual > li > a img { width: 100%; } .fmain_slider_l .card2 .main-visual-arrow { position: absolute; right: 0; bottom: 0; background: #fff; font-size: 0; z-index: 1; } .fmain_slider_l .card2 .main-visual-arrow button { display: inline-block; vertical-align: middle; width: 35px; height: 40px; border: 0; font-size: 0; background-repeat: no-repeat; background-position: center; cursor: pointer; } .fmain_slider_l .card2 .main-visual-arrow button.main-visual-prev { background-image: url(../../images/common/icon_a_left2.png); } .fmain_slider_l .card2 .main-visual-arrow button.main-visual-next { background-image: url(../../images/common/icon_a_right4.png); } .fmain_slider_l .card2 .main-visual-arrow .control_btn.pause { background-image: url(../../images/common/icon_pause2.png); } .fmain_slider_l .card2 .main-visual-arrow .control_btn.play { background-image: url(../../images/common/icon_play2.png); } .fmain_slider_r { overflow: hidden; } .fmain_slider_r .card1 { position: relative; float: right; width: 230px; height: 100%; border-radius: 5px; overflow: hidden; } .fmain_slider_r .card1 .main-visual > li > a { display: block; } .fmain_slider_r .card1 .main-visual > li > a:focus { border: 1px dotted #000; } .fmain_slider_r .card1 .main-visual > li > a img { width: 100%; } .fmain_slider_r .card1 .main-visual-arrow { position: absolute; right: 0; bottom: 0; background: #fff; font-size: 0; z-index: 1; } .fmain_slider_r .card1 .main-visual-arrow button { display: inline-block; vertical-align: middle; width: 35px; height: 40px; border: 0; font-size: 0; background-repeat: no-repeat; background-position: center; cursor: pointer; } .fmain_slider_r .card1 .main-visual-arrow button.main-visual-prev { background-image: url(../../images/common/icon_a_left2.png); } .fmain_slider_r .card1 .main-visual-arrow button.main-visual-next { background-image: url(../../images/common/icon_a_right4.png); } .fmain_slider_r .card1 .main-visual-arrow .control_btn.pause { background-image: url(../../images/common/icon_pause2.png); } .fmain_slider_r .card1 .main-visual-arrow .control_btn.play { background-image: url(../../images/common/icon_play2.png); } .fmain_con1 { display: table; width: 100%; table-layout: fixed; padding: 40px 0; font-size: 0; } .fmain_con1 .goicon { display: table-cell; cursor: pointer; text-align: center; } .fmain_con1 .goicon > img { display: inline-block; vertical-align: middle; } .fmain_con1 .goicon > p { display: inline-block; vertical-align: middle; text-align: left; font-size: 17px; } .fmain_con2 { overflow: hidden; margin-bottom: 30px; } .fmain_con2 .fmain_con { width: 49%; float: left; margin-left: 2%; } .fmain_con2 .fmain_con:first-child { margin-left: 0; } .fmain_con2 .con_top { border: 1px solid #ddd; overflow: hidden; padding: 20px; } .fmain_con2 .con_top > h3 { float: left; font-weight: bold; } .fmain_con2 .con_top > a { float: right; } .fmain_con2 .con_top > a img { vertical-align: middle; } .fmain_con2 .con_bottom { min-height: 240px; border: 1px solid #ddd; padding: 20px; margin-top: -1px; } .fmain_con2 .con_bottom .ul-s1 { max-height: 200px; overflow-y: auto; } .fmain_con2 .con_bottom .ul-s1 > li > span { float: right; color: #b8b8b8; } .fmain_con2 .con_bottom .ul-s1 > li > a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 70%; } .fmain_con3 { margin: 0 -13px; } .fmain_con3 > ul { display: flex; width: 100%; font-size: 0; } .fmain_con3 > ul > li { width: 16.6667%; height: 50px; text-align: center; padding: 0 13px; } .fmain_con3 > ul > li > a { display: flex; width: 100%; height: 100%; border: 1px solid #ddd; align-items: center; justify-content: center; } .farm-main-visual-area1 .thumb { position: relative; width: 100%; } .farm-main-visual-area1 .thumb .thumb_img { height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; } .farm-main-visual-area1 .thumb span { font-size: 0; } .farm-main-visual-area1 .thumb a { display: block; } .farm-main-visual-area1 .thumb a:focus-visible { outline-offset: -2px; } .farm-main-visual-area2 .thumb { position: relative; width: 100%; } .farm-main-visual-area2 .thumb .thumb_img { height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; } .farm-main-visual-area2 .thumb span { font-size: 0; } .farm-main-visual-area2 .thumb a { display: block; } .farm-main-visual-area2 .thumb a:focus-visible { outline-offset: -2px; } /* 특색 음식 거리 */ #board-tabbar > input[type=radio] { display: none; } #board-tabbar .tab_con { display: none; } #board-tabbar > input:nth-of-type(1):checked ~ div:nth-of-type(2), #board-tabbar > input:nth-of-type(2):checked ~ div:nth-of-type(3), #board-tabbar > input:nth-of-type(3):checked ~ div:nth-of-type(4) { display: block; } #board-tabbar > input[type=radio]:nth-of-type(1):checked ~ .board-tab > ul > li > a > label.tab1, #board-tabbar > input[type=radio]:nth-of-type(2):checked ~ .board-tab > ul > li > a > label.tab2, #board-tabbar > input[type=radio]:nth-of-type(3):checked ~ .board-tab > ul > li > a > label.tab3 { color: #222; font-weight: bold; } /* 분야별정보 - 식품/공중위생 - 위생등급제 - 소개 */ /* 검색 */ .michu-search-form .logo_search { width: 100%; position: relative; } .michu-search-form .logo_search h1 { display: inline-block; vertical-align: top; line-height: 28px; } .michu-search-form .logo_search span { font-size: 26px; font-weight: bold; vertical-align: bottom; margin-left: 20px; margin-right: 20px; } .michu-search-form .logo_search h1 a { display: inline-block; } .michu-search-form .logo_search .searchwrap { display: inline-block; vertical-align: middle; } .michu-search-form .logo_search .searchwrap .inputwrap { width: 615px; height: 70px; border-style: solid; border-width: 3px; border-image-source: linear-gradient(to right, #8dc63f, #05c3a7); border-image-slice: 1; display: flex; justify-content: space-between; } .michu-search-form .logo_search .searchwrap .inputwrap .input1 { width: 520px; height: 100%; border: 0 none; } .michu-search-form .logo_search .searchwrap .inputwrap .btn_search { width: 83px; height: 100%; background: url(../../images/common/icon_search2.png) center center no-repeat; border: 0 none; cursor: pointer; } .michu-search-form .logo_search .searchwrap .popularsearchword { display: flex; align-items: center; margin-top: 20px; font-size: 17px; letter-spacing: -0.43px; } .michu-search-form .logo_search .searchwrap .popularsearchword dt { color: #00909e; font-weight: bold; } .michu-search-form .logo_search .searchwrap .popularsearchword dd { margin-left: 20px; color: #444444; } .michu-search-form .logo_search .searchwrap .popularsearchword dd:before { color: #67b200; content: "#"; } /* 홈 - 분야별정보 - 식품/공중위생 - 위생등급제 - 소개 */ .hygiene-list ul { display: table; width: 100%; table-layout: fixed; } .hygiene-list ul > li { display: table-cell; border: 1px solid #ddd; text-align: center; } .hygiene-list ul > li .img-con { padding: 20px; } .hygiene-list ul > li > p { font-size: 17px; padding: 15px; background: #f5f5f5; border-top: 1px solid #ddd; } /* 열린행정 > 데이터로보는미추홀구 > 주차장현황 */ #warp_btn .control { text-align: right; margin-top: 20px; } #warp_btn .control:after { content: ""; display: block; clear: both; } /* #warp_btn .control .control-left { float: left; width: 80%; } #warp_btn .control .control-right { float: right; width: 20%; } */ #warp_btn .control .control-left, #warp_btn .control .control-right { display: inline-block; vertical-align: middle; } #warp_btn .control .control-left { width: 79%; } #warp_btn .control .control-right { width: 19%; } #warp_btn .control .control-right a { display: inline-block; width: 35px; height: 35px; background-color: #333; vertical-align: middle; text-indent: 100%; overflow: hidden; white-space: nowrap; border-radius: 5px; background-repeat: no-repeat; background-position: center; } #warp_btn .control .control-right a + a { margin-left: 5px; } #warp_btn .control .play { background-image: url(/main/images/sub/visual/play.png); } #warp_btn .control .pause { background-image: url(/main/images/sub/visual/pause.png); } #warp_btn .control .close { background-image: url(/main/images/sub/visual/close2.png); } /*#warp_btn .control .chart-date { display: inline-block; font-size: 18px; color: #333; padding-left: 45px; line-height: 35px; background: url(/main/images/sub/visual/icon_day.png) no-repeat left center; }*/ #warp_btn .control .chart-date { width: 100%; text-align: left; padding-right: 13%; padding-left: 13%; padding-top: 10px; padding-bottom: 10px; } #warp_btn .control .chart-date .chart-date-value { font-size: 13px; display: inline-block; width: 49%; } #warp_btn .control .chart-date .chart-date-min-value { text-align: left; margin-left: -10px; } #warp_btn .control .chart-date .chart-date-max-value { text-align: right; margin-left: 13px; } #warp_btn .control .chart-date #chart-date-slider.ui-widget.ui-widget-content { border: 1px solid #2db77b; background-color: #2db77b; } #warp_btn .control .chart-date #chart-date-slider.ui-widget.ui-widget-content span { border: 1px solid #4269b0; } /* 열린행정 > 데이터로보는미추홀구 > 공약현황 */ .popup-visual-ward { position: absolute; z-index: 1; width: 700px; top: 100px; left: 125px; } .popup-visual-ward .popup-box { padding: 0; } .popup-visual-ward .popup-header { padding: 20px 20px 35px 20px; } .popup-visual-ward .popup-header .popup-title { font-size: 24px; font-weight: bold; } .popup-visual-ward .popup-content .content-area-1 { padding: 0px 20px 40px 20px; } .popup-visual-ward .popup-content .content-area-1 dl > * { display: inline-block; } .popup-visual-ward .popup-content .content-area-1 dl dt { width: 79%; font-size: 20px; } .popup-visual-ward .popup-content .content-area-1 dl dd { width: 19%; font-size: 36px; font-weight: bold; text-align: center; vertical-align: top; } .popup-visual-ward .popup-content .content-area-1 dl dd span { color: #0190a0; } .popup-visual-ward .popup-content .content-area-1 .progress { margin-top: 60px; width: 100%; height: 33px; background: url('/main/images/main/visual/arrow_bg.png') no-repeat; background-size: 640px 33px; } .popup-visual-ward .popup-content .content-area-1 .progress .percent { width: 61%; height: 34px; background: url('/main/images/main/visual/arrow_color.png') no-repeat; background-size: 640px 33px; } .popup-visual-ward .popup-content .content-area-1 .progress .percent:before { content: ''; display: block; margin-top: -54px; float: right; width: 60px; height: 62px; background: url('/main/images/main/visual/icon_marker.png'); } .popup-visual-ward .popup-content .content-area-1 .progress .percent.none-marker:before { display: none; } .popup-visual-ward .popup-content .content-area-2 { background-color: #f9f9f9; max-height: 457px; overflow-y: auto; } .popup-visual-ward .popup-content .content-area-2 ul > li:after { content: ''; display: block; width: 100%; border: 1px solid #ddd; } .popup-visual-ward .popup-content .content-area-2 ul > li dl { padding: 30px 20px; font-size: 17px; } .popup-visual-ward .popup-content .content-area-2 ul > li dl > * { display: inline-block; } .popup-visual-ward .popup-content .content-area-2 ul > li dl dt { width: 84%; font-weight: 500; } .popup-visual-ward .popup-content .content-area-2 ul > li dl dd { width: 14%; text-align: center; font-weight: bold; color: #00929c; } /* 부서별 업무/게시판 검색바 */ .search-s2 .search-box select.michu_select { width: 140px; } .search-s2 .search-box select.michu_select.michu_select1 { width: 180px; } .search-s2 .search-box select.michu_select.michu_select2 { width: 200px; } .search-s2 .search-box .search-form.michu_input { width: calc(100% - 650px); border: 1px solid #ddd; } .btn-s2.michu_gobtn { height: 45px; margin-top: 5px; margin-bottom: 10px; } .btn-s2.michu_gobtn .michu_gotxt { line-height: 9px; } .btn-s2 .michu_goicon.icon { bottom: 12px; right: 14px; } .tl-auto { table-layout: auto; } .p-s1 { margin: 15px 0; } /* 조직운영 핵심지표 */ .pointer-list:after { content: ""; display: block; clear: both; } .pointer-list .pointer-table { float: left; width: calc(50% - 20px); margin-right: 20px; } .pointer-list .pointer-table table { min-width: auto; } .pointer-list .pointer-chart { float: left; width: 50%; } .pointer-list .pointer-chart .chart { height: 400px; } /* 누구인가 ? */ .who-list > li { border: 1px solid #ddd; margin-bottom: 20px; padding: 29px; } .who-list > li:last-child { margin-bottom: 0; } .who-list > li:after { content: ""; display: block; clear: both; } .who-list .thumb { float: left; width: 130px; } .who-list .thumb .thumb-img { height: 0; padding-bottom: 130.77%; background-color: #e4e4e4; background-repeat: no-repeat; background-position: center; background-size: cover; } .who-list .thumb .thumb-img img { display: none; } .who-list .info { float: left; margin-left: 25px; width: calc(100% - 155px); font-size: 0; } .who-list .info .name { display: block; font-weight: bold; font-size: 22px; color: #222; margin-bottom: 15px; } .who-list .info .info-item { display: inline-block; width: 50%; vertical-align: top; } .who-list .info .info-item li { font-size: 16px; color: #222; margin-bottom: 5px; } .who-list .info .info-item li:last-child { margin-bottom: 0; } /* 통계연보 */ .statistics-field-list > li { margin-bottom: 20px; } .statistics-field-list > li:last-child { margin-bottom: 0; } .statistics-field-list .item { display: table; width: 100%; border: 1px solid #ddd; padding: 0 50px; border-spacing: 0; table-layout: fixed; } .statistics-field-list .item > * { display: table-cell; vertical-align: middle; text-align: left; padding: 15px; height: 110px; } .statistics-field-list .item .item-title { font-weight: bold; font-size: 20px; color: #333; width: 30%; word-break: keep-all; } .statistics-field-list .item .item-desc { font-size: 16px; color: #333; word-break: keep-all; } /* 주거지분석 통계서비스 */ .guide-step-list { margin: 0 -10px; margin-top: 30px; font-size: 0; counter-reset: step; } .guide-step-list > li { display: inline-block; width: 50%; vertical-align: top; padding: 0 10px; margin-bottom: 30px; } .guide-step-list .item .img-wrap { border: 1px solid #ddd; padding: 0 20px; height: 180px; line-height: 180px; text-align: center; } .guide-step-list .item .img-wrap img { vertical-align: middle; } .guide-step-list .item .title { position: relative; display: block; font-size: 18px; font-weight: bold; color: #00909e; margin: 20px 0 15px 0; padding-left: 45px; } .guide-step-list .item .title:before { content: counter(step); position: absolute; width: 30px; height: 30px; line-height: 30px; background-color: #00909e; text-align: center; color: #fff; font-weight: bold; font-size: 16px; counter-increment: step; left: 0; top: 0; } .guide-step-list .item .desc { font-size: 16px; color: #222; } /* 주민참여예산제운영 흐름도 */ .flow-chart .flow-chart-list { max-width: 490px; } .flow-chart .flow-chart-list .item { padding-top: 20px; } .flow-chart .flow-chart-list .item .content { position: relative; padding: 20px 15px 25px 70px; background-repeat: no-repeat; background-position: left top; } .flow-chart .flow-chart-list .item .content:before { content: ""; position: absolute; width: 10px; height: 90%; left: 22px; bottom: 0; z-index: -1; display: block; background: url(../../images/sub/flow_chart/arrow.png) no-repeat center bottom; } .flow-chart .flow-chart-list > li.list1 .item .content { background-image: url(../../images/sub/flow_chart/icon1.png); } .flow-chart .flow-chart-list > li.list2 .item .content { background-image: url(../../images/sub/flow_chart/icon2.png); } .flow-chart .flow-chart-list > li.list3 .item .content { background-image: url(../../images/sub/flow_chart/icon3.png); } .flow-chart .flow-chart-list .item .content .title { display: block; font-weight: bold; font-size: 18px; color: #222; margin-bottom: 10px; } .flow-chart .flow-chart-list .item .content ul > li { position: relative; font-size: 16px; color: #333; padding-left: 12px; word-break: keep-all; } .flow-chart .flow-chart-list .item .content ul > li:before { content: "-"; position: absolute; left: 0; top: 0; } .flow-chart .flow-chart-list .item .desc { background-color: #00909e; text-align: center; font-size: 16px; color: #fff; padding: 15px; border-radius: 100px; } /* 고충민원 처리절차 */ .flow-chart2 .flow-chart-list { counter-reset: step; } .flow-chart2 .flow-chart-list > li { position: relative; margin-bottom: 40px; } .flow-chart2 .flow-chart-list > li:last-child { margin-bottom: 0; } .flow-chart2 .flow-chart-list > li:after { content: ""; position: absolute; left: 50%; margin-left: -12.5px; bottom: -30px; display: block; width: 25px; height: 20px; background: url(../../images/common/icon_a_down7.png) no-repeat center; } .flow-chart2 .flow-chart-list > li:last-child:after { display: none; } .flow-chart2 .flow-chart-list .item { display: table; width: 100%; border: 1px solid #ddd; } .flow-chart2 .flow-chart-list .item .item-cell { display: table-cell; vertical-align: middle; padding: 15px 30px; height: 100px; } .flow-chart2 .flow-chart-list .item .item-cell.title-area { background-color: #f9f9f9; width: 30%; } .flow-chart2 .flow-chart-list .item .title { position: relative; display: block; font-weight: bold; font-size: 20px; color: #222; padding-left: 45px; } .flow-chart2 .flow-chart-list .item .title:before { position: absolute; left: 0; top: 2px; content: counter(step); counter-increment: step; background-color: #00909e; width: 25px; height: 25px; line-height: 25px; color: #fff; font-size: 16px; text-align: center; } .flow-chart2 .flow-chart-list .item .desc { font-size: 16px; color: #222; } .flow-chart2 .flow-chart-list .item .highlight { color: #00909e; font-weight: bold; } /* 미추홀구의 하루 */ .michu-today .michu-today-list { margin: 0 -15px; font-size: 0; } .michu-today .michu-today-list > li { display: inline-block; vertical-align: top; padding: 0 15px; width: 25%; margin: 15px 0; } .michu-today .michu-today-list .item { border: 1px solid #ddd; text-align: center; border-radius: 20px; overflow: hidden; } .michu-today .michu-today-list .item .title-wrap { min-height: 167px; padding: 20px 10px; } .michu-today .michu-today-list .item .icon { margin: 10px 0; } .michu-today .michu-today-list .item .title { display: block; font-size: 20px; font-weight: bold; color: #00909e; line-height: 1.3; margin-top: 7px; } .michu-today .michu-today-list .item .info { background-color: #f9f9f9; padding: 15px 10px 26px 10px; } .michu-today .michu-today-list .item .info > li { font-size: 16px; color: #999; } .michu-today .michu-today-list .item .info > li.value1 { font-weight: bold; font-size: 28px; color: #222; line-height: 1.3; } /* 위치와 면적 */ .michu-map { text-align: center; border: 1px solid #ddd; padding: 35px; } .michu-square-measure { width: 100%; height: 505px; border: 1px solid #ddd; margin-bottom: 10px; } /* Open API */ .open-api-list { display: flex; flex-wrap: wrap; margin: 0 -20px; } .open-api-list > li { display: flex; flex-direction: column; padding: 0 20px; width: 33.33333%; margin-bottom: 20px; } .open-api-list .item { border: 1px solid #ddd; flex: 1 1 auto; padding: 35px; } .open-api-list .item .img { display: block; width: auto; height: 60px; margin: 0 auto; margin-bottom: 25px; } .open-api-list .item .title { display: block; text-align: center; font-weight: bold; font-size: 22px; color: #222; margin-bottom: 10px; } .open-api-list .item .desc { text-align: center; word-break: keep-all; font-size: 16px; color: #444; margin-bottom: 30px; } .open-api-list .item .btn { width: 100%; margin: 0; } .open-api-list .item .btn .icon { position: absolute; top: 50%; right: 24px; margin-top: -10px; } .open-api-board > li { display: table; width: 100%; border-bottom: 1px solid #eee; } .open-api-board .item-cell { position: relative; display: table-cell; vertical-align: middle; padding: 15px 20px; } .open-api-board .item-cell.title { font-weight: bold; font-size: 16px; color: #222; width: 25%; } .open-api-board .item-cell-list { margin: 10px 0; } .open-api-board .form-style { height: 45px; vertical-align: middle; } .open-api-board textarea.form-style { height: 135px; } .open-api-board .form-style.width1 { width: 150px; } .open-api-board .form-style.width2 { width: 100px; } .open-api-board .form-guide2 { font-size: 16px; color: #444; display: inline-block; vertical-align: middle; } .open-api-board .open-api-board-table { min-width: auto; border-left: 2px solid #fff; border-right: 2px solid #fff; } .open-api-board .open-api-board-table th, .open-api-board .open-api-board-table td { border: 1px solid #ddd; vertical-align: middle; text-align: center; height: 50px; padding: 8px 10px; } .open-api-board .open-api-board-table th { background-color: #f5f5f5; } .open-api-board .del-form-btn { font-size: 0; width: 25px; height: 25px; background-color: #ddd; display: block; margin: 0 auto; background-image: url(../../images/common/icon_close2.png); background-position: center; background-repeat: no-repeat; } .open-api-board-wrap .btn-area { text-align: center; margin-top: 50px; } .open-api-board-wrap .btn-area .apply-btn { background-color: #00909e; color: #fff; } .open-api-board-wrap .add-btn-area-wrap:after { content: ""; display: block; clear: both; } .open-api-board-wrap .add-btn-area-wrap .form-guide { float: left; } .open-api-board-wrap .add-btn-area-wrap .add-btn-area { float: right; margin-top: 10px; } .open-api-terms-area { padding-top: 28px; } .open-api-terms { margin-top: 20px; background-color: #f9f9f9; border: 1px solid #ddd; padding: 25px 30px; height: 160px; overflow: auto; } /* 미추홀구알리미 서비스 */ .notification-step { border: 1px solid #ddd; text-align: center; font-size: 0; padding: 20px; } .notification-step > li { position: relative; display: inline-block; font-size: 17px; width: 100px; margin: 0 50px; vertical-align: top; } .notification-step > li:after { content: ""; position: absolute; right: -59px; top: 46px; display: block; width: 22px; height: 9px; background: url(../../images/common/icon_a_right5.png) no-repeat center; background-size: contain; } .notification-step > li:last-child:after { display: none; } .notification-step .item .icon { width: 100px; height: 100px; border-radius: 100%; overflow: hidden; background-color: #dee1e6; margin: 0 auto; margin-bottom: 15px; background-repeat: no-repeat; background-position: center; } .notification-step > li.active .item .icon { background-color: #00909e; text-indent: -5000px;} .notification-step > li.list1 .item .icon { background-image: url(../../images/sub/notify/notify_icon1.png); } .notification-step > li.list2 .item .icon { background-image: url(../../images/sub/notify/notify_icon2.png); } .notification-step > li.list3 .item .icon { background-image: url(../../images/sub/notify/notify_icon3.png); } .notification-step > li.active .item .title { font-weight: bold; } .notification-type { display: flex; flex-wrap: wrap; margin: 30px -15px; justify-content: center; } .notification-type > li { display: flex; flex-direction: column; padding: 0 15px; } .notification-type .item { flex: 1 1 auto; padding: 30px; border: 1px solid #ddd; border-radius: 15px; overflow: hidden; } .notification-type .item .title { display: block; font-weight: bold; font-size: 20px; color: #222; text-align: center; } .notification-type .item .title:before { content: ""; display: block; width: 116px; height: 85px; margin: 35px auto 50px auto; background-repeat: no-repeat; background-position: center; } .notification-type > li.list1 .item .title:before { background-image: url(../../images/sub/notify/notify_icon4.png); } .notification-type > li.list2 .item .title:before { background-image: url(../../images/sub/notify/notify_icon5.png); } .notification-type .item .btn { display: block; min-width: 220px; height: 55px; line-height: 53px; font-size: 17px; color: #222; margin-top: 20px; text-align: center; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; } .notification-comp { text-align: center; padding: 15px 0 30px 0; } .notification-comp .title { display: block; font-size: 26px; color: #222; margin-bottom: 20px; } .notification-comp .title:before { content: ""; display: block; width: 36px; height: 50px; margin: 0 auto; margin-bottom: 25px; background: url(../../images/sub/notification-comp.png) no-repeat; } .c-table-s3-wrap { margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #000; margin-left: -1px; } .c-table-s3 th, .c-table-s3 td { padding: 15px 20px; border: 1px solid #ddd; color: #222; text-align: left; vertical-align: middle; } .c-table-s3 th { background-color: #f3f9fc; font-weight: bold; font-size: 17px; } .c-table-s3 td { font-size: 16px; } /* 소통참여 - 인권센터 소개 - 소개 */ #intro3 .intro3-layout:after { content: ""; display: block; clear: both; } #intro3 .intro3-layout:before { content: ""; display: block; width: 100%; padding-top: 30.61%; background: url(../../images/sub/intro/intro.png) no-repeat center; background-size: cover; } #intro3 .intro3-layout .left { float: left; width: 35.71%; background: #fff; margin-top: -60px; padding-right: 15px; } #intro3 .intro3-layout .right { float: left; width: 64.29%; } #intro3 .intro-title { font-size: 28px; line-height: 1.3; padding-top: 45px; } #intro3 .intro-title2 { display: block; font-size: 32px; font-weight: bold; color: #222; margin-top: 7px; } #intro3 .intro-sub-title { display: block; font-size: 20px; color: #000; padding-top: 30px; } #intro3 .intro-sub-title b { font-weight: bold; } #intro3 .intro-sub-title2 { display: block; font-size: 26px; color: #000; font-weight: bold; margin-bottom: 23px; } #intro3 .intro-desc { font-size: 16px; color: #000; } #intro3 .intro3-list1 { font-size: 0; margin: 0 -10px; margin-top: 38px; margin-bottom: 42px; } #intro3 .intro3-list1 > li { display: inline-block; vertical-align: top; width: 50%; padding: 0 10px; } #intro3 .intro3-list1 .item { position: relative; } #intro3 .intro3-list1 .item .title { position: absolute; left: 0; top: -30px; display: inline-block; vertical-align: top; background-color: #00909e; color: #fff; font-size: 18px; padding: 14px 28px; min-width: 210px; z-index: 2; } #intro3 .intro3-list1 .item .content { font-size: 16px; background-color: #f3f9fd; border: 1px solid #ddd; margin-top: 30px; padding: 40px 25px; } #intro3 .intro3-list2 { font-size: 0; margin: 0 -12.5px; margin-bottom: 18px; display: flex; flex-wrap: wrap; } #intro3 .intro3-list2 > li { display: flex; width: 33.33333%; padding: 0 12.5px; margin-bottom: 24px; flex-direction: column; } #intro3 .intro3-list2 .item { border: 1px solid #ddd; text-align: center; flex: 1 1 auto; padding: 40px 15px; } #intro3 .intro3-list2 .item .img { margin-bottom: 23px; } #intro3 .intro3-list2 .item .desc { font-size: 16px; color: #333; } #intro3 .intro3-list3 { font-size: 0; } #intro3 .intro3-list3 .left { position: relative; display: inline-block; vertical-align: top; width: 470px; margin-right: 40px; } #intro3 .intro3-list3 .right { display: inline-block; vertical-align: top; width: calc(100% - 510px); } #intro3 .intro3-list3 .right .intro3-list3-desc { font-size: 16px; margin-bottom: 28px; } #intro3 .intro3-list3 .education-list .item { position: relative; font-size: 16px; } #intro3 .intro3-list3 .education-list .item .state { position: absolute; left: 0; top: 0; display: inline-block; vertical-align: top; font-size: 16px; z-index: 2; padding: 8px 25px; text-align: center; white-space: nowrap; } #intro3 .intro3-list3 .education-list .item .state.ing { color: #fff; background-color: #00909e; } #intro3 .intro3-list3 .education-list .item .thumb { position: relative; width: 100%; } #intro3 .intro3-list3 .education-list .item .thumb:before { content: ""; display: block; padding-top: 53.19%; } #intro3 .intro3-list3 .education-list .item .thumb .thumb_img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: cover; } #intro3 .intro3-list3 .education-list .item .thumb span { font-size: 0; } #intro3 .intro3-list3 .education-list .item .title { display: block; height: 60px; line-height: 60px; text-align: center; background-color: #eee; padding: 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #intro3 .intro3-list3 .education-arrow { position: absolute; right: 0; top: 10px; } #intro3 .intro3-list3 .education-arrow .bar { display: inline-block; width: 1px; height: 20px; background: #ddd; margin: 0 20px; vertical-align: middle; } #intro3 .intro3-list3 .education-arrow .education-prev { vertical-align: middle; width: 9px; height: 14px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../../images/common/icon_a_left4.png) no-repeat; background-size: 9px; } #intro3 .intro3-list3 .education-arrow .education-next { vertical-align: middle; width: 9px; height: 14px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../../images/common/icon_a_right7.png) no-repeat; background-size: 9px; } #intro3 .intro3-list3 .counseling-list { font-size: 0; margin: 0 -15px; display: flex; flex-wrap: wrap; } #intro3 .intro3-list3 .counseling-list > li { display: flex; width: 50%; padding: 0 15px; flex-direction: column; } #intro3 .intro3-list3 .counseling-list .item { display: block; border: 2px solid #00909e; text-align: center; flex: 1 1 auto; padding: 47px 15px; border-radius: 10px; } #intro3 .intro3-list3 .counseling-list .item .title { display: block; font-size: 20px; font-weight: bold; color: #222; margin-top: 20px; } #intro3 .intro3-list4 { font-size: 0; margin: 0 -12.5px; margin-top: 40px; margin-bottom: 42px; } #intro3 .intro3-list4 > li { display: inline-block; vertical-align: top; width: 33.33333%; padding: 0 12.5px; } #intro3 .intro3-list4 .item { display: flex; flex-wrap: wrap; padding: 18px 30px; background: url(../../images/common/icon_a_right11.png) no-repeat right 30px center; } #intro3 .intro3-list4 > li.list1 .item { background-color: #01909e; } #intro3 .intro3-list4 > li.list2 .item { background-color: #0081d4; } #intro3 .intro3-list4 > li.list3 .item { background-color: #0061b2; } #intro3 .intro3-list4 .item .img { margin-right: 18px; display: flex; align-items: center; justify-content: center; } #intro3 .intro3-list4 .item .title { font-size: 20px; font-weight: bold; color: #fff; display: flex; align-items: center; justify-content: center; } #intro3 .intro3-list5-area { margin-right: -20px; } #intro3 .intro3-list5 > li { width: calc(25% - 20px); margin-right: 20px; } #intro3 .intro3-list5 .item { display: block; border: 1px solid #ddd; text-align: center; line-height: 70px; } #intro3 .intro3-list5 .img { max-height: 45px; vertical-align: middle; } #intro3 .intro3-list5-arrow { position: absolute; right: 0; top: 10px; } #intro3 .intro3-list5-arrow .bar { display: inline-block; width: 1px; height: 20px; background: #ddd; margin: 0 20px; vertical-align: middle; } #intro3 .intro3-list5-arrow .intro3-list5-prev { vertical-align: middle; width: 9px; height: 14px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../../images/common/icon_a_left4.png) no-repeat; background-size: 9px; } #intro3 .intro3-list5-arrow .intro3-list5-next { vertical-align: middle; width: 9px; height: 14px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../../images/common/icon_a_right7.png) no-repeat; background-size: 9px; } /* 데이터로보는 미추홀구 */ .data_michu { font-size: 0; margin: 0 -30px; } .data_michu > li { display: inline-block; vertical-align: top; width: 50%; padding: 0 30px; margin-bottom: 60px; } .data_michu .img { margin-bottom: 15px; } .data_michu .title { margin: 20px 0 5px 0; } .data_michu .desc { font-size: 17px; color: #333; } /* 고충민원 */ .difficulty-step { display: flex; flex-wrap: wrap; font-size: 0; margin: 0 -30px; } .difficulty-step > li { position: relative; display: flex; flex-direction: column; width: 25%; padding: 0 30px; } .difficulty-step > li:after { content: ""; position: absolute; top: 50%; margin-top: -4.5px; right: -11px; display: block; background: url(../../images/common/icon_a_right5.png) no-repeat right center; width: 22px; height: 9px; } .difficulty-step > li:last-child:after { display: none; } .difficulty-step .item { background-color: #e7e9ed; border: 1px solid #e7e9ed; flex: 1 1 auto; border-radius: 100px; padding: 10px 15px; display: flex; align-items: center; justify-content: center; } .difficulty-step > li.active .item { background-color: #daf3f6; border: 1px solid #00909e; } .difficulty-step .item .img { width: 53px; margin-right: 10px; } .difficulty-step .item .desc { display: inline-block; font-size: 17px; color: #222; } .difficulty-step > li.active .desc { color: #00909e; font-weight: bold; } /* 미추홀구 알리미 - 서비스소개 */ .communication-channel .communication-channel-list > li { position: relative; margin-bottom: 20px; } .communication-channel .communication-channel-list > li:last-child { margin-bottom: 0; } .communication-channel .communication-channel-list .item { display: table; width: 100%; border: 1px solid #ddd; } .communication-channel .communication-channel-list .item .item-cell { display: table-cell; vertical-align: middle; padding: 30px; height: 100px; } .communication-channel .communication-channel-list .item .item-cell.title-area { background-color: #f9f9f9; width: 30%; } .communication-channel .communication-channel-list .item .title { position: relative; display: block; font-weight: bold; font-size: 20px; color: #222; } .communication-channel .communication-channel-list .item .desc { font-size: 16px; color: #222; margin-bottom: 10px; } .communication-channel .communication-channel-list .item .highlight { color: #00909e; font-weight: bold; } /* 교육 개요 */ .education-summary { display: flex; flex-wrap: wrap; } .education-summary > li { display: flex; flex-direction: column; width: 25%; margin-bottom: 20px; border: 1px solid #ddd; border-right: 0; } .education-summary > li:last-child { border-right: 1px solid #ddd; } .education-summary .item { flex: 1 1 auto; padding: 30px 15px; text-align: center; } .education-summary .item .desc { margin-top: 20px; word-break: keep-all; } .education-summary .item .desc b { font-weight: bold; } /* 소통참여 - 선거인명부 - 선거인명부 열람안내 */ .vote-top-box { display: table; width: 100%; padding: 40px; background: #f4fdff url(../../images/sub/sq=255/img_title_box.png) right 34px bottom no-repeat; border: 1px solid #00909e; line-height: 1.8; } .vote-top-box::before { content: ""; display: table-cell; vertical-align: middle; width: 110px; height: 80px; background: #f4fdff url(../../images/sub/sq=255/ic_title_box.png) left center no-repeat; background-size: 80px; } .vote-top-box .vote-top-box-center { display: table-cell; vertical-align: middle; padding-left: 10px; } .vote-top-box .vote-top-box-center .vote-box-sub-title { font-size: 18px; font-weight: bold; } .vote-top-box .vote-top-box-center .vote-box-title { font-size: 26px; font-weight: bold; } .vote-box1 { position: relative; padding: 20px; background: #f9f9f9; border: 1px solid #ddd; } .vote-box1 > dl > dt, .vote-box1 > dl > dd { display: inline-block; } .vote-box1 > dl > dt { width: 150px; } .vote-box1 > dl > dt:before { position: relative; content: "*"; color: #00909e; } .vote-box1 > dl.vote-name { margin-bottom: 20px; } .vote-box1 > dl > dd { width: calc(100% - 150px); margin-left: -6px; } .vote-box1 .vote-name > dd > input { max-width: 340px; width: 100%; } .vote-box1 .vote-id-number > dd > input { max-width: 150px; width: 100%; } .vote-box1 .vote-btn-1 { position: absolute; margin: 0; bottom: 20px; right: 20px; } /* 소통참여 - 선거인명부 - 선거인명부 검색결과 */ .vote-btn-frame { display: table; table-layout: fixed; width: 100%; margin-top: 30px; } .vote-btn-frame .vote-btn-frame-left { display: table-cell; } .vote-btn-frame .vote-btn-frame-left > .btn-type1 { text-align: center; min-width: 200px; margin: 0; } .vote-btn-frame .vote-btn-frame-right { display: table-cell; vertical-align: middle; } .vote-btn-frame .vote-btn-frame-right:after { clear: both; display: block; content: ""; } .vote-btn-frame .vote-btn-frame-right > ul { float: right; } .vote-btn-frame .vote-btn-frame-right > ul > li { float: left; } .vote-btn-frame .vote-btn-frame-right > ul > li:nth-of-type(2):before { content: ""; position: relative; display: block; float: left; width: 1px; height: 20px; margin: 0 18px; background: #ddd; top: 2px; } .vote-btn-frame .vote-btn-frame-right > ul > li > a { text-decoration: underline; } /* 소통참여 > 선거인명부 > 선거인명부열람 > 이의신청 */ .member_form1 { width: 100%; margin-top: 30px; } .member_form1 li { width: 100%; display: flex; flex-wrap: wrap; } .member_form1 li:not(:first-child) { margin-top: 20px; } .member_form1 li dl { width: 100%; display: flex; flex-wrap: wrap; line-height: 45px; } .member_form1 li dt { width: 150px; } .member_form1 li dd { width: calc(100% - 150px); display: flex; flex-wrap: wrap; align-items: center; } .member_form1 li dd .overlap { width: 100px; height: 45px; margin-left: 10px; display: block; line-height: 45px; text-align: center; border: #00909e solid 1px; color: #00909e; font-size: 16px; } .member_form1 li dd .text1 { display: block; margin-left: 20px; color: #666; font-size: 14px; } .member_form1 li dd .input1 { width: 340px; height: 45px; line-height: 45px; } .member_form1 li dd .input2 { width: 100%; height: 45px; line-height: 45px; margin-top: 10px; } .member_form1 li dd .input3 { width: 213px; height: 45px; line-height: 45px; } .member_form1 li dd select { width: 146px; height: 45px; } .member_form1 li dd select + select { margin-left: 10px; } .member_form1 li dd input:read-only { background: #f9f9f9; } .member_form1 li dd .at { width: 34px; display: block; color: #222; font-size: 16px; text-align: center; } .gender label { width: 150px; height: 45px; margin-right: 10px; border: #00909e solid 1px; color: #00909e; font-size: 16px; line-height: 43px; text-align: center; } .gender input { margin: 0; } .gender input:checked + label{ background: #00909e; color: #fff; line-height: 45px; } .gender input:focus + label{ outline: 2px solid #000; } .gender input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* 이용안내 - 저작권정책 */ .copyright-list > ul { display: table; width: 100%; border-collapse: collapse; } .copyright-list > ul > li { display: table-cell; text-align: center; border: 1px solid #ddd; } .copyright-list > ul > li .item-box > p { background: #f9f9f9; padding: 15px; font-size: 17px; } .copyright-list > ul > li .item-box >.img-con { padding: 15px; } .copyright-list > ul > li .item-box >.img-con > p { margin-top: 10px; font-size: 14px; } /* 이용안내 - 뷰어 */ .viewr_list { font-size: 0; } .viewr_list > li { font-size: 16px; padding: 30px; border: 1px solid #ddd; } .viewr_list > li:not(:first-child) { margin-top: 30px; } .viewr_list > li .right { display: inline-block; width: 297px; vertical-align: middle; line-height: 1.5; } .viewr_list > li .left { display: inline-block; width: calc(100% - 303px); vertical-align: middle; } /* 201221 추가 */ .h4_14years { color: #222; font-size: 26px; text-align: center; padding-top: 68px; background: url(../../images/sub/icon_none.png) center 0 no-repeat; } .h4_14years_p { width: 100%; padding: 25px 0 35px; color: #222; font-size: 16px; letter-spacing: -0.4px; text-align: center; } .h4_14years_btn { width: 200px; height: 65px; display: block; line-height: 65px; text-align: center; margin: 0 auto; background: #00909e; color: #fff; font-size: 18px; } /* 210325 추가 */ .selectWrap { width: 100%; display: flex; flex-wrap: wrap; padding: 20px 30px; margin-bottom: 50px; border: #ddd solid 1px; } .selectWrap label { width: 50%; height: 45px; margin-top: 15px; display: flex; align-items: center; } .selectWrap label:first-child, .selectWrap label:nth-child(2) { margin-top: 0; } .selectWrap label span { width: 115px; } .selectWrap label span:first-child { font-weight: bold; } .selectWrap label select, .selectWrap label input { width: 200px; } .selectWrap label em { width: 30px; text-align: center; } .selectWrap label input { height: 45px; } .selectWrap label .time, .selectWrap label .date { border: #ddd solid 1px; background: #fff; font-size: 15px; padding: 0 20px; } .class table td { border-left: 0 none; border-right: 0 none; } .c-table-s1 td.classname { text-align: left; } .disabled, .abled, .cancel { width: 110px; height: 45px; margin: 0 auto; display: block; text-align: center; line-height: 45px; font-size: 17px; } .disabled { background: #eee; color: #222; cursor: default; } .cancel { background: #eee; color: #222; } .abled { background: #07998e; color: #fff; } /* 210326 추가 */ .reservtable { width: 100%; display: flex; flex-wrap: wrap; border-top: #222 solid 1px; } .reservtable .row { display: flex; } .reservtable .row > div { min-height: 70px; line-height: 70px; border-bottom: #ddd solid 1px; } .reservtable .row > div:first-child { width: 200px; text-align: center; color: #222; font-size: 18px; font-weight: bold; background: #fafafa; } .reservtable .row > div:nth-child(2) { width: calc(100% - 200px); padding-left: 20px; color: #444; font-size: 18px; word-break: keep-all; display: flex; align-items: center; } .reservtable .row > div:nth-child(2) span:nth-child(2) { line-height: 130%; margin-left: 5px; } .reservtable .row1 { width: 100%; } .reservtable .row2 { width: 50%; } .reservtable .c-chk { margin: 5px 0; } .reservtable .item-address {width: 100%; display: flex; flex-wrap: wrap; align-items: center; padding: 15px 0; } .reservtable .item-address .zip { display: flex; } .reservtable .item-address .input1 { width: 340px; height: 45px; line-height: 45px; } .reservtable .item-address .overlap { padding: 0 15px; height: 45px; margin-left: 10px; display: block; line-height: 45px; text-align: center; color: #fff; font-size: 16px; background-color: #00909e; } .reservtable .item-address .input2 { width: 100%; height: 45px; line-height: 45px; margin-top: 10px; vertical-align: middle; } .detail_n_btn { width: 120px; height: 45px; margin-left: 10px; background-color: #656e79; border: 0; color: #fff; font-size: 16px; line-height: 45px; text-align: center; } .mypage_wrap1 { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .mypage_wrap1 > div { width: 480px; } .mypage_wrap1 .mypage_myinfo1 { height: 235px; position: relative; padding: 49px 0 0 36px; border: solid 1px #ddd; } .mypage_myinfo .line1 { height: 35px; display: flex; align-items: center; } .mypage_myinfo .line1 .name { font-size: 26px; color: #222; line-height: 100%; letter-spacing: -0.65px; } .mypage_myinfo .line1 .name > span { font-weight: bold; } .mypage_myinfo .line1 .edit { width: 114px; height: 35px; margin-left: 20px; border: solid 1px #ddd; line-height: 35px; text-align: center; font-size: 15px; color: #222; letter-spacing: -0.38px; } .mypage_myinfo .line2 { height: 35px; margin-top: 15px; display: flex; align-items: center; } .mypage_myinfo .line2 .icon { width: 36px; height: 35px; border-radius: 11.7px; } .mypage_myinfo .line2 .icon:not(:first-child) { margin-left: 7px; } .icon_kakao { background: #fae100 url(../../../member/images/sub/icon_snskakao.png) center center no-repeat; } .icon_naver { background: #03cf5d url(../../../member/images/sub/icon_snsnaver.png) center center no-repeat; } .icon_facebook { background: #3b5998 url(../../../member/images/sub/icon_snsfacebook.png) center center no-repeat; } .icon_phone { width: 20px; height: 35px; background: url(../../../member/images/sub/icon_phone.png) center center no-repeat; border-radius: 0; } .icon_ipin { width: 35px; height: 25px; background: url(../../../member/images/sub/icon_ipin.png) center center no-repeat; border-radius: 0; } .mypage_myinfo .line2 .ing { font-size: 16px; color: #222; margin-left: 12px; letter-spacing: -0.4px; } .mypage_wrap1 .mypage_myinfo .logout { width: calc(100% - 40px); height: 50px; display: block; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); line-height: 50px; text-align: center; color: #222; font-size: 16px; border: solid 1px #ddd; } .mypage_wrap1 > div:nth-child(2) { display: flex; flex-direction: column; justify-content: space-between; } .mypage_wrap1 > div:nth-child(2) div:before { width: 60px; height: 60px; position: absolute; top: 50%; left: 30px; border-radius: 60px; transform: translateY(-50%); content: ""; } .mypage_wrap1 .mypage_mywrite:before { background: #ffc96f url(../../../member/images/sub/icon_mywrite.png) center center no-repeat; } .mypage_wrap1 .mypage_myreserve:before { background: #ffc96f url(../../../member/images/sub/icon_myreserve.png) center center no-repeat; } .mypage_wrap1 > div:nth-child(2) div { width: 100%; height: 107px; padding: 0 30px 0 110px; position: relative; display: flex; justify-content: space-between; align-items: center; border: solid 1px #ddd; } .mypage_wrap1 > div:nth-child(2) div > .text1 { color: #222; font-size: 24px; } .mypage_wrap1 > div:nth-child(2) div > .text2 { color: #222; font-size: 30px; font-weight: bold; } .mypage_myinfo2 { width: 100%; height: 160px; position: relative; padding: 40px 0 0 36px; border: solid 1px #ddd; } .mypage_myinfo2 .line1 { height: auto; } .flex_bottom { display: flex; justify-content: space-between; align-items: baseline; } .all { display: flex; font-size: 16px; color: #222; align-items: center; } .all:after { width: 7px; height: 13px; display: block; margin-left: 9px; background: url(../../../member/images/sub/icon_all.png); content: ""; } .state1 { width: 100%; height: 30px; display: block; line-height: 30px; text-align: center; background: #ddd; font-size: 15px; color: #444; letter-spacing: -0.38px; } .state2 { width: 100%; height: 30px; display: block; line-height: 28px; text-align: center; /*border: solid 1px #00909e;*/ font-size: 15px; color: #00909e; letter-spacing: -0.38px; } .state3 { width: 100%; height: 30px; display: block; line-height: 30px; text-align: center; background: #00909e; font-size: 15px; color: #fff; letter-spacing: -0.38px; } .mypage_h4 { color: #222; font-size: 26px; font-weight: bold; } .my_sc { width: 100%; display: flex; margin-bottom: 10px; } .my_sc label { width: 100px; font-weight: bold; flex-shrink: 0; } .my_sc select { width: 160px; margin-right: 10px; } .my_sc .search-form { width: calc(100% - 340px); height: 45px; } .my_sc + label { width: 100%; } .my_sc + label > span { width: 100px; flex-shrink: 0; } .selectWrap + .board-view-btns { padding-top: 0; text-align: center; } .subr-tab-list + .title-s1 { margin-top: 0; } /* 미추홀구 구립 도서관 버튼 */ .hnrl_btn { background-color: #00909e; color: #fff; border-color:transparent; padding: 9px 27px; } .hnrl_btn .icon.link-go { background-image: url(../../images/common/icon_link_go.png); top: 50%; margin-top: -10px; } .hnrl_btn .icon_img { vertical-align: middle; margin-right: 10px; } /* 신청사 건립 */ .gvrnm1 { position: relative; } .gvrnm1 .gvrnm_ul { position: relative; padding-right: 200px; } .gvrnm1 .gvrnm_qr { position: absolute; right: 25px; top: -18px; text-align: center; } .gvrnm1 .gvrnm_qr img { border:1px solid #ddd; } .gvrnm1 .gvrnm_qr .gvrnm_qr_title { margin-top: 5px; font-size: 15px; color: #666; } .gvrnm2 { display: flex; flex-wrap:wrap; margin: -10px -7.5px; margin-top: 10px; } .gvrnm2 .gvrnm_item1, .gvrnm2 .gvrnm_item2, .gvrnm2 .gvrnm_item3 { width: 50%; padding: 10px 7.5px; } .gvrnm3 { display: flex; flex-wrap:wrap; margin: 0 -30px; } .gvrnm3 .gvrnm_item { width: 50%; padding: 0 30px; } .gvrnm3 .sli_prev, .gvrnm3 .sli_next { padding: 10px 17px; } .gvrnm3 .sli_prev { left: -20px; } .gvrnm3 .sli_next { right: -20px; } .gvrnm3 .slideshow-container { border:1px solid #bbb; } /* 선거인명부 */ .vote-box-content { display: flex; } .vote-box-content .vote-box-content-left { flex: 1 1 auto; } .vote-box-content .vote-box-content-right { margin-left: 15px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; } .vote-box-content .vote-box-content-right .btn-1, .vote-box-content .vote-box-content-right .btn-2 { padding: 15px 24px; text-align: center; } .vote-box-content .vote-box-content-right .btn-1 > span, .vote-box-content .vote-box-content-right .btn-2 > span { padding-right: 0; } .vote-box-content .vote-box-content-right .btn-2 { background: #9e9e9e; border-color: #9e9e9e; } .vote-box-content dl { margin-bottom: 20px; } .vote-box-content dl:last-child { margin-bottom: 0; } .vote-box-content dl > dt, .vote-box-content dl > dd { display: inline-block; } .vote-box-content dl > dt { width: 150px; } .vote-box-content dl > dt:before { position: relative; content: "*"; color: #00909e; } .vote-box-content dl > dd { width: calc(100% - 150px); margin-left: -6px; } /* 개인정보 처리방침 */ .policy_cont { padding: 15px 0; } .labeling_list_wrap { margin-bottom: 20px; } .labeling_list_wrap .labeling_list { display: flex; flex-wrap:wrap; border-top: 2px solid #000; } .labeling_list_wrap .labeling_list > li { position: relative; width: 20%; border-right: 1px solid #ddd; border-bottom:1px solid #ddd; } .labeling_list_wrap .labeling_item { display: block; padding: 10px; text-align: center; word-break: keep-all; } .labeling_list_wrap .labeling_item_desc { display: none; position: absolute; left: 0; top: 100%; z-index: 1; background-color: #3e69c5; color: #fff; padding: 15px 20px; font-size: 14px; word-break: keep-all; line-height: 1.3; word-spacing: -0.5px; right: 0; font-weight: bold; } .labeling_list_wrap .labeling_img { display: block; margin: 0 auto; margin-bottom: 5px; width: 82px; } .labeling_min_img { width: 31px; vertical-align: bottom; margin-right: 10px; } .labeling_list_wrap .labeling_title { font-weight: bold; text-align: center; margin: 20px 0; font-size: 18px; } .labeling_list_wrap .labeling_item:hover, .labeling_list_wrap .labeling_item:focus { text-decoration: underline; } .labeling_list_wrap .labeling_list > li:hover .labeling_item_desc { display: block; } .policy_table a:hover, .policy_table a:focus { text-decoration: underline; } /* 공원숲학교 2023.10.24 */ .forest_main_slider { width: 100%; display: flex; justify-content: space-between; } .forest_main_slider_l { flex-shrink: 0; position: relative; width: 74.48%; overflow: hidden; } .forest_main_slider_l .card2 { position: relative; width: 100%; border-radius: 5px; overflow: hidden; } .forest_main_slider_l .main-visual > li > a { display: block; } .forest_main_slider_l .main-visual > li > a:focus { border: 1px dotted #000; } .forest_main_slider_l .main-visual > li > a img { width: 100%; } .forest_main_slider_l .main-visual-arrow { position: absolute; right: 0; bottom: 0; background: #fff; font-size: 0; z-index: 1; } .forest_main_slider_l .main-visual-arrow button { display: inline-block; vertical-align: middle; width: 35px; height: 40px; border: 0; font-size: 0; background-repeat: no-repeat; background-position: center; cursor: pointer; } .forest_main_slider_l .main-visual-arrow button.main-visual-prev { background-image: url(../../images/common/icon_a_left2.png); } .forest_main_slider_l .main-visual-arrow button.main-visual-next { background-image: url(../../images/common/icon_a_right4.png); } .forest_main_slider_l .main-visual-arrow .control_btn.pause { background-image: url(../../images/common/icon_pause2.png); } .forest_main_slider_l .main-visual-arrow .control_btn.play { background-image: url(../../images/common/icon_play2.png); } .forest_main_slider_l .main-visual-arrow button:focus-visible { outline-offset: -2px; } .forest_main_slider_r { position: relative; width: 100%; max-width: 230px; margin-left: 20px; overflow: hidden; } .forest_main_slider_r .card1 { position: relative; width: 100%; border-radius: 5px; overflow: hidden; } .forest_main_slider_r .main-visual > li > a { display: block; } .forest_main_slider_r .main-visual > li > a:focus { border: 1px dotted #000; } .forest_main_slider_r .main-visual > li > a img { width: 100%; } .forest_main_slider_r .main-visual-arrow { position: absolute; right: 0; bottom: 0; background: #fff; font-size: 0; z-index: 1; } .forest_main_slider_r .main-visual-arrow button { display: inline-block; vertical-align: middle; width: 35px; height: 40px; border: 0; font-size: 0; background-repeat: no-repeat; background-position: center; cursor: pointer; } .forest_main_slider_r .main-visual-arrow button.main-visual-prev { background-image: url(../../images/common/icon_a_left2.png); } .forest_main_slider_r .main-visual-arrow button.main-visual-next { background-image: url(../../images/common/icon_a_right4.png); } .forest_main_slider_r .main-visual-arrow .control_btn.pause { background-image: url(../../images/common/icon_pause2.png); } .forest_main_slider_r .main-visual-arrow .control_btn.play { background-image: url(../../images/common/icon_play2.png); } .forest_main_slider_r .main-visual-arrow button:focus-visible { outline-offset: -2px; } .forest_main_con1 { display: grid; grid-template-columns: repeat(4, auto); width: 100%; padding: 40px 0; gap: 40px; } .forest_main_con1 .goicon { display: flex; align-items: center; cursor: pointer; text-align: center; } .forest_main_con1 .goicon > img { background-color: #eee; border-radius: 100%; overflow: hidden; } .forest_main_con1 .goicon > p { text-align: left; font-size: 17px; padding-left: 12px; } .forest_main_con2 { display: flex; overflow: hidden; margin-bottom: 30px; } .forest_main_con2 .forest_main_con { width: 100%; margin-right: 20px; } .forest_main_con2 .forest_main_con:last-child { margin-right: 0; } .forest_main_con2 .con_top { border: 1px solid #ddd; overflow: hidden; padding: 20px; } .forest_main_con2 .con_top > h3 { float: left; font-weight: bold; } .forest_main_con2 .con_top > a { float: right; } .forest_main_con2 .con_top > a img { vertical-align: middle; } .forest_main_con2 .con_bottom { min-height: 240px; border: 1px solid #ddd; padding: 20px; margin-top: -1px; } .forest_main_con2 .con_bottom .ul-s1 { max-height: 200px; overflow-y: auto; } .forest_main_con2 .con_bottom .ul-s1 > li > span { float: right; color: #b8b8b8; } .forest_main_con2 .con_bottom .ul-s1 > li > a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 70%; } .forest_main_con3 { margin: 0 -13px; } .forest_main_con3 > ul { display: flex; width: 100%; font-size: 0; } .forest_main_con3 > ul > li { width: 16.6667%; height: 50px; text-align: center; padding: 0 13px; } .forest_main_con3 > ul > li > a { display: flex; width: 100%; height: 100%; border: 1px solid #ddd; align-items: center; justify-content: center; } .forest-main-visual-area1 .thumb { position: relative; width: 100%; } .forest-main-visual-area1 .thumb .thumb_img { height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; } .forest-main-visual-area1 .thumb span { font-size: 0; } .forest-main-visual-area1 .thumb a { display: block; } .forest-main-visual-area1 .thumb a:focus-visible { outline-offset: -2px; } .forest-main-visual-area2 .thumb { position: relative; width: 100%; } .forest-main-visual-area2 .thumb .thumb_img { height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; } .forest-main-visual-area2 .thumb span { font-size: 0; } .forest-main-visual-area2 .thumb a { display: block; } .forest-main-visual-area2 .thumb a:focus-visible { outline-offset: -2px; } /* 공원숲학교 소개 */ .con_forest { width: 100%; overflow: hidden; } .con_forest .con_l .img_box { width: 100%; } .con_forest .con_l .img_box > img { width: 100%; } .con_forest .con_r > h3 { margin: 20px 0 30px 0; } .con_forest .con_r > p { font-size: 16px; line-height: 30px; word-break: keep-all; } .con_forest .con_r > p span { font-weight: 600; } .con_forest .con_r > .f_icon_box { display: flex; justify-content: space-around; margin-top: 30px; } .con_forest .con_r > .f_icon_box > .f_icon { padding: 0 20px; text-align: center; } .con_forest .con_r > .f_icon_box > .f_icon > img { background-color: #f2f9fa; border-radius: 100%; overflow: hidden; } .con_forest .con_r > .f_icon_box > .f_icon > span { display: block; padding-top: 15px; font-size: 16px; } .forest_center.cf_center .center_bg { height: auto; background: none; } .forest_center.cf_center .center { margin-top: -38%; } .forest_map_area { position: relative; border: 1px solid #ddd; z-index: 1; } .forest_map_area .forest_imgbg1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/sub/forest/img_facility01.jpg) no-repeat center / contain; z-index: 1; } .forest_map_area .forest_imgbg2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/sub/forest/img_facility03.png) no-repeat center / contain; z-index: 1; } .forest_map_area .forest_img { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; opacity: 0; } .forest_map_area .forest_img.active { opacity: 1; } .forest_map_area .forest_imgmap { position: relative; z-index: 5; opacity: 0; } .forest_map_area .forest_map_popup { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; display: none; } .forest_map_area .forest_map_popup .pop_inner { position: relative; width: 100%; max-width: 500px; padding: 25px 30px; font-size: 15px; line-height: 1.6; background-color: #fff; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); } .forest_map_area .forest_map_popup .pop_title { display: flex; align-items: center; margin: 10px 0; font-size: 18px; font-weight: 600; } .forest_map_area .forest_map_popup .pop_title:before { flex-shrink: 0; content: ''; display: block; width: 38px; height: 38px; margin-right: 10px; background: url(../../images/sub/forest/icon_map.svg) no-repeat center / contain; } .forest_map_area .forest_map_popup .pop_desc { word-break: keep-all; margin: 10px 0; } .forest_map_area .forest_map_popup .pop_close { position: absolute; top: 20px; right: 20px; width: 12px; height: 12px; font-size: 0; background: url(../../images/common/icon_close.png) no-repeat center / contain; } .forest_map_area .forest_map_popup.active { display: flex; z-index: 10; } .cm_btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid transparent; font: inherit; margin: 3px 0; font-weight: 400; line-height: 1.1; text-align: center; transition: border 0.3s ease, background 0.3s ease; } .cm_btn.btn1 { background-color: #fff; color: #333; border-color: #333; } .cm_btn.btn_sm { height: 40px; padding: 0 15px; font-size: 15px; } .cm_icon { display: inline-flex; position: relative; align-items: center; font-size: inherit; vertical-align: middle; } .cm_icon:after { display: block; flex-shrink: 0; margin-left: 10px; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .cm_icon.icon1:after { width: 16px; height: 15px; background-image: url(../../images/common/icon_link_go2.png); } .cm_icon.icon2:after { width: 18px; height: 15px; background-image: url(../../images/common/icon_down4.png); } .page_waste_disposal .waste_disposal_list1 > li { border-bottom: 1px dashed #ddd; padding: 30px 0; } .page_waste_disposal .waste_disposal_list1 > li:last-child { border-bottom: none; padding-bottom: 0; } .page_waste_disposal .qr_img { max-width: 100px; } .waste_disposal_table1 { overflow: auto; } .waste_disposal_table1 table { border-left: hidden; border-right: hidden; table-layout: auto; } .waste_disposal_table1 table th, .waste_disposal_table1 table td { border: 1px solid #eee; text-align: center; vertical-align: middle; font-size: 15px; padding: 10px 20px; height: 50px; word-break: keep-all; } .waste_disposal_table1 table thead th { border: 1px solid #000; font-size: 17px; font-weight: bold; } .waste_disposal_table1 table tbody th { background-color: #f3f9fd; color: #1f1f1f; } .waste_disposal_table1 table th { } .waste_disposal_table1 table td { } .waste_disposal_table1 table tr.border1 td, .waste_disposal_table1 table tr.border1 th { border-bottom: 1px solid #000; } .waste_disposal_table1 table .td_cont { position: relative; } .waste_disposal_table1 table .td_cont:before { position: absolute; right: -36px; top: 50%; margin-top: -15px; content:""; display: block; width: 30px; height: 30px; border-radius: 100%; background-color: #f3f3f3; background-image: url(../../images/common/icon_a_right4.png); background-repeat: no-repeat; background-position: center; background-size: 6px; } .waste_disposal_table1 table td:last-child .td_cont:before { display: none; } .waste_disposal_table1 .num { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; font-size: 14px; background-color: #00909e; color: #fff; border-radius: 5px; margin-right: 5px; } .waste_disposal_table1 .num:before { } .cm_overview1 { } .cm_overview1 .ovw1_list { display: flex; flex-wrap: wrap; margin: -9px; } .cm_overview1 .ovw1_list > li { width: 33.3%; padding: 9px; } .cm_overview1 .ovw1_box { display: block; border:1px solid #ddd; height: 100%; } .cm_overview1 .ovw1_thumb_img { width: 100%; height: 100%; object-fit: cover; } .cm_search1 { display: inline-flex; align-items: center; } .cm_search1 .search_form { height: 40px; width: 120px; padding: 0 15px; background-position: right 15px center; background-size: auto 5px; font-size: 15px; } .cm_search1 .search_btn { flex-shrink: 0; margin-left: 8px; padding: 0 15px; height: 40px; background-color: #656e79; border: 0; color: #fff; font-size: 14px; } .altBox{display: inline-block; text-align: left; font-size: 0px; color:#777} /* css추가(dof) */ .flex{display: flex; justify-content:space-between; word-break: keep-all; overflow-wrap:anywhere} .flex.middle{align-items:center} .flex.center{justify-content: center} .img_txt{margin-top: 3px; font-size: .9rem; color: #666;} .inflexH{display: flex; flex-direction: column;} .inflexH.first>:first-child{flex-grow:1} .inflexH.last>:last-child{flex-grow:1} .imgfit img{object-fit:cover; width: 100%; height: 100%} img.border{border:1px solid #ddd; border-radius:5px} .roundphoto{display: flex; gap:10px; margin-top: 10px;} .roundphoto>li{flex:1; border-radius: 10px; overflow:hidden} /* 신청사 건립 추진배경 */ .newoffice{display: flex; flex-direction: column; margin-top: 10px;} .newoffice{height: 100%;} .newoffice dt{text-align: center; padding:10px 5px; color: #fff; background: #00909e; border-radius:5px} .newoffice dd{flex-grow: 1; background: #f5f5f5; padding:max(5%, 20px) max(10%, 20px); border-radius:100px} /* 고향사랑기부제 */ .lovegohyang{display: flex; gap:1%; margin-top: 30px; font-size: 15px;} .lovegohyang>li{flex:1; display: flex; align-items: center; text-align: center; flex-direction: column; gap:18px; padding:35px 25px; max-width:49.5%; background: #F5F5F5; border-radius:1em} .lovegohyang>li .year{position: relative; margin-top: 45px; padding:2px 1.5em 5px; background: #00909E; border-radius:100px; color: #fff; font-size: 1.3em;} .lovegohyang>li .year:before{display: block; content: ''; position: absolute; margin: auto; left: 0px; right: 0px; bottom:100%; margin-bottom: -5px; width: 50px; height: 50px; background: url(/other/attach_down.do?sq=846&key=D5019F09BA) no-repeat center bottom / cover;} .lovegohyang>li .name{font-weight: bold; font-size: 1.8em; color: #222;} .lovegohyang>li .amount{width: 100%; margin-top: 10px; padding-top: 20px; border-top:1px solid rgba(0,0,0,.2); font-weight: bold; font-size: 1.125em;} .lovegohyang>li .amount span{font-size: 1.4em; color: #006670;} @media screen and (max-width:800px){ .lovegohyang{font-size: 12px;} .lovegohyang>li{flex-basis: 49.5%;} } /* 기부자명예의전당 */ .famehall{position: relative; padding: 20px; margin-top: 25px; background: repeating-linear-gradient(to right, rgba(0,0,0,.1) 0px, rgba(0,0,0,.15) 3px, transparent 3px, transparent 12px) 0px 0px, #453838; border-radius: 15px; overflow: hidden;} .famehall .tit{display: flex; align-items:center; justify-content: center; margin-top: 8px; color: #fff; font-size: 2em; font-weight: bold;} .famehall .tit:before{display: inline-block; content: ''; width: 60px; height: 60px; background: url(/other/attach_down.do?sq=852&key=4B5ACEB525) no-repeat center bottom} .famehall>ul{display: grid; gap: 5px; align-self: start; grid-auto-rows:60px; grid-template-columns: repeat(4, 1fr); margin-top: 28px;} .famehall>ul>li{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding:10px 5%; justify-self: stretch; background: #fff; border-radius:5px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25); word-break: keep-all; line-height: 130%;} .famehall>ul>li:nth-child(5n-4){background: #F8ECDF} .famehall>ul>li:nth-child(5n-3){background: #EFEFEC} .famehall>ul>li:nth-child(5n-2){background: #E5EFE0} .famehall>ul>li:nth-child(5n-1){background: #F4F1D3} .famehall>ul>li:nth-child(5n){background: #E3F3F8} .famehall>ul>li.up10{grid-row: span 4; font-size: 1.05em; ; line-height: 140%;} .famehall>ul>li.up5{grid-row: span 3;} .famehall>ul>li.up3{grid-row: span 2;} .famehall>ul>li.up1{letter-spacing: -1px; font-size: .85em; padding:10px 0px; word-break: break-all;} .famehall>ul>li>p{display: flex; align-items: center; padding:0px 15px; font-size:13px; background: rgba(255,255,255,.7); border-radius:30px; margin-bottom: 2px} .famehall>ul>li>p:before{display: block; content: ''; width: 25px; height: 25px; background: url(/other/attach_down.do?sq=852&key=4B5ACEB525) no-repeat center -3px / 30px;} .famehall>ul>li.up5>p:before{background-position-y: -33px;} .famehall>ul>li.up3>p:before{background-position-y: -63px;} .famehall>ul>li.up1>p:before{background-position-y: -93px;} .famehall>ul>li:where(.up10,.up5){padding:10px 12%} .famehall>ul>li:where(.up10,.up5)>p{margin-bottom: 8px} .famehall>ul>li.up3>p{color: #333; margin-bottom: 5px;} .famehall>ul>li.up1>p{margin-bottom: 0px; font-size:12px; color: #555} @media screen and (max-width:800px){ .famehall>ul{grid-template-columns: repeat(2, 1fr)} } /* 접근성 추가 .hideWeb{display: none !important;} .editor_content img{display: none;} .hidePdf .btns{display: none;} /* 메인 https://www.michuhol.go.kr/main/view_data/area/list.do .ly_board .board_nav .board_more span{padding:0px 15px !important ; text-align: center; border-radius:50px; bordeR:2px solid #ec437c} .ly_board .board_nav .board_more span:before{display: none !important;} #pageview_chart , #pageview_chart div[dir=ltr], #pageview_chart div[dir=ltr] div{all:unset !important} #pageview_chart svg{display: none !important} #pageview_chart svg+div{all:unset } /* 퀵메뉴 #mainQuick{display: none !important} .main-quick .popup-quick3 .menu-list2 > li {padding: 12px;} .main-quick .popup-quick3 .menu-list2 > li > a:before{display: none !important} /* 접근성 추가 끝 /* 접근성에만 보임 https://www.michuhol.go.kr/main/content.do?sq=63 https://www.michuhol.go.kr/main/view_data/population/list.do .viewWeb{display: block !important;} */