@charset "utf-8";

.control button{position:relative; display:inline-block; width:25px; height:25px; font-size:0; text-indent:-9999px; vertical-align:top; background:url(/images/committee/main/ico_ctrl.png) no-repeat 8px -115px;}
.control .btn_next{background-position:-55px -115px;}

.new{display:inline-block;vertical-align:middle;width:17px;height: 17px;line-height: 17px;margin: -7px 0 0 0;font-size:12px;font-weight:100;text-align:center;color:#fff;border-radius:50%;background: #ee5656;text-transform:uppercase;}

/* 비주얼 */
#visual{position:relative; margin: 0 auto; max-width: 1920px; height: 496px;}

@media all and (max-width:1024px){
    #visual {height: auto;}
}

/* 의사일정 */
#agenda{overflow:hidden; width:100%; height:120px; box-sizing:border-box;}
#agenda .inner {border-bottom: 1px dashed #d0e2e3;}
#agenda h4{float:left; line-height:119px; font-weight:300; font-size:28px;}
#agenda h4 span {font-weight: 600;}
#agenda h4:before{content:''; display:inline-block; width:36px; height:34px; margin:-6px 15px 0 0 ; background:url(/images/committee/main/ico_calendar.jpg)no-repeat; vertical-align:middle; filter: drop-shadow(3px 4px 10px rgba(0, 0, 0, 0.1));}

#agenda .date_wrap{float:left; position:relative; width:336px; text-align:center;}
#agenda .date_wrap:after{content:''; display:block; clear:both;}
#agenda .date_wrap .date p{line-height:119px; font-size:25px; font-weight:600;}
#agenda .date_wrap .date p strong{color:#3a9fa3;}

#agenda .txt_wrap{overflow:hidden; position:relative; float:left; width:calc(100% - 762px); height:60px; margin:32px 0 0; box-sizing:border-box; padding:0 80px 0 30px; background:#efefef; border-radius:10px;}
#agenda .txt_wrap .txt{line-height:60px;}
#agenda .txt_wrap .list p,
#agenda .txt_wrap .list a{position:relative; display:block; white-space:nowrap; overflow:hidden; box-sizing:border-box; padding:0 0 0 15px; text-overflow:ellipsis;}
#agenda .txt_wrap .list p:before,
#agenda .txt_wrap .list a:before{content:''; position:absolute; top:27px; left:0; width:5px; height:5px; border-radius:50%; background:#333;}
#agenda .control {position: absolute; top: 19px; right: 38px;}
#agenda .control .btn_stop {background-position: 10px 5px;}
#agenda .control .btn_stop.on {background-position: -41px 5px;}

#agenda .btn_more {display: inline-block; margin: 32px 0 0 11px; width: 171px; height: 56px; line-height: 56px;  border-radius: 10px; text-align: center; background:#313f47; color: #fff; text-decoration: none;}
#agenda .btn_more:after {content: ''; display: inline-block; margin: 0 0 1px 10px; width: 10px; height: 10px; background: url(/images/committee/main/ico_ctrl.png)no-repeat -134px 0;}

@media all and (max-width:1240px){
    #agenda h4 {font-size: 26px;}
    #agenda .date_wrap {width: 280px;}
    #agenda .date_wrap .date p {font-size: 23px;}
    
    #agenda .txt_wrap {width: calc(100% - 676px);}
    #agenda .btn_more {width: 155px;}
}

@media all and (max-width:1024px){
    #agenda {margin: 20px 0 0; height: auto;}
    
    #agenda h4 {font-size: 22px; line-height: 60px;}
    #agenda h4:before {margin: -6px 10px 0 0;}
    #agenda .date_wrap {width: 220px;}
    #agenda .date_wrap .date p {font-size: 20px; line-height: 60px;}
    #agenda .txt_wrap {float: none; margin: 0 0 20px; width: 100%; height: 50px;}
    #agenda .txt_wrap .txt {line-height: 50px;}
    #agenda .txt_wrap .list p:before, #agenda .txt_wrap .list a:before {top: 22px;}
    #agenda .control {top: 14px;}
    #agenda .btn_more {position: absolute; margin: 0; top: 13px; right: 15px; height: 35px; line-height: 35px; font-size: 14px;}
}

@media all and (max-width:768px){
    #agenda {margin: 10px 0 0;}
    #agenda h4:before {margin: 0 8px 0 0; width: 30px; background-size: contain;}
    #agenda .txt_wrap .list p, #agenda .txt_wrap .list a {font-size: 15px;}
    #agenda .btn_more {width: 120px;}
    #agenda .btn_more:after {display: none;}
}

@media all and (max-width:568px){
    #agenda h4 {font-size: 20px;}
    #agenda .date_wrap {width: 100%;}
    #agenda .date_wrap .date p {line-height: 1; margin: 0 0 14px; font-size: 18px;}
    #agenda .btn_more {width: 110px; height: 28px; line-height: 28px; font-size: 13px; border-radius: 5px;}
}

@media all and (max-width:380px){
    #agenda h4:before {display: none;}
}


.sec {margin: 60px 0;}

/* 현역의원 */
#member{position:relative; float: left; width:456px; box-sizing:border-box;}
#member h4{font-size:30px; font-weight: 300; line-height: 1;}
#member h4 span{font-weight: 600;}

#member .control {position: absolute; top: -5px; right: 0;}
#member .control .btns{width: 43px; height: 40px; border: 1px solid #ddd; border-radius: 10px; background-position: 16px -26px;}
#member .control .btn_stop {background-position: 17px 12px;}
#member .control .btn_stop.on {background-position: -33px 12px;}
#member .control .btn_next {background-position: -53px -25px;}
#member .control .more{position:relative; display: inline-block; width: 82px; height: 40px; line-height: 40px; border: 1px solid #5883b7; border-radius: 10px; color: #666; font-size: 14px; text-align: center; text-decoration: none; box-sizing: border-box;}
#member .control .more:after {content: ''; display: inline-block; margin: 0 0 0 8px; width: 10px; height: 10px; background: url(/images/committee/main/ico_ctrl.png)no-repeat -134px -38px;}


#member .list_wrap{margin: 25px 0 0; border-radius:30px 10px 10px 10px; background:#5883b7;}
#member .list_wrap:after{content:''; display:block; clear:both;}
#member .list_wrap .list{float:left;width:100%;box-sizing:border-box;padding:45px 20px 40px 40px;height: 278px;}
#member .list_wrap .list .pic{overflow:hidden; float:left; position:relative; width:150px; height:188px; border-radius:10px;}
#member .list_wrap .list .pic img{width:100%; height:100%;}

#member .list_wrap .list .txt{float:left; width:calc(100% - 180px); padding:0 0 0 30px; color:#fff;}
#member .list_wrap .list .txt dt{padding: 0 0 10px;font-size:24px;font-weight:600;}
#member .list_wrap .list .txt dd{position:relative;box-sizing:border-box;padding: 0 0 6px 0;font-weight: 300;}
#member .list_wrap .list .txt .btn_wrap{padding:6px 0 0;}
#member .list_wrap .list .txt a{display:inline-block;width: 90%;height: 49px;line-height: 49px;border: 1px dashed rgba(255,255,255,0.5);border-radius: 5px;color: #fff;text-align: center;margin: 5px 0 0;text-decoration: none;}
#member .list_wrap .list .txt a:before {content: ''; display: inline-block; margin: 0 8px -2px 0; width: 18px; height: 18px; background: url(/images/committee/main/ico_home.png)no-repeat;}

@media all and (max-width:1024px){
    .sec {margin: 40px 0 0;}
    
    #member {width: 100%; margin: 0 0 35px;}
    #member h4 {font-size: 26px;}
}
@media all and (max-width:768px){
    #member h4 {font-size: 24px;}
    #member .control {top: -7px;}
    #member .list_wrap {margin: 20px 0 0;}
    #member .list_wrap .list {padding: 35px 30px 30px; height: auto;}
    #member .list_wrap .list .pic {width: 130px; height: 100%;}
    #member .list_wrap .list .txt dt {padding: 0 0 7px; font-size: 22px;}
    #member .list_wrap .list .txt dd {font-size: 15px;}
    #member .list_wrap .list .txt a {margin: 0; height: 40px; line-height: 40px; font-size: 15px;}
}
@media all and (max-width:568px){
    .sec {margin: 30px 0 0;}
    #member h4 {font-size: 22px;}
    
    #member .control .btns {width: 34px; height: 34px; background-size:140px; background-position: 13px -16px;}
    #member .control .btn_next {background-position: -35px -15px;}
    #member .control .btn_stop {background-position: 14px 12px;}
    #member .control .btn_stop.on {background-position: -22px 12px;}
    #member .control .more {width: 68px; height: 34px; line-height: 34px; font-size: 13px;}
    #member .control .more:after {display: none;}
    
    #member .list_wrap .list .txt dt {font-size: 20px;}
}
@media all and (max-width:410px){
    #member .list_wrap .list {padding: 25px 20px 20px;}
    #member .list_wrap .list .pic {width: 100px;}
    #member .list_wrap .list .txt {padding: 0 0 0 15px; width: calc(100% - 140px);} 
    #member .list_wrap .list .txt dt {font-size: 19px;}
    #member .list_wrap .list .txt dd {padding: 0 0 3px;}
}
@media all and (max-width:345px){
    #member .list_wrap .list .pic {width: 96px;}
    #member .list_wrap .list .txt {width: calc(100% - 115px);}
}


/* 게시판 */
#board{float:left; width:calc(100% - 508px); margin: -4px 0 0 50px;}
#board > ul{position:relative; padding:0 120px 0 0;}
#board > ul:after{content:''; display:block; clear:both;}
#board > ul > li{float:left; width:calc((100% - 30px)/ 3); margin: 0 10px 0 0; box-sizing:border-box; border:1px solid #e9e9e9; background:#fbfbfb; border-radius: 5px;}

#board li h5{display:block;}
#board li h5 a{position:relative; display:block; width:100%; line-height:60px; font-size:18px; font-weight:400; text-decoration:none; text-align:center;}
#board li.on h5 a{color:#fff;}
#board li h5 a:before{opacity:0; visibility:hidden; content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:5px; background:#e78888;}
#board li.on h5 a:before{opacity:1; visibility:visible;}
#board li h5 a span{position:relative;}
 
#board .con{opacity:0; visibility:hidden; position:absolute; top:100px; left:0; width:100%; box-sizing:border-box;}
#board .on .con{opacity:1; visibility:visible; top:78px; transition:0.35s ease-in-out;}

#board .con li a{position:relative;display:block;height: 55px;line-height: 55px;padding: 0 120px 0 200px;box-sizing:border-box;text-decoration:none;background: #f6f6f6;}
#board .con li a:hover .tit,
#board .con li a:focus .tit,
#board .con li a:active .tit{text-decoration:underline;}
#board .con li a *{display:inline-block; vertical-align: middle;}

#board .type{position: absolute; top: 50%; left: 30px; transform: translateY(-50%); padding: 0 0 0 15px;}
#board .type:before {content: ''; display: block; position: absolute; width: 6px; height: 6px; top: 24px; left: 0; background: #e78888; border-radius: 50%;}
#board .tit{padding: 0 20px 0 0;max-width: 85%;font-weight:300;color:#333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#board .date {position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-weight: 200;}
#board .new {margin: 0 0 0 -22px;}

#board .con li:not(:last-child){padding:0 0 13px;}

#board .more{display:none; position:absolute; top:0; right:0; width:120px; height:100%; line-height: 60px; box-sizing:border-box; border:1px solid #e78888; border-radius:5px; font-size:15px; text-align: center; text-decoration: none;}
#board .more:after{content:''; display: inline-block; margin: 0 0 -2px 10px; width: 14px; height: 14px; background: url(/images/committee/main/ico_ctrl.png)no-repeat -181px -1px;}
#board .on .more{display:block;}


@media all and (max-width:1024px) {
    #board{width:100%; height:365px; margin:0 0 50px;}
    
    #popup{width:100%;}
    #popup .list > img{width:auto;}
}

@media all and (max-width:768px) {
    #board{height:315px;}
    #board li h5 a{line-height:40px; font-size:15px;}
    #board .on .con{top:52px;}
    #board .more {line-height: 40px;}
}

@media all and (max-width:568px) {
    #board{height:310px; margin:0 0 30px;}
    #board h4{margin:0;}
    #board > ul{padding:0 55px 0 0;}
    #board > ul > li {margin: 0 5px 0 0; width: calc((100% - 15px)/ 3);}
    #board .date {right: 20px; font-size: 14px;}
    #board .more{width:55px;}
    
    #board .con li a{padding:0 100px 0 15px !important;}
    #board .con li .date_wrap{top:6px;}
    #board .type,
    .date_wrap .view{display:none !important;}
    
    #board .more:after {display: none;}
}

@media all and (max-width:380px){
    #board li h5 a {font-size: 14px;}
    #board > ul > li {margin: 0 3px 0 0; width: calc((100% - 9px)/ 3);}
}


/* 갤러리 */
#gallery{position:relative;box-sizing:border-box;height: 500px;padding:60px 0;background:url(/images/committee/main/bg_gallery.jpg) no-repeat center;background-size: cover;}

#gallery .tit_wrap{position:absolute; top:0; left:0; z-index: 3;}
#gallery .tit_wrap:after{content:''; display:block; width:50px; height:1px; margin:20px 0 0; background:#e79090;}
#gallery .tit_wrap p {color: #3a9fa3; font-weight: 200;}
#gallery .tit_wrap h4 {font-size: 32px;}

#gallery .list img{width:100%; height:100%;}

#gallery .con_wrap{position:relative;}
#gallery .list_wrap .list:after{content:''; display:block; clear:both;}
#gallery .list_wrap .list a{display:block; text-decoration:none;}
#gallery .list_wrap .list .pic{overflow:hidden; display:block; float:right; width:650px; height:380px; box-shadow: 4px 3px 30px 0px rgba(85, 85, 85, 0.4); border-radius:10px;}
#gallery .list_wrap .list .txt{float:left;display:block;width:calc(100% - 690px);margin:125px 0 0;}
#gallery .list_wrap .list .txt .tit{overflow:hidden;display: inline-block;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px;font-size:19px;font-weight:400;width: 90%;vertical-align: middle;}
#gallery .list_wrap .list .txt:hover .tit {text-decoration: underline;}
#gallery .list_wrap .list .txt .date{display:block; color: rgba(129,129,129,0.8);}

#gallery .next_wrap{z-index:2; position:absolute; bottom:0; left:0; width:calc(100% - 700px);}
#gallery .next_wrap .list a{overflow:hidden; position:relative; display:block; width:210px; height:155px; margin:0 35px 0 0; border-radius:10px; box-sizing: border-box;}
#gallery .next_wrap .slick-current .list a {border: 3px solid #3a9fa3;}
 
#gallery .control{z-index:2; position: absolute; top: 5px; height:56px; right:700px;}
#gallery .control button, #gallery .control a{width:56px; height:100%; margin:0; border-radius: 10px; background-color: #fff; background-position: 24px -64px; box-shadow: 3px 4px 10px 0px rgba(0, 0, 0, 0.1);}
#gallery .control .btn_next {background-position: -45px -64px;}
#gallery .control .more {display: inline-block; width: 134px; line-height: 56px; text-align: center; background-color: #3a9fa3; color: #fff; text-decoration: none;}
#gallery .control .more:after {content: ''; display: inline-block; margin: 0 0 -2px 8px; width: 14px; height: 14px; background: url(/images/committee/main/ico_ctrl.png)no-repeat -181px -36px;}

#gallery .control a:before{width:18px; margin-top:-1px;}
#gallery .control a:after{top:19px; left:37px; height:18px;}

@media all and (max-width:1430px) {
    #gallery .tit_wrap, #gallery .next_wrap{left:15px;}
}

@media all and (max-width:1380px){
    #gallery .control {right: auto;left: 0;top: 100px;height: 38px;}
    #gallery .control button, #gallery .control a {width: 38px; background-position: 17px -73px;}
    #gallery .control .btn_next {background-position: -53px -73px;}
    #gallery .list_wrap .list .txt {margin: 155px 0 0;}
    #gallery .control .more {width: 100px; line-height: 38px;}
}

@media all and (max-width:1024px) {
    #gallery .tit_wrap h4 {font-size: 28px;}
    #gallery .control {top: 25px;}
    #gallery .tit_wrap{position:static;}
    #gallery .list_wrap .list .pic{width:450px; height:310px;}
    #gallery .list_wrap .list .txt{width:calc(100% - 480px); margin: 100px 0 0;}
    #gallery .list_wrap .list .txt .tit{font-size:17px;}
    
    #gallery .next_wrap{width:calc(100% - 500px);}
    #gallery .next_wrap .list a{width:160px; height:120px; margin-right:15px;}
    
}

@media all and (max-width:768px) {
    #gallery{padding:45px 0;height: 518px;}
    #gallery .tit_wrap h4 {font-size: 24px;}
    #gallery .tit_wrap p {font-size: 15px;}
    
    #gallery .list_wrap .list a{width:360px; margin:20px auto 0;}
    #gallery .list_wrap .list .pic{float:none; width:100%; height:260px;}
    #gallery .list_wrap .list .txt{float:none; width:100%; margin: 20px 0 0;}
    #gallery .list_wrap .list .txt .date{color:#666; background-position:bottom 4px left 0;}
    #gallery .next_wrap{display:none;}
     
    #gallery .control{top: -45px; left: auto; right: 0;}
    
    #gallery .control a{width:40px; height:40px;}
    #gallery .control a:after{top:11px; left:22px;}
}

@media all and (max-width:568px) {
    #gallery {padding: 30px 0;background-position: left;height: 418px;}
    #gallery .tit_wrap p {font-size: 13px; letter-spacing:0.5px;}
    #gallery .tit_wrap h4 {font-size: 22px;}
    #gallery .tit_wrap:after {display: none;}
    #gallery .control {top: -30px;}
    #gallery .control button, #gallery .control a {width: 30px; height: 30px; background-position: 12px -77px;}
    #gallery .control .btn_next {background-position: -58px -77px;} 
    #gallery .control .more {width: 70px; line-height: 30px; border-radius: 5px;}
    #gallery .control .more:after {display: none;}
    
    #gallery .list_wrap .list .pic {height: 220px;}
    #gallery .list_wrap .list .txt .tit {font-size: 15px;}
}

@media all and (max-width:400px) {
    #gallery {height:386px;}
    #gallery .control button {display: none !important;}
    #gallery .control .more {width: 55px; font-size: 14px;}
    
    #gallery .list_wrap .list a {width: 280px;}
    #gallery .list_wrap .list .pic {height: 190px;}
    
}