@charset "utf-8"; img { max-width:100%; } /***** para *****/ #detail_con .para01 { margin-top:20px; margin-left:13px; } #detail_con .para02 { margin-left:8px; margin-top:8px; } #detail_con .para03 { margin:7px 0px 15px; } /***** blet *****/ #detail_con h4, #detail_con .member .sblet, #detail_con .blet { margin-top:40px; padding-left:25px; font-size:20px; font-weight:bold; color:#0e50a2; background:url(/open_content/dong/images/sub/blet.gif) no-repeat left 5px; } #detail_con .sblet {margin-top:20px; padding-left:18px; font-size:18px; font-weight:bold; color:#333; background:url(/open_content/dong/images/sub/sblet.gif) no-repeat left 8px; } #detail_con caption.sblet { margin-top:0; } #detail_con .ssblet, #detail_con .bl03 { margin-bottom:10px; padding-left:10px; background:url(/open_content/dong/images/sub/ssblet.gif) no-repeat left 6px; } #detail_con .ssblet>ul, #detail_con .bl03>ul { margin-top:6px; } #detail_con .sssblet, #detail_con .bl04>li { margin-bottom:6px; padding-left:10px; background:url(/open_content/dong/images/sub/sssblet.gif) no-repeat left 10px; font-size:14px; } #detail_con .ssssblet { padding-left:6px; background:url(/open_content/main/images/sub/ssssblet.gif) no-repeat left 8px; font-size:13px; } /***** 테이블 *****/ #detail_con .datatable .data, table.data { width:100%; } #detail_con .datatable .data caption { margin-bottom:10px; } #detail_con .datatable .data thead th, table.data thead th { padding:10px 0px; border:1px solid #0d6aca; background:#f2f2f2; color:#0d6aca; } #detail_con .datatable .data th, table.data th, #detail_con .datatable .data td, table.data td { padding:10px 10px; border:1px solid #dcdcdc; text-align:center; } #detail_con .datatable .data tbody tr:first-child th, table.data tbody:first-child th, #detail_con .datatable .data tbody tr:first-child td, table.data tbody tr:first-child td { border-top:0px} #detail_con .datatable .data th, table.data th { background:#f8f8f8; } table.data caption {display: none;} .bl02+table.data {margin-top: 15px;} /***** 버튼 *****/ #detail_con .conbtn { display:inline-block; margin:1px 0px; padding:10px 30px; background:#484848; border-radius:3px; color:#fff; font-size:16px; font-weight:bold; border:0px; transition:all .2s ease; } #detail_con .btn_link { padding-left:45px; background:url(/open_content/main/images/sub/ic_link.gif) no-repeat 25px center } #detail_con .btn_down { padding-left:45px; background:url(/open_content/main/images/sub/ic_down.gif) no-repeat 25px center } #detail_con .btn_map{ padding-left:45px; background:url(/open_content/main/images/sub/ic_map.png) no-repeat 25px center } #detail_con .bg { background-color:#484848; } #detail_con .consbtn.btn_link { padding-left:30px; background-position:12px center} #detail_con .consbtn.btn_down { padding-left:30px; background-position:12px center} #detail_con .consbtn.btn_map{ padding-left:25px; background-position:12px center} #detail_con .conbtn:hover { background-color:#3371be; } #detail_con .gourl { display:inline-block; padding-left:24px; font-weight:bold; text-decoration:underline; background:url(/open_content/dong/images/sub/ic_url.gif) no-repeat 5px 6px; word-break:break-all; } #detail_con .tbox { margin-top:10px; } #detail_con .tbox:first-child { margin-top:40px; } #detail_con .point { color:#ba0d0d; } #detail_con .greeting .tit { position:relative; padding-bottom:30px; margin-bottom:30px; text-align:center; } #detail_con .greeting .tit::before, #detail_con .greeting .tit:before { position:absolute; left:50%; bottom:0; display:block; width:55px; height:2px; margin-left:-27.5px; background:#131313; content:''; } #detail_con .greeting .txt1, #detail_con .greeting .txt1 span { font-family:'Nanum Myeongjo','나눔명조', sans-serif; font-size:40px; color:#131313; font-weight:600; letter-spacing:-1px; vertical-align:bottom; } #detail_con .greeting .txt1 span { padding:8px; font-size:80px; color:#d3d3d3; line-height:30px; } #detail_con .greeting .txt2 { margin-top:5px; font-size:25px; } #detail_con .greeting .txt2 span { color:#3371be; font-weight:600; } #detail_con .greeting p { margin-top:20px; line-height:170%; } #detail_con .greeting .name { margin-top:60px; font-size:20px; text-align:right; } #detail_con .greeting .name span { font-family:'Nanum Brush Script','나눔브러쉬', sans-serif; font-size:60px; } #detail_con .member table { margin-top:10px; } #detail_con .location .map { overflow:hidden; width:99%; margin-top:10px; border:1px solid #ccc; } #detail_con .location>ul { margin-top:25px; padding-top:25px; border-top:1px dotted #ccc; } #detail_con .location .photo_box { overflow:hidden; margin-top:20px; } #detail_con .location .photo_box .photo { max-width:30%; } #detail_con .location .photo_box ul { border-top:none; } #detail_con .history { margin-top:20px; } #detail_con .history li { position:relative; } #detail_con .history dl { position:relative; padding-left:90px; } #detail_con .history dt { position:absolute; left:10px; top:5px; font-weight:bold; font-size:18px; color:#0e50a2; font-family:verdana; } #detail_con .history dd { position:relative; padding:8px 0px; padding-left:70px; } #detail_con .history dd.nodate { padding-left:20px; } #detail_con .history dt+dd { border-top:0px; } #detail_con .history dd .date { position:absolute; left:0px; font-weight:bold; color:#3371be; } #detail_con .imgcon { overflow:hidden; } #detail_con .imgcon .con { float:left; padding:1%; width:60%; } #detail_con .imgcon .img { float:right; width:33%; padding:.8%; text-align:center; border:1px solid #ddd; background:#fff; } #detail_con .imgcon .img img { display:block; } #detail_con .imgcon .img span.wfont { display:block; margin-top:5px} #detail_con .form_tab ul { margin:20px 0px; border-top:1px solid #dcdcdc; border-left:1px solid #dcdcdc; overflow:hidden; } #detail_con .form_tab ul li { float:left; width:12.5%; text-align:center; } #detail_con .form_tab ul li a { display:table; padding-top:65px; border:1px solid #ccc; border-top:0px; border-left:0px; background-color:#f8f8f8; background-position:center 15px; background-repeat:no-repeat; width:100%; box-sizing:border-box; } #detail_con .form_tab ul li a * { line-height:130%; } #detail_con .form_tab ul li a p { display:table-cell; height:50px; width:100%; vertical-align:middle; } #detail_con .form_tab ul li.ic01 a { background-image:url(/open_content/main/images/contents/civil/form_tab01.png); } #detail_con .form_tab ul li.ic02 a { background-image:url(/open_content/main/images/contents/civil/form_tab02.png); } #detail_con .form_tab ul li.ic03 a { background-image:url(/open_content/main/images/contents/civil/form_tab03.png); } #detail_con .form_tab ul li.ic04 a { background-image:url(/open_content/main/images/contents/civil/form_tab04.png); } #detail_con .form_tab ul li.ic05 a { background-image:url(/open_content/main/images/contents/civil/form_tab05.png); } #detail_con .form_tab ul li.ic06 a { background-image:url(/open_content/main/images/contents/civil/form_tab06.png); } #detail_con .form_tab ul li.ic07 a { background-image:url(/open_content/main/images/contents/civil/form_tab07.png); } #detail_con .form_tab ul li.ic08 a { background-image:url(/open_content/main/images/contents/civil/form_tab08.png); } #detail_con .form_tab ul li.ic09 a { background-image:url(/open_content/main/images/contents/civil/form_tab09.png); } #detail_con .form_tab ul li.ic10 a { background-image:url(/open_content/main/images/contents/civil/form_tab10.png); } #detail_con .form_tab ul li.ic11 a { background-image:url(/open_content/main/images/contents/civil/form_tab11.png); } #detail_con .form_tab ul li.ic12 a { background-image:url(/open_content/main/images/contents/civil/form_tab12.png); } #detail_con .form_tab ul li.ic13 a { background-image:url(/open_content/main/images/contents/civil/form_tab13.png); } #detail_con .form_tab ul li.ic14 a { background-image:url(/open_content/main/images/contents/civil/form_tab14.png); } #detail_con .form_tab ul li.ic15 a { background-image:url(/open_content/main/images/contents/civil/form_tab15.png); } #detail_con .form_tab ul li.select a { background-color:#1254a7; color:#fff; font-weight:bold; } #detail_con .form_tab ul li.select a * { color:#fff; } #detail_con .form_tab ul li.select.ic01 a { background-image:url(/open_content/main/images/contents/civil/form_tab01_on.png); } #detail_con .form_tab ul li.select.ic02 a { background-image:url(/open_content/main/images/contents/civil/form_tab02_on.png); } #detail_con .form_tab ul li.select.ic03 a { background-image:url(/open_content/main/images/contents/civil/form_tab03_on.png); } #detail_con .form_tab ul li.select.ic04 a { background-image:url(/open_content/main/images/contents/civil/form_tab04_on.png); } #detail_con .form_tab ul li.select.ic05 a { background-image:url(/open_content/main/images/contents/civil/form_tab05_on.png); } #detail_con .form_tab ul li.select.ic06 a { background-image:url(/open_content/main/images/contents/civil/form_tab06_on.png); } #detail_con .form_tab ul li.select.ic07 a { background-image:url(/open_content/main/images/contents/civil/form_tab07_on.png); } #detail_con .form_tab ul li.select.ic08 a { background-image:url(/open_content/main/images/contents/civil/form_tab08_on.png); } #detail_con .form_tab ul li.select.ic09 a { background-image:url(/open_content/main/images/contents/civil/form_tab09_on.png); } #detail_con .form_tab ul li.select.ic10 a { background-image:url(/open_content/main/images/contents/civil/form_tab10_on.png); } #detail_con .form_tab ul li.select.ic11 a { background-image:url(/open_content/main/images/contents/civil/form_tab11_on.png); } #detail_con .form_tab ul li.select.ic12 a { background-image:url(/open_content/main/images/contents/civil/form_tab12_on.png); } #detail_con .form_tab ul li.select.ic13 a { background-image:url(/open_content/main/images/contents/civil/form_tab13_on.png); } #detail_con .form_tab ul li.select.ic14 a { background-image:url(/open_content/main/images/contents/civil/form_tab14_on.png); } #detail_con .form_tab ul li.select.ic15 a { background-image:url(/open_content/main/images/contents/civil/form_tab15_on.png); } /***** 주민자치회 조직도 *****/ #detail_con .organ { text-align:center; } #detail_con .organ>li.rank1 { position:relative; width:138px; height:138px; margin:0 auto; border-radius:100%; background:#2b61b6 url(/open_content/dong/images/sub/organ_bg.png); } #detail_con .organ>li.rank1 p { position:absolute; line-height:1.2; transform:translateY(-50%); top:50%; width:100%; color:#fff; font-size:20px; font-weight:bold; } #detail_con .organ>li.rank2 { position:relative; padding:3% 0; } #detail_con .organ>li.rank2 p { text-align:center; width:20.5%; margin:0px auto 12px; padding:10px; border:1px solid #2b61b6; color:#2b61b6; font-size:16px; font-weight:bold; background:#fff; } #detail_con .organ>li.rank2:before { content:''; display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background:#ddd; z-index:-1; } #detail_con .organ>li.rank2>ul { position:relative; width:80%; margin:0 auto; font-size:0; } #detail_con .organ>li.rank2>ul:after { content:''; position:absolute; top:50%; left:20%; right:20%; height:1px; background:#ddd; } #detail_con .organ>li.rank2>ul>li { display:inline-block; vertical-align:middle; } #detail_con .organ>li.rank2>ul>li:first-child { margin:0 auto; padding-right:42%; } #detail_con .organ>li.rank2>ul>li>p { position: relative; width:auto; margin:0; background: #fff; z-index: 1;} #detail_con .organ>li.rank2>p { position:relative;} #detail_con .organ>li.rank2>p:after { content:''; display:block; position:absolute; top:50%; height:1px; background:#ddd; } #detail_con .organ>li.rank2>p.organ_left{ margin-left:10%; } #detail_con .organ>li.rank2>p.organ_left:after { left:calc(100% + 1px); width:97%; } #detail_con .organ>li.rank2>p.organ_right { margin-right:10%; } #detail_con .organ>li.rank2>p.organ_right:after { right:calc(100% + 1px); width:96%; } #detail_con .organ>li.rank3 { padding-top:30px; } #detail_con .organ>li.rank3>ul { position:relative; } #detail_con .organ>li.rank3>ul:before { left:14.9%; width:70.3%; } #detail_con .organ>li.rank3>ul.col2:before { left:27.8%; width:44.5%; } #detail_con .organ>li.rank3>ul.col3:before { left:21.5%; width:57%; } #detail_con .organ>li.rank3>ul.col5:before { left:13%; width:74%; } #detail_con .organ>li.rank3>ul:before, #detail_con .organ>li.rank3>ul.col3:before, #detail_con .organ>li.rank3>ul.col5:before, #detail_con .organ>li.rank3>ul>li:before { content:''; display:block; position:absolute; top:-30px; height:1px; background:#ddd; } #detail_con .organ>li.rank3>ul>li { position:relative; display:inline-block; vertical-align:top; width:21%; margin:0 1%; } #detail_con .organ>li.rank3>ul>li:before { top:-30px; left:50%; width:1px; height:30px; } #detail_con .organ>li.rank3>ul.col2>li { width:42%; } #detail_con .organ>li.rank3>ul.col3>li { width:26%; } #detail_con .organ>li.rank3>ul.col5>li { width:16%; } #detail_con .organ>li.rank3>ul>li>p { padding:10px; color:#fff; background:#777; } #detail_con .organ>li.rank3>ul>li>ul>li { margin-top:10px; padding:10px; border:1px solid #ddd; background:#fff; } #detail_con .organ>li.rank3>ul>li>ul>li .mem { margin-top:7px; font-size:13px; letter-spacing:-1px; } #detail_con .calendar.schedule { margin-top:40px; } /*강좌*/ .pro_search *, .board_list *, .lecView *, .edu_refund {box-sizing: border-box;} .pro_search {margin-top: 50px} .pro_search .field {padding-right: 200px;} .apply_list>li .img {flex-basis: 150px;} .lecView .lec_info {flex-basis: 49%;} .lecView .lec_con {flex-basis: 49%;} .lecView .info_list>li dt, .lecView .info_list>li dd {font-size: 14px;} .bl02 {margin-top:20px; padding-left:18px; font-size:18px; font-weight:bold; color:#333; background:url(/open_content/dong/images/sub/sblet.gif) no-repeat left 8px;} .edu_refund .bl03>li {position:relative; margin:5px 0; padding-left:12px;} .edu_refund .bl03>li:before {display:block; content:""; position:absolute; left:0; top:6px; width:5px; height:9px; background:url(/open_content/dong/images/sub/ssblet.gif) no-repeat; } .edu_refund .nobl:before {display: none !important;} .lecView, .board_write, .board_view {margin-top: 50px;} #detail_con .btn {font-size: 13px;} /********************************************************************************************************************************************************************/ @media screen and (min-width:768px){ #detail_con .present { overflow:hidden; } #detail_con .location .photo, #detail_con .present .photo { margin-left:20px; float:right; } #detail_con .present .center { margin-top:25px; } #detail_con .fl_r { float:right; } #detail_con .mecenat .photo { float:right; margin-top:25px; margin-left:20px; } #detail_con .mecenat.gajeong2 ul { margin-bottom:150px; } #detail_con .mecenat.gajeong2 .photo { margin-top:-25px; } #detail_con .history { padding-left:220px; min-height:182px; background:url(/open_content/dong/images/sub/history_bg.gif) no-repeat left 10%; } #detail_con .history dl:before { display:block; content:''; position:absolute; left:93px; top:16px; width:1px; height:100%; border-left:1px dashed #3371be; } #detail_con .history dd:before { display:block; content:''; position:absolute; left:0px; top:16px; width:8px; height:8px; border-radius:15px; background:#3371be; } #detail_con .history li:last-child dl dd:last-child:after { display:block; content:''; position:absolute; left:0px; top:24px; width:10px; height:55px; background:#fff} #detail_con .history dd p { padding-left:15px;} #detail_con .history.gajeong1 { padding-top:20px; padding-bottom:40px; } #detail_con .history.gajeong2 { padding-top:25px; padding-bottom:60px; } /* #detail_con .history.gajeong3 { padding-top:20px; padding-bottom:20px; } */ #detail_con .history.gumdan3 { padding-bottom:10px; } } @media screen and (max-width:767px){ #detail_con h4, #detail_con .member .sbletm, #detail_con .blet { margin-top:20px; } #detail_con .location .photo, #detail_con .present .photo { display:none; } #detail_con .mecenat .photo { text-align:center; margin-top:25px; } #detail_con .history li { padding:10px 0px 5px; border-top:1px solid #dcdcdc} #detail_con .history li:first-child { border-top:0px solid #dcdcdc} #detail_con .history dl { padding-left:0px; } #detail_con .history dt { position:static; } #detail_con .history dd { padding-left:60px; border-bottom:1px dotted #dcdcdc; } #detail_con .history dd:last-child { border-bottom:0px; } #detail_con .form_tab>p a { display:block; padding:5px; color:#fff; font-weight:bold; } #detail_con .form_tab>p { position:relative; margin:10px 0px 0px; background:#3371be; border:1px solid #1254a7; color:#fff; } #detail_con .form_tab>p a { display:block; padding:5px; color:#fff; font-weight:bold; } #detail_con .form_tab>p a:after, #detail_con .form_tab>p a:before { display:block; content:''; position:absolute; top:10px; right:10px; width:3px; height:14px; border-radius:1px; background:#fff; } #detail_con .form_tab>p a:after { transform:rotate(45deg); } #detail_con .form_tab>p a:before { transform:rotate(-45deg); margin-right:8px;; } #detail_con .form_tab ul { margin-top:2px; } #detail_con .form_tab ul li, #detail_con .form_tab ul.prepare li { width:33.3%; } #detail_con .form_tab ul li a { padding:0px 5px; background-image:none !important; font-size:13px; } #detail_con .form_tab ul li a p { height:40px; } #detail_con .form_tab ul { margin-top:2px; } #detail_con .form_tab ul li { width:33.3%; } #detail_con .form_tab ul li a { padding:0px 5px; background-image:none !important; font-size:13px; } #detail_con .form_tab ul li a p { height:40px; } #detail_con .organ:before { height:32%; } #detail_con .organ>li.rank2>ul, #detail_con .organ>li.rank2>p, #detail_con .organ>li.rank2>p.organ_right, #detail_con .organ>li.rank2>p.organ_left{ width:auto; margin-right:0; margin-left:0; } #detail_con .organ>li.rank2>ul>li { width:100%; padding-right:0; margin:2% 0; } #detail_con .organ>li.rank3 { padding-top:0; } #detail_con .organ>li.rank2>ul:after, #detail_con .organ>li.rank2>p.organ_left:after, #detail_con .organ>li.rank2>p.organ_right:after, #detail_con .organ>li.rank3>ul:before, #detail_con .organ>li.rank3>ul.col3:before, #detail_con .organ>li.rank3>ul.col5:before, #detail_con .organ>li.rank3>ul>li:before, #detail_con .organ>li.rank3>ul.col3>li:before, #detail_con .organ>li.rank3>ul.col5>li:before { display:none; } #detail_con .organ>li.rank3>ul>li, #detail_con .organ>li.rank3>ul.col2>li, #detail_con .organ>li.rank3>ul.col3>li, #detail_con .organ>li.rank3>ul.col5>li{ width:98%; margin:2% 1%; } }