@charset "utf-8"; :root { --gra: linear-gradient(136deg, #00AE96 -2.22%, #0173BA 104.82%); --point01: #017498; --point02: #066E75; --point03: #00a69c; --gray02: #888888; --fz : clamp(12px, 1.5vw, 15px); } *:focus-visible {outline:3px solid #ff4221; box-shadow: inset 2px 2px #000, inset -2px -2px #000;} /* .hideWeb{display: none;} */ .viewWeb{display: none;} select, textarea, input {font-family:'SCDream' !important;} body {letter-spacing: 0;} header #lnb {border-bottom: 0 !important;} h3{font-size: calc(2.1 * var(--fz)); color:#222; font-weight:600} .top-con {background: linear-gradient(180deg, #F9F9F9 0%, rgba(255, 255, 255, 0.00) 100%), #FFF;} .top-con .top-box {display: flex; gap: min(5vw, calc(3.75 * var(--fz))); position: relative; padding-top: min(52px, 10%); z-index: 1;} .top-con .top-box .boxL{flex-basis: 56.25%; max-width: 900px;} /*검색*/ .msearch{ margin-bottom: .7em; padding:3px; border-radius:1em; background: #E9E9E9; } .msearch form{display: flex; position: relative;} .msearch input[type=text]{flex-grow:1; min-width:0; padding:min(2vw, var(--fz)) min(10%, 25px); line-height: 30px; background-color: transparent; border: none; font-size: calc(1.15 * var(--fz))} .msearch input[type=submit]{flex-shrink:0; padding-left: 2rem; width: max(16.7%, 7rem); font-size: calc(1.17 * var(--fz)); border:0px; background: url(/main/img/main/m2026/ic_search.png) no-repeat calc(50% - 1.53rem) center / 1.53rem ; cursor: pointer;} .msearch form:before{display: block; content: ''; position: absolute; right: max(16.7%, 7rem); top: min(2vw, var(--fz)); bottom: min(2vw, var(--fz)); width: 1px; background: rgba(0,0,0,.2);} /*비주얼*/ #visual {position: relative; aspect-ratio:9/4; border-radius:1.1em; overflow:hidden} #visual div.list {width: 100%; height:100%} #visual div.list ul {display: flex; flex-direction: row; white-space: nowrap; position: relative; height: 100%;} #visual div.list ul li {width: 100%; flex-shrink: 0; font-size: 0px; height:100%} #visual div.list ul li>a{display: block; background: #f0f0f0; height:100%} #visual div.list ul li img {width: 100%; height: 100%; object-fit:cover; object-position: center} #visual div.list ul li>a:focus img{padding:3px; width:calc(100%-30px); border:3px solid red;} #visual .control {display: flex; align-items: center; position: absolute; left: 0px; bottom: 0px; padding: 10px 20px; background: rgba(0,0,0,.56); border-radius: 8px 30px 30px 8px} #visual .control>p {color: #fff; margin-right: 10px;} #visual .control>ul {display: flex; gap: 4px;} #visual .control li {position: relative;font-size: 0px;} #visual .control li a {display: block; width: 16px; height: 16px} #visual .control li.play {display: none;} #visual .control li a:After {display: block; content: ''; position: absolute; width: 8px; height: 8px;} #visual .control li.prev a:After, #visual .control li.next a:After {left: 42%; top: 20%; border: 0px solid #fff; border-width: 2px 0px 0px 2px; transform: rotate(-45deg);} #visual .control li.next a:After {border-width: 0px 2px 2px 0px; margin-left: -10%;} #visual .control li.stop a:After, #visual .control li.play a:After {left: 70%; top: 70%; margin: -3px; margin-top: -.6rem; width: 2px; height: 14px; background: #fff; box-shadow: 5px 0px 0px #fff;} /*의장*/ .chairman {flex-grow: 1; position: relative; padding-top: min(10%, 30px); } .chairman::before {content: ''; position: absolute; top: -5px; right: -50px; width: 360px; height: 360px; background: url(/main/img/main/m2026/bg_symbol.png) no-repeat center top / 100%; z-index: -1;} .chairman::after {content: ''; position: absolute; bottom: -11.5%; right: min(6%, 2vw); max-width: 390px; width:60vw; height: 104%; background: url(/main/img/main/m2026/chairman.png) no-repeat center bottom/ contain} .chairman.n9th::after {background-image: url(/main/img/main/m2026/chairman_9th.png)} .chairman .slogan{margin-left: 3%; width: 85%;} .chairman .txt {margin-left: max(11%, 20px); margin-top: 20px; font-weight: 500; font-size: calc(1.4* var(--fz)); color: #666; letter-spacing: -1px;} .chairman .txt p {font-size: calc(2.13 * var(--fz)); color: #333;} .chairman .txt p span {font-size: calc(2.66 * var(--fz)); font-weight: 600;} .chairman .txt p span.color-point {color: #21507B; font-weight: bold;} .chairman ul.chairman-sbtn {display: flex; flex-direction: column; gap:calc(.8 * var(--fz)); margin-top: calc(2* var(--fz)); padding:min(7vw, 54px) min(10vw, 90px); max-width: 600px; background: url(/main/img/main/m2026/chairman_bg.png) no-repeat center center/ cover; border-radius:500px} .chairman ul.chairman-sbtn>li a{padding-left: 1.2em; background: url(/main/img/main/m2026/chairman_bl.png) no-repeat left center / .95em; font-size:calc(1.17 * var(--fz))} .chairman .goHome{position: absolute; left: 1em; bottom: 1.2em; } .chairman .goHome a{display: block; width:calc(5.3334 * var(--fz)); height: calc(5.3334 * var(--fz)); background: #6fd1f0 url(/main/img/main/m2026/chairman_icHome.png) no-repeat center / 32.5%; text-indent: -5000px; overflow: hidden; border-radius:100%} @media screen and (max-width:1600px){ .chairman::before{transform: scale(.8); transform-origin: right top;} .chairman::after {right: auto; left:40%} .chairman .goHome{left: 0px; bottom: 0px;} } /* 의사일정 */ .bottom-box {position: relative;} .bottom-box .wrapper-new {padding: 50px 0} .bottom-box .schedule {display: flex; gap: 3%; align-items: center;} .bottom-box .schedule h3 {display: flex; align-items: center; gap:10px; font-size: calc(1.73 * var(--fz))} .bottom-box .schedule h3::after {content: ''; display: inline-block; width: 24px; height: 24px; background: url(/main/img/main/m2023/schedule-ic.svg) no-repeat center/78px; background-position: 0 0;} .bottom-box .schedule .schedule-box {display: flex; flex-basis: 40%; position: relative; border-radius: calc(1.2 * var(--fz)); overflow:hidden; box-shadow: 4px 8px 25px 0px rgba(0, 0, 0, 0.05);} .bottom-box .schedule .schedule-box>p {position: absolute; text-align: center; width: calc(7.5 * var(--fz)); height:100%; padding-top: calc(1.6875 * var(--fz)) ;line-height: 25px; color: #fff; font-size: calc(1.73 * var(--fz)); font-weight: 600; background: var(--gra); border-radius: calc(1.2 * var(--fz)); z-index: 1;} .bottom-box .schedule .schedule-box .con {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: calc(1.6875 * var(--fz)) calc(1.875 * var(--fz)) calc(1.6875 * var(--fz)) calc(9.375 * var(--fz)); ; border: 1px solid #C9E0EE; border-radius: 0px 20px 20px 0px; overflow: hidden;} .bottom-box .schedule .schedule-box .con ul.list {width: 80%; height: 25px; overflow: hidden;} .bottom-box .schedule .schedule-box .con ul.list>li {position: relative; padding-left: 30px; font-size: calc(1.2 * var(--fz)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; height: 25px; line-height:25px} .bottom-box .schedule .schedule-box .con ul.list>li::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: url(/main/img/main/m2023/schedule-ic.svg) no-repeat center/78px;background-position: -44px 0;} .bottom-box .schedule .schedule-box .control {display: flex; gap: 5px;} .bottom-box .schedule .schedule-box .control>p>a {display: block; position: relative; font-size: 0px; width: 24px; height: 24px; border: 1px solid #d2d2d2; border-radius: calc(.5 * var(--fz));} .bottom-box .schedule .schedule-box .control>p>a::before {content: ''; display: block; position: absolute; left: calc(50% - 5px); top: calc(50% - 4px); width: 10px; height: 8px; background: url(/main/img/main/m2023/schedule-ic.svg) no-repeat;} .bottom-box .schedule .schedule-box .control>p.stop>a::before {height: 10px; background-position: -24px 0;} .bottom-box .schedule .schedule-box .control>p.more>a::before {background-position: -34px 0;} .bottom-box .schedule-btn {flex-basis: 40%; display: flex; gap:15px} .bottom-box .schedule-btn>a {position: relative; width: 100%; height:calc(5 * var(--fz)); font-size: calc(1.2 * var(--fz)); border: 1px solid #C9E0EE; border-radius: calc(1.2 * var(--fz)); background: linear-gradient(275deg, #E9F3FA 22.5%, #FFFEF9 108.17%); line-height: calc(5 * var(--fz)); overflow: hidden;} .bottom-box .schedule-btn>a::before {content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 121px; height: 91px; background: url(/main/img/main/m2023/schedule-bg.png) no-repeat; opacity:70%;} .bottom-box .schedule-btn>a>span {display: flex; align-items: center; justify-content: center; gap:10px} .bottom-box .schedule-btn>a>span::after {content: ''; display: inline-block; position: relative; right: 0px; width: 24px; height: 24px; border-radius: 50px; background: #6D72F9 url(/main/img/main/m2023/schedule-ic.svg) no-repeat center/78px; background-position: -60px 7px; transition: .3s;} .bottom-box .schedule-btn>a:hover>span::after {right: -10px;} /*의회소식*/ #board {display: flex; justify-content: space-between; position: relative; padding-top: 60px;} #board .board-con {display: flex; gap: 68px;} #board .board-tab {font-size: calc(1.466 * var(--fz)); font-weight: 500; color: var(--gray02);} #board .board-con div:last-child .board-tab {margin-right: 94px;} #board .board-more {display: none; position: absolute; right: 0; top: 60px; width: 25px; height: 25px; font-size: 0; text-indent: -5000px; background: url(/main/img/main/m2023/main-more-ic01.svg)no-repeat center/25px;} #board .board-list {display: none; position: absolute; left: 0; top: 132px;} #board .board-list>li {flex: 1 1 370px; max-width: 25%; height: 260px; margin-left: 40px; border-radius: 60px 20px 20px 20px; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);} #board .board-list>li:first-child{margin-left: 0;} #board .board-list>li a {display: block; position: relative; padding: 46px 30px 35px;} #board .board-list>li p {word-break: keep-all; overflow: hidden;} #board .board-list>li p.tag {display: inline-block; position: relative; padding: 5px 10px; color: #fff; font-size:calc(.93 * var(--fz)); font-weight: 500; border-radius:50px;background: #8826EA;} #board .board-list>li p.title, #board .board-list>li p.txt {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;} #board .board-list>li p.title {margin-top: 16px; height: 45px; font-size: calc(1.06 * var(--fz)); font-weight: 500; } #board .board-list>li p.txt {margin-top: 12px; height: 40px; color: #888; font-size: calc(.93 * var(--fz)); font-weight: normal;} #board .board-list>li p.date {position: relative; margin-top: 12px; padding-left: 21px; color: var(--gray02); font-size: calc(.93 * var(--fz));} #board .board-list>li p.date::before {content: ''; display: block; position: absolute; top: 1px; left: 0; width: 16px; height: 16px; background: url(/main/img/main/m2023/board-date-ic.svg?v.1) no-repeat;} #board .board-list span.new-ic {position: absolute; right: 30px; top: 45px; width: 28px; height: 28px; font-size: 0; text-indent: -5000px; background: url(/main/img/main/m2023/board-new-ic.svg) no-repeat center / 28px;} #board .select .board-tab {color: var(--point01); font-weight: 700;} #board .select .board-more{display: block;} #board .select .board-list{display: flex; width: 100%;} /*자주찾는 서비스*/ #favorite {background: #E9F6F3; overflow: hidden;} #favorite .wrapper-new {display: flex; flex-direction: column; align-items: center; gap:min(3vw, 30px); position: relative; padding: min(12vw, 55px) 0 min(12vw, 60px); } #favorite .wrapper-new::before {display: block; content: ''; position: absolute; right: calc(100% - 340px); top: 0px; width: 100%; height: 100%; border-radius: 0 150px 10px 0; background: #09A186 url(/main/img/main/m2023/favorite-tit-bg.png) no-repeat right 180px bottom 60px} #favorite .wrapper-new::after {display: block; content: ''; position: absolute; right:-240px; top: 114px; width: 395px; height: 396px; background: url(/main/img/main/m2023/favorite-bg.png) no-repeat;} #favorite .favorite-control {display: flex; gap:20px; align-items: center; } #favorite .favorite-control>li.od2{order:1;} #favorite .favorite-control>li.od1{order:0} #favorite .favorite-control>li.od3{order:3} #favorite .favorite-control a {position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff;} #favorite .favorite-control a::after {content: ''; position: absolute; top: calc(50% - 7px); left: calc(50% - 4px); width: 8px; height: 14px; background:url(/main/img/main/m2023/favorite-arr.svg) no-repeat center;} #favorite .favorite-control a.next::after {transform: rotate(180deg);} #favorite .favorite-list {width: 100%; max-width: 1460px; overflow: hidden; z-index: 2;} #favorite .favorite-list ul {display: flex; position: relative; padding-top: 10px; white-space: nowrap; z-index: 1;} #favorite .favorite-list ul>li {flex: 0 0 12.5%; min-width: 0px;} #favorite .favorite-list ul>li>a {position: relative; display: block; text-align: center; font-size: calc(1.06 * var(--fz)); font-weight: 500; white-space: wrap;} #favorite .favorite-list ul>li>a::before {display: block; content: ''; margin: 0px auto clamp(8px, 1.5vw, 15px); width: clamp(75px, 75%, 110px); aspect-ratio:1/1; border-radius: 30%; background:#fff url(/main/img/main/m2026/ic_favorite.png) no-repeat center var(--posT) / 90.909090%; --posY:calc(8% + 1.2%); --posT:-.5%} #favorite .favorite-list ul>li.link02>a::before {background-position-y: calc(1 * var(--posY) + var(--posT) )} #favorite .favorite-list ul>li.link03>a::before {background-position-y: calc(2 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link04>a::before {background-position-y: calc(3 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link05>a::before {background-position-y: calc(4 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link06>a::before {background-position-y: calc(5 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link07>a::before {background-position-y: calc(6 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link08>a::before {background-position-y: calc(7 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link09>a::before {background-position-y: calc(8 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link10>a::before {background-position-y: calc(9 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link11>a::before {background-position-y: calc(10 * var(--posY) + var(--posT))} #favorite .favorite-list ul>li.link12>a::before {background-position-y: calc(11 * var(--posY) + var(--posT))} /*지역구명 의원 소개*/ #district {position: relative; padding: 60px 0 70px; background: #F0F7F6; overflow: hidden;} #district::after {content: ''; position: absolute; right: -160px; bottom: -240px; width: 614px; height: 624px; background:url(/main/img/main/m2023/map-bg.png) no-repeat;} /* 위원회 바로가기 */ #committee2023 {position: relative; display: flex; justify-content: space-between; border-radius: 50px 10px 50px 10px; background: #fff; z-index: 1;} #committee2023 .com-link {display: flex; width: 100%; max-width: 352px; padding: 48px 1%; border-radius: 50px 0 0 10px; background: #784BD9;} #committee2023 .com-link li { flex:1 1 auto; display: flex; justify-content: center; position: relative; } #committee2023 .com-link li:first-child::before {content: ''; position: absolute; right: 0px; top: calc(50% - 12px); width: 1px; height: 25px; background: #AA82FF;} #committee2023 .com-link li a {display: flex; flex-direction: column; gap:0px; position: relative; padding:0px 30px 0px 0px; color: #fff; font-size: calc(1.2 * var(--fz));} #committee2023 .com-link li a::after {display: block; content: ''; position: absolute; top: 0px; bottom: 0px; right: 0px; margin: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff url(/main/img/main/m2023/comm-arr.svg) no-repeat;} #committee2023 .com-con {display: flex; flex-grow:1; gap: 20px; justify-content: center; align-items: center; padding:0px 3em } #committee2023 .com-con .com-tit {flex: 0 0 auto;} #committee2023 .com-con .com-tit span {position: relative; padding-right: 36px; font-size: calc(1.2 * var(--fz)); font-weight: 600; background: linear-gradient(104deg, #9E41FB -22.64%, #415FFB 104.28%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} #committee2023 .com-con .com-tit span::before, #committee2023 .com-con .com-tit span::after {content: ''; position: absolute; right: 0px; top: calc(50% - 10px); width: 20px; height: 20px;} #committee2023 .com-con .com-tit span::before {border-radius: 50%; background: linear-gradient(104deg, #9E41FB -22.64%, #415FFB 104.28%);} #committee2023 .com-con .com-tit span::after {background: url(/main/img/main/m2023/comm-arr.svg) no-repeat; background-position: -20px 0px} #committee2023 .com-con>ul {display: flex; justify-content: space-between; width: 100%} #committee2023 .com-con>ul li {display: flex; justify-content: center; align-items: center; text-align: center; width: 110px; height: 110px; border-radius: 35px; transition: .3s;} #committee2023 .com-con>ul li a {position: relative; display: block; padding-top: 42px; color: #535353; font-size: calc(0.93 * var(--fz)); font-weight: 500; transition: .3s; text-decoration: none;} #committee2023 .com-con>ul li a::before {content: ''; position: absolute; left: calc(50% - 17px); top: 0; width: 34px; height: 34px; background: url(/main/img/main/m2026/comm-ic.svg) no-repeat; background-position: 0px 0px;} #committee2023 .com-con>ul li.ic02 a::before {background-position: -34px 0px;} #committee2023 .com-con>ul li.ic03 a::before {background-position: -68px 0px;} #committee2023 .com-con>ul li.ic04 a::before {background-position: -102px 0px;} #committee2023 .com-con>ul li.ic05 a::before {background-position: -136px 0px;} #committee2023 .com-con>ul li.ic06 a::before {background-position: -170px 0px;} #committee2023 .com-con>ul li.ic07 a::before {background-position: -204px 0px;} #committee2023 .com-con>ul li.ic08 a::before {background-position: -238px 0px;} #committee2023 .com-con>ul li.ic09 a::before {background-position: -272px 0px;} #committee2023 .com-con>ul li:hover {box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);} #committee2023 .com-con>ul li:hover a {color: #8826EA;} #committee2023 .com-con>ul li.ic01:hover>a::before {background-position: 0px -34px;} #committee2023 .com-con>ul li.ic02:hover>a::before {background-position: -34px -34px;} #committee2023 .com-con>ul li.ic03:hover a::before {background-position: -68px -34px;} #committee2023 .com-con>ul li.ic04:hover a::before {background-position: -102px -34px;} #committee2023 .com-con>ul li.ic05:hover a::before {background-position: -136px -34px;} #committee2023 .com-con>ul li.ic06:hover a::before {background-position: -170px -34px;} #committee2023 .com-con>ul li.ic07:hover a::before {background-position: -204px -34px;} #committee2023 .com-con>ul li.ic08:hover a::before {background-position: -238px -34px;} #committee2023 .com-con>ul li.ic09:hover a::before {background-position: -272px -34px;} #map {display: flex; flex-direction: column; flex-wrap: wrap; height:600px; gap: 0px 60px; margin: max(4%, 50px) auto 0px} #map .map-box {width: 51%; max-width: 650px; margin: auto; padding-top: 20px} #map :where(.tit, .con-box) {width: 49%} #map .tit {display: flex; align-items: center; gap: calc(2 * var(--fz));; position: relative; flex-wrap: wrap; z-index: 1;} #map .tit h3 {font-size: calc(2.66 * var(--fz));} #map .tit h3 span {background: linear-gradient(135deg, #00AE96 0%, #0173BA 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} #map .search {width: 100%; margin-top: 1em;} #map .search .field {display: flex; justify-content: flex-end; align-items: center;} #map .search .field select {width: 15%; max-width: 120px; height: 37px; line-height:37px; margin-right: 10px; padding: 0px 10px; font-size: calc(.93 * var(--fz)); color: var(--gray02); border: 1px solid #B7CBC1; border-radius: 5px; appearance: none; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; background: #fff url(/main/img/main/m2023/search_arr.svg) no-repeat right 10px center;} #map .search .field .word{display: flex; } #map .search .field .word input:first-child {flex-grow: 1; padding: 0px 10px; border: 1px solid #B7CBC1; border-radius: 5px 0 0 5px; font-size: calc(.93 * var(--fz)); line-height:35px} #map .search .field .word input[type=submit] {position: relative; width: 50px; height: 37px; border-width: 0; border-radius: 0 5px 5px 0; background: #3F7C93 url(/main/img/main/m2023/map-search.svg) no-repeat 17px 11px; font-size: 0; text-indent: -5000px; cursor: pointer;} #map .con-box {position: relative; top: -2.5em} #map .mem-info {position: relative;} #map .mem-info>div {display: none; } #map .mem-info>div.on {display: block;} #map .mem-info .result p.area {position: relative; display: flex; align-items: center;padding-bottom: calc(1.5 * var(--fz)); gap:1rem; font-size: calc(1.66 * var(--fz)); font-weight: 600; border-bottom: 1px outset transparent; border-image: linear-gradient(136deg, #0173BA -2.22%, #00AE96 104.82%); border-image-slice: 1;} #map .mem-info .result p.area::before {content: ''; width: 30px; height: 36px; background:url(/main/img/main/m2023/map-ic.svg) no-repeat;} #map .mem-info .info-box>ul {position: relative; display: flex; gap: 30px; flex-wrap: wrap; padding-top: 40px; padding-left: 38%;} #map .mem-info .info-box>ul>li {width: 102px; height: 130px;} #map .mem-info .info-box>ul>li>a {display: block; position: relative; border: 1px solid #E4E4E4; border-radius: 10px; box-shadow: 4px 10px 30px 0px rgba(0, 0, 0, 0.15); overflow: hidden;} #map .mem-info .info-box>ul>li p.member-img>img {width: 100%; height: 100%; object-fit: cover;} #map .mem-info .info-box>ul>li p span.member-name {display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; color: #fff; font-size: calc(.93 * var(--fz)); font-weight: 600; border-top-left-radius: 10px; background: linear-gradient(135deg, #00AE96 0%, #0173BA 100%);} #map .mem-info .info-box {position: relative; display: flex; gap:30px; margin-top: 40px; z-index: 1;} #map .mem-info .info-box ul li .info {display: none; position: absolute; top: 0; left: 0; /*display: flex;*/ flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; width: 260px; padding: 30px; border-radius: 30px; background: #fff; box-shadow: 4px 10px 50px 0px rgba(0, 0, 0, 0.10);} #map .mem-info .info-box ul li.on .info {display: flex;} #map .mem-info .info-box .info .img-wrap {position: relative;} #map .mem-info .info-box .info .img-wrap::after {content: ''; position: absolute; right: -10px; top: -10px; width: 48px; height: 47px; background:url(/main/img/main/m2023/map-ic.svg) no-repeat; background-position: -30px 0; z-index: 1;} #map .mem-info .info-box .info .img {position: relative; text-align: center; width: 180px; height: 180px; overflow: hidden; border: 1px solid #d0e5e4; border-radius: 50px;} #map .mem-info .info-box .info .img img {width: 100%;} #map .mem-info .info-box .info .txt-wrap {display: flex; flex-direction: column; align-items: center; gap: 1px;} #map .mem-info .info-box .info .affiliation {font-size: 13px; font-weight: 600;} #map .mem-info .info-box .info .affiliation.democratic {color: rgba(67, 130, 253, 1);} #map .mem-info .info-box .info .affiliation.liberty {color: rgba(216, 33, 45, 1);} #map .mem-info .info-box .info .affiliation.joguk{color: rgba(0,115,207, 1);} #map .mem-info .info-box .info .name {padding-bottom: 3px; font-size: calc(1.06 * var(--fz));} #map .mem-info .info-box .info .name span {padding-bottom: 3px; font-size: calc(1.33 * var(--fz)); font-weight: 600;} #map .mem-info .info-box .info .dong {padding-bottom: 3px; color: var(--gray02); font-size: 13px;} #map .mem-info .info-box .info .precinct {display: flex; align-items: center;text-align: center; height: 40px; padding-bottom: 10px; color: var(--gray02); font-size: 11px; word-break: keep-all;} #map .mem-info .info-box .info .precinct.h50 {height: 50px;} #map .mem-info .info-box .info .gohome {padding: 9px 15px; border-radius: 50px; background: linear-gradient(104deg, #9E41FB -22.64%, #415FFB 104.28%);} #map .mem-info .info-box .info .gohome>a {position: relative; display: block; padding-right: 29px; color: #fff; font-weight: 600;} #map .mem-info .info-box .info .gohome>a::after {content: ''; position: absolute; right: -1px; top: -1px; width: 24px; height: 24px; border-radius: 500px; background: #fff url(/main/img/main/m2023/home-ic.svg) no-repeat;} #map .result .area-control {position: absolute; right: 0; top: 85px; display: flex; gap: 10px;} #map .result .area-control>a {position: relative; display: block; width: 35px; height: 35px; font-size: 0; text-indent: -5000px; border-radius: 50%; background: #fff; box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.10); z-index: 1;} #map .result .area-control>a::before {content: ''; position: absolute; left: 0px; top: 0px; width: 35px; height: 35px; background:url(/main/img/main/m2023/area-control-ic.svg) no-repeat;} #map .result .area-control>a.area-stop::before {background-position: -35px 0;} #map .result .area-control>a.area-next::before {background-position: -70px 0;} #map .txtmap ul {display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1;} #map .txtmap ul>li a {display: block; width: 56px; height: 2rem; line-height:2rem; text-align: center; line-height: 30px; color: var(--point01); font-size: 12px; border: 1px solid var(--point01); background: #fff; border-radius: 5px; font-weight: 600; text-decoration: none;} #map .txtmap ul>li a:hover{text-decoration: underline;} #map .txtmap ul>li.select a {color: #fff; background: var(--point01);} /* sns, journal */ #snsJournal{position: relative;} #snsJournal:before {display: block; content: ''; position: absolute; right:0px; top: 0px; width: calc(100vw - 59%); height: 100%; border-radius: 277px 0 0px 50px; background: linear-gradient(105deg, #8A5FCB 5.84%, #615FDC 100%); z-index: -1;} #snsJournal>div{display: flex; gap:7%} /* sns */ #sns {flex-shrink: 0; display: flex; justify-content: space-between; position: relative; margin-top: 60px; flex-basis:62.5%} #sns h3 span{color: var(--point03);} #sns .sns-con {display: flex; justify-content: flex-end; } #sns .sns-tab {display: block; position: relative; text-align: center; width: 120px; height: 50px; font-size: calc(1.066 * var(--fz)); font-weight: 600; color: #8A8A8A; background: #f2f2f2;} #sns div:first-child .sns-tab{border-radius: 500px 0 0 500px;} #sns div:last-child .sns-tab {border-radius: 0 500px 500px 0px;} #sns .sns-tab span{display: block; position: relative; padding: 0px 5px; line-height: 50px; border-radius: 500px; transition: .3s; box-sizing: border-box;} #sns .select .sns-tab span { color: #fff; z-index: 1; } #sns .select .sns-tab.facebook span {background-color: #0E70CB;} #sns .select .sns-tab.insta span {background: linear-gradient(97deg, #9F08DA 8.41%, #E8495A 67.01%, #FEC864 93%);} #sns .select .sns-tab.blog span {background-color:#0AAD0A;} #sns .select .sns-tab.threads span {background-color:#333;} #sns .select .sns-tab.youtube span {background-color:#D53A3A;} #sns .mtab_con {visibility: hidden; position: absolute; left: 0px; top: 100px; width: 100%; padding:0px 0px 0px 0px} #sns .mtab_con.visible {visibility: visible} #sns .mtab_con .list-wrap {overflow: hidden;} #sns .sns-list {position: relative; display: flex; gap: calc(1.33 * var(--fz)); padding: 3px 0px; white-space: nowrap;} #sns .sns-list>li {flex: 0 0 auto; padding: 2px;} #sns .sns-list>li a {display: block; width: calc(21 * var(--fz)); height: calc(21 * var(--fz)); border-radius: 30px; overflow: hidden; box-sizing: border-box;} #sns .sns-list>li a img { width: 100%; height: 100%; object-fit: cover; transition: .3s;} #sns .sns-list>li a img:hover {transform: scale(1.05, 1.05);} #sns .control {display: flex; align-items: center; justify-content: center; gap: 10px; margin:5px 0px} #sns .control :where(li.prev, li.next){ position: absolute; top: calc(50% - calc(4 * var(--fz)));} #sns .control li.prev{left:-25px} #sns .control li.next{right:-25px} #sns .control li a {position: relative; display: block; width: 55px; height: 55px; font-size: 0; text-indent: -5000px; border-radius: 50%; background: #fff; box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.10);} #sns .control li a::after {content: ''; position: absolute; left: 0; top: 0; right:0px; bottom: 0; margin:auto; width: 35px; height: 35px; transform: scale(1.4); background: url(/main/img/main/m2023/sns-arr.svg); filter: brightness(0) invert(1) brightness(0.2);} #sns .control li.prev a::after{right:8px} #sns .control li.next a::after {left:8px; transform: scale(1.4) rotate(180deg);} #sns .control li.num{padding:10px 20px; background: #f5f5f5; border-radius:30px} #sns .control li.num strong{position: relative; padding-right: 20px; color: #EA2957; font-weight: 600;} #sns .control li.num strong::before{content: ''; position: absolute; right: 4px; top: 50%; width: 12px; height: 1px; background: var(--gray02);} #sns .control li.num span{color: var(--gray02); font-weight: 500;} #sns .select .mtab_con {display: block;} /*저널*/ #journal {position: relative; padding: 70px 0px 80px; } #journal h3 a{color: #fff;} #journal .book {position: relative; display: flex; justify-content: flex-end; align-items: stretch; gap: calc(1.73 * var(--fz)); margin: auto; padding-top: 15px; max-width: 480px;} #journal .book .img{margin-top: 10px;} #journal .book .img a {display: block; width: 263px; height: 325px; border-radius: 10px; overflow: hidden;} #journal .book .img a img {width: 100%; min-height: 100%;} #journal .book .info {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 47%;} #journal .book .info>ul {display: flex; flex-direction: column; gap: 5px; flex-grow: 1; justify-content: center; width: 100%; max-width: 180px;} #journal .book .info>ul li {position: relative;} #journal .book .info>ul li>a {position: relative; display: flex; align-items: center; gap:10px; padding:calc(.5 * var(--fz)) 20px; font-size: calc(1.1 * var(--fz)); font-weight: 600; border-radius:50px; border:2px solid #fff; transition: .1s;} #journal .book .info>ul li>a::before {content: ''; display: inline-block; width: 30px; height: 30px; background:url(/main/img/main/m2026/ic_journal.png) no-repeat; background-position: left top} #journal .book .info>ul li>a::after {content: ''; display: inline-block; width: 8px; aspect-ratio:1/1; border:2px solid #fff; border-width:2px 2px 0px 0px; transform: rotate(45deg); border-radius:1px} #journal .book .info>ul li>a span{flex-grow:1;} #journal .book .info>ul li.ic02>a::before {background-position-y: -30px} #journal .book .info>ul li.ic02>a::after{border-color:#6A52FB} #journal .book .info>ul li.ic01 a{color: #fff;} #journal .book .info>ul li.ic02 a{background: #fff; color: #6A52FB;} #journal .book .journal_view{position: relative; margin-left: -40px; top:10px} #journal .book .journal_view a{display: block; width: 230px; height: 182px; border-radius: 60px 15px 20px 30px; overflow: hidden; box-shadow:0px 2px 10px rgba(0,0,0,.5)} #journal .book .journal_view a img {width: 100%; min-height: 100%;} /*의정포토*/ .photo-wrap {position: relative; margin:55px 0px; overflow: hidden; } .photo-wrap .wrapper-new {display: flex; gap:5px; overflow:hidden; position: relative; height: 430px; } .photo-wrap h3{margin-right: 1.2em;} .photo_tab{margin-top: 2px;} .photo_tab a{display: flex; align-items: center; gap:10px; padding:7px 27px; font-size: calc(1.125 * var(--fz)); font-weight: 500; border:2px solid var(--point03); color: var(--point03); border-radius:100px} .photo_tab a:After{content: ''; display: block; position: relative; top: -2px; width: 8px; aspect-ratio:1/1; border:3px solid var(--point03); border-width:2.5px 2.5px 0px 0px; transform: rotate(135deg); border-radius:1px} .photo_tab.select a{background: var(--point03); color: #fff;} .photo_tab.select a:After{border-color: #fff} .photo_tab + div {position: absolute; top: 70px; width: 100%;} .photo-list ul{display: flex; gap:1.38%} .photo-list ul>li{flex:0 0 24%; min-width: 0;} .photo-list ul>li p.img{aspect-ratio:1/.675} .photo-list ul>li p.img img{width: 100%; height: 100%; object-fit:cover; border-radius: 1.2em;} .photo-list ul>li p.txt{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size: calc(1.12 * var(--fz)); text-align: center; margin-top: .8em; padding:0px 1em} .photo-wrap .more {position: absolute; right: 0; top: -50px; width: 25px; height: 25px; font-size: 0; text-indent: -5000px; background: url(/main/img/main/m2023/main-more-ic01.svg)no-repeat center/25px;} /*****************************************************************************************************************************************/ @media screen and (min-width:801px){ #lnb h2{display:none !important} } @media screen and (max-width:1280px){ .top-con .top-box {flex-direction: column; align-items: center} .top-con .top-box .boxL{width: 100%} #visual{aspect-ratio:9/5} .chairman{width: 100%; max-width: 860px; } .bottom-box .schedule{flex-direction: column; gap:20px; align-items: stretch} .bottom-box .schedule h3{display: flex; justify-content: center} #favorite .wrapper-new::before {display: none;} #favorite .wrapper-new::after {right: 0; top: auto; bottom: 0px; width: 260px; height: 144px;} #favorite .favorite-tit {margin-right: 0px;} #favorite h3 {color: #0F85AA;} #favorite h3::before {background: #0F85AA;} #favorite h3>span { display: inline-block;} #favorite h3 span.quick-tit, #favorite .favorite-control li a[id] {display: none;} #favorite .favorite-list ul {gap:18px 0px; flex-wrap: wrap; justify-content: center;} #favorite .favorite-list ul>li {flex-basis:25%; max-width: 150px;} #board {padding-top: 30px; margin-bottom: 30px;} #board h3 {display: none;} #board .board-con {width: 100%; gap: 10px; justify-content: space-between; } #board .board-con div:last-child .board-tab {margin-right: 0;} #board .board-tab {display: block; font-size:clamp(12px, 4vw, 18px); height:calc(3.5 * var(--fz))} #board .select .board-tab {position: relative; padding-bottom: clamp(12px, 4vw, 18px); border-bottom: 3px solid var(--point01); z-index: 1;} #board .select .board-list {flex-direction: column;} #board .board-list {top: calc(3.5 * var(--fz) + 30px); border-top: 1px solid #D6D6D6;} #board .board-list>li {flex: 1 1 auto; max-width: none; height: auto; margin-left: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid #ECECEC;} #board .board-list>li a {display: flex; align-items: center; justify-content: space-between; padding:0 0 12px 0;} #board .board-list>li p.title {width: 80%; height: auto; -webkit-line-clamp: 1;} #board .board-list>li p.tag, #board .board-list>li p.txt, #board .board-list span.new-ic {display: none;} #board .board-list>li p.date::before {display: none;} #board .board-more {top:auto; left: 0; bottom: 0px; text-align: center; width: 100%; height: 50px; border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; line-height: 50px; font-size: .85em; text-indent: 0;} #committee2023 {flex-direction: column; border-radius: 10px;} #committee2023 .com-link {max-width: none; padding: 25px 0; border-radius: 10px 10px 0 0;} #committee2023 .com-link li a{Flex-direction: row; GAP:5PX} #committee2023 .com-con {align-items: center; flex-direction: column; gap: 10px; max-width: none; padding:10px 3%} #committee2023 .com-con .com-tit {margin-top: 20px;} #committee2023 .com-con .com-tit span {padding-right: 30px;} #committee2023 .com-con .com-tit span::after {transform: rotate(90deg);} #committee2023 .com-con>ul {flex-wrap: wrap; justify-content: center;} #committee2023 .com-con>ul li {width: 25%; max-width: 110px} #map{flex-direction: row; height:auto} #map .tit{order:0; width: 100%; flex-direction: column; justify-content: center} #map :is(.map-box, .con-box){order:1; width: 100%; margin-top: 0px;} #map .imgmap, #map .con-box{margin-top: 20px;} #map .imgmap{margin: auto; max-width: 450px;} #map .search .field{justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px;} #map .search .field select{width: 40%; margin-right: 0px;} #map .result{min-height: 420px;} #snsJournal>div{flex-direction: column;} #snsJournal:before{display: none;} #sns{align-items: center; flex-direction: column} #sns .sns-con{margin-top: calc(1.2 * var(--fz)); } #sns .mtab_con{top:130px} #journal{padding:3em 1em 3em; margin-top: calc(1.2 * var(--fz)); background: linear-gradient(105deg, #8A5FCB 5.84%, #615FDC 100%); border-radius:1.5em;} #journal h3{text-align: center;} .photo-list ul>li{flex-basis: 70%; max-width: 320px;} } @media screen and (max-width:801px){ .dp_pc {display: none !important} .chairman::after{background-position:center bottom -54px; bottom: 0px; right: auto; } .chairman::before{transform: scale(.7)} .chairman ul.chairman-sbtn {gap:.8rem; margin-top: 15px; padding:6vw 10vw; border-radius:20px} .chairman .txt{display: flex; flex-direction: column; margin-left: 5%;} .chairman .txt p span{font-size: calc(1.8 * var(--fz))} .chairman .goHome {left:unset; bottom:-20px; right: -10px; z-index: 1;} .msearch input[type=submit]{background-image: none; padding-left:0px; width:5rem} .msearch form:before{right: 5rem;} #map .mem-info .result p.area{} #map .mem-info .result p.area::before{transform: scale(.8);} #map .mem-info .info-box{margin-top: 20px;} #map .mem-info .info-box .info {width: 220px;} #map .mem-info .info-box .info .img {width: 160px;} #map .mem-info .info-box>ul {align-items: center; align-content: flex-start; gap: 20px; padding-left: 250px;} #map .mem-info .info-box>ul>li {width: 80px; height: 100px;} #map .mem-info .info-box ul li .info {padding:30px 20px;} #map .mem-info .info-box ul li .info {width: 230px;} #map .mem-info .info-box ul li .info {flex-direction: row; gap: 30px; justify-content: flex-start; width: 100%; padding: 20px;} #map .mem-info .info-box .info .txt-wrap {align-items: flex-start;} #map .mem-info .info-box .info .img {width: 140px; height: 150px; border-radius: 35px;} #map .mem-info .info-box .info .gohome>a {padding-right: 4px;} #map .mem-info .info-box .info .gohome>a::after {display: none;} #map .mem-info .info-box>ul {justify-content: center; width: 100%; padding-left: 0px; padding-top: 220px;} #map .mem-info .info-box>ul.h50_2 {padding-top: 240px;} #map .mem-info .info-box .info .precinct {text-align: left; height:58px; word-break: break-all;} #map .mem-info .info-box .info .precinct.h50 {height: 80px;} #map .result .area-control {left:0px; top:auto; bottom:-60px; margin: auto; width: 125px; gap:8px } #sns .sns-tab{width: 50px;} #sns .sns-tab span{ height:50px; text-indent: -5000px; font-size: 0px; overflow: hidden} #sns .sns-tab span:before{display: block; content: ''; margin:10% auto; width: 95%; aspect-ratio:1/1; background: url(/main/img/inc/sns2026_bk.png) no-repeat left top / 100%; } #sns .sns-tab.facebook span:before{background-position-y: -1%;} #sns .sns-tab.insta span:before{background-position-y: 23%} #sns .sns-tab.blog span:before{background-position-y: 49%} #sns .sns-tab.threads span:before{background-position-y: 74%} #sns .sns-tab.youtube span:before{background-position-y: 99%} #sns .select .sns-tab span:before{background-image: url(/main/img/inc/sns2026_nobg.png)} #journal .book{flex-direction: column; align-items: center} #journal .book {gap:10px} #journal .book .info{width: 100%; align-items: center} #journal .book .info>ul {max-width: unset; flex-direction: row; order:1; margin-top: 20px;} #journal .book .journal_view{top:0px; margin:0px 0px 10px} #journal .book .journal_view a{border-radius:20px; width: 263px; box-shadow:none} .photo-wrap { margin-bottom:2vw } .photo-wrap .wrapper-new {flex-wrap: wrap; align-content: flex-start; height:360px} .photo-wrap h3{width: 100%;} .photo-wrap .splide__arrows {display: none;} .photo_tab{margin-top: 1em;} .photo_tab + div {top: 110px} .photo-list ul>li{flex-basis: 70%; max-width: 320px;} }