body { color: #2e2e2e; font-size: 16px; line-height: 1.6em; font-family: 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: break-all; word-wrap: break-word; -webkit-text-size-adjust: none;} body.ov_h { overflow: hidden;} a { text-decoration: none; } img { max-width:100%; max-height:100%; vertical-align: top;} /* 본문 바로가기 */ .accessibility {position:fixed; top:0; left:0; z-index:90; width:100%;} .accessibility a {display:block; overflow:hidden; position:relative; padding-right:5px; padding-left:5px; height:1px; text-align:center;} .accessibility a:focus, .accessibility a:hover {height:auto; padding-top:5px; padding-bottom:5px; background-color:#000; color:#fff;} /* 공식배너 누리집*/ #krds-masthead { background-color:#eef2f7; position:relative; } #krds-masthead .inner {display:flex;align-items: center;justify-content: flex-start;flex-direction: row;flex-wrap:wrap;max-width:1280px;width:100%;margin:0 auto;padding: 4px 0;min-height:32px;padding-top:0;padding-bottom:0;box-sizing: border-box;} #krds-masthead .toggle-head .nuri-txt::before { content:""; display:inline-flex; width:24px; height:24px; background-image:url(/common/images/layout/component/taegeukgi.png); background-size:contain; background-repeat:no-repeat; background-position:center; } #krds-masthead .toggle-head .nuri-txt { display:flex; align-items: center; justify-content: flex-start; flex-direction: row; gap:8px; font-size:15px; word-break: break-all; } @media all and (max-width:1280px) { #krds-masthead .inner { padding: 4px 16.5px; } } .inner { width:1280px; margin:0 auto; } #header { font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; height:100%; background-color:#ffffff; } #header.fixed { position:fixed; left:0; top:0; z-index:10; width:100%; } #header .inner { display:flex; justify-content: space-between; align-items: center; height:100px; } #header .m-menu-toggle { display:none; position:relative; width:28px; height:21px; font-size:0; text-indent:-99999999em; z-index:11; } #header .m-menu-toggle span { display:block; width:100%; height:3px; background-color:#000; border-radius:2px;} #header .m-menu-toggle span:first-of-type { position:absolute; top:0; transform:translateY(0) rotate(0); } #header .m-menu-toggle span:nth-of-type(2) { position:absolute; top:50%; transform: translateY(-50%); } #header .m-menu-toggle span:last-of-type { position:absolute; bottom:0; transform:translateY(0) rotate(0); } #header .m-menu-toggle.on span:first-of-type { top:50%; transform: translateY(-50%) rotate(45deg); } #header .m-menu-toggle.on span:nth-of-type(2) { display:none; } #header .m-menu-toggle.on span:last-of-type { bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); } #header .gnb ul { display:flex; } #header .gnb ul li { margin-right:85px; } #header .gnb ul li:last-child { margin-right:0; } #header .gnb ul li a { display:block; position:relative; color:#000; font-weight:500; letter-spacing: -0.05em; font-size:18px; } #header .gnb ul li a:hover::after { content:""; position:absolute; bottom:-5px; width:100%; display:block; height:2px; } #header .gnb ul li.active a::after { content:""; position:absolute; bottom:-5px; width:100%; display:block; height:2px; } #header .gnb ul li:nth-child(1) a:hover { color:#0f47a3; font-weight:600; } #header .gnb ul li:nth-child(1) a:hover::after { background-color:#0f47a3; } #header .gnb ul li:nth-child(1).active a { color:#0f47a3; font-weight:600; } #header .gnb ul li:nth-child(1).active a::after { background-color:#0f47a3; } #header .gnb ul li:nth-child(2) a:hover { color:#0c9795; font-weight:600; } #header .gnb ul li:nth-child(2) a:hover::after { background-color:#0c9795; } #header .gnb ul li:nth-child(2).active a { color:#0c9795; font-weight:600; } #header .gnb ul li:nth-child(2).active a::after { background-color:#0c9795; } #header .gnb ul li:nth-child(3) a:hover { color:#e9572c; font-weight:600; } #header .gnb ul li:nth-child(3) a:hover::after { background-color:#e9572c; } #header .gnb ul li:nth-child(3).active a { color:#e9572c; font-weight:600; } #header .gnb ul li:nth-child(3).active a::after { background-color:#e9572c; } #header .gnb ul li:nth-child(4) a:hover { color:#1991a3; font-weight:600; } #header .gnb ul li:nth-child(4) a:hover::after { background-color:#1991a3; } #header .gnb ul li:nth-child(4).active a { color:#1991a3; font-weight:600; } #header .gnb ul li:nth-child(4).active a::after { background-color:#1991a3; } #header .lnb .menu_show { display:none; } #header .lnb .menu_hide { display:none; } #header .lnb .lnb_link { display:none; } #header .lnb .tab_menu .tab_nav { display:none; } #header .lnb .tab_contents .tab_content { display:none; } #header .lnb .tab_contents .tab_content.active { display:block; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list { display:flex; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li { margin-right:85px; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:last-child { margin-right:0; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li a { display:block; position:relative; color:#000; font-weight:500; letter-spacing: -0.05em; font-size:18px; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li a:hover::after { content:""; position:absolute; bottom:-5px; width:100%; display:block; height:2px; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li.active a::after { content:""; position:absolute; bottom:-5px; width:100%; display:block; height:2px; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1) a:hover { color:#0f47a3; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1) a:hover::after { background-color:#0f47a3; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1).active a { color:#0f47a3; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1).active a::after { background-color:#0f47a3; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2) a:hover { color:#0c9795; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2) a:hover::after { background-color:#0c9795; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2).active a { color:#0c9795; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2).active a::after { background-color:#0c9795; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3) a:hover { color:#e9572c; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3) a:hover::after { background-color:#e9572c; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3).active a { color:#e9572c; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3).active a::after { background-color:#e9572c; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4) a:hover { color:#1991a3; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4) a:hover::after { background-color:#1991a3; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4).active a { color:#1991a3; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4).active a::after { background-color:#1991a3; } #header .lnb .lnb_lang { display:none; } /*최상단 Bar*/ #header .gnbtop { background-color:#ffffff; padding-bottom:5px; } #header .gnbtop .wrap { display:flex; align-items: center; justify-content: space-between; max-width:1280px; margin:0 auto; } #header .gnbtop .wrap.clearfix::after { display:none; } #header .gnbtop .gnb_left:before { display:none; } #header .gnbtop .gnb_left .gnb_item { float:left; border:none; border-bottom-left-radius:8px; border-bottom-right-radius:8px; padding:0 20px; margin-left:2px; } #header .gnbtop .gnb_left .gnb_item:first-child { border:none; } #header .gnbtop .gnb_left .gnb_item.active .gnb_text { color:#ffffff; } #header .gnbtop .gnb_left .gnb_text { position:relative; display:block; color:#000; padding-top:13px; padding-bottom:13px; padding-left:0; letter-spacing: -0.025em;font-size:15px; line-height:17px; } #header .gnbtop .gnb_left .gnb_text:before { display:none; } #header .gnbtop .gnb_left .gnb_item:nth-child(1) { background-color:#daedf8; } #header .gnbtop .gnb_left .gnb_item:nth-child(2) { background-color:#e3f4ef; } /*열린구청장실*/ #header .gnbtop .gnb_left .gnb_item:nth-child(3) { background-color:#dcf0f3 } /*현장구청장*/ #header .gnbtop .gnb_left .gnb_item:nth-child(4) { background-color:#f1ecf5; } /*미디어금천*/ #header .gnbtop .gnb_left .gnb_item:nth-child(5) { background-color:#e7ecf6; } /*교육포털*/ #header .gnbtop .gnb_left .gnb_item:nth-child(6) { background-color:#f7e5ea; } /*온종일돌봄포*/ #header .gnbtop .gnb_left .gnb_item:nth-child(7) { background-color:#eaf7ed; } /*보건소*/ #header .gnbtop .gnb_left .gnb_item:nth-child(8) { background-color:#f7f1e8; } /*금천구의회*/ #header .gnbtop .gnb_left .gnb_item.live .gnb_text { padding-left:17px; } #header .gnbtop .gnb_left .live.active { background-color:#80d4e0 } #header .gnbtop .gnb_left .live.active .gnb_text:before { content:""; display:block; position:absolute; left:-5px; top:13px; width:16px; height:20px; background-image:url('/common/images/layout/component/gnb_sprite.png'); background-repeat:no-repeat; background-position: left -340px; } /*202307수정*/ #header .gnbtop .gnb_left .gnb_item:nth-child(1) { background-color:#dcf0f3; } #header .gnbtop .gnb_left .gnb_item:nth-child(2) { background-color:#dcf0f3; } #header .gnbtop .gnb_left .gnb_item:nth-child(3) { background-color:#dcf0f3 } #header .gnbtop .gnb_left .gnb_item:nth-child(4) { background-color:#dcf0f3; } #header .gnbtop .gnb_left .gnb_item:nth-child(5) { background-color:#dcf0f3; } #header .gnbtop .gnb_left .gnb_item:nth-child(6) { background-color:#dcf0f3; } #header .gnbtop .gnb_left .gnb_item:nth-child(7) { background-color:#f7f1e8; } #header .gnbtop .gnb_left .gnb_item:nth-child(8) { background-color:#f7f1e8; } #header .gnbtop .gnb_left .live.active{ background-color:#0583cd; } #header .gnbtop .new_sns { margin-top:5px;} #header .gnbtop .new_sns ul { display:flex; align-items: center; justify-content: flex-end; } #header .gnbtop .new_sns ul li { margin-left:4px; } #header .gnbtop .new_sns ul li:first-child { margin-left:0; } #header .gnbtop .new_sns ul li a { display:block; font-size:0; text-indent:-99999999em; border-radius:50%; width:40px; height:40px; background-position:center; background-repeat:no-repeat; } #header .gnbtop .new_sns ul li a.insta { background-image:url(/site/portal/images/main/gnb_bar_insta.png); } #header .gnbtop .new_sns ul li a.twiter { background-image:url(/site/portal/images/main/gnb_bar_twiter.png); background-color:#1d9bf0 } #header .gnbtop .new_sns ul li a.facebook { background-image:url(/site/portal/images/main/gnb_bar_facebook.png); background-color:#3c5b9a; } #header .gnbtop .new_sns ul li a.blog { background-image:url(/site/portal/images/main/gnb_bar_blog.png); background-color:#32b34a; } #header .gnbtop .new_sns ul li a.kakao { background-image:url(/site/portal/images/main/gnb_bar_kakao.png); background-color:#ffdd00; } #header .gnbtop .new_sns ul li a.youtube { background-image:url(/site/portal/images/main/gnb_bar_youtube.png); background-color:#d81212 } #container.fixed { padding-top:85px; } .video-container { position:relative; width:100%; height:887px; overflow-y:hidden; overflow-x:hidden; } .video-container .text-wrap { width: 100%; position: absolute; left: 6%; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; text-shadow: 3px 3px 8px rgba(0,0,0,0.7);} .video-container .text-wrap h2 {font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; font-size: 3.57rem; line-height:1.5;} .video-container .text-wrap p { font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; font-size: 1.7rem; line-height:1.5; margin-top:25px;} .video-container .video-wrap{ max-width:1600px; margin:0 auto; } .video-container .video-wrap video { position:absolute; top:0; left:50%; width:100%; min-height:887px; object-fit:cover; transform: translateX(-50%); } .sub-visual { display:flex; align-items: center; justify-content: center; width:100%; max-width:1800px; margin:0 auto; height:180px; padding:0 15px; box-sizing: border-box; background-position:center; background-repeat:no-repeat; border-top-left-radius:50px; border-bottom-right-radius:50px; overflow:hidden; } .sub-visual.sub1 { background-image:url(../images/sub01_bg.png); } .sub-visual.sub2 { background-image:url(../images/sub02_bg.png); } .sub-visual.sub3 { background-image:url(../images/sub03_bg.png); } .sub-visual.sub4 { background-image:url(../images/sub04_bg.png); } .sub-visual h2 { text-align: center; font-size: 48px; letter-spacing: -0.05em; font-weight:400; color:#ffffff; font-family: 'GeumcheonGvalleySans', 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; } .addons { display:flex; align-items: center; justify-content: flex-end; width:100%; height:110px; max-width:1280px; margin:0 auto; position:relative; } .addons .addons_content { display:flex; align-items: center; visibility:hidden; opacity:0; position:absolute; top:95px; right:-5px; margin-right:5px; padding:3px; border:1px solid #272a36; border-radius:20px; background-color:#fff; white-space:nowrap; transition-property:visibility, opacity; transition-duration:0.25s; transition-timing-function:linear; z-index:10;} .addons .addons_btn { width:50px; height:50px; border-radius:50%; border:1px solid #dddddd; font-size:0; text-indent:-9999999em; background-image:url(../images/addons_sns.png); background-position:center; background-repeat:no-repeat; margin-left:8px; } .addons.active .addons_content {visibility:visible; opacity:1;} .addons .addons_list {display:flex; align-items: center; vertical-align:middle;} .addons .addons_item {margin-left:20px;} .addons .addons_print { width:50px; height:50px; border-radius:50%; border:1px solid #dddddd; font-size:0; text-indent:-9999999em; margin-left:8px; background-image:url(../images/addons_print.png); background-position:center; background-repeat:no-repeat; } .addons .addons_item .addons_text { display:block; font-size:0; text-indent:-9999999em;} .addons .addons_item .addons_text:before {display:inline-block; background-image:url('https://www.geumcheon.go.kr/common/images/sub/addons_sprite.png'); background-repeat:no-repeat; vertical-align:middle;} .addons .addons_item.instagram .addons_text:before {width:22px; height:22px; background-position:left -284px;} .addons .addons_item.twitter .addons_text:before {width:13px; height:17px; background-position:left -316px;} .addons .addons_item.facebook .addons_text:before {width:10px; height:20px; background-position:left top;} .addons .addons_item.blog .addons_text:before {width:13px; height:19px; margin-right:-3px; background-position:left -30px;} .addons .addons_item.kakaostory .addons_text:before {width:10px; height:19px; background-position:left -59px;} .addons .addons_close {display:block; font-size:0; text-indent:-9999999em; width:30px; height:30px; margin-left:15px; border-radius:50%; background-color:#686a72;} .addons .addons_close:before {display:inline-block; width:12px; height:11px; background:url('https://www.geumcheon.go.kr/common/images/sub/addons_sprite.png') no-repeat left -234px;} .addons .braille_viewer, .addons .braille_docdown { width:50px; height:50px; border-radius:50%; border:1px solid #dddddd; font-size:0; text-indent:-9999999em; background-position:center; background-repeat:no-repeat; } .addons .braille_viewer { background-image:url(../images/braille_viewer.png); } .addons .braille_docdown { background-image:url(../images/braille_docdown.png); margin-left:8px; } .grid-wrap { box-sizing: border-box; } .grid-wrap { max-width:100%; width:1280px; } .grid-wrap .grid-box { width:416px; margin-bottom:16px; } .grid-wrap .grid-box .grid-card { position:relative; display:flex; align-items: center; justify-content: center; overflow: hidden; background-color:#000000; } .grid-wrap .grid-box .grid-card a { position:relative; overflow: hidden; display:block; width:100%; height:100%; } .grid-wrap .grid-box .grid-card a .card-img { position:relative; width:100%; height:100%; } .grid-wrap .grid-box .grid-card a .card-img img { transform: scale(1); transition:all 0.3s; display:block; max-width:100%; max-height:100%; width:100%; height:100%; } .grid-wrap .grid-box .grid-card a:hover .card-img img { transform: scale(1.2); transition:all 0.3s } .grid-wrap .grid-box .grid-card a .txt-wrap { position:absolute; bottom:0; left:0; width:100%; display:flex; align-items: center; height:74px; background-color:rgba(0,0,0,0.7); transition: all 0.3s; } .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box { display:block; width:100%; padding:0 20px; box-sizing: border-box;} .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box span { display:block; font-size:14px; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: keep-all; letter-spacing: -0.05em; font-weight:400; color:rgba(255,255,255,0.6); } .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box p { display:block; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: keep-all; font-size:18px; letter-spacing: -0.05em; font-weight:500; color:#ffffff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box .detail-btn { display:none; width:60px; height:60px; position:relative; border:1px solid rgba(255,255,255,0.7); border-radius:50%; margin:15px auto 0 auto; } .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box .detail-btn::before { content:""; display:block; width:20px; height:1px; background-color:#ffffff; position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%);} .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box .detail-btn::after { content:""; display:block; width:1px; height:20px; background-color:#ffffff; position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%);} .grid-wrap .grid-box .grid-card a .txt-wrap.bottom { left:0; bottom:0; } .grid-wrap .grid-box .grid-card a .txt-wrap.top { left:0; top:0; width: 100%; } .grid-wrap .grid-box .grid-card a .txt-wrap.right { right:0; left:auto; top:0; bottom:auto; height:100%; width: 180px; } .grid-wrap .grid-box .grid-card a .txt-wrap.left { left:0; top:0; bottom:auto; height:100%; width: 180px; } .grid-wrap .grid-box .grid-card a .txt-wrap.top .txt-box span { display:block; font-size:14px; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: keep-all; letter-spacing: -0.05em; font-weight:400; color:rgba(255,255,255,0.6); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .grid-wrap .grid-box .grid-card a .txt-wrap.top .txt-box p { display:block; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: keep-all; font-size:18px; letter-spacing: -0.05em; font-weight:500; color:#ffffff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .grid-wrap .grid-box .grid-card a .txt-wrap.bottom .txt-box span { display:block; font-size:14px; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: keep-all; letter-spacing: -0.05em; font-weight:400; color:rgba(255,255,255,0.6); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .grid-wrap .grid-box .grid-card a .txt-wrap.bottom .txt-box p { display:block; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; word-break: keep-all; font-size:18px; letter-spacing: -0.05em; font-weight:500; color:#ffffff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .grid-wrap .grid-box .grid-card a .txt-wrap.left .txt-box span, .grid-wrap .grid-box .grid-card a .txt-wrap.left .txt-box p, .grid-wrap .grid-box .grid-card a .txt-wrap.right .txt-box span, .grid-wrap .grid-box .grid-card a .txt-wrap.right .txt-box p { display:-webkit-box; line-height:1.5; max-height:3em; overflow: hidden; -webkit-line-clamp:3; text-overflow:ellipsis; -webkit-box-orient:vertical; text-align:left; white-space:unset; } .grid-wrap .grid-box .grid-card a:hover .txt-wrap { width:100%; height:100%; background-color:transparent; background-image:url(../images/card_hover_bg.png); background-position:center; background-size:cover; transition: all 0.3s; } .grid-wrap.sub03-grid .grid-box .grid-card a:hover .txt-wrap { background-image:url(../images/card_hover_bg03.png)} .grid-wrap .grid-box .grid-card a:hover .txt-wrap .txt-box span { text-align: center; } .grid-wrap .grid-box .grid-card a:hover .txt-wrap .txt-box p { text-align: center; } .grid-wrap .grid-box .grid-card a:hover .txt-wrap .txt-box .detail-btn { display:block; } .gallery-wrap ul { display:flex; flex-wrap:wrap; } .gallery-wrap ul li.gallery-item { margin-right:24px; margin-bottom:50px; width:302px } .gallery-wrap ul li.gallery-item:nth-child(4n) { margin-right:0; } .gallery-wrap ul li.gallery-item a.item-link { display:block; } .gallery-wrap ul li.gallery-item a.item-link:hover .gallery-img .hover-layer { height:100%; transition: all 0.3s; } .gallery-wrap ul li.gallery-item a.item-link:hover .gallery-img .hover-layer .detail-btn { display:block; } .gallery-wrap ul li.gallery-item .gallery-img { position:relative; width:100%; height:0; padding-top:calc(170 / 302 * 100%); } .gallery-wrap ul li.gallery-item .gallery-img img { position:absolute; left:0; top:0; width:100%; height:100%; } .gallery-wrap ul li.gallery-item .gallery-img .hover-layer { position:absolute; left:0; bottom:0; width:100%; height:0; background-image:url(../images/card_hover_bg02.png); z-index:1; transition: all 0.3s; display:flex; align-items: center; background-size:cover; } .gallery-wrap ul li.gallery-item .gallery-img .hover-layer .detail-btn { display:none; width:60px; height:60px; position:relative; border:1px solid rgba(255,255,255,0.7); border-radius:50%; margin:0 auto; } .gallery-wrap ul li.gallery-item .gallery-img .hover-layer .detail-btn::before { content:""; display:block; width:20px; height:1px; background-color:#ffffff; position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%);} .gallery-wrap ul li.gallery-item .gallery-img .hover-layer .detail-btn::after { content:""; display:block; width:1px; height:20px; background-color:#ffffff; position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%);} .gallery-wrap ul li.gallery-item .gallery-info { margin:25px 0 10px 0;} .gallery-wrap ul li.gallery-item .gallery-info strong { display:block; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; letter-spacing: -0.05em; font-weight:500; font-size:18px; line-height:1; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; color:#000000; } .gallery-wrap ul li.gallery-item .gallery-info span { display:block; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; letter-spacing: -0.05em; font-size:14px; color:#666666; margin-top:8px; } .gallery-wrap ul li.gallery-item a.down-btn { position:relative; display:flex; align-items: center; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; font-size:14px; letter-spacing: -0.05em; color:#666666; justify-content: center; width:110px; height:34px; border:1px solid #d7d7d7; transition:all 0.2s } .gallery-wrap ul li.gallery-item a.down-btn::after { content:""; display:block; width:15px; height:14px; background-image:url(../images/down_ico.png); background-position:center; margin-left:8px; } .gallery-wrap ul li.gallery-item a.down-btn:hover { color:#000; font-weight:500; background-color:#f2f2f2; transition:all 0.2s } .sms-tit-wrap { width:100%; height:285px; display:flex; align-items: center; background-color:#d8e8f1; box-sizing: border-box; padding:0 58px; background-image:url(../images/sub04_smsbg.png); background-repeat:no-repeat; background-position:right bottom; margin-bottom:25px; } .sms-tit-wrap .sms-tit strong { font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; font-size:32px; letter-spacing: -0.05em; color:#222222; line-height:1.2; } .sms-tit-wrap .sms-tit p { font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; font-size:16px; letter-spacing: -0.05em; color:#666666; margin-top:10px; } .sms-tit-wrap .sms-tit .sms-tel-info { background-color:rgba(255,255,255,0.5); border-radius:50px; width:380px; height:54px; box-sizing: border-box; display:flex; align-items: center; justify-content: center; padding:0 20px; margin-top:20px; } .sms-tit-wrap .sms-tit .sms-tel-info p { margin-top:0; display:flex; align-items: center; font-size:18px; font-weight:600; color:#222222; } .sms-tit-wrap .sms-tit .sms-tel-info p::before { content:""; display:block; width:21px; height:18px; background-image:url(../images/sms_ico.png); background-repeat:no-repeat; background-position:center; margin-right:8px; } .sms-tit-wrap .m-sms-img { display:none; } ul.sms-info { padding-bottom:150px; } ul.sms-info li { font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; line-height:1.5; margin-bottom:10px; color:#666666; letter-spacing: -0.05em; font-size:14px; } .common-view { padding-bottom:85px; } .common-view .view-top { border-top:1px solid #000000; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; line-height:1.5; color:#666666; letter-spacing: -0.05em; } .common-view .view-top .view-info { display:flex; align-items:center; background-color:#f3f6f8; width:100%; height:110px; padding:0 30px; box-sizing: border-box; } .common-view .view-top .view-info .view-subj { width:calc(100% - 95px); } .common-view .view-top .view-info .view-subj span { display:block; overflow: hidden; text-overflow: ellipsis; font-size:14px; color:#666666; } .common-view .view-top .view-info .view-subj strong { display:block; width:100%; overflow: hidden; text-overflow: ellipsis; font-size:24px; font-weight:600; color:#222222; } .common-view .view-top .view-info .view-date { width:80px; margin-left:15px; text-align: right;} .common-view .view-top .view-info .view-date span { font-size:14px; color:#666666; } .common-view .view-top .view-attachment { padding:25px 30px; border-bottom:1px solid #d9d9d9; } .common-view .view-top .view-attachment ul li { display:flex; align-items: center; flex-wrap:wrap; margin-bottom:10px; } .common-view .view-top .view-attachment ul li:last-child { margin-bottom:0; } .common-view .view-top .view-attachment ul li a.attachment-file { display:inline-block;} .common-view .view-top .view-attachment ul li a.attachment-file .file-wrap { display:flex; align-items: center; position:relative; } .common-view .view-top .view-attachment ul li a.attachment-file .file-wrap::before { content:""; display:block; width:16px; height:14px; background-image:url(../images/attachment_file_ico.png); background-repeat:no-repeat; background-position:center; } .common-view .view-top .view-attachment ul li a.attachment-file .file-wrap::after { content:""; display:block; width:15px; height:14px; background-image:url(../images/down_ico.png); background-repeat:no-repeat; background-position:center; } .common-view .view-top .view-attachment ul li a.attachment-file .file-wrap span { display:block; color:#666666; letter-spacing: -0.05em; margin:0 8px; width:calc(100% - 47px); overflow: hidden; text-overflow: ellipsis; } .common-view .view-con { padding:50px 25px; border-bottom:1px solid #d9d9d9;} .common-view .view-btns { display:flex; align-items: center; justify-content: flex-end; width:100%; margin-top:25px;} .common-view .view-btns button { display:flex; align-items: center; justify-content: center; height:35px; padding:0 18px; border-radius:4px; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; } .common-view .view-btns button.list-btn { color:#ffffff; background-color:#0f47a3; } .p-button { display:flex; align-items: center; justify-content: center; padding:6px 8px; box-sizing: border-box; border:1px solid #dddddd; font-size:13px; color:#333; border-radius:3px; line-height: 1; } .p-button.p-attach__preview { margin-left:8px; } .p-button.p-attach__preview svg { margin-right:4px; } /*금천구청 기존 페이징 디자인*/ .p-pagination { position: relative; display: table; margin: 32px auto } .p-pagination.left { margin-left: 0; margin-right: auto } .p-pagination.right { margin-left: auto; margin-right: 0 } .p-page { display: table; margin: 0; text-align: center } .p-page__link { display: table-cell; position: relative; width: 40px; height: 40px; margin-left: 0; margin-right: 0; text-align: center; font-size: .95em; color: #222; line-height: 40px; letter-spacing: -2px; vertical-align: middle; border-top: solid 1px #dedede; border-right: solid 1px #dedede; border-bottom: solid 1px #dedede; background: #fff } .p-page__link.active { border-color: #202e70; background: #202e70; color: #fff; font-weight: 400 } .p-page__link.active:after { display: block; position: absolute; left: 50%; bottom: 8px; transform: translateX(-5px); width: 12px; height: 1px; background: rgba(255,255,255,.8) } .p-page__link.active:hover { background: #202e70 } .p-page__link:hover { background: #f4f4f4 } .p-page__link-group { display: inline-block; border-left: solid 1px #dedede; vertical-align: top } .p-page__control { display: inline-block; margin: 0 3px; border-left: solid 1px #dedede; vertical-align: top } .p-page__control svg { vertical-align: middle } .p-page__control .next-end:before,.p-page__control .next:before,.p-page__control .prev-end:before,.p-page__control .prev:before { display: inline-block; width: 12px; height: 18px; margin-top: -2px; background-repeat: no-repeat; background-position: center center; background-size: 16px 18px; vertical-align: middle } .p-page__control .prev-one:before,.p-page__control .prev:before { width: 6px; height: 18px; background-image: url(https://www.geumcheon.go.kr/common/images/program/p-icon-view.svg#angle-left); background-size: 18px 18px } .p-page__control .prev-end:before { background-image: url(https://www.geumcheon.go.kr/common/images/program/p-icon-view.svg#angle-double-left) } .p-page__control .next-one:before,.p-page__control .next:before { width: 6px; height: 18px; background-image: url(https://www.geumcheon.go.kr/common/images/program/p-icon-view.svg#angle-right); background-size: 18px 18px } .p-page__control .next-end:before { background-image: url(https://www.geumcheon.go.kr/common/images/program/p-icon-view.svg#angle-double-right) } .p-page__control .prev-one { display: none; background: 0 0 } .p-page__control .next-one { display: none; background: 0 0 } @media all and (max-width: 765px) { .p-pagination { display:block } .p-page { display: flex; margin: 0 } .p-page__link { display: inline-block; border-left: solid 1px #dedede } .p-page__link-group { display: none } .p-page__control { display: inline-block; width: 49.5%; margin: 0; border: none; text-align: right; height: 54px; line-height: 50px } .p-page__control:first-child { text-align: left } .p-page__control .next,.p-page__control .next-end,.p-page__control .prev,.p-page__control .prev-end { display: none } .p-page__control .next-one,.p-page__control .prev-one { display: inline-block; width: auto; min-width: 95%; background: #fafafa; font-size: inherit; text-indent: 0 } .p-page__control .prev-one:before { display: inline-block; width: 8px; height: 18px; margin: 0 10px 5px 0; background-image: url(https://www.geumcheon.go.kr/common/images/program/p-icon-view.svg#angle-left); background-repeat: no-repeat; background-position: center center; background-size: 16px 18px; vertical-align: middle } .p-page__control .next-one:after { display: inline-block; width: 8px; height: 18px; margin: 0 0 5px 10px; background-image: url(https://www.geumcheon.go.kr/common/images/program/p-icon-view.svg#angle-right); background-repeat: no-repeat; background-position: center center; background-size: 16px 18px; vertical-align: middle } } @media all and (max-width:1280px){ .inner { width:100%; } #header .inner { padding:0 12px; box-sizing: border-box; } #header .gnb ul li { margin-right:30px; } #header .gnb ul li a { font-size:16px; } .video-container { height:720px } .video-container .video-wrap video { min-height:720px; } .sub-visual { height:140px; background-clip:content-box } .sub-visual h2 { font-size:35px; } .addons { width:100%; padding:0 15px; box-sizing: border-box;} .sub-content .inner { padding:0 15px; box-sizing: border-box; } .grid-wrap .grid-box { width:calc(50% - 8px); } .gallery-wrap ul li.gallery-item { width:calc(100% / 3 - 1%); margin-right:1.5%; } .gallery-wrap ul li.gallery-item:nth-child(4n) { margin-right:1.5%; } .gallery-wrap ul li.gallery-item:nth-child(3n) { margin-right:0; } .gallery-wrap ul li.gallery-item .gallery-info strong { font-size:16px; } .sms-tit-wrap { background-size:500px 194px;} .sms-tit-wrap .sms-tit strong { font-size:28px; } .sms-tit-wrap .sms-tit p { font-size:14px; } .sms-tit-wrap .sms-tit .sms-tel-info { width:350px; height:48px;} .sms-tit-wrap .sms-tit .sms-tel-info p { font-size:16px;} .common-view .view-top .view-info { padding:0 20px; } .common-view .view-top .view-info .view-subj strong { font-size:22px;} .common-view .view-top .view-attachment ul li a.attachment-file .file-wrap span { font-size:14px; } } @media all and (max-width:1000px){ .sms-tit-wrap { padding:0 35px; background-size:450px 175px;} } @media all and ( max-width:1030px){ #header { height:85px;} #header .m-menu-toggle { display:block; } #header .gnbtop { display:none; } #header .inner { height:85px; position:relative; } #header .gnb { position:fixed; right:-100%; top:85px; width:100%; height:100%; z-index:10; background-color:#ffffff; border-top:1px solid #dddddd; padding:10px 0; background-color:#f2f2f2; } #header .gnb.on { right:0; } #header .gnb ul { display:block; } #header .gnb ul li { margin:0; border-bottom:1px solid #aaaaaa; } #header .gnb ul li a { display:block; padding:15px; color:#000; background-color:#fff; } #header .gnb ul li a:hover::after { display:none; } /* #header .gnb ul li:nth-child(1) a { background-color:#0f47a3; } #header .gnb ul li:nth-child(1).active a { color:#ffffff; } #header .gnb ul li:nth-child(1) { border-bottom:1px solid #153b79 } #header .gnb ul li:nth-child(2) a { background-color:#0c9795; } #header .gnb ul li:nth-child(2).active a { color:#ffffff; } #header .gnb ul li:nth-child(2) { border-bottom:1px solid #127472 } #header .gnb ul li:nth-child(3) a { background-color:#e9572c; } #header .gnb ul li:nth-child(3).active a { color:#ffffff; } #header .gnb ul li:nth-child(3) { border-bottom:1px solid #a33c1d } #header .gnb ul li:nth-child(4) a { background-color:#1991a3; } #header .gnb ul li:nth-child(4).active a { color:#ffffff; } #header .gnb ul li:nth-child(4) { border-bottom:1px solid #217d8b } */ #header .gnb ul li:nth-child(1) a:hover { color:#000; font-weight:600; } #header .gnb ul li:nth-child(2) a:hover { color:#000; font-weight:600; } #header .gnb ul li:nth-child(3) a:hover { color:#000; font-weight:600; } #header .gnb ul li:nth-child(4) a:hover { color:#000; font-weight:600; } .video-container { height:640px } .video-container .video-wrap video { min-height:640px; } .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box span { font-size:13px; } .grid-wrap .grid-box .grid-card a .txt-wrap .txt-box p { font-size:16px; } .gallery-wrap ul li.gallery-item { width:49.25%; margin-bottom:25px; } .gallery-wrap ul li.gallery-item:nth-child(3n) { margin-right:1.5%; } .gallery-wrap ul li.gallery-item:nth-child(2n) { margin-right:0; } .sms-tit-wrap { display:block; height:auto; background-image:none; padding:35px 25px; } .sms-tit-wrap .sms-tit strong { display:block; text-align: center; } .sms-tit-wrap .sms-tit p { text-align: center; } .sms-tit-wrap .sms-tit .sms-tel-info { margin: 25px auto 0 auto; } .sms-tit-wrap .m-sms-img { display:block; min-width:320px; width:100%; max-width:480px; margin: 0 auto; } .common-view .view-top .view-info { flex-wrap:wrap; } .common-view .view-top .view-info .view-subj { width:100%; } .common-view .view-top .view-info .view-date { margin-left:0; width:auto} .gnb {display:none;} .gnb_right .gnb_text { display:none; } #header .lnb { z-index:20; height:100%; } #header .lnb .lnb_link { display:block; } /* 열기 버튼 */ #header .lnb .menu_show { display:block; position:absolute; right:0; top:50%; transform: translateY(-50%); } #header .lnb .menu_show .menu_button {display:block; width:62px; height:62px; border-radius:50%; font-size:0; text-indent:-999999999em; } #header .lnb .menu_show .menu_button:before {display:inline-block; width:30px; height:25px; margin-right:-4px; margin-bottom:-6px; background-repeat:no-repeat; background-image:url(../images/m_menu.png); } /* 닫기 버튼 */ #header .lnb .menu_hide { display:block; position:absolute; visibility:inherit; top:19px; right:3%; font-size:0; text-indent:-99999999em; } #header .lnb .menu_hide .menu_button {display:block; width:16px; height:16px; background:url('/common/images/layout/lnb_sprite.png') no-repeat left top;} /* 메뉴 영역 */ #header .lnb .lnb_content {visibility:hidden; overflow-x:hidden; overflow-y:auto; position:fixed; top:0; right:-100%; width:100%; height:100%; padding-right:3%; padding-left:3%; box-sizing:border-box; background-color:#fff; transition-property:visibility, right; transition-duration:0.25s; transition-timing-function:linear;} /* 메뉴 열었을 때 */ .lnb_show, .lnb_show body {overflow:hidden;} .lnb_show #header .lnb .lnb_content {visibility:visible; right:0;} /* 주메뉴 링크 */ #header .lnb .lnb_link {display:block; margin-bottom:22px; padding-top:17px; padding-right:36px; padding-left:12px;} #header .lnb .lnb_link li {float:left; position:relative; margin-left:19px; padding-left:20px;} #header .lnb .lnb_link li:first-child {margin-left:0; padding-left:0;} #header .lnb .lnb_link li:before {display:block; position:absolute; top:4px; left:0; width:1px; height:10px; background-color:#575757;} #header .lnb .lnb_link li:first-child:before {display:none;} #header .lnb .lnb_link a {display:block; color:#272727; font-size:15px; line-height:17px;} /* 탭 버튼 */ #header .lnb .tab_menu .tab_nav {display:block; margin-bottom:15px; padding-top:2px; padding-right:2px; padding-left:2px; background-color:#272935;} #header .lnb .tab_menu .tab_nav .tab_list { display:flex; } #header .lnb .tab_item {width:50%; padding:19px 5px; box-sizing:border-box; text-align:center; transition:background-color 0.25s linear;} #header .lnb .tab_item.active {background-color:#fff;} #header .lnb .tab_nav a {display:inline-block; position:relative; padding-left:23px; color:#fff; font-size:17px; line-height:19px; transition-property:padding-left, color, font-weight; transition-duration:0.25s; transition-timing-function:linear;} #header .lnb .tab_item.active a {padding-left:33px; color:#2a2a2a; font-weight:600; text-decoration:none;} #header .lnb .tab_item a:before {display:block; opacity:0; position:absolute; top:0; left:0; width:19px; height:19px; border-radius:50%; background-color:#272935; transition:opacity 0.25s linear;} #header .lnb .tab_item.active a:before {opacity:1;} #header .lnb .tab_nav a:after {display:block; position:absolute; top:5px; left:0; width:9px; height:9px; background:url('/common/images/layout/lnb_sprite.png') no-repeat left -26px;} #header .lnb .tab_item.active a:after {top:7px; left:5px; width:10px; height:5px; background-position:left -45px;} /* 상, 하단 배경 */ #header .lnb .menu.before:before, .lnb .menu.after:after {display:none;} /* 풀다운 */ #header .menu.pulldown .depth2 {position:relative; width:auto;} /* 이치다운 */ #header .menu.eachdown .depth1_item {position:relative;} #header .menu.eachdown .depth2 {position:relative; width:auto;} /* 드롭다운 */ #header .menu.dropdown .depth2 {position:relative; top:auto; width:auto; transform:scaleY(1);} /* 메뉴 옵션 */ #header .lnb .depth_title {display:none;} #header .lnb .depth1.clearfix .depth1_list {float:none;} #header .lnb .depth_list.clearfix > .depth_item {float:none;} #header .lnb .depth_list.cut > .depth_item {display:block;} /* 주메뉴 공통 */ #header .lnb .depth_text {display:block;} /* 주메뉴 */ #header .lnb {position:absolute; top:0; left:0; width:100%;} /* 1차 메뉴 */ #header .lnb .tab_contents #nav .depth1 ul.depth1_list { display:block; } #header .lnb .depth1_item {padding:2px 2px 1px 2px; border-bottom:1px solid #e2e2e2; transition-property:border-bottom-color, background-color;} #header .lnb .depth1_item.has:before {display:block; position:absolute; top:19px; right:13px; width:17px; height:17px; background:url('/common/images/layout/lnb_sprite.png') no-repeat left -60px; transition-property:top, height, background-color;} #header .lnb .depth1_text {padding:15px 3px 16px 10px; color:#1e1e1e; font-size:18px; line-height:20px; transition-property:padding-left, color, font-weight;} #header .lnb .depth1_text[target='_blank'] {display:inline-block; margin-right:5px; padding-right:19px;} #header .lnb .depth1_text[target='_blank']:before {display:block; position:absolute; top:20px; right:0; width:12px; height:12px; background:url('/common/images/layout/blank_sprite.png') no-repeat left top; transition-property:none;} #header .lnb .depth1_item.has .depth1_text {margin-right:30px;} /* 1차 메뉴 활성화 */ #header .lnb .depth1_item.active {border-bottom-color:transparent; background-color:#272935;} #header .lnb .depth1_item.has.active:before {top:26px; height:2px; background-color:#fff; background-image:none;} #header .lnb .depth1_item.active .depth1_text {padding-left:20px; color:#fff; font-weight:600; text-decoration:none;} #header .lnb .depth1_item.active .depth1_text[target='_blank']:before {background-position:left -22px;} #header .lnb .tab_contents #nav .depth1 ul.depth1_list li { margin:0; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li a:hover::after { display:none; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li.active a::after { display:none; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1) a:hover { font-weight:600; color:#000 } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1) a:hover::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1).active a { color:#fff; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(1).active a::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2) a:hover { font-weight:600; color:#000 } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2) a:hover::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2).active a { color:#fff; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(2).active a::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3) a:hover { font-weight:600; color:#000 } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3) a:hover::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3).active a { color:#fff; font-weight:600 } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(3).active a::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4) a:hover { font-weight:600; color:#000 } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4) a:hover::after { background-color:#000; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4).active a { color:#fff; font-weight:600; } #header .lnb .tab_contents #nav .depth1 ul.depth1_list li:nth-child(4).active a::after { background-color:#000; } /* 패밀리 사이트 */ #family li {border-bottom:1px solid #e7e8e9;} #family .active {border-bottom-color:transparent; background-color:#383c4c;} #family a {display:block; position:relative; padding:17px 30px 18px 53px; color:#272935; font-size:17px; line-height:19px;} #family .active a {color:#fff; text-decoration:none;} #family a:before {display:block; position:absolute; background-image:url('/common/images/layout/lnb_sprite.png'); background-repeat:no-repeat;} #family .portal a:before {top:15px; left:9px; width:35px; height:25px; background-position:left -120px;} #family .health a:before {top:13px; left:15px; width:24px; height:29px; background-position:left -155px;} #family .health.active a:before {background-position:left -194px;} #family .edu a:before {top:12px; left:15px; width:26px; height:31px; background-position:left -233px;} #family .edu.active a:before {background-position:left -274px;} #family .gcb a:before {top:12px; left:12px; width:30px; height:30px; background-position:left -315px;} #family .gcb.active a:before {background-position:left -355px;} #family .mayor a:before {top:15px; left:9px; width:35px; height:25px; background-position:left -395px;} #family .mayor.active a:before {background-position:left -430px;} #family .council a:before {top:11px; left:10px; width:33px; height:32px; background-position:left -465px;} #family .council.active a:before {background-position:left -507px;} #family .dolbom a:before {top:12px; left:12px; width:30px; height:30px; background-position:left -703px;} #family .dolbom.active a:before {background-position:left -742px;} #family .live a:before {top:12px; left:12px; width:28px; height:33px; background-position:left -781px; } /* 20230403 */ #family .live.active a:before {background-position:left -821px;} /* 20230403 */ #family .schol a:before {top:16px; left:12px; width:32px; height:24px; background-position:left -864px; } /* 202307 */ #family .schol.active a:before {background-position:left -896px;} /* 202307 */ #family a:after {display:block; position:absolute; top:20px; right:16px; width:9px; height:15px; background:url('/common/images/layout/lnb_sprite.png') no-repeat left -549px;} #family .active a:after {background-position:left -574px;} /* 외국어 */ #header .lnb .lnb_lang {display:block; margin-top:22px; padding-bottom:22px;} #header .lnb .lnb_lang ul {margin-right:-3px; padding-left:1px;} #header .lnb .lnb_lang li {float:left; width:33.33%; margin-left:-1px; padding:9px 5px 10px; border:1px solid #e0e0e0; box-sizing:border-box; font-size:0; line-height:0; text-align:center;} #header .lnb .lnb_lang a {display:inline-block; position:relative; padding-left:32px; color:#272935; font-size:14px; line-height:16px;} #header .lnb .lnb_lang a:before {display:block; position:absolute; top:0; left:0; width:24px; height:16px; background-image:url('/common/images/layout/lnb_sprite.png'); background-repeat:no-repeat;} #header .lnb .eng a:before {background-position:left -599px;} #header .lnb .jpn a:before {background-position:left -625px;} #header .lnb .chn a:before {background-position:left -651px;} #header .lnb .kor a:before {background-position:left -677px;} } @media all and (max-width:768px){ .video-container { height:520px } .video-container .video-wrap video { min-height:520px; } .video-container .text-wrap { left:50%; transform: translateX(-50%) translateY(-50%); width:90%; margin:0 auto; background-color:rgba(0,0,0,0.2); padding:25px; box-sizing: border-box; } .video-container .text-wrap h2 { font-size:1.8rem; text-align: center; } .video-container .text-wrap p { text-align:center; font-size:1.2rem; } .sub-visual { height:100px; border-top-left-radius:0; border-bottom-right-radius:0; padding:0; } .sub-visual h2 { font-size:25px; } .common-view .view-top .view-info .view-subj strong { font-size:18px; } .common-view .view-top .view-attachment { padding:20px 15px; } .p-button { font-size:12px; } .grid-wrap .grid-box { width:100%; } } @media all and (max-width:640px){ .gallery-wrap ul li.gallery-item { width:100%; margin-right:0; } .gallery-wrap ul li.gallery-item:nth-child(3n) { margin-right:0; } } @media all and (max-width:460px){ #header .logo h1 { height:45px; } .sms-tit-wrap { padding:35px 15px } .sms-tit-wrap .sms-tit strong { font-size:23px; } .sms-tit-wrap .sms-tit .sms-tel-info { width:320px; } .sms-tit-wrap .sms-tit .sms-tel-info p { font-size:15px; } } @media all and (max-width:370px){ .video-container .text-wrap h2 { font-size:1.5rem; } .video-container .text-wrap p { font-size:1.1rem; } } @media all and (max-width:340px){ .video-container .text-wrap { padding: 30px 20px; } .video-container .text-wrap h2 { font-size:1.4rem; } .video-container .text-wrap p { font-size:0.95rem; letter-spacing:-0.05em; } } #footer .wrap { width:1280px; margin:0 auto; } @media all and (max-width:1280px){ #footer .wrap { width:auto; margin-right:0; margin-left:0; padding-right:3%; padding-left:3%; } } /* 사이트 */ .footer_site {position:relative; font-size:0; line-height:0; background-color:#272a36;} .footer_site .footer_site_item {float:left; position:relative; width:25%;} .footer_site .footer_site_btn {display:block; overflow:hidden; position:relative; width:100%; height:60px; padding-right:43px; padding-left:26px; border-right:1px solid #656871; color:#fff; font-size:16px; line-height:18px; text-align:left;} .footer_site .footer_site_item:first-child .footer_site_btn {border-left:1px solid #656871;} .footer_site .footer_site_btn:before {display:block; position:absolute; top:27px; right:25px; width:13px; height:8px; background:url('https://www.geumcheon.go.kr/common/images/layout/component/footer_site_sprite.png') no-repeat left top;} .footer_site .footer_site_content {display:none; position:absolute; bottom:0; left:0; width:100%; padding:2px; box-sizing:border-box; background-color:#3c435e;} .footer_site strong {display:block; position:relative; padding:20px 40px 20px 24px; color:#fff; font-size:16px; line-height:18px; font-weight:400;} .footer_site .footer_site_close {display:block; position:absolute; top:27px; right:27px; width:13px; height:8px; background:url('https://www.geumcheon.go.kr/common/images/layout/component/footer_site_sprite.png') no-repeat left -18px;} .footer_site .footer_site_link {overflow-x:hidden; overflow-y:auto; position:relative; max-height:206px;} .footer_site .footer_site_content ul {padding:12px 10px 17px; background-color:#fff;} .footer_site .footer_site_content li {margin-top:16px;} .footer_site .footer_site_content li:first-child {margin-top:0;} .footer_site .footer_site_content a {display:block; padding-left:13px; color:#313131; font-size:15px; line-height:17px; transition:font-weight 0.25s linear;} .footer_site .footer_site_content a:hover {font-weight:600;} @media all and (max-width:640px) { .footer_site .wrap {padding-right:0; padding-left:0;} .footer_site .footer_site_item {float:none; width:auto; border-top:1px solid #656871;} .footer_site .footer_site_item:first-child {border-top-width:0;} .footer_site .footer_site_btn {padding-right:3%; padding-left:3%; border-right-width:0;} .footer_site .footer_site_item:first-child .footer_site_btn {border-left-width:0;} .footer_site .footer_site_btn:before {right:3%;} .footer_site .footer_site_content {left:3%; width:94%;} .footer_site .strong {padding-right:37px;} .footer_site .footer_site_close {right:19px;} } /* 하단 내용 */ .footer_content {position:relative; z-index:20; padding:21px 217px 46px 236px;} .footer_content.type2 {padding-right:339px;} @media all and (max-width:1000px) { .footer_content {padding-left:0;} .footer_content.type2 {padding-right:217px;} } @media all and (max-width:640px) { .footer_content {padding:13px 3% 27px;} .footer_content.type2 {padding-right:3%;} } /* 하단 메뉴 */ .footer_nav {overflow:hidden; position:relative; z-index:10; padding:25px 57px 26px 26px; border-bottom:1px solid #ececeb;} .footer_nav ul {margin-top:-5px;} .footer_nav li {float:left; position:relative; margin-top:5px; margin-right:10px; padding-right:18px;} .footer_nav li:last-child {margin-right:0; padding-right:0;} .footer_nav li:before {display:block; position:absolute; top:7px; right:0; width:4px; height:4px; background-color:#848484; border-radius:50%;} .footer_nav li:last-child:before {display:none;} .footer_nav a {display:block; color:#373737; font-size:15px; line-height:18px;} .footer_nav .privacy a {color:#d12b4e;} @media all and (max-width:640px) { .footer_nav {padding-right:3%; padding-left:3%;} } /* 상단 바로가기 */ .footer_top {position:absolute; top:9px; right:0; z-index:30;} .footer_top a {display:block; width:52px; height:46px; padding-top:6px; border-radius:50%; background-color:#202e70; color:#fff; font-size:14px; line-height:16px; text-align:center;} .footer_top a:before {display:block; width:18px; height:18px; margin-right:auto; margin-bottom:6px; margin-left:auto; background:url('/common/images/layout/component/footer_top_sprite.png') no-repeat left top;} @media all and (max-width:1000px) { .footer_top {right:3%;} } @media all and (max-width:640px) { .footer_top {top:auto; bottom:37px; right:3%;} } /* 하단 로고 */ .footer_logo {position:absolute; top:35px; left:27px;} @media all and (max-width:1000px) { .footer_logo {display:none;} } /* 하단 정보 */ .footer_info {position:relative; color:#4b4b4b; font-size:15px; line-height:21px;} .footer_info mark {font-weight:600; background-color: transparent; color: inherit;} .footer_info .tel:after, .footer_info strong:after {display:inline; color:#c6c6c6; content:' / ';} .footer_info .tel {display: inline;} .footer_info strong {color:#d12b4e;font-weight:400;display: block;} .footer_info .footer-chatbot {font-size: 11px !important;display: inline-block;margin-left: 4px;padding: 3px 5px 2px 22px;background: #fff url(https://www.geumcheon.go.kr/portal/downloadBbsFileStr.do?atchmnflStr=OAjkrFNYQ%2F%2Bs25rTpJGLaQ%3D%3D) no-repeat 4px 4px;border: 1px solid #c8c8c8;border-radius: 12px;color: #636363;background-size: 16px auto;font-weight: 600;/* float: left; */} /*20210524 seoul talk icon*/ @media all and (max-width:640px) { .footer_info {font-size:14px; line-height:24px;} .footer_info mark {font-weight:400;} .footer_info .tel:after, .footer_info strong:after {display:none;} .footer_info strong {display:block;} } /* 웹접근성 마크 */ .footer_good {position:absolute; top:22px; right:350px; width:66px; height:66px; font-size:0; line-height:0;} .footer_wa {position:absolute; top:22px; right:234px; width:100px; height:69px; font-size:0; line-height:0;} .footer_wa a {display:block;} @media all and (max-width:1000px) { .footer_good {display:none;} .footer_wa {display:none;} } /* 서울시 배너 */ .footer_seoul {overflow:hidden; position:absolute; top:20px; right:0; width:210px; height:70px; border:1px solid #ededed; font-size:0; line-height:0;} .footer_seoul iframe {max-width:none; max-height:none;width:100%;} @media all and (max-width:640px) { .footer_seoul {position:static; margin-top:19px;} } button.grid-more { display:flex; align-items: center; justify-content: center; width:120px; height:35px; margin:25px auto; border:1px solid #dddddd; color:#333; letter-spacing: -0.025em; border-radius:25px; font-weight:500; font-family: 'S-CoreDream', 'NotoKr', 'Malgun Gothic', '留묒� 怨좊뵓', 'Dotum', '�뗭�', 'Gulim', '援대┝', sans-serif; } h3, .h3, h4, .h4{position: relative;} h3, .h3 {/*margin-top:30px;*/ margin-bottom:15px; padding-left:30px; color:#282a37; font-size:24px; line-height:26px; font-weight:500;} h3:before, .h3:before {display:block; position:absolute; left:0; top:5px; width:23px; height:17px; border-radius:10px; background-color:#282a37;} h3:after, .h3:after {display:block; position:absolute; top:10px; left:10px; width:5px; height:7px; background:url('https://www.geumcheon.go.kr/common/images/sub/template_sprite.png') no-repeat left -51px;} h4, .h4 {margin-top:25px; margin-bottom:15px; padding-left:30px; color:#171717; font-size:20px; line-height:22px;} h4:before, .h4:before {display:block; position:absolute; left:0; top:4px; left:6px; width:8px; height:8px; border:4px solid #636dab; border-radius:50%;} .mgb40{margin-bottom: 40px;} /* 목록 */ .bu{margin-top:10px; margin-bottom:10px; padding-left:23px; color:#414141; font-size:15px; line-height:22px; text-align:left;} .num {margin-top:10px; margin-bottom:10px; margin-left:23px; color:#414141; font-size:15px; line-height:22px; text-align:left;} .bu.type2, .num.type2 {color:#656565;} .bu > dt, .num > dt {color:#000;} .bu > li > .bu, .num > li > .bu{padding-left:0;} .bu > li > .blt, .num > li > .blt{margin-left:0;} .bu > li > .blt:before, .num > li > .blt:before{left:0;} .bu > li, .bu > dt {position:relative;} .bu > li, .bu > dt, .bu > dd {margin-top:10px; padding-left:13px;} .bu > li:first-child, .bu > dt:first-child {margin-top:0;} .bu > li:before {content:'';} .bu > li:before, .bu > dt:before {display:block; position:absolute; top:9px; left:0; width:4px; height:4px; background-color:#7a7a7a;} .bu.type2 > li:before, .bu.type2 > dt:before {top:11px; width:6px; height:1px; background-color:#727272;} .bu.type3 > li:before, .bu.type3 > dt:before {top:9px; left:0; width:5px; height:7px; background:url('/common/images/sub/template_sprite.png') no-repeat left -68px;} .num > li, .num > dt {position:relative;} .num > li, .num > dt, .num > dd {margin-top:10px; padding-left:34px;} .num > li:first-child, .num > dt:first-child {margin-top:0;} .num > li:before, .num > dt:before {display:block; position:absolute; top:0; left:0; width:22px; height:22px; background-color:#6f747c; color:#fff; font-size:14px; text-align:center;} ul.round li{padding:5px 0;} ul.round li .item{display:inline-block; width:83px; padding:4px 0; border-radius:14px; background-color:#4a4b53; font-size:16px; line-height:22px; font-weight:600; color:#fff; text-align:center;} ul.round li .cont{padding-left:14px;} ul.round.long li .item{display:inline-block; width:157px; padding:4px 0; border-radius:14px; background-color:#4a4b53; font-size:16px; line-height:22px; font-weight:600; color:#fff; text-align:center;} ul.round.type2 li{padding:5px 0;} ul.round.type2 li .item{display:inline-block; width:auto; min-width:calc(83px - 38px); padding:4px 19px; border-radius:14px; background-color:#4a4b53; font-size:16px; line-height:22px; font-weight:600; color:#fff; text-align:center;} ul.round.type2 li .cont{padding-left:14px;} /* 테이블 서식 */ .table {width: 100%; position:relative; margin-top:10px; margin-bottom:10px; border-top:1px solid #000; border-bottom:1px solid #000; border-collapse:separate; color:#373737; font-size:16px; line-height:22px; word-break: keep-all; overflow-wrap: break-word;} .table ul li{color:#373737; font-size:16px; line-height:22px;} .table ul.bu{margin-top:0; margin-bottom:0; padding-left:0;} .table dl.bu{margin-top:0; margin-bottom:0; padding-left:0;} .table ul.bu > li{margin-top:5px; color:#373737; font-size:16px; line-height:22px;} .table dl.bu > li{margin-top:5px; color:#373737; font-size:16px; line-height:22px;} .table ul.bu.type2 > li{margin-top:5px; color:#373737; font-size:16px;} .table dl.bu.type2 > li{margin-top:5px; color:#373737; font-size:16px;} .table ul.bu > li > ul.bu{margin-top:5px; margin-bottom:5px;} .table dl.bu > li > dl.bu{margin-top:5px; margin-bottom:5px;} .table dl dt{color:#373737; font-size:16px; line-height:22px;} .table dl dd{color:#373737; font-size:16px; line-height:22px;} .table .blt{margin-left:0; padding-left:13px;} .table .blt:before{left:0;} .table:before {display:block; position:absolute; top:0; left:0; width:1px; height:100%; background-color:#fff;} .table th, .table td {padding:14px 20px; border-top:1px solid #e2e2e2; border-left:1px solid #e2e2e2;} .table th {background-color:#f6f7f9; color:#1c1c1c; vertical-align: middle;} .table thead th {border-left-color:#a7a7a7; background-color:#ebeef3; color:#191919;} .table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table caption + tbody tr:first-child th, .table caption + tbody tr:first-child td, .table colgroup + tbody tr:first-child th, .table colgroup + tbody tr:first-child td {border-top-width:0;} .table thead th, .table thead td, .table tbody tr:first-child th, .table tbody tr:first-child td {border-top-color:#a7a7a7;} .table img {vertical-align:middle;} @media all and (max-width:1000px) { .table.type2 {width:940px;} } @media all and (max-width:640px) { .table.type3 {border-bottom-width:0;} .table.type3 colgroup, .table.type3 thead {display:none;} .table.type3 tbody, .table.type3 tfoot, .table.type3 tr, .table.type3 th, .table.type3 td {display:block; float:left; clear:left; width:100%; box-sizing:border-box;} .table.type3 tr { border-bottom:1px solid #c6c6c6; background-color:#fdfdfd;} .table.type3 th, .table.type3 td {padding:5px 10px; border-top-width:0; border-left-width:0; text-align:left;} .table.type3 th {border-top: 1px solid #a7a7a7; border-bottom: 1px solid #c6c6c6; padding-bottom: 10px; padding-top: 10px; margin-top: 10px;} .table.type3 th br{display: none;} .table.type3 th:before, .table.type3 td:before {display:inline; font-weight:600; content:attr(data-cell-header);} } #aiTranslation { display:flex; align-items:center; column-gap:4px; position:absolute; right:10px; top:2px; } #aiTranslation label { font-size:12px; letter-spacing:-0.05em } #aiTranslation select { font-size:13px; letter-spacing:-0.05em; border:1px solid #bbb; height:28px; border-radius:4px; } #aiTranslation .lang-btn { font-size:12px; letter-spacing:-0.05em; display:flex; align-items:center; justify-content:center; height:28px; padding:0 10px; border:1px solid #bbb; border-radius:4px; background-color:#fff; } @media (max-width: 1030px) { #aiTranslation { top:-31px; } } @media (max-width:640px) { #aiTranslation { flex-wrap:wrap; position:fixed; top:auto; right:3%; bottom:3%; background-color:#fff; padding:4px; border-radius:4px; box-shadow:0 0 15px rgba(0,0,0,0.4); max-width:180px; z-index:99999; } #aiTranslation label { width:100%; line-height:1.4; font-size:12px; } #aiTranslation select { width:calc(100% - 49px); font-size:12px; } #aiTranslation .lang-btn { width:45px; font-size:12px; } .lnb .menu_show { top:15px; } }