@charset "utf-8"; @import url(dark_mode.css); @import url(dark_combine_sub.css); /* * combine_sub.css * 컨텐츠 영역 공통영역 - 본청,구청 같이 사용 색상 등 만 변경시 각각의 경로 content.css 사용하여 변경할것. * * 1) root 설정 * 2) margin padding * 3) tab * 4) info box * 5) title * 6) indent box * 7) list text * 8) box * 9) table * 10) button * 11) bbs custom * 12) form * 13) diagram * 14) tip * 15) 조직도공통 * 16) 청사안내 공통 * 17) 회원가입 커스텀 * */ /* 1) root 설정 */ :root{ --color-base:#333; --color-point:#005bac; --color-point-rgba:rgba(0,91,172); --color-green:#00a161; --color-light-green:#49bb48; --color-black1:#111; --color-white:#fff; --color-red:#cf0e52; --color-orange:#f26d0c;/*#fe8126*/ --color-gray4:#444; --color-gray5:#555; --color-gray6:#666; --color-gray8:#888; --color-gray9:#999; --color-boxGray:#f8f9fa; --color-btnGray:#edeef1; --color-yellow:yellow; --font-tenada:'Tenada', Sans-serif; --font-pretendard:'Pretendard', Sans-serif; --font-TheJamsil:'TheJamsil', Sans-serif; --font-Roboto:'Roboto', Sans-serif; --font-PyeongChangPeace:'PyeongChangPeace', Sans-serif; --font-HSBombaram:'HSBombaram', Sans-serif; --font-GmarketSans:'GmarketSans', Sans-serif; --trans-ani:0.3s ease 0s; } body{font-family:'Pretendard', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; color:var(--color-base); letter-spacing:0; font-weight:400;} body{overflow:inherit; position:relative;} body.mobShow{overflow:hidden; position:fixed; width:100%;} *{-webkit-text-size-adjust:none;} button{color:var(--color-base);} .w80 { width:80%; } /* skip navigation */ #skip-navi{overflow:inherit; position:relative; width:auto; height:0px; z-index:9999; text-align:center;} #skip-navi a{display:block; position:absolute; top:-35px; left:0px; z-index:9999; width:auto; height:33px; line-height:31px; box-sizing:border-box; padding:0 10px; margin:0px; background:#262626; color:#eee; font-size:13px;} #skip-navi a:hover, #skip-navi a:focus, #skip-navi a:active{top:0px; height:33px; line-height:31px; padding:0 10px;} /* weight */ strong{font-weight:600;} /* text color */ .color_green { color:var(--color-green) !important;} .color_red { color:var(--color-red) !important;} .color_point { color:var(--color-point) !important;} .bg_red { background-color:var(--color-red) !important;} .bg_green { background-color:var(--color-green) !important;} .bg_point { background-color:var(--color-point) !important;} .bg_orange { background-color:var(--color-orange) !important;} .bg_gray { background-color:var(--color-gray8) !important;} /* align */ .tar{text-align:right !important;} .tal{text-align:left !important;} .tac{text-align:center !important;} .inline_flex { display:inline-flex; } /* img */ #content img{max-width:100%;} picture{display:block;} /* scroll */ ::-webkit-scrollbar {width:18px;} ::-webkit-scrollbar-thumb {border:5px solid #fff; border-radius:20px; background:#ccc;} ::-webkit-scrollbar-track{background:#fff;} /* 2) margin padding */ .mt0{margin-top:0px !important;} .mt10{margin-top:10px !important;} .mt20{margin-top:20px !important;} .mt30{margin-top:30px !important;} .mt40{margin-top:40px !important;} .ml20{margin-left:20px !important; } .ml0{margin-left:0 !important; } .mb0{margin-bottom:0 !important; } .mb20{margin-bottom:20px !important; } .pl20{padding-left:20px !important;} .pb10{padding-bottom:10px !important;} .pb0{padding-bottom:0px !important;} /* 3) tab */ .area_tab{margin-bottom:40px; padding:10px 15px; border:2px solid #e5e5e5; border-radius:10px;} .area_tab .list{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;} .area_tab .list > li{display:flex; flex-flow:row wrap; justify-content:center; align-items:center;} .area_tab .list > li > a, .area_tab .list > li > button{display:flex; justify-content:center; align-items:center; position:relative; width:100%; box-sizing:border-box; padding:10px 20px; border-radius:5px 15px; line-height:1.2em; color:#777; text-align:center; transition:var(--trans-ani);} .area_tab .list > li > a:before, .area_tab .list > li > button:before{content:''; opacity:0; display:block; position:absolute; left:50%; bottom:-5px; width:14px; height:14px; background:var(--color-point) url(../images/common/img_tab_arrow.svg) no-repeat 50% 50%; background-size:6px 5px; border-radius:100%; transform:translateX(-50%); transition:var(--trans-ani);} .area_tab .list > li > a.on, .area_tab .list > li > button.on, .area_tab .list > li > button.active{background-color:var(--color-point); font-weight:500; color:var(--color-white); box-shadow:0 10px 15px rgba(0,0,0,0.15);} .area_tab .list > li > a.on:before, .area_tab .list > li > button.on:before, .area_tab .list > li > button.active:before{opacity:1;} .conts_tab{display:none;} .conts_tab.active{display:block;} /* 3-1) tab2 */ .area_tab2 { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;} .area_tab2 > li { display:flex; flex-flow:row wrap; justify-content:center; align-items:center;} .area_tab2 > li > a { display:flex; justify-content:center; align-items:center; position:relative; width:100%; box-sizing:border-box; padding:10px 20px; border-radius:5px 15px; line-height:1.2em; color:#777; text-align:center; transition:var(--trans-ani);} .area_tab2 > li > a:before { content:''; opacity:0; display:block; position:absolute; left:0; bottom:0; width:100%; height:5px; background:var(--color-point); transition:var(--trans-ani);} .area_tab2 > li.active > a { font-weight:500; color:var(--color-point);} .area_tab2 > li.active > a:before { opacity:.3;} /* 4) info box */ .box_info_top{display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:50px; padding:30px 50px; background:#f2f7fd; border-radius:10px;} .box_info_top .ico{overflow:hidden; flex:none; display:flex; justify-content:center; align-items:center; width:100px; height:100px; box-sizing:border-box; margin-right:30px; padding:8px; background:var(--color-white) url(../images/common/img_info_default.gif) no-repeat 50% 50%; background-size:48px 52px; border-radius:100%;} .box_info_top .ico img{max-width:100%;} .box_info_top h4{margin:7px 0px 10px; font-size:20px; font-weight:700; color:var(--color-black1);} .box_info_top p{line-height:1.3em; font-size:18px; color:var(--color-gray4); font-weight:300; word-break:keep-all;} /* 5) title */ .title_h4{position:relative; margin-top:40px; margin-bottom:20px; padding-left:20px; font-size:25px; color:var(--color-black1); font-weight:700; line-height:1.3em;} .title_h4:before, .title_h4:after{content:''; display:block; position:absolute; left:0px; width:6px; height:6px; background:var(--color-point); border-radius:100%;} .title_h4:before{top:8px;} .title_h4:after{top:16px; background:var(--color-green);} .title_h5{position:relative; margin-top:25px; margin-bottom:15px; padding-left:20px; font-size:20px; color:var(--color-black1); font-weight:700; line-height:1.3em;} .title_h5:before{content:''; display:block; position:absolute; left:0px; top:8px; width:4px; height:4px; box-sizing:initial; border:3px solid var(--color-point); border-radius:100%;} .title_h6{position:relative; margin-top:25px; margin-bottom:15px; padding-left:20px; font-size:18px; color:var(--color-black1); font-weight:700; line-height:1.3em;} .title_h6:before{content:''; display:block; position:absolute; left:0px; top:8px; width:5px; height:5px; box-sizing:initial; border-style:solid; border-color:var(--color-point); border-width:2px 2px 0 0; transform:rotate(45deg);} /* 6) indent box */ [data-indent="box"]{margin-left:20px;} /* 7) list text */ .list_dot{margin-top:15px;} .list_dot.col02 { display:flex; flex-wrap:wrap; gap:0 60px; justify-content: space-between;} .list_dot li{position:relative; margin-top:10px; padding-left:12px; line-height:1.3em;} .list_dot.col02>li { flex:0 1 calc(50% - 42px); } .list_dot.col02>li+li { margin-top:0; } .list_dot li:first-child{margin-top:0px;} .list_dot li strong{font-weight:600;} .list_dot li:before{content:''; display:block; position:absolute; left:0px; top:8px;} .list_dot li.bef_t14:before { top:16px; } .list_dot > li:before{width:5px; height:2px; background:var(--color-gray6);} .list_dot > li ul{margin-top:10px;} .list_dot > li ul li{margin-top:7px;} .list_dot > li > ul > li:before{opacity:0.6; width:3px; height:3px; background:var(--color-gray6); border-radius:100%;} .list_dot > li > ul > li > ul li:before{opacity:1; top:9px; width:3px; height:1px; background:var(--color-gray6);} .list_dot.row{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;} .list_dot.row > li{margin-right:30px; margin-top:0px; margin-bottom:5px;} .list_dot .box_text_line{margin-top:10px;} .list_dot li .table{margin-top:10px;} table .list_dot{margin-top:0px;} table .list_dot li{margin-top:5px;} table .list_dot > li ul{margin-top:5px;} /* list number */ .list_num{counter-reset:title; margin-top:15px;} .list_num > li{position:relative; margin-top:10px; padding-left:25px; line-height:1.3em;} .list_num > li:first-child{margin-top:0px;} .list_num > li:before{counter-increment:title; content:counter(title) " "; display:flex; justify-content:center; align-items:center; position:absolute; left:0px; top:0px; width:20px; height:20px; box-sizing:border-box; border:1px solid var(--color-gray5); border-radius:100%; line-height:1em; font-size:13px; font-weight:600; text-align:center; color:var(--color-gray5);} .list_num.point > li:before{border-color:var(--color-point); color:var(--color-point);} table .list_num{margin-top:0px;} /* list imgTitle */ .list_imgTitle{margin-top:20px;} .list_imgTitle > li{display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:30px;} .list_imgTitle .img{flex:1 0 var(--imgSize); overflow:hidden; display:block; border-radius:0 20px;} .list_imgTitle .txt{flex:auto; width:100%; box-sizing:border-box; margin-top:auto; margin-left:-70px; padding:20px 50px 40px 50px; background-color:#fff; border-radius:20px 0 0 0;} /* list img bullet */ .list_check{display:flex; flex-wrap:wrap; align-items:stretch; margin-top:20px;} .list_check > li{flex:0 1 calc(50% - 10px); display:flex; justify-content:flex-start; align-items:flex-start; position:relative; box-sizing:border-box; margin-right:10px; margin-top:20px; padding-left:25px; line-height:1.3em;} .list_check > li:nth-of-type(1), .list_check:not(.col01) > li:nth-of-type(2){margin-top:0px;} .list_check:not(.col01) > li:nth-child(2n){margin-left:10px; margin-right:0px;} .list_check > li:before{content:''; display:block; position:absolute; left:0px; top:2px; width:16px; height:16px; background:url(../images/content/bul_check.svg) no-repeat 50% 0; background-size:100%;} .list_check > li em{flex:none; width:90px; box-sizing:border-box; font-weight:600;} .list_check > li em + *{flex:auto; padding-left:10px; font-weight:300;} .list_check.col01 > li{flex:0 1 100%;} /* list file */ [data-viewfile] > li{position:relative; padding-left:22px; line-height:1.3em; margin-top:5px;} [data-viewfile] > li:before{content:''; display:block; position:absolute; left:0px; top:2px; width:18px; height:18px; background:url(../images/bbs/icon_file.png) no-repeat 50% 0; background-size:auto;} [data-viewfile] > li:nth-of-type(1){margin-top:0px;} /* list image+text */ .img_bulet_list { display:flex; flex-wrap:wrap; gap:30px; } .img_bulet_list>li { display:flex; flex-wrap:wrap; justify-content:space-between; flex:0 1 calc(50% - 15px); align-items: flex-start;} .img_bulet_list>li .img_area { width:18em; border-radius:0 15px; overflow:hidden } .img_bulet_list>li .img_area img { width:100%; } .img_bulet_list>li .cont { width:calc(100% - 19em); } /* 8) box */ /* tex box */ [class*="box_text_"]{margin-top:15px; padding:20px; border-radius:5px;} [class*="box_text_"] .btn{margin-top:5px;} .box_text_gray{background:var(--color-boxGray);} .box_text_line{border:3px solid #e5e5e5;} /* flex box */ .box_flex{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;} .box_flex.between{justify-content:space-between; align-items:center;} .box_flex.titleh4{margin-top:40px; margin-bottom:20px;} .box_flex.titleh5{margin-top:15px; margin-bottom:15px;} .box_flex .title_h4, .box_flex .title_h5{margin-top:10px; margin-bottom:0px;} .box_flex .title_h4 + p, .box_flex .title_h5 + p{margin-left:20px; padding-top:10px;} /* img box */ .box_img_conts{padding:10px 0px; text-align:center;} /* 9) table */ table{border-spacing:0; border-collapse:collapse;} table.table{width:100%; margin-top:20px; border-top:2px solid var(--color-black1);} table.table thead th{padding:15px 10px; background:#f8f9fa; border:1px solid #ddd; font-weight:600; color:var(--color-black1);} table.table thead tr:nth-of-type(1) th{border-top-width:0px;} table.table thead tr.none th{border-bottom-width:0px;} table.table thead tr.none + tr th{border-top:1px solid #ddd;} table.table thead th[rowspan]{border-right:1px solid #ddd;} table.table tbody th{background-color:#f8f9fa; border:1px solid #ddd; font-weight:700;} table.table th, table.table td{padding:15px 10px; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all; font-family:var(--font-pretendard);} table.table td small{font-size:12px; color:var(--color-gray6);} table.table th{text-align:center; font-weight:500; color:var(--color-black1);} /* thead - line */ table.table .line_right{border-right:1px solid #ddd;} table.table .line_left{border-left:1px solid #ddd;} table.table .line_bottom{border-bottom:1px solid #b9c2db;} /* tbody */ table.table thead + tbody tr td{text-align:center;} table.table tbody td{background:var(--color-white); border:1px solid #ddd;text-align:left;} table.table tbody tr:nth-of-type(1) td, table.table tbody tr:nth-of-type(1) th{border-top-width:0px;} /* table text align */ table.table.tal td, table.table .tal{text-align:left !important;} table.table.tar td, table.table .tar{text-align:right !important;} table.table.tac td, table.table .tac{text-align:center !important;} table.table.tac td.tal{text-align:left !important;} table.table .list{margin-top:0px;} table.table td input[type="text"], table.table td select, table.table td textarea{width:100%;} /* table total */ table.table .total th, table.table .total td{background-color:#f2f7fd; font-weight:600;} table.table .total th{font-weight:700;} /* table bg */ table.table .bg_red, table.table tr.bg_red th, table.table tr.bg_red td{background-color:#fdf2f2;} table.table .bg_green, table.table tr.bg_green th, table.table tr.bg_green td{background-color:#ecfbfb;} /* table scroll mobile */ #content .scrollTable{width:100%;} #content .mob_info{display:none; position:relative; width:100%; box-sizing:border-box; margin-top:10px; padding:7px 7px 7px 35px; background:var(--color-white); border:1px dashed #cfcfcf; border-radius:3px; font-size:13px;} #content .mob_info:before{content:''; display:block; position:absolute; top:7px; left:7px; width:20px; height:18px; background:url(../images/common/img_drag.svg) no-repeat 50% 0; background-size:100%;} /* 10) button */ .area_btn{margin-top:20px;} .area_btn.center{margin-top:40px; text-align:center;} .area_btn.flex{display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;} .button{overflow:hidden; display:inline-block; position:relative; min-width:130px; height:45px; box-sizing:border-box; margin:2px; padding:0 20px; background:var(--color-point); border:1px solid var(--color-point); border-radius:5px 15px; color:var(--color-white); box-shadow:none; vertical-align:middle; transition:var(--trans-ani);} .button span{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; z-index:2; height:100%; line-height:1.2em; color:var(--color-white); transition:var(--trans-ani);} .button.lg{min-width:195px; height:60px; font-size:18px;} .button.sm{min-width:80px; height:35px; border-radius:3px 10px; font-size:14px;} /* .button:before{content:''; display:block; position:absolute; top:0px; left:0px; width:100%; height:0; background:var(--color-point); filter:brightness(1.3); transition:0.4s ease 0s;} */ .button:hover, .button:focus{box-shadow:0 10px 20px rgba(0,0,0,0.15);} .button.white{background-color:var(--color-white); border-color:#dedede; font-weight:500;} .button.white span{color:var(--color-base);} .button.white:before{display:none;} .button.white:hover, .button.white:focus{border-color:var(--color-black1);} .button.black{background-color:var(--color-black1); border-color:var(--color-black1);} .button.black:before{background:var(--color-black1); filter:brightness(2.5);} .button.gray{background-color:var(--color-btnGray); border-color:var(--color-btnGray); font-weight:500;} .button.gray span{color:var(--color-base);} .button.gray:before{display:none;} .button.gray:hover, .button.gray:focus{border-color:var(--color-black1);} .button[target="_blank"] span:after{content:''; opacity:1; display:inline-block; width:16px; height:16px; margin-left:7px; background:url(../images/common/ico_newtab_orange.svg) no-repeat 50% 50%; background-size:100%; vertical-align:middle; transition:opacity var(--trans-ani);} .button.download span:after{content:''; opacity:1; display:inline-block; width:16px; height:16px; margin-left:7px; background:url(../images/common/ico_dowload.svg) no-repeat 50% 50%; background-size:100%; vertical-align:middle; transition:opacity var(--trans-ani);} .button.ico_kakao span:before, .button.ico_naver span:before, .button.ico_google span:before{content:''; display:inline-block; width:26px; height:26px; margin-right:5px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;} .button.ico_kakao span:before{background-image:url(../images/content/img_map_kakao.png);} .button.ico_naver span:before{background-image:url(../images/content/img_map_naver.png);} .button.ico_google span:before{background-image:url(../images/content/img_map_google.png);} .button.ico_kakao span:after, .button.ico_naver span:after, .button.ico_google span:after{display:none;} /* button bbs custom */ button.effect span, a.effect span, button.effect-1 span, a.effect-1 span, button.effect-2 span, a.effect-2 span{display:flex; justify-content:center; align-items:center;} /* 11) bbs custom */ #board_wrap *{box-sizing:border-box;} .headList .bdTotal span strong{color:var(--color-point); font-weight:500;} .bd_tabNav .tab_on a{background-color:var(--color-point);} .bd_tabNav .tab_on a:after{background-color:var(--color-point); border-color:var(--color-point);} /* search */ .area_search{position:relative; z-index:5; padding:15px 30px; background:#fff; border:1px solid #dbdbdb; border-radius:10px; box-shadow:0 20px 15px rgba(0,0,0,0.05); text-align:center;} .area_search input[type="checkbox"], .area_search input[type="radio"]{accent-color:#005bac; width:20px; height:20px;} .area_search fieldset{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; text-align:left;} .area_search fieldset > *{margin:0 5px;} .area_search input[type="text"]{height:50px; box-sizing:border-box; border:1px solid #ccc; border-radius:5px;} .area_search .searchCase{margin-right:30px; margin-top:3px; margin-bottom:3px;} .area_search .searchType{margin-top:3px; margin-bottom:3px;} .area_search .searchType select{height:55px; box-sizing:border-box; border:1px solid #ccc; border-radius:5px;} .area_search .searchForm{flex:auto; position:relative; max-width:550px; margin-top:3px; margin-bottom:3px;} .area_search .searchForm input[type="text"]{width:100%;} .area_search .searchForm .search_btn{display:block; position:absolute; right:0px; top:0px; width:65px; height:100%; padding:0px; background:url(../images/common/ico_search_form.svg) no-repeat 50% 50%; background-size:23px 23px; overflow:hidden; white-space:nowrap; text-indent:100%;} .area_search .tip_speech{display:inline-block; margin-top:15px; line-height:1.3em; word-break:keep-all; text-align:left;} .area_search ~ .headList{margin-top:20px;} .area_search .wr_period{display:flex; align-items:center;} .area_search .wr_period > span{margin:0 10px;} .area_search .wr_period em{position:relative;} .area_search .wr_period em input[type="text"]{width:155px; box-sizing:border-box; padding-right:40px;} .area_search .wr_period em a{display:inline-flex; align-items:center; position:absolute; top:50%; right:15px; transform:translateY(-50%);} .area_search .wr_period em a [class*="icon-"]{opacity:0.6; transition:opacity 0.3s ease 0s;} .area_search .wr_period em a:hover [class*="icon-"]{opacity:1;} .area_search [class*="btn_search"]{display:inline-flex; justify-content:center; align-items:center; min-width:100px; height:55px; box-sizing:border-box; padding:3px 10px; background:#fff; border:1px solid #ccc; border-radius:5px;} .area_search [class*="btn_search"] span{font-size:15px; color:#444;} .area_search [class*="btn_search"]:after{content:''; opacity:0.6; display:block; width:16px; height:16px; margin-left:5px; background:url(../images/content/btn_search_detail.svg) no-repeat 50% 50%; background-size:100%; transition:opacity 0.3s ease 0s;} .area_search [class*="btn_search"]:hover:after{opacity:1;} .area_search .btn_search_detail.active:after{opacity:1; transform:rotate(180deg);} .area_search_detail{display:none; --sizeHig:45px; padding:20px 30px; background:#edf5ff;} .area_search_detail input[type="text"], .area_search_detail select{width:100%; height:var(--sizeHig); border:1px solid #ccc; border-radius:5px;} .area_search_detail ul{display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch;} .area_search_detail ul li{flex:none; display:flex; align-items:center; width:calc(100% / 4); box-sizing:border-box; margin:5px 0px; text-align:left;} .area_search_detail label{flex:none; width:70px; box-sizing:border-box; padding-right:10px; font-size:15px; line-height:1.2em;} /* btn ico */ [class*="icon-"]{display:inline-block; width:20px; height:20px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;} .icon-calendar{background-image:url(../images/content/ico_calendar.svg);} .icon-search{background-image:url(../images/content/ico_search.svg);} .icon-reset{background-image:url(../images/content/ico_reset.svg);} .icon-list{width:19px; height:19px; background-image:url(../images/content/ico_list.svg);} .icon-photo{width:19px; height:19px; background-image:url(../images/content/ico_photo.svg);} .icon-interest{width:15px; height:15px; background-image:url(../images/content/ico_star.svg);} .icon-check{width:16px; height:16px; background-image:url(../images/content/ico_check.svg);} .icon-feel{width:16px; height:16px; background-image:url(../images/content/ico_bubble.svg);} .icon-card{width:24px; height:18px; background-image:url(../images/content/ico_card.svg);} .on .icon-interest{background-image:url(../images/content/ico_star_on.svg);} /* search btn */ [class*="area_search"] .btn{display:inline-flex; justify-content:center; align-items:center; min-width:150px; height:45px; background:#fff; border:1px solid #dedede; border-radius:5px; color:var(--color-base);} [class*="area_search"] .btn [class*="icon-"]{margin-right:5px;} .area_search_btn{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:-20px; padding:40px 20px 20px; background:#f5f5f5; border-radius:0 0 10px 10px;} .area_search_btn .btn{margin:0 3px;} /* custom bbs */ .list_group .bbs_table th{line-height:1.3em;} .list_group .bbs_table.mob_head td.detail:before{content:attr(data-cell-header); display:none; margin-right:10px;} .list_group .title a strong{margin-right:6px;} .bbs_table .big_title{display:inline-block; margin-right:10px; font-weight:600;} .headList .SearchInfo{display:flex; align-items:center;} .headList .SearchInfo fieldset{display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;} .headList .SearchInfo .select { display:flex; gap:0 4px; } .headList .SearchInfo fieldset > *{margin:1px 2px;} .headList .SearchInfo fieldset > *:last-child{margin-right:0px;} .headList .SearchInfo fieldset select{height:40px; border-radius:0px;} .headList .SearchInfo fieldset input[type="text"]{border-radius:0px;} .headList .SearchInfo .page_choice_type + .page_view_count{margin-left:20px;} .headList .SearchInfo button{height:40px; box-sizing:border-box;} .page_view_count button.white{height:40px; margin-left:0px; background-color:#fff; border:1px solid #ccc; color:#444; white-space:nowrap;} .page_choice_type{display:inline-flex; align-items:center;} .page_choice_type a{display:flex; align-items:center; position:relative; margin:0 5px; padding-left:20px;} .page_choice_type a:before{content:''; display:block; position:absolute; left:3px; top:50%; width:1px; height:30px; margin-top:-15px; background:#dedede;} .page_choice_type a [class*="icon-"]{margin-right:5px;} .page_choice_type a:first-child{padding-left:0px;} .page_choice_type a:first-child:before{display:none;} .headList .SearchInfo .wr_period input{padding-right:35px;} .headList .wr_period{display:inline-flex; align-items:center;} .headList .wr_period em{ position:relative; display:inline-flex; align-items:center;} .headList .wr_period em a{display:inline-flex; justify-content:center; align-items:center; top:50% !important; right:5px !important; transform:translateY(-52%);} .headList .wr_period .slash{margin:0 3px;} /* 갤러리 목록 */ .gallery_list .gl_thumb{background-image:url(../images/content/img_none_logo.png); background-size:auto;} .gallery_list .gl_thumb .status{display:flex; justify-content:center; align-items:center; position:absolute; left:0px; bottom:0px; min-width:88px; height:40px; box-sizing:border-box; padding:3px 5px; background-color:#49863d; color:rgba(255,255,255,0.8); font-size:14px;} .gallery_list .gl_thumb .status.type01{background-color:#49863d;} .gallery_list .gl_thumb .status.type02{background-color:#005bac;} .gallery_list .gl_thumb .status.type03{background-color:#2e313c;} .gallery_list .gl_info dt em{display:block; font-size:16px; color:var(--color-point);} .gallery_list .bbsListNone{width:100% !important; margin:0 !important;} .gallery_list .gl_info.flex { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; line-height:1.2} .gallery_list .gl_info.flex dt { width:5em; margin-top:10px; font-size:1em; font-weight:500 } .gallery_list .gl_info.flex dd { width:calc(100% - 6.5em); text-align:left; margin-top:10px; } .gallery_list .gl_info .year { display:block; opacity:.54; } /* write */ .write_group ul li strong, .write_group ul li dl dt{display:inline-flex; align-items:center; min-height:40px; line-height:1.2em;} .write_group ul li strong .essential, .write_group ul li dl dt .essential{margin-left:3px;} .write_group ul li .radioBox, .write_group ul li .checkBox{display:inline-flex; flex-wrap:wrap; align-items:center; min-height:40px;} .write_group ul li .checkBox input[type=checkbox] + label{margin-left:7px;} .write_group ul li .checkBox span{float:none; width:auto; display:inline-flex; align-items:center; padding:0; margin-right:3%;} .write_group .radioBox span{position:relative;} .write_group .radioBox span input[type="radio"]{position:absolute; z-index:-1; width:22px; height:22px; margin:0px;} /* view */ .view-image-table { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:2em} .view-image-table .img_wrap { width:42%; } .view-image-table .img_wrap .thum { display:flex; margin-top:.5em; gap:0 10px; } .view-image-table .img_wrap .thum>li{ min-width:calc((100% - 30px) /4); background-image:url(../images/content/img_none_logo.png); background-size:80% auto; background-position:50% 50%; background-repeat: no-repeat; background-color:#fafafa } .view-image-table .cont { width:calc(100% - 47%); margin-top:2em } .view-image-table .cont strong { display:block; font-size:1.567em; font-weight:bold; line-height:1.4; } .view-image-table .cont .list { margin-top:1em; } .view-image-table .cont .list>li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; } .view-image-table .cont .list>li+li { margin-top:.25em; } .view-image-table .cont .list em { width:8em; font-weight:500; text-align:center; } .view-image-table .cont .list .text { width:calc(100% - 9em); } .view-group .view-table>ul>li { display:flex !important; flex-wrap:wrap; align-items:stretch; } .view-group .view-table>ul>li strong { height:auto !important } .view-group .view-table>ul>li>span { width:calc(100% - 200px); display:flex !important; align-items:center; flex-wrap:wrap } .view-group .view-table>ul>li>span * { display:block; width:100%;} .view-group .view-table>ul>li>div {padding:0 15px; display:flex; align-items:center; flex-wrap: wrap; width:calc(100% - 200px);} .view-group .view-table>ul>li>div>div {flex:0 1 100%;} .view-group .view-table>ul>li:has(div)>strong{display:flex; align-content:center; flex-wrap: wrap; justify-content: center; } /* input */ .inputFull{width:100%;} .input70{width:70px !important;} .col_w100{width:100%;} /* 글작성 */ .write_table>ul{display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch;} .write_table>ul>li{display:flex; justify-content:flex-start; align-items:stretch;} .write_table>ul>li>strong ~ *{flex:auto; display:flex; flex-wrap:wrap; align-items:center;} .write_table .lineBreak{display:flex; justify-content:flex-start; align-items:stretch;} .write_table>ul >li > strong, .write_table .lineBreak strong{flex:none;} .write_table .lineBreak strong ~ span{flex:auto;} .write_table .radioBox span{position:relative;} .write_table .radioBox span input[type="radio"]{position:absolute; z-index:-1; width:22px; height:22px; margin:0px;} .wr_editor{width:100%;} #smart_editor2{width:100% !important;} .write_table ~ .btnArea.typeC{display:flex; justify-content:center; align-items:center;} .write_table ~ .btnArea.typeC > *{margin:2px;} .write_table ~ .btnArea button.effect-3, .write_table ~ .btnArea a.effect-3{min-height:42px; display:flex; align-items:center; line-height:1} .it-txt{text-indent:0px;} .write_phone{display:flex; justify-content:flex-start; align-items:center;} .write_phone span{margin:0 5px;} .write_file input[type="file"]{width:100%; padding:5px 0px; font-size:15px;} .agree_check_box .designRadio{margin-top:5px; padding:5px; background-color:#f2f7fd; border:1px solid #e4eaf1; border-radius:5px; text-align:center;} .write_sign{padding-left:50px !important; padding-right:50px !important; text-align:right !important;} .write_sign .date{margin-top:10px;} .write_sign .name{padding:10px 0px;} .write_sign .city{text-align:center; letter-spacing:3px;} /* 글쓰기 공공누리 */ #bbs_sati_box { margin-top:3em; } #bbs_sati_box>.write_table>strong { display:block; text-align:center; font-size:1.067em; line-height:1; padding:1em 0; border-top:1px solid var(--color-black1) } #bbs_sati_box>.write_table ul li > strong { height:inherit; } #bbs_sati_box>.write_table ul li > strong .re { margin-left:5px; } #bbs_sati_box>.write_table ul li>span input[type="text"] { width:100%; } #bbs_sati_box .opencode_list { display:flex; flex-wrap:wrap; margin:1.5em 0; border:1px solid var(--color-btnGray); border-radius:5px; padding:.75em; box-sizing: border-box; } #bbs_sati_box .opencode_list>li { position:relative; flex:1; min-width:calc((100%) / 4); text-align:center; padding:0 .75em ; box-sizing: border-box;} #bbs_sati_box .opencode_list>li+li::before { position:absolute; left:0; top:0; width:1px; height:100%; background:var(--color-btnGray); content:''; } #bbs_sati_box .opencode_list>li>p span { display:block; font-size:1em; margin-top:10px; } #bbs_sati_box .opencode_list>li input { width:20px; height:20px; } #bbs_sati_box .opencode_list>li label { display:block; font-size:1.033em; } /* 캘린더 리스트*/ #boardWrap .move_list { display:flex; gap:0 5px; justify-content:flex-end;} #boardWrap .move_list select { height:38px; } #boardWrap .calendar_wrap { display:flex; flex-wrap:wrap; justify-content:space-between; } #boardWrap .calendar_wrap .calendar { width:45%; } #boardWrap .calendar_wrap .calendar .year { display:flex; align-items:center; justify-content:center;} #boardWrap .calendar_wrap .calendar .year strong { padding:0 2em; font-size:2.3em; font-weight:bold; color:#000; } #boardWrap .calendar_wrap .calendar .year button { position:relative; width:35px; height:35px; border:1px solid rgba(0,0,0,.1); border-radius:100%; text-align:center; padding:0; } #boardWrap .calendar_wrap .calendar .year button::before { position:absolute; width:9px; height:9px; top:50%; border-style:solid; border-color:var(--color-gray6); content:''; transform:translate(-50%,-50%) rotate(45deg); content:''; } #boardWrap .calendar_wrap .calendar .year button.prev::before { border-width:0 0 1px 1px; left:55%;} #boardWrap .calendar_wrap .calendar .year button.next::before { border-width:1px 1px 0 0; left:45%; } #boardWrap .calendar_wrap .calendar .calendar_list { border-top:1px solid var(--color-gray9); text-align:center; border-right:1px solid var(--color-btnGray); } #boardWrap .calendar_wrap .calendar .calendar_list .sun { color:var(--color-red) !important} #boardWrap .calendar_wrap .calendar .calendar_list .sat { color:var(--color-point) !important} #boardWrap .calendar_wrap .calendar .calendar_list>ul>li { flex:1; } #boardWrap .calendar_wrap .calendar .calendar_list ul.weekdays { display:flex; flex-wrap:wrap; background:var(--color-boxGray)} #boardWrap .calendar_wrap .calendar .calendar_list ul.weekdays li { padding:12px 10px; font-size:1em; border-left:1px solid var(--color-btnGray); border-bottom:1px solid var(--color-btnGray); font-weight:400 } #boardWrap .calendar_wrap .calendar .calendar_list .days { zoom:1; display:flex; flex-wrap:wrap;} #boardWrap .calendar_wrap .calendar .calendar_list .days:after { display:block; clear:both; content:""} #boardWrap .calendar_wrap .calendar .calendar_list .days>li { position:relative; height:60px; border-left:1px solid var(--color-btnGray); border-bottom:1px solid var(--color-btnGray); } #boardWrap .calendar_wrap .calendar .calendar_list .days>li:hover { background:rgba(241,97,68,.1); } #boardWrap .calendar_wrap .calendar .calendar_list .date { position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; line-height:60px; font-size:1em; color:var(--color-gray4); cursor:pointer } #boardWrap .calendar_wrap .calendar .calendar_list .date.choice { background:var(--color-point); color:var(--color-white) !important; font-weight:700 } #boardWrap .calendar_wrap .schedule { width:52%; margin-top:.5em } #boardWrap .calendar_wrap .schedule .title_h4 .day { color:var(--color-red); } #boardWrap .calendar_wrap .schedule .list { position:relative; border-top:2px solid var(--color-black1); } #boardWrap .calendar_wrap .schedule .list::before { position:absolute; width:4.4em; height:100%; left:0; top:0; background:var(--color-boxGray); content:''; z-index:-1 } #boardWrap .calendar_wrap .schedule .list>li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:.5em 0; font-size:1.1em; border-bottom:1px solid var(--color-btnGray); } #boardWrap .calendar_wrap .schedule .list strong { display:flex; width:4em; align-items:center; justify-content:center; } #boardWrap .calendar_wrap .schedule .list .text { width:calc(100% - 5em); line-height:1.3 } #boardWrap .move_list.line::after { display:inline-block;content:'';vertical-align: middle;margin:0 10px 0 6px;width:1px;height:30px;background: var(--color-black1);margin-top: 5px;opacity: .2;} /* 캘린더 뷰*/ #board_wrap .view-group .view-table.border_top { border-top:1px solid #d9d9d9; } #board_wrap .view-group .view-table .button.black>span { display:flex; padding:0; } /* 글쓰기 */ #board_wrap .write_group.new_2023 { padding:0; } #board_wrap .write_group.new_2023>ul>li { display:flex; flex-wrap:wrap; padding:0;align-items:stretch } #board_wrap .write_group.new_2023>ul>li+li { border-top:1px solid #e0e0e0; } #board_wrap .write_group.new_2023>ul>li>strong { width:20%; display:flex; align-items:center; justify-content:center; background:#f4f6f9 } #board_wrap .write_group.new_2023>ul>li>span, #board_wrap .write_group.new_2023>ul>li>.fileList { float:none; width:calc(100% - 20%); padding:.5em; background:none } #board_wrap .write_group.new_2023>ul>li.wr_cont { padding:1em 0; } #board_wrap .write_group.new_2023>ul>li .wr_period { display:flex; gap:1px 8px; align-items:center; flex-wrap:wrap } #board_wrap .write_group.new_2023>ul>li .wr_period label { flex:0 1 auto; } #board_wrap .write_group.new_2023>ul>li .wr_period em { flex:0 1 auto; } #board_wrap .write_group.new_2023>ul>li .wr_period em input[type="text"]{ width:100%; } #board_wrap .write_group.new_2023>ul>li .wr_period em a { top:50%; transform:translateY(-45%); } #board_wrap .btnArea { display:flex; justify-content:center; gap:0 5px; } /* 사전정보공표 모바일 제목출력 및 카테고리 아이콘 */ #boardWrap .iconMenuSwiper { padding:0 50px; } #boardWrap .iconMenuSwiper::after { position:absolute; right:0; top:0; width:50px; height:100%; content:''; background-image:linear-gradient(270deg, var(--color-white) 50%, rgba(255,255,255,0)); z-index:2;} #boardWrap .iconMenuSwiper::before { position:absolute; left:0; top:0; width:50px; height:100%; content:''; background-image:linear-gradient(90deg, var(--color-white) 50%, rgba(255,255,255,0)); z-index:2;} #boardWrap .iconMenuSwiper .swiper-slide>a { display:block; text-align:center; } #boardWrap .iconMenuSwiper .swiper-slide .icon, #boardWrap .iconMenuSwiper .swiper-slide .txt { display:block; } #boardWrap .iconMenuSwiper .swiper-slide .icon { width:80%; padding-top:80%; height:0; margin:0 auto; position:relative; border-radius:100%; background:var(--color-boxGray); border:3px solid transparent} #boardWrap .iconMenuSwiper .swiper-slide.act .icon { border:3px solid var(--color-point); } #boardWrap .iconMenuSwiper .swiper-slide .icon img { position:absolute; width:70%; left:50%; top:50%; transform:translate(-50%,-50%); } #boardWrap .iconMenuSwiper .swiper-slide .txt { margin-top:.5em; font-size:1.033em; } #boardWrap .list_group .bbs_table td .button.sm.white { display:flex;} #boardWrap .list_group .bbs_table td .button.sm.white>span { width:auto; height:auto; display:flex; } #boardWrap .iconMenuSwiper button { position:absolute; top:50%; width:40px; height:40px; transform:translateY(-50%); opacity:.5; z-index:3; cursor:pointer } #boardWrap .iconMenuSwiper button::before { position:absolute; width:15px; height:15px; border-style:solid; border-color:var(--color-gray9); left:50%; top:50%; content:'';} #boardWrap .iconMenuSwiper .button-prev { left:0; } #boardWrap .iconMenuSwiper .button-prev::before { border-width:0 0 1px 1px; transform:translate(-50%,-50%) rotate(45deg);} #boardWrap .iconMenuSwiper .button-next { right:0; } #boardWrap .iconMenuSwiper .button-next::before { border-width:1px 1px 0 0; transform:translate(-50%,-50%) rotate(45deg);} /* 12) form */ input, select{box-sizing:border-box;} input[type="text"], input[type="number"]{-webkit-appearance:none; border-radius:0;} input[type="text"]:disabled, input[type="number"]:disabled{opacity:1; -webkit-text-fill-color:inherit;} select{background-position-x:calc(100% - 10px);} .designRadio label{position:relative; padding-left:25px; margin-right:30px; cursor:pointer;} .designRadio label:last-child{margin-right:0px;} .designRadio label span:before{content:''; display:block; position:absolute; left:0px; top:-1px; width:20px; height:20px; box-sizing:border-box; background:var(--color-white); border:1px solid #ccc; border-radius:100%;} .designRadio input[type="radio"], .designCheck input[type="checkbox"]{position:absolute; left:1px; top:0px; width:18px; height:18px; background:transparent; border-width:0px; text-indent:0px !important;} .designRadio input[type="radio"]:checked + span:before{border:5px solid #005bac;} /* 신청페이지 */ #application_page .button{min-height:40px; border-radius:3px;} /* 13) diagram */ .area_diagram{overflow:hidden; margin-top:15px;} .area_diagram .list{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; --sizePadding:50px; margin-right:calc(var(--sizePadding) * -1);} .area_diagram .list > li{flex:0 1 20%; box-sizing:border-box; position:relative; margin-top:0px; margin-bottom:10px; padding-right:var(--sizePadding);} .area_diagram .list > li span{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; min-height:115px; height:100%; box-sizing:border-box; padding:10px; background-color:#f3f6ff; border:1px solid var(--color-point); border-top-width:4px; border-radius:10px; text-align:center; font-size:18px; font-weight:600; word-break:keep-all;} .area_diagram .list > li:before, .area_diagram .list > li:after, .area_diagram .list > li span:before{content:''; display:block; position:absolute; top:50%; transform:translateY(-50%);} .area_diagram .list > li:before{left:calc(100% - var(--sizePadding) - 6px); z-index:3; width:12px; height:12px; box-sizing:border-box; background:var(--color-white); border:1px solid #b2b2b2; border-radius:100%;} .area_diagram .list > li:after{right:10px; border-left:8px solid #818286; border-top:5px solid transparent; border-bottom:5px solid transparent;} .area_diagram .list > li span:before{right:15px; width:calc(var(--sizePadding) - 15px); height:1px; margin-top:-1px; background:#b2b2b2; transform:translateY(0);} .area_diagram .list > li span small{font-size:16px; font-weight:400; line-height:1.3} .area_diagram .list > li span i{line-height:1.3em;} .area_diagram .list > li:last-child:before, .area_diagram .list > li:last-child:after, .area_diagram .list > li:last-child span:before{display:none;} /* 한줄 갯수 4개 6개 */ .area_diagram .list.col03 > li{flex:0 1 33%;} .area_diagram .list.col04 > li{flex:0 1 25%;} .area_diagram .list.col06 > li{flex:0 1 calc(100% / 6);} /* 한줄 5개로 두줄처리 */ .area_diagram .list.row{margin-right:0px;} /* color */ .area_diagram.pink .list > li span{background-color:#fdf2fa; border-color:#c94ba7;} /* 디자인 다른타입 */ .area_diagram_type02{overflow:hidden; margin-top:15px;} .area_diagram_type02 .list{counter-reset:title_dia; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; --sizePadding:35px;} .area_diagram_type02 .list > li{flex:none; width:calc(100% / 3); box-sizing:border-box; position:relative; margin-bottom:30px; padding-right:var(--sizePadding);} .area_diagram_type02 .list > li:after{content:''; display:block; position:absolute; top:50%; right:calc(var(--sizePadding) / 2 - 4px); border-left:8px solid #818286; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:translateY(-50%);} .area_diagram_type02 .list > li div{overflow:hidden; display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; min-height:170px; height:100%; border:1px solid var(--color-point); border-radius:10px;} .area_diagram_type02 .list > li i{line-height:1.3em;} .area_diagram_type02 .list > li em, .area_diagram_type02 .list > li span{flex:0 1 100%; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; box-sizing:border-box; padding:10px 25px;} .area_diagram_type02 .list > li em{flex-wrap:nowrap; justify-content:flex-start; margin-bottom:auto; min-height:65px; background-color:var(--color-point); font-size:18px; font-weight:600; color:var(--color-white); word-break:keep-all;} .area_diagram_type02 .list > li em:before{flex:none; counter-increment:title_dia; content:counters(title_dia, ".", decimal-leading-zero)""; display:inline-flex; justify-content:center; align-items:center; width:42px; height:42px; margin-right:15px; background-color:rgba(0,0,0,0.2); border-radius:5px; font-size:16px; font-weight:500;} .area_diagram_type02 .list > li span{text-align:center; word-break:keep-all;} .area_diagram_type02 .list > li:last-child:after{display:none;} /* 디자인 다른타입 - 앞에 숫자없는 경우 */ .area_diagram_type02 .list.none_num > li em{justify-content:center; text-align:center;} .area_diagram_type02 .list.none_num > li em:before{display:none;} /* 디자인 다른타입 - 컬러 */ .area_diagram_type02.green .list > li div{border-color:#46a88b;} .area_diagram_type02.green .list > li em{background-color:#46a88b;} .area_diagram_type02.green .list > li em:before{background-color:rgba(0,0,0,0.1);} /* 다른타입 - 4개 출력 */ .area_diagram_type02 .list.col4 > li { width:calc(100% / 4); } /* 14) tip */ [class*="tip_"]{position:relative;} [class*="tip_"]:before{content:''; display:block; position:absolute; left:0px; background-size:100%; line-height:1.3em;} .tip_speech{padding-left:40px;} .tip_speech:before{top:2px; width:33px; height:19px; background:url(../images/common/ico_speech.svg) no-repeat 50% 0;} .tip_point{padding-left:20px;} .tip_point:before{top:4px; width:15px; height:15px; background:url(../images/content/ico_tip_point.svg) no-repeat 50% 0;} .box_flex .tip_point:before{top:14px;} /* 15) 조직도공통 */ [data-subarea="organization"] .list_organ{margin-top:55px; text-align:center; padding-left:40px; --sizeInterval:40px;} [data-subarea="organization"] .list_organ h4{display:inline-flex; justify-content:center; align-items:center; position:relative; width:250px; height:70px; margin-bottom:var(--sizeInterval); background-image:linear-gradient(90deg, var(--color-point), #009f63); border-radius:0 20px; box-shadow:0 20px 30px rgba(0,0,0,0.1);} [data-subarea="organization"] .list_organ h4 > *{display:inline-block; font-size:22px; color:var(--color-white); font-weight:700;} [data-subarea="organization"] .list_organ .list{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; position:relative; --sizeMargin:28px; margin-left:calc(var(--sizeMargin) * -1);} [data-subarea="organization"] .list_organ .list > li{position:relative; box-sizing:border-box; margin:var(--sizeInterval) 0; padding-left:var(--sizeMargin);} [data-subarea="organization"] .list_organ .list > li div{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; width:100%; height:100%; box-sizing:border-box; border:1px solid #dbdbdb; border-radius:0 20px 0 20px;} [data-subarea="organization"] .list_organ .list > li div > a{display:inline-flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; width:calc(100% + 2px); height:70px; margin:-1px; background:#eef1fc; border:2px solid #1f4394; border-radius:0 20px; font-size:18px; font-weight:500; color:#1f4394; transition:var(--trans-ani);} [data-subarea="organization"] .list_organ .list > li div > a:hover{background-color:#1f4394; color:var(--color-white);} [data-subarea="organization"] .list_organ .depth02{flex:auto; padding:20px 25px; text-align:left;} [data-subarea="organization"] .list_organ .depth02 > li{position:relative; margin-top:5px; padding-left:12px;} [data-subarea="organization"] .list_organ .depth02 > li:before{content:''; display:block; position:absolute; top:10px; left:0px; width:5px; height:2px; background:#adadad;} [data-subarea="organization"] .list_organ .depth02 > li a:hover{color:var(--color-point); text-decoration:underline;} [data-subarea="organization"] .list_organ .depth02 > li:hover:before{background:var(--color-point);} [data-subarea="organization"] .list_organ h4:before, [data-subarea="organization"] .list_organ .list > li div > a:before{content:''; display:block; position:absolute; bottom:-9px; left:50%; width:10px; height:10px; box-sizing:content-box; background-color:var(--color-white); border-radius:100%; border:3px solid #dbdbdb; transform:translateX(-50%);} [data-subarea="organization"] .list_organ .list > li div > a:before{top:-9px; bottom:auto;} [data-subarea="organization"] .list_organ h4:after, [data-subarea="organization"] .list_organ .list:before, [data-subarea="organization"] .list_organ .list > li:before, [data-subarea="organization"] .list_organ .list > li div > a:after{content:''; display:block; position:absolute; left:50%; z-index:-1; width:1px; background-color:#dbdbdb;} [data-subarea="organization"] .list_organ h4:after{top:100%; z-index:-1; height:calc(var(--sizeInterval) * 2); margin-left:-1px;} [data-subarea="organization"] .list_organ .list:before{left:0px; top:0px; height:50%;} [data-subarea="organization"] .list_organ .list > li div > a:after{top:calc((var(--sizeInterval) * -1) - 1px); height:var(--sizeInterval);} [data-subarea="organization"] .list_organ .list > li:before{left:0px; top:calc(var(--sizeInterval) * -1); width:100%; height:1px;} [data-subarea="organization"] .list_dong{border:4px solid transparent; background-image:linear-gradient(#fff, #fff), linear-gradient(90deg, var(--color-point), #009f63); background-origin:border-box; background-clip:content-box, border-box; border-radius:0 20px;} [data-subarea="organization"] .list_dong > ul{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; padding:20px 50px;} [data-subarea="organization"] .list_dong > ul > li{position:relative; width:calc(100% / 9); box-sizing:border-box; margin:7px 0px; padding-left:15px; font-size:18px; font-weight:500;} [data-subarea="organization"] .list_dong > ul > li:before{content:''; display:block; position:absolute; left:0px; top:11px; width:5px; height:5px; background:#aaadb3; border-radius:100%;} [data-subarea="organization"] .list_dong > ul > li a{display:inline-block;} [data-subarea="organization"] .list_dong > ul > li:hover:before{background:var(--color-point);} [data-subarea="organization"] .list_dong > ul > li a:hover{color:var(--color-point);} [data-subarea="organization"] .list_dong > ul > li a:hover span{box-shadow:0 1px 0px var(--color-point);} /* 상세 */ [data-subarea="organization_view"] .depart span:not(:nth-of-type(1)){position:relative; padding-left:20px;} [data-subarea="organization_view"] .depart span:not(:nth-of-type(1)):before{content:''; display:inline-block; position:absolute; left:6px; top:13px; width:7px; height:3px; background:#111;} .fax_num{position:relative; padding-left:30px;} .fax_num:before{content:''; display:block; position:absolute; left:0px; top:11px; width:21px; height:21px; background:url(../images/content/img_fax.svg) no-repeat 50% 50%; background-size:100%;} .fax_num em{margin-right:5px; font-weight:700;} /* 16) 청사안내 공통 */ .area_floor{display:flex; justify-content:flex-start; align-items:stretch; margin-top:40px; padding:30px; background:#eef1f9; border-radius:0 30px;} .area_floor .list{flex:none; width:250px;} .area_floor .list .title_h5{padding:25px 0 20px 40px; padding-bottom:20px; margin:0px; background-color:var(--color-white); border-bottom:1px solid #f0f0f0;} .area_floor .list .title_h5:before{top:32px; left:20px;} .area_floor .list ul{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; background-color:var(--color-white);} .area_floor .list ul > li{flex:1 1 50%; min-height:88px; margin-top:-1px;} .area_floor .list ul > li a, .area_floor .list ul > li button{opacity:0.7; display:flex; justify-content:center; align-items:center; width:100%; height:100%; box-sizing:border-box; background-color:var(--color-white); border:1px solid #f0f0f0; font-size:18px; font-weight:700; color:#444; transition:var(--trans-ani);} .area_floor .list ul > li a.active, .area_floor .list ul > li button.active{opacity:1; position:relative; z-index:5; background-color:var(--color-point); border-color:var(--color-point); border-radius:0 20px; box-shadow:0 20px 30px rgba(0,0,0,0.15); color:var(--color-white);} .area_floor .list ul > li a:hover, .area_floor .list ul > li button:hover{opacity:1;} .area_floor .list ul > li:nth-child(2n) a, .area_floor .list ul > li:nth-child(2n) button{border-left-width:0px;} .area_floor .view{flex:auto; display:flex; flex-flow:row wrap; padding:0 20px; text-align:center;} .area_floor .view p{flex:0 1 100%; margin-bottom:auto; line-height:1.3em; word-break:keep-all;} .area_floor .view .obj_img{flex:0 1 100%; margin:20px 0;} .area_floor .view .obj_img > span{display:none;} .area_floor .view .obj_img > span.active{display:block;} .area_floor .view .obj_img > span img{max-width:100%;} .area_floor .view .obj_img .under{display:flex; justify-content:center; align-items:center;} .area_floor .view .obj_img .under em{display:inline-flex; flex-flow:column nowrap; justify-content:center; align-items:center; width:160px; height:160px; box-sizing:border-box; margin:0 40px; padding:0 10px; background-color:#d5deff; border:1px solid #b4bfe7; border-radius:100%; line-height:1.3em;} .area_floor .view .obj_img .under em i{margin-bottom:10px; font-size:25px; font-weight:700; color:var(--color-point);} .area_floor .view .obj_img .under em br{display:none;} .area_floor .view .obj_img .under em:nth-of-type(2){background-color:#e5e8cb; border-color:#b8bd8e;} .area_floor .view .obj_img .under em:nth-of-type(2) i{color:#25670f;} .area_floor .view .obj_img .under em:nth-of-type(3){background-color:#fcf0d0; border-color:#ccbb8c;} .area_floor .view .obj_img .under em:nth-of-type(3) i{color:#d06422;} /* 17) 회원가입 커스텀 */ .join_agree .termsForm .termsCheck{box-sizing:border-box;} /* 생활문화>교통>불법주정차단속 및 과태료부과 표지판 출력 */ .img2_list { display:flex; flex-wrap:wrap; gap:0 2em } .img2_list>li { flex:1; border-radius:15px; background:var(--color-boxGray); padding:3em 2em; text-align:center; border:1px solid var(--color-btnGray) } .img2_list>li span { display:block; font-size:1.1em; font-weight:bold; margin-top:1em; } .img2_list>li+li { margin-top:0 !important; } .area_diagram.flowchart .list > li { padding-left:0; } .area_diagram.flowchart .list > li:last-child:before, .area_diagram.flowchart .list > li:last-child:after, .area_diagram.flowchart .list > li:last-child span:before { display:block; top:76.5%} .area_diagram.flowchart .list > li.span_two { display:flex; flex-wrap:wrap; gap:10px 0; } .area_diagram.flowchart .list > li.span_two span { flex:1 100%; height:calc(50% - 5px); min-height:inherit } .area_diagram.flowchart .list > li:last-child:before { left:calc(0% - var(--sizePadding) - 6px);} .area_diagram.flowchart .list > li:last-child:after { right:inherit; left:-18px; } .area_diagram.flowchart .list > li:last-child span:before { right:inherit; left:-45px; } .area_diagram.flowchart .list > li:nth-last-child(2):before, .area_diagram.flowchart .list > li:nth-last-child(2):after, .area_diagram.flowchart .list > li:nth-last-child(2) span:before { top:23.5%; } /*************** 행사 게시판 ***************/ /* 리스트 */ .event_wrap .schedule li a i { display:inline-block; padding:3px 5px; border-radius:10px; line-height:1; vertical-align:middle; margin-top:-2px; } .event_list_wrap { display:flex; flex-wrap:wrap; gap:40px} .event_list_wrap>li { flex:0 1 calc(50% - 20px); } .event_list_wrap>li>a { display:flex; flex-wrap:wrap; justify-content:space-between; } .event_list_wrap>li .img_area { position:relative; width:16.75em; overflow:hidden; height:0; padding-top:25em; background:#fafbff url(/resource/www/images/common/img_none_logo.png) no-repeat center; background-size:80% auto } .event_list_wrap>li .img_area img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; } .event_list_wrap>li .img_area .day { position:absolute; left:0; top:0; font-weight:500; background:var(--color-red); color:#fff; border-radius:0 10px 10px 0; padding:20px 8px 20px 7px; z-index:2; line-height:1; writing-mode: vertical-lr; } .event_list_wrap>li .cont { width:calc(100% - 18em); word-wrap:break-word; word-break:keep-all; } .event_list_wrap>li .cont strong { display:block } .event_list_wrap>li .cont strong>em { font-size:1.267em; line-height:1.2; margin-right:.5rem; letter-spacing:-.065em } .event_list_wrap>li .cont .class, .event_wrap .bbs_table i.class { display:inline-block; padding:5px 10px; font-size:.9em; color:#fff; border-radius:15px; line-height:1; margin-top:-4px; vertical-align:text-top; font-weight:300 ; margin-right:5px;} .event_list_wrap>li .cont dl { display:flex; flex-wrap:wrap; margin-top:.75em; border-radius:0 15px; background:var(--color-boxGray); padding:1.25em } .event_list_wrap>li .cont dl dt, .event_list_wrap>li .cont dl dd { width:100%; display:block; } .event_list_wrap>li .cont dl dt { font-size:.95em; font-weight:bold; opacity:.64; line-height:1; margin-bottom:.3rem; } .event_list_wrap>li .cont dl dd { line-height:1.3; margin-bottom:.7rem; } .event_list_wrap>li .cont .button { margin-top:1rem; } .event_list_wrap>li .cont .button i { display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; z-index:2; height:100%; line-height:1.2em; color:var(--color-gray6); transition:var(--trans-ani);} .event_wrap .bbs_table i.class { margin-top:-2px; } /* 열린강좌 */ .event_wrap.lecture .event_list_wrap>li { flex:100%; border:1px solid var(--color-btnGray); padding:1.5em; border-radius:8px 25px} .event_wrap.lecture .event_list_wrap>li .img_area { width:10.75em; padding-top:11em; } .event_wrap.lecture .event_list_wrap>li .cont { width:calc(100% - 12em); } .event_wrap.lecture .event_list_wrap>li .cont dl { align-items: center;} .event_wrap.lecture .event_list_wrap>li .cont dt { width:4em; } .event_wrap.lecture .event_list_wrap>li .cont dd { width:calc(100% - 5em); } .event_wrap.lecture .event_list_wrap>li .cont dt, .event_wrap.lecture .event_list_wrap>li .cont dd { margin-bottom:.5em; } /* 글쓰기 */ #board_wrap .write_group.new_2023>ul>li>span.radioBox>span>label { padding-left:28px; cursor:pointer } #board_wrap .write_group.new_2023>ul>li>span i.small { font-size:.9em; opacity:.74; margin-left:.5em; } /* 행정동현황 */ [data-subarea="sub010203"] .box_flex.dong {align-items:flex-start; --sizeMaign:40px; margin-left:calc(var(--sizeMaign) * -1);} [data-subarea="sub010203"] .box_flex.dong > div {width:calc(100% / 2 - var(--sizeMaign)); box-sizing:border-box; margin-left:var(--sizeMaign);} /* 120민원 */ .headList.box_text_gray, .faq_list * { box-sizing:border-box; } #boardWrap .qbox1 { display:flex; flex-wrap:wrap; gap:2px; } #boardWrap .qbox1 * { flex:auto; } #boardWrap .sorting_list { display:flex; justify-content:flex-end; gap:0 2px; margin-bottom:10px } /* 환경용어 */ .indwrap { margin-top:.5em; border-color:#33383E; border-style:solid; border-width:1px 0 } .indwrap>dl { display:flex; flex-wrap:wrap; box-sizing: border-box; align-items:normal;} .indwrap>dl+dl { border-top:1px solid #edeae7; } .indwrap>dl>dt { width:10em; background:var(--color-boxGray); padding:20px;} .indwrap>dl>dd { width:calc(100% - 10em); padding:10px; } .indwrap>dl>dd span { display:flex; flex-wrap:wrap; gap:2px 3px; } .indwrap>dl>dd span a { padding:10px; border:1px solid #edeae7; line-height:1; } .word_list { margin-top:1em; border-top:1px solid #33383E;} .word_list>dt, .word_list>dd { display:block; } .word_list>dt { position:relative; background:var(--color-boxGray); padding:10px 10px 10px 40px; font-size:1.067em; font-weight:500; border-bottom:1px dashed #edeae7 } .word_list>dt::before { content:''; display:block; position:absolute; left:20px; top:21px; width:4px; height:4px; box-sizing:initial; border:3px solid var(--color-point); border-radius:100%;} .word_list>dd { padding:20px; border-bottom:1px solid #edeae7 } /* 뷰어프로그램 */ .view_down{margin:30px 0} .view_down li{float:left;width:32%;text-align:center;border:1px solid #e5e5e5;border-radius: 10px;margin:0 0 1% 1%;box-sizing: border-box;padding:20px;} .view_down li:hover{border-color:#2475de; box-shadow: 0 0 15px 0 rgba(79, 143, 231, 0.15);} .view_down .tit{font-size:28px;font-weight:600} .view_down .tit span{display:block;font-size:16px;word-break: keep-all;border-top:1px dotted #e5e5e5;padding-top:10px;margin-top:10px;font-weight:normal;} /* 사이트맵 */ .sitemap_Warp{position:relative;} .sitemap_Warp:after{border-bottom:2px dashed #e9e9e9;padding-bottom:30px} .sitemap_Warp > ul:after{clear: both; display: block; content: ""} .sitemap_Warp > ul > li{display:inline-block;width:23%;margin-left:1%;margin-bottom:30px;vertical-align: top} .sitemap_Warp > ul > li:after{clear: both; display: block; content: ""} .sitemap_Warp > ul > li > div{border:1px solid #e9e9e9;border-radius: 10px;text-align:center;font-size:17px;margin-bottom:15px;box-sizing: border-box} .sitemap_Warp > ul > li > div a{display:inline-block;width:100%;padding:10px;} .sitemap_Warp > ul > li > div a:hover{border-color:#29a0e1; box-shadow: 0 0 10px 0 rgba(0, 91, 172, 0.15); font-weight:600;color:var(--color-point); border-radius: 10px;} .sitemap_Warp > ul > li > ul{margin-left:13px;} .sitemap_Warp > ul > li > ul > li{position:relative; margin-top:10px; padding-left:12px; line-height:1.3em;} .sitemap_Warp > ul > li > ul > li a:hover{color:var(--color-point);} .sitemap_Warp > ul > li > ul > li:before{content:''; display:block; position:absolute; left:0px; top:8px;width:5px; height:2px; background:var(--color-gray6);} .sitemap_Warp > ul > li > ul > li > ul { margin-top:.5em; background:var(--color-boxGray); padding:15px; border-radius:3px 15px; } .sitemap_Warp > ul > li > ul > li > ul > li { position:relative; padding-left:10px; line-height:1.2; } .sitemap_Warp > ul > li > ul > li > ul > li+li { margin-top:.25em; } .sitemap_Warp > ul > li > ul > li > ul > li::before { position:absolute; left:0; top:7px; width:3px; height:3px; background:rgba(0,0,0,.2); border-radius:100%; content:''; } .sitemap_Warp > ul > li > ul > li > ul > li > a:hover {color:var(--color-point);} /* 통합검색 */ #AllSearch .SearchConWrap .topSearchBox .scBox { position:relative; } #AllSearch .SearchConWrap .topSearchBox .scBox::before { position:absolute; left:30%; top:50%; transform:translateY(-50%); width:1px; height:50%; content:''; background:var(--color-gray9); } /* 레이어 팝업 */ #popup_layer { position:fixed; top:0; left:0; z-index:10000; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.4);} .popup_box { position:relative; top:50%; left:50%; width:max-content; min-width:250px; max-width:700px; transform:translate(-50%, -50%); z-index:1002; box-sizing:border-box; background:#fff; box-shadow:2px 5px 10px 0px rgba(0,0,0,0.35); -webkit-box-shadow:2px 5px 10px 0px rgba(0,0,0,0.35); -moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35); } .popup_box .popup_cont { display:flex; justify-content:center; line-height:1.4rem; font-size:14px; word-break: break-word; overflow-y:auto; max-height: calc(100vh - 100px); overflow-x:hidden} .popup_box .popup_cont img { max-width:100%; } .popup_box .popup_btn { display:flex; flex-wrap:wrap; width:100%;height:3em;background:var(--color-deepGray); word-break: break-word;} .popup_box .popup_btn a { position:relative; display:flex; align-items:center; justify-content:center; width:50%; height:100%; color:#fff; font-size:.987em; text-align:center; vertical-align:middle; text-decoration:none; background:var(--color-point);} .popup_box .popup_btn a:before { content:'';display:block;position:absolute;top:.8em;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} .popup_box .popup_btn a:after { content:'';display:block;position:absolute;top:.8em;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);} .popup_box .popup_btn a.close_day { background:#111;} .popup_box .popup_btn a.close_day:before, .popup_box .popup_btn a.close_day:after { display:none;} .popup_overlay { position:fixed;top:0px;right:0;left:0;bottom:0;z-index:1001;background:rgba(0,0,0,0.5); } @media screen and (max-width:1568px){ /* 행사 게시판 리스트 */ .event_list_wrap>li { flex:0 1 100%; } /* list image+text */ .img_bulet_list>li .img_area { width:16em; } .img_bulet_list>li .cont { width:calc(100% - 17em); } .img_bulet_list>li .cont h5 { margin-top:.5em; } } @media screen and (max-width:1500px){ /* 4) info box */ .box_info_top{padding:30px;} } @media screen and (max-width:1400px){ /* 11) bbs custom */ /* list */ .list_group .bbs_table.mob_head td.detail{display:inline-block; width:49%; box-sizing:border-box;} .list_group .bbs_table.mob_head td.detail:before{display:inline-block;} .gallery_list .gl_info dt em{font-size:14px; font-weight:600;} /* 사전정보공표 모바일 제목출력 및 카테고리 아이콘 */ #boardWrap .list_group .bbs_table td .button.sm.white { display:inline-flex; } /* 행사 게시판 리스트 */ colgroup.pc { display:none; visibility:hidden; } } @media screen and (max-width:1268px){ /* list image+text */ .img_bulet_list>li .img_area { width:14em; } .img_bulet_list>li .cont { width:calc(100% - 15em); } } @media screen and (max-width:1200px){ /* 7) list text */ .list_imgTitle .img{flex:1 1 var(--imgSize);} /* 11) bbs custom */ .bbs_table .big_title{font-size:16px; font-weight:700;} /* 13) diagram */ .area_diagram .list{--sizePadding:30px;} .area_diagram .list > li:after{right:5px;} .area_diagram .list > li span{font-size:17px;} .area_diagram .list > li span:before{right:6px; width:calc(var(--sizePadding) - 5px);} /* 디자인 다른타입 */ .area_diagram_type02 .list{--sizePadding:25px;} .area_diagram_type02 .list > li em{font-size:16px;} .area_diagram_type02 .list > li em:before{font-size:14px;} .area_diagram_type02 .list > li em, .area_diagram_type02 .list > li span{padding:10px 15px;} /* 16) 청사안내 공통 */ .area_floor .list{width:max(150px, 19.531vw/* 200px */);} .area_floor .list ul > li{min-height:75px;} } @media screen and (max-width:1168px){ /* 생활문화>교통>불법주정차단속 및 과태료부과 표지판 출력 */ .area_diagram.flowchart .list > li:last-child span:before { left:-35px; } .area_diagram.flowchart .list > li:last-child:after { left:-14px; } } @media screen and (max-width:1024px){ /* 4) info box */ .box_info_top{margin-bottom:40px;} .box_info_top p{font-size:16px;} /* 5) title */ .title_h4{margin-top:35px; font-size:max(22px, 2.441vw/* 25px */);} .title_h5{margin-top:15px; font-size:max(18px, 1.953vw/* 20px */);} .title_h5:before{top:7px;} .title_h6{margin-top:15px; font-size:max(16px, 1.953vw/* 20px */);} .title_h6:before{top:5px;} /* 6) indent box */ .title_h4 + [data-indent="box"]{margin-left:0;} .title_h5 + [data-indent="box"]{margin-left:0;} /* 7) list text */ .list_num > li{padding-left:23px;} .list_num > li:before{width:18px; height:18px; font-size:12px;} /* 8) box */ .box_flex.titleh4{margin-top:25px;} .box_flex.titleh5{margin-top:5px;} /* 9) table */ #content .scrollTable{overflow:auto;} #content .scrollTable .table{width:1024px; margin-top:0px;} #content .mob_info{display:block; margin-bottom:5px;} table.table thead th{padding:13px 9px;} /* 10) button */ .button.ico_kakao span:before, .button.ico_naver span:before, .button.ico_google span:before{width:21px; height:21px;} .button.ico_kakao span:before{background-image:url(../images/content/img_map_kakao@x3.png);} .button.ico_naver span:before{background-image:url(../images/content/img_map_naver@x3.png);} .button.ico_google span:before{background-image:url(../images/content/img_map_google@x3.png);} /* 11) bbs custom */ .area_search_detail ul li{width:calc(100% / 3);} .headList .SearchInfo{float:none; display:flex;} .headList .SearchInfo fieldset .wr_period{flex:0 1 100%; margin-top:3px; margin-bottom:3px;} /* 13) diagram */ .area_diagram .list > li span{min-height:100px; font-size:16px;} .area_diagram .list > li span small{display:block; font-size:14px;} .area_diagram .list > li span i br{display:none;} /* 디자인 다른타입 */ .area_diagram_type02 .list > li{width:calc(100% / 2);} .area_diagram_type02 .list > li span br{display:none;} /* 15) 조직도공통 */ [data-subarea="organization"] .list_organ h4 > *{font-size:20px;} [data-subarea="organization"] .list_organ .list > li div > a{font-size:16px;} [data-subarea="organization"] .list_organ .depth02 > li{font-size:15px;} [data-subarea="organization"] .list_dong > ul > li{width:calc(100% / 7); font-size:16px;} [data-subarea="organization"] .list_dong > ul > li:before{top:9px;} /* 16) 청사안내 공통 */ .area_floor{padding:30px 20px;} .area_floor .list ul > li a, .area_floor .list ul > li button{font-size:16px;} .area_floor .view .obj_img .under em{flex:0 1 calc(100% / 3 - 20px); margin:0px 10px; width:auto; border-radius:5px;} /* 갤러리 */ .gallery_list .gl_info.flex dd { width:calc(100% - 5.5em); } /* 캘린더 리스트*/ #boardWrap .calendar_wrap .calendar .year strong { padding:0 .75em; } #boardWrap .calendar_wrap .calendar .calendar_list .days>li { height:55px; } #boardWrap .calendar_wrap .calendar .calendar_list .date { line-height:55px; } /* 공통 view */ .view-group .view-table>ul>li>span, .view-group .view-table>ul>li>div { width:calc(100% - 20%); } .list_dot.col02 { gap:0 30px;} .list_dot.col02>li { flex:0 1 calc(50% - 27px); } /* 사이트맵 */ .sitemap_Warp > ul > li{width:32%} } @media screen and (max-width:868px){ /* list image+text */ .img_bulet_list>li { flex:0 1 100%; } .img_bulet_list>li .img_area { width:18em; } .img_bulet_list>li .cont { width:calc(100% - 19em); } } @media screen and (max-width:768px){ /* 4) info box */ .box_info_top .ico{--size:max(70px, 13.021vw/* 100px */); width:var(--size); height:var(--size);} /* 11) bbs custom */ [class*="area_search"] .btn{min-width:100px;} .area_search .wr_period{flex:0 1 100%;} .area_search .wr_period em{flex:auto;} .area_search .wr_period > span{flex:none;} .area_search .wr_period em input[type="text"]{width:100%;} .area_search_detail ul li{width:calc(100% / 2);} /* list */ .list_group .bbs_table.mob_head td.detail{display:block; width:auto;} .col_w100{width:100%;} .headList .SearchInfo{display:flex; justify-content:space-between;} .gallery_list .gl_thumb .status{min-width:80px; height:35px;} /* view */ .view-image-table .img_wrap { width:100%; } .view-image-table .cont { width:100%;} .view-image-table .cont .list em { width:6.5em; padding-left:5px; padding-right:5px;} .view-image-table .cont .list .text { width:calc(100% - 7.5em); } .view-con table th, .view-con table td { width:inherit !important } /* 13) diagram */ .area_diagram .list{margin-right:0px;} .area_diagram .list > li, .area_diagram .list.col04 > li, .area_diagram .list.col06 > li{flex:0 1 50%;} /* 15) 조직도공통 */ [data-subarea="organization"] .list_organ .list > li div > a{height:60px;} [data-subarea="organization"] .list_dong > ul{padding:20px 30px;} [data-subarea="organization"] .list_dong > ul > li{width:calc(100% / 5); font-size:15px;} [data-subarea="organization"] .list_dong > ul > li:before{top:8px; width:4px; height:4px;} /* 16) 청사안내 공통 */ .area_floor{display:block;} .area_floor .list{width:100%;} .area_floor .list ul > li{flex:1 1 30%; min-height:55px;} .area_floor .view{padding:30px 0px 0px 0px;} .area_floor .view .obj_img{margin-top:0px; margin-bottom:0px;} .area_floor .view p + .obj_img{margin-top:10px; margin-bottom:0px;} .area_floor .view .obj_img .under em i{font-size:22px;} /* 캘린더 리스트*/ #boardWrap .calendar_wrap .calendar { width:100%; } #boardWrap .calendar_wrap .schedule { width:100%; margin-top:2em; } /* 글쓰기 공공누리 */ #bbs_sati_box .opencode_list { position:relative; flex-wrap:wrap; } #bbs_sati_box .opencode_list>li { min-width:calc((100%) / 2); } #bbs_sati_box .open_license { padding-left:20px; } #bbs_sati_box .opencode_list>li:nth-child(3)::before { display:none; } #bbs_sati_box .opencode_list>li:nth-last-child(-n + 2) { margin-top:2em; } #bbs_sati_box .opencode_list::before { position:absolute; width:calc(100% - 1.5em); height:1px; left:50%; top:50%; background:var(--color-btnGray); transform:translateX(-50%); content:''; } /* 생활문화>교통>불법주정차단속 및 과태료부과 표지판 출력 */ .img2_list { gap:10px 0; } .img2_list>li { flex:0 1 100%; padding:2em } .area_diagram.flowchart .list > li { flex:0 1 100%; padding-right:0; margin-bottom:25px; } .area_diagram.flowchart .list > li:before { top:inherit; bottom:-5px; left:50%; transform:translateX(-50%) translateY(0); } .area_diagram.flowchart .list > li:after { top:inherit; right:inherit; left:50%; bottom:-20px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid #818286; border-bottom:0px; transform:translateX(-50%)} .area_diagram.flowchart .list > li span:before { right:inherit; left:50%; width:1px; height:calc(var(--sizePadding) - 15px); top:inherit; bottom:-15px } .area_diagram.flowchart .list > li:nth-last-child(2):before, .area_diagram.flowchart .list > li:nth-last-child(2):after, .area_diagram.flowchart .list > li:nth-last-child(2) span:before { top:inherit; } .list_dot li.bef_t14:before { top:8px; } /* 뷰어프로그램 */ .view_down li{width:100%} /* 사이트맵 */ .sitemap_Warp > ul > li{width:48%} /* 레이어팝업 */ .popup_box { width:94%; } } @media screen and (max-width:668px){ /* 사전정보공표 모바일 제목출력 및 카테고리 아이콘 */ #boardWrap .cate_wrap { padding:20px 10px; } #boardWrap .iconMenuSwiper { padding:0 30px; } #boardWrap .iconMenuSwiper::after { width:30px; } #boardWrap .iconMenuSwiper::before { width:30px; } #boardWrap .iconMenuSwiper .swiper-slide { max-width:7em; } #boardWrap .iconMenuSwiper .swiper-slide .txt { font-size:1em; } #boardWrap .iconMenuSwiper button { width:30px; height:30px; } #boardWrap .iconMenuSwiper .button-prev { left:-10px; } #boardWrap .iconMenuSwiper .button-next { right:-10px; } .list_dot.col02 { gap:20px;} .list_dot.col02>li { flex:0 1 100%; } /* 9) table */ #content .scrollTable .table {width:924px;} /* 행정동현황 */ [data-subarea="sub010203"] .box_flex.dong > div { width:calc(100% / 1 - var(--sizeMaign)); } [data-subarea="sub010203"] .box_flex.dong > div+div { margin-top:1em; } /* 열린강좌 */ .event_wrap.lecture .event_list_wrap>li .cont { width:100%; margin-top:1em } #boardWrap .move_list.line { width:100%; justify-content:flex-start } #boardWrap .move_list.line::after { display:none; } #boardWrap .move_list.line>li>select { width:inherit; } #boardWrap .move_list.line>li .button { margin:0; } } @media screen and (max-width:580px){ /* 4) info box */ .box_info_top{padding:20px;} .box_info_top .ico{margin-right:20px; background-size:38px 42px;} .box_info_top h4{font-size:18px;} .box_info_top p{font-size:14px;} /* 7) list text */ .list_imgTitle > li{display:block;} .list_imgTitle .txt{margin-left:0px; padding:1.25em;} .list_check > li{flex:0 1 100%;} .list_check:not(.col01) > li:nth-child(2n){margin-left:0px;} .list_check:not(.col01) > li:nth-of-type(2){margin-top:20px;} /* 10) button */ .button.sm { height:auto; padding:10px; } /* 11) bbs custom */ /* search */ .area_search fieldset{justify-content:flex-start;} .area_search input[type="text"]{height:45px;} .area_search .searchType select{height:45px;} .area_search .searchForm .search_btn{width:55px; background-size:18px 18px;} .area_search [class*="btn_search"]{height:45px;} .area_search_detail{--sizeHig:40px;} /* 13) diagram */ /* 디자인 다른타입 */ .area_diagram_type02 .list > li{width:100%; padding-right:0px;} .area_diagram_type02 .list > li:after{right:auto; left:50%; top:auto; bottom:-23px; border-top:8px solid #818286; border-bottom:0px; border-left:5px solid transparent; border-right:5px solid transparent; transform:translateY(-50%) translateX(-50%);} .area_diagram_type02 .list > li em{min-height:55px; font-size:15px; word-break:break-all;} .area_diagram_type02 .list > li em:before{width:35px; height:35px; margin-right:10px; font-size:13px;} .area_diagram_type02 .list > li div{min-height:150px;} .area_diagram_type02 .list > li:last-child{margin-bottom:0px;} /* 다른타입 - 4개 출력 */ .area_diagram_type02 .list.col4 > li { width:100%; } /* 15) 조직도공통 */ [data-subarea="organization"] .list_organ h4{height:60px;} [data-subarea="organization"] .list_dong > ul > li{width:calc(100% / 3); margin:5px 0px; padding-left:10px;} /* 16) 청사안내 공통 */ .area_floor .view .obj_img .under{align-items:stretch;} .area_floor .view .obj_img .under em{height:auto; margin:0 5px; padding:30px 10px;} .area_floor .view .obj_img .under em br{display:block;} /* 갤러리 */ .gallery_list .gl_info.flex dt { width:100%; } .gallery_list .gl_info.flex dd { width:100%; margin-top:2px; } /* 캘린더 리스트*/ #boardWrap .calendar_wrap .calendar .year strong { font-size:2.2em; } #boardWrap .calendar_wrap .calendar .calendar_list ul.weekdays li { padding:8px; } #boardWrap .calendar_wrap .calendar .calendar_list .days>li { height:45px; } #boardWrap .calendar_wrap .calendar .calendar_list .date { line-height:45px; } /* 행사 게시판 리스트 */ .event_list_wrap { gap:20px; } .event_list_wrap>li { border:1px solid var(--color-btnGray); padding:2em; border-radius:0 15px; } .event_list_wrap>li .img_area { width:100%; padding-top:145%; } .event_list_wrap>li .cont { width:100%; margin-top:1.5em; } #board_wrap .write_group.new_2023>ul>li>span i.small { display:block; margin-top:.25em; } #board_wrap .write_group.new_2023>ul>li>span.radioBox { gap:5px; } /* list image+text */ .img_bulet_list>li .img_area { width:15em; } .img_bulet_list>li .cont { width:calc(100% - 16em); } .indwrap>dl>dt { width:100%; padding:10px; } .indwrap>dl>dd { width:100%; } } @media screen and (max-width:460px){ /* 11) bbs custom */ .headList .page_view_count select{width:60px;} .page_view_count button.white{width:60px; height:35px; margin-left:3px;} .headList .SearchInfo fieldset .wr_period{display:flex; justify-content:space-between; align-items:center;} .headList .SearchInfo fieldset .wr_period em{width:calc(100% / 2 - 10px);} .headList .SearchInfo fieldset .wr_word{flex:0 1 100%; margin-bottom:2px; } .headList .SearchInfo fieldset .wr_period + .wr_word{flex:none; width:25%;} .headList .SearchInfo fieldset .sch_bbs{flex:none; width:55%;} .headList .SearchInfo fieldset button{flex:none; width:16%; height:35px; white-space:nowrap;} .headList .SearchInfo fieldset .wr_word select, .headList .SearchInfo fieldset .sch_bbs input, .headList .SearchInfo .wr_period input{width:100%; height:35px; box-sizing:border-box;} .headList .SearchInfo .wr_period .slash{flex:none; width:10px;} .headList .SearchInfo select{margin-right:0px;} .headList .wr_period em a{top:5px;} .headList .SearchInfo .select { width:100%; flex-wrap:wrap; margin-bottom:2px; gap:2px } .headList .SearchInfo .select select { width:100% !important; height:35px; } .headList .SearchInfo ul.select>li { width:calc(50% - 1px); } /* search */ .area_search .searchType{flex:auto;} .area_search .searchType select{width:100%;} /* 글작성 */ .write_table>ul>li { flex-wrap:wrap; } .write_table>ul>li>strong { height:inherit; font-weight:500 } /* 공통 view */ .view-group .view-table>ul>li>span, .view-group .view-table>ul>li>div { width:100%; } .view-group .view-table>ul>li>div { padding:0} .view-group .view-table>ul>li:has(div)>strong{display:block;} /* 글쓰기 */ #board_wrap .write_group.new_2023>ul>li>strong { width:100%; font-weight:500; justify-content:flex-start; background:none; min-height:inherit; padding:.5em 0 0 } #board_wrap .write_group.new_2023>ul>li>span, #board_wrap .write_group.new_2023>ul>li>.fileList { width:100%; padding:.5em 0;} /* 행사 게시판 리스트 */ .event_list_wrap>li { padding:1.5em; } /* list image+text */ .img_bulet_list>li .img_area { width:100%; } .img_bulet_list>li .cont { width:100%; margin-top:.25em } } @media screen and (max-width:420px){ /* 3) tab */ .area_tab .list > li{flex:0 1 50%;} .area_tab .list > li > a{padding:10px;} /* 4) info box */ .box_info_top{flex-wrap:wrap;} .box_info_top > div{flex:0 1 100%;} /* 5) title */ .title_h4{font-size:20px;} .title_h4:before{top:6px;} .title_h4:after{bottom:14px;} /* 11) bbs custom */ /* search */ .area_search{padding:15px;} .area_search .searchCase{flex:0 1 100%; margin-right:5px; margin-bottom:5px;} .area_search .tip_speech{margin-top:10px;} .area_search_detail{padding:15px;} .area_search_detail ul li{flex-wrap:wrap;} .area_search_detail label{width:100%; margin-bottom:3px;} .btn_search_detail{width:100%;} /* list */ .headList .SearchInfo{flex-wrap:wrap;} .headList .SearchInfo .page_choice_type, .headList .SearchInfo .page_view_count{flex:0 1 100%; display:flex; justify-content:flex-end;} .headList .SearchInfo .page_view_count select{width:80px; box-sizing:border-box;} .headList .SearchInfo .page_view_count{display:flex; justify-content:flex-end; align-items:center;} .headList .SearchInfo .page_view_count button.white{margin-left:3px;} .headList .SearchInfo .page_choice_type + .page_view_count{ margin-left:0; margin-top:10px; text-align:right;} .gallery_list .gl_thumb{background-size:40%;} /* 13) diagram */ .area_diagram .list > li span{font-size:15px;} .area_diagram .list > li span small{font-size:13px;} /* 15) 조직도공통 */ [data-subarea="organization"] .list_organ{margin-top:35px;} [data-subarea="organization"] .list_dong > ul{padding:20px;} /* 16) 청사안내 공통 */ .area_floor{padding:20px 10px; border-top-right-radius:0px;} .area_floor .list ul > li{flex:1 1 50%;} .area_floor .view .obj_img .under{flex-wrap:wrap;} .area_floor .view .obj_img .under em{flex:0 1 100%; margin:5px 0;} .area_floor .view .obj_img .under em i{font-size:20px;} .area_floor .view .obj_img .under em br{display:none;} /* 캘린더 리스트*/ #boardWrap .calendar_wrap .schedule .title_h4 .day { display:block; } #boardWrap .calendar_wrap .schedule .list::before { display:none; } #boardWrap .calendar_wrap .schedule .list>li { padding-left:.5em; padding-right:.5em; } #boardWrap .calendar_wrap .schedule .list strong { width:100%; justify-content:flex-start; line-height:1; color:var(--color-point)} #boardWrap .calendar_wrap .schedule .list .text { width:100%; margin-top:.2em; } } @media screen and (max-width:365px){ /* 4) info box */ .box_info_top p{word-break:break-all;} /* 11) bbs custom */ /* search */ .area_search .wr_period{flex-wrap:wrap;} .area_search .wr_period em{margin:2px 0px;} .area_search .wr_period > span{display:none;} .area_search_detail ul li{width:100%;} .area_search_detail select{background-position-x:95%;} [class*="area_search"] .btn{min-width:70px;} .write_group .wr_period em a, .icon-calendar, .write_table .wr_period em a{width:16px; height:16px;} .headList .wr_period em a{top:6px;} .program .search_wrap .list>li .calendar input[type="text"] {text-indent: 5px;font-size: 13px;letter-spacing: -0.5px;} .program .search_wrap .list>li .calendar>a>i {right:.5em} /* 13) diagram */ .area_diagram .list{display:block; --sizePadding:0px;} .area_diagram .list > li{margin-bottom:25px;} .area_diagram .list > li:last-child{margin-bottom:0px;} .area_diagram .list > li:before, .area_diagram .list > li:after, .area_diagram .list > li span:before{top:auto; left:50%; right:auto; transform:translateY(0) translateX(-50%);} .area_diagram .list > li:before{bottom:-6px;} .area_diagram .list > li:after{bottom:-20px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid #818286; border-bottom:0px;} .area_diagram .list > li span:before{bottom:-15px; width:1px; height:20px; margin-top:0px; margin-left:-1px; transform:translateY(0) translateX(0);} /* 15) 조직도공통 */ [data-subarea="organization"] .list_organ h4 > *{font-size:18px;} [data-subarea="organization"] .list_dong > ul > li{width:calc(100% / 2);} /* 16) 청사안내 공통 */ .area_floor .list ul > li a, .area_floor .list ul > li button{font-size:15px;} /* 생활문화>교통>불법주정차단속 및 과태료부과 표지판 출력 */ .area_diagram.flowchart .list > li span:before { height:20px; } } @media screen and (max-width:340px){ /* 7) list text */ .list_check > li{flex-wrap:wrap;} .list_check > li em{flex:0 1 100%;} .list_check > li em + *{width:100%; margin-left:-25px; margin-top:5px; padding-left:0px;} /* 11) bbs custom */ .page_view_count button.white{height:30px;} #boardWrap .headList .SearchInfo .qbox1 input[type="text"] { height:35px; } } @media screen and (max-width:320px){ /* 11) bbs custom */ .headList .SearchInfo fieldset > *{margin-left:0px; margin-right:0px;} .headList .SearchInfo fieldset .wr_period + .wr_word{width:100%; margin-bottom:3px;} .headList .SearchInfo fieldset .sch_bbs{width:calc(100% - (45px + 16px));} .headList .SearchInfo fieldset .wr_period{flex-wrap:wrap;} .headList .SearchInfo fieldset .wr_period em{width:100%; margin-top:3px;} .headList .SearchInfo .wr_period .slash{display:none;} .headList .SearchInfo fieldset button{width:45px; margin-left:2px;} } /* 개인정보처리방침 */ .privacy .pdata_info{text-align:center; padding-top:20px;} .privacy .pdata_info li{display:inline-block;width:14.2%;margin:0 1% 20px 1%;text-align:center;background-position:center 25px !important; vertical-align:top; background-color:#fafafa;border-radius:10px; } .privacy .pdata_info li a{display:block; min-height:45px;word-break:keep-all;color:#333; padding:140px 5px 10px 5px; font-size:1.1em; margin-bottom:0} .privacy .pdata_info li p{position:absolute;z-index:9999;padding:14px 20px;font-size:16px;background:#0066b3;color:#fff;box-shadow:10px 10px 10px #dedede;margin:0;border-radius:10px} .privacy .privacy_list li {margin-top: 10px;} .privacy .privacy_list li:first-child {margin-top: 0} .privacy .privacy_list li i {display: inline-block; width: 27px; height: 27px; line-height: 500; overflow: hidden; background-size: contain; vertical-align: middle; margin-right: 7px} .privacy .privacy_tit {margin-top: 50px; margin-bottom: 15px; font-size: 20px; color: var(--color-black1); font-weight: 700; line-height: 1.3em;} .privacy .privacy_tit i {display: inline-block; width: 37px; height: 37px; line-height: 500; overflow: hidden; background-size: contain; vertical-align: middle; margin-right: 7px} .privacy .icon01{background:url("../images/content/privacy/icon01.png") no-repeat;} .privacy .icon02{background:url("../images/content/privacy/icon02.png") no-repeat;} .privacy .icon03{background:url("../images/content/privacy/icon03.png") no-repeat;} .privacy .icon04{background:url("../images/content/privacy/icon04.png") no-repeat;} .privacy .icon05{background:url("../images/content/privacy/icon05.png") no-repeat;} .privacy .icon06{background:url("../images/content/privacy/icon06.png") no-repeat;} .privacy .icon07{background:url("../images/content/privacy/icon07.png") no-repeat;} .privacy .icon08{background:url("../images/content/privacy/icon08.png") no-repeat;} .privacy .icon09{background:url("../images/content/privacy/icon09.png") no-repeat;} .privacy .icon10{background:url("../images/content/privacy/icon10.png") no-repeat;} .privacy .icon11{background:url("../images/content/privacy/icon11.png") no-repeat;} .privacy .icon12{background:url("../images/content/privacy/icon12.png") no-repeat;} .privacy .icon13{background:url("../images/content/privacy/icon13.png") no-repeat;} .privacy .icon14{background:url("../images/content/privacy/icon14.png") no-repeat;} .privacy .icon15{background:url("../images/content/privacy/icon15.png") no-repeat;} .privacy .icon16{background:url("../images/content/privacy/icon16.png") no-repeat;} .privacy .icon17{background:url("../images/content/privacy/icon17.png") no-repeat;} .privacy .icon18{background:url("../images/content/privacy/icon18.png") no-repeat;} .privacy .icon19{background:url("../images/content/privacy/icon19.png") no-repeat;} .privacy .icon20{background:url("../images/content/privacy/icon20.png") no-repeat;} @media all and (max-width:1420px){ .privacy .pdata_info li{width:15%;margin:0 0.5% 20px 0.5%;} } @media all and (max-width:1024px){ .privacy .pdata_info li{width:23.2%;margin:0 0.5% 15px 0.5%; background-size: 40%} .privacy .pdata_tab li{float:none;width:100%;margin:0 0% 5px 0;} } @media all and (max-width:680px){ .privacy .pdata_info li{width:31.5%;margin:0 0.5% 10px 0.5%;background-position:center 12px !important;;background-size:53px !important} .privacy .pdata_info li a{padding:85px 5px 7px 5px;} }