@charset "utf-8"; /* * contents.css */ /* box_sitelink */ .box_sitelink { display: flex; align-items: center; gap: 40px; } .box_sitelink .img { flex-shrink: 0; width: 300px;} .box_sitelink .img img { width: 100%; height: auto; display: block; } .box_sitelink .text_area { flex: 1; } .box_sitelink .text_area dl dt { font-size: 2.5em; font-weight: 700; line-height: 1.3em; margin-bottom: 20px; color: var(--color-base);} .box_sitelink .text_area dl dd { font-size: 1.125em; color: var(--color-base2); margin-bottom: 30px;} .box_sitelink .box_btn a { display: inline-block; padding: 14px 28px; margin:2px;background: var(--color-point); color: var(--color-white); text-decoration: none; border-radius: 10px; font-size: 1.125rem; transition:var(--trans-ani);} .box_sitelink .box_btn a:hover { box-shadow:0 5px 5px rgba(0,0,0,0.15);} @media (max-width: 1024px) { .box_sitelink { flex-direction: column; text-align: center; padding: 30px; gap:10px} .box_sitelink .img { width: 250px; margin-bottom: 20px;} .box_sitelink .text_area dl dt { font-size: 2em; margin-bottom: 15px; } .box_sitelink .text_area dl dd { font-size: 1em; margin-bottom: 20px; } .box_sitelink .box_btn a { width: 100%; max-width: 280px; } } @media (max-width: 600px) { .box_sitelink { padding: 20px; } .box_sitelink .img { width: 200px; } .box_sitelink .text_area dl dt { font-size: 1.8em; } } /* map_box */ .map_box { position:relative; overflow:hidden; width:100%; height:450px;border-bottom:1px solid rgba(0,0,0,.1); } .map_box.ml25 { width:calc(100% - 25px) } .map_box .root_daum_roughmap { width:100%; height:100% !important;} @media all and (max-width:1024px){ .map_box { height:350px; } } @media all and (max-width:668px){ .map_box { height:300px; } } /* 익산브랜드 */ .color_info_list { display:flex; flex-wrap:wrap; gap:20px; margin-top:15px; } .color_info_list>li { display:flex; flex-flow:column; width:calc((100% - 20px) / 2); border:1px solid var(--color-ddd); padding:20px; border-radius:10px; } .color_info_list>li .pantone { display:flex; flex-wrap:wrap; width:100%; gap:10px 1.88em; } .color_info_list>li .pantone>span { width:7.5em; height:7.5em; border-radius:10px; } .color_info_list>li .pantone dl { display:flex; flex-flow:column; width:calc(100% - 9.38em); justify-content:space-between; } .color_info_list>li .pantone dl>dt { font-size:1.13em; font-weight:bold; text-transform:uppercase; margin-bottom:5px; line-height:1.2 } .color_info_list>li .pantone dl>dd { display:flex; flex-wrap:wrap; margin-bottom:5px; } .color_info_list>li .pantone dl>dd>span { width:calc(100% / 4); text-transform:uppercase; opacity:.84; max-width:70px; } .color_info_list>li .pantone dl>dd.line { margin-bottom:0; } .color_info_list>li .pantone dl>dd.line>span { display:flex; width:inherit; flex:auto; max-width:inherit; height:10px; } .color_info_list>li .pantone dl>dd.line .c00adef { background:#00adef; } .color_info_list>li .pantone dl>dd.line .cf272ab { background:#f272ab; } .color_info_list>li .pantone dl>dd.line .cfffce9 { background:#fffce9; } .color_info_list>li .pantone dl>dd.line .c00b9f1 { background:#00b9f1; } .color_info_list>li .pantone dl>dd.line .cfff9ad { background:#fff9ad; } .color_info_list>li strong { display:flex; font-weight:bold; text-transform:uppercase; margin-top:20px; } .color_info_list>li ol { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; } .color_info_list>li ol>li { width:calc((100% - 54px) / 10); display:flex; flex-flow:column; font-size:.88em; align-items:center; gap:5px; } .color_info_list>li ol>li>span { display:flex; width:100%; height:0; padding-top:100%; border-radius:10px; } .color_info_list>li ol>li>i { opacity:.84; } .color_info_list>li .bg_blue span, .color_info_list>li .pantone .bg_blue { background:var(--color-point); } .color_info_list>li .bg_mint span, .color_info_list>li .pantone .bg_mint { background:var(--color-mint); } .color_info_list>li ol>li:nth-child(1)>span { opacity:.1; } .color_info_list>li ol>li:nth-child(2)>span { opacity:.2; } .color_info_list>li ol>li:nth-child(3)>span { opacity:.3; } .color_info_list>li ol>li:nth-child(4)>span { opacity:.4; } .color_info_list>li ol>li:nth-child(5)>span { opacity:.5; } .color_info_list>li ol>li:nth-child(6)>span { opacity:.6; } .color_info_list>li ol>li:nth-child(7)>span { opacity:.7; } .color_info_list>li ol>li:nth-child(8)>span { opacity:.8; } .color_info_list>li ol>li:nth-child(9)>span { opacity:.9; } .color_info_list>li ol>li:nth-child(10)>span { opacity:1; } @media all and (max-width:1368px) { .color_info_list>li { padding:15px; } .color_info_list>li .pantone dl>dt { font-size:1.067em; } } @media all and (max-width:968px) { .color_info_list { gap:10px; } .color_info_list>li { width:100%; } } @media all and (max-width:468px) { .color_info_list>li .pantone>span { width:100%; height:3.5em; } .color_info_list>li .pantone dl { width:100%; } } @media all and (max-width:414px) { .color_info_list>li ol>li { width:calc((100% - 24px) / 5); } } /* 기관문양 */ [data-subarea="ci"] .color_info_list.pb5>li { padding:5px; } [data-subarea="ci"] img.img_light { display:block; } [data-subarea="ci"] img.img_dark { display:none; } [data-subarea="ci"] .box_info_top:has(.min_gray), [data-subarea="song"] .box_info_top:has(.basic_btn) { flex-flow:column; align-items:center; } [data-subarea="ci"] .box_info_top .min_gray { display:flex; align-items:center; padding:1em 2em; background:var(--color-light-gray); font-size:14px; font-weight:300; border-radius:10px; gap:5px; margin-top:20px } [data-subarea="ci"] .box_info_top .min_gray>i { font-weight:bold; } [data-subarea="ci"] .box_info_top .min_gray .icon { display:inline-block; width:12px; height:20px; background:url(/resource/www/images/contents/icon_ci.svg) no-repeat 50% 50% / contain; } [data-subarea="ci"] .box_info_top .min_gray img { max-height:20px; } .ci_color { display:flex; flex-wrap:wrap; gap:16px; margin-top:15px; } .ci_color>li { position:relative; width:calc((100% - 80px) / 6); border:1px solid var(--color-ddd); border-radius:20px; padding:20px; display:flex; flex-flow:column; } .ci_color>li .eng, .ci_color>li strong { font-weight:bold; } .ci_color>li strong { line-height:1.2; min-height:2.4em } .ci_color>li .cmyk { display:flex; flex-wrap:wrap; text-transform:uppercase; font-size:.88em; font-weight:500; opacity:.84; gap:5px 7px; margin-top:15px; } .ci_color>li .cvc { display:flex; flex-wrap:wrap; text-transform:uppercase; font-size:.88em; opacity:.84; } .ci_color>li::before { position:absolute; width:93px; height:68px; top:-1px; left:-1px; z-index:2; pointer-events:none; content:''; background-size:contain; background-position:top left; background-repeat:no-repeat; } [data-subarea="ci"] .box_flex.between { gap:20px; } [data-subarea="ci"] .box_flex.between .w50 { width:calc((100% - 20px) / 2); } [data-subarea="ci"] .box_text_line:has(.black_mark) { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:25px; } [data-subarea="ci"] .black_mark { flex:auto; } [data-subarea="ci"] .black_mark .black_mark_list { gap:15px; } [data-subarea="ci"] .black_mark .black_mark_list, [data-subarea="ci"] .black_mark .black_mark_list>li { display:flex; flex-flow:column; } [data-subarea="ci"] .black_mark .black_mark_list>li span { position:relative; width:100%; padding:20px; display:flex; justify-content:center; align-items:center; } [data-subarea="ci"] .black_mark .black_mark_list>li span::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; border-radius:10px; background:#231f20; } [data-subarea="ci"] .black_mark .black_mark_list>li span img { position:relative; } [data-subarea="ci"] .black_mark .black_mark_list>li i { font-size:.88em; font-weight:500; opacity:.84; text-transform:uppercase; margin-top:5px; } [data-subarea="ci"] .black_mark .black_mark_list>li:nth-child(1) span::before { opacity:.2; } [data-subarea="ci"] .black_mark .black_mark_list>li:nth-child(2) span::before { opacity:.4; } [data-subarea="ci"] .black_mark .black_mark_list>li:nth-child(3) span::before { opacity:.5; } [data-subarea="ci"] .black_mark .black_mark_list>li:nth-child(4) span::before { opacity:.6; } [data-subarea="ci"] .example { flex:auto; } .ci_color>li.cfbd109::before { background-image:url(/resource/www/images/contents/icon_ci_01.svg); } .ci_color>li.c2a90ce::before { background-image:url(/resource/www/images/contents/icon_ci_02.svg); } .ci_color>li.c44b149::before { background-image:url(/resource/www/images/contents/icon_ci_03.svg); } .ci_color>li.c221c5b::before { background-image:url(/resource/www/images/contents/icon_ci_04.svg); } .ci_color>li.ca9cd38::before { background-image:url(/resource/www/images/contents/icon_ci_05.svg); } .ci_color>li.c125cab::before { background-image:url(/resource/www/images/contents/icon_ci_06.svg); } .ci_color>li.cf3991e::before { background-image:url(/resource/www/images/contents/icon_ci_07.svg); } .ci_color>li.ce95e9e::before { background-image:url(/resource/www/images/contents/icon_ci_08.svg); } .ci_color>li.cc82127::before { background-image:url(/resource/www/images/contents/icon_ci_09.svg); } .ci_color>li.ceb6324::before { background-image:url(/resource/www/images/contents/icon_ci_10.svg); } .ci_color>li.c66276d::before { background-image:url(/resource/www/images/contents/icon_ci_11.svg); } .ci_color>li.c8f8f92::before { background-image:url(/resource/www/images/contents/icon_ci_12.svg); } .ci_color>li.c997d4e::before { background-image:url(/resource/www/images/contents/icon_ci_13.svg); } .ci_color>li.cfbd109 .eng { color:#fbd109 } .ci_color>li.c2a90ce .eng { color:#2a90ce } .ci_color>li.c44b149 .eng { color:#44b149 } .ci_color>li.c221c5b .eng { color:#221c5b } .ci_color>li.ca9cd38 .eng { color:#a9cd38 } .ci_color>li.c125cab .eng { color:#125cab } .ci_color>li.cf3991e .eng { color:#f3991e } .ci_color>li.ce95e9e .eng { color:#e95e9e } .ci_color>li.cc82127 .eng { color:#c82127 } .ci_color>li.ceb6324 .eng { color:#eb6324 } .ci_color>li.c66276d .eng { color:#66276d } .ci_color>li.c8f8f92 .eng { color:#8f8f92 } .ci_color>li.c997d4e .eng { color:#997d4e } @media all and (max-width:1768px) { [data-subarea="ci"] .example img { width:100%; } } @media all and (max-width:1668px) { .ci_color>li { width:calc((100% - 64px) / 5); } } @media all and (max-width:1368px) { [data-subarea="ci"] .black_mark .black_mark_list>li span, .ci_color>li { padding:15px; } .ci_color>li { width:calc((100% - 48px) / 4); } } @media all and (max-width:1024px) { [data-subarea="ci"] .box_info_top.tac>img { padding:5px 20px; } [data-subarea="ci"] .box_info_top .min_gray { margin-top:10px; } .ci_color>li { font-size:16px; } .ci_color>li .cmyk { margin-top:5px; } } @media all and (max-width:768px) { [data-subarea="ci"] .box_flex.between { gap:40px; } [data-subarea="ci"] .box_flex.between .w50 { width:100%; } .ci_color>li { width:calc((100% - 32px) / 3); } } @media all and (max-width:668px) { [data-subarea="ci"] .box_flex.between { gap:30px; } } @media all and (max-width:568px) { .ci_color { gap:10px; } .ci_color>li { width:calc((100% - 10px) / 2); } } @media all and (max-width:368px) { .ci_color>li strong { min-height:inherit; } .ci_color>li { width:100%; } } /* 캐릭터 */ .character_llist { display:flex; flex-wrap:wrap; gap:10px; } .character_llist>li { width:calc((100% - 20px) / 3); border-radius:20px; background:var(--color-light-blue); padding:20px; padding-bottom:40px; display:flex; flex-flow:column; gap:20px; align-items: center; } .character_llist>li strong { font-size:1.25em; font-weight:bold; line-height:1 } .character_llist>li:has(.download) { padding:0;} .character_llist>li>.download { display:flex; width:100%; padding:20px; align-items: center; justify-content:center; font-size:1rem; font-weight:500 } @media all and (max-width:1368px) { .character_llist>li { padding:15px; padding-bottom:30px; gap:15px; } .character_llist>li>.download { padding:15px; } } @media all and (max-width:668px) { .character_llist>li { width:calc((100% - 10px) / 2); } .character_llist>li strong { font-size:1.167em; } } @media all and (max-width:414px) { .character_llist>li { width:100%; padding:10px; padding-bottom:25px; } .character_llist>li>.download { padding:10px; } } /* 행정지도 */ .box_info_top.guidance { justify-content:center; align-items:flex-start; flex-wrap:wrap; } .basic_btn.mapdownload { display:flex; flex-wrap:wrap; } [data-subarea="administrativepolicy"] { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; } [data-subarea="administrativepolicy"] .policy_box { position:relative; padding:122px; max-height:743px; } [data-subarea="administrativepolicy"] .policy_box dl { display:flex; width:499px; height:499px; border-radius:100%; background:url(/resource/www/images/contents/bg_policy01.png) no-repeat 50% 50% / contain var(--color-white); padding:85px; flex-flow:column; align-items:center; } [data-subarea="administrativepolicy"] .policy_box dl>dt { display:flex; flex-flow:column; align-items:center; text-align:center; margin-top:10px; } [data-subarea="administrativepolicy"] .policy_box dl>dt .ci { display:flex; width:69px; height:50px; margin-bottom:20px } [data-subarea="administrativepolicy"] .policy_box dl>dt strong { font-size:2.81em; font-family:var(--font-tenada); color:var(--color-point); line-height:1.1 } [data-subarea="administrativepolicy"] .policy_box dl>dd { margin-top:20px; padding-top:20px; border-top:1px solid var(--color-ddd); font-size:1.25em; font-weight:bold } [data-subarea="administrativepolicy"] .policy_box dl>dd span { opacity:.84; } [data-subarea="administrativepolicy"] .policy_box::before { position:absolute; width:100%; height:100%; border-radius:100%; border:90px solid var(--color-light-gray); content:''; left:0; top:0; z-index:-1; pointer-events:none;} [data-subarea="administrativepolicy"] .policy_box::after { position:absolute; width:calc(100% - 180px); height:calc(100% - 180px); border-radius:100%; content:''; left:90px; top:90px; border:1px dashed var(--color-ddd); pointer-events:none; } [data-subarea="administrativepolicy"] .icon_list { position:absolute; width:100%; height:60%; left:0; top:50%; transform:translateY(-50%); } [data-subarea="administrativepolicy"] .icon_list>li { position:absolute; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;} [data-subarea="administrativepolicy"] .icon_list>li strong { display:flex; flex-flow:column; font-size:1.13em; line-height:1.2} [data-subarea="administrativepolicy"] .icon_list>li strong>em { font-size:1.39em; font-weight:bold; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) { width:calc(50% - (142px * 2)); left:0; text-align:right; justify-content:end } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::before, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::before { position:absolute; right:-73px; top:50%; width:6px; height:6px; border-radius:100%; content:''; transform:translateY(-50%); z-index:1} [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::after { position:absolute; right:-80px; top:50%; width:20px; height:20px; border-radius:100%; content:''; transform:translateY(-50%); opacity:.1} [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::before { background:var(--color-point); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::before { background:var(--color-purple); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::after { background:var(--color-point); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::after { background:var(--color-purple); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1) .icon, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) .icon { order:2; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3) { top:0; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) { bottom:0; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) { width:calc(50% - (142px * 2)); right:0 } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::before, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::before { position:absolute; left:-73px; top:50%; width:6px; height:6px; border-radius:100%; content:''; transform:translateY(-50%); z-index:1} [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::after { position:absolute; left:-80px; top:50%; width:20px; height:20px; border-radius:100%; content:''; transform:translateY(-50%); opacity:.1} [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::before { background:var(--color-mint); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::before { background:var(--color-green1); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::after { background:var(--color-mint); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::after { background:var(--color-green1); } [data-subarea="administrativepolicy"] .icon_list .icon::after { position:absolute; width:80px; height:1px; background:var(--color-ddd); content:''; top:50%; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1) .icon::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) .icon::after { right:-73px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3) .icon::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) .icon::after { left:-73px; } [data-subarea="administrativepolicy"] .icon_list .icon { display:flex; width:80px; height:80px; position:relative; } [data-subarea="administrativepolicy"] .icon_list .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-size:contain; background-position:center; background-repeat:no-repeat; border-radius:100%; z-index:2 } [data-subarea="administrativepolicy"] .icon_list .icon1::before { background-image:url(/resource/www/images/contents/icon_policy01.svg); background-color:var(--color-point) } [data-subarea="administrativepolicy"] .icon_list .icon2::before { background-image:url(/resource/www/images/contents/icon_policy02.svg); background-color:var(--color-purple) } [data-subarea="administrativepolicy"] .icon_list .icon3::before { background-image:url(/resource/www/images/contents/icon_policy03.svg); background-color:var(--color-mint) } [data-subarea="administrativepolicy"] .icon_list .icon4::before { background-image:url(/resource/www/images/contents/icon_policy04.svg); background-color:var(--color-green1) } @media all and (max-width:1568px) { [data-subarea="administrativepolicy"] .policy_box { max-height:603px; padding:102px } [data-subarea="administrativepolicy"] .policy_box::before { border-width:70px; } [data-subarea="administrativepolicy"] .policy_box::after { left:70px; top:70px; width:calc(100% - 140px); height:calc(100% - 140px); } [data-subarea="administrativepolicy"] .policy_box dl { width:399px; height:399px; padding:75px; } [data-subarea="administrativepolicy"] .policy_box dl>dt .ci { width:59px; height:45px; } [data-subarea="administrativepolicy"] .policy_box dl>dt strong { font-size:2.2em; } [data-subarea="administrativepolicy"] .policy_box dl>dd { margin-top:15px; padding-top:15px; font-size:1.2em; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) { width:calc(50% - (110px * 2)); } [data-subarea="administrativepolicy"] .icon_list>li strong { font-size:1.03em; } [data-subarea="administrativepolicy"] .icon_list .icon { width:75px; height:75px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::before, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::before { right:-41px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::after { right:-48px } [data-subarea="administrativepolicy"] .icon_list .icon::after { width:45px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1) .icon::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) .icon::after{ right:-40px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::after { left:-48px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::before, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::before { left:-41px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3) .icon::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) .icon::after{ left:-40px; } } @media all and (max-width:1368px) { [data-subarea="administrativepolicy"] .policy_box { max-height:463px; padding:82px } [data-subarea="administrativepolicy"] .policy_box::before { border-width:50px; } [data-subarea="administrativepolicy"] .policy_box::after { left:50px; top:50px; width:calc(100% - 100px); height:calc(100% - 100px); } [data-subarea="administrativepolicy"] .policy_box dl { width:299px; height:299px; padding:40px; } [data-subarea="administrativepolicy"] .policy_box dl>dt .ci { width:49px; height:36px; } [data-subarea="administrativepolicy"] .policy_box dl>dt strong { font-size:1.6em; } [data-subarea="administrativepolicy"] .policy_box dl>dd { margin-top:10px; padding-top:10px; font-size:1.03em; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3), [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) { width:calc(50% - (93px * 2)); } [data-subarea="administrativepolicy"] .icon_list>li strong { font-size:1em; } [data-subarea="administrativepolicy"] .icon_list .icon { width:70px; height:70px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::before, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::before { right:-41px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1)::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2)::after { right:-48px } [data-subarea="administrativepolicy"] .icon_list .icon::after { width:45px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1) .icon::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) .icon::after{ right:-40px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::after { left:-48px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3)::before, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4)::before { left:-41px; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3) .icon::after, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) .icon::after{ left:-40px; } } @media all and (max-width:868px) { [data-subarea="administrativepolicy"] .policy_box { max-height:359px; padding:0 0 1em 0; width:100%; } [data-subarea="administrativepolicy"] .policy_box::before { border-width:1px; width:1px; height:3em; border-radius:0; left:calc(50% - .5px); top:inherit; bottom:-2em; } [data-subarea="administrativepolicy"] .policy_box::after { display:none; } [data-subarea="administrativepolicy"] .policy_box dl { padding:50px 40px; margin:0 auto } [data-subarea="administrativepolicy"] .policy_box dl>dt strong { font-size:1.5em; } [data-subarea="administrativepolicy"] .policy_box dl>dd { margin-top:7px; padding-top:7px; } [data-subarea="administrativepolicy"] .icon_list { position:relative; display:flex; flex-wrap:wrap; transform:initial; height:inherit; left:inherit; top:inherit; gap:10px; margin-top:5em } [data-subarea="administrativepolicy"] .icon_list::before { position:absolute; width:calc(100% - 23.5%); height:1px; background:var(--color-ddd); content:''; left:calc(15% - 20px); top:-2.9em; } [data-subarea="administrativepolicy"] .icon_list>li { position:relative; width:calc((100% - 30px) / 4) !important; justify-content:center; text-align:center !important; flex-flow:column} [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1) .icon, [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) .icon { order:1; } [data-subarea="administrativepolicy"] .icon_list>li strong { order:2; } [data-subarea="administrativepolicy"] .icon_list .icon { width:100%; } [data-subarea="administrativepolicy"] .icon_list .icon::before { border-radius:10px; } [data-subarea="administrativepolicy"] .icon_list .icon::after { width:1px; height:39px; top:-40px; left:calc(50% - .5px)!important; } [data-subarea="administrativepolicy"] .icon_list>li::before { left:calc(50% - 3px)!important; right:inherit!important; top:-40px!important; transform:translateX(-50%);} [data-subarea="administrativepolicy"] .icon_list>li::after { left:calc(50% - 10px)!important; right:inherit!important; top:-40px!important; transform:translateX(-50%);} } @media all and (max-width:568px) { [data-subarea="administrativepolicy"] .policy_box { padding:0; } [data-subarea="administrativepolicy"] .policy_box::before { display:none; } [data-subarea="administrativepolicy"] .icon_list { gap:2.8em 10px; margin-top:2.8em } [data-subarea="administrativepolicy"] .icon_list::before { display:none; } [data-subarea="administrativepolicy"] .icon_list>li { width:100% !important; border-radius:12px; background:var(--color-white); padding-bottom:1.5em; } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(1) { border:1px solid var(--color-point); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(2) { border:1px solid var(--color-purple); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(3) { border:1px solid var(--color-mint); } [data-subarea="administrativepolicy"] .icon_list>li:nth-child(4) { border:1px solid var(--color-green1); } [data-subarea="administrativepolicy"] .icon_list>li strong { font-size:1.1em; padding-top:.5em } } @media all and (max-width:368px) { [data-subarea="administrativepolicy"] .policy_box dl { width:249px; height:249px; padding:30px; } [data-subarea="administrativepolicy"] .policy_box dl>dt .ci { margin-bottom:10px; } } .tit_cPoint{font-size:2.5em; text-align:center; margin-bottom:1em; line-height:1.35em} .tit_cPoint strong{font-weight:bold; color:var(--color-point); position:relative; display:inline-block;} .tit_cPoint strong:before{content:""; display:block; width:100%; height:3px; background:var(--color-point); position:absolute; bottom:.1em;} @media screen and (max-width:768px){ .tit_cPoint{font-size:2.3em;} } @media screen and (max-width:500px){ .tit_cPoint{font-size:1.8em;} } .title_normal{font-size:1.25em; margin-bottom:.5em; line-height:1.25em; margin-bottom:.8em; line-height:1;} /* 온라인서명 */ .signature_tit{text-align:center; letter-spacing:-1px; margin-bottom:3em} .signature_tit p{font-size:1.8em; font-weight:600; color:#777} .signature_list{display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:3em;} .signature_list li{width:23%;} .signature_list span{display:block; width:max-content; margin:auto; background:var(--color-point); color:#fff; padding:.5em 1.5em; font-size:1.2em; border-radius:10px; position:relative; z-index:1} .signature_list li:nth-child(2) span{background:#0092ac;} .signature_list li:nth-child(3) span{background:#00ac69;} .signature_list li:nth-child(4) span{background:#59ac00;} .signature_list i{display:block; background-image:url(/resource/www/images/contents/i_signature_illu01.svg); background-repeat:no-repeat; background-position:center; background-size:65%; width:100%; height:280px; position:relative; top:-1.5em} .signature_list li:nth-child(2) i{background-image:url(/resource/www/images/contents/i_signature_illu02.svg); background-size:80%;} .signature_list li:nth-child(3) i{background-image:url(/resource/www/images/contents/i_signature_illu03.svg); background-size:65%;} .signature_list li:nth-child(4) i{background-image:url(/resource/www/images/contents/i_signature_illu04.svg); background-size:75%;} .signature_list i:before{content:""; display:block; width:90%; height:90%; background:var(--color-point); position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index:-1; border-radius:20px; opacity:.06} .signature_list li:nth-child(2) i:before{background:#0092ac} .signature_list li:nth-child(3) i:before{background:#00ac69} .signature_list li:nth-child(4) i:before{background:#59ac00} .signature_list i:after{content:""; display:block; width:100%; height:100%; border:1px solid var(--color-point); border-radius:20px; opacity:.2} .signature_list li:nth-child(2) i:after{border-color:#0092ac} .signature_list li:nth-child(3) i:after{border-color:#00ac69} .signature_list li:nth-child(4) i:after{border-color:#59ac00} .signature_list strong{background:#f4f4f4; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; text-align:center; width:100%; height:7em; padding:0 1em; line-height:1.3em; position:relative; margin-top:1em;} .signature_list strong:before, .signature_list strong:after{content:""; display:block; width:7px; height:7px; border-radius:50%; background:var(--color-point); position:absolute; left:0; right:0; margin:auto;} .signature_list strong:before{top:-1.8em} .signature_list strong:after{top:-1.1em; opacity:.5} .signature_list li:nth-child(2) strong:before, .signature_list li:nth-child(2) strong:after{background:#0092ac} .signature_list li:nth-child(3) strong:before, .signature_list li:nth-child(3) strong:after{background:#00ac69} .signature_list li:nth-child(4) strong:before, .signature_list li:nth-child(4) strong:after{background:#59ac00} .signature_num{display:flex; flex-wrap:wrap; color:#fff; margin-bottom:3em; border-radius:10px; overflow:hidden} .signature_num li{width:50%; background:var(--color-point); display:flex; align-items:center; justify-content:center; padding:2em 0} .signature_num li:nth-child(2){width:50%; background:var(--color-mint);} .signature_num dl{position:relative; padding-left:6em} .signature_num i{display:block; width:4em; height:4em; position:absolute; left:0; top:0; bottom:0; margin:auto; background-image:url(/resource/www/images/contents/i_signature_i01.svg); background-repeat:no-repeat; background-position:center; background-size:50%} .signature_num li:nth-child(2) i{background-image:url(/resource/www/images/contents/i_signature_i02.svg);} .signature_num dl:before{content:""; display:block; width:4.8em; height:4.8em; background:rgb(0, 0, 0, .2); border-radius:50%; position:absolute; top:0; left:0; bottom:0; margin:auto;} .signature_num dt{font-size:1.2em; line-height:1.5em;} .signature_num dd strong{font-size:2.5em; font-weight:bold; line-height:1.2em} .signature_txt{text-align:center; font-size:1.4em; font-weight:600} .signature_txt strong{font-weight:600} .signature .basic_btn{margin:2em 0;} @media screen and (max-width:1024px){ .signature_list i{height:210px;} .signature_list br{display:none;} } @media screen and (max-width:768px){ .signature_tit, .signature_list, .signature_num{margin-bottom:2em} .signature_tit p{font-size:1.3em} .signature_list{gap:1em 0;} .signature_list li{width:48%} .signature_list i{background-size:50% !important;} .signature_num dl{padding-left:4.8em} .signature_num dl:before{width:4.2em; height:4.2em} .signature_num dt{font-size:1.1em} .signature_num dd strong{font-size:2em;} } @media screen and (max-width:500px){ .signature_tit, .signature_list, .signature_num{margin-bottom:1em} .signature_tit p{font-size:1.2em} .signature_list i{height:160px;} .signature_num li{padding:1.5em 0} .signature_num dl{padding-left:0; padding-top:5em; text-align:center;} .signature_num dl:before{top:-4em; right:0} .signature_num dt{font-size:1em} .signature_num i{top:-4em; right:0} .signature .basic_btn{margin:1em 0 1.5em;} } /* 온라인서명 : 입력 */ .form_signAgreement{background:#f4f4f4; border-radius:10px; padding:1.5em 2em; margin-bottom:3em} .form_signAgreement h4{font-size:1.4em; text-align:center; border-bottom:1px solid #ddd; padding-bottom:.5em; margin-bottom:1em; position:relative;} .form_signAgreement h4:before{content:""; display:block; width:5em; height:3px; background:var(--color-base); position:absolute; bottom:-2px; left:0; right:0; margin:auto;} .signAgreement_list{margin:1em .5em;} .signAgreement_list li{position:relative; padding-left:.5em} .signAgreement_list li:before{content:""; display:block; width:3px; height:3px; background:var(--color-base); position:absolute; left:0; top:.6em} .form_signAgreement_check{background:#fff; border-radius:10px; padding:1em; text-align:center;} .form_signAgreement_check dt{color:var(--color-point); font-size:1.1em; border-bottom:1px dashed #ddd; padding-bottom:.5em; margin-bottom:.5em;} .form_signAgreement_check dd:last-child ul{background:#f4f4f4; padding:10px; margin-top:1em; border-radius:10px; display:flex; justify-content:center; align-items:center; gap:2em} .form_signAgreement_check dd:last-child label{margin-left:.5em;} .form_signWrite{ position:relative; margin-bottom:50px; padding:2em; background:#fff; border-radius:20px; border:1px solid #e5e5e5} .form_signWrite:before, .form_signWrite:after{ content:''; position:absolute; width:103px; height:78px; background:url(/resource/common/images/common/img_box_info.svg) no-repeat 50% 50% / cover; z-index:2; pointer-events:none; } .form_signWrite:before{ top:-1px; left:-1px; } .form_signWrite:after{ bottom:-1px; right:-1px;transform:rotate(180deg); } .form_signWrite>li:not(:last-child){padding-bottom:.5em; border-bottom:1px dashed #ddd; margin-bottom:.5em} .form_signWrite dl{display:flex; align-items:center;} .form_signWrite dt{width:18%;} .form_signWrite dd{width:82%;} .form_signWrite input{min-height:30px; max-width:100%;} .signWrite_add{display:flex; flex-wrap:wrap; align-items:center; gap:.5em;} .signWrite_add li{width:30%;} .signWrite_add input{width:calc(100% - 4.5em); margin-right:.5em;} .input_wid100per{width:100%;} @media screen and (max-width:640px){ .form_signAgreement{margin-bottom:1em} .form_signWrite{margin-bottom:1em;} .form_signWrite dt{width:70px;} .form_signWrite dd{width:calc(100% - 70px);} .signWrite_add li{width:100%;} .form_signAgreement_check dd:last-child ul{display:block;} } /* 적극행정 버튼 */ .box_btn_double{display:flex; flex-wrap:wrap; color:#fff; margin-bottom:3em; border-radius:10px; overflow:hidden} .box_btn_double p{width:50%; background:var(--color-point); display:flex; align-items:center; justify-content:center;} .box_btn_double p:nth-child(2){width:50%;background: var(--color-skyblue);} .box_btn_double a{display:flex; flex-wrap:wrap; align-items:center; position:relative; font-size:1.25em; padding:2em 1.5em 2em 5em; width:100%; justify-content:space-between;} .box_btn_double a:before{content:""; display:block; width:3em; height:3em; background:rgb(0, 0, 0, .2); border-radius:50%; position:absolute; top:0; left:1.5em; bottom:0; margin:auto;} .box_btn_double i{display:block; width:3em; height:3em; background-image:url(/resource/www/images/contents/i_administration01.svg); background-repeat:no-repeat; background-position:center; background-size:50%; position:absolute; top:0; left:1.5em; bottom:0; margin:auto;margin-right:.5em} .box_btn_double p:nth-child(2) i{background-image:url(/resource/www/images/contents/i_administration02.svg);} .box_btn_double span{display:block; position:relative; font-size:.8em; padding-right:20px; width:max-content; height:25px; opacity:.85} .box_btn_double span:before, .box_btn_double span:after{content:""; display:block; width:9px; height:2px; background:#fff; position:absolute; right:0;} .box_btn_double span:before{transform:rotate(45deg); top:8px;} .box_btn_double span:after{transform:rotate(-45deg); bottom:10px} @media screen and (max-width:1024px){ .box_btn_double span{line-height:1.7em} } @media screen and (max-width:840px){ .box_btn_double a{display:block; padding:1em 1em 1em 4.8em;} .box_btn_double a:before, .box_btn_double i{left:1em} } @media screen and (max-width:640px){ .box_btn_double a{padding:4.5em 1em 1em; text-align:center; line-height:1.2} .box_btn_double a:before, .box_btn_double i{top:1em; left:0; right:0; bottom:auto; margin:auto;} .box_btn_double span{margin:.5em auto 0;} } /* 고향사랑기부제 비주얼 이미지 */ .img_donation{display:block; background:url(/resource/www/images/contents/img_donation.svg) no-repeat 50% / auto 100%; width:100%; height:50vw; max-height:450px; margin-top:3em} @media screen and (max-width:768px){ .img_donation{margin-top:2em} } /* 명예의전당 */ .hVisual{background:url(/resource/www/images/contents/bg_honor.jpg) no-repeat center / cover; color:#fff; display:flex; justify-content:center; flex-wrap:wrap; height:645px; align-items:center; overflow:hidden; margin-bottom:2em;} .hVisual_wrap{text-align:center; position:relative;} .hVisual_wrap:before, .hVisual_wrap:after{content:""; display:block; border:1px solid #fff; position:absolute; top:0; bottom:0; margin:auto; transform:rotate(45deg);} .hVisual_wrap:before{ width:140%; height:140%; left:-20%; opacity:.1; animation:honorFrameLo 20s ease-in infinite;} .hVisual_wrap:after{ width:148%; height:148%; left:-24%; opacity:.05; animation:honorFrameLo 20s ease-in .5s infinite;} .hVisual.txt_long .hVisual_wrap:before{width:100%; left:0; height:170%} .hVisual.txt_long .hVisual_wrap:after{width:110%; left:-2.5%; height:178%;} .hVisual h4{font-size:3em; font-weight:100; line-height:1.4em} .hVisual h4:before{top:-50%;} .hVisual h4:after{bottom:-50%;} .hVisual h4 strong{display:block; width:100%; font-size:1.2em; font-weight:bold;} .hVisual p{position:relative; font-size:1.2em; font-weight:100;} .hVisual p:before{content:""; display:block; background:url(/resource/www/images/contents/i_honor_star.svg) no-repeat center; width:100%; height:1em; margin:1em 0; animation:honorStarShine 3s ease-in-out infinite;} @keyframes honorStarShine {from{opacity:0;}50%{opacity:1}to{opacity:0}} @keyframes honorFrameLo {from{transform:rotate(45deg);}50%{transform:rotate(-405deg);}to{transform:rotate(45deg);}} @media screen and (max-width:768px){ .hVisual{height:450px} .hVisual h4{font-size:2.5em} .hVisual.txt_long .hVisual_wrap:before{height:150%} .hVisual.txt_long .hVisual_wrap:after{height:170%} } @media screen and (max-width:560px){ .hVisual{height:300px} .hVisual h4{font-size:2em} .hVisual.txt_long .hVisual_wrap:before{height:140%} .hVisual.txt_long .hVisual_wrap:after{height:150%} } [data-subarea="honor"] h5{font-size:1.8em} [data-subarea="honor"] h5 + p{margin-bottom:2em} [data-subarea="honor"] .con{text-align:center;} [data-subarea="honor"] .img_donation + .con{margin-top:2em} [data-subarea="honor"] .con ul{display:flex; justify-content:center; background:#f4f4f4; padding:2em 1em; position:relative;} [data-subarea="honor"] .con ul:before{content:""; display:block; width:1px; height:50%; background:#ddd; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;} [data-subarea="honor"] .con li{width:50%;} [data-subarea="honor"] .con dl{display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:1em} [data-subarea="honor"] .con li dt{font-size:1.2em;} [data-subarea="honor"] .con li dd{font-size:1.8em; font-weight:bold; text-align:left; line-height:1.1em} [data-subarea="honor"] .con small{font-size:.6em; color:#777; font-weight:normal} [data-subarea="honor"] .con li dt{width:3em; height:3em; background:var(--color-point); border-radius:50%; overflow:hidden; text-indent:-5000px; position:relative; line-height:5000} [data-subarea="honor"] .con li dt i:before{content:""; display:block; width:3em; height:3em; background-image:url(/resource/www/images/contents/i_honor01.svg); background-repeat:no-repeat; background-position:center; background-size:50%; position:absolute; top:0; left:0; bottom:0; margin:auto;margin-right:.5em} [data-subarea="honor"] .con li:nth-child(2) i:before{background-image:url(/resource/www/images/contents/i_honor02.svg);} [data-subarea="honor"] .last{margin-top:2em; display:flex; justify-content:center; align-items:center; gap:2em} [data-subarea="honor"] .last dt{margin-top:.3em} [data-subarea="honor"] .last dd{font-size:1.1em; font-weight:bold; line-height:1.1em} [data-subarea="honor"] .last dd + dt{position:relative} [data-subarea="honor"] .last dl:last-child dt:before{content:""; display:inline-block; width:1px; height:1em; background:#ddd; margin-right:2em; vertical-align:middle;} [data-subarea="honor"] .list{display:flex; flex-wrap:wrap; gap:0; margin-top:3em; position:relative; border-top:3px solid var(--color-point);} [data-subarea="honor"] .list:before{content:""; display:block; width:100%; height:100%; border:1px solid #ddd; border-top:0; position:absolute; top:0; right:0;} [data-subarea="honor"] .list li{width:10%; border:1px solid #ddd; border-top:0; border-left:0; padding:1em 0; text-align:center;} @media screen and (max-width:868px){ [data-subarea="honor"] .list li{width:20%;} } @media screen and (max-width:640px){ [data-subarea="honor"] .con ul{display:block;} [data-subarea="honor"] .con ul:before{display:none;} [data-subarea="honor"] .con li{width:100%;} [data-subarea="honor"] .con li:not(:first-child){margin-top:1em; border-top:1px dashed #ddd; padding-top:1em} [data-subarea="honor"] .con li dl{justify-content:flex-start;} [data-subarea="honor"] .con li dd{font-size:1.5em} [data-subarea="honor"] .last{margin-top:1em} } @media screen and (max-width:480px){ [data-subarea="honor"] .last{display:block; position:relative; border:1px solid #ddd; padding:0; border-radius:5px;} [data-subarea="honor"] .last:before{content:""; display:block; width:100%; height:1px; background:#ddd; position:absolute; top:0; bottom:0; margin:auto; left:0;} [data-subarea="honor"] .last dl{padding:1em 0} [data-subarea="honor"] .last dl:last-child dt:before{display:none;} [data-subarea="honor"] .list li{width:25%;} } /* honor_list */ .honor_list ul{display:flex;flex-wrap:wrap;gap:1.5em;background:#f4f4f4;padding: 1.5em; align-items:stretch; margin-top:2em} .honor_list li{width:calc(100% / 3 - 1em);} .honor_list dl{border:1px solid #ddd; border-radius:10px; text-align:center; background:#fff; height:100%; display:flex; flex-flow:row wrap; justify-content:center; align-items:center;} .honor_list dt{font-size:1.2em;font-weight:bold;min-height:7em;line-height:1.2;display:flex;flex-flow: row wrap;justify-content:center;align-items:center;flex:0 1 100%;padding:0 1em 0;} .honor_list dt.icon_crown{min-height:8em; padding-top:5em; background:url(/resource/www/images/contents/i_honor_list.svg) no-repeat center 1.5em;background-size: 3.6em;} .honor_list dd{padding:0 1em} .honor_list dd:last-child{background:var(--color-point); color:#fff; padding:.8em 1em; border-radius:0 0 10px 10px; margin-top:1em; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; flex:0 1 100%;} @media screen and (max-width:560px){ .honor_list ul{gap:1em} .honor_list dt.icon_crown{background-position:center 1em} .honor_list li{width:calc(100% / 2 - .5em);} } /* titLink_box */ .titLink_box{display:flex; flex-wrap:wrap; gap:1em; align-items:strech; word-break:break-all} .titLink_box li{width:calc(100% / 3 - .7em)} .titLink_box dl{display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; border:1px solid #ddd; border-radius:10px; text-align:center; padding:1em 1em 2em} .titLink_box dt{flex:0 1 100%; display:flex; flex-flow:row wrap; justify-content:center; min-height:75px; align-items:center; font-size:1.4em; font-weight:bold; line-height:1.2} .titLink_box dd{flex:0 1 100%; display:flex; flex-flow:row wrap; justify-content:center;} .titLink_box dt + dd{margin-bottom:.5em} @media screen and (max-width:480px){ .titLink_box li{width:100%} .titLink_box dl{padding:1.5em 1em} .titLink_box dt{min-height:auto; font-size:1.3em; margin-bottom:.5em} } /* 규제입증절차 아이콘 */ [data-subarea="proof"] .area_diagram i{display:block; padding-top:6em; background-size:5em; background-position:center 0; background-repeat:no-repeat; width:100%} [data-subarea="proof"] .area_diagram li:first-child i{background-image:url(/resource/www/images/contents/i_proof01.svg)} [data-subarea="proof"] .area_diagram li:nth-child(2) i{background-image:url(/resource/www/images/contents/i_proof02.svg)} [data-subarea="proof"] .area_diagram li:nth-child(3) i{background-image:url(/resource/www/images/contents/i_proof03.svg)} [data-subarea="proof"] .area_diagram li:nth-child(4) i{background-image:url(/resource/www/images/contents/i_proof04.svg)} [data-subarea="proof"] .area_diagram li:nth-child(5) i{background-image:url(/resource/www/images/contents/i_proof05.svg)} /* 조직도 */ [data-subarea="conOrg"] .org_box { padding: 30px 30px 50px 30px;margin: 20px 0;border-radius: 15px;box-sizing: border-box;background-color: #f7f7fc } [data-subarea="conOrg"] .org_chart { display: flex; flex-direction: column; align-items: center; gap: 30px;} [data-subarea="conOrg"] .org_level { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;} [data-subarea="conOrg"] .org_item { border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.05); padding:10px;text-align: center; font-weight: bold; display:inline-block;} [data-subarea="conOrg"] .org_item {min-width: 200px; max-width: 200px;} [data-subarea="conOrg"] .top { position:relative; margin-top:60px } [data-subarea="conOrg"] .top:before {content:'';display: block;position: absolute;top:60px;right: 50%;width: 1px;height:200px;background-color: #d5d7dd; transform: translateX(-50%);} [data-subarea="conOrg"] .top .org01 { background-color: var(--color-point); color:var(--color-white); width:200px; min-width: inherit; max-width: inherit; height:60px; display:flex; align-items: center; justify-content:center;} [data-subarea="conOrg"] .mid { width:100%; padding-left:50%} [data-subarea="conOrg"] .mid .org_item { position: relative; width:50%; min-width: inherit; max-width: inherit; display:flex; align-items: center; justify-content:center;} [data-subarea="conOrg"] .mid .org_item:after { content:''; position:absolute; display:block; top:50%; right:100%; width:50%; height:1px; background-color:#d5d7dd; } [data-subarea="conOrg"] .bottom { margin-top:50px } [data-subarea="conOrg"] .department { padding:0; position: relative;} [data-subarea="conOrg"] .department .dept_title { padding:10px; color:var(--color-white); border-radius: 10px 10px 0 0; background-color:#757b8e;} [data-subarea="conOrg"] .department ul { padding: 10px; margin: 0; font-weight: normal; color: #555; text-align: left;} [data-subarea="conOrg"] .department ul li { margin: 10px 0; position: relative; padding-left:12px; line-height:1.28;} [data-subarea="conOrg"] .department ul li:before { content:''; position:absolute; display:block; top:8px; left:0; width:4px; height:4px; background:var(--color-point); border-radius:100% } [data-subarea="conOrg"] .department:before{content:'';display: block;position: absolute;bottom: 100%;right: 50%;width: 1px;height:30px;background-color: #d5d7dd; transform: translateX(-50%);} [data-subarea="conOrg"] .department:after{content:'';display: block;position: absolute;left: -20%;top: -30px;width: 120%;height: 1px;background-color: #d5d7dd;} [data-subarea="conOrg"] .department:first-of-type::after { left:50%; } [data-subarea="conOrg"] .department:last-of-type::after { right:50%; left:inherit;} [data-subarea="conOrg"] .org_chart.col03 .bottom .org_item{min-width: 270px;} [data-subarea="conOrg"] .org_chart.col02 .bottom .org_item{ min-width:300px } [data-subarea="conOrg"] .org_chart.col02 .department:after { width:55% } [data-subarea="conOrg"] .org_chart.col02 .top:before {height:180px} [data-subarea="conOrg"] .col02 .mid {height:100px} @media (max-width: 1532px) { [data-subarea="conOrg"] .bottom .org_item {min-width: 30%; max-width: 200px;} [data-subarea="conOrg"] .department:before, [data-subarea="conOrg"] .department:after { display:none } [data-subarea="conOrg"] .bottom { margin-top:0 } [data-subarea="conOrg"] .col02 .department:before, [data-subarea="conOrg"] .col02 .department:after, [data-subarea="conOrg"] .col03 .department:before, [data-subarea="conOrg"] .col03 .department:after { display:block; } [data-subarea="conOrg"] .col02 .bottom, [data-subarea="conOrg"] .col03 .bottom { margin-top:50px } } @media (max-width: 1368px) { [data-subarea="conOrg"] .org_chart.col03 .bottom .org_item{ min-width:200px } } @media (max-width: 768px) { [data-subarea="conOrg"] .top { margin-top:0 } [data-subarea="conOrg"] .org_level.top { width:100% } [data-subarea="conOrg"] .org_chart { align-items:stretch; } [data-subarea="conOrg"] .top .org01 { width:100%; min-width:100%; max-width: inherit;} [data-subarea="conOrg"] .mid .org_item { width:100% } [data-subarea="conOrg"] .mid { padding-left:0 } [data-subarea="conOrg"] .mid .org_item:after { display:none; } [data-subarea="conOrg"] .bottom .org_item { min-width: 100%; max-width: inherit;} [data-subarea="conOrg"] .col02 .bottom, [data-subarea="conOrg"] .col03 .bottom {margin-top:0;} [data-subarea="conOrg"] .col02 .department:before, [data-subarea="conOrg"] .col02 .department:after, [data-subarea="conOrg"] .col03 .department:before, [data-subarea="conOrg"] .col03 .department:after { display:none; } [data-subarea="conOrg"] .org_chart.col03 .bottom .org_item, [data-subarea="conOrg"] .org_chart.col02 .bottom .org_item { max-width:100%; min-width:100%} } /* 기부단체 */ .list_imgpop{display:flex; flex-wrap:wrap; align-items:stretch; gap:1.2em} .list_imgpop li{width:calc(100% / 3 - .8em); border:1px solid #f6dc64;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;position:relative;padding: 2em 2em 4em;text-align:center;border-radius:20px 0 0 0;min-height:250px} .list_imgpop li:after{content:""; display:block; width:calc(100% - 1em); height:calc(100% - 1em); border:1px solid #f6dc64; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; border-radius:20px 0 0 0; opacity:.3; z-index:-1;} .list_imgpop li:before{content:"";display:block;width:100%;height: 100%;background: url(/resource/www/images/contents/bg_donation_org.svg) no-repeat center bottom;position:absolute;bottom:0;left:0;background-size: contain; z-index:-1} .list_imgpop dt{font-size:1.3em;font-weight:bold;margin-bottom: .2em;} .list_imgpop dd:not(.basic_btn){font-size:1.3em; margin-bottom:.5em;} .list_imgpop dd:not(.basic_btn) i{display:inline-block; background:url(/resource/www/images/contents/i_money.svg) no-repeat center; width:1em; height:1em; line-height:50000; overflow:hidden; text-indent:-50000em; vertical-align:middle; margin:-.1em .2em 0 0;} @media all and (max-width:768px) { .list_imgpop li{width:calc(100% / 2 - .8em);} } @media all and (max-width:480px) { .list_imgpop li{width:100%;} } /* 아이콘 리스트 */ .list_icon{display:flex;flex-wrap:wrap;gap: 1em 1.5em;/* justify-content:space-around; */} .list_icon li{width:6.2em; line-height:1.3; text-align:center;} .list_icon li.now{color:var(--color-point)} .list_icon i{display:block; width:6.2em; height:6.2em; border-radius:50%; background:#f0fafe; margin:0 auto .8em; background-size:35%; background-repeat:no-repeat; background-position:center;} .list_icon li.now i{border:3px solid var(--color-point)} .list_icon small{font-size:.8em;} @media all and (max-width:1460px) { .list_icon li{width:calc(100% / 7 - 1.286em);} .list_icon li br{display:none;} } @media all and (max-width:768px) { .list_icon li{width:calc(100% / 5 - 1.2em);} } @media all and (max-width:520px) { .list_icon li{width:calc(100% / 3 - 1em);} } /* 정기적공표 */ [data-subarea="announcement"] .list_icon li{width:calc((100% - 7.5em) / 6)} [data-subarea="announcement"] .list_icon li:first-child i{background-image:url(/resource/www/images/contents/i_child10.svg);} [data-subarea="announcement"] .list_icon li:nth-child(2) i{background-image:url(/resource/www/images/contents/i_announcement01.svg); background-size:46%; background-position:57% 47%} [data-subarea="announcement"] .list_icon li:nth-child(3) i{background-image:url(/resource/www/images/contents/i_announcement02.svg); background-size:40%;} [data-subarea="announcement"] .list_icon li:nth-child(4) i{background-image:url(/resource/www/images/contents/i_announcement03.svg); background-size:39%; background-position:53% center} [data-subarea="announcement"] .list_icon li:nth-child(5) i{background-image:url(/resource/www/images/contents/i_announcement04.svg);} [data-subarea="announcement"] .list_icon li:nth-child(6) i{background-image:url(/resource/www/images/contents/i_child11.svg); background-position:center 54%} [data-subarea="announcement"] .list_icon li:nth-child(7) i{background-image:url(/resource/www/images/contents/i_announcement05.svg); background-position:center 48%} [data-subarea="announcement"] .list_icon li:nth-child(8) i{background-image:url(/resource/www/images/contents/i_announcement06.svg); background-size:44%; background-position:center 48%} [data-subarea="announcement"] .list_icon li:nth-child(9) i{background-image:url(/resource/www/images/contents/i_child09.svg); background-size:45%;} [data-subarea="announcement"] .list_icon li:nth-child(10) i{background-image:url(/resource/www/images/contents/i_announcement07.svg); background-size:40%;} [data-subarea="announcement"] .list_icon li:nth-child(11) i{background-image:url(/resource/www/images/contents/i_announcement08.svg); background-size:40%;} [data-subarea="announcement"] .list_icon li:nth-child(12) i{background-image:url(/resource/www/images/contents/i_announcement09.svg); background-size:43%; background-position:52% 47%} @media all and (max-width:768px) { [data-subarea="announcement"] .list_icon li{width:calc((100% - 4.5em) / 4)} } @media all and (max-width:520px) { [data-subarea="announcement"] .list_icon li{width:calc((100% - 3em) / 3)} } @media all and (max-width:460px) { [data-subarea="announcement"] .list_icon{gap:1.5em} [data-subarea="announcement"] .list_icon li{width:calc((100% - 1.5em) / 2)} } /* 아동친화도시 */ [data-subarea="child"] .list_icon li:first-child i{background-image:url(/resource/www/images/contents/i_child01.svg); background-position:57% 50%} [data-subarea="child"] .list_icon li:nth-child(2) i{background-image:url(/resource/www/images/contents/i_child02.svg); background-size:42%;} [data-subarea="child"] .list_icon li:nth-child(3) i{background-image:url(/resource/www/images/contents/i_child03.svg); background-size:44%;} [data-subarea="child"] .list_icon li:nth-child(4) i{background-image:url(/resource/www/images/contents/i_child04.svg); background-size:29%;} [data-subarea="child"] .list_icon li:nth-child(5) i{background-image:url(/resource/www/images/contents/i_child05.svg); background-size:37%;} [data-subarea="child"] .list_icon li:nth-child(6) i{background-image:url(/resource/www/images/contents/i_child06.svg); background-size:36%; background-position:57% 50%} [data-subarea="child"] .list_icon li:nth-child(7) i{background-image:url(/resource/www/images/contents/i_child07.svg); background-position:57% 50%} [data-subarea="child"] .list_icon li:nth-child(8) i{background-image:url(/resource/www/images/contents/i_child08.svg);} [data-subarea="child"] .list_icon li:nth-child(9) i{background-image:url(/resource/www/images/contents/i_child09.svg); background-size:45%;} [data-subarea="child"] .list_icon li:nth-child(10) i{background-image:url(/resource/www/images/contents/i_child10.svg);} [data-subarea="child"] .basic_ul{position:relative;} [data-subarea="child"] .basic_ul:before{content:""; display:block; width:35em; height:35em; background:url(/resource/www/images/contents/bg_child.svg) no-repeat center; position:absolute; right:0; top:-5em;} @media all and (max-width:1460px) { [data-subarea="child"] .basic_ul:before{width:25em; height:25em; top:0;} } @media all and (max-width:768px) { [data-subarea="child"] .basic_ul:before{position:relative; margin:auto; width:80vw; height:80vw; margin-bottom:1em;} } /* 아동참여도시 익산 */ .logo_child_list{ grid-template-columns: repeat(3, 1fr); gap:20px 10px; align-items:center; text-align:center;} .logo_child_list li{ background:#fff; border:1px solid #ddd; border-radius:5px; padding:1em; height:5em; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; } /* 유엔아동권리협약 4대 원칙 : data_list */ [data-subarea="child"] .data_list{border:1px solid var(--color-point); background:#fff; border-radius:10px; position:relative; display:flex; flex-wrap:wrap;} [data-subarea="child"] .data_list:before{content:""; display:block; background:var(--color-point); width:calc(100% + 2px); height:100%; position:absolute; top:5px; left:-1px; border-radius:10px; z-index:-1} [data-subarea="child"] .data_list:after{content:""; display:block; width:1px; height:100%; position:absolute; top:0; left:0; right:0; margin:auto; background:var(--color-point);} [data-subarea="child"] .data_list li{width:50%;} [data-subarea="child"] .data_list li:not(:nth-child(1)):not(:nth-child(2)){border-top:1px solid var(--color-point);} [data-subarea="child"] .data_list dl{padding:1.5em 1em;} [data-subarea="child"] .data_list dt{font-size:1.2em; line-height:1.3; font-weight:bold; color:var(--color-point); text-align:center; margin-bottom:1em; color:var(--color-base);} [data-subarea="child"] .data_list dt span{display:block; font-size:.8em; font-weight:100; color:var(--color-point);} [data-subarea="child"] .data_list dd{background:#f4f4f4; border-radius:10px; padding:1em; display:flex; justify-content:center; min-height:6.5em;} @media all and (max-width:840px) { [data-subarea="child"] .data_list dd{min-height:8.5em;} } @media all and (max-width:680px) { [data-subarea="child"] .data_list:after{display:none;} [data-subarea="child"] .data_list li{width:100%;} [data-subarea="child"] .data_list li:nth-child(2){border-top:1px solid var(--color-point);} [data-subarea="child"] .data_list dd{min-height:inherit;} } /* list_icon_text */ .list_icon_text li{position:relative; padding-left:8.5em; min-height:7em; display:flex; flex-wrap:wrap; align-items:center;} .list_icon_text li:not(:first-child){margin-top:1em} .list_icon_text i{display:block; width:7em; height:7em; border-radius:50%; background:#f0fafe; background-size:43%; background-repeat:no-repeat; background-position:center; position:absolute; top:0; left:0;} .list_icon_text dt{font-size:1.2em; font-weight:bold; margin-bottom:.5em} .list_icon_text dt span{font-size:.8em;} [data-subarea="child"] .list_icon_text li:first-child i{background-image:url(/resource/www/images/contents/i_child11.svg); background-size:43%; background-position:center 53%;} [data-subarea="child"] .list_icon_text li:nth-child(2) i{background-image:url(/resource/www/images/contents/i_child12.svg); background-size:32%} [data-subarea="child"] .list_icon_text li:nth-child(3) i{background-image:url(/resource/www/images/contents/i_child13.svg); background-size:47%; background-position:center 48%} [data-subarea="child"] .list_icon_text li:nth-child(4) i{background-image:url(/resource/www/images/contents/i_child14.svg); background-position:center 45%;} @media all and (max-width:768px) { .list_icon_text li{padding-left:7em;} .list_icon_text i{width:6em; height:6em;} } @media all and (max-width:640px) { .list_icon_text li{border:1px solid #ddd; border-radius:10px; padding:1.5em 1em 1.5em 6.8em;} .list_icon_text li:not(:first-child){margin-top:.5em} .list_icon_text i{width:5em; height:5em; top:1em; left:1em;} .list_icon_text dt{line-height:1.2em} .list_icon_text dt span{display:block;} } /* 공공승마장 */ [data-subarea="riding"] .box_img{position:relative;} [data-subarea="riding"] .box_img li{position:absolute; border-radius:50%; background:var(--color-point); color:#fff; font-weight:bold; width:2em; height:2em; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; line-height:1} [data-subarea="riding"] .box_img li:first-child{left:40%; top:38.5%;} [data-subarea="riding"] .box_img li:nth-child(2){left:45%; top:35%;} [data-subarea="riding"] .box_img li:nth-child(3){left:32.5%; top:30.5%;} [data-subarea="riding"] .box_img li:nth-child(4){left:20%; top:25%;} [data-subarea="riding"] .box_img li:nth-child(5){right:22%; top:48%;} [data-subarea="riding"] .box_img li:nth-child(6){right:44.5%; top:35%;} [data-subarea="riding"] .box_img li:nth-child(7){right:31.5%; top:38.5%;} [data-subarea="riding"] .box_img li:nth-child(8){right:38%; top:38.5%;} [data-subarea="riding"] .box_img span{position:absolute; top:100%; opacity:0; width:0; height:0; overflow:hidden; clip: rect(0, 0, 0, 0); transition:all .5s; z-index:1} [data-subarea="riding"] .box_img li:hover span, [data-subarea="riding"] .box_img li:focus span{top:calc(100% + .2em); opacity:1; width:max-content; height:max-content; clip:inherit; background:rgb(0, 0, 0, .8); padding:.5em .8em; border-radius:10px; font-size:.9em} @media all and (max-width:540px) { [data-subarea="riding"] .box_img li:first-child{left:38%; top:38%;} [data-subarea="riding"] .box_img li:nth-child(2){left:44%; top:32%;} [data-subarea="riding"] .box_img li:nth-child(3){left:31%; top:29%;} [data-subarea="riding"] .box_img li:nth-child(4){left:16%; top:25%;} [data-subarea="riding"] .box_img li:nth-child(5){right:20%; top:46%;} [data-subarea="riding"] .box_img li:nth-child(6){right:42%; top:31%;} [data-subarea="riding"] .box_img li:nth-child(7){right:28%; top:37%;} [data-subarea="riding"] .box_img li:nth-child(8){right:36%; top:41%;} } @media all and (max-width:360px) { [data-subarea="riding"] .box_img li{width:1.5em; height:1.5em} [data-subarea="riding"] .box_img li:first-child{left:38%; top:38%;} [data-subarea="riding"] .box_img li:nth-child(2){left:44%; top:32%;} [data-subarea="riding"] .box_img li:nth-child(3){left:31%; top:29%;} [data-subarea="riding"] .box_img li:nth-child(4){left:16%; top:25%;} [data-subarea="riding"] .box_img li:nth-child(5){right:20%; top:46%;} [data-subarea="riding"] .box_img li:nth-child(6){right:42%; top:31%;} [data-subarea="riding"] .box_img li:nth-child(7){right:28%; top:37%;} [data-subarea="riding"] .box_img li:nth-child(8){right:36%; top:41%;} } /* 교육발전특구 */ [data-subarea="eduDev"] .box_sitelink .text_area dl dt{font-size:2em} [data-subarea="eduDev"] .area_diagram_type02 .list{--sizePadding:0; gap:1.5em;} [data-subarea="eduDev"] .area_diagram_type02 .list>li{width:calc(100% / 4 - 1.125em);} [data-subarea="eduDev"] .area_diagram_type02 li:before, [data-subarea="eduDev"] .area_diagram_type02 li:after{display:none !important;} [data-subarea="eduDev"] .area_diagram_type02 .list > li dl{padding-top:75px;} [data-subarea="eduDev"] .area_diagram_type02 .list > li:nth-child(2) dl{background-color: var(--color-green); border-color:var(--color-green)} [data-subarea="eduDev"] .area_diagram_type02 .list > li:nth-child(3) dl{background-color: var(--color-orange); border-color:var(--color-orange)} [data-subarea="eduDev"] .area_diagram_type02 .list > li:nth-child(4) dl{background-color: var(--color-purple); border-color:var(--color-purple)} [data-subarea="eduDev"] .area_diagram_type02 .list > li dt{position:absolute;top:0;left:0;text-align:center;width: 100%;font-size: 1.2em;} [data-subarea="eduDev"] .area_diagram_type02 .list > li dd{height:100%;flex:1 0 100%;align-items:flex-start;display:block;} [data-subarea="eduDev"] .area_diagram_type02 .list > li dd strong{min-height:3.5em; font-size:1.15em;font-weight:600; line-height:1.3;display: inline-flex;align-items:center;} [data-subarea="eduDev"] .area_diagram_type02 .list > li ul{font-weight:normal; font-size:.95em; text-align:left; border-top:1px dashed #ddd; padding-top:.5em; margin-top:.5em;} [data-subarea="eduDev"] .area_diagram_type02 .list > li li{position:relative; padding-left:.5em;} [data-subarea="eduDev"] .area_diagram_type02 .list > li li:before{content:""; display:block; width:3px; height:3px; border-radius:50%; background:var(--color-point); position:absolute; left:0; top:.6em} [data-subarea="eduDev"] .area_diagram_type02 .list > li:nth-child(2) li:before{background-color: var(--color-green);} [data-subarea="eduDev"] .area_diagram_type02 .list > li:nth-child(3) li:before{background-color: var(--color-orange);} [data-subarea="eduDev"] .area_diagram_type02 .list > li:nth-child(4) li:before{background-color: var(--color-purple);} [data-subarea="eduDev"] .box_img{margin:2.5em 0} [data-subarea="eduDev"] .box_img p.m{display:none;} @media all and (max-width:768px) { [data-subarea="eduDev"] .area_diagram_type02 .list>li{width: calc(100% / 2 - 1em);} [data-subarea="eduDev"] .box_img p:not(.m){display:none;} [data-subarea="eduDev"] .box_img p.m{display:block;} } @media all and (max-width:480px) { [data-subarea="eduDev"] .area_diagram_type02 .list>li{width:100%;} [data-subarea="eduDev"] .area_diagram_type02 .list > li dl{padding-top: 50px;} [data-subarea="eduDev"] .area_diagram_type02 .list > li dt{min-height:30px;padding: 15px 10px;} [data-subarea="eduDev"] .area_diagram_type02 .list > li dd{padding:15px} [data-subarea="eduDev"] .area_diagram_type02 .list > li dd strong{min-height:1.5em} [data-subarea="eduDev"] .box_img{margin:1.5em 0} } /* 다이어그램 버튼 */ .diagram_btn{background:var(--color-point); color:#fff; border-radius:10px;padding: .5em .8em;display:block;font-size: .9em;margin-top: .5em;line-height: 1.2;} /* 일반 링크 */ .basic_newtab{display:inline-block; position:relative; color:var(--color-point)} .basic_newtab:after{ content:''; opacity:1; display:inline-block; width:13px; height:11px; margin-left:7px; background:url(/resource/common/images/common/icon_newtab.svg) no-repeat 50% 50%; background-size:100%;} /* basic_popup */ body:has(.basic_popup.active){overflow-y:hidden;} body:has(.basic_popup.active) #container .section_middle{z-index:inherit} .basic_popup{opacity:0; height:0; overflow:hidden; clip: rect(0, 0, 0, 0); position:absolute; top:-100vh;} .basic_popup.active{display:block; opacity:1; position:fixed; top:0; left:0; width:100%; height:100%; z-index:5000; transition:all .5s; clip:auto;} .basic_popup:before{content:""; position:fixed; top:0; left:0; width:100%; height:100%; background:rgb(0, 0, 0, .5);} .basic_popup_wrap{width:50%; height:max-content; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:#fff; background:#fff; border-radius:1.5em; padding:2.5em;} .basic_popup_cont{overflow-y:auto; max-height:80vh;} .basic_popup_img img{width:100%;} .basic_popup_close{position:absolute; top:1em; right:1em; border-radius:50%; background:rgb(0, 0, 0, .8); width:3em; height:3em; overflow:hidden; box-shadow:5px 5px 10px rgba(255, 255, 255, .3); z-index:555; display:block; transition:1s} .basic_popup_close:hover, .basic_popup_close:focus{transform:rotate(360deg);} .basic_popup_close span{font-size:0; line-height:5000; width:0; height:0; overflow:hidden; display:block;} .basic_popup_close:before, .basic_popup_close:after{content:""; position:absolute; transform:translate(-50%, -50%); width:1.3em; height:1px; background:#fff;} .basic_popup_close:before{transform:translate(-50%, -50%) rotate(45deg);} .basic_popup_close:after{transform:translate(-50%, -50%) rotate(-45deg);} @media all and (max-width:768px) { .basic_popup_wrap{width:80%; border-radius:1em; padding:1.5em;} .basic_popup_close{top:.5em; right:.5em;} } @media all and (max-width:640px) { .basic_popup_wrap{width:90%;} } /************* 조직도 *************/ :root {--org-width: 224px;} @media all and (max-width:1650px) { :root {--org-width: 180px;} } [data-subarea="org"]{text-align:center;} /* style */ [data-subarea="org"]>ol>li a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a), [data-subarea="org"]>ol>li span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span) {display:inline-flex; border-radius:10px; width:var(--org-width); margin:auto; justify-content:center; align-items:center; flex-wrap:wrap; position:relative; width:var(--org-width);} [data-subarea="org"]>ol>li a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a):before, [data-subarea="org"]>ol>li span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span):before {display:block; content:""; height:100%; position:absolute; z-index:-1; border-radius:10px; top:6px} /* style2 */ [data-subarea="org"]>ol>li>a, [data-subarea="org"]>ol>li>span{background:var(--color-mint); color:#fff; font-size:20px; font-weight:600; height:70px;} [data-subarea="org"]>ol>li>a:before, [data-subarea="org"]>ol>li>span:before{background:#009895; width:100%} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>a, [data-subarea="org"]>ol>li>span{font-size:1.35em;} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li>a, [data-subarea="org"]>ol>li>column-span{font-size:1.25em; height:3.5em} } /* style1 */ [data-subarea="org"]>ol>li:first-child>a {background:linear-gradient(114deg, var(--color-skyblue), var(--color-point)); font-weight:700; font-size:25px; height:80px;} [data-subarea="org"]>ol>li:first-child>a:before {background:var(--color-point);} [data-subarea="org"]>ol>li:first-child>a:after {content:""; display:block; width:9px; height:9px; border:2px solid var(--color-point); border-radius:50%; background:var(--color-white); position:absolute; bottom:-6px; left:0; right:0; margin:auto;} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li:first-child>a {font-size:1.55em;} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li:first-child>a {font-size:1.45em; height:3.2em} } /* style3 */ [data-subarea="org"]>ol + ol{margin-top:3em} [data-subarea="org"]>ol>li>ol>li a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a), [data-subarea="org"]>ol>li>ol>li span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span) {border:1px solid var(--color-point); background:var(--color-white); font-size:17px; font-weight:600; height:70px;} [data-subarea="org"]>ol>li>ol>li a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a):before, [data-subarea="org"]>ol>li>ol>li span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span):before {background:var(--color-point); width:calc(100% + 2px);} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>ol>li a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a), [data-subarea="org"]>ol>li>ol>li span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span) {font-size:1.1em;} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li>ol>li a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a), [data-subarea="org"]>ol>li>ol>li span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span) {height:3.8em} } /* style3:black */ [data-subarea="org"]>ol>li>ol>li.black a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a), [data-subarea="org"]>ol>li>ol>li.black span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span) {border:1px solid var(--color-base1); background:var(--color-white);} [data-subarea="org"]>ol>li>ol>li.black a:not([data-subarea="org"]>ol>li>ol>li:has(ol) a):before, [data-subarea="org"]>ol>li>ol>li.black span:not([data-subarea="org"]>ol>li>ol>li:has(ol) span):before {background:var(--color-base1);} /* style4 */ [data-subarea="org"]>ol>li>ol>li:has(ol) {background:var(--color-point); border-radius:10px; color:var(--color-white); position:relative;} [data-subarea="org"]>ol>li>ol>li>ol {background:var(--color-white); color:var(--color-base1); text-align:left; padding:1.5em 1em; border-radius:10px; height:calc(100% - 58px); border:1px solid var(--color-point)} [data-subarea="org"]>ol>li>ol>li>strong {color:var(--color-white); font-size:19px; font-weight:600; height:58px; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;} [data-subarea="org"]>ol>li>ol>li>ol>li>a {position:relative; display:block; font-size:18px; padding-left:.6em; line-height:1.2} [data-subarea="org"]>ol>li>ol>li>ol>li>a:before {content:""; display:block; width:5px; height:5px; border-radius:50%; background:var(--color-point); position:absolute; top:.45em; left:0;} [data-subarea="org"]>ol>li>ol>li>ol>li:not(:first-child)>a {margin-top:.55em;} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>ol>li>ol {padding:1.2em 1em;} [data-subarea="org"]>ol>li>ol>li>strong {font-size:1.1em;} [data-subarea="org"]>ol>li>ol>li>ol>li>a {font-size:1em} [data-subarea="org"]>ol>li>ol>li>ol>li>a:before {width:4px; height:4px; top:.41em;} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li>ol>li>strong {height:3em} [data-subarea="org"]>ol>li>ol>li>ol {height:calc(100% - 3.32em);} } /* line1 */ [data-subarea="org"]>ol>li:not(:has(ol ol)):not(:has(.org_eup)) {position:relative;} [data-subarea="org"]>ol>li:not(:has(ol ol)):not(:has(.org_eup)):not(:last-child) {padding-bottom:2em; position:relative;} [data-subarea="org"]>ol>li:not(:has(ol ol)):not(:has(.org_eup)):after {content:""; display:block; background:var(--color-point); width:1px; height:100%; position:absolute; bottom:0; left:0; right:0; margin:auto; z-index:-2} [data-subarea="org"]>ol>li:not(:has(ol ol)):not(:has(.org_eup)):last-child:after{height:50%; top:0; bottom:auto;} @media all and (max-width:640px) { [data-subarea="org"]>ol>li:not(:has(ol ol)):not(:has(.org_eup)):last-child:after{height:100%} } /* line2-3 */ [data-subarea="org"]>ol>li>ol:not(:has(ol)):not(.org_eup)>li:not(:first-child) a:after, [data-subarea="org"]>ol>li>ol:not(:has(ol)):not(.org_eup)>li:not(:first-child) span:after {content:"";display:block;width: calc(125% + 6px);height:1px;background:var(--color-point);position:absolute;left: calc(-125% + -7px);z-index:-1} @media all and (max-width:900px) { [data-subarea="org"]>ol>li>ol:not(:has(ol)):not(.org_eup)>li:not(:first-child) a:after, [data-subarea="org"]>ol>li>ol:not(:has(ol)):not(.org_eup)>li:not(:first-child) span:after {width: calc(110% + 6px); left: calc(-110% + -7px);} } @media all and (max-width:640px) { [data-subarea="org"]>ol>li>ol:not(:has(ol)):not(.org_eup)>li:not(:first-child) a:after, [data-subarea="org"]>ol>li>ol:not(:has(ol)):not(.org_eup)>li:not(:first-child) span:after {display:none;} } /* line:black */ [data-subarea="org"]>ol>li>ol:not(:has(ol))>li.black + li span:after{width:calc(50% + 2px); left:calc(-50% + -3px)} /* line4 */ [data-subarea="org"]>ol>li>ol:has(ol) {position:relative; padding-top:2em;} [data-subarea="org"]>ol>li>ol:has(ol):before {content:""; display:block; background:var(--color-point); width:calc(100% - ((100% - 6em) / 7)); height:1px; position:absolute; top:0; left:0; right:0; margin:auto;} [data-subarea="org"]>ol>li>ol>li:has(ol):before {content:""; display:block; width:1px; height:2em; background:var(--color-point); position:absolute; top:-2em; left:0; right:0; margin:auto;} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>ol:has(ol):before {background:var(--color-point); width:calc(100% - ((100% - 3em) / 7));} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li>ol:has(ol):before {background:var(--color-point); width:calc(100% - ((100% - 1.5em) / 4));} } @media all and (max-width:640px) { [data-subarea="org"]>ol>li>ol:has(ol):before {background:var(--color-point); width:calc(100% - ((100% - 1em) / 2));} } /* align2-3 */ [data-subarea="org"]>ol>li>ol:not(:has(ol)) {display:flex; flex-wrap:wrap; justify-content:center; gap:0 14.2em; width:100%;} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>ol:not(:has(ol)) {gap:0 4em;} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li>ol:not(:has(ol)) {gap:0 2em;} } @media all and (max-width:640px) { [data-subarea="org"]>ol>li>ol:not(:has(ol)) {gap:2em;} [data-subarea="org"]>ol>li>ol:not(:has(ol))>li {width:100%;} } /* align3 */ [data-subarea="org"]>ol>li>ol>li.item_right {position:absolute; right:0; margin:auto; top:0;} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>ol>li.item_right {position:relative; right:auto; margin:inherit;} [data-subarea="org"]>ol>li>ol>li:not(:has(ol)):not(.black):nth-child(2).item_right a:after, [data-subarea="org"]>ol>li>ol>li:not(:has(ol)):not(.black):nth-child(2).item_right span:after {right:auto; left:auto; top:-2em; height:2em; width:1px;} } @media all and (max-width:640px) { [data-subarea="org"]>ol>li>ol>li:not(:has(ol)):not(.black):nth-child(2) ul a:after, [data-subarea="org"]>ol>li>ol>li:not(:has(ol)):not(.black):nth-child(2) ul span:after {background:var(--color-white); display:block;} } /* align4 */ [data-subarea="org"]>ol>li>ol:has(ol>li) {display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:1em} [data-subarea="org"]>ol>li>ol:has(ol>li)>li {width:calc((100% - 6em) / 7)} @media all and (max-width:1500px) { [data-subarea="org"]>ol>li>ol:has(ol>li) {gap:.5em} [data-subarea="org"]>ol>li>ol:has(ol>li)>li {width:calc((100% - 3em) / 7)} } @media all and (max-width:900px) { [data-subarea="org"]>ol>li>ol:has(ol>li) {gap:2em .5em; justify-content:start;} [data-subarea="org"]>ol>li>ol:has(ol>li)>li {width:calc((100% - 1.5em) / 4)} } @media all and (max-width:640px) { [data-subarea="org"]>ol>li>ol:has(ol>li) {gap:2em 1em;} [data-subarea="org"]>ol>li>ol:has(ol>li)>li {width:calc((100% - 1em) / 2)} } /* oder */ [data-subarea="org"]>ul {display:flex; flex-wrap:wrap; margin-top:3em; justify-content:space-between; gap:1em} [data-subarea="org"]>ul>li {width:calc(100% / 6 - 1em)} [data-subarea="org"]>ul>li a, [data-subarea="org"]>ul>li span {display:inline-flex; border-radius:10px; width:100%; margin:auto; justify-content:center; align-items:center; flex-wrap:wrap; position:relative; border:1px solid var(--color-base1); background:var(--color-white); font-size:17px; font-weight:600; height:70px;} [data-subarea="org"]>ul>li a:before, [data-subarea="org"]>ul>li span:before {display:block; content:""; height:100%; position:absolute; z-index:-1; border-radius:10px; top:6px; background:var(--color-base1); width:calc(100% + 2px);} @media all and (max-width:1500px) { [data-subarea="org"]>ul>li {width:calc((100% - 2em) / 3)} [data-subarea="org"]>ul>li a, [data-subarea="org"]>ul>li span {font-size:1.1em;} } @media all and (max-width:900px) { [data-subarea="org"]>ul {justify-content:flex-start;} [data-subarea="org"]>ul>li a, [data-subarea="org"]>ul>li span {height:3.8em} } @media all and (max-width:640px) { [data-subarea="org"]>ul>li {width:calc((100% - 1em) / 2)} } /* eup */ [data-subarea="org"] .org_eup {gap:1em; justify-content:flex-start; padding-top:1em; position:relative;} [data-subarea="org"] .org_eup:before {content:""; display:block; width:calc(100% - ((100% - 5em) / 6)); height:1px; background:var(--color-point); position:absolute; top:0; left:0; right:0; margin:auto;} [data-subarea="org"] .org_eup li {width:calc((100% - 5em) / 6); position:relative;} [data-subarea="org"] .org_eup li:before {content:""; display:block; width:1px; height:1em; background:var(--color-point); position:absolute; top:-1em; left:0; right:0; margin:auto} [data-subarea="org"] .org_eup a {width:100% !important;} @media all and (max-width:900px) { [data-subarea="org"] .org_eup:before {width:calc(100% - ((100% - 3em) / 4));} [data-subarea="org"] .org_eup li {width:calc((100% - 3em) / 4);} } @media all and (max-width:640px) { [data-subarea="org"] .org_eup:before {width:calc(100% - ((100% - 1em) / 2));} [data-subarea="org"] .org_eup li {width:calc((100% - 1em) / 2);} } /************* 행사안내 *************/ .schedule_wrap{display:flex; justify-content:space-between; align-items:stretch; flex-wrap:wrap; border:1px solid #ddd; padding:1.5em; border-radius:10px; margin-bottom:3em} .schedule_wrap .calendarWrap{width:385px;} .schedule_wrap .calendarWrap .calendar table td{height:55px;} .schedule_wrap .calendarWrap .sort_area .year_ctrl{padding:0 0 20px;} .schedule_wrap .calendarWrap .sort_area .year_ctrl .date{line-height:1;} .schedule_wrap .calendarWrap .calendar .num{display:inline-flex; justify-items:center; justify-content:center; align-items:center; width:34px; height:34px; border-radius:50%} .schedule_wrap .calendarWrap .calendar a .num{border:1px solid var(--color-mint); color:var(--color-mint)} .schedule_wrap .calendarWrap .calendar .today span{background:var(--color-point); border-color:var(--color-point)} .schedule_wrap .calendarWrap .calendar .today span{color:#fff;} @media all and (max-width:768px) { .schedule_wrap{margin-bottom:2em} .schedule_wrap .calendarWrap{width:100%;} .schedule_wrap .calendarWrap .calendar table td{height:45px;} } @media all and (max-width:540px) { .schedule_wrap{padding:1em; margin-bottom:1em} .schedule_wrap .calendarWrap .sort_area .year_ctrl{padding-bottom:.5em;} .schedule_wrap .calendarWrap .sort_area .year_ctrl .date{font-size:1.6em} .schedule_wrap .calendarWrap .calendar table td{height:36px;} .schedule_wrap .calendarWrap .calendar .num{width:25px; height:25px;} } .schedule_wrap .schedule_list{width:calc(100% - 420px);overflow:hidden;position:relative;height: 100%;} .schedule_wrap .list_slide{display:flex;flex-wrap:wrap;justify-content: space-between;background:var(--color-light-gray);align-items:center;padding:1.5em 2.5em;height:calc(100% - 3em);} .schedule_wrap .schedule_list li{width:100% !important} .schedule_wrap .schedule_list p{width:45%;border-radius:10px;overflow:hidden;height: 345px;position:relative;} .schedule_wrap .schedule_list p img{position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%) scale(1,1) rotate(0.001deg); transition:0.5s ease 0s; transition-property:transform;} .schedule_wrap .schedule_list dl{width:44%; padding-right:2em} .schedule_wrap .schedule_list dt span{display:block; width:max-content; margin-bottom:.3em} .schedule_wrap .schedule_list dt strong{font-size:1.5em; font-weight:600; line-height:1.3; display:block; text-overflow:ellipsis; word-break: break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:2.6em; margin-bottom:1em} .schedule_wrap .schedule_list dd{margin-bottom:.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .schedule_wrap .slide_paging_wrap{position:absolute; bottom:1em; right:1em; display:flex; flex-wrap:wrap; justify-content:end; align-items:center; z-index:10; width:max-content; gap:.5em; align-items: center; } .schedule_wrap .slide_paging_wrap .slide_paging{width:auto; display:flex} .schedule_wrap .slide_paging_wrap .slide_paging span{border-radius:0;width: 1.5em; height:4px; margin:0 !important;} .schedule_wrap .slide_paging_wrap .btn_auto{display:block;width: 1.9em;height: 1.65em;overflow:hidden;line-height:5000;text-indent:-5000px; position:relative;} .schedule_wrap .slide_paging_wrap .btn_auto:before, .schedule_wrap .slide_paging_wrap .btn_auto:after{content:""; display:block; width:2px; height:.7em; background:#000; position:absolute; top:0; bottom:0; margin:auto;} .schedule_wrap .slide_paging_wrap .btn_auto:before{left:.7em;} .schedule_wrap .slide_paging_wrap .btn_auto:after{right:.7em;} .schedule_wrap .slide_paging_wrap .btn_auto.paused:before{width:0; height:0; border-style:solid; border-width:5px 0px 5px 7px; border-color:transparent transparent transparent #000; background:none; top:-1px; left:0; right:0;} .schedule_wrap .slide_paging_wrap .btn_auto.paused:after{display:none;} .schedule_wrap .slide_control .btn_prev, .schedule_wrap .slide_control .btn_next{position:absolute; top:0; bottom:0; margin:auto; display:block; width:3em; height:3em; background:var(--color-white); background-repeat:no-repeat; background-position:center; line-height:5000; overflow:hidden; text-indent:-50000px; z-index:10; border-radius:50%;} .schedule_wrap .slide_control .btn_prev{background-image:url(http://iksanwww.9is.co.kr/resource/common/images/bbs/bbs-prev.png); left:1em} .schedule_wrap .slide_control .btn_next{background-image:url(http://iksanwww.9is.co.kr/resource/common/images/bbs/bbs-next.png); right:1em;} @media all and (max-width:1500px) { .schedule_wrap .list_slide{display:block;} .schedule_wrap .list_slide p{width:100%;height: 181px;margin-bottom:1.5em;} .schedule_wrap .schedule_list dl{width:100%;} .schedule_wrap .schedule_list dt strong{font-size:1.4em; -webkit-line-clamp:1; height:1.2em;} .schedule_wrap .schedule_list dd{margin-bottom:.3em;} } @media all and (max-width:1268px) { .schedule_wrap .list_slide{display:flex;} .schedule_wrap .list_slide p{width:45%;height: 321px;} .schedule_wrap .list_slide dl{width:44%;} .schedule_wrap .schedule_list dt strong{-webkit-line-clamp:2; height:2.6em;} .schedule_wrap .schedule_list dd{margin-bottom:.5em;} } @media all and (max-width:1024px) { .schedule_wrap .list_slide{display:block;} .schedule_wrap .list_slide p{width:100%;height: 204px;} .schedule_wrap .schedule_list dl{width:100%;} .schedule_wrap .schedule_list dt strong{-webkit-line-clamp:1; height:1.2em;} .schedule_wrap .schedule_list dd{margin-bottom:.3em;} } @media all and (max-width:768px) { .schedule_wrap .schedule_list{width:100%;} .schedule_wrap .list_slide{display:flex;} .schedule_wrap .list_slide p{width:40%; height:250px} .schedule_wrap .list_slide dl{width:calc(60% - 4em);} .schedule_wrap .schedule_list dt strong{-webkit-line-clamp:2; height:2.6em;} .schedule_wrap .schedule_list dd{margin-bottom:.5em;} } @media all and (max-width:540px) { .schedule_wrap .list_slide{display:block; padding:1em 1em 2em} .schedule_wrap .list_slide p{width:100%; height:200px; margin-bottom:1em;} .schedule_wrap .schedule_list dl{width:100%;} .schedule_wrap .schedule_list dt span{font-size:.9em} .schedule_wrap .schedule_list dt strong{font-size:1.3em; -webkit-line-clamp:1; height:1.2em; margin-bottom:.8em} .schedule_wrap .schedule_list dd{margin-bottom:.3em;} .schedule_wrap .slide_paging_wrap{bottom:.5em; left:1em; margin:auto;} .schedule_wrap .slide_control .btn_prev, .schedule_wrap .slide_control .btn_next{width:2.7em; height:2.7em} .schedule_wrap .slide_control .btn_prev{left:.3em;} .schedule_wrap .slide_control .btn_next{right:.3em;} } .s_category{font-size:15px; color:#fff; background:var(--color-point); padding:.4em .8em .35em; border-radius:5px; display:inline-block; line-height:1} .s_category.red{background:var(--color-red)} .s_category.green{background:var(--color-green)} .s_category.skyblue{background:var(--color-skyblue)} .s_category.pink{background:var(--color-pink)} .s_category.mint{background:var(--color-mint)} .i_location{display:inline-block; width:1em; height:1em; background:url(/resource/www/images/contents/i_location.svg) no-repeat; overflow:hidden; line-height:5000; text-indent:-50000px; vertical-align:middle; margin-right:.5em} .i_calendar{display:inline-block; width:1em; height:1em; background:url(/resource/www/images/contents/i_calendar.svg) no-repeat; overflow:hidden; line-height:5000; text-indent:-50000px; vertical-align:middle; margin-right:.5em} /* 찾아오시는 길 */ [data-subarea="directions"] .box_info_top{display:block;} [data-subarea="directions"] .box_info_top .list_icon_text{display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:2em;} [data-subarea="directions"] .box_info_top .list_icon_text li{width:45%; padding-left:95px; min-height:80px;} [data-subarea="directions"] .box_info_top .list_icon_text li:first-child{width:55%;} [data-subarea="directions"] .box_info_top .list_icon_text li:not(:first-child){margin-top:0;} [data-subarea="directions"] .box_info_top .list_icon_text i{width:80px; height:80px; background-color:#fff8da;} [data-subarea="directions"] .box_info_top .list_icon_text li:first-child i{background-image:url(/resource/www/images/contents/icon_directions01.svg); background-size:35%} [data-subarea="directions"] .box_info_top .list_icon_text li:nth-child(2) i{background-image:url(/resource/www/images/contents/icon_directions02.svg); background-size:42%} [data-subarea="directions"] .box_info_top .list_icon_text dt{font-size:1em; margin-bottom:0; font-weight:normal} [data-subarea="directions"] .box_info_top .list_icon_text dd{font-size:1.05em; font-weight:700} @media all and (max-width:768px) { [data-subarea="directions"] .box_info_top .list_icon_text li{width:35%; padding-left:95px; min-height:80px;} [data-subarea="directions"] .box_info_top .list_icon_text li:first-child{width:65%;} } @media all and (max-width:640px) { [data-subarea="directions"] .box_info_top .list_icon_text{gap:1em 0} [data-subarea="directions"] .box_info_top .list_icon_text li, [data-subarea="directions"] .box_info_top .list_icon_text li:first-child{width:100%; padding-left:85px;} [data-subarea="directions"] .box_info_top .list_icon_text i{width:4em; height:4em; bottom:1em; margin:auto;} [data-subarea="directions"] .box_info_top .list_icon_text dt{margin-bottom:.2em;} [data-subarea="directions"] .box_info_top .list_icon_text dd{line-height:1.2} } /********************************************************************** modal_pop **********************************************************************/ body:has(.modal_pop.active){overflow-y:hidden;} .modal_pop{opacity:0; height:0; overflow:hidden; clip: rect(0, 0, 0, 0); position:absolute; top:-100vh;} .modal_pop.active{display:block; opacity:1; position:fixed; top:0; left:0; width:100%; height:100%; z-index:5000; transition:all .5s; clip:auto;} .modal_pop:before{content:""; position:fixed; top:0; left:0; width:100%; height:100%; background:rgb(0, 0, 0, .5);} .modal_wrap{width:50%; height:max-content; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:#fff; background:#fff; border-radius:1.5em; padding:2em;} .modal_cont{overflow-y:auto; max-height:60vh;} .modal_img img{width:100%;} .modal_close{position:absolute; top:1em; right:1em; border-radius:50%; background:rgb(0, 0, 0, .8); width:3em; height:3em; overflow:hidden; box-shadow:5px 5px 10px rgba(255, 255, 255, .3); z-index:555; display:block; transition:1s} .modal_close:hover, .modal_close:focus{transform:rotate(360deg);} .modal_close span{font-size:0; line-height:5000; width:0; height:0; overflow:hidden; display:block;} .modal_close:before, .modal_close:after{content:""; position:absolute; transform:translate(-50%, -50%); width:1.3em; height:1px; background:#fff;} .modal_close:before{transform:translate(-50%, -50%) rotate(45deg);} .modal_close:after{transform:translate(-50%, -50%) rotate(-45deg);} @media all and (max-width:768px) { .modal_wrap{width:90%} } .mb30 { margin-bottom:30px !important} .box_text_gray .text_title, .box_text_line .text_title{ margin:0 0 20px 0; font-size:1.25em; font-weight:bold; color:var(--color-base); line-height:1.3} .list_imgTitle + .list_imgTitle { margin-top: 60px;} .basic_table .td_border{border-right: 1px #dfdfdf solid !important;} .list_imgTitle .img.bnone { border-radius:0;} .box_text_line .tit, .box_text_gray .tit { color:var(--color-point); font-size:1.15em; font-weight:600} .basic_ul .box_text_line { font-size:inherit;} .basic_ul table { font-size:16px;} /* 아이콘박스 */ .box_info_top .ico.budget { background:#fff8da url("/resource/www/images/contents/icon_info_budget.svg") no-repeat 50% 50%;} /* box_img */ .box_img_wrap { display: flex; flex-wrap: wrap; gap: 20px;} .box_img_wrap .box_img { flex: 1 1 100%; position:relative; text-align:center;} .box_img_wrap .box_img img { display:block; margin:0 auto; max-width:100%; height:auto;} .box_img_wrap.two .box_img { flex: 1 1 calc(50% - 10px); } .box_img.line { border:1px solid #ddd; border-radius:20px; padding:20px;} .box_img { position:relative; text-align:center; } .box_img img { margin:0 auto; width:auto !important; max-width:100% !important; border-radius: 15px;} .box_img .none { border-radius:0 } .box_img .img_zoom { display:none; position:absolute; right:0; bottom:0; z-index:1; width:42px;height:42px; background:rgba(0, 0, 0, 0.8);} .box_img .img_zoom a { display:block; height:100%; font-size:0;} .box_img .img_zoom a:before { content:'';display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:18px; height:18px; margin:auto; background:url(/resource/www/images/common/icon_search.svg) no-repeat; /*filter: invert(10);*/} .box_img_inner { padding:30px;border-radius: 20px;background:#f6f6f6; text-align:center;} .box_img_inner02 { padding: 30px; background: var(--color-white); border: 1px solid #ddd; border-radius: 20px; text-align:center;} .box_img_inner img, .box_img_inner02 img { display:block; margin:0 auto; max-width:100%; height:auto;} .box_img.left { text-align:left } .box_img img.w100 {width:100% !important;} @media all and (max-width: 1024px) { .box_img_wrap .box_img { flex: 1 1 100%;} .box_img_wrap .box_img img, .box_img_inner img { width: 100%; height: auto;} } @media all and (max-width:768px) { .box_img .img_zoom { display:block;} } /* 조직정보공개 */ /* 그래프 */ .vertical_chart_box { position:relative; background:#f8f9fa; padding:3em; border-radius:10px; width:60%; margin-left:auto; margin-right:auto; box-sizing:border-box;} .vertical_chart_box .info { display:flex; gap:0 20px; justify-content:flex-end; font-size:15px; margin:-15px 0 20px 0;} .vertical_chart_box .info>li { display:flex; align-items: center; } .vertical_chart_box .info span { display:inline-block; width:20px; height:15px; margin-right:7px; vertical-align:middle; margin-top:-3px; } .vertical_chart_box .info .color_point { background:var(--color-point); } .vertical_chart_box .info .color_point2 { background:var(--color-point2); } .vertical_chart_box .info .color_gray { background:var(--color-base2); } .vertical_chart_box .info .color_green { background:var(--color-green); } .vertical_chart_box .tar { font-size:.9em; margin-bottom:20px } .vertical_chart_box .chart_box { position:relative; padding-bottom:25px; padding-left:52px; box-sizing:border-box; height:300px; overflow:hidden } .vertical_chart_box .axis_y { display:-webkit-flex; display:-ms-flex; display:-o-flex; display:flex; flex-direction:column-reverse; justify-content:space-between; position:absolute; top:0; left:0; margin:0; width:52px; padding-right:20px; height:calc(100% - 25px); font-size:.85em; text-align:right; box-sizing:border-box; font-size:13px;} .vertical_chart_box .axis_y:before { content:''; position:absolute; top:5px; bottom:10px; right:0; width:1px; background:#d3d3d3; } .vertical_chart_box .axis_y>li { position:relative; } .vertical_chart_box .axis_y>li+li::before { position:absolute; width:100vh; left:52px; height:1px; top:10px; content:''; background:#d3d3d3; } .vertical_chart_box .axis_x { display:-webkit-flex; display:-ms-flex; display:-o-flex; display:flex; justify-content:center; position:relative; padding:0; box-sizing:border-box; height:calc(100% - 10px); border-bottom:1px solid #d3d3d3; } .vertical_chart_box .axis_x .item { flex:1; position:relative; } .vertical_chart_box .axis_x .text_box { position:absolute; bottom:-40px; width:90%; left:50%; text-align:center; -webkit-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0); } .vertical_chart_box .axis_x .item .day { display:flex; line-height:1.2; letter-spacing:-.065em; align-items:center; justify-content: center; height:40px;} .vertical_chart_box .axis_x .time { display:block; margin-top:3px; font-size:12px; } .vertical_chart_box .graph { display:-webkit-flex; display:-ms-flex; display:-o-flex; display:flex; flex-direction:column-reverse; position:relative; margin:0 auto; padding:0; width:50px; height:100%; background:#e8e8e8; border-radius:3px 3px 0 0;overflow:hidden;} .vertical_chart_box .graph .time { display:block; position:absolute; margin-bottom:-4px; padding-top:4px; bottom:0; left:0; box-sizing:content-box; width:100%; border-radius:3px 3px 0 0; } .vertical_chart_box .graph .time span { color:#fff; } .vertical_chart_box .graph .data1 { background:var(--color-point);z-index:4;} .vertical_chart_box .graph .data2 { background:var(--color-point2);z-index:3;} .vertical_chart_box .graph .data3 { background:var(--color-green);z-index:2;} .vertical_chart_box .graph .data4 { background:var(--color-base2);z-index:1;} .vertical_chart_box .circle_box { width:300px; height:300px; border-radius:100%; overflow:hidden; position:relative; background:var(--color-green); margin:0 auto } .vertical_chart_box .circle_box .basics { width:150px; height:300px; position:absolute; left:50%; background:var(--color-orange); top:0; } .vertical_chart_box .circle_box .basics::before { position:absolute; bottom:-10%; height:120%; width:100%; background:var(--color-orange); content:''; } .vertical_chart_box .circle_box .w55_6::before { transform:rotate(20deg); } .vertical_chart_box .circle_box .w55::before { transform:rotate(18deg); } .vertical_chart_box .circle_box .w54_2::before { transform:rotate(15deg); } .vertical_chart_box .circle_box .w51_8::before { transform:rotate(5deg); } .vertical_chart_box .circle_box .w51_1::before { transform:rotate(3.5deg); } .vertical_chart_box .circle_box .w50_3::before { transform:rotate(1deg); } .vertical_chart_box .circle_box .man, .vertical_chart_box .circle_box .woman { position:absolute; top:50%; width:50%; text-align:center; color:#fff; z-index:2; transform:translateY(-50%); } .vertical_chart_box .circle_box .woman { right:0; } @media screen and (max-width:968px){ /* 그래프 */ .vertical_chart_box { width:100%; padding:2.5em; } .vertical_chart_box .chart_box { padding-left:48px; } .vertical_chart_box .axis_y>li+li::before { left:48px; } .vertical_chart_box .axis_y { width:48px; } } @media screen and (max-width:568px){ /* 그래프 */ .vertical_chart_box { padding:2em 1em 1em; } .vertical_chart_box .chart_box { padding-left:49px; height:250px; } .vertical_chart_box .axis_y { width:50px; padding-right:15px; } .vertical_chart_box .axis_y>li { font-size:11px; } .vertical_chart_box .axis_y>li+li::before { left:49px; } .vertical_chart_box .axis_x .item .day { font-size:11px; } .vertical_chart_box .graph { width:40px } .vertical_chart_box .circle_box { width:240px; height:240px; } .vertical_chart_box .circle_box .basics { width:120px; height:240px; } } /*다이어그램 세로*/ .area_diagram_type02.vertical .list { flex-direction: column; gap: 1.5em 0; margin-right:0 !important;} .area_diagram_type02.vertical .list > li { width: 100%; padding-right: 0; padding-bottom:0 !important; margin-bottom:10px; } .area_diagram_type02.vertical .list > li dl, .area_diagram_type02.vertical .list > li dt, .area_diagram_type02.vertical .list > li dd { min-height:auto; } .area_diagram_type02.vertical .list > li dd.tal { justify-content:flex-start } .area_diagram_type02.vertical .list > li:after, .area_diagram_type02.vertical .list > li:before { top: auto; left: 50%; right: auto; transform: translateX(-50%) rotate(135deg); bottom: calc(var(--sizePadding) / -2 + 4px);} .area_diagram_type02.vertical .list > li:before { bottom: calc(var(--sizePadding) / -2);} .area_diagram_type02.vertical .list > li:last-child:before, .area_diagram_type02.vertical .list > li:last-child:after { display: none;} @media all and (max-width:1568px){ .area_diagram_type02.vertical .list > li { --sizePadding:40px} .area_diagram_type02.vertical .list > li dt br, .area_diagram_type02.vertical .list > li dd br { display:block; } } @media all and (max-width:768px){ .area_diagram_type02.vertical .list { flex-direction: column; gap: 1.5em 0;} .area_diagram_type02.vertical .list > li:after, .area_diagram_type02.vertical .list > li:before { top: auto; left: 50%; right: auto; transform: translateX(-50%) rotate(135deg); bottom: calc(var(--sizePadding) / -2 + 4px);} .area_diagram_type02.vertical .list > li:before { bottom: calc(var(--sizePadding) / -2); } .area_diagram_type02.vertical .list > li:last-child:before, .area_diagram_type02.vertical .list > li:last-child:after { display: none; } } @media all and (max-width:468px){ .area_diagram_type02.vertical .list > li dt, .area_diagram_type02.vertical .list > li dd { padding:10px 25px; } } /* 조직도 */ .org_box { padding: 30px 30px 50px 30px;margin: 20px 0;border-radius: 15px;box-sizing: border-box;background-color: #f7f7fc } .org_chart { display: flex; flex-direction: column; align-items: center; gap: 30px;} .org_level { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;} .org_item { background-color: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.05); padding:10px;text-align: center; font-weight: bold; display:inline-block;} .top { position:relative; margin-top:40px } .top:before {content:'';display: block;position: absolute;top:60px;right: 50%;width: 1px;height:150px;background-color: #d5d7dd; transform: translateX(-50%);} .top .org01 { background-color: var(--color-point); color:var(--color-white); width:200px; min-width: inherit; max-width: inherit; height:60px; display:flex; align-items: center; justify-content:center;} .mid .org_item { position: relative; background-color: var(--color-point2); color:var(--color-white); width:200px; display:flex; align-items: center; justify-content:center;} .bottom { margin-top:50px } .department { padding:0; position: relative;} .department .dept_title { padding:10px; color:var(--color-white); border-radius: 10px 10px 0 0; background-color:#757b8e;} .department ul { padding: 10px; margin: 0; font-weight: normal; color: #555; text-align: center;} .department ul li { margin: 10px 0; position: relative; line-height:1.28;} .department ul li span { color:var(--color-point); } .department:before {content:'';display: block;position: absolute;bottom: 100%;right: 50%;width: 1px;height:30px;background-color: #d5d7dd; transform: translateX(-50%);} .department:after {content:'';display: block;position: absolute;left: -20%;top: -30px;width: 120%;height: 1px;background-color: #d5d7dd;} .department:first-of-type::after { left:50%; } .department:last-of-type::after { right:50%; left:inherit;} @media all and (max-width:1532px){ .top:before { display:none; } .bottom .org_item {min-width: 20%; max-width: 200px;} .department:before, .department:after { display:none } .bottom { margin-top:0 } } @media all and (max-width:768px){ .top { margin-top:0 } .org_level.top { width:100% } .org_chart { align-items:stretch; } .top .org01 { width:100%; min-width:100%; max-width: inherit;} .mid .org_item { width:100% } .mid { padding-left:0 } .mid .org_item:after { display:none; } .bottom .org_item { min-width: 100%; max-width: inherit;} } /* 재정 */ [data-subarea="budget"] ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;} [data-subarea="budget"] ul.basic_ul{display:block;} [data-subarea="budget"] ul.basic_ul > li > ul{display:block;} [data-subarea="budget"] .basic_table ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none;} [data-subarea="budget"] ul.col02 { grid-template-columns: repeat(2, 1fr); } [data-subarea="budget"] ul.col03 { grid-template-columns: repeat(3, 1fr); } [data-subarea="budget"] ul.col04 { grid-template-columns: repeat(4, 1fr); } [data-subarea="budget"] ul.col05 { grid-template-columns: repeat(5, 1fr); } [data-subarea="budget"] ul li a { display: flex; justify-content: space-between; align-items: center; height:48px; padding: 10px; box-sizing: border-box; border: 1px solid var(--color-line); border-radius: 5px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.08s ease; text-align: left} [data-subarea="budget"] ul li a:hover, [data-subarea="budget"] ul li a:focus { border-color: var(--color-black); box-shadow: 0 10px 20px rgba(0,0,0,0.15); outline: none;} [data-subarea="budget"] ul li a:focus-visible { box-shadow: 0 0 0 2px rgba(0,0,0,0.08); border-color: var(--color-point);} [data-subarea="budget"] ul li .tit { flex: 1; margin: 0; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } [data-subarea="budget"] ul li a .tit{ display: flex; justify-content: space-between; align-items: center; } [data-subarea="budget"] ul li .tit i.down{ display: inline-block; width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--color-line); background: #f7f7f9; background-image: url("/resource/www/images/contents/icon_down.svg"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; margin-left: 8px; } [data-subarea="budget"] ul li .tit i.link{ display: inline-block; width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--color-line); background: #f7f7f9; background-image: url("/resource/www/images/contents/icon_link.svg"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; margin-left: 8px; } [data-subarea="budget"] .basic_table .download { display: inline-flex; justify-content: center; align-items: center; padding: 5px 15px; box-sizing: border-box; border: 1px solid var(--color-line); border-radius: 5px; text-decoration: none; transition: transform 0.08s ease; width: auto; } [data-subarea="budget"] .basic_table .download .tit { display: flex; justify-content:center; flex: 1; margin: 0; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; align-items:center; } [data-subarea="budget"] .basic_table .download .down { display: inline-block; width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--color-line); background: #f7f7f9; background-image: url("/resource/www/images/contents/icon_down.svg"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; margin-left: 8px; } [data-subarea="budget"] .basic_table .download:hover, [data-subarea="budget"] .basic_table .download:focus { border-color: var(--color-black); box-shadow: 0 3px 5px rgba(0,0,0,0.15); outline: none;} @media all and (max-width:1024px){ [data-subarea="budget"] ul.col05:not(.basic_table ul) { grid-template-columns: repeat(3, 1fr); } [data-subarea="budget"] ul.col04:not(.basic_table ul) { grid-template-columns: repeat(2, 1fr); } [data-subarea="budget"] ul.col03:not(.basic_table ul) { grid-template-columns: repeat(2, 1fr); } } @media all and (max-width:640px){ [data-subarea="budget"] ul.col05:not(.basic_table ul), [data-subarea="budget"] ul.col04:not(.basic_table ul), [data-subarea="budget"] ul.col03:not(.basic_table ul) { grid-template-columns: 1fr;} [data-subarea="budget"] ul li a { height: auto; padding: 12px; } } /* 착한가게 */ [data-subarea="store_list"] .store_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5em; margin-top:1em; align-items: stretch;} [data-subarea="store_list"] .store_item { display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid #ddd; border-radius: 10px; padding: 1em; background: var(--color-white); display: flex; flex-direction: column; transition: box-shadow 0.3s ease; height:100%; } [data-subarea="store_list"] .store_item:hover, [data-subarea="store_list"] .store_item:focus { box-shadow: 0 4px 12px rgba(0,0,0,0.1);} [data-subarea="store_list"] .store_title { font-size: 1.2em; font-weight: bold; color: var(--color-point); text-align: center;} [data-subarea="store_list"] .store_img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; } [data-subarea="store_list"] .store_menu { list-style: none; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} [data-subarea="store_list"] .store_info { margin-top: auto;} [data-subarea="store_list"] .store_info span { display: block; } [data-subarea="store_list"] .store_info .address { display: block; padding-left: 24px; background: url("/resource/www/images/contents/store_address.svg") no-repeat left top; background-size: 20px 20px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.4;} [data-subarea="store_list"] .store_info .phone { display: inline-block; padding-left: 24px; background: url("/resource/www/images/contents/store_phone.svg") no-repeat left center; background-size: 20px 20px;} @media all and (max-width:1024px){ [data-subarea="store_list"] .store_list { grid-template-columns: repeat(2, 1fr); } } @media all and (max-width:768px){ [data-subarea="store_list"] .store_list { grid-template-columns: 1fr;} } /* 서비스헌장 */ [data-subarea="declaration"] .inner { display: flex; flex-direction: column; gap: 30px; padding: 20px; border: 4px solid #e3e6e6;} [data-subarea="declaration"] .inner .top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin:0; } [data-subarea="declaration"] .inner .top:before{ display: block; content: "";position: absolute;left:50%;top:0;width:223px;height:67px;background:url("/resource/www/images/contents/declaration_bg.png") no-repeat;} [data-subarea="declaration"] .inner .top .title { font-size: 2.25em; color: var(--color-point); padding-top:90px; font-family: var(--font-tenada);} [data-subarea="declaration"] .inner .sub_title { color: var(--color-black); text-align:center;} [data-subarea="declaration"] .inner .bottom { display: flex; flex-direction: column; gap: 40px; border: 1px dashed #dcdede; border-radius: 10px; background: #f7f7f7; padding: 40px; margin-top:0} [data-subarea="declaration"] .inner .bottom .text p{color:#666;letter-spacing: -0.056em;line-height: 1.46;text-align: left;} [data-subarea="declaration"] .inner .bottom ul { display: flex; flex-direction: column; gap: 40px; list-style: none; padding: 0; margin: 0;} [data-subarea="declaration"] .inner .bottom ul li { display: flex; align-items: center; gap: 20px; } [data-subarea="declaration"] .inner .bottom ul li .order { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 50%; color: var(--color-white); font-weight: 500; flex-shrink: 0;} [data-subarea="declaration"] .inner .bottom ul li .order.bg1 { background:var(--color-point); } [data-subarea="declaration"] .inner .bottom ul li .order.bg2 { background:var(--color-point2); } [data-subarea="declaration"] .inner .bottom ul li .txt { color: #1e2020; font-weight: 500; line-height: 1.4;} @media all and (max-width:1024px){ [data-subarea="declaration"] .inner .top .title { font-size:1.625em; } [data-subarea="declaration"] .inner .bottom{padding:50px 30px;} [data-subarea="declaration"] .inner .bottom ul li{padding-left:0;display: block;min-height:auto;height:auto;} [data-subarea="declaration"] .inner .bottom ul li .order{position: relative;top:0;margin-top:0;margin-bottom:10px;} [data-subarea="declaration"] .inner .bottom ul li .txt{display: block;} } @media all and (max-width:768px){ [data-subarea="declaration"] .inner { padding:0; } } /* 조직도 */ .org_wrap{text-align:center;margin:30px 0} .org_wrap p{ display:inline-block; background:var(--color-point); color:var(--color-white); border-radius:50px; padding:10px 30px; margin-bottom:40px; position:relative; font-size:1.25em;} .org_wrap p:before{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:1px; height:15px; background:#d8d9db;} .org_wrap .list{ display:flex; flex-flow:wrap; gap:10px; justify-content: space-around; position:relative;} .org_wrap.org6 .list:before{ content:''; position:absolute; top:-25px; left:50%; transform:translateX(-50%); width:84%; height:1px; background:#d8d9db;} .org_wrap .list>li{ display:flex; flex-direction:column; justify-content:flex-start; align-items:center; background:#f8f8f8; border:1px solid #d8d9db; border-radius:50px; padding:10px; position:relative;} .org_wrap .list>li:before{ content:''; position:absolute; top:-25px; left:50%; transform:translateX(-50%); width:1px; height:25px; background:#d8d9db;} .org6 .list>li{ width:calc(100% / 6 - 10px);} @media all and (max-width:768px){ .org_wrap p { margin-bottom:20px; } .org_wrap .list{ display:block; width:100%; text-align:center;} .org_wrap .list>li{display:inline-block; width:90%; margin:0 auto 10px; text-align:center;} .org_wrap p:before, .org_wrap.org6 .list:before, .org_wrap .list>li:before{ background:none;} } /* 부서소개 */ [data-subarea="department"] .list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr);} [data-subarea="department"] .list > li { position: relative; display: block; padding: 10px 10px 10px 22px; box-sizing: border-box; border: 1px solid var(--color-line); border-radius: 5px; background: var(--color-white); color: inherit; text-align: left; height: auto; } [data-subarea="department"] .list > li:before { content: ''; display: block; position: absolute; left: 10px; top: 18px; width: 5px; height: 5px; background: var(--color-point); border-radius: 100%;} [data-subarea="department"] .list > li ul { display: block; margin: 10px 0 0 0; padding: 0; list-style: disc;} [data-subarea="department"] .list > li ul li { border: none; background: none; padding: 2px 0; height: auto; display: list-item;} [data-subarea="department"] .list > li.full { grid-column: 1 / -1;} /* 부서 검색 전체 영역 */ [data-subarea="department"] .department_search{position:relative;margin-bottom:50px;overflow:hidden;background:#f7f8fb;border:1px solid #e0e0e0;border-radius:10px;padding:20px} [data-subarea="department"] .department_search form, [data-subarea="department"] .department_search form fieldset { display: flex; flex-wrap: nowrap; width: 100%; gap: 10px; align-items: center; justify-content: center;} [data-subarea="department"] .department_search legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;} [data-subarea="department"] .department_search .form_group { flex: 1; min-width: auto;} [data-subarea="department"] .department_search label { display: none;} [data-subarea="department"] .department_search select { width: 100%; min-height: 2.8em; padding: 0 2em 0 10px; border: 1px solid #e0e0e0; border-radius: 10px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; transition: all 0.3s;} [data-subarea="department"] .department_search select::-ms-expand { display: none;} [data-subarea="department"] .department_search button { display: flex; align-items: center; justify-content: center; min-height: 2.8em; padding: 0 20px; border-radius: 1em; background: var(--color-point, #007acc); color: var(--color-white); font-weight: 600; cursor: pointer; white-space: nowrap; gap: 8px;} [data-subarea="department"] .department_search button .icon { display: inline-block; width: 20px; height: 20px; background: url("/resource/www/images/common/icon_search.svg") no-repeat center / contain; } [data-subarea="department"] .department_search button:hover, [data-subarea="department"] .department_search button:focus { background: var(--color-green, #005fa3);} @media all and (max-width:640px){ [data-subarea="department"] .list { grid-template-columns: 1fr;} [data-subarea="department"] .department_search form fieldset { flex-direction: column; align-items: stretch; gap: 0.5em;} [data-subarea="department"] .department_search .form_group, [data-subarea="department"] .department_search button { width: 100%; } } /* 산,내면 유래 */ .mountain_list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;} .mountain_list li { line-height: 1.6; border: 1px solid #e5e5e5; border-radius: 12px; padding: 1.25rem; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: box-shadow 0.2s ease; word-break: break-word;} .mountain_list li:hover, .mountain_list li:focus{ box-shadow: 0 6px 14px rgba(0,0,0,0.1);} .mountain_list li span { font-size:1.25em; font-weight: bold; color: var(--color-point); display: block; margin-bottom: 0.3em;} .mountain_list li.full { grid-column: 1 / -1;} @media all and (max-width: 1024px) { .mountain_list { grid-template-columns: 1fr;} } /* 마을유래 */ .updown_list { display:flex; flex-flow:column; gap:10px; } .updown_list>li { position:relative; } .updown_list>li>button { position:relative; display:flex; width:100%; min-height:3.53em; border-radius:.25em; border:1px solid var(--color-line); padding:.5em 4.5em .5em 1em; font-size:1.067em; font-weight:600; align-items:center; box-sizing:border-box; transition:var(--trans-ani);text-align:left} .updown_list>li>button::before { position:absolute; width:3.53em; height:100%; content:''; right:0; top:0; z-index:-20; transition:var(--trans-ani); border-left:1px solid var(--color-line) } .updown_list>li>button::after { position:absolute; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:#808080; right:25px; top:50%; transform:translateY(-75%) rotate(135deg); content:''; transition:var(--trans-ani);} .updown_list>li>div { display:none; padding:1.5em; border-radius:0 0 1em 1em; border:1px solid var(--color-line); border-top:0; transition:var(--trans-ani); } .updown_list>li.active>div { display:block; } .updown_list>li.active>button { border-color:var(--color-point); } .updown_list>li>div .title_h4 { margin-top:0; } .updown_list>li.active>button::before { background-color:var(--color-point); border-left-color:var(--color-point); } .updown_list>li.active>button::after { transform:translateY(-50%) rotate(315deg); border-color:var(--color-white);} @media screen and (max-width:1024px){ .updown_list>li>button { font-size:1.167em; } } /* 뷰어다운로드 */ .viewer_list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;} .viewer_list li { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 12px; padding: 20px; background: #fff;} .viewer_icon { flex: 0 0 auto; margin-right: 15px; display: flex; align-items: center; justify-content: center;} .viewer_icon img { width: 105px; height: auto; display: block;} .viewer_desc { flex: 1;} .viewer_desc .title { font-size:1.25em; font-weight: bold; color: var(--color-point); } .viewer_desc .text { line-height: 1.5;} .viewer_list li:hover, .viewer_list li:focus { box-shadow: 0 6px 14px rgba(0,0,0,0.1);} @media (max-width: 1024px) { .viewer_list { grid-template-columns: 1fr; } } @media (max-width:468px) { .viewer_list li { flex-wrap:wrap; } .viewer_icon { width:100%; margin-right:0; flex:100%; } .viewer_desc { margin-top:1em; } } /* 본인인증서비스 도움말 */ [data-subarea="cert_guide"] .title{display: block;font-weight: 700;font-size: 1.5em;font-family: var(--font-tenada);} @media (max-width:768px) { [data-subarea="cert_guide"] .title{font-size:1.375em;} } @media (max-width:468px) { [data-subarea="cert_guide"] .title{font-size:1.25em;} } /* 개인정보처리방침 */ [data-subarea="labeling"] h4 { position: relative;margin-top: 1.92em; margin-bottom: .77em; font-size: 1.63em; color: var(--color-base); font-weight: bold; line-height: 1.28; padding-top: .58em; display: flex; align-items: center; justify-content: flex-start; text-align: center;} [data-subarea="labeling"] h4 img { margin-right: 10px; flex-shrink: 0;} [data-subarea="labeling"] .labeling_list { margin: 20px 0;} [data-subarea="labeling"] .labeling_list > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0;} [data-subarea="labeling"] .labeling_list > ul > li { border: solid 1px var(--color-line); border-radius: 5px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; box-sizing: border-box; overflow: hidden;} [data-subarea="labeling"] .labeling_list li strong { display: block; margin-top: 10px;} [data-subarea="labeling"] .labeling_list li span { display: none; padding: 10px; position: absolute; bottom: 0; width: 100%; background: rgba(14, 43, 108, .9); z-index: 1; color: var(--color-white); text-align: center; word-break: keep-all; box-sizing: border-box;} [data-subarea="labeling"] .labeling_list li span a { color: var(--color-white); position: relative; padding-right: 20px;} [data-subarea="labeling"] .labeling_list li:hover, [data-subarea="labeling"] .labeling_list li:focus { cursor: pointer;} [data-subarea="labeling"] .labeling_list li:hover span, [data-subarea="labeling"] .labeling_list li:focus span { display: block;} [data-subarea="labeling"] .lb_list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: solid 1px var(--color-line); border-left: solid 1px var(--color-line); margin-bottom: 30px;} [data-subarea="labeling"] .lb_list li { border-right: solid 1px var(--color-line); border-bottom: solid 1px var(--color-line); box-sizing: border-box;} [data-subarea="labeling"] .lb_list li a { display: flex; align-items: center; padding: 10px; min-height: 71px; box-sizing: border-box;} [data-subarea="labeling"] .lb_list li img { flex: 0 0 auto; } [data-subarea="labeling"] .lb_list li span { display: inline-block; padding-left: 10px; width: calc(100% - 60px);} [data-subarea="labeling"] .revision_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; list-style: none; margin: 20px 0; padding: 0;} [data-subarea="labeling"] .revision_list li a { display: block; position: relative; padding: 12px 40px 12px 16px; border: 1px solid var(--color-line); border-radius: 4px; color: var(--color-base); text-decoration: none; box-sizing: border-box;} [data-subarea="labeling"] .revision_list li a span { display: block;} [data-subarea="labeling"] .revision_list li a span:after { content: ''; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 14px; height: 13px; background: url(/resource/common/images/common/icon_dowload.svg) no-repeat 50% 50%; background-size: 100%;} [data-subarea="labeling"] .revision_list li a:hover, [data-subarea="labeling"] .revision_list li a:focus { color: var(--color-point);} @media (max-width: 1024px) { [data-subarea="labeling"] .revision_list, [data-subarea="labeling"] .labeling_list > ul { grid-template-columns: repeat(3, 1fr);} [data-subarea="labeling"] h4 { font-size:1.53em; } } @media (max-width: 768px) { [data-subarea="labeling"] .revision_list, [data-subarea="labeling"] .labeling_list > ul { grid-template-columns: repeat(2, 1fr);} [data-subarea="labeling"] .lb_list { grid-template-columns: 1fr;} [data-subarea="labeling"] h4 { font-size:1.43em; } } @media (max-width: 400px) { [data-subarea="labeling"] .revision_list, [data-subarea="labeling"] .labeling_list > ul { grid-template-columns: 1fr;} } /* 사이트맵 */ [data-subarea="sitemap"] .sitemap_group:not(:last-child) { margin-bottom: 5em;} [data-subarea="sitemap"] .title{ padding: 20px 30px; background:linear-gradient(120deg, #288fcf, #0562b0); color:var(--color-white); border-radius: 10px; margin-bottom:20px; font-size: 1.25em;} [data-subarea="sitemap"] .sitemap_2dep { position: relative; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; gap: 1em; padding-right: 5px; row-gap: 3em;} [data-subarea="sitemap"] .sitemap_2dep > li { flex: 0 1 calc((100% - 4em) / 5); display: flex; flex-direction: column; box-sizing: border-box; height: auto; padding:0 1rem; } [data-subarea="sitemap"] .sitemap_2dep > li > a { position: relative; display: flex; align-items: center; width: 100%; font-size: 1.067em; font-weight: 600; transition: color var(--trans-ani); color: var(--color-point); margin-bottom: 10px;} [data-subarea="sitemap"] .sitemap_2dep > li:not(:last-of-type) { border-right: 1px solid var(--color-line); padding-right: 1em;} [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(5n) { border-right: none;} [data-subarea="sitemap"] .sitemap_2dep > li > ul{ display: flex; flex-direction: column; gap: 0.5em;} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li{ line-height:1 } [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a{ position:relative; transition:color var(--trans-ani); line-height:1.25 } [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:after { content: ""; position: absolute; left: 0; bottom: 2px; display: block; width: 0; height: 1px; background-color: #000; transition: width 0.3s ease;} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:hover { color: #000;} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:hover::after { width: 100%;} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:hover, [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:focus{ color:var(--color-base); font-weight:700;} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:hover:before, [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > a:focus:before { opacity:1; background-color:var(--color-point);} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > ul{ background:#f2f2f2; border-radius: 10px; margin:0.5em 0; padding:0.7em} [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > ul > li:not(:last-child) { margin-bottom:0.75em } [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > ul > li > a:hover, [data-subarea="sitemap"] .sitemap_2dep > li > ul > li > ul > li > a:focus { color: var(--color-point); } [data-subarea="sitemap"] a[target="_blank"] { position: relative; padding-right: 20px; background: url("/resource/common/images/common/icon_newtab.svg") no-repeat right center; background-size: 13px 11px; } @media (max-width: 1600px) { [data-subarea="sitemap"] .sitemap_2dep > li { flex: 0 1 calc((100% - 3em) / 4); } [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(5n) { border-right: 1px solid var(--color-line); } [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(4n) { border-right: none;} } @media (max-width: 1200px) { [data-subarea="sitemap"] .sitemap_2dep > li { flex: 0 1 calc((100% - 2em) / 3); } [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(4n) { border-right: 1px solid var(--color-line); } [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(3n) { border-right: none;} } @media (max-width: 900px) { [data-subarea="sitemap"] .sitemap_2dep > li { flex: 0 1 calc((100% - 1em) / 2); } [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(3n) { border-right: 1px solid var(--color-line);} [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(2n) { border-right: none;} } @media (max-width: 600px) { [data-subarea="sitemap"] .sitemap_2dep { row-gap:1em } [data-subarea="sitemap"] .sitemap_2dep > li { flex: 0 1 100%; border-right: none; border-bottom: 1px solid var(--color-line); padding-bottom: 1em; } [data-subarea="sitemap"] .sitemap_2dep > li:nth-child(1n) { border-right: none;} } /* 상호결연도시 */ .list_imgTitle.city_wrap { margin-bottom:80px } .list_imgTitle .img.city { background: #f0f7fc; flex: 1 0 var(--imgSize); width: var(--imgSize); min-height: 270px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 1rem; overflow: hidden; border-radius: 10px 30px 10px 10px; box-sizing: border-box;} .list_imgTitle .img.city .img_top { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; width: 100%;} .list_imgTitle .img.city .img_top img { max-width: 90%; max-height: 100%; object-fit: contain; display: block;} .list_imgTitle .img.city .img_top .border { border-radius:10px } .list_imgTitle .img.city .img_bottom { flex: 0 0 auto; width: 100%; display: flex; justify-content: center; padding-top: 8px; padding-bottom: 6px; box-sizing: border-box;} .list_imgTitle .data_area { text-align: right; margin-top: 2em;} .list_imgTitle .date { display: inline-block; padding: .5em 1.2em; background: var(--color-point); color: var(--color-white); border-radius: 8px; font-weight: 400; text-align: center; font-size:0.875em;} .list_imgTitle .date i.calendar { display: inline-block; width: 1em; height: 1em; margin-right: .4em; margin-top: -.1rem; background: url("/resource/www/images/contents/calendar.svg") no-repeat center / contain; vertical-align: middle;} @media (max-width: 868px) { .list_imgTitle .img.city { flex:100%; --imgSize:100%; width:calc(100% - (var(--sizeMargin) * 5)); min-height:auto} } /* 상호도시:연혁 */ .city_history{ position:relative; display:flex; flex-flow:column; gap:3.13em; } .city_history::before{ position:absolute; left:280px; top:0; width:1px; height:100%; content:''; background:#d3d3d3; } .city_history>li{ display:flex; } .city_history>li .year_area{ position:relative; width:280px; color:var(--color-point); font-size:2.19em; line-height:1.2; font-weight:500; word-break:keep-all; font-family:var(--font-tenada); } .city_history>li .year_area::before{ position:absolute; right:-12px; top:-3px; content:''; width:24px; height:24px; border-radius:100%; background:var(--color-point); opacity:.3; } .city_history>li .year_area::after{ position:absolute; right:-4px; top:5px; content:''; width:8px; height:8px; border-radius:100%; background:var(--color-point); } .city_history>li .h_con{ position:relative; flex:auto; width:calc(100% - 280px); padding-left:60px; display:flex; flex-flow:column; gap:20px;} .city_history>li .h_con::before{ position:absolute; left:0; top:8px; width:50px; height:1px; border-bottom:1px dotted var(--color-point); content:''; } .city_history>li .h_con dl { display: flex; align-items: flex-start; margin-bottom: 1em;} .city_history>li .h_con dl > dt.year { flex: none; width: 60px; text-align: right; font-weight: 800; opacity: .94;} .city_history>li .h_con dl > dd { flex: auto; margin: 0; padding-left: 20px; opacity: .84;} .city_history>li .h_con dl > dd ul { margin: 0; padding: 0; list-style: none;} .city_history>li .h_con dl > dd li { display: flex; flex-wrap: wrap; line-height: 1.4; margin-bottom: .4em;} .city_history>li .h_con dl > dd li .month { flex: none; width: 30px; font-weight: 600; opacity: .9;} .city_history>li .h_con dl > dd li .month.day { width:50px } .city_history>li .h_con dl > dd li .desc { flex: auto; padding-left: 10px;} @media all and (max-width:1024px){ .city_history::before { background:none; } .city_history>li { flex-direction:column; margin-bottom: 2em;} .city_history>li .year_area { margin-bottom:30px } .city_history::before { display:none } .city_history>li .year_area::before, .city_history>li .year_area::after { background:none; } .city_history>li .h_con { padding-left:20px; position: relative; width:100%} .city_history > li .h_con dl:last-child { margin-bottom: 0; padding-bottom: 0;} .city_history>li .h_con::before { content: ''; position: absolute; left: 20px; top: 5px; bottom: 30px; width: 1px; height: calc(100% - 17px); border-bottom:none; background: #d3d3d3;} .city_history>li .h_con dl > dt.year { position:relative; } .city_history>li .h_con dl > dt.year::before{ position:absolute; left:-12px; top:-3px; content:''; width:24px; height:24px; border-radius:100%; background:var(--color-point); opacity:.3; } .city_history>li .h_con dl > dt.year::after{ position:absolute; left:-4px; top:5px; content:''; width:8px; height:8px; border-radius:100%; background:var(--color-point); } } @media (max-width: 560px) { .city_history>li .h_con dl > dd ul li { flex-direction: column; align-items: flex-start;} .city_history>li .h_con dl > dd ul li .month { width: auto; text-align: left; margin-bottom: 4px;} .city_history>li .h_con dl > dd li .desc { padding-left:0; } } .city_ifr{position: relative;padding-bottom:56.25%;} .city_ifr iframe{ position: absolute; top: 0; left: 0 ;right: 0;bottom: 0;width:100%;height: 100%;} /* 세계유산도시 이미지 */ .unesco_wrap { position: relative; max-width: 100vw; margin-bottom:30px} .unesco_wrap::before{ position:absolute; left:10px; top:10px; width:1px; height:100%; content:''; background:var(--color-point); } .unesco_wrap .list_title { color:var(--color-point); font-size:1.875em; line-height:1.2; font-weight:500; word-break:keep-all; font-family:var(--font-tenada); position: relative; padding-left:30px;} .unesco_wrap .list_title::before{ position:absolute; left:-1px; top:2px; content:''; width:24px; height:24px; border-radius:100%; background:var(--color-point); opacity:.1; } .unesco_wrap .list_title::after{ position:absolute; left:7px; top:10px; content:''; width:8px; height:8px; border-radius:100%; background:var(--color-point); } .unesco_list { display:flex; gap:10px; flex-direction: column; margin-bottom:20px} .unesco_list:last-child { margin-bottom: 0} .unesco_wrap.backnone:before { background:none; } .unesco_wrap .card_title { color:var(--color-point); font-size:1.563em; line-height:1.2; font-weight:500; word-break:keep-all; font-family:var(--font-tenada); position: relative; margin-bottom:10px;} .unesco_wrap .grid_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-left:30px;} .unesco_wrap .card { background: #f0f7fc; border-radius: 10px; padding: 12px; text-align: center;} .unesco_wrap .img_wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; background: #e9f2f8;} .unesco_wrap .img_wrap img { width: 100%; height: 100%; object-fit: cover; display: block;} .unesco_wrap .card_text { margin-top: 10px; font-weight: 600;} .unesco_layout { display: flex; gap: 40px; align-items: flex-start; margin-top: 30px; flex-wrap: nowrap;} .unesco_left { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px;} .unesco_right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: relative;} .unesco_left .grid_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-left: 30px;} .unesco_right .grid_list { display: grid; grid-template-columns: 1fr;} .unesco_wrap .img_wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #e9f2f8;} .unesco_wrap .img_wrap img { width: 100%; height: 100%; object-fit: cover; display: block;} .unesco_wrap::before { position: absolute; left: 10px; top: 10px; width: 1px; height: 100%; content: ''; background: var(--color-point);} .unesco_right.line::before { content: ''; position: absolute; left: 10px; top: 10px; width: 1px; height: 100%; background: var(--color-point);} @media (max-width: 1280px) { .unesco_layout { flex-direction: column; gap: 30px; } .unesco_left, .unesco_right { flex: none; width: 100%;} .unesco_left .grid_list, .unesco_right .grid_list { grid-template-columns: repeat(4, 1fr);} } @media (max-width: 1024px) { .unesco_wrap .grid_list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .unesco_wrap .grid_list { grid-template-columns: 1fr; } .unesco_wrap .list_title { font-size: 1.5em; padding-left: 25px;} .unesco_wrap .list_title::before { width: 18px; height: 18px; top: 3px; left:1px} .unesco_wrap .list_title::after { width: 6px; height: 6px; top: 9px; left: 7px;} .unesco_wrap .grid_list { margin-left: 20px; } .unesco_layout { flex-direction: column; gap: 20px;} .unesco_left, .unesco_right { max-width: 100%; width: 100%;} .unesco_layout .img_wrap { width: 100%; ; } .unesco_wrap .list_title { font-size: 1.5em; padding-left: 25px;} .unesco_wrap .list_title::before { width: 18px; height: 18px; top: 3px; left: 1px;} .unesco_wrap .list_title::after { width: 6px; height: 6px; top: 9px; left: 7px;} .unesco_wrap .grid_list { margin-left: 20px;} } /* 하나로본 익산통계 */ .box_info_top .ico_stats { background:#fff8da url(/resource/common/images/common/icon_iksan_stats.svg) no-repeat 50% 50%; } .iksan_stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;} .iksan_stats .stat_box { display: flex; align-items: center; padding: 27px; border: 1px solid #ddd; border-radius: 20px;} .iksan_stats .icon_wrap { flex: 0 0 150px; height: 150px; border-radius: 50%; background: #f0f7fc; display: flex; align-items: center; justify-content: center; margin-right: 20px;} .iksan_stats .icon { display: block; width: 80px; height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain;} /* 개별 아이콘 이미지 지정 */ .iksan_stats .icon01 { background-image: url("/resource/www/images/contents/stats_01.svg"); } .iksan_stats .icon02 { background-image: url("/resource/www/images/contents/stats_02.svg"); } .iksan_stats .icon03 { background-image: url("/resource/www/images/contents/stats_03.svg"); } .iksan_stats .icon04 { background-image: url("/resource/www/images/contents/stats_04.svg"); } .iksan_stats .icon05 { background-image: url("/resource/www/images/contents/stats_05.svg"); } .iksan_stats .icon06 { background-image: url("/resource/www/images/contents/stats_06.svg"); } .iksan_stats .icon07 { background-image: url("/resource/www/images/contents/stats_07.svg"); } .iksan_stats .icon08 { background-image: url("/resource/www/images/contents/stats_08.svg"); } .iksan_stats .icon09 { background-image: url("/resource/www/images/contents/stats_09.svg"); } .iksan_stats .icon010 { background-image: url("/resource/www/images/contents/stats_010.svg"); } .iksan_stats .icon011 { background-image: url("/resource/www/images/contents/stats_011.svg"); } .iksan_stats .icon012 { background-image: url("/resource/www/images/contents/stats_012.svg"); } .iksan_stats .icon013 { background-image: url("/resource/www/images/contents/stats_013.svg"); } .iksan_stats .icon014 { background-image: url("/resource/www/images/contents/stats_014.svg"); } .iksan_stats .icon015 { background-image: url("/resource/www/images/contents/stats_015.svg"); } .iksan_stats .icon016 { background-image: url("/resource/www/images/contents/stats_016.svg"); } .iksan_stats .icon017 { background-image: url("/resource/www/images/contents/stats_017.svg"); } .iksan_stats .icon018 { background-image: url("/resource/www/images/contents/stats_018.svg"); } .iksan_stats .icon019 { background-image: url("/resource/www/images/contents/stats_019.svg"); } .iksan_stats .text_wrap { flex: 1;} .iksan_stats .text_wrap ul { list-style: none; margin: 0; padding: 0;} .iksan_stats .text_wrap li { margin: 5px 0; font-size:1.25em; font-weight: 600; line-height: 1.5;} @media (max-width: 1460px) { .iksan_stats .text_wrap li { font-size:1.125em; } } @media (max-width: 768px) { .iksan_stats { grid-template-columns: 1fr;} .iksan_stats .stat_box { flex-direction: column; text-align: center;} .iksan_stats .icon_wrap { flex: 0 0 100px; margin: 0 0 15px 0; height:100px; width:100px} .iksan_stats .icon { width:50px; height:50px; } .iksan_stats .text_wrap li { font-size:inherit; font-weight:normal} } /* 공공디자인 */ .design_wrap { position:relative; } .design_wrap .future, .design_wrap .direction { position: relative; text-align: center; padding: 20px 0; margin-bottom: 40px; } .design_wrap .future::after { content: ""; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 300px; height: 30px; background: linear-gradient(to top, #efefef, #bcbcbc); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); opacity: .3;} .design_wrap .future.none::after { background:none } .design_wrap .title { display: inline-block; padding: 10px 50px 5px 50px; background: var(--color-point); border-radius: 50px; color: var(--color-white); font-size:1.25em; line-height:1.2; font-family:var(--font-tenada);} .design_wrap .text { padding:30px 20px 20px 20px; border-radius:20px; border:1px solid #ddd; line-height:1.6; font-weight:600; margin-top:-20px; font-size:1.25em;} .design_wrap .text strong { display:block; font-weight:700; font-size:1.375em; font-family:var(--font-tenada);} .design_wrap .goals { display: grid; gap: 20px;} .design_wrap .goals.col03 { grid-template-columns: repeat(3, 1fr);} .design_wrap .goals.col04 { grid-template-columns: repeat(4, 1fr);} .design_wrap .goal { background: #f2f9f8; border-radius: 20px; display: flex; align-items: center; gap: 10px; flex-direction:column; padding: 20px;} .design_wrap .goal_title { font-weight: 500; font-size:1.375em; line-height:1.2; font-family:var(--font-tenada); color: #006d77;} .design_wrap .goal_text { line-height: 1.4; text-align:center; font-size:1.125em;} .design_wrap .goal_text strong { display:block; font-weight:700 } .design_wrap .icon_wrap { width: 100px; height: 100px; border-radius: 50%; background: var(--color-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .design_wrap .icon { display: block; width: 70px; height: 70px; background-repeat: no-repeat; background-position: center; background-size: contain;} .design_wrap .icon01 { background-image: url("/resource/www/images/contents/design_01.svg"); } .design_wrap .icon02 { background-image: url("/resource/www/images/contents/design_02.svg"); } .design_wrap .icon03 { background-image: url("/resource/www/images/contents/design_03.svg"); } .design_wrap .icon04 { background-image: url("/resource/www/images/contents/design_04.svg"); } .design_wrap .icon05 { background-image: url("/resource/www/images/contents/design_05.svg"); } .design_wrap .icon07 { background-image: url("/resource/www/images/contents/design_07.svg"); } @media (max-width: 1024px) { .design_wrap .goals.col03, .design_wrap .goals.col04 { grid-template-columns: repeat(2, 1fr);} } @media (max-width: 600px) { .design_wrap .goals.col03, .design_wrap .goals.col04 { grid-template-columns: 1fr;} .design_wrap .title { font-size: inherit; padding: 8px 30px 4px 30px; } .design_wrap .text { font-size: 1.125em; padding: 20px 15px 15px 15px;} .design_wrap .goal_title { font-size: 1.25em;} .design_wrap .goal_text { font-size: inherit;} .design_wrap .icon_wrap { width: 80px; height: 80px;} .design_wrap .icon { width: 56px; height: 56px;} } /* 수돗물생산과정 */ .process_wrap { display: flex; flex-direction: column; align-items: center; gap: 50px; position: relative;} .process_item { position: relative; width: 100%; display: flex; align-items: center; gap: 20px; background: var(--color-white); border: 1px solid #ddd; border-radius: 15px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);} .process_item .img { flex: 0 0 200px;} .process_item .img img { width: 100%; border-radius: 10px; object-fit: cover;} .process_item .txt { flex: 1; font-size:1.15em;} .process_item .txt strong { font-weight: 600; color: var(--color-point); margin-bottom: 5px; display:block;} .process_item::before { content: ""; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); width: 300px; height: 30px; background: linear-gradient(to bottom, #fff, #bcbcbc); clip-path: polygon(50% 100%, 0% 0%, 100% 0%); opacity: .3;} .process_item:last-child::before { display: none;} @media (max-width: 768px) { .process_item { flex-direction: column; text-align: center;} .process_item .img { width: 100%; max-width: 400px; flex:1;} .process_item::before {width: 200px; height: 20px;} } /********************************************************************** 분야별정보 **********************************************************************/ /*교통 - 노선 시간표 */ .city_bus > .rdiv2 {align-items: stretch;} .city_bus > .rdiv2 .rdiv_con {flex:1 1 50%;padding:24px;} .city_bus > .rdiv2 .rdiv2 {justify-content: space-between;gap: 1.375em;--sizeImg:100px;} .city_bus > .rdiv2 .rdiv2 .img {width:var(--sizeImg);border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;} .city_bus > .rdiv2 .rdiv2 dl {width: calc(100% - var(--sizeImg) - 1.375em);margin-top: .25em;} .city_bus > .rdiv2 .rdiv2 dt {font-weight:bold;margin-bottom: .25em;font-size: 1.125em;color: var(--color-base);} .city_bus > .rdiv2 .rdiv2 dd strong {font-weight:600;} @media all and (max-width:1268px){ .city_bus > .rdiv2 .rdiv_con {padding:20px;} .city_bus > .rdiv2 .rdiv2 {--sizeImg:90px;} } @media all and (max-width:968px){ .city_bus > .rdiv2 .rdiv2 {flex-flow: column;gap: 1em;} .city_bus > .rdiv2 .rdiv_con {padding:15px;} .city_bus > .rdiv2 .rdiv2 dl {width:100%;margin-top:0;} } @media all and (max-width:768px){ .city_bus > .rdiv2 .rdiv2 {display:flex;flex-flow: row;gap: 1.25em;--sizeImg: 80px;align-items: center;} .city_bus > .rdiv2 .rdiv_con + .rdiv_con {margin-top: .25em !important;} .city_bus > .rdiv2 .rdiv2 dl {width: calc(100% - var(--sizeImg) - 1.25em);} } @media all and (max-width:468px){ .city_bus > .rdiv2 .rdiv2 {--sizeImg:70px;} } @media all and (max-width:368px){ .city_bus > .rdiv2 .rdiv2 {flex-flow:column;align-items:flex-start;gap: 1em;} .city_bus > .rdiv2 .rdiv2 dl {width:100%;} } /* 복지 - 청소년복지 */ .teenager {position:relative;--sizeHig:215px;} .teenager::before {content:'';display:block;width:100%;height:var(--sizeHig);background:url(/resource/www/images/contents/img_teenager.png) no-repeat center top / auto var(--sizeHig);} .teenager .text_box {background:#fff;border:1px solid #e5e5e5;border-radius:20px;padding:2em;display:flex;flex-wrap:wrap;gap:16px;} .teenager .text_box > dl {width: calc((100% - 48px) / 4);border-radius:10px;overflow:hidden;} .teenager .text_box > dl:nth-child(1) {background:#f0f5fa;} .teenager .text_box > dl:nth-child(2) {background:#f0f9fa;} .teenager .text_box > dl:nth-child(3) {background:#f0faf6;} .teenager .text_box > dl:nth-child(4) {background:#f5faf0;} .teenager .text_box > dl dt {border-bottom-left-radius:10px;border-bottom-right-radius:10px;color:#fff;font-size:1.167em;text-align:center;font-weight:bold;padding:.75em;} .teenager .text_box > dl:nth-child(1) dt {background:var(--color-point);} .teenager .text_box > dl:nth-child(2) dt {background:#0092ac;} .teenager .text_box > dl:nth-child(3) dt {background:#00ac69;} .teenager .text_box > dl:nth-child(4) dt {background:#59ac00;} .teenager .text_box > dl dd {padding: 1.25em;} .teenager .text_box > dl dd ul {font-size:1.063em;text-align:center;} .teenager .text_box > dl dd ul li {color:#444;} .teenager .text_box > dl dd ul li+li {margin-top:.25em;} /*다크모드*/ html[data-mode="true"] .teenager .text_box {background: var(--color-dark);border-color: var(--color-dark-light-gray1);} html[data-mode="true"] .teenager .text_box > dl {background:var(--color-dark-light-gray);} html[data-mode="true"] .teenager .text_box > dl dd ul li{color:var(--color-base);} @media all and (max-width:1568px){ .teenager .text_box {padding:1.5em;gap:12px;} .teenager .text_box > dl {width: calc((100% - 36px) / 4);} .teenager .text_box > dl dd {padding:1.125em;} } @media all and (max-width:1468px){ .teenager .text_box > dl {width: calc((100% - 12px) / 2);} } @media all and (max-width:868px){ .teenager {--sizeHig: 180px;} } @media all and (max-width:668px){ .teenager::before {height:0;width:90%;margin: 0 auto;padding-top: 34%;background-size:100%;} .teenager .text_box {padding:1.25em;gap:10px;} .teenager .text_box > dl {width:100%;} } /* 복지 - 의료급여제도 */ [data-subarea="medical_benefit"] .area_diagram_type02 .list {margin-right: calc(var(--sizePadding) * -1);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li {width: calc((100% - 26%) / 3);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow {width:13%;display: flex;flex-wrap: wrap;justify-content: center;align-items: center; gap: 1em;margin: auto 0;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li:after, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li:before {display:none;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span{position: relative;width:100%;line-height: 1.3; padding-bottom: 20px;text-align:center;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return{padding-bottom:0;padding-top:20px;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span small{font-size:.9em;color:var(--color-base2);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span:after, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span:before{ content:''; display:block; position:absolute; bottom:0; right:50%;width:8px; height:8px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-point); transform:translate(50%,0) rotate(45deg);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:after, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:before{top:0;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.request:before{ right:calc(50% + 4px); } [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:before{ right:calc(50% - 4px); } [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:after, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:before{border-width: 0 0 1px 1px;} @media (max-width: 1468px) { [data-subarea="medical_benefit"] .area_diagram_type02 .list {--sizePadding: 20px;} } @media (max-width: 1024px) { [data-subarea="medical_benefit"] .area_diagram_type02 .list {--sizePadding: 15px;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li {width: calc((100% - 28%) / 3);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow {width:14%;} } @media (max-width: 768px) { [data-subarea="medical_benefit"] .area_diagram_type02 .list {margin-right: 0;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow {width:100%;padding-right:0;padding-bottom:var(--sizePadding);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span{width:calc((100% - 1em) / 2);} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span:after, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span:before{border-width: 0 1px 1px 0;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.request:before{right:50%;bottom:4px;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:after, [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:before{border-width: 1px 0 0 1px;} [data-subarea="medical_benefit"] .area_diagram_type02 .list > li.arrow span.return:before{right: 50%; top:4px;} } [data-subarea="medical_aid_extension"] .area_diagram > .list{position: relative;padding-top: 21.6em;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add {position: absolute;width: 50%;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(2){top:0;left:0;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(2) > .list >li, [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(5){flex: 0 1 calc(100% - var(--sizePadding));padding-right: 0;margin-bottom: calc(var(--sizePadding) + 3px);margin-right: 0;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(5){left:50%;top: calc(140px + var(--sizePadding));width: calc(50% - var(--sizePadding));} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add span{background: #f6fbff;width: 55%;margin:0 auto;height: auto;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add i {color: var(--color-base1);} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add span em{margin-bottom: .375em;font-weight: 700;display:inline-block;color:var(--color-point);} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:has(.list):before, [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:has(.list):after{display:none;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:before, [data-subarea="medical_aid_extension"] .area_diagram .list > li.add > .list > li:before{right: 50%;transform: translate(50%, 0);top: 100%;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:after, [data-subarea="medical_aid_extension"] .area_diagram .list > li.add > .list > li:after{top: 100%;right: 50%;transform: translate(50%, 7px) rotate(90deg);} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add > .list > li:last-child:before, [data-subarea="medical_aid_extension"] .area_diagram .list > li.add > .list > li:last-child:after { display:flex; } /*다크모드*/ html[data-mode="true"] [data-subarea="medical_aid_extension"] .area_diagram .list > li.add span{background: var(--color-dark-skyblue);} html[data-mode="true"] [data-subarea="medical_aid_extension"] .area_diagram .list > li.add span em{color:var(--color-white);} @media all and (max-width:1568px) { [data-subarea="medical_aid_extension"] .area_diagram > .list{padding-top: 21em;} } @media all and (max-width:1024px) { [data-subarea="medical_aid_extension"] .area_diagram > .list{padding-top: 24em;} } @media all and (max-width:968px) { [data-subarea="medical_aid_extension"] .area_diagram > .list{padding-top: 0;} [data-subarea="medical_aid_extension"] .area_diagram .list.col04 li{flex:0 1 50%;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add {position: relative;top: initial !important;left: initial !important;margin-bottom: 0;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add, [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(2) > .list >li{flex: 0 1 100%;} [data-subarea="medical_aid_extension"] .area_diagram .list > li:nth-child(1){order:2;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(2){order:1;} [data-subarea="medical_aid_extension"] .area_diagram .list > li:nth-child(3){order:3;} [data-subarea="medical_aid_extension"] .area_diagram .list > li:nth-child(4){order:4;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:nth-child(5){order:6;margin-top: var(--sizePadding);margin-bottom: 0;} [data-subarea="medical_aid_extension"] .area_diagram .list > li:nth-child(6){order:5;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add span{width:100%;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:before{right: 50%;transform: translate(50%, 0);top: -3px !important;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add:after{top: -3px;right: 50%;transform: translate(50%, -7px) rotate(-90deg) !important;} [data-subarea="medical_aid_extension"] .area_diagram .list > li.add > .list{margin-right:0;} } @media all and (max-width:468px) { [data-subarea="medical_aid_extension"] .area_diagram .list > li{padding-right:var(--sizePadding);padding-bottom:0;margin-bottom:0;} [data-subarea="medical_aid_extension"] .area_diagram .list > li:nth-child(1), [data-subarea="medical_aid_extension"] .area_diagram .list > li:nth-child(3){margin-bottom:var(--sizePadding);} [data-subarea="medical_aid_extension"] .area_diagram .list > li:before, [data-subarea="medical_aid_extension"] .area_diagram .list > li:after{left: initial;right: 0;top: 50%;bottom: initial;transform: translateY(-50%);} [data-subarea="medical_aid_extension"] .area_diagram .list > li:before{right:17px;} } /* 산업/경제 - 익산다이로움 사용안내 */ .shorts_video {width: 100%;max-width: 400px;aspect-ratio: 9 / 16;height: auto;display: block;object-fit: cover;margin: 0 auto;}