@charset "utf-8";

/* 공통디자인 */
.title{display:flex; justify-content:space-between; align-items:center;}
.title h2{font-size:3.2rem; color:#222; margin-bottom:0;}
.title .more{display:flex; justify-content:center; align-items:center; width:2.8rem; height:2.8rem; background:#999999; border-radius:2rem;  transition:.3s;}
.title .more img{display:inline-block; transition:.3s;}
.title .more:hover img, .title .more:focus img, .title .more:active img{transform:rotate(90deg);}
.title .more:hover, .title .more:focus, .title .more:active{background:#777;}

@media(max-width:1024px){
.title h2{font-size:2.8rem;}
}



/* cont1 > 메인비주얼 */

.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/main/slick-play.png') no-repeat center;}
.mVisible .slider_etc .btn_playcontrol.pause { background:url('/images/committee/main/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/main/slick-prev.png') no-repeat center;  }
.mVisible .slide_btns .btn_next { left:calc(50% + 10.2rem); background:url('/images/committee/main/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:4rem;}
}

@media(max-width:768px){
.mVisible .slider_etc{bottom:-5.1rem; border-radius: 0 0 2rem 2rem;}
.mVisible .slide_btns button{bottom:-3.2rem;}
}


/* cont1 > 위원회 구성  */
.cmtMember{width:30%;}
.cmtMember .title{margin-bottom:2.8rem;}

.cmtMember .mbrList{display:flex; flex-wrap:wrap; width:100%;  }
.cmtMember .mbrList li{width:calc((100% - 4rem) / 3); margin:0 2rem 2rem 0; border-radius:1rem; overflow:hidden; box-shadow:0 0 5px rgb(0,0,0,0.15);}
.cmtMember .mbrList li:hover, .cmtMember .mbrList li:focus, .cmtMember .mbrList li:active{border:2px solid #ff7800; }
.cmtMember .mbrList li:nth-of-type(3n){margin-right:0;}
.cmtMember .mbrList li a{position:relative; width:100%; height:100%; }
.cmtMember .mbrList li a img{position:relative; width:100%; height:100%; object-fit:cover;}
.cmtMember .mbrList li a span{position:absolute; left:0; bottom:0; width:100%; height:auto; text-align:center; color:#fff; background:rgba(14,20,76,0.6); padding:0.25rem 0}
.cmtMember .mbrList li:hover a span, .cmtMember .mbrList li:focus a span, .cmtMember .mbrList li:active a span{background:#ff7800;}
.cmtMember .mbrList li a span strong{font-size:2rem;}

@media(max-width:1400px){
.cmtMember .mbrList{justify-content:space-between;}
.cmtMember .mbrList li{width:calc((100% - 6rem) / 3); margin:0 0 1rem 0;}
.cmtMember .mbrList li a span{font-size:1.6rem; word-break:keep-all; line-height:1.1;}
.cmtMember .mbrList li a span strong{font-size:1.6rem;}

}

@media(max-width:1024px){
.cmtMember{width:100%;}
.cmtMember .mbrList li{margin:0 1.6rem 2rem 0;}
}

@media(max-width:768px){
.cmtMember{padding-top:4rem;}
}



/* cont2 > 위원회 회의록/ 처리의안  */
#cont2 .inner .cont2Box{position:relative; display:flex; flex-direction:column; border:1px solid #dddddd; padding:3rem; border-radius:2.4rem; overflow:hidden; transition:.3s;}
#cont2 .inner .cont2Box::before{content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background: linear-gradient(129deg,rgba(151, 57, 141, 1) 0%, rgba(71, 69, 153, 1) 100%); z-index:-1; opacity:0; transition:.3s;}
#cont2 .inner .cont2Box .title{width:100%; padding-bottom:2rem; border-bottom:1px solid #ddd; margin-bottom:2rem;}
#cont2 .inner .cont2Box .title h2{font-size:2.4rem; color:#111; transition:.3s;}
#cont2 .inner .cont2Box .detail{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;}
#cont2 .inner .cont2Box .detail span{text-align:center; word-break:keep-all;}
#cont2 .inner .cont2Box .detail .subject{width:100%; font-size:2.4rem; color:#333; font-weight:700;   white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; margin-bottom:2rem; transition:.3s;}
#cont2 .inner .cont2Box .detail .date{display:inline-block; width:fit-content; padding-left:20px; background:url('/images/committee/main/date.png') no-repeat left top 4px; color:#888888; transition:.3s;}


#cont2 .inner .cont2Box:hover::before, #cont2 .inner .cont2Box:focus::before, #cont2 .inner .cont2Box:active::before{opacity:1;}
#cont2 .inner .cont2Box:hover .detail .subject,
#cont2 .inner .cont2Box:focus .detail .subject,
#cont2 .inner .cont2Box:active .detail .subject,
#cont2 .inner .cont2Box:hover .title h2,
#cont2 .inner .cont2Box:focus .title h2,
#cont2 .inner .cont2Box:active .title h2{color:#fff;}
#cont2 .inner .cont2Box:hover .detail .date,
#cont2 .inner .cont2Box:focus .detail .date,
#cont2 .inner .cont2Box:active .detail .date{color:#ccc;}
#cont2 .inner .cont2Box:hover .detail .date,
#cont2 .inner .cont2Box:focus .detail .date,
#cont2 .inner .cont2Box:active .detail .date{background:url('/images/committee/main/dateHover.png') no-repeat left top 4px;}




/*  cont2 > 영상활동 */
#cont2 .inner .mVideo{position:relative; border-radius:2.4rem; overflow:hidden; margin-right:0;}
#cont2 .inner .mVideo a{width:100%; height:100%;}
#cont2 .inner .mVideo .pic{position:relative; width:100%; height:100%;}
#cont2 .inner .mVideo .pic img{position:relative; width:100%; height:100%; object-fit:cover; transition:.3s;}
#cont2 .inner .mVideo .pic::before{content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.25); z-index:1; opacity:0; transition:.3s;}
#cont2 .inner .mVideo .playBtn{position:absolute; left:1.6rem; bottom:8.8rem; z-index:2;}
#cont2 .inner .mVideo .bar{position:absolute; left:0; bottom:0; width:100%; height:auto; padding:.8rem 0 .8rem 2.4rem; background:rgb(0,0,0,0.6); z-index:2;}
#cont2 .inner .mVideo .bar span{display:block; color:#fff; }
#cont2 .inner .mVideo .bar .subject{font-size:2rem; font-weight:700;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#cont2 .inner .mVideo .bar .date{padding-left:20px; background:url('/images/committee/main/date.png') no-repeat left top 4px; color:#888888;}
#cont2 .inner .mVideo .bar .none{font-size:1.6rem; color:#ccc;}

#cont2 .inner .mVideo:hover .pic img, #cont2 .inner .mVideo:focus .pic img, #cont2 .inner .mVideo:active .pic img{transform:scale(1.1);}
#cont2 .inner .mVideo:hover .pic::before, #cont2 .inner .mVideo:focus .pic::before, #cont2 .inner .mVideo:active .pic::before{opacity:1;}

@media(max-width:1024px){
#cont2 .inner .mVideo{width:100%; height:auto; aspect-ratio:16 / 9;}
}



/*  cont3 > 의정활동사진 */
.mPhoto{width:100%;}
.mPhoto .title{justify-content:center; margin-bottom:2.4rem;}
.mPhoto .title h2{margin-right:0.8rem;}

.mPhoto .photoList{display:flex; align-items:center;}
.mPhoto .photoList li{width:calc((100% - 9rem) / 3); border-radius:2.4rem; overflow:hidden; border:1px solid #ddd;  margin-right:3rem; transition:.3s;}
.mPhoto .photoList li:hover, .mPhoto .photoList li:focus, .mPhoto .photoList li:active{box-shadow:0 5px 8px rgb(0,0,0,0.13);}
.mPhoto .photoList li:last-of-type{margin-right:0;}
.mPhoto .photoList li a{width:100%; height:100%;}

.mPhoto .photoList li .pic{width:100%; aspect-ratio:3/2; overflow:hidden;}
.mPhoto .photoList li .pic img{width:100%; height:100%; object-fit:cover; transition:.3s;}
.mPhoto .photoList li:hover .pic img, .mPhoto .photoList li:focus .pic img, .mPhoto .photoList li:active .pic img{transform:scale(1.1);}

.mPhoto .photoList li.none{width:100%; text-align:center; border:none; padding-top:48px;}
.mPhoto .photoList li.none:hover, .mPhoto .photoList li.none:focus, .mPhoto .photoList li.none:active{box-shadow:none;}

.mPhoto .photoList li .bar{ width:100%; background:#fff; padding:1.6rem;}
.mPhoto .photoList li .bar span{display:block;}
.mPhoto .photoList li .bar .subject{ font-size:2rem; color:#333; font-weight:700; line-height:1.2; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-bottom:.4rem; transition:.3s;}
.mPhoto .photoList li:hover .bar .subject, .mPhoto .photoList li:focus .bar .subject, .mPhoto .photoList li:active .bar .subject{color:#ff7800;}
.mPhoto .photoList li .bar .date{padding-left:20px; background:url('/images/committee/main/date.png') no-repeat left top 4px; color:#888888;}

@media(max-width:1024px){
.mPhoto .photoList{width:auto; overflow-x:auto; padding-bottom:1.6rem;}
.mPhoto .photoList li{width:25rem; height:auto; flex-shrink:0;}
}