@charset "utf-8";

#container_main h4{font-size:30px; font-weight:800; color:#333; letter-spacing:-2px;}
#container_main h4 span{font-weight:200;}

.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;}

.more{display:block; position:absolute; right:22px; top:20px; width:40px; height:40px; font-size:0; text-indent:-999px; box-sizing:border-box; background:url(/images/committee/main/ico_ctrl.png) no-repeat 13px 13px;}
.more:hover{transform:rotate(360deg); transition:transform 0.3s ease-in-out;}

/* 비주얼 */
#visual{position:relative; text-align:center;}
#visual img{max-width:100%;}
#visual .txt{position:absolute; left:50%; top:122px; min-width:375px; height:103px; padding:15px 42px 0; line-height:140%; color:#222; transform:translateX(-50%); font-size:25px; background:rgba(255,255,255,0.85); box-sizing:border-box;}
#visual .txt:before{content:''; display:block; position:absolute; top:-10px; left:-10px; width:calc(100% + 20px); height:calc(100% + 20px); border:3px solid rgba(255,255,255,0.85); box-sizing:border-box;}
#visual .txt p{font-size:32px; font-weight:800; letter-spacing:-2px;}
#visual .txt p span{color:#3294a3;}

@media all and (max-width:1530px) {
	#visual .txt{top:50%; transform:translate(-50%, -75%);}
}
@media all and (max-width:1024px) {
	#visual .txt{height:auto; min-width:315px; padding:13px 20px; font-size:19px; transform:translate(-50%, -60%);}
	#visual .txt:before{top:-7px; left:-7px; width:calc(100% + 14px); height:calc(100% + 14px);}
	#visual .txt p{font-size:24px;}
}
@media all and (max-width:768px) {
	#visual .txt{min-width:360px; padding:11px 15px; font-size:18px;}
	#visual .txt:before{top:-5px; left:-5px; width:calc(100% + 10px); height:calc(100% + 10px); border-width:2px;}
	#visual .txt p{display:inline-block; font-size:20px;}
}
@media all and (max-width:568px) {
	#visual .txt{display:none;}
}

/* 바로가기 */
#link {position:relative; overflow:hidden; width:100%; margin:-40px 0 0 0;}
#link li{float:left; width:32.083%;}
#link li + li{margin:0 0 0 1.83%;}
#link li a{z-index:1; position:relative; display:block; height:141px; padding:26px 45% 0 10.9%; font-size:15px; color:#fff; word-break:keep-all; transition:box-shadow 0.4s ease; background:#1f385a; text-decoration:none; box-sizing:border-box;}
#link li.list1 a{background:#3294a3;}
#link li a:hover{box-shadow:inset 0 0 0 10px rgba(255,255,255,0.3);}
#link li.list2 a{background:#35619f;}
#link li a strong{font-size:23px; font-weight:800;}
#link li a span{display:block; line-height:130%;}
#link li a span:before{content:''; display:block; width:27px; height:1px; margin:12px 0 5px 0; background:rgba(255,255,255,0.3);}
#link li a:before{z-index:1; content:''; position:absolute; top:50%; right:43px; display:block; width:92px; height:92px; transform:translateY(-50%); border-radius:50%; transition:0.4s ease; background:#fff url(/images/committee/main/ico_link1.jpg) no-repeat 50% 50%;}
#link li.list2 a:before{background-image:url(/images/committee/main/ico_link2.jpg);}
#link li.list3 a:before{background-image:url(/images/committee/main/ico_link3.jpg);}
#link li.list1 a:hover:before{box-shadow:inset 0 0 0 8px rgba(50,148,163,0.7);}
#link li.list2 a:hover:before{box-shadow:inset 0 0 0 8px rgba(53,97,159,0.7);}
#link li.list3 a:hover:before{box-shadow:inset 0 0 0 8px rgba(31,56,90,0.7);}
#link li a:hover span:after{width:45px;}

