@charset "utf-8";

/* 레이아웃 */
.main .containerarea { max-width:140rem; margin:0 auto; }

#cont1 { padding:4rem 0 ; background: linear-gradient( #E1E4EF 50%, rgba(255, 255, 255, 0.0)); }
#cont2 { padding:0 0 4rem; }
#cont3 { padding:0 0 4rem; }
#cont4 { padding:0 0 6rem; }




/* 공통 요소 */
section h2 { font-size:4rem; margin-bottom:4rem; }
section .cmtMore { position:relative; content:''; display:inline-block; width:32px; height:32px; background:url(/images/committee/cmtMore.png) no-repeat center; transition: background-position 0.4s ease; }
section .cmtMore:hover { background-position: 4px -4px; } 


.svg-icon { width:3rem; height:3rem; cursor: pointer; }
.svg-icon.ico-close { width:2rem; height:2rem;  }
.svg-icon.ico-play { background-image:url(/images/memberHome/slick_btn_pause.png); }
.btn-pause.on .ico-play { background-image:url(/images/memberHome/slick_btn_play.png); }

.svg-icon.ico-angle.right { transform: rotate(-90deg); }
.svg-icon.ico-angle.left { transform: rotate(90deg); }



section .more { position:relative; content:''; display:inline-block; width:32px; height:32px; border-radius:100px; font-size:0; text-indent:-999999px; transition:0.4s; }
section .more::before,
section .more::after { position:absolute; top:50%; left:50%; content:''; width:24px; height:2px; background:#888; transform: translate(-50%, -50%); }

section .more::before { width:2px; height:24px;  }

section .more:hover,
section .more:focus,
section .more:active { transform:rotate(90deg); }

.bar button:hover, 
.bar button:focus { background:#e0f2f1; border-color:#80cbc4;  }







/* 메인비주얼 */
.mVisible { position:relative; width:100%; }
.mVisible .pic { width:100%; height:100%; }
.mVisible .pic img { width:100%; height:100%; object-fit: cover; border-radius:2.4rem 2.4rem 0 0 ; }


.mVisible .txt { position:absolute; text-align:center; top:68%; left:50%; transform:translate(-50%, -50%); color:#fff; font-size:2.2rem; word-break: keep-all;  }
.mVisible .txt p { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); margin-bottom: 1rem; }
.mVisible .txt strong { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); font-size:3.4rem; font-weight: 500; }

@media (max-width: 768px) {
	.mVisible .txt { position:relative; transform: translate(-50%, 0); top:0;padding:20px 0; color:#444444; }
}





/* 오늘의 의사일정 */
.mSched { position:relative; display:flex; align-items:center; margin:4rem 0; }
.mSched > .title { position:relative; display:flex; align-items:center; width:22rem; padding-right:3.6rem; margin-right:3.6rem; }
.mSched > .title::after { position:absolute; top:50%; right:0; content:''; width:.1rem; height:4rem; background:#A3B4B3; transform:translateY(-50%); }
.mSched > .title h2 { display:inline-flex; flex-direction:column; color:#013A31; font-size:2rem; margin-bottom:0; }
.mSched > .title h2 span { display:block; font-size:1.6em; }
.mSched > .title i { display:inline-block; width:4rem; height:4.3rem; margin-right:1.2rem; background:url(/images/council/main/ico_calendar.png); }

.mSched .date { display:flex; align-items:center; }
.mSched .date span { font-size:3.2rem; font-weight:700; color:#013A31; margin:0 1.2rem; }

.mSched .sched-wrap { display:flex; align-items:center; width:calc(100% - 81rem); padding:1rem 2rem; background:#fff; border-radius:1.2rem; margin:0 4rem 0 2rem; }
.mSched .sched-wrap .sched-list { width:calc(100% - 10.6rem); }
.mSched .sched-wrap .sched-item a { width:100% !important; font-size:1.7; line-height:1.5; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; }
.mSched .sched-wrap .bar { display:flex; margin-left:1rem; }

.mSched .btn-link { display:flex; flex: 1 1 32rem; max-width:32rem; min-width: 24rem; }
.mSched .btn-link a { position:relative; flex: 1; width:100%; min-height:4.8rem; padding:1.6rem 1.0rem; border-radius:.6rem; background:linear-gradient(45deg,#304FFE,#3D5AFE); color:#fff; text-align:center; z-index: 1; }


.mSched .btn-link a:before { position:absolute; content:''; top:0; right:0; width:100%; height:100%; border-radius:.6rem; background:linear-gradient(45deg,#304FFE,#182258); transition: all 0.4s ease; z-index: 0; opacity: 0; }
/*.mSched .btn-link a:first-child { margin-right:1.6rem; }*/
.mSched .btn-link a:hover:before { opacity: 1; }

.mSched .btn-link a > * { position: relative; z-index: 1; }



/* 컨트롤러 */
.mSched .svg-icon.ico-angle.up { transform: rotate(90deg); }
.mSched .svg-icon.ico-angle { transform: rotate(-90deg); }
	/* 컨트롤러 - 날짜 */
.mSched .svg-icon.ico-angle.left { transform: rotate(90deg); }

@media (min-width:769px) and (max-width:1280px){
	.mSched { flex-wrap:wrap; }

	.mSched > .title { width:100%; margin-bottom:2.6rem; }
	.mSched > .title::after { display:none; }
	.mSched > .title h2 { flex-direction:row; align-items:flex-end; }
	.mSched > .title h2 span { margin-left:.8rem; }

	.mSched .sched-wrap { width:calc(100% - 28rem); margin-right:0; }

	.mSched .btn-link { position:absolute; top:0; right:0; width:50%; }
}

@media (max-width:768px){
	.mSched { flex-direction:column; align-items:flex-start; }

	.mSched > .title { width:100%; align-items:center; margin-bottom:1.6rem; }
	.mSched > .title::after { display:none; }

	.mSched > .title h2 { font-size:1.8rem; flex-direction:row; align-items:flex-end; }
	.mSched > .title h2 span { margin-left:.8rem; }

	.mSched .date { width:100%; justify-content:space-between; margin-bottom:1.2rem; }
	.mSched .date span { font-size:2.8rem; }

	.mSched .sched-wrap { width:100%; max-width:none; margin:0 0 1.6rem; }
	.mSched .sched-wrap .sched-list { width:calc(100% - 10.6rem); }

	.mSched .btn-link { display: block; flex: unset; max-width:100%; width: 100%; }
}








/* 의원소개 */
.cmtMbr { width:100%; }
.cmtMbr > ul { display:flex; justify-content: space-between; }
.cmtMbr > ul > li { display:flex; flex-direction:column; border-radius:20px; outline:1px solid #ddd; overflow:hidden; margin-right:20px; height: 20rem; max-width: 11rem; flex: 0 1 11rem; transition: flex-grow 0.4s ease, max-width 0.4s ease; }
.cmtMbr > ul > li:last-child { margin-right:0; }

.cmtMbr > ul > li .pic { min-width: 6rem; flex: 0 1 10rem; height: auto;  max-height: 13rem; transition: all 0.4s ease; display: flex; justify-content: center; align-items: center; }
.cmtMbr > ul > li .pic img { width:100%; height:100%; object-fit: cover; transition: all 0.4s ease; }

.cmtMbr > ul > li .txt { display:flex; flex-direction:column; align-items:center; justify-content: center; padding:12px; }
.cmtMbr > ul > li .txt .txt-wrap { font-size:2rem; text-align:center; line-height:1.4; }
.cmtMbr > ul > li .txt .txt-wrap span { font-size:.8em; color:#6e6e6e; display:block; }


.cmtMbr > ul > li .txt .list { font-size:1.5rem; padding:12px 0; }
.cmtMbr > ul > li .txt .list li { position:relative; padding: 2px 0 2px 16px; line-height:1.4; }
.cmtMbr > ul > li .txt .list li:before { position:absolute; content:''; width:6px; height:2px; background:#CDD1D5; left:0; top:calc(50% - 1px); }


.cmtMbr > ul > li .txt .list,
.cmtMbr > ul > li .txt .btn-wrap { opacity: 0;
  visibility: hidden;
  max-height: 0;
  transition: opacity 0.3s ease 0.15s, max-height 0.3s ease 0.15s;
  overflow: hidden; }
.cmtMbr > ul > li .txt .btn-wrap a { width:3.2rem; height:3.2rem; border-radius:2rem; }
.cmtMbr > ul > li .txt .btn-wrap a.btn-home { background:#43B9B9 url(/images/council/main/ico_home_w.svg) no-repeat center; margin-right:.8rem; }
.cmtMbr > ul > li .txt .btn-wrap a.btn-profile { background:#E52242 url(/images/council/main/ico_profile_w.png) no-repeat center; }



.cmtMbr > ul > li.select { flex: 0 0 30rem; flex-grow:1; flex-direction: row; max-width: 30rem;}
.cmtMbr > ul > li.select .pic { flex: 1 1 auto; height: 100%; max-width: 15rem; max-height: 100%; }
.cmtMbr > ul > li.select .pic img { height: 100%; transition-delay: 0.2s;}
.cmtMbr > ul > li.select .txt { align-items: start; flex: 2 1 auto; }
.cmtMbr > ul > li.select .txt .txt-wrap { text-align:left; }

.cmtMbr > ul > li.select .txt .list,
.cmtMbr > ul > li.select .txt .btn-wrap { opacity: 1;
  visibility: visible; max-height: 200px; transition: all 0.4s ease; }





@media (max-width: 1023px) {
	.cmtMbr > ul { flex-wrap: wrap; justify-content: center; }
	.cmtMbr > ul > li { margin-bottom:10px; }
	.cmtMbr > ul > li:last-child { margin-right:20px; }
}

@media (max-width: 425px) {
	.cmtMbr > ul > li.select { max-width:100% !important; margin-right: 0; }
}















/* 회의록 + 위원회방송 Box - 공통 */
.cmtBox { display:flex; }
.cmtBox .mMnt h2, 
.cmtBox .mVod h2 { display: flex; justify-content: space-between; align-items:center; }

.cmtBox section > ul { position:relative; display:flex; flex-direction:column; }
.cmtBox section > ul li a { position:relative; padding:1.4rem 0; display: inline-flex; justify-content: space-between; align-items: center; width: 100%; transition:.4s; }

.cmtBox section > ul li a:before { position:absolute; bottom:-.4rem; content:''; width:100%; height:.2rem; background: linear-gradient(90deg,#fff,#DDDDDD,#fff); }
.cmtBox section > ul li a:after { position:absolute; left: 50%; transform: translateX(-50%); bottom:-.4rem; content:''; width:0; height:.2rem; background: linear-gradient(90deg,#fff,#8385AD,#fff); transition:.4s; }
/*.cmtBox section > ul li a:after { position:relative; display: inline-block; width:5rem; height:5rem; content:''; background:#ddd; } */

.cmtBox section > ul li a span { display: inline-block; width:calc(100% - 100px); font-size: 2rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  }
.cmtBox section > ul li a i { position:relative; right:0; display: inline-block; width:3.2rem; height:3.2rem; content:''; background:#666666 url(/images/memberHome/whithe_btn_next.png) no-repeat center; border-radius:50%; transition:.4s; }


.cmtBox section > ul li:hover a:after { width:100%; }
.cmtBox section > ul li:hover a { text-decoration:underline; }
.cmtBox section > ul li:hover a i { right:10px; background:#283593 url(/images/memberHome/whithe_btn_next.png) no-repeat center; }



/* 회의록 */
.mMnt { width:50%; border-right:1px solid #D9D9D9; padding-right:40px; }


/* 위원회방송 */
.mVod { width:50%; padding-left:40px; }



@media (max-width: 1023px) {
	.cmtBox { flex-wrap:wrap; }
	.mMnt { width:100%; border-right:none; padding-right:0px; margin-bottom:30px; }
	.mVod { width:100%; padding-left:0px; }
}








/* 포토의정 */
.mPhoto { position: relative; width:100%; overflow: hidden; }
.mPhoto h2 { display: flex; justify-content: center; align-items:center; }
.mPhoto h2 a { margin-left:20px; }




.mPhoto .photo-list { position:relative; }
.mPhoto .photo-list::before,
.mPhoto .photo-list::after { position:absolute; width:22rem; height:100%; content:''; background:url(/images/council/main/cont5_gradient.png) repeat-y center/cover; z-index:1; }

.mPhoto .photo-list::before { left:0; }
.mPhoto .photo-list::after { top:0; right:0; transform:rotate(180deg); }

.mPhoto .slick-slide { transition:.4s; padding-bottom:5.6rem; margin:0 20px; }
.mPhoto .slick-list { margin:0 -20px; }
.mPhoto .slick-active { padding-top:5.6rem; padding-bottom:0; }
.mPhoto .slick-current { padding-top:0; padding-bottom:5.6rem; }

.mPhoto .item { max-width:44rem; }
.mPhoto .item a { display:flex; flex-direction:column; width:100%; }

.mPhoto .item .img { width:100%; padding-top:56.25%; background:no-repeat center/cover; border-radius:2rem; margin-bottom:1.6rem; }

.mPhoto .title { font-size:2rem; text-overflow: ellipsis; white-space: nowrap; margin-bottom:.8rem; overflow: hidden; }
.mPhoto .date { font-size:1.6rem; opacity:.7; }

.mPhoto .bar { position:relative; bottom:0; left:50%; transform:translateX(-50%); display: flex; justify-content: center; margin-top: 2rem; }
.mPhoto .bar button { width:4rem; height:4rem; }





@media (max-width:1440px){
}

@media (max-width:1023px){

}

@media (max-width:768px){
	.mPhoto .photo-list::before,
	.mPhoto .photo-list::after { display:none; }

}
	/* 게시물이 하나일 경우 */
.photo-list.only-one { display: flex; justify-content: center; }
.photo-list.only-one .item { flex: 0 0 44rem; max-width: 44rem; width: 100%; }
.photo-list.only-one .item.none { text-align:center; }


/*
.photoList { margin: 0 auto; height: 420px; }

.photoList .item { padding: 0 4px; text-align: center; transition: transform 0.3s ease;  }

.photoList .item a { display: block; text-decoration: none; color: #000; max-width: 70%; margin: 0 auto; }
.photoList .item .img { width: 100%; height: 200px; background-size: cover; background-position: center; border-radius: 20px; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.6; transition: all 0.3s ease; }

.photoList .item .title { display: block; margin-top: 12px; font-weight: bold; font-size: 2.4rem; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photoList .item .date { display: block; margin-top: 16px; font-size: 1.6rem; color: #666; }
.photoList .item .date ul li { padding:4px 0; }

.photoList .slick-track { display:flex; align-items:center; }


.photoList .slick-center .item a { max-width:100%; }
.photoList .slick-center .img { opacity: 1; height: 280px;  }



.mPhoto .bar { text-align: center; margin-top: 20px; }
.mPhoto .btn { display: inline-flex; border: 1px solid #ccc; }

.mPhoto .btn.btn-prev .svg-icon.ico-angle { transform: rotate(180deg); }

.mPhoto .btn.btn-next .svg-icon.ico-angle { transform: rotate(360deg); }
*/











