@charset "utf-8";

/* cont 레이아웃*/
#cont1 {width:100%; background:url('/images/committee/cont1Bg.jpg') no-repeat center/cover; padding:7.2rem 0;}
	#cont1 .inner{display:flex; align-items:flex-start; width:100%;}
	#cont1 .cont1Right{width:calc(40% - 9rem); margin-left:9rem;}
#cont2{width:100%; padding:7.2rem 0;}
#cont3{width:100%;}
	#cont3 .inner{display:flex; align-items:flex-start; justify-content:space-between;}
#cont4{width:100%; padding:6rem 0 10rem 0;}

@media(max-width:1400px){
	#cont1 .cont1Right{width:calc(40% - 3rem); margin-left:3rem;}
}

@media(max-width:1280px){
#cont3 .inner{flex-direction:column;}
}

@media(max-width:1024px){
	#cont1 .inner{flex-direction:column; }
	#cont1 .cont1Right{width:100%; margin-left:0;}
}

@media(max-width:768px){
#cont1{padding:3.6rem 0;}
#cont2{padding:3.6rem 0;}
#cont4{padding:3.6rem 0 4.8rem 0;}
}

/* 메인비주얼 */
/* 메인비주얼 */
.mVisible{position:relative; width:60%; height:auto; aspect-ratio:9/5; align-self:flex-start;}
mVisible {position:relative; display:block; width:70%; height:auto;  border-radius:2rem; float:none; /* background:inherit; */   margin-right:3.75rem;}
.mVisible .mVisible-slide {width:100%; height:100%; aspect-ratio: 16 / 9; overflow:hidden; border-radius:2rem; background:#fff; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2);}
.mVisible .mVisible-slide .list{display:block !important; width:100%; height:100%;}
.mVisible .mVisible-slide .list img{display:block; width:100%; height:100%; object-fit:cover;}

.mVisible .slider_etc { position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:26rem; height:5.1rem; background:rgba(0,0,0,0.6); border-radius:2rem 2rem 0 0; }

.mVisible .slide_paging { position:absolute; left:2rem; top:1.4rem; width:13.3rem; color:#fff; }
.mVisible .slide_paging .count { margin-right:10.8rem; }

.mVisible .slide_info .slide_progress { position:absolute; left:5rem; top:2.5rem; width:8.3rem; height:0.2rem; background:rgba(255,255,255,0.3); display:inline-block; }
.mVisible .slide_info .slide_progress .progress { height:0.2rem; background:#fff; }


.mVisible .slider_etc button { position:absolute; left:20.7rem; top:1.9rem; width:0.9rem; height:1.3rem; padding:0; border:0; font-size:0; cursor:pointer;  vertical-align: middle; display: inline-block; }
.mVisible .slider_etc .btn_playcontrol { background:url('/images/committee/slick-play.png') no-repeat center;}
.mVisible .slider_etc .btn_playcontrol.pause { background:url('/images/committee/slick-pause.png') no-repeat center;}

.mVisible .slide_btns button { position:absolute; bottom:1.9rem; width:0.8rem; height:1.3rem; border:0; font-size:0; cursor: pointer; padding: 0; vertical-align: middle; display: inline-block; }
.mVisible .slide_btns .btn_prev { left:calc(50% + 5.5rem); background:url('/images/committee/slick-prev.png') no-repeat center;  }
.mVisible .slide_btns .btn_next { left:calc(50% + 10.2rem); background:url('/images/committee/slick-next.png') no-repeat center;  }

.mVisible .pro-bar { position:absolute; bottom:0; left:0; width:0; height:1rem; background: #ccc;}
.mVisible .pro-ani { animation-name: proBar; animation-duration:5s; animation-iteration-count: 1; width:100%; }

.mVisible .mVisible-slide,
.mVisible .slick-list,
.mVisible .slick-track,
.mVisible .mVisible-slide .list {
    height: 100% !important; 
}
.slick-slide > div{height:100%;}

@media(max-width:1024px){
.mVisible{width:100%; margin-bottom:5rem;}
}

@media(max-width:768px){
.mVisible .slider_etc{bottom:-5.1rem; border-radius: 0 0 2rem 2rem;}
.mVisible .slide_btns button{bottom:-3.2rem;}
}

/* cont1 > 슬로건 */
.slogan{position:relative; display:flex; width:100%; align-items:center; margin-bottom:8rem;}
.slogan .text{position:relative; z-index:2; font-weight:700; font-size:2.8rem; padding-top:5rem;}
.slogan .text .txt1{color:#478436; margin-bottom:1.2rem;}
.slogan .text .txt2{font-size:3.2rem; color:#3349a2;}

.slogan .councilMark{position:absolute; right:-7rem;; top:65%; transform:translateY(-50%); width:247px; height:247px; background:url('/images/committee/mark.png') no-repeat center;}


@media(max-width:1024px){
.slogan{margin-bottom:10rem;}
.slogan .councilMark{right:0;}
}

@media(max-width:768px){
.slogan{display:none;}
}



/* cont1 > 의사일정 */
.mAgenda{width:100%; padding:1.6rem; background:#fff; border-radius:1.6rem;}
.mAgenda .title{display:flex; align-items:center; justify-content:space-between;}
.mAgenda .title h2{font-size:3.2rem; color:#222; margin-bottom:0;}
.mAgenda .title .date{font-size:2.8rem; color:#4b5eab; font-weight:700;}

.mAgenda .list{width:100%; padding:1.2rem; background:#eee; border-radius:0.8rem; overflow:hidden; margin:2rem 0;}
.mAgenda .list li{padding-top:4px;}
.mAgenda .list li span{display:inline-block; font-weight:700; color:#333; font-size:2rem; }
.mAgenda .list li span.time{margin-right:1.6rem;}
.mAgenda .btns{display:flex; justify-content:flex-end; align-items:center;}
.mAgenda .btns a{padding:0.5rem 1.2rem; font-size:1.68rem; font-weight:700; color:#222; transition:.3s;}
.mAgenda .btns a:hover, .mAgenda .btns a:focus, .mAgenda .btns a:active{color:#ff7505;}

@media(max-width:768px){
.mAgenda{margin-top:4rem;}
.mAgenda .title h2{font-size:2.8rem;}
.mAgenda .title .date{font-size:2.4rem;}
}


/*cont2 > 위원회구성*/
.cmtMember{width:100%; display:flex; align-items:flex-start; justify-content:space-between; }
.cmtMember .title{position:relative; overflow:hidden; width:50rem; height:15rem; border-bottom:1px solid #ddd;}
.cmtMember .title .textWrap{padding-bottom:1rem;}
.cmtMember .title .textTop{position:relative; }
.cmtMember .title .textTop h2{font-size:2.8rem; color:#222;}
.cmtMember .title .textTop h2 strong{font-size:3.2rem; color:#4b5eab;}
.cmtMember .title .textTop .more{position:absolute; left:105px; bottom:5px; display:flex; align-items:center; justify-content:center; width:25px; height:25px; background:#999; border-radius:2rem;}
.cmtMember .title p{font-size:1.6rem; color:#999; }
.cmtMember .title > img{position:absolute; right:0; bottom:-16px; width:135px; height:auto;}

.cmtMember .memberList{display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; width:calc(100% - 50rem); jus}
.cmtMember .memberList li{/* width:calc(100% / 5); */ margin-right:1.6rem; margin-bottom:1.6rem; background:#f4f4f4; border:1px solid #ddd; border-radius:1rem; padding:1rem; transition:.3s; }
.cmtMember .memberList li:hover, .cmtMember .memberList li:focus, .cmtMember .memberList li:active{background:#fff; border:1px solid #113d8e; box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.cmtMember .memberList li .pic{width:100%; height:auto; aspect-ratio:3/4;}
.cmtMember .memberList li .pic img{width:100%; height:100%; object-fit:cover; margin-bottom:1rem;}

.cmtMember .memberList li .detail p{text-align:center; color:#555; font-size:1.6rem;}
.cmtMember .memberList li .detail .name{font-size:1.6rem; font-weight:700; color:#555; margin-bottom:1rem;}
.cmtMember .memberList li .detail .name strong{font-size:2rem; color:#222;}

@media(max-width:1024px){
.cmtMember{flex-direction:column;}
.cmtMember .title{width:100%; margin-bottom:2rem;}
.cmtMember .title > img{display:none;}
.cmtMember .memberList{width:100%; justify-content:flex-start; align-items:flex-start; flex-wrap:nowrap;}
}
@media(max-width:768px){
.cmtMember .memberList{flex-wrap:wrap;}
.cmtMember .memberList li:nth-of-type(2n){margin-right:0;}
}

/*cont3 > section*/
#cont3 .inner > section {width:calc((100% / 3) - 4rem);}
#cont3 .inner > section > .title{display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem;}
#cont3 .inner > section > .title h2{font-size:3.2rem; color:#222; margin-bottom:0;}
#cont3 .inner > section > .title .more{display:flex; justify-content:center; align-items:center; width:25px; height:25px; background:#999; border-radius:2rem; }
#cont3 .inner > section .list{width:100%; height:auto; padding:2rem; border-radius:2rem; border:1px solid #ddd;}

@media(max-width:1400px){
#cont3 .inner > section{width:calc((100% / 3) - 1rem);}
#cont3 .inner > section .list{padding:2rem 1rem;}
}

@media(max-width:1280px){
#cont3 .inner > section{width:100%; margin-bottom:3.2rem;}

}

/*cont3 > 전자회의록*/
.mMinutes .list li{width:100%; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:0.8rem;}
.mMinutes .list li.none{padding-bottom:0; margin-bottom:0; font-size:2rem; color:#999; border:none;}
.mMinutes .list li a{display:flex; align-items:center; width:100%; height:100%;}
.mMinutes .list li .badge{background:none;}
.mMinutes .list li .badge span{font-size:1.6rem; color:#fff; background:#36a6a8; padding:0.5rem 1rem; border-radius:2rem; margin-right:0.4rem; white-space:nowrap;}
.mMinutes .list li .badge span.chasu{background:#4b5eab;}

.mMinutes .list li .subject{max-width:125px; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; font-weight:700; color:#222; transition:.3s;}
.mMinutes .list li:hover .subject, .mMinutes .list li:focus .subject, .mMinutes .list li:active .subject{color:#113d8e;}

.mMinutes .list li .date{font-size:1.6rem; color:#888; padding-left:24px; background:url('/images/committee/date.png') no-repeat left top 2px;}

@media(max-width:1400px){
.mMinutes .list li .subject{max-width:94px;}
}

@media(max-width:1280px){
.mMinutes .list li a{justify-content:space-between; flex-wrap:wrap;}
.mMinutes .list li .badge{padding:0;}
.mMinutes .list li .subject{max-width:none;}
}

@media(max-width:768px){
.mMinutes .list li .date{background:none; padding-left:0;}
.mMinutes .list li .badge span{font-size:1.4rem;}
.mMinutes .list li .subject{max-width:none; width:100%; margin:1rem 0;}
}
@media(max-width:560px){
.mMinutes .list li .subject{order:3; margin-bottom:0;}
}

/*cont3 > 의안*/
.mBill .list li{width:100%; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:0.8rem;}
.mBill .list li a{display:flex; justify-content:space-between; width:100%; height:100%;}
.mBill .list li .subject{position:relative; max-width:250px; font-weight:700; color:#222; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; padding-left:2rem;}
.mBill .list li .subject:before{content:'';position:absolute; left:0; top:9px;  display:block; width:5px; height:5px; background:#ff7e00; transition:.3s; }
.mBill .list li .subject:hover, .mBill .list li .subject:focus, .mBill .list li .subject:active{color:#113d8e;}

.mBill .list li.none{padding-bottom:0; margin-bottom:0; font-size:2rem; color:#999; border:none;}
.mBill .list li .date{font-size:1.6rem; color:#888; padding-left:24px; background:url('/images/committee/date.png') no-repeat left top 2px;}

@media(max-width:768px){
.mBill .list li .date{background:none; padding-left:0;}
.mBill .list li a{flex-wrap:wrap;}
}

/*cont3 > 영상회의록*/
.mVod .vodBox{border-radius:2rem; overflow:hidden;  border:1px solid #ddd;}
.mVod .vodBox img.thumbnail{transition:.3s;}
.mVod .vodBox:hover img.thumbnail, .mVod .vodBox:focus img.thumbnail, .mVod .vodBox:active img.thumbnail{transform:scale(1.3);}
.mVod .vodBox .pic{position:relative; width:100%; height:auto; aspect-ratio:16/9; overflow:hidden;}
.mVod .vodBox .pic img{width:100%; height:100%; object-fit:cover;}
.mVod .vodBox .pic .playIcon{position:absolute; left:20px; bottom:20px; width:42px; height:42px;}
.mVod .vodBox .bar{display:flex; align-items:center; justify-content:space-between; padding:1.6rem 2rem;}
.mVod .vodBox .bar .none{color:#777;}
.mVod .vodBox .bar .subject{font-weight:700; color:#222; max-width:200px; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; transition:.3s;}
.mVod .vodBox:hover .bar .subject, .mVod .vodBox:focus .bar .subject, .mVod .vodBox:active .bar .subject{color:#113d8e;}
.mVod .vodBox .bar .date{font-size:1.6rem; color:#888; padding-left:24px; background:url('/images/committee/date.png') no-repeat left top 2px;}

@media(max-width:1280px){
.mVod .vodBox a{width:100%;}
}

@media(max-width:768px){
.mVod .vodBox .bar{flex-wrap:wrap;}
}

/*cont4 > 의정활동사진*/
.mPhoto{width:100%;}
.mPhoto .title{display:flex; justify-content:center; align-items:center; margin-bottom:2.4rem;}
.mPhoto .title h2{font-size:3.2rem; color:#222; margin-bottom:0; margin-right:1.2rem;}
.mPhoto .title .more{display:flex; justify-content:center; align-items:center; width:25px; height:25px; background:#999; border-radius:2rem;}

.mPhoto .photoList{display:flex; align-items:center; justify-content:space-between;}
.mPhoto .photoList li{width:calc((100% / 4) - 3.2rem); border-radius:2.4rem; box-shadow:0 5px 5px rgba(0,0,0,0.1); overflow:hidden;}
.mPhoto .photoList li.none{width:100%; padding:3.2rem 0; box-shadow:none; text-align:center; color:#666;}
.mPhoto .photoList li a{width:100%; height:100%;}
.mPhoto .photoList li .pic{ width:100%; height:auto; aspect-ratio:3/2; overflow:hidden; }
.mPhoto .photoList li .pic img{position:relative; width:100%; height:100%; object-fit:cover; transition:.5s;}
.mPhoto .photoList li:hover .pic img, .mPhoto .photoList li:focus .pic img, .mPhoto .photoList li:active .pic img{transform:scale(1.2);}
.mPhoto .photoList li .bar{padding:1.6rem; }
.mPhoto .photoList li .bar .subject{font-weight:700; color:#222; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; transition:.3s; margin-bottom:0.4rem;}
.mPhoto .photoList li:hover .bar .subject, .mPhoto .photoList li:focus .bar .subject, .mPhoto .photoList li:active .bar .subject{color:#113d8e;}
.mPhoto .photoList li .bar .date{font-size:1.6rem; color:#888; padding-left:24px; background:url('/images/committee/date.png') no-repeat left top 2px;}

@media(max-width:1400px){
.mPhoto .photoList li{width:calc((100% / 4) - 2rem);}
}

@media(max-width:1024px){
.mPhoto .photoList{overflow-x: auto; padding-bottom:2rem;}
.mPhoto .photoList li{width:25rem; min-width:25rem; margin-right:2rem;}
}