@media all and (max-width:1024px) {
	#link {margin:24px 0 0 0;}
	#link li{width:31.65%;}
	#link li + li{margin:0 0 0 2.5%;}
	#link li a{height:auto; padding:23px 36% 26px 10%;}
	#link li a:before{right:20px; width:70px; height:70px; background-size:auto 37px;}
	#link li a strong{font-size:21px;}
	#link li a span:before{margin:6px 0 7px;}
}
@media all and (max-width:768px) {
	#link {margin:18px 0 0 0;}
	#link li a{padding:88px 0 15px 0; text-align:center;}
	#link li a:before{right:50%; top:17px; width:60px; height:60px; transform:translateX(50%); background-size:auto 32px;}
	#link li a strong{font-size:17px;}
	#link li a span{display:none;}
}
@media all and (max-width:568px) {
	#link {margin:11px 0 0 0;}
	#link li{width:31.33%;}
	#link li + li{margin:0 0 0 3%;}
	#link li a strong{font-size:16px;}
}
@media all and (max-width:380px) {
	#link li a{padding:84px 0 12px;}
	#link li a:before{top:14px;}
	#link li a strong{font-size:15px;}
}

/* 현역의원 */
#member{position:relative; float:left; height:406px; width:100%; margin:42px 0 0 0; text-align:center; box-sizing:border-box;}
#member h4{line-height:100%; font-size:31px;}
#member h4:after{content:''; display:block; width:46px; height:1px; margin:20px auto; background:#dfdfdf;}
#member ul{float:left; width:100%; display:flex; flex-wrap:wrap; justify-content:center;}
#member li *{display:block;}
#member li{position:relative; display:inline-block; width:10%; font-size:14px; color:#555; word-break:keep-all; vertical-align:top;}
#member a{text-decoration:none;}
#member .img{position:relative; width:107px; margin:0 auto; box-shadow:10px 10px 20px rgba(0,0,0,0.2);}
#member .img:after{content:''; display:block; position:absolute; bottom:-21px; left:50%; width:40px; height:40px; margin:0 0 0 -20px; border-radius:50%; background:#3294a3 url(/images/common/ico_home.png) no-repeat 50% 50%;}
#member a:hover .img:after{background-color:#f39500;}
#member .img img{width:100%; height:150px;}
#member .more{right:0; top:-4px; border:3px solid #e2e2e2; border-radius:50%; background-position:10px 10px;}
#member .more:hover{border-color:#999;}
#member .name{padding:35px 0 5px 0; font-size:18px; font-weight:900; color:#333;}
#member .name span{display:inline-block; line-height:130%; font-size:14px; word-break:break-all;}

@media all and (max-width:1230px) {
	#member{height:385px;}
	#member .img{width:100%; max-width:90%;}
	#member .img img{height:135px;}
}
@media all and (max-width:1024px) {
	#member{height:auto; margin:55px 0 20px;}
	#member h4{font-size:23px;}
	
	#member ul{float:none; width:95%; margin:0 auto;}
	#member li{width:20%; height:260px;}
	#member .img{width:106px; max-width:88%;}
	#member .img img{height:149px;}
	#member .name{padding:28px 0 3px;}
	#member .more{right:50%; top:-10px; margin:0 -150px 0 0;}
}
@media all and (max-width:768px) {
	#member{margin:52px 0 15px;}
	#member h4{font-size:22px;}
	#member li{height:235px; font-size:13px;}
	#member .img{width:90px;}
	#member .img img{height:126px;}
	#member .name{line-height:120%; font-size:16px;}
	#member .name span{font-size:13px;}
	#member .more{margin:0 -145px 0 0;}
}
@media all and (max-width:568px) {
	#member{margin:47px 0 15px;}
	#member h4{font-size:20px;}
	#member h4:after{margin:17px auto 20px;}
	#member ul{width:100%;}
	#member li{height:auto; padding:0 0 15px;}
	#member .img{width:72px; max-width:90%;}
	#member .img img{height:101px;}
	#member .img:after{bottom:-14px; width:28px; height:28px; margin:0 0 0 -14px; background-size:13px;}
	#member .name{padding:21px 0 3px; font-size:16px;}
	#member .name span{display:block; line-height:130%; font-size:12px; font-weight:800;}
	#member .distr{display:none;}
	#member .more{top:-12px; margin:0 -135px 0 0;}
}
@media all and (max-width:380px) {
	#member{margin:43px 0 15px;}
	#member h4{font-size:19px;}
	#member h4:after{margin:15px auto 18px;}
	#member li{padding:0 0 12px; font-size:12px;}
	#member .img{width:59px;}
	#member .img:after{bottom:-12px; width:25px; height:25px; margin:0 0 0 -12px; background-size:12px;}
	#member .img img{height:82px;}
	#member .name{padding:19px 0 2px; font-size:15px;}
	#member .name span{font-size:11px;}
	#member .more{margin:0 -130px 0 0;}
}

