@charset "utf-8";

body:before{display:block; content:''; position:absolute; left:0px; top:0px; width:100%; height:51rem; background:url(/open_content/council/img/main/bg.png) no-repeat center top, var(--grabg); z-index:-1}
h3{font-size:2.8rem; font-weight:600;}
#contents>section{margin-top:clamp(6rem, 6%, 8rem);}

/** popup **/
.m_popup{position:absolute; top:5px; left:5px; z-index:9999; padding:1px; background:#444;}
.m_popup .m_popup_tit{display:block; padding:5px 10px; color:#fff; font-weight:600;}
.m_popup .m_popup_close{display:block; overflow:hidden; margin-top:-10px; padding:7px 10px; background:#444; font-weight:600; color:#fff; text-align:left; font-size:14px;}
.m_popup .m_popup_close>p{float:left; text-align:right; color:#fff;}
.m_popup .m_popup_close label{color:#fff;}
.m_popup .m_popup_close>a{float:right; color:#fff;}

/**/
#visual{position:relative; border-radius:1rem; border-top-right-radius:18rem; overflow:hidden}
#visual .list{overflow:hidden}
#visual .list ul{display:flex; position:relative; white-space:nowrap;}
#visual .list ul>li{flex:0 0 100%; width:100%; height:43rem}
#visual .list ul>li a{display:block; height:100%;}
#visual .list ul>li img{width:100%; height:100%; object-fit:cover}
#visual .control{display:flex; align-items:center; position:absolute; right:0px; bottom:0px; padding:1.3rem 2.8rem; background:rgba(0,0,0,.56); border-top-left-radius:2rem}
#visual .control>p{color:#fff; margin-right:1rem;}
#visual .control>ul{display:flex}
#visual .control li{position:relative; font-size:0px;}
#visual .control li a{display:block; width:1.8rem; height:1.8rem}
#visual .control li.play{display:none;}
#visual .control li a:After{display:block; content:''; position:absolute; width:1rem; height:1rem;}
#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:50%; top:50%; margin:-3px; margin-top: -.6rem; width:2px; height:1.2rem; background:#fff; box-shadow:5px 0px 0px #fff}

/* 의장 */
.chairman{width:33.857142%; padding-left:2.4rem; background:url(/open_content/council/img/main/chairman_bg.png) no-repeat left top}
.chairman .summary{padding:6.4rem 2.8rem 3.2rem; padding-right:30%; background:url(/open_content/council/img/main/chairman2026.png) no-repeat right -1rem bottom/26rem}
.chairman .summary .txt01{font-size:2.2rem; color:#000; line-height:1.5}
.chairman .summary .txt02{margin-top:.9rem; font-size:2.2rem; color:#000}
.chairman .summary .txt02 span{font-weight:800; font-size:3.2rem;}
.chairman .summary .txt02 span:nth-child(1){color:#3DB753}
.chairman .summary .txt02 span:nth-child(2){color:#2C806B}
.chairman .summary ul{display:flex; margin-top:2.4rem; max-width:24rem; gap:1.8rem}
.chairman .summary ul>li{flex:1 0 50%}
.chairman .summary ul li a{display:flex; gap:1.2rem; justify-content:center; align-items:center; padding:.9rem 1.6rem; font-size:1.6rem; color:#000; border-radius:10px; background:#FFF; box-shadow: 0px 2px 3rem 0px rgba(0, 0, 0, 0.10); transition:all ease .5s}
.chairman .summary ul li a:before{display:inline-block; content:''; width:2.5rem; height:2.5rem; background:url(/open_content/council/img/main/chairman_ic01.png) no-repeat left center/cover; transition:all ease .5s}
.chairman .summary ul li:nth-child(2) a:before{background-image:url(/open_content/council/img/main/chairman_ic02.png) }
.chairman .summary ul li a:hover{background:var(--color02); color:#fff;}
.chairman .summary ul li a:hover:before{background-position-x:right}
.chairman .schedule{display:flex; align-items:center; gap:2.5rem; position:relative; padding:2.6rem 2.5rem; background:var(--gra); border-radius:1rem; border-top-left-radius:5rem}
.chairman .schedule .date{text-align:center; padding-top:3rem; color:#fff; background:url(/open_content/council/img/main/schedule_ic.png) no-repeat center top/2.5rem; line-height:1.3;}
.chairman .schedule .date span{display:block; color:#FAFFC0; font-size:2.4rem; font-weight:500;}
.chairman .schedule .con{flex-grow:1; overflow:hidden; }
.chairman .schedule .con *{color:#fff}
.chairman .schedule .con h3{font-size:2.1rem; font-weight:500; letter-spacing:-0.05rem; text-shadow:0px 0px 1px rgba(0,0,0,.6)}
.chairman .schedule .list{margin-top:1rem; height:4.4rem; width:100%; overflow:hidden;  border-radius:1rem; background:rgba(80, 80, 80, 0.29);}
.chairman .schedule .list ul{position:relative; }
.chairman .schedule .list ul li{width:100%;}
.chairman .schedule .list ul li a{display:block; position:relative; padding:1rem 2rem; padding-left:2.5rem; font-family:'Spoqa' !important; font-weight:300; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.chairman .schedule .list ul li a:before{display:block; content:''; position:absolute; left:1.5rem; top:2rem; width:3px; height:3px; border-radius:50px; background:#fff;}
.chairman .schedule .control{display:flex; gap:.6rem; position:absolute; top:3.2rem; right:3rem; }
.chairman .schedule .control a{display:block; position:relative; font-size:0px; width:20px; height:20px; background:rgb(255,255,255,.2); border-radius:3px}
.chairman .schedule .control a:before,
.chairman .schedule .control a:after{display:block; content:''; position:absolute; background:#fff;}
.chairman .schedule .control p.more a:after,
.chairman .schedule .control p.more a:before{left:25%; top:50%; width:50%; height:2px; border-radius:50px}
.chairman .schedule .control p.more a:after{transform:rotate(90deg)}
.chairman .schedule .control p.stop a:before, .chairman .schedule .control p.play a:before {display:block; content:''; position:absolute; top: 0; left: 0; width: 2.1rem; height: 2rem; background: url(../img/main/main-schedule-ic.svg) no-repeat center / 4.2rem; }
.chairman .schedule .control p.stop a:before {background-position: 0 0;}
.chairman .schedule .control p.play a:before {background-position: -2.1rem 0;}
/* .chairman .schedule .control p.stop a:before{left:30%; top:30%; width:2px; height:40%; border-radius:50px; box-shadow:5px 0px 0px #fff}
.chairman .schedule .control p.play{display:none;}
.chairman .schedule .control p.play a:before{left:30%; top:30%; width:40%; height:40%; border:2.5px solid #fff; border-bottom-width:0px; border-left-width:0px; background:none; border-radius:2px; transform:rotate(45deg)} */

/* 게시글 */
.board{display:flex; position:relative; --h3H:6.5rem; height:var(--h3H); padding-right:6rem; border:1px solid #e3e3e3; border-radius:1rem}
.board>h3{position:relative; text-align:center; flex-grow:1; border-left:1px solid #e3e3e3}
.board>h3:first-child{border-left:0px;}
.board>h3 a{display:block; position:absolute; left:-1px; top:-1px; bottom:-1px; right:-1px; padding:0rem 1rem; height:var(--h3H); font-weight:500; font-size:2rem; line-height:var(--h3H); border-right:0px; white-space:nowrap;}
.board>h3.select{border-left:0px;}
.board>h3.select a{font-weight:500; border-radius:1rem; background:var(--color02); color:#fff; border-color:var(--color02); box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15); z-index:1;}
.board>h3.select+.con+h3{border-left:0px;}
.board .con{display:none; margin-top:calc(var(--h3H) + 4rem); position:absolute; width:100%}
.board>h3.select+div{display:block;}
.board .con>ul{display:flex; justify-content:space-between; }
.board .con>ul li{flex:0 0 31.5%; max-width: 31.5%; background:#F2FAF6; border-radius:1rem }
.board .con>ul li a{display:block; padding:3rem 3.5rem}
.board .con>ul li a .tit{display:-webkit-box; font-size:1.8rem; font-weight:500; letter-spacing:-0.03rem; line-height:1.5; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; height:3em; overflow:hidden; text-overflow:ellipsis;}
.board .con>ul li a p:not(.tit){margin-top:1.5rem; color:#939393; font-family:'Spoqa'}
.board .con>ul li a .date{padding-left:2.3rem; background:url(/open_content/council/img/main/ic_date.png) no-repeat center left/1.8rem; }
.board .con>ul li a .txt{overflow:hidden; height:5rem;}
.board .more{flex-grow:0; position:absolute; right:0px; top:-10.5rem; order:5; border-left:1px solid #e3e3e3}
.board .more a{display:block; position:relative; font-size:0px; background:#E4F4E2; width:6rem; height:calc(6.5rem - 2px); border-radius:0px 1rem 1rem 0px}
.board .more a:before{display:inline-block; content:''; position:relative; --gap:.9rem;  top:calc(50%  - 1px - var(--gap)); left:calc(50% - var(--gap)); width:var(--gap); height:var(--gap); background:var(--color); box-shadow:1.1rem 0px 0px var(--color), 1.1rem 1.1rem 0px var(--color), 0px 1.1rem 0px var(--color); border-radius:1px; opacity:.9;}

/* 서구의회보 */
.journal{position:relative; background:url(/open_content/council/img/main/journal_bg.png) no-repeat center bottom/91.1%}
.journal h3 span{color:var(--point02)}
.journal .img{position:relative; margin:2rem auto 4.5rem; max-width:166px;}
.journal .img img{border:.8rem solid #fff; box-shadow:0px 2px 30px 0px rgba(0, 0, 0, 0.28); }
.journal .img a{display: block;}
.journal .img a p{display:flex; flex-direction:column; justify-content:center; position:absolute; --size:8.4rem; right:calc(0px - var(--size)/2); top:calc(0px - var(--size)/2); text-align:center; width:var(--size); height:var(--size); font-size:1.2rem; line-height:1.2; border-radius:100px; border:1.2rem solid rgba(99, 94, 208, 0.23); background:#FFF; box-shadow: 0px 4px 2rem 0px rgba(0, 0, 0, 0.15); background-clip:content-box; transition:all ease .1s}
.journal .img a:hover p{--size:9rem; border-width:1.5rem;}
.journal .img a p span{display:block; font-weight:800; font-size:2rem; color:var(--point02)}
.journal .more{position:absolute; right:0px; top:1rem}
.journal .more a{display:block; width:3.5rem; height:3.5rem; border-radius:.8rem; background:var(--point02); font-size:0px;}
.journal .more a:before,
.journal .more a:after{display:block; content:''; position:absolute; left:31%; top:calc(50% - 2px); width:44%; height:3px; background:#fff; border-radius:10px}
.journal .more a:after{transform:rotate(90deg)}

/* 자주찾는메뉴 */
.quick{gap:4%;}
.quick .tit{text-align:right; padding-left:13rem; min-height:14rem; max-width:27rem; background:url(/open_content/council/img/main/quick_bg.png) no-repeat left bottom/16rem}
.quick .tit p{padding-right:.5rem; font-weight:600; color:var(--point02); font-size:1.8rem;}
.quick .tit h3{margin-top:.5rem; font-weight:600; font-size:2.8rem; line-height:1.3;}
.quick ul{flex-grow:1; flex-basis:calc(96% - 27rem); display:flex; flex-wrap:wrap; justify-content:space-between}
.quick ul>li{flex:0 1 14.285%}
.quick ul>li a{display:block; text-align:center; margin: auto; max-width:10.4rem; font-size:1.6rem; font-weight:500; transition:all ease .3s}
.quick ul>li a:before{display:block; content:''; margin:0px auto 1rem; height:10.4rem; border:2px solid transparent; background:#F8F8F8 url(/open_content/council/img/main/quick_ic.png) no-repeat center top/10rem; border-radius:2rem; transition:all ease .3s}
.quick ul>li:nth-child(2) a:before{background-position-y:-10rem}
.quick ul>li:nth-child(3) a:before{background-position-y:-20rem}
.quick ul>li:nth-child(4) a:before{background-position-y:-30rem}
.quick ul>li:nth-child(5) a:before{background-position-y:-40rem}
.quick ul>li:nth-child(6) a:before{background-position-y:-50rem}
.quick ul>li:nth-child(7) a:before{background-position-y:-60rem}
.quick ul>li:nth-child(8) a:before{background-position-y:-70rem}
.quick ul>li a:hover{color:var(--point02);}
.quick ul>li a:hover:before{border-color:var(--point02); box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.18);}

/* 지역구별의원 */
.district{display:block !important; max-height:72rem; overflow:hidden; background:url(/open_content/council/img/main/district_bgL.png) no-repeat -8% top / 26%, url(/open_content/council/img/main/district_bgR.png) no-repeat right 30% center/cover, linear-gradient(121deg, #F7FCFB 0%, #F8F7FC 100%)}
.district .wrap{display:flex; justify-content:space-between}
.district .map{width:39%; margin-top:3%}
.district .con{width:57.715%; padding:7.5rem 0px 8rem}
.district .con .tit h3{margin-left:-.4rem; font-size:4.2rem; letter-spacing:-.2rem}
.district .con .tit h3 span{background:linear-gradient(104deg, #22AE8D 0%, #955FDA 100%);  background-clip:text;  -webkit-background-clip:text;  -webkit-text-fill-color: transparent;}
.district .con .tit p{font-family:'Spoqa'; color:#545454}
.district .con .result{margin-top:4rem; ; min-height:43.3rem}
.district .con .result .area{position:relative; padding-bottom:1rem; padding-left:3rem; background:url(/open_content/council/img/main/district_ic.png) no-repeat left .4rem / 2.1rem; font-weight:700; font-size:2rem;}
.district .con .result .area span{display:inline-block; margin-left:.5rem; font-size:1.6rem; color:#888; font-weight:400;}
.district .con .result .area:AFter{display:block; content:''; position:absolute; left:0px; right:0px; bottom:0px; height:1px; background:linear-gradient(90deg, rgba(99, 94, 208, 1), rgba(61, 161, 137, 1));}
.district .con .result ul{display:flex; gap:4%; margin-top:3rem; font-weight:500}
.district .con .result ul>li{flex:0 0 30.66%; position:relative; text-align:center; padding:3rem; font-weight:500;background:#fff; border-radius:1rem; box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.10);}
.district .con .result ul>li>p{margin-top:1rem;}
.district .con .result ul>li .tag{position:absolute; right:3rem; top:2.5rem; width:4.5rem; height:4.5rem; line-height:5rem; font-size:1.6rem; color:#BB9226; background:url(/open_content/council/img/main/area_bg.png) no-repeat center/cover }
.district .con .result ul>li .name{font-size:1.4rem;}
.district .con .result ul>li .name span{font-size:2rem; font-weight:500; }
.district .con .result ul>li .dong{margin-top:.3rem; color:#9b9b9b; font-size:1.2rem; }
.district .con .result ul>li .img{margin:auto; width:16.5rem; height:16.5rem; overflow:hidden;  background:#E9E3D5; border-radius:5rem}
.district .con .result ul>li .gohome a{display:inline-block; padding:5px 1.5rem; padding-left:4.5rem; color:#fff; background:var(--point02) url(/open_content/council/img/main/gohome_ic.png) no-repeat 1.5rem center / 2.5rem; border-radius:.8rem; font-size:1.4rem;}

/* 의정활동사진 */
.photo{position:relative; padding-top:1.5rem;}
.photo h3 span{color:var(--color)}
.photo ul{display:flex; justify-content:space-between; margin-top:2rem;}
.photo ul>li{flex:0 0 31%;  border-radius:1rem; overflow:hidden; box-shadow:0px 2px 15px 0px rgba(0, 0, 0, 0.10);}
.photo ul>li .img{height:clamp(140px, 18vw, 180px); overflow:hidden}
.photo ul>li .img img{width:100%; height:100%; object-fit:cover;}
.photo ul>li .txt{background:#fff; padding:2rem 2.5rem; font-size:1.6rem; overflow-wrap: break-word; font-weight:500;}
.photo ul>li .txt span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.photo ul>li .txt span.date{color:#9B9B9B; margin-top:.5rem; font-size:1.4rem; font-weight:400;}
.photo .more{position:absolute; right:.2rem; top:2rem}
.photo .more a{display:block; position:relative; width:3rem; height:3rem; font-size:0px; border-left:0px}
.photo .more a:before{display:block; content:''; position:absolute; --gap:1rem; top:calc(50% - var(--gap)); left:calc(50% - var(--gap)); width:var(--gap); height:var(--gap); background:var(--color); box-shadow:1.2rem 0px 0px var(--color), 1.2rem 1.2rem 0px var(--color), 0px 1.2rem 0px var(--color); border-radius:1px; opacity:.9;}

.photo_con {max-width: 90rem; position: relative; width: 100%;}
.photo_con .photo3_list {overflow: hidden; padding-bottom: 2rem;}
.photo_con .photo3_list ul {display: flex;	gap: 3rem;	position: relative;	white-space: nowrap;}
.photo_con .photo3_list ul li {max-width: 28rem; flex: 0 0 calc(33.3% - 1.4rem);}
.photo_con .photo-tit {display: inline-block; position: absolute; top: -3.8rem; right: 4rem;}
.photo_con .photo-control {display: flex;	align-items: center;}
.photo_con .photo-control a {position: relative; display: block; width: 3rem; height: 3rem; margin-right: 0.6rem; font-size: 0; text-indent: -5000px; border-radius: 50%;	background: #f3f3f3;}
.photo_con .photo-control a::after {display: block;	content: ''; position: absolute;	width: 1rem; height: 1rem;}
.photo_con .photo-control a.photo-prev::after,
.photo_con .photo-control a.photo-next::after {left: calc(50% - 0.3rem);	top: calc(50% - 0.5rem);	border: 0px solid var(--color);	border-width: 2px 0px 0px 2px;	transform: rotate(-45deg);}
.photo_con .photo-control a.photo-next::after {border-width: 0px 2px 2px 0px; left: calc(50% - 0.6rem);}

/* 의정활동영상 */
.video{position:relative; padding:3rem 6rem; background:var(--color); border-radius:1rem; border-bottom-right-radius:10rem}
.video *{color:#fff}
.video h3 span{color:#FFCF55}
.video .txt{margin-top:1.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.video .img{position:relative; margin-top:1rem; height:17rem; border-radius:1rem; border:2px solid #182257; background:#000; overflow:hidden}
.video .img:After{display:block; content:''; position:absolute; left:calc(50% - 1.7rem); top:calc(50% - 1.7rem); width:3.4rem; height:3.8rem; background:url(/open_content/council/img/main/video_play.png) no-repeat center center/cover}
.video .img img{width:100%; height:100%; opacity:.5; object-fit:cover}
.video .date{margin-top:.5rem; font-size:1.4rem; color:#e0e0e0}
.video .more{position:absolute; right:5rem; top:7rem}
.video .more a{display:block; text-align:center; width:5.4rem; height:5.4rem; line-height:5.4rem; background:#fff; border-radius:2rem; font-size:0px; transition:all ease .3s}
.video .more a img{ display:inline-block; vertical-align:middle; transition:all ease .3s}
.video .more a:hover{background:#FFBD14;}
.video .more a:hover img{transform:translate(5px, -5px); filter:saturate(0%) brightness(500%)}


/***************************************************************************************************************************/


@media all and (min-width:801px){
	#contents>section{display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-start}
	#contents>section:nth-of-type(1){margin-top:0px;}
	#contents>section>div:not(.tit, .wrap):first-child{width:65%; max-width:900px;}
	#contents>section>div:not(:first-child):last-child:not(.chairman){width:33%; max-width:450px;}
}

@media screen and (max-width:800px){
	body:before{height:150vw; max-height:90vh;}
	#contents>section:first-child{margin-top:0px;}
	.m_popup{left:0px !important}
	#visual{margin-top:0px !Important; border-radius:1rem;}
	#visual .list ul>li{height:35rem}
	.chairman{margin:auto; max-width:55rem; width:100%; padding-left:0px;}
	.chairman .summary{background-size:55%}
	.chairman .summary ul{gap:1rem}
	.chairman .schedule .control p.stop a:before {background: url(../img/main/main-schedule-ic.svg) no-repeat center / 5.2rem; background-position: 0 0;}
	.chairman .schedule .control p.play a:before {background: url(../img/main/main-schedule-ic.svg) no-repeat center / 5.2rem; background-position: -2.7rem 0;}
	.board{padding-right:0px; --h3H:6rem; }
	.board>h3 a{padding-top:2px; font-size:1.8rem}
	.board .con{margin-top:9rem; }
	.board .con>ul{gap:10px; overflow-x:scroll;}
	.board .con>ul li{flex-basis:85%; margin-bottom:3px; max-width:230px; height:175px;}
	.board .more{top:auto; bottom:-6rem; width:100%; text-align:center; border:0px}
	.board .more a{vertical-align:middle; width:auto; height:auto; padding:1rem; font-size:1.5rem; border-radius:.8rem; border:0px; background:#f5f5f5; border:1px solid #eee}
	.board .more a:before{transform:scale(.7); vertical-align:middle; left:auto; top:-4px; margin-right:1.2rem}
	.journal{margin:auto; margin-top:300px !important; padding-bottom:.5rem; background-size:min(350px, 91%)}
	.journal .img{margin-top:4rem;}
	.quick .tit{text-align:left; padding-top:3rem; padding-left:17rem; max-width:300px}
	.quick .tit h3{max-width:unset;}
	.quick ul{gap:2rem 2%; justify-content:flex-start}
	.quick ul>li{flex:0 0 23%;}
	.quick ul>li a{max-width:100%}
	.district{max-height:unset; margin-top:5rem;}
	.district .wrap{display: block;}
	.district .map{position:absolute; right:1rem; width:45vw; }
	.district .txtmap{position:relative; margin-top:5rem; z-index:1;}
	.district .txtmap ul{display:flex; gap:3px; }
	.district .txtmap ul>li a{display:block; width:40px; height:30px; text-align:center; line-height:29px; border:1px solid var(--color02); color:var(--color); background:#fff; border-radius:5px; font-weight:600; text-decoration:none;}
	.district .txtmap ul>li.select a{background:var(--color02); color:#fff}
	.district .con{z-index:1; padding:5rem 0px;}
	.district .con .tit{width:50vw; }
	.district .con .tit h3{font-size:3.5rem; line-height:1.4;}
	.district .con{width:100%}
	.district .con .result ul{position: relative; gap:10px}
	.district .con .result ul>li{min-width:200px}
	.photo ul{/*overflow-x:auto;*/ gap:10px; margin:0px; padding:3rem 0px;}
	/* .photo ul>li{flex: 0 0 auto;    width: 28rem;} */
	.photo_con .photo3_list {overflow: visible;}
	.photo_con .photo3_list ul {gap: 2rem;}
	.photo_con .photo3_list ul li {flex: 0 0 auto; width: 26rem;}
	.district .con .result#area-bi ul>li .tag{font-size:1.5rem; letter-spacing:-1px;}
	.video{margin-top:5rem;}
}

@media screen and (max-width:480px){
	#visual .list ul>li{height:clamp(20rem, 30vh, 23rem)}
}