@charset "utf-8";

/* 비주얼 영역 */
#committee_visual {position: relative; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center; }
.m_bg_pgac {background:url('/images/committee/main/main_visual_pgac.jpg');} /* 기획총무위원회 */
.m_bg_psc {background:url('/images/committee/main/main_visual_psc.jpg');} /* 운영위원회 */
.m_bg_icc {background:url('/images/committee/main/main_visual_icc.jpg');} /* 산업도시위원회 */
.m_bg_scbs {background:url('/images/committee/main/main_visual_scbs.jpg');} /* 예산결산특별위원회 */
.m_bg_sce {background:url('/images/committee/main/main_visual_sce.jpg');} /* 윤리특별위원회 */
.m_bg_marc {background:url('/images/committee/main/main_visual_marc.jpg');} /* 군공항특별위원회 */

/* 9대 추가 */
.m_bg_psc9 {background:url('/images/committee/main/main_visual_psc9.jpg');} /* 운영위원회 */
.m_bg_aac9 {background:url('/images/committee/main/main_visual_aac9.jpg');} /* 행정자치위원회 */
.m_bg_ewc9 {background:url('/images/committee/main/main_visual_ewc9.jpg');} /* 경제복지위원회 */
.m_bg_csc9 {background:url('/images/committee/main/main_visual_csc9.jpg');} /* 시민안전위원회 */
.m_bg_scbs9 {background:url('/images/committee/main/main_visual_scbs9.jpg');} /* 예산결산특별위원회 */
.m_bg_sce9 {background:url('/images/committee/main/main_visual_sce9.jpg');} /* 윤리특별위원회 */
.m_bg_scccr9 {background:url('/images/committee/main/main_visual_scccr9.jpg');} /* 기후위기대응특별위원회 */
.m_bg_marndc9 {background:url('/images/committee/main/main_visual_marndc9.jpg');} /* 군공항특별위원회 */

/* 서브비주얼 */
.sub_visual_txt {display:block; text-align:center; padding:10% 20px 15% 20px}
.sub_visual_txt > * {  text-shadow: 3px 3px 3px rgba(0,0,0,0.8); display:block; color:#fff; font-weight: 900;}
.sub_visual_txt i { font-size: 150%; }
.sub_visual_txt strong {font-size: 250%;}
/*
.sub_visual_txt strong  span{  color: darkcyan;}
.sub_visual_txt strong  em{   color: darkblue;}
*/


.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  background:none !important;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.wrap_container {position: relative;}

.intro_area > div {position: relative; display:flex; margin-top:-70px; }
.intro_area > div:before {content:''; position: absolute; left:0; top:0; bottom:0; right:-10000px; border-radius: 40px; box-shadow: 5px 5px 5px rgba(0,0,0, 0.1);} 
.intro_box, .congressperson_list { position: relative; padding:40px 0px}
.intro_box{width:480px; background:#f4f4f4;border-radius: 30px 0 0 30px;}
.intro_box .intro {position: relative;  padding:0px 50px}
.intro_box .intro h3{margin-left:-60px; background:#9f1851; display:inline-block; padding:10px 50px; color:#fff; font-weight: 700; border-radius: 10px; font-size: 130%;}
.intro_box .intro p{display:block; padding:7% 0%; font-size:100%;}
.intro_box .intro a{display: inline-block; background:#787f8b; border-radius: 30px; color:#fff; line-height: 40px; padding:0 30px; font-size: 16px;}

.congressperson_list {width:calc(100% - 480px); color:#fff}
.congressperson_list h3 {text-align: center; font-weight: 700; font-size: 150%; display: block; padding-bottom:30px;}
.congressperson_list .congressperson {  margin:0 50px 0 150px}
.congressperson_list .congressperson .swiper-slide a {width:100%; display:block;}
.congressperson_list .congressperson .swiper-slide a .img{background:#9e9fa1; border-radius:5px; overflow: hidden;}
.congressperson_list .congressperson .swiper-slide a img{width:100%; }
.congressperson_list .congressperson .swiper-slide a span{display:block;}
.congressperson_list .congressperson .swiper-button-prev, .congressperson_list .congressperson .swiper-button-next{ position: absolute; width:40px; height:40px;  background:none; overflow: hidden; border-radius: 50%; top:55%; right:auto; left:auto; display:block;  text-indent: -999999; font-size: 0; cursor: pointer; }
.congressperson_list .congressperson .swiper-button-prev:after, .congressperson_list .congressperson .swiper-button-next:after { position: absolute; left:0; right: 0; top: 0;  line-height:40px; color:#fff; font-family: 'FontAwesomeS'; text-align:center;  display:block;   font-size:30px;}
.congressperson_list .congressperson .swiper-button-prev:after {content:'\f053';}
.congressperson_list .congressperson .swiper-button-next:after {content:'\f054';}
.congressperson_list .congressperson .swiper-button-prev {left:80px;}
.congressperson_list .congressperson .swiper-button-next {right:-20px;}

.m_banner {position: relative;  clear: both;background:url('/images/committee/main/main_bar_bg.jpg'); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center; color:#fff; padding:50px 0; }
.m_banner .m_tit {float: left; width:70%}
.m_banner .m_tit i{float: left; font-size: 500%; margin-right:40px}
.m_banner .m_tit h3{font-size: 150%; font-weight: 700; overflow: hidden; padding-top:10px}
.m_banner .m_tit p{overflow: hidden; display: block;}
.m_banner a {float: right; position: relative; display: inline-block; background:rgba(0,0,0,0.8); line-height: 50px; height: 50px; padding:0 30px; margin-top:20px; }
.m_banner a i{margin-left:50px}
.m_banner::after{content:''; display: block; clear: both;;}

.m_pad {padding-top:4%; padding-bottom: 4%;}
.m_pad_top {padding-top:140px}

.m_title{position: relative;font-size: 170%; font-weight: 700; padding-bottom:3%}
.m_title strong{font-weight: 700;}
.m_title p{display: inline-block; font-weight: 300; font-size: 70%; color:#777; padding-left: 30px;}


/* 갤러리 */
.gallery .cell { text-align: left; overflow: hidden; }
.gallery .cell img {width:100%}
.gallery .cell a {overflow: hidden; display: block;}
.gallery .cell p {  display: block;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size:90%;}
.gallery .cell p span { display: block;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 110%; font-weight: 400;  line-height:40px; padding-top:10px}
.gallery .cell p i { font-family: 'Roboto'; color:#777; font-weight: 400;  line-height: 20px; }

.more { position: absolute; right:5px; top:10px; font-size: 0;width:40px; height:40px; border:1px solid #ddd; border-radius: 50%; line-height:40px;}
.more:after {content:'\f067'; position: absolute; left:0; right: 0; top: 0px;  font-size:14px; color:#444; font-family: 'FontAwesomeS';text-align:center; }


.bbs .view li {position: relative; width: 100%;}
.bbs .view li.title::before{content:''; position:absolute; left:0; top:16px; border-radius: 50%; width:3px; height:3px; background-color: #999;}
.bbs .view li.title > a{display:block; padding-left:15px; width:calc(100% - 120px);width:-webkit-calc(100% - 120px); line-height: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bbs .view li.title > .date{ position: absolute; right:10px; z-index: 3; top:7px; font-family: 'Roboto'; color:#777}



@media only screen and (max-width:1330px){

}
@media only screen and (max-width:1100px){
	.sub_visual_txt { padding:100px 20px 150px 20px; font-size:80%}
	

}
@media only screen and (max-width:991px){
  .m_pad {padding-top:50px; padding-bottom:50px;}
  .bbs .col_6 {flex: 0 0 100%; max-width: 100%; }
  .bbs .col_6:last-child {margin-top:50px}

  .intro_area > div {position: relative; display:block;}
  .intro_box, .congressperson_list {  padding:20px 0px}
  
  .intro_box{width:100%; border-radius: 15px; box-shadow: 5px 5px 5px rgba(0,0,0, 0.1);}
  .intro_box .intro { padding:0px 30px; }
  .intro_area > div:before {left:5px; top:20px; bottom:0; right:-10000px; border-radius:15px; } 
	.intro_box .intro p{padding:15px 0%;}
	.intro_box .intro h3{margin-left:-40px;}

  .congressperson_list {width:100%;}
  .congressperson_list .congressperson {  margin:0 50px 0 80px}
  .congressperson_list .congressperson .swiper-button-prev {left:30px;}
  .congressperson_list .congressperson .swiper-button-next {right:0px;}

}

@media only screen and (max-width:880px){

  .gallery .col_4 { flex: 0 0 100%;  max-width: 100%; margin-bottom:20px}
  .more {right:5px; top:5px; width:30px; height:30px; border:1px solid #ddd; border-radius: 50%; line-height:30px;}

  .m_banner {text-align: center;}
  .m_banner .m_tit { width:100%}
  .m_banner .m_tit i{font-size: 300%; float:none; margin:0}
  .m_banner .m_tit h3{ padding:10px 0 0px 0}
  .m_banner a {float: none; display: inline-block; margin:30px auto 0 auto;}
}

@media only screen and (max-width:650px){
	.bbs .view li.title::before{top:11px;}
	.bbs .view li.title > a{ line-height: 28px;}
	.bbs .view li.title > .date{top:4px;}

	.sub_visual_txt { font-size:65%}

}

@media only screen and (max-width:500px){


}