.main_bottom{padding:50px 0; background:#eee;}

/* board */
.board{position:relative; float:left; width:31.666%; height:300px; padding:20px 28px; box-sizing:border-box; background:#fff;}
.board2{margin:0 0 0 2.5%;}
.board > li{float:left;}
.board > li + li{margin:0 0 0 14px;}
.board li h4{line-height:0; padding:0;}
.board li h4 a{z-index:1; display:block; position:relative; line-height:40px; padding:0 5px 0 3px; font-weight:200; font-size:23px; text-decoration:none; text-align:center;}
.board li h4 a:after{z-index:-1; content:''; visibility:hidden; opacity:0; display:block; position:absolute; bottom:0; left:0; width:0; height:17px; transition:width 0.25s ease-in-out; background:#d6eaed;}
.board li.on h4 a{font-weight:800;}
.board li.on h4 a:after{visibility:visible; opacity:1; width:100%;}
.board ul{position:absolute; top:86px; left:28px; width:calc(100% - 56px);}
.board1 ul{display:none;}
.board1 .on ul{display:block;}
.board ul li{position:relative; float:left; width:100%;}
.board ul li:first-child{border-top:none;}
.board ul li:before{top:50%; margin:-2px 0 0 0;}
.board ul li a{position:relative; float:left; width:100%; height:38px; padding:0 85px 0 0; font-size:15px; box-sizing:border-box; text-decoration:none;}
.board .tit{display:inline-block; vertical-align:middle; max-width:98%; padding:0 20px 0 0; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
.board .tit br{display:none;}
.board ul li:first-child .tit{font-weight:800;}
.board a:hover .tit{text-decoration:underline;}
.board .new{display:inline-block; width:18px; height:18px; line-height:18px; margin:-2px 0 0 -18px; font-size:10px; font-weight:800; text-transform:uppercase; text-align:center; color:#fff; border-radius:50%; background:#ffa517;}
.board .date{position:absolute; right:0; top:0; display:block; color:#666;}
.board .none{width:100%; padding:5em 0; text-align:center; background:none !important;}
.board .none:before,
.board .more{display:none;}
.board .on .more{display:block;}

@media all and (max-width:1024px){
	.main_bottom{padding:35px 0 40px;}

	.board{width:48.5%; height:280px; padding:22px 28px 0; margin-bottom:30px;}
	.board2{float:right;}
	.board li h4 a{line-height:36px; font-size:21px;}
	
	.board ul{top:77px;}
	.board ul li a{height:36px;}

	.board .date{font-size:15px;}
}
@media all and (max-width:768px){
	.main_bottom{padding:30px 0 35px;}

	.board li h4 a{font-size:20px;}
	.board ul li a{padding:0;}
	.board .date{display:none;}
	.board .more{top:17px; right:15px;}
}
@media all and (max-width:568px){
	.main_bottom{padding:25px 0 30px;}

	.board{width:100%; height:262px; padding:24px 28px 0; margin:0 0 25px;}
	.board li h4 a{line-height:30px; font-size:19px;}
	.board ul{top:74px;}
	.board ul li a{height:34px; padding:0 75px 0 0;}
	.board .date{display:block; font-size:14px;}
	.board .more{top:15px;}
}
@media all and (max-width:380px){
	.main_bottom{padding:23px 0 27px;}

	.board{height:248px; padding:22px 25px 0; margin:0 0 22px;}
	.board li h4 a{font-size:18px;}
	.board ul{top:70px; left:25px; width:calc(100% - 50px);}
	.board ul li a{height:32px; padding:0 70px 0 0;}
	.board .date{font-size:13px;}
	.board .more{right:10px;}
}

/* 의사일정 */
#agenda{float:right; width:31.666%; transition:box-shadow 0.25s ease-in-out; box-sizing:border-box; text-align:center; background:#fff;}
#agenda h4{z-index:1; position:relative; display:inline-block; line-height:37px; padding:22px 4px 0; font-size:25px;}
#agenda h4:after{z-index:-1; content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:17px; transition:0.2s ease-in-out; background:#d6eaed;}

#agenda .week_wrap{position:relative; clear:both; width:100%; height:241px; padding:24px 30px 0; box-sizing:border-box;}
#agenda .week_wrap .btns{z-index:3; display:block; position:absolute; top:23px; left:50%; margin:0 0 0 -137px;}
#agenda .week_wrap .btn_next{margin:0 0 0 110px;}
#agenda .date{height:40px; line-height:105%; font-size:22px; text-align:center; letter-spacing:-1px;}
#agenda .date p:not(:first-of-type){display:none;}
#agenda .date.slick-initialized p:not(:first-of-type){display:inline-block;}
#agenda .date strong{color:#c07600;}
#agenda .week {height:95px; font-size:19px; text-align:center; box-sizing:border-box;}
#agenda .week .list{display:inline-block; width:14%; line-height:120%; vertical-align:top;}
#agenda .week .sat{color:#1775d2;}
#agenda .week .sun{color:#ce4747;}
#agenda .week .list:not(:first-of-type){display:none;}
#agenda .week.slick-initialized .list:not(:first-of-type){display:inline-block;}
#agenda .week .list a{display:block; text-decoration:none;}
#agenda .week .list p{display:block; height:39px; line-height:39px; margin:0 0 15px; border-bottom:1px solid #eee;}
#agenda .week .list span{position:relative; display:inline-block; width:100%; line-height:100%; text-align:center; font-weight:400; font-size:20px;}
#agenda .week .today span:before,
#agenda .week .agenda span:after{z-index:-1; content:''; display:block; position:absolute; left:50%; top:-8px; width:6px; height:6px; margin:0 0 0 -3px;border-radius:50%; background:#ffa517;}
#agenda .week .agenda span:after{top:auto; bottom:-4px; width:27px; height:11px; margin:0 0 0 -13px; border-radius:0; transition:0.2s ease-in-out; background:#d7ebf4;}
#agenda .week .agenda a:hover span:after{height:23px;}
#agenda .txt_wrap{overflow:hidden; width:100%; height:54px; padding:0 90px 0 14px; font-size:15px; border:1px solid #f2dec2; background:#fff6e9; text-align:left; box-sizing:border-box;}
#agenda .txt_wrap *{vertical-align:top;}
#agenda .txt p{display:inline-block; width:100%; line-height:52px; max-width:98%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#agenda .txt p:before{content:''; display:inline-block; vertical-align:middle; width:5px; height:1px; margin:-2px 5px 0 0; background:#7d7a74;}
#agenda .txt .none{padding-right:0;}

#agenda .txt_wrap .control{z-index:55; position:absolute; bottom:43px; right:45px;}
#agenda .txt_wrap .control button{margin:0 0 0 1px; border:1px solid rgba(0,0,0,0.4); background:url(/images/kr/main/ico_ctrl.png) no-repeat 4px -40px;}
#agenda .txt_wrap .control .btn_next{background-position:-75px -41px;}
#agenda .txt_wrap .control .btn_stop{background-position:-36px -41px;}
#agenda .txt_wrap .control .btn_stop.on{background-position:-127px -41px;}

@media all and (max-width:1024px) {
	#agenda{width:100%;}
	#agenda h4{padding:20px 4px 0; font-size:23px;}
	#agenda .week_wrap{height:auto; padding:25px 26px 32px;}
	#agenda .week_wrap .btns{top:24px;}
	#agenda .week{height:auto; padding:0 0 15px;}
	#agenda .week .list p{height:34px; line-height:35px; font-size:18px;}
	#agenda .date{font-size:21px;}
	#agenda .txt_wrap .control{bottom:46px;}
	#agenda .btn_year{width:130px; height:37px; line-height:38px; border-radius:15px 0 0 0; font-size:15px;}
}
@media all and (max-width:768px) {
	#agenda h4{font-size:22px;}
}
@media all and (max-width:568px) {
	#agenda h4{line-height:30px; font-size:20px;}
	#agenda .date{font-size:20px;}
	#agenda .week_wrap{padding:25px 20px 28px;}
	#agenda .week{font-size:17px;}
	#agenda .week .list span{font-size:18px;}
	#agenda .week .list p{height:32px; line-height:33px; font-size:17px;}
	#agenda .txt_wrap .control{right:35px; bottom:43px;}
}
@media all and (max-width:380px) {
	#agenda h4{font-size:19px;}
	#agenda .date{height:34px; font-size:19px;}
	#agenda .week_wrap{padding:22px 18px 25px;}
	#agenda .week_wrap .btns{top:19px; margin:0 0 0 -127px;}
	#agenda .week_wrap .btn_next{margin:0 0 0 100px;}
	#agenda .week{font-size:16px;}
	#agenda .week .list span{font-size:17px;}
	#agenda .week .list p{height:29px; line-height:30px; margin:0 0 12px; font-size:15px;}
	#agenda .txt_wrap{height:51px;}
	#agenda .txt_wrap .control{bottom:38px;}
	#agenda .txt p{line-height:50px;}
}

/* 위원회 활동사진 */
#gallery{z-index:1; position:relative; overflow:hidden; width:100%; padding:80px 0; box-sizing:border-box; background:#384d6a url(/images/committee/main/bg.jpg) no-repeat 50% 0; background-size:cover;}
#gallery h4{position:absolute; top:0; left:539px; color:#fff;}
#gallery .view{position:absolute; top:0; right:0; width:122px; height:108px; padding:23px 0 0 0; color:#fff; text-align:center; border:1px solid #ffa517; box-sizing:border-box; text-decoration:none;}
#gallery .view:after{content:''; display:block; width:15px; height:15px; margin:14px auto 0; background:url(/images/committee/main/ico_ctrl.png) no-repeat 0 -172px;}
#gallery .view:hover:after{transform:rotate(360deg); transition:0.3s ease-in-out;}
#gallery .control {z-index:2; position:absolute; top:134px; left:537px;}
#gallery .control button{width:45px; height:45px; margin:0 11px 0 0; border-radius:50%;  box-shadow:3px 3px 5px rgba(0,0,0,0.2); background-color:#212634; background-position:14px -58px;}
#gallery .control button:hover{background-color:#ffa517;}
#gallery .control .btn_next{background-position:-43px -58px;}

#gallery .list_wrap{position:relative; overflow:hidden; width:100%;}
#gallery .list{float:left;}
#gallery .list *{display:block;}
#gallery .list a{color:#fff;}
#gallery .list .img{position:relative; overflow:hidden; float:left; width:503px;}
#gallery .list .sbj{float:left; width:34%; padding:55px 0 0 33px;}
#gallery .list .sbj strong{display:inline-block; width:100%; padding:0 0 2px; font-size:20px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#gallery .list .date:before{content:''; display:inline-block; vertical-align:middle; width:21px; height:16px; margin:-2px 0 0 0; background:url(/images/kr/main/ico_date.png) no-repeat;}
#gallery .list img{display:inline; max-width:503px; height:342px; transition:0.3s ease; box-sizing:border-box;}
#gallery .list a:hover .sbj strong{text-decoration:underline;}
#gallery .list a:active img,
#gallery .list a:hover img,
#gallery .list a:focus img{transform:scale(1.085);}

#gallery .next_wrap{position:absolute; left:535px; bottom:0; width:calc(100% - 535px);}
#gallery .next_wrap .img{width:202px; margin:0 29px 0 0;}
#gallery .next_wrap .img img{width:100%; max-height:144px;}
#gallery .next_wrap .tit{position:relative; width:100%; height:36px; line-height:36px; margin:-36px 0 0 0; padding:0 10px 0 19px; font-size:15px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(0,0,0,0.8); box-sizing:border-box;}
#gallery .slick-slide:not(.slick-current) .list:hover .tit{background:rgba(0,0,0,1);}
#gallery .next_wrap .slick-slide:not(.slick-current):hover,
#gallery .next_wrap .slick-slide:not(.slick-current):focus,
#gallery .next_wrap .slick-slide:not(.slick-current):active{cursor:pointer;}
#gallery .none{width:100%; padding:80px 0; color:#fff; text-align:center;}

@media all and (max-width:1230px){
	#gallery .view{right:15px;}
	#gallery h4,
	#gallery .control,
	#gallery .next_wrap{left:550px;}
	#gallery .next_wrap{width:calc(100% - 565px);}
}
@media all and (max-width:1024px){
	#gallery{padding:47px 0 65px;}
	#gallery .inner{padding:0 5px;}
	#gallery h4{position:static; padding:0 0 25px 10px; font-size:24px;}

	#gallery .list_wrap{position:static; width:100%;}
	#gallery .next_wrap{display:none;}
	#gallery .list a{margin:0 10px;}
	#gallery .list .img{width:100%; text-align:center;}
	#gallery .list img{height:184px; width:100%;}
	#gallery .list .sbj{position:relative; width:100%; padding:20px 10px 22px 20px; box-sizing:border-box; background:rgba(0,0,0,0.5);}
	#gallery .list .sbj strong{padding:0; font-size:16px;}
	#gallery .list .date{font-size:15px;}

	#gallery .control{top:-9px; left:auto; right:125px;}
	#gallery .control button{margin:0 5px 0 0;}
	#gallery .view{right:15px; top:-3px; width:100px; height:35px; line-height:33px; padding:0 0 0 12px; font-size:14px; text-align:left;}
	#gallery .view:after{position:absolute; right:10px; top:50%; margin:-8px 0 0 0;}
}
@media all and (max-width:768px){
	#gallery{padding:43px 0 60px;}
	#gallery h4{font-size:23px;}
	#gallery .list a{margin:0 6px;}
	#gallery .list img{height:138px;}
}
@media all and (max-width:568px){
	#gallery{padding:37px 0 53px;}
	#gallery h4{padding:0 0 21px 10px; font-size:21px;}
	#gallery .list strong{font-size:14px;}
	#gallery .list img{height:146px;}
	#gallery .list .sbj{padding:17px 10px 17px 15px;}
	#gallery .list .sbj strong{font-size:15px;}
	#gallery .list .date{font-size:14px;}
	#gallery .control{top:-8px; right:105px;}
	#gallery .control button{width:40px; height:40px; background-position:12px -60px;}
	#gallery .control .btn_next{background-position:-45px -60px;}
	#gallery .view{width:84px; height:32px; padding:0 0 0 10px; line-height:31px; font-size:13px;}
	#gallery .view:after{right:7px;}
}
@media all and (max-width:380px){
	#gallery{padding:34px 0 50px;}
	#gallery h4{padding:0 0 18px 10px; font-size:20px;}
	#gallery .list a{margin:0 5px;}
	#gallery .list strong{font-size:13px;}
	#gallery .list img{height:106px;}
	#gallery .list .sbj{padding:15px 7px 15px 13px;}
	#gallery .list .sbj strong{font-size:14px;}
	#gallery .list .date{font-size:13px;}
	#gallery .control{right:100px;}
	#gallery .view{width:80px; height:30px; line-height:29px; font-size:12px;}
}