@charset "utf-8";

/* 레이아웃 */
.main .containerarea { max-width:140rem; margin:0 auto; }

#cont1 { padding:0 0 4rem; }
#cont2 { padding:0 0 4rem; }
#cont3 { padding:0 0 6rem; }




/* 공통 요소 */
section h2 { font-size:2.3rem; color:#1983B5; }

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:16px; height:2px; background:#fff; transform: translate(-50%, -50%); }

section .more::before { width:2px; height:16px;  }

section .more:hover,
section .more:focus,
section .more:active { transform:rotate(90deg); }

.svg-icon { width:3rem; height:3rem; }
.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); }


.bar button:hover, 
.bar button:focus { background:#e0f2f1; border-color:#80cbc4;  }




/* 메인비주얼 */
.mVisible { position:relative; padding-top:2px; }
.mVisible:before { position:absolute; right:0; content:''; width:95%; height:230px; background:url(/images/memberHome/mbrVsBg.png) no-repeat bottom 14px right 0, linear-gradient(90deg, #1D6274 , #61A5C7); border-radius:30px 90px 30px 30px; z-index:-2; } 

.mVisible .mVInner { display:flex; justify-content:space-between; padding:40px 0; }

.mVisible .mVInner .pic { position:relative; width:740px; height:600px; }
.mVisible .mVInner .pic img { width:100%; height:100%; object-fit: cover; border-radius:30px 30px 200px;  }


.mVisible .mVInner .txt { width:calc(50% - 150px); display: flex; flex-direction: column; justify-content: space-between; padding:30px 0; margin-left:80px;}
.mVisible .mVInner .txt .titBox { font-size:2rem; color:#fff; font-weight: 300; line-height:1.5; }
.mVisible .mVInner .txt .titBox strong { display: block; margin:20px 0 60px; font-size: 2.6rem; font-weight: 600; }
.mVisible .mVInner .txt .titBox strong span { font-size:1.4em; margin-right:10px; }


.mVisible .mVInner .txt .cntBox { line-height:1.5; margin-bottom: 20px; padding-right:16px; }
.mVisible .mVInner .txt .cntBox ul { display:flex; flex-direction: column; height: 100%; }
.mVisible .mVInner .txt .cntBox ul li { width:100%; display: flex; align-items: flex-start;  border-bottom:.1rem solid #CDD1D5; padding: 8px 0;  }
.mVisible .mVInner .txt .cntBox ul li i { color:#888; flex: 0 0 100px; }
.mVisible .mVInner .txt .cntBox ul li span { flex: 1; min-width: 0; word-break: break-word; }

.mVisible .mVInner .txt .cntBox ul li.sns { align-items:center;  }
.mVisible .mVInner .txt .cntBox ul li.sns span { display:flex; align-items:center; }
.mVisible .mVInner .txt .cntBox ul li.sns span a { display:flex; align-items:center; justify-content:center; padding:4px; border-radius:50%; margin-left:6px; transition:0.4s; }
.mVisible .mVInner .txt .cntBox ul li.sns span a:hover { background:#ddd; }


.mVisible .mVInner .txt > ul { display:flex; }
.mVisible .mVInner .txt > ul li a { display:flex; align-items:center; padding:10px 20px; border:.1rem solid #CDD1D5; border-radius:50px; margin-right:20px; transition:.4s; }

.mVisible .mVInner .txt > ul li a i { position:relative; display: inline-block; width:18px; height:18px; margin-right:10px; transition:.4s; }
.mVisible .mVInner .txt > ul li:nth-child(1) a i { background:url(/images/memberHome/iconGrt_off.png) no-repeat; }
.mVisible .mVInner .txt > ul li:nth-child(2) a i { background:url(/images/memberHome/iconPrf_off.png) no-repeat; }

.mVisible .mVInner .txt > ul li a:hover { background:#DA3D52; color:#fff; }
.mVisible .mVInner .txt > ul li:nth-child(1) a:hover i { background:url(/images/memberHome/iconGrt_on.png) no-repeat; }
.mVisible .mVInner .txt > ul li:nth-child(2) a:hover i { background:url(/images/memberHome/iconPrf_on.png) no-repeat; }




@media (min-width: 1024px) and (max-width: 1279px) {
	.mVisible .mVInner .pic { max-width: 50%; }
	.mVisible .mVInner .txt { width: calc(50% - 0px); margin-left:60px; }
}


@media (max-width: 1023px) {
	.mVisible:before { display:none;}
	.mVisible .mVInner { padding:0; flex-direction: column;  }
	.mVisible .mVInner .pic { width:100%; height:auto; }
	.mVisible .mVInner .pic img { border-radius: 30px 30px 0 100px ;  }
	.mVisible .mVInner .pic:before { position:absolute; content:''; width:100%; height:330px; right:0; bottom:-170px; background:url(/images/memberHome/mbrVsBg.png) no-repeat bottom 14px right 0, linear-gradient(90deg, #1D6274 , #61A5C7); border-radius:0px 0px 90px 30px; z-index:-1;} 
	
	.mVisible .mVInner .txt { padding:0; width: 100%; margin-top:30px; margin-left:0; }
	.mVisible .mVInner .txt .titBox { text-align:center; }
	.mVisible .mVInner .txt .titBox strong { margin: 10px 0 40px; }
	
	.mVisible .mVInner .txt .cntBox { padding:0 16px; } 
	.mVisible .mVInner .txt .cntBox ul li,
	.mVisible .mVInner .txt > ul li a { font-size: 0.9em; }
}




/* 회의록 / 영상회의록 */
.mMinutes { position: relative; width:100%; display: flex; justify-content: space-between; align-items: flex-start; }

.mMinutes:before { position:absolute; content:''; width:calc(100% - 1600px); height:100%; right:0px; background:linear-gradient(#F4F9FE 50%, rgba(255,255,255,0.0) ); border-radius:140px 0 0 0; }
.mMinutes:after { content: ""; position: absolute; top: 0; right: calc(((100vw - 1.5rem) - 140rem) / -2); width: calc(((100vw - 1.5rem) - 140rem) / 2 + (100% - 860px)); height: 100%; background: linear-gradient(#F4F9FE 50%, rgba(255,255,255,0.0) ); border-radius:140px 0 0 0;  z-index: -1; }



@media (max-width: 1440px) {
	.mMinutes:after { width: calc(100% - 850px); right: 0; }
}

@media (max-width: 1279px) {
	.mMinutes { flex-direction: column; }
	.mMinutes:after { height: calc(290px + 50px + 60px); bottom: 0; top: auto; width: 70%; }
}

@media (max-width: 768px) {
	.mMinutes:after { width: 90%; height: calc(470px - 50px);  }
}





/* 회의록 / 영상회의록 - left */
.mntLift { width: 800px; }
.mntLift > ul > li { display:flex; padding:30px; }
.mntLift > ul > li:nth-child(1) { border-bottom:.1rem dashed #CDD1D5; }

.mntLift > ul > li .pic { position: relative; width:240px; height:216px; }
.mntLift > ul > li .pic a { position: relative; width:100%; height:100%; box-shadow: 20px 20px 16px 2px rgba(136, 136, 136, .2); border-radius:30px; border: .1rem solid #fff; overflow:hidden; transition:.4s; }
.mntLift > ul > li .pic a:before { content: ''; display: block; position: absolute; left:20px; bottom:20px; width:40px; height:44px; background:url(/images/common/vod_playBtn.png) no-repeat; z-index: 2;}
.mntLift > ul > li .pic img { width:100%; height:100%; object-fit: cover; transition:.4s;  }


.mntLift > ul > li .txt { display:flex; flex-direction: column; justify-content: space-between; padding-top:18px; width:calc( 100% - 240px ); margin-left: 20px; }

.mntLift > ul > li .txt .top { display:flex; align-items: center; justify-content: space-between;  }
.mntLift > ul > li .txt .top ul { display:flex; }

.mntLift > ul > li .txt .top ul li:nth-child(1) a:before { position:absolute; content:''; width:1px; height:16px; background:#1993B5; right:0; top:50%; transform:translateY(-50%); }
.mntLift > ul > li .txt .top ul li a { position: relative; color:#1993B5; display:flex; align-items: center; padding:6px 10px; border-radius:10px; font-size: .95em; transition:.4s; }
.mntLift > ul > li .txt .top ul li a i { display: inline-block; width:13px; height:16px; margin-left:10px;  }
.mntLift > ul > li .txt .top ul li a:hover { background:#EDF3F6; }

.mntLift > ul > li .txt .top ul li:nth-child(1) a i { background:url(/images/memberHome/MinutesMore.png) no-repeat center; }
.mntLift > ul > li .txt .top ul li:nth-child(2) a i { background:url(/images/memberHome/VodMore.png) no-repeat center; }


.mntLift > ul > li .txt .cntBox p { background:#EDF3F6; border-radius:10px; padding:16px 20px; transition:.4s; margin-bottom: 40px; }
.mntLift > ul > li .txt .cntBox p span { background:#1993B5; color:#fff; padding:4px; border-radius:6px; margin-right:6px; }

.mntLift > ul > li .txt > p { position: relative; color:#888888; padding:0px 40px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.mntLift > ul > li .txt > p:before { position:absolute; content:''; width:4px; height:4px; background:#CDD1D5; left:20px; top:calc(50% - 2px); border-radius:30px; }
 
.mntLift > ul > li .txt > ul { display:flex;  }
.mntLift > ul > li .txt > ul li a { display:flex;  align-items: center; padding:10px; border-radius:6px; background:#EB6D6F; color:#fff;  transition:.4s; margin-right:10px;}
.mntLift > ul > li .txt > ul li a i { display: inline-block; width:13px; height:16px; margin-left:10px; }

.mntLift > ul > li .txt > ul li a:hover { background:#DA3D52; }


.mntLift > ul > li .txt > ul li:nth-child(1) a i { background:url(/images/memberHome/MinutesIcon.png) no-repeat center; }
.mntLift > ul > li .txt > ul li:nth-child(2) a i { background:url(/images/memberHome/VodIcon.png) no-repeat center; }



/* 호버효과 */
/*.mntLift > ul > li:hover .pic img,
.mntLift > ul > li .txt .cntBox:hover ~ .pic img {
  transform: scale(1.1);
}

.mntLift > ul > li:hover .txt .cntBox::after,
.mntLift > ul > li .txt .cntBox:hover::after {
  width: 100%;
}*/



@media (max-width: 1279px) {
	.mntLift { width:100%; }
	.mntLift > ul > li { padding:30px 10px; }
}

@media (max-width: 768px) {
	.mntLift > ul > li { flex-direction: column; }
	.mntLift > ul > li .pic { width:100%; height: auto; }
	
	.mntLift > ul > li .txt { width:100%; height: 220px; }
}






/* 회의록 / 영상회의록 - right */
.mntRight { position: sticky; top: 100px; align-self: flex-start; width:calc(100% - 860px);  margin-left:60px; }
.mntRight ul { position:relative; display:flex; justify-content:end; word-break: keep-all; align-items: flex-start; flex-wrap: wrap; }
.mntRight ul li { position:relative; width:40%; border-radius:30px 30px 60px 30px; padding:30px 20px; box-shadow: 20px 20px 16px 2px rgba(136, 136, 136, .2); transition:.4s; margin-left:40px; }
.mntRight ul li a { color:#fff; }

.mntRight ul li:nth-child(1),
.mntRight ul li:nth-child(4) { background:#EB6D6F; }

.mntRight ul li:nth-child(2),
.mntRight ul li:nth-child(3) { background:#0D7499;}

.mntRight ul li:nth-child(1) { margin-top:110px; }
.mntRight ul li:nth-child(2) { margin-top:60px; }
.mntRight ul li:nth-child(3) { margin-top:60px; }
.mntRight ul li:nth-child(4) { margin-top:0; }



.mntRight ul li .txtBox { display:flex; flex-direction: column; justify-content: space-between; width:100%;  margin-bottom:10px; }
.mntRight ul li .txtBox b { font-size:2.2rem; }
.mntRight ul li .txtBox p { height: 70px; padding:20px 0px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mntRight ul li .txtBox span { margin-top:20px; }

.mntRight ul li .moreBox { display: inline-flex; align-items:center; padding:0 10px; border:1px solid #fff; border-radius:50px; }
.mntRight ul li .moreBox:hover .more { transform:rotate(90deg); }



.mntRight ul li:nth-child(1):hover,
.mntRight ul li:nth-child(4):hover { background:#DA3D52; }
.mntRight ul li:nth-child(2):hover,
.mntRight ul li:nth-child(3):hover { background:#006589; }



@media (max-width: 1279px) {
	.mntRight { width:100%; margin-left:0; margin-top: 120px;  }
	
	.mntRight ul li:nth-child(1) { top: auto; bottom:0px; }
	.mntRight ul li:nth-child(2) { top: auto; bottom:50px; }
}

@media (max-width: 768px) {
	.mntRight { margin-top: 0px;  }
	.mntRight ul { flex-direction: column-reverse; align-items: end; }
	
	.mntRight ul li { width: 60%; margin-top: 30px !important; }
	.mntRight ul li:nth-child(1) { right:20%; }
	.mntRight ul li:nth-child(2) { bottom:0px; margin-top: 0px; }
	.mntRight ul li:nth-child(3) { left:-20%; background:#EB6D6F; } 
	.mntRight ul li:nth-child(4) { background:#0D7499; }
}






/* 의정활동사진 */
.mbPhoto { position:relative; overflow: hidden; }
.mbPhoto h2 { display: flex; justify-content: center; align-items:center; font-size:4rem; margin-bottom: 4rem;}
.mbPhoto h2 a { margin-left:20px; }
.mbPhoto h2 .btn-more .more:before,
.mbPhoto h2 .btn-more .more:after { background:#888; }
.mbPhoto h2 .btn-more .more:before { height:24px; }
.mbPhoto h2 .btn-more .more:after { width:24px; }


.mbPhoto .photo-list { position:relative; }
.mbPhoto .photo-list::before,
.mbPhoto .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; }

.mbPhoto .photo-list::before { left:0; }
.mbPhoto .photo-list::after { top:0; right:0; transform:rotate(180deg); }

.mbPhoto .slick-slide { transition:.4s; padding-bottom:5.6rem; margin:0 20px; }
.mbPhoto .slick-list { margin:0 -20px; }
.mbPhoto .slick-active { padding-top:5.6rem; padding-bottom:0; }
.mbPhoto .slick-current { padding-top:0; padding-bottom:5.6rem; }

/*.mbPhoto .item { max-width:44rem; }*/
.mbPhoto .item a { display:flex; flex-direction:column; width:100%; }

.mbPhoto .item .img { width:100%; padding-top:56.25%; background:no-repeat center/cover; border-radius:2rem; margin-bottom:1.6rem; }

.mbPhoto .title { font-size:2rem; text-overflow: ellipsis; white-space: nowrap; margin-bottom:.8rem; overflow: hidden; }
.mbPhoto .date { font-size:1.6rem; opacity:.7; }

.mbPhoto .bar { position:relative; text-align: center; margin-top:2rem; }

.mbPhoto .bar .more:before,
.mbPhoto .bar .more:after { background:#8f9dab; }


	/* 게시물이 하나일 경우 */
.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; }


@media (max-width: 1024px) {
	.mbPhoto { padding:0 2.4rem }
	.mbPhoto .photo-list::before, 
	.mbPhoto .photo-list::after { display:none; }
}