@charset "utf-8";
#container_main {position:relative; overflow:hidden; width:100%;}
.more{z-index:1; position:absolute; top:10px; right:0; display:block; width:30px; height:30px; font-size:0; text-indent:-999px; transition:0.25s ease-in-out; background:url(/images/committee/main/ico_ctrl.png) no-repeat 5px -39px; box-sizing:border-box;}
.more:hover{border-color:#888;}

/* 비주얼 */
#visual{position:relative; text-align:center;}

@media all and (max-width:1430px) {
	#visual .inner{padding:60px 15px 0 15px;}
	#visual img{max-width:100%;}
}
@media all and (max-width:1024px) {
	#visual .inner{padding:20px 15px 0;}
}
@media all and (max-width:768px) {
	#visual .inner{padding:15px 10px 0;}
	.more{right:0; top:-2px;}
}

/* 현역의원 */
#member{position:relative; float:left; width:31.42%; height:314px; margin:0 50px 58px 0; padding:25px 0 0 40px; background:#f0e7e4; box-sizing:border-box;}
#member .img {position:relative; float:left; overflow:hidden; width:39.82%; max-width:124px; border-radius:20px; border:5px solid #ecd8d1;}
#member .img img{width:100%; max-width:100%;}
#member .list_wrap div{vertical-align:top;}
#member .list_wrap .list:not(:first-of-type){display:none;}
#member .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;} 
#member .txt{float:left; width:calc(100% - 170px); padding:14px 0 0 0; font-weight:300;}
#member .name strong{display:block; height:44px; line-height:110%; font-size:25px; font-weight:600;}
#member .name p{line-height:110%;}
#member .txt ul{padding:27px 0 0 0;}
#member .txt li{margin:0 0 6px; line-height:135%;}
#member .txt li span{display:block;}
#member .txt li:before{background:#908b89;}
#member .control{z-index:2; position: absolute; top:40px; left:120px;}
#member .control button,
#member .control a{position:relative; float:left; width:20px; height:25px; margin:0 0 0 3px; font-size:0; text-indent:-9999px; box-sizing:border-box; background:url(/images/committee/main/ico_ctrl.png) no-repeat 6px 4px;}
#member .control .btn_next{background-position:-42px 4px;}
#member .control .btn_stop{background-position:-18px 4px;}
#member .control .btn_stop.on{background-position:-102px 4px;}
#member .control .more{position:static; transition:0.25s ease-in-out; background-position:-74px 4px;}
#member .control .more:hover{transform:rotate(90deg);}

#member .btns{float:left; width:100%; padding:29px 0 0 0;}
#member .btns a{position:relative; z-index:1; overflow:hidden; float:left; width:42.21%; height:49px; line-height:49px; margin:0 0 15px; color:#fff; font-weight:400; font-size:15px; vertical-align:top; transition:0.3s ease; box-sizing:border-box; text-align:center; background:#4978bf; box-shadow:5px 5px 10px rgba(0,0,0,0.2); text-decoration:none;}
#member .btns a:first-of-type{margin:0 26px 15px 0; background:#75584c;}
#member .btns a:before{content:''; display:inline-block; vertical-align:middle; width:15px; height:15px; margin:-3px 9px 0 0; background:url(/images/committee/main/ico_greeting.png) no-repeat 50% 50%;}
#member .btns a:first-child:before{background-image:url(/images/committee/main/ico_profile.png);}
#member .btns a:hover{box-shadow:1px 1px 1px rgba(0,0,0,0.2);}
#member .btns a:hover:before{animation:ani_bg 0.7s ease-out; transform-origin:50% 100%;}

@keyframes ani_bg{
	0%{transform:rotate(0);}
	20%{transform:rotate(-8deg);}
	40%{transform:rotate(8deg);}
	60%{transform:rotate(-8deg);}
	80%{transform:rotate(8deg);}
	100%{transform:rotate(0deg);}
}
@media all and (max-width:1430px) {
	#member{width:33.5%; padding: 25px 0 0 3.5%; margin-right:30px;}
	#member .control{left:110px;}
	#member .img{width:35%; height:auto; max-height:151px; box-sizing:border-box;}
	#member .txt{width:60%;}
}
@media all and (max-width:1024px) {
	.sec{padding-top:40px; padding-bottom:40px;}
	#member{width:50%; margin:0 0 43px;}
}
@media all and (max-width:768px) {
	#member .img{margin:32px 0 0 0; box-sizing:border-box;}
	#member .txt{padding:8px 0 0 0;}
	#member .name strong{height:auto; padding:0 0 12px; font-size:23px;}
	#member .control{top:23px; left:auto; right:15px;}
	#member .btns{padding:23px 0 0 0;}
}
@media all and (max-width:568px) {
	.sec{padding-top:25px; padding-bottom:30px;}
	#member{width:100%; height:auto; margin:0 0 35px; padding:30px 0 15px 6%;}
	#member .img{margin:0;}
	#member .txt{width:58%; padding:5px 0 0 0;}
	#member .name strong{font-size:22px;}
	#member .control{left:87px; top:32px;}
	#member .btns{padding:17px 0 0 0;}
	#member .btns a{width:44.2%;}
	#member .btns a:first-of-type{margin:0 5% 15px 0;}
}
@media all and (max-width:380px) {
	.sec{padding-top:23px;}

	#member{padding:28px 0 15px 7%;}
	#member .txt{font-size:14px;}
	#member .txt li:before{top:4px;}
	#member .control{top:30px;}
}

/* 바로가기 */
#link {position:relative; margin:50px 0 57px; background:linear-gradient(90deg, #38977b 60%,#43c97a 100%);}
#link ul{height:208px; padding:54px 2.9% 0; box-sizing:border-box;}
#link ul.listGroup4 li{position:relative; display:inline-block; width:24.5%; vertical-align:top;}
#link ul.listGroup5 li{position:relative; display:inline-block; width:19.5%; vertical-align:top;}
#link li:after{content:''; display:block; position:absolute; top:0; left:0; width:1px; height:102px; border-left:1px dashed rgba(255,255,255,0.3);}
#link li:first-child:after{display:none;}
#link li a{z-index:1; position:relative; display:block; max-width:235px; margin:0 auto; line-height:110%; padding:80px 0 0 0; font-size:18px; color:#fff; text-align:center;}
#link li a:before,
#link li a:after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:61px; transition:0.4s ease; background:url(/images/committee/main/ico_lnk1.png) no-repeat 50% 0;}
#link li a:after{opacity:0; background-position:50% 100%;}
#link li.list2 a:before,
#link li.list2 a:after{background-image:url(/images/committee/main/ico_lnk2.png);}
#link li.list3 a:before,
#link li.list3 a:after{background-image:url(/images/committee/main/ico_lnk3.png);}
#link li.list4 a:before,
#link li.list4 a:after{background-image:url(/images/committee/main/ico_lnk4.png);}
#link li.list5 a:before,
#link li.list5 a:after{background-image:url(/images/committee/main/ico_lnk5.png);}
#link li a:hover:before,
#link li a:focus:before,
#link li a:active:before{height:0;}
#link li a:focus:after,
#link li a:hover:after,
#link li a:active:after{opacity:1;}
#link li a:focus:before,
#link li a:active:before,
#link li a:hover:before,
#link li a:focus:after,
#link li a:active:after,
#link li a:hover:after{animation:ani_bg 0.65s ease-out; transform-origin:50% 100%;}

@keyframes ani_bg{
	0%{transform:rotate(0);}
	20%{transform:rotate(-10deg);}
	40%{transform:rotate(10deg);}
	60%{transform:rotate(-10deg);}
	80%{transform:rotate(10deg);}
	100%{transform:rotate(0deg);}
}

@media all and (max-width:1024px) {
	#link{float:right; width:46%; height:315px; margin:0 0 43px;}
	#link ul{height:auto; padding:50px 0 0 0;}
	#link ul:before{top:auto; bottom:0; width:155px; margin:0; background-size:contain;}
	#link li{width:49%; margin:0 0 30px;}
	#link li:nth-child(-n + 3){width:32%;}
	#link li:after{height:75px;}
	#link li:nth-child(4):after{display:none;}
	#link li a{padding:62px 0 0 0; font-size:17px;}
	#link li a:before,
	#link li a:after{height:50px; background-size:auto 100px;}
}
@media all and (max-width:768px) {
	#link li a{font-size:15px;}
}
@media all and (max-width:568px) {
	#link{width:100%; height:auto; margin:0 0 25px;}
	#link ul:before{display:none;}
	#link li:after{height:70px;}
	#link li:nth-child(3):after{display:block;}
	#link li a{padding:55px 0 0 0; font-size:15px;}
	#link li a:before,
	#link li a:after{height:40px; background-size:auto 80px;}
}
@media all and (max-width:380px) {
	#link{margin:0 0 23px;}
	#link ul{padding:27px 0 0 0;}
	#link li{margin:0 0 28px;}
	#link li:after{height:65px;}
	#link li a{padding:53px 0 0 0; font-size:14px;}
}
@media all and (max-width:340px) {
	#link li a{font-size:13px;}
}

/* board */
.board{position:relative; float:left; width:31.07%; box-sizing:border-box;}
.board2{float:right;}
.board h4{z-index:1; display:block; position:relative; height:44px; padding:13px 0 0 0; line-height:110%; color:#000; font-weight:600; font-size:25px;}
.board ul{height:257px; padding:36px 27px 0 31px; border:1px solid #d0d0d0; box-sizing:border-box;}
.board ul li{position:relative; overflow:hidden; width:100%; margin:0 0 20px;}
.board ul li:before{top:15px; width:4px; height:4px; border-radius:0; background:#234343;}
.board ul li a{position:relative; float:left; width:100%; height:31px; line-height:31px; padding:0 70px 0 0; color:#000; box-sizing:border-box; text-decoration:none;}
.board ul li a:before{z-index:-1; opacity:0; visibility:hidden; content:''; display:block; position:absolute; bottom:0; left:0; width:0; height:14px; background:#fee6e8;}
.board ul li a:hover:before,
.board ul li a:focus:before,
.board ul li a:active:before{opacity:1; visibility:visible; width:100%; transition:width 0.5s linear;}
.board .tit{display:inline-block; vertical-align:middle; max-width:97%; padding:0 20px 0 0; font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
.board .new{display:inline-block; width:18px; height:18px; line-height:18px; margin:-2px 0 0 -18px; font-size:10px; text-transform:uppercase; text-align:center; color:#fff; border-radius:50%; background:#ffa517;}
.board .date{position:absolute; right:0; top:0; display:block; font-size:14px;}
.board .none{width:100%; padding:4em 0 0 0; text-align:center;}
.board .none:before{display:none;}
.board .more{display:block;}

@media all and (max-width:1024px){
	.board{width:48%;}
	.board h4{padding-top:0; font-size:23px;}
	.board .more{top:-5px;}
	.board ul {height:236px; padding:32px 25px 0 29px;}
	.board ul li{margin:0 0 15px;}
}
@media all and (max-width:768px){
	.board h4{height:auto; padding:0 0 15px; font-size:22px;}
	.board ul li a{padding:0;}
	.board .date{display:none;}
}
@media all and (max-width:568px){
	.board{width:100%;}
	.board1{margin:0 0 37px;}
	.board h4{font-size:21px;}
	.board ul {height:212px; padding:28px 25px 0 27px;}
	.board ul li{margin:0 0 11px;}
	.board ul li:before{top:12px;}
	.board ul li a{padding:0 70px 0 0;}
	.board .date{display:block;}
}
@media all and (max-width:380px){
	.board ul {height:203px; padding:28px 25px 0 25px;}
	.board ul li{margin:0 0 8px;}
	
}

/* 갤러리 */
#gallery {z-index:1; position:relative; clear:both; width:100%; background:#f3f0e9 url(/images/committee/main/bg_gallery.jpg) no-repeat 50% 100% / cover;}
#gallery .inner{height:511px; padding:80px 0 0 266px;}
#gallery .title{position:absolute; top:80px; left:0; width:266px; line-height:165%; font-weight:200; font-size:15px; word-break:keep-all;}
#gallery .s_tit{line-height:100%; font-size:17px;}
#gallery h4{padding:10px 0 25px; line-height:100%; font-size:33px; font-weight:900; font-family:"Jalnan";}
#gallery .list_wrap{float:left; width:100%;}
#gallery .list_wrap .list:not(:first-of-type){display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type){display:block;}
#gallery .list{float:left;}
#gallery .list *{display:block;}
#gallery .list a{overflow:hidden; position:relative; width:353px; margin:0 36px 20px 0; box-shadow:10px 10px 10px rgba(0,0,0,0.1); transition:margin-top 0.25s ease-in-out;}
#gallery .list a:hover{margin-top:20px;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%; height:321px;}
#gallery .sbj{position:absolute; bottom:0; left:0; width:100%; height:71px; line-height:71px; padding:0 0 0 26px; transition:background 0.25s ease-in-out; box-sizing:border-box; background:rgba(0,0,0,0.8);}
#gallery .tit{position:relative; z-index:1; display:inline-block; max-width:90%; padding:0 20px 0 0; color:#fff; font-size:17px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .new{position:relative; z-index:1; display:inline-block; vertical-align:middle; width:17px; height:17px; line-height:18px; margin:-2px 0 0 -20px; font-size:10px; border-radius:50%; text-transform:uppercase; text-align:center; color:#fff; background:#ff9c00;}
#gallery .control {float:left;}
#gallery .control button{display:block; float:left; width:61px; height:57px; margin:0 11px 0 0; border:none; font-size:0; text-indent:-999px; border-radius:28px 0 0 28px; background:#4e4b34 url(/images/kr/main/ico_ctrl.png) no-repeat 26px -268px;}
#gallery .control .btn_next{border-radius:0 28px 28px 0; background-position:-49px -268px;}
#gallery .control button:hover{background-color:#3b3820; transition:0.25s ease-in-out;}
#gallery .view{display:block; position:static; margin:33px 0 44px; line-height:100%;}
#gallery .view:after{content:''; display:inline-block; vertical-align:middle; width:15px; height:15px; margin:-3px 0 0 10px; transition:0.25s ease-in-out; background:url(/images/kr/main/ico_ctrl.png) no-repeat -54px -138px;}
#gallery .view:hover:after{transform:rotate(90deg);}
#gallery a:hover .sbj{background:rgba(0,0,0,0.9);}

@media all and (max-width:1430px) {
	#gallery:before{right:auto; left:0; width:405px; margin:0;}
	#gallery .title{left:15px;}
}
@media all and (max-width:1024px) {
	#gallery .inner{height:auto; padding:50px 5px 25px 5px;}
	#gallery .title{position:relative; top:0; left:0; width:100%; padding:0 0 35px 10px; font-size:13px; box-sizing:border-box;}
	#gallery .s_tit{font-size:16px;}
	#gallery h4{padding:8px 0 10px; font-size:27px;}
	#gallery .info{font-size:14px;}
	#gallery .info br{display:none;}
	#gallery .list a{width:calc(100% - 20px); margin:0 10px 45px; box-sizing:border-box;}
	#gallery .list a:hover{margin-top:0;}
	#gallery .img img{max-height:195px;}
	#gallery .sbj{position: relative;}
	#gallery .tit{font-size:16px;}
	#gallery .control{position:absolute; right:0; top:15px;}
	#gallery .control button{width:47px; height:45px; background-position: 20px -273px;}
	#gallery .control .btn_next{background-position:-54px -273px;;}
	#gallery .view{position:absolute; left:210px; top:30px; margin:0;}
}
@media all and (max-width:768px) {
	#gallery .inner{padding:45px 2px 20px;}
	#gallery .title{padding:0 0 28px 10px;}
	#gallery .s_tit{font-size:14px;}
	#gallery h4{padding:6px 0 0 0; font-size:24px;}
	#gallery .info{display:none;}
	#gallery .list a{width:calc(100% - 16px); margin:0 8px 45px;}
	#gallery .list img{max-height:148px;}
	#gallery .sbj{height:60px; line-height:60px;}
	#gallery .tit{font-size:15px;}
	#gallery .control{top:5px;}
	#gallery .control button{width:42px; height:40px; margin:0 7px 0 0; background-position:17px -275px;}
	#gallery .control .btn_next{background-position:-56px -275px;}
	#gallery .view{top:25px; left:190px}
}
@media all and (max-width:568px) {
	#gallery .s_tit{visibility:hidden;}
	#gallery h4{font-size:23px;}
	#gallery .view{top:0; left:10px;}
}
@media all and (max-width:380px) {
	#gallery .inner{padding:43px 4px 20px;}
	#gallery h4{font-size:22px;}
	#gallery .list a{width:calc(100% - 12px); margin:0 6px 40px;}
	#gallery .list img{max-height:130px;}
	#gallery .tit{font-size:14px;}
	#gallery .sbj{height:56px; line-height:56px;}
}