@charset "utf-8"; /* inc */ #lnb{border-bottom:1px solid #333} #gnb{background: #fff} body{overflow-x:hidden; font-weight: normal; background: #F5F5F5 url(/committee/img/img2026/contents_bg.png) no-repeat right 45px} .wrap{max-width:1400px; margin:auto;} .dangname{display: inline-block; width: 120px; aspect-ratio:3/1; background: url(/assembly/img/img2026/txt_dang.png) no-repeat left bottom / cover; overflow:hidden; text-indent: -5000px; } .dangname.democratic{background-position-y:0px} .dangname.liberty{background-position-y:-40px} .part_C601 .slogan{white-space: nowrap;} /* 비주얼 */ .democratic {--dang : #3854ef;} .liberty { --dang: #E60225;} .justice { --dang: #fe8918;} .joguk { --dang: #0176d5;} .nogroup { --dang: linear-gradient(90deg, #6555C2 0%, #12AE8F 100%); } #intro{position: relative;display: flex; gap:5px; margin: calc(3.7 * var(--fz)) auto 25px;} #intro .con{flex:0 0 20%; display: flex; flex-direction: column; gap:30px; max-width: 258px;} #intro .slogan a{line-height: 110%; font-family: var(--cngfont); font-size: calc(4.13 * var(--fz)); font-weight:bold; background: linear-gradient(110deg, #343234 2%, #8B19BF 60%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none;} #intro .slogan a:After{display: inline-block; content: ''; width: 21px; height: 21px; vertical-align: top; position: relative; top: 8px; left:3px; transition: all .3s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M8 3C4.87581 3 7.12419 3 4 3C2.34315 3 1 4.34315 1 6V17C1 18.6569 2.34315 20 4 20H15C16.6569 20 18 18.6569 18 17V14' stroke='%238B19BF' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10.5 10.5L20 1M14 1H20V8' stroke='%23642582' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / cover; } #intro .slogan a:hover:After{top:5px; left:7px} #intro .link{flex-grow:1; display: flex; flex-direction: column; gap: 5px;} #intro .link>li a{display: flex; padding: 10px 17px 10px 27px; align-items: center; gap: 30px; justify-content: space-between; font-size:var(--18px) ;background: #fff; border-radius:100px; transition:all .2s; word-break: keep-all; line-height: 130%;} #intro .link>li a:After{display: block; content: ""; width: 9px; height: 15px; background-color: #8A949E; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.10001 1.09998L7.10001 7.09998L1.10001 13.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.10001 1.09998L7.10001 7.09998L1.10001 13.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;} #intro .link>li:hover a{background: var(--color); color:#fff} #intro .link>li:hover a:After{background-color: #fff;} #intro .control{display: flex; justify-content: flex-end; gap:20px; align-items: center; margin-bottom: 50px; margin-right: 3px;} #intro .control>li.count{font-size: 17px; font-weight: 300; min-width:36px; text-align: right; text-indent: -5000px; overflow:hidden} #intro .control>li #visualCnt01{font-weight: 500;} #intro .control :where(.prev, .next) a{position: relative; display: block; width: 40px; height: 40px; background: #8A949E; border-radius:15px; text-indent: -5000px;} #intro .control :where(.prev, .next) 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);} #intro .control :where(.next) a:after{left: 8px; rotate: 180deg;} #intro #members {position: relative;} #intro #members .eng{position: absolute; top: 0px; left: 40px; font-family: var(--cngfont); font-size: calc(7 * var(--fz)); color: #cacaca; opacity: .2; font-weight: 900; line-height: 90%; letter-spacing: -2px;} #intro #members .eng:before{display: block; } .part_C101 .eng:before{content: 'COUNCIL STEERING COMMITTEE';} .part_C805 .eng:before{content: 'PUBLIC ADMINISTRATION AND SAFETY COMMITTEE';} .part_C301 .eng:before{content: 'CULTURE AND WELFARE COMMITTEE';} .part_C401 .eng:before{content: 'INDUSTRY AND ECONOMY COMMITTEE';} .part_C501 .eng:before{content: 'CONSTRUCTION AND TRANSPORTATION COMMITTEE';} .part_C601 .eng:before{content: 'EDUCATION COMMITTEE';} #intro #members>div{overflow-x:hidden; margin-top: calc(7 * var(--fz) - 72px); padding:50px;} #intro #members ul{display: flex; gap:13px; white-space:nowrap; position: relative;} #intro #members ul>li{flex:0 0 280px; position: relative; aspect-ratio:1/1.53571} #intro #members div.card{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; height: 100%; background: url(/committee/img/img2026/nogroup.svg) no-repeat center top; transition:all ease .2s} #intro #members li.liberty div.card{background-image: url(/committee/img/img2026/liberty.svg);} #intro #members li.democratic div.card{background-image: url(/committee/img/img2026/democratic.svg);} #intro #members li:first-child div.card{background-image: url(/committee/img/img2026/nogroup_on.svg);} #intro #members li.democratic:first-child div.card{background-image: url(/committee/img/img2026/democratic_on.svg);} #intro #members li.liberty:first-child div.card{background-image: url(/committee/img/img2026/liberty_on.svg);} #intro #members li:first-child .cardbg svg{filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3)); } #intro #members div.card *{font-family: var(--cngfont)} #intro #members div.card .img{width: 80%; max-width:180px; aspect-ratio:1/1.28; margin-top: 34px; overflow:hidden; border-radius:8px} #intro #members div.card .img img{width: 100%; height:100%; object-fit:cover; backface-visibility: hidden; } #intro #members div.card .name{margin-top: 10px; font-size: 19px; font-weight: 300;} #intro #members div.card .name span{font-weight: 500;} #intro #members div.card .area{font-family: normal;} #intro #members div.card .dang{position: absolute; left: 25px; bottom: 15px;} #intro #members div.card .goHome{position: absolute; right: 0px; bottom: 0px; display: block; text-indent: -5000px; overflow:hidden; width: 48px; height: 48px; background: var(--dang) url(/committee/img/img2026/ic_gohome.png) no-repeat center center; border-radius:100%; transition:all ease .2s} #intro #members .nogroup div.card .goHome{background: url(/committee/img/img2026/ic_gohome.png) no-repeat center center, var(--dang); border-radius:100%} #intro #members li:hover div.card .goHome, #intro #members li:first-child div.card .goHome{width: 58px; height: 58px} #intro #members .cardbg{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 0; } #intro #members .cardbg svg{transition:all ease .2s; width: 100%; height: 100%} #intro #members ul>li:hover .cardbg svg{filter: drop-shadow(0 4px 25px rgba(0,0,0,0.4)); } #contents{display: flex; flex-wrap: wrap; gap:4vw; padding-bottom: clamp(50px, 5vw, 100px); } #contents:before{display: block; content: ''; position: absolute; right: calc((100vw - min(92%, 1400px)) / -2); top: 0%; width: 100%; height:30%; border-radius:calc(15 * var(--20px)) calc(15 * var(--20px)) 0px 0px; background: url(/committee/img/img2026/contents_bg2.png) no-repeat right top / cover; background-blend-mode: multiply; z-index:-1} #contents h3{line-height: 110%; font-family: var(--cngfont); font-size: calc(2.53333 * var(--fz)); font-weight:bold; color: #333; background: var(--gra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} #contents .fzsize_tit{font-size:var(--20px); font-family: var(--cngfont); color: #333; letter-spacing: 0px; line-height:140%} #contents .fzsize_date{font-size:var(--16px); color:#888} #contents .fzsize_txt{font-size:var(--16px); color:#666} #contents .nolist{padding:calc(1.8 * var(--fz)) 1.5%; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-family: var(--cngfont); } /* 의정영상 */ #movie{flex:0 0 100%; margin-top: 3vw; padding-top: max(1.5vw, 30px);} #movie:before{display: block; content: ''; position: absolute; left: calc((100vw - min(98%, 1400px)) / -2); top: 0px; width: 100%; height:100%; border-radius:min(20.83vw, 400px) min(20.83vw, 400px) 0px 0px; background: #fff; z-index: -1;} #movie:after{display: block; content: ''; position: absolute; right: calc((100vw - min(98%, 1400px)) / -2); top: 20%; width: 100%; height:80%; border-radius:min(15vw, 400px) min(15vw, 400px) 0px 0px; background: #fff; z-index: -1;} #movie h3{font-size: var(--20px); font-weight: 500;} #movie ul li{position: relative; display: flex; gap:4.5%; padding-bottom: calc(var(--fz) * 2); --top:7%} #movie ul li:not(:first-child){display: none;} #movie ul li:before{display: block; content: ''; left: 10%; right: 0px; top: 9%; bottom: -1%; position: absolute; background: linear-gradient(90deg, #F2EBFF 40%, #E1DBF6 100%), #EFEFEF; border-radius:var(--20px) var(--20px) var(--20px) calc(var(--20px) * 7.5); z-index: 0;} #movie ul li a.img{display: block; flex:0 0 52.4285%; aspect-ratio:1/.56; ; max-height: 400px; border-radius:8px; overflow:hidden; z-index: 1;} #movie ul li a.img img{width: 100%; height: 100%; object-fit:cover;} #movie ul li div.con{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; min-width: 0; padding-top: 6%; margin-right: 5%; z-index: 1;} #movie ul li div.con:before{display: block; content: ''; position: absolute; left: 0px; top: 0px; width: 4px; height: 150px; background: #404040;} #movie ul li div.con h3{padding-left: calc(2 * var(--fz))} #movie ul li div.con a.txt{flex-grow: 1} #movie ul li div.con .fzsize_tit{display: block; padding-left: calc(2 * var(--fz)); margin-top: 10px; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; font-family: var(--cngfont); font-size: calc(2.1 * var(--fz)); font-weight:bold; background: var(--gra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} #movie ul li div.con .fzsize_txt{flex-grow:1; margin-top: 5%; word-break: keep-all; color: #484848; font-size: calc(var(--fz) * 1.1); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow:hidden} #movie ul li div.con a.more{display: flex; align-items: center; gap:5px; font-weight: 600; font-size: calc(1.1 * var(--fz));} #movie ul li div.con a.more:after{display: block; content: ''; top: 7px; width: 9px; height: 11px; background: #333; ; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M0.880005 0.880005L5.68 5.68L0.880005 10.48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M0.880005 0.880005L5.68 5.68L0.880005 10.48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;} /* 포토의정 */ #photo{position: relative; flex:1; min-width: 0px;} #photo ul{display: flex; flex-wrap: wrap; justify-content: space-between;} #photo ul>li{flex:0 0 48%; min-width: 0px; margin-top: 4%} #photo a.img{display: block; border-radius:var(--20px); overflow:hidden; } #photo a.img img{object-fit:cover; aspect-ratio:1/0.676} #photo .tit {object-fit:cover; margin-top: 15px} #photo .tit span{display: block;} #photo .tit .fzsize_tit{display: inline-block; font-size: calc(1.25 * var(--fz)); max-width: 98%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } #photo .tit .fzsize_date{margin-top: calc(.1 * var(--fz));} #photo .more{position: absolute; right: 0px; top: 0px; display: block; width: calc(2 * var(--20px)); height: calc(2 * var(--20px)); background: #8A949E; border-radius:15px; text-indent: -5000px;} #photo .more:before, #photo .more:after{content: ''; position: absolute; left: 0; top: 0; right: 0px; bottom: 0; margin: auto; width: 35%; height: 2px; background: #fff;} #photo .more:before{transform: rotate(90deg);} /* 게시판 */ #board{flex:0 0 33%; min-width: 0px;} #board>div{padding-top: min(40px, 7.5%); border-bottom:1px solid #333} #board>div:first-child{padding-top: 0px;} #board h3{position: relative; padding-left: 1%; transition:all ease .2s; position: relative;} #board h3 a{display: block; } #board ul li a{display: block; padding:calc(1.5 * var(--fz)) 1.5%} #board ul li a .fzsize_tit{display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-family: var(--cngfont); } #board ul li a .fzsize_date{display: block; margin-top: 5px;} #board div ul li+li{border-top:1px dashed #000} #board .nolist:not(:first-child), #board .nolist+.nolist{display: none !important;} @media screen and (min-width:801px){ #board div:not(.select) h3{font-size:calc(1.9 * var(--fz)); background: none; ;-webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color: initial !important; font-weight: 600; } #board div a.more{display: none;} #board div ul li:first-child {display: block} #board div ul li {display: none; } #board div.select{border-bottom: none;} #board div.select h3{margin-bottom: 2%; } #board h3 a:after{display: block; content: ''; position: absolute; right: 0px; top: 7px; width: 20px; height: 12px; background: #333; opacity:.5; transform: rotate(180deg); -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"%3E%3Cpath d="M18 10L10 2L2 10" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center / contain; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"%3E%3Cpath d="M18 10L10 2L2 10" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center / contain; } #board div.select h3 a:after{transform: rotate(0deg); opacity:1} #board div.select a.more{display: block; text-align: center; color: #fff; font-size:var(--18px); padding:var(--fz); border-radius: 0 0 12px 12px; background: var(--gra)} } /*pc_min*/ @media screen and (max-width:1280px){ body{background-size: 120%;} #intro{flex-direction: column; } #intro .con{gap:20px; max-width:100%; align-items: center} #intro .slogan{text-align: center} #intro .link{flex-direction: row; gap:1%; max-width: 560px; width: 100%; } #intro .link>li{flex:0 0 24%; min-width:0} #intro .link>li a{text-align: center; border-radius:5px; padding:10px; width: 100%; height: 100%; line-height: 130%; align-items: center; justify-content: center; bordeR:1px solid var(--color)} #intro .link>li a:After{display: none;} #intro .control{justify-content: center; margin-bottom: 10px; padding-top: clamp(20px, 4vw, 50px);} #intro #members .eng {display: none;} #intro #members>div{margin-top: 0px; padding-top: 20px;} #contents{flex-direction: column; flex-wrap: nowrap; gap:70px} #contents:before{left: -4%; right: -4%; top: 0px; width: unset; height: 100%; background: #fff; border-radius:50px 50px 0px 0px} #movie{flex-grow:1; margin-top: 3vw; padding-top: max(1.5vw, 30px);} #movie:after, #movie:before{display: none;} #movie ul li:before{right: -3%;} #movie ul li{flex-direction: column; flex-wrap: nowrap;} #movie ul li div.con{padding-top: 30px} #movie ul li div.con .fzsize_txt{margin-top: 30px;} #movie ul li div.con:before{display: none;} #movie ul li div.con .fzsize_tit, #movie ul li div.con h3{padding-left: 0px;} #photo{overflow:hidden; width: 100%;} #photo ul{white-space:nowrap; flex-wrap: nowrap; justify-content: flex-start; overflow-x:scroll; gap:max(20px, 3%)} #photo ul>li{flex:0 0 clamp(260px, 30%, 415px);} } /*mobile*/ @media screen and (max-width:800px){ .wrap>h1{display: none;} #lnb{border-bottom: 0px;} #intro{margin-top: 10px; margin-bottom: 0px; overflow:hidden; width: 100%; padding:0px 4%} #intro .slogan{max-width: calc(15 * var(--fz));} #intro .slogan a{font-size: calc(3.5 * var(--fz));;} #intro #members>div{overflow:visible; padding:0px} #intro #members ul {gap:0px; margin-left: -180px;} #intro #members ul>li{transform: scale(.85); margin-left: -25px; order:2; transform-origin:top;} #intro #members ul>li:last-child{order:1} #board>div{position: relative; border-bottom:1px solid #333} #board div ul li {display: block !importANT} #board .more{position: absolute; right: 0px; top: 2rem; display: block; width: calc(2 * var(--20px)); height: calc(2 * var(--20px)); background: #8A949E; border-radius:15px; text-indent: -5000px;} #board .select .more{top:0px} #board .more:before, #board .more:after{content: ''; position: absolute; left: 0; top: 0; right: 0px; bottom: 0; margin: auto; width: 35%; height: 2px; background: #fff;} #board .more:before{transform: rotate(90deg);} }