@charset "utf-8";

/* 비주얼 영역 */
.visual_bg {position: relative; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position: center;  background-repeat: no-repeat;  height: 820px; }
.visual_bg.bg01 { background-image:url('/images/main/main/visual_001.jpg'); }
.visual_bg.bg02 { background-image:url('/images/main/main/visual_002.jpg'); }
.visual_bg.bg03 { background-image:url('/images/main/main/visual_003.jpg'); }
.visual_bg.bg04 { background-image:url('/images/main/main/visual_004.jpg'); }

.visual_bg .visual_text { position: absolute; color: #fff; top: 38%; text-shadow: 2px 2px 2px rgba(0,0,0,0.8); left: 50%; padding-left: 70px;}
.visual_bg .visual_text::before {content: ''; position: absolute; left:0; top:-35px; bottom: -40px; width:80px; border-left: 10px solid; border-bottom: 10px solid; border-top: 10px solid;}
.visual_bg .visual_text strong{ font-size: 280%; font-weight: 700; display: block;}
.visual_bg .visual_text span{ font-weight: 500;  display: block; font-size:130%;}

.slick-slide .visual_bg .visual_text {opacity: 0;}
.slick-slide.slick-active .visual_bg .visual_text { animation-name:fadeInUp2; -webkit-animation-delay:0.4s; animation-delay:0.4s;} 
@keyframes fadeInUp2 { from{opacity: 0;transform: translate3d(0, 20%, 0);} to{opacity: 1;transform: none;}}

.main_visual_slider .nav {top:40%; left:0; right:0}
.main_visual_slider .nav .prev, .main_visual_slider .nav .next{  position:absolute; width:50px; height:50px;}
.main_visual_slider .nav button {  background: rgba(255,255,255,0.7);}
.main_visual_slider .nav button:hover,
.main_visual_slider .nav button:focus{background:rgba(255,255,255,1); }
.main_visual_slider .prev:before, .main_visual_slider .next:before {  font-size:30px; color:rgba(0,0,0,0.7); }
.main_visual_slider .nav button:hover::before,
.main_visual_slider .nav button:focus::before{color: #000;}


/* 공통타이틀 */
.title_area {position: relative;}
.title_area h3 {font-size: 130%; color:#222; font-weight: 700; display: block; line-height: 40px; ; margin-bottom: 25px; position: relative;}
.title_area h3 span {}

/* 배경색 */
.main_bg{background-color: #f1f4f9;}

/* 상하여백 */
.m_pad {padding-top:60px; padding-bottom: 60px;}
.m_pad2 {padding-top:3%; padding-bottom: 3%;}
.m_notict_bottom {padding-bottom:4% !important}

/* 의사일정 */
.schedule_box {background-color: #fff; box-shadow: 5px 5px 5px rgba(0,0,0,0.08); margin-top: -80px; position: relative; border-radius: 7px; display: flex; overflow: hidden; padding:0}
.schedule_box .schedule_title {width:300px; position: relative; color:#fff; padding:20px 30px 30px 60px;}
.schedule_box .schedule_title::before{content: ''; position: absolute; left:-100px; right:0; bottom:0; top:0; transform: skewX(-15deg); }
.schedule_box .schedule_title > * {position: relative;}
.schedule_box .schedule_title H3 { color:#fff; line-height: 33px;}
.schedule_box .schedule_title H3 strong{ display: block; font-size: 130%; color:#ffc332}
.schedule_box .schedule_title a.schedule_more{border:1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); color:#fff;padding:4px 15px; font-weight: 300; font-size: 80%;  border-radius: 30px; transition: all 0.3s;  white-space: nowrap; }
.schedule_box .schedule_title a.schedule_more:hover {border:1px solid rgba(255,255,255,0.5);}

.schedule_box .schedule {width: calc(100% - 300px);padding:20px 20px; margin:0}
.schedule .week_area{ display: block; position: relative; }
.schedule .week_area .nav {top:30%}
.schedule .week_area .nav .prev, .schedule .week_area .nav .next{  position:absolute; width:50px; height:50px; background-color: #eef0f5;}
.schedule .week_area .nav button::before,
.schedule .week_area .nav button::before{color: #393939; font-size: 130%;}

.schedule .day{padding-bottom: 15px;}
.schedule .day > .date{font-size: 150%; font-family: 'Roboto';  text-align: center; font-weight: 700; display: block;}
.schedule .week_area .week{display:flex; margin: 0 70px}
.schedule .week_area .week li{flex: 0 0 14.2857142857%;    max-width:14.2857142857%; color:#444}
.schedule .week_area .week li span, .schedule .week_area .week li a{display:block; position: relative; text-align: center; padding:5px 0; font-weight: 400; margin: 0 3px;}
.schedule .week_area .week li a i{ position: relative;}
.schedule .week_area .week li:first-child{color:#cf0000}
.schedule .week_area .week li:last-child{color:#1933cf}
.schedule .week_area .week li .today:before{content:''; position:absolute; left:50%; margin-left:-17px; top:2px; width:34px; height:34px; border-radius: 50%;}
.schedule .week_area .week li .today i{color:#fff}
.schedule .week_area .week .being {background-color:#97ffb9; border-radius: 5px;}

.schedule .content{background: #f1f4f9; font-size: 110%;  display:block; overflow:hidden; border-radius: 10px; }
.schedule .content #calendar{display:flex; overflow-y: auto; overflow-x:hidden; height:110px;
  margin:5px 0px 8px 10px; flex-wrap: wrap; align-items: center;  width: 100%; }
.schedule .content #calendar > p {text-align: center; display: block; width:100%;} 
.schedule .content a{display:block; overflow:hidden; line-height: 40px;}
.schedule .content a > span{font-weight: 500; float:left; width:120px; text-align: right; padding-right: 10px;}
.schedule .content a > p{color:#1933cf;  float:left; width:calc(100% - 120px); overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }


/* 최근게시물 탭박스 영역 */
.bbs_tab { position: relative; }
.bbs_tab li { float: left; }
.bbs_tab li .tab{ line-height:50px; color:#777; display:inline-block; font-size:130%; margin-right:30px; font-weight:700; position: relative; padding:0 5px}
.bbs_tab li.active .tab{ color:#000; }
.bbs_tab li.active .tab::before {content: ''; position: absolute; bottom:0; left:0; right:0; height: 2px; background: rgba(0,0,0,0.3);}
.bbs_tab li img{width:100%;}
.bbs_tab li .view { position: absolute; top: 75px; left:0; right:0; display:none; }
.bbs_tab li.active .view { display:block}
.bbs_tab li .view ul { display:block;}
.bbs_tab li .view .big {margin-bottom:10px; border:1px solid rgba(0,0,0,0.3); padding:10px; border-radius:5px;  box-shadow: 2px 2px 3px rgba(0,0,0,0.1); background:#fff}
.bbs_tab li .view .big a{display:block; overflow:hidden;}
.bbs_tab li .view .big .file {display:none}
.bbs_tab li .view .big span{float: left; width:120px; padding:13px 20px; text-align: center; font-family: 'Roboto'; font-weight: 500; color:#222;  margin:0 20px 0px 0px; border-radius: 8px; background-color:#f1f4f9}
.bbs_tab li .view .big span i{display: block;  font-weight: 900; font-size: 200%; }
.bbs_tab li .view .big div {overflow: hidden; height: 100px;}
.bbs_tab li .view .big div strong{display:block; font-weight: 600; line-height:45px;font-size: 130%;white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color:rgba(0,0,0,1);}
.bbs_tab li .view .big div p{font-size: 90%; color:rgba(0,0,0,0.6); line-height: 20px; text-overflow: ellipsis; overflow: hidden; display:block; height: 43px; margin-top:5px}
.bbs_tab li .view li {position: relative; width: 100%;}
.bbs_tab li .view li.title::before{content:''; position:absolute; left:0; top:16px; border-radius: 50%; width:3px; height:3px; background-color: #999;}
.bbs_tab li .view li.title > a{display:block; padding-left:15px; width:calc(100% - 100px);width:-webkit-calc(100% - 100px); line-height: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bbs_tab li .view li.title > .date{ position: absolute; right:0; z-index: 3; top:7px; font-family: 'Roboto'; color:#777}

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


/* 의장 인사말 */
.chairman {background-color: #fff; background-image: url(/images/main/main/chairman.png); background-repeat: no-repeat; background-position: right bottom; background-size: auto 95%; height: 380px; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0,0,0,0.1); border:2px solid #b6c5de}
.chairman .txt_box {width:70%; padding-top:30px; padding-left: 50px;}
.chairman .txt_box p + a {margin-top: 30px;}
.chairman .txt_box a + a {margin-top:5px}
.chairman .txt_box a {width:220px}
.chairman .txt_box > strong {font-size: 170%; font-family: 'WandoCleanSea'; font-weight: 700;  letter-spacing: -0.05em;}
.chairman .txt_box > strong span { font-family: 'WandoCleanSea'; }
.chairman .txt_box > p {font-size: 120%; display: block; margin-top: 20px; letter-spacing: -0.05em; line-height: 30px;}
.chairman .txt_box > p strong {font-size: 120%;  font-weight: 700; }


/* 의원소개 */
.lawmaker_slider {margin: 0 100px 0 50px; }
.lawmaker_box {display: flex !important; flex-wrap: wrap; padding: 5px;}
.lawmaker_box > .photo{width:35%; }
.lawmaker_box > .photo img {background-color: #fff; box-shadow: 3px 3px 3px rgba(0,0,0,0.1);border-radius: 10px; }
.lawmaker_box > .txt{width:65%; padding-left: 30px; }
.lawmaker_box > .txt dt{font-size: 140%; font-weight: 700; display: block; margin:10px 0 10px 0; color:#000}
.lawmaker_box > .txt dt span{font-size: 80%; font-weight: 400;}
.lawmaker_box > .txt dd {font-size: 90%;}
.lawmaker_box > .txt a {margin-top:15px}
.lawmaker .nav { left:-70px; right:-70px; top:40%}
.lawmaker .nav .prev, .lawmaker .nav .next{  position:absolute; width:40px; height:40px;}
.lawmaker .nav button::before,
.lawmaker .nav button::before{ font-size: 130%;}


/* 의회 바로가기 아이콘 */
.main_goto {position: relative; background-color: #f0e4dc; padding-top:50px;}
.main_goto .title_area {position: absolute; left:0; top:-80px; z-index: 9}
.main_goto .title_area::before {content:''; position: absolute; top:0; bottom:0; right:0; left:-500px; background-image: url(/images/main/main/sea_mustard.png); background-repeat:no-repeat; background-position:98% 100% ;border-radius: 0 10px 10px 0;}
.main_goto .title_area::after {content:''; position: absolute; top:-40px; right:-50px; width:67px; height: 53px; background-image: url(/images/main/main/wave1.png);}
.main_goto .title_area h3 {font-size: 150%;color:#ffc332; padding-right: 100px; margin-bottom: 0; line-height: 78px; }
.main_goto .title_area h3 span{ font-size: 80%; color:#fff !important; }
.main_goto ul {display:flex; justify-content: space-around; margin:0 5%}
.main_goto ul li { padding:25px 10px ;}
.main_goto ul li a {display: block; text-align: center; letter-spacing:-0.07em}
.main_goto ul li a span{display: block; font-weight: 500; padding:5px 0; font-size: 100%; transition: all 0.3s; height: 40px;}
.main_goto ul li a img{background-color: #fff; border-radius: 50%; transition: all 0.3s; margin:0 10px}
.main_goto ul li a:hover img{box-shadow: 0px 0px 10px rgba(151, 59, 2, 0.5);}
.main_goto ul li a:hover span{color:#000; font-size: 110%;}

/* 배너모음 */
.banner_slider .nav {bottom:auto; top:-97%; left:120px; right:auto}
.banner_slider a{border: 1px solid #ddd; display: inline-block; margin: 0 5px;}
.banner_slider > div {text-align: center;}
.banner_slider .slider {margin:0 -5px}

/* 갤러리 */
.gallery_bg {-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat: no-repeat;  background-image:url('/images/main/main/photo_bg.jpg'); padding: 4% 0 5% 0; overflow: hidden;}
.gallery_bg .title_area {text-align: center; padding:4% 0; position: relative;}
.gallery_bg .title_area::before {content: ''; position: absolute; left: 50%; top:-200px; bottom:90%; width: 2px; background-color: rgba(0,0,0,0.1);}
.gallery_bg .title_area::after {content: ''; position: absolute; left: 50%; bottom:90%; width: 8px; height: 8px; border-radius: 50%; margin-left: -3px;}
.gallery_bg .title_area h3{font-size: 200%; font-family: 'scdream'; color:#222}
.gallery_bg .title_area h3 span{ font-family: 'scdream'; }
.gallery_bg .more{top:30%;}
/*
.m_gallery { position: relative;}
.m_gallery .cell {display: block; background-color: #fff; margin:5px 0; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; transition: all 0.5s;}
.m_gallery .cell:hover { box-shadow: 5px 5px 5px rgba(0,0,0,0.3); }
.m_gallery .cell img{width: 100%; border-radius:0 0 10px 10px;}
.m_gallery .cell strong {display: block;text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 100%; color: #555; font-weight: 500; padding: 20px 10px; transition: all 0.5s;}
.m_gallery .cell:hover strong {color:#000}
.m_gallery .cell span {font-family: 'Roboto';display: block; text-align: center; padding-bottom: 30px; color:#777}
*/

.m_gallery .slider {margin: 0px}
.m_gallery .cell {display: block; margin:5px 0px; padding:0 20px}
.m_gallery .cell a{display: block; background-color: #fff; margin:5px 0; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; transition: all 0.5s;}
.m_gallery .cell a:hover { box-shadow: 5px 5px 5px rgba(0,0,0,0.3); }
.m_gallery .cell img{width: 100%; border-radius: 10px; transition: all 0.3s;}
.m_gallery .cell:hover img{ box-shadow: 3px 3px 6px rgba(0,0,0,0.6); }
.m_gallery .cell strong {display: block;text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 100%; color: #555; font-weight: 500; padding: 20px 10px; transition: all 0.5s;}
.m_gallery .cell:hover strong {color:#000}
.m_gallery .cell span {font-family: 'Roboto';display: block; text-align: center; padding-bottom: 30px; color:#777}
.m_gallery .nav { left:0px; right:0px; top:35%}
.m_gallery .nav .prev, .m_gallery .nav .next{  position:absolute; width:40px; height:40px;}
.m_gallery .nav .prev {left:0}
.m_gallery .nav .next {right:0}
.m_gallery .nav button::before,
.m_gallery .nav button::before{ font-size: 130%;}
/* 회의록 */
.council_area {position: relative; padding-left: 60px;}
.council_area .title_area h3 {color: #ffc332}
.council_area::before {content: ''; position: absolute; top:0; bottom:0; left:0; right:-1000px; /* background-color: #304e7f;*/ background-image: url(/images/main/main/sea_mustard.png);
    background-repeat: no-repeat;
    background-position: 10% 100%;
    background-size:auto auto;
    }
.council {position: relative;}
.council_search {display: block; background:#fff;  border-radius:25px; overflow: hidden; }
.council_search .searchform{  display: block; padding:0 20px;}
.council_search .searchform input, .council_search .searchform button{height:60px; line-height: 60px; padding:0 10px; float: left;}
.council_search .searchform input {width: calc(100% - 40px); background-color: transparent;}
.council_search .searchform input:-ms-input-placeholder { font-size:20px !important;  } /* ie */
.council_search .searchform button{ width: 40px; text-align: center; float:right; font-size: 120%;}

.council ul {display: flex; padding:10px 0; color:#444; flex-wrap: wrap; margin-top:10px}
.council ul li { width:50%; padding:5px 0}
.council ul li a{display: block; white-space: nowrap; line-height: 35px; font-size: 95%; margin:2px 0; color: #fff;}
.council ul li a img{ margin-right:10px; border-radius: 50%; background-color: #fff;}



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

.visual_bg {  height: 570px; }


  }

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

  .main_top_box {width:100%; margin: 0px; left:auto; padding: 0 !important; position: relative; }
  .main_goto ul { margin:0}
  .main_goto .title_area { padding-left: 15px;}

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

/* 의사일정 */
.schedule_box {flex-wrap: wrap; margin:-50px 15px 0 15px}
.schedule_box .schedule_title {width:100%;padding:20px; display: flex; justify-content: space-between;}
.schedule_box .schedule {width: 100%;}
.schedule_box .schedule_title::before {right:-100px}
.schedule_box .schedule_title H3 {margin:0}
.schedule_box .schedule_title H3 strong{ display: inline-block;}
.schedule_box .schedule_title a.schedule_more{padding:0px 8px; font-size: 80%;  border-radius: 30px;  margin:0; line-height: 35px;}

}
@media only screen and (max-width:1200px){
.lawmaker_slider {margin: 0 45px; }
.council_area {padding-left: 15px;}
.chairman {margin-bottom: 60px;}

.visual_bg {height: 400px;}
.visual_bg .visual_text { padding-left: 100px; top:38%}
.visual_bg .visual_text::before {content: ''; position: absolute; left:40px; top:-25px; bottom: -30px; width:50px; }
.visual_bg .visual_text strong{ font-size: 200%;}
.visual_bg .visual_text span{  font-size:100%;}

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

  .m_pad {padding-top:30px; padding-bottom:30px;}
  .m_pad_top {padding-top:130px}

  	.schedule .content {margin-top:20px}
  	.schedule .content #calendar{height:60px;}

	.main_goto ul { flex-wrap:wrap; padding-top:15px; justify-content:center}
	.main_goto ul li{width:25%; padding:5px}
	.main_goto ul li a img{margin:0px}

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


  .main_visual_slider .nav .prev, .main_visual_slider .nav .next{ width: 30px;  height: 30px;}
  .main_visual_slider .prev:before, .main_visual_slider .next:before { font-size:18px; line-height: 30px;}

  .main_goto .title_area {top:-60px; }
  .main_goto .title_area h3{font-size:120%; line-height:60px; padding-right: 70px;}
  .main_goto ul.row {padding-top:30px;}
  .main_goto ul li a {padding:3% 0; font-size: 90%;}
}
  
@media only screen and (max-width:650px){
  .visual_bg {height: 350px;}
  .visual_bg .visual_text { padding-left: 70px; padding-right:50px; top:40%}
  .visual_bg .visual_text::before {content: ''; position: absolute; left:40px; top:-25px; bottom: -20px; width:35px; border-left: 6px solid; border-bottom: 6px solid; border-top: 6px solid;}
  .visual_bg .visual_text strong{ font-size: 150%;}
  .visual_bg .visual_text span{  font-size:80%;}


  .bbs_tab li .tab{ margin:0px; border-radius:0; font-size:98%; line-height:35px; display:block; text-align: center;}
  .bbs_tab:before {top:35px;}
  .bbs_tab li .view {top: 50px; font-size: 90%; }
  .bbs_tab li .view .big {margin-bottom: 0;}
  .bbs_tab li .view .big span{width:70px; padding:10px 5px 15px 5px; margin: 0 10px 5px 0px;}
  .bbs_tab li .view .big span i {font-size: 170%;}
  .bbs_tab li .view .big div { height: 70px;}
  .bbs_tab li .view .big div p{ margin-top:0px; font-size: 85%;}
  .bbs_tab li .view .big div strong {line-height: 35px;}
  .bbs_tab li .view li.title::before{top:14px;}
  .bbs_tab li .view li.title > a{padding-left:12px; line-height: 30px;}
  .bbs_tab li .view li.title > .date{ top:6px;}
  .bbs_tab li .view .big div strong { font-size: 110%;}
  .more { right:-5px; top:-48px; width:30px; height:30px; line-height:30px;}
  .more::after {color:#555; font-size: 13px;}
  
  .gallery_bg, .m_pad2 {padding: 30px 0;}
  .gallery_bg .title_area h3 {font-size: 130%; margin-bottom:0}
  .m_gallery .cell strong {padding:7px 5px}
  .m_gallery .cell span {padding-bottom: 10px;}
  .banner_slider .nav {  top: -60px;}

  .schedule_box .schedule_title {padding:8px 10px}
  .schedule_box .schedule_title H3 {font-size: 100%;}
  .schedule .week_area {padding:0}
  .schedule .week_area .week {margin: 0 25px;}
  .schedule .week_area .nav {top:50%}
  .schedule .week_area .nav .prev, .schedule .week_area .nav .next{  width:35px; height:35px;}
  .schedule .week_area .nav button::before,
  .schedule .week_area .nav button::before{color: #393939; font-size: 110%;}
  .schedule .week_area .nav .prev {left:-10px;}
  .schedule .week_area .nav .next {right:-10px;}
  .schedule .content #calendar {margin:3px 0 3px 3px}
  .schedule .content a {font-size: 90%; line-height:28px}
  .schedule .content a span{width:85px;}
  .schedule .content a p{width:calc(100% - 85px);}
  .schedule .week_area .week li .today:before{margin-left:-14px; width:27px; height:27px; top:5px}

  .chairman {font-size: 80%; height: auto; background-size:auto 95%}
  .chairman .txt_box {  padding:20px}
  .chairman .txt_box a {width:180px}

}
  
@media only screen and (max-width:500px){
    .nav .count {font-size: 90%;}
    .nav button {width:25px; height: 25px; line-height: 25px;}
    .prev:before, .next:before, .play:before, .pause:before { font-size:15px; line-height: 25px;}
    .play:before {padding-left: 2px; font-size: 17px;}

    .m_gallery {margin-left:-5px; margin-right:-5px}
    .m_gallery > div {padding-left:5px; padding-right: 5px; font-size: 90%;}

  }

@media only screen and (max-width:400px){
  .chairman {background-size:auto 85%}
  .chairman .txt_box a {width:150px}

  .lawmaker_box > .photo {width:100%;}
  .lawmaker_box > .txt { width:100%; padding:0; text-align: center; }

  .visual_bg .visual_text {  top:30%}

}