@charset "utf-8";

@media (min-width:1025px) and (max-width:1400px){
.sideAllmenu ul.mdepth1 li a:active,
	.sideAllmenu ul.mdepth1 li a:focus,
	.sideAllmenu ul.mdepth1 li a:hover,
	.sideAllmenu ul.mdepth1 li a.select{background:initial !important;}
}

/*섹션제목 + 더보기*/
.more{display:flex; width:28px; height:28px; border-radius:20px; background:#999; transition: transform 0.3s ease;}
.more:hover, .more:active, .more:focus{transform: rotate(90deg); background:#7A7A7A;}

.title{display:flex; align-items: flex-start; justify-content:space-between; align-items:center; margin-bottom:3.2rem;}
.title h2{font-size:3.2rem; color:#111;}

/*cont1*/
#cont1{background:url('/images/committee/mVisible_bg.jpg') no-repeat center/cover;}

/*cont1 > 의사일정*/
.agenda{display:flex; justify-content:space-between; gap:1.6rem; height:9rem; align-items:center; padding:1.6rem 4rem; background:#fff; border-radius:2rem; box-shadow:0 4px 10px rgb(0,0,0,0.2); margin-bottom:5.6rem;}
.agenda h2{min-width:10rem; font-size:2.8rem; color:#111;}
.agenda .date{ display:flex; justify-content:center; align-items:center; height:100%; width:calc(100% / 5); background:#a5aed5; border-radius:1.2rem; color:#222c59; font-size:2rem; font-weight:700;}
/* .agenda .subject{ display:flex; align-items:center; height:100%; width:calc(100% / 5 * 3); border-radius:1.2rem; padding:2rem 0 2rem 3.6rem; background:#eeeeee; color:#111; font-size:2rem; font-weight:700; transition:0.2s}
.agenda .subject:hover, .agenda .subject:active, .agenda .subject:focus{background:#D0D0D0;}
.agenda .subject span{ margin-right:2.2rem; } */
.agenda .schedule{display:flex; justify-content:space-between; align-items:center; width:calc(100% / 5 * 3); height:100%;  background:#eeeeee; color:#111; border-radius:1.2rem; padding:0 2rem; margin-bottom:0;}
.agenda .schedule .schList {width:70%;}
.agenda .schedule .slick-arrow{display:none !important;}
.agenda .schedule .schList .list{font-size:2rem; font-weight:700; color:#111;}
.agenda .schedule .schList .listNone{font-weight:500; color:#333;}

.agenda .schedule .btn_playcontrol{width:0.9rem; height:1.3rem; background:url('/images/committee/schedule_start.png') no-repeat center; font-size:0;}
.agenda .schedule .btn_playcontrol.pause {width:0.9rem; height:1.3rem; background:url('/images/committee/schedule_pause.png') no-repeat center; font-size:0;}







.agenda .dateMore { display:flex; justify-content:center; align-items:center; height:100%; width:calc(100% / 5); border-radius:1.2rem; background:#888; color:#fff; transition:0.2s}
.agenda .dateMore:hover, .agenda .dateMore:focus, .agenda .dateMore:active{background:#555;}

@media (max-width:1035px){
.agenda {flex-wrap:wrap; height:auto; justify-content:flex-start;}
.agenda .date {min-width:10rem; width:auto; padding:0 1.6rem; line-height:5rem; height:5rem;}
.agenda .dateMore{order:2; min-width:10rem; width:auto; padding:0 1.6rem; line-height:5rem; height:5rem;}
.agenda .subject{order:3; width:100%;}
.agenda .subject strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}

@media (max-width:768px){
.agenda{padding:3.6rem 1.6rem;}
.agenda .date{width:100%; font-size:2.2rem; }
.agenda .dateMore{width:100%; order:3;}
.agenda .subject {order:2; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding:2rem 1.6rem; box-sizing: border-box;}

}

/*cont1 > 메인비주얼*/
.cont1Wrap{display:flex; justify-content:space-between;}
.mVisible {position:relative; display:block; width:70%; height:auto; aspect-ratio: 16 / 9; overflow:hidden; float:none; background:inherit; border-radius:2rem; background:#fff; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2)}
.mVisible .visibleSlide {width:100%; height:100%;}
.mVisible .visibleSlide .Slide{display:block !important; width:100%; height:100%;}
.mVisible .visibleSlide .Slide 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/visible_btn_play.png) no-repeat center;}
.mVisible .slider_etc .btn_playcontrol.pause { background:url(/images/committee/visible_btn_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/visible_btn_prev.png) no-repeat center;  }
.mVisible .slide_btns .btn_next { left:calc(50% + 10.2rem); background:url(/images/committee/visible_btn_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 .visibleSlide,
.mVisible .slick-list,
.mVisible .slick-track,
.mVisible .visibleSlide .Slide {
    height: 100% !important; 
}
.slick-slide > div{height:100%;}


/*cont1 > 위원소개*/
.intro {width:calc(30% - 4.8rem); align-self: stretch; background:#fff; border-radius:2em; padding: 3.2rem 2.4rem; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2)}
.intro .title{display:flex; align-items: flex-start; justify-content:space-between; align-items:center; border-bottom:1px solid #dddddd; padding-bottom:1.2rem;}
.intro .title h2{font-size:2.8rem;}
.intro .introDetail{display:flex; flex-wrap:wrap; justify-content:center; gap:2.4rem 2.8rem; margin-top:1.2rem;}
.intro .introDetail li{width:calc((100% / 2) - 2.8rem); height:auto; border:1px solid #ddd; border-radius:1.2rem; overflow:hidden; transition:0.3s}
.intro .introDetail li a{width:100%; height:100%;}
.intro .introDetail li:hover, .intro .introDetail li:active, .intro .introDetail li:focus{box-shadow:2px 2px 10px rgb(0,0,0,0.2);}
.intro .introDetail li img{width:100%; height:auto; object-fit:cover;}
.intro .introDetail li .text{padding:1.6rem 0.8rem; color:#555; font-weight:700; text-align:center; word-break: keep-all;}
.intro .introDetail li .text strong{color:#111; font-size:2rem; }

@media (max-width:1280px){
.intro{padding:2.4rem 1.6rem;}
}

@media (max-width:1063px){
.cont1Wrap{flex-direction:column;}
.mVisible {width:100%; margin-bottom:4rem;}
.intro{width:100%;}
.intro .introDetail{justify-content:space-between;}
.intro .introDetail li{width: calc((100% / 4) - 2.8rem);}
}

@media (max-width:768px){
.intro .introDetail{justify-content:center;}
.intro .introDetail li{width: calc((100% / 2) - 2.8rem);}
.intro .introDetail li .text{padding:1.2rem 0.4rem; }
}

/*cont2*/
#cont2 .inner{display:flex; justify-content:space-between; gap:4rem;}

/*cont2 > 전자회의록*/
.mMeeting{width:calc(100% / 3);}
.mMeeting .meetingDetail{display:flex; flex-direction:column; width:100%; height:auto; border-radius:2rem; background:#f4f4f4; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2); padding:1.6rem; }
.mMeeting .meetingDetail li{margin-bottom:0.4rem;}
.mMeeting .meetingDetail .list{ padding:0.4rem; border-radius:32px; transition:0.3s;}
.mMeeting .meetingDetail .list a{ display:flex; width:100%; align-items:center;}
.mMeeting .meetingDetail .list a > span{margin-right:0.6rem;}
.mMeeting .meetingDetail .list a > span:last-of-type{margin-right:0;}
.mMeeting .meetingDetail .list:hover, .mMeeting .meetingDetail .list:focus, .mMeeting .meetingDetail .list:active{background:#fff; box-shadow:inset 2px 2px 5px rgb(0,0,0,0.2);}
.mMeeting .meetingDetail .list:hover .subject, .mMeeting .meetingDetail .list:active .subject, .mMeeting .meetingDetail .list:focus .subject{color:#113d8e;}
.mMeeting .meetingDetail .line {width:100%; height:1px; background:#ddd;}
.mMeeting .meetingDetail .list .hoesu{display:inline-block; min-width:7rem; height:3rem; line-height:3rem; background:#36a6a8; border-radius:32px; color:#fff; font-size:1.6rem; text-align:center; }
.mMeeting .meetingDetail .list .chasu{display:inline-block; min-width:6rem; height:3rem; line-height:3rem;  background:#4b5eab; border-radius:32px; color:#fff; font-size:1.6rem; text-align:center;}
.mMeeting .meetingDetail li .subject{font-size:1.9rem; font-weight:700; color:#111; }
.mMeeting .meetingDetail .list .date{display:inline-block; min-width:10rem; color:#888; margin-left:auto;}
.mMeeting .meetingDetail .list .svg-inline--fa{color:#a79f98; margin-right:0.4rem;}



/*cont2 > 의안*/
.mBill{width:calc(100% / 3);}
.mBill .billDetail{display:flex; flex-direction:column; width:100%; height:auto; border-radius:2rem; background:#f4f4f4; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2); padding:1.6rem; }
.mBill .billDetail li{ margin-bottom:0.4rem;}
.mBill .billDetail .list{ display:flex; align-items:center; justify-content:space-between; padding:0.4rem 0.8rem; border-radius:32px; transition:0.3s;}
.mBill .billDetail .list:hover, .mBill .billDetail .list:focus, .mBill .billDetail .list:active{background:#fff; box-shadow:inset 2px 2px 5px rgb(0,0,0,0.2);}
.mBill .billDetail .list:hover .subject, .mBill .billDetail .list:focus .subject, .mBill .billDetail .list:active .subject{color:#113d8e;}
.mBill .billDetail .line {width:100%; height:1px; background:#ddd;}
.mBill .billDetail .list:before{content:''; display:block; width:4px; height:4px; background:#ff7e00; margin-right:0.8rem; flex-shrink: 0;}
.mBill .billDetail .list a{display:flex; width:100%; align-items:center; justify-content:space-between; overflow:hidden; }
.mBill .billDetail .list .subject{height:3rem; width:55%; line-height:3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:1.9rem; font-weight:700; color:#111;}
.mBill .billDetail .list .date{display:inline-block; min-width:fit-content; color:#888;}
.mBill .billDetail .list .svg-inline--fa{color:#a79f98; margin-right:0.4rem;}

/*cont2 > 영상회의록*/
.mvod{width:calc(100% / 3); }
.mvod .vodDetail{width:100%; height:strech; border-radius:2rem; background:#f4f4f4; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2); overflow:hidden;}
.mvod .vodDetail:hover a > img, .mvod .vodDetail:active a > img, .mvod .vodDetail:focus a > img{ transform: scale(1.1);}
.mvod .vodDetail a{width:100%; position:relative; overflow:hidden;}
.mvod .vodDetail a img{ width:100%; position:relative; transition:0.5s;}
.mvod .vodDetail a span{position:absolute; bottom:3rem; left:3rem;}
.mvod .bar{display:flex; justify-content:space-between; align-items:center; padding:1.2rem 2rem;}
.mvod .bar .subject{height:3rem; width:calc(100% - 13rem); line-height:3rem; margin-right:1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:1.9rem; font-weight:700; color:#111;}
.mvod .bar .date{display:inline-block; min-width:10rem; color:#888; margin-left:auto;}
.mvod .bar .svg-inline--fa{color:#a79f98; margin-right:0.4rem;}


@media (max-width:1414px){
#cont2 .inner{gap:2rem;}
.mMeeting .meetingDetail .list .date{display:none;}
.mMeeting .meetingDetail li .subject{width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mvod .vodDetail a {width:100%;}
.mvod .vodDetail a img{width:100%; height:100%; object-fit:cover;}
}

@media (max-width:1038px){
.mBill .billDetail .list .svg-inline--fa{display:none;}
}

@media (max-width:1000px){
#cont2 .inner{flex-direction:column;}
.mMeeting, .mBill, .mvod{width:100% !important; margin-bottom:4rem;}
.mMeeting .meetingDetail .list .date{display:block; min-width:fit-content; font-size:1.6rem;}
.mBill .billDetail .list .svg-inline--fa{display:inline-block;}

}

@media (max-width:428px){
.mMeeting .meetingDetail .list a{flex-wrap:wrap; padding:0.8rem;}
.mMeeting .meetingDetail li .subject{width:100%; order:3; margin-top:0.4rem;}
.mMeeting .meetingDetail .list .date{order:1;}
.mMeeting .meetingDetail .list a > span{margin-right:0.4rem;}
}

@media (max-width:375px){
.mMeeting .meetingDetail .list .svg-inline--fa{display:none;}
}

@media (max-width:320px){
.mMeeting .meetingDetail .list .date{margin:4px auto 4px 0;}
}
/*cont3*/
.mPhoto .title{display:flex; justify-content:center; align-items:center;}
.mPhoto .title h2{margin-bottom:0; margin-right:1.6rem;}
.mPhoto .more{position:static;}
.mPhoto .photoDetail{display:flex; justify-content:space-between; align-items:center; }
.mPhoto .photoDetail li{width:calc((100% / 4) - 3.6rem); height:auto; overflow:hidden; border-radius:2rem; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2);}
.mPhoto .photoDetail li:hover .pic img, .mPhoto .photoDetail li:active .pic img, .mPhoto .photoDetail li:focus .pic img{transform:scale(1.1);}
.mPhoto .photoDetail li a{width:100%; height:100%;}
.mPhoto .photoDetail li .pic{ overflow:hidden;}
.mPhoto .photoDetail .pic img{display:block; width:100%; height:auto; transition:0.5s;}
.mPhoto .photoDetail .bar {padding:2rem;}
.mPhoto .photoDetail .bar .subject{display:block; height:3rem; width:100%; line-height:3rem; margin-right:1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:1.9rem; font-weight:700; color:#111;  transition:0.5s;}
.mPhoto .photoDetail li:hover .bar .subject, .mPhoto .photoDetail li:active .bar .subject, .mPhoto .photoDetail li:focus .bar .subject{color:#113d8e;}
.mPhoto .photoDetail .bar .date{display:inline-block; min-width:10rem; color:#888; margin-left:auto;}
.mPhoto .photoDetail .bar .svg-inline--fa{color:#a79f98; margin-right:0.8rem;}

@media (max-width:1000px){
.mPhoto .photoDetail{overflow-x:scroll; flex-wrap:nowrap; padding-bottom: 1.5rem; gap:2.4rem;}
.mPhoto .photoDetail li {width: 28rem; flex-shrink: 0;}
}

/*cont3 > 사진이 없을때*/
.mPhoto .picNone{text-align:center; font-size:2rem; color:#999; font-weight:500; padding:10rem;}