@charset "utf-8";
#container_main{position:relative; background:url(/images/kr/main/bg_sec.jpg) repeat;}
#container_main h4{font-size:24px; font-weight:800;}
#container_main h4 span{font-weight:400 !important;}
#container_main .info{font-size:14px; color:#555;}

.control a{position:relative; float:left; width:24px; height:24px; margin:0 0 0 -1px; font-size:0; text-indent:-9999px; border:1px solid #aeaeae; background:#fff url(/images/kr/main/ico_bullet.png) no-repeat 8px -501px;}
.control .btn_next{transform:rotateY(180deg);}
.control .btn_stop{background-position:9px -435px;}
.control .btn_play,
.control .btn_stop.on{background-position:9px -471px;}
.control a:hover{z-index:1; border-color:#777; background-color:rgba(255,255,255,0.15);;}
.control .more:hover,
.control .more:focus,
.control .more:active{transform:none;}

#visual{position:relative; height:490px; background:#005596;}
#visual .list_wrap *{vertical-align:top;}
#visual .list_wrap .list{position:relative;}
#visual .list_wrap .list:not(:first-of-type){display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type){display:block;} 
#visual .list_wrap .list img{margin:0 auto;}
#visual button{display:inline-block; padding:0; font-size:0; text-indent:-999px;}
#visual .control,
#visual .slick-dots{z-index:2; position:absolute; top:65%; left:50%; margin:0 0 0 -600px; line-height:100%;}

#visual .slick-dots{margin:3px 0 0 -520px;}
#visual .slick-dots *{display:inline-block; vertical-align:top;}
#visual .slick-dots li{line-height:0;}
#visual .slick-dots button{position:relative; width:11px; height:11px; margin:0 8px; border-radius:50%; transition:0.3s ease; box-sizing:border-box; background:#fff;}
#visual .slick-dots button:before{content:''; top:50%; left:50%; width:0; height:0; transition:0.3s ease;}
#visual .slick-dots .slick-active button{background:#edcb58;}
#visual .slick-dots .slick-active button:before{position:absolute; top:-6px; left:-6px; width:23px; height:23px; border:1px solid #fff; border-radius:50%; box-sizing:border-box;}

#visual .control{height:20px;}
#visual .control a{display:inline-block; z-index:54; width:18px; height:17px; margin:0 7px 0 0; border:none; background:url(/images/common/btn_w_control.png) no-repeat 5px 0;}
#visual .control .btn_stop{margin:0; background-position:2px -242px}
#visual .control .btn_stop.on{background-position:3px -199px;}

.slogan{position: absolute; top:65px; left:50%; margin:0 0 0 -600px; color:#fff; word-break:keep-all;}
.slogan div{padding:0 0 12px; line-height:120%; font-size:40px; font-weight:400; letter-spacing:-2px;}
.slogan div strong{font-weight:800;}
.slogan p{line-height:140%; color:rgba(255,255,255,0.7);}

.sec{padding:70px 0;}
.sec > div,
.sec2 > div{box-shadow:6px 10px 10px rgba(0,0,0,0.075);}

.sec2{position:relative; clear:both; width:100%; padding:0 470px 0 0; box-sizing:border-box;}

/* 현역의원 */
#member{position:absolute; top:0; right:50%; margin:0 -600px 0 0; width:550px; height:490px; background:rgba(255,255,255,0.8);}
#member .tit{z-index:1; position:absolute; bottom:55px; right:5px; width:215px;}
#member h4{padding:0 0 15px; color:#143354;}
#member h4 span{display:block; padding:0 0 3px; font-size:16px; color:#666;}
#member *{vertical-align:top;}
#member .list{position:relative; overflow:hidden; width:100%; padding:55px 0 0 30px; box-sizing:border-box;}
#member .list a{overflow:hidden; position:relative; float:left; width:90px; margin:0 10px 10px 0;}
#member .list a img{width:100%; height:120px;}
#member .list a span{display:block; position:absolute; bottom:-25px; left:0; width:100%; height:25px; line-height:25px; color:#fff; font-size:12px; text-transform:uppercase; text-align:center; transition:bottom 0.3s ease; background:rgba(0,0,0,0.7);}
#member .list a span:after{content:''; display:inline-block; width:12px; height:12px; margin:0 0 0 3px; background:url(/images/kr/main/ico_bullet.png) no-repeat 0 -138px;}
#member .list a:hover span,
#member .list a:focus span,
#member .list a:active span{bottom:0;}
#member .more{position:relative; display:block; width:90%; line-height:100%; color:#555; font-size:14px; text-align:right;}
#member .more:hover,
#member .more:focus,
#member .more:active{text-transform:uppercase;}
#member .more:before,
#member .more:after{content:''; display:block; position:absolute; bottom:5px; left:0; width:calc(100% - 43px); height:1px; transition:0.3s ease; background:rgba(20,51,84,0.4);}
#member .more:after{opacity:0; left:auto; right:37px; width:1px; height:0; transform:rotate(-45deg); background:#687584;}
#member .more:hover:after{opacity:1; right:47px; height:10px;}

/* 열린의장실 */
#chairman{position:relative; float:right; width:36.666%; height:240px; margin:0 0 30px; box-sizing:border-box; background:#25568f url(/images/kr/main/bg_chairman.jpg) no-repeat;}
#chairman .txt {padding:40px 0 0 195px; font-size:20px; color:#fff;  word-break:keep-all;}
#chairman .txt strong{font-weight:400;}
#chairman .txt span{color:#f4d360;}
#chairman .btns{padding:30px 0 0 0; font-size:13px;}
#chairman .btns a{position:relative; display:block; width:152px; height:40px; line-height:40px; margin:0 0 7px; padding:0 49px 0 0; text-align:right; transition:background-color 0.3s ease-in-out;  background:#224265; box-sizing:border-box;}
#chairman .btns a:hover{background:#143354;}
#chairman .btns a:before{content:''; display:block; position:absolute; top:17px; right:22px; width:10px; height:5px; transition:0.3s ease-in; background:url(/images/kr/main/ico_bullet.png) no-repeat 0 -592px;}
#chairman .btns a:hover:before,
#chairman .btns a:focus:before,
#chairman .btns a:active:before{right:14px;}
#chairman .pic{z-index:1; position:absolute; left:0; bottom:0;}
#chairman .greeting{position:relative; display:block;}
#chairman a{display:block; color:#fff; text-decoration:none;}

/* 바로가기 */
#quick{position:relative; float:left; width:60.83%; height:240px; padding:54px 0 0 0; text-align:center; box-sizing:border-box; background:#fff; box-shadow:6px 10px 10px rgba(0,0,0,0.075);}
#quick li{position:relative; display:inline-block; width:24%; line-height:120%; vertical-align:top;}
#quick li a{z-index:1; position:relative; display:block; padding:110px 0 0 0; font-size:18px; font-weight:400; color:#fff; text-shadow:1px 1px 4px #000;}
#quick li a:before,
#quick li a:after{content:''; display:block; position:absolute; top:0; left:50%; width:100px; height:100px; border-radius:50%; margin:0 0 0 -50px; background:url(/images/kr/main/ico_quick.png) no-repeat 26px 26px;}
#quick li a:after{z-index:-1; box-shadow:inset 0 0 0 2px #f4d360; background:none; transition:0.5s ease-in-out;}
#quick li.list2 a:before{background-position:-145px 26px;}
#quick li.list3 a:before{background-position:-315px 26px;}
#quick li.list4 a:before{background-position:-485px 26px;}
#quick li.list5 a:before{background-position:-655px 26px;}
#quick li a:hover{text-shadow:1px 1px 2px #000;}
#quick li a:hover:after,
#quick li a:focus:after,
#quick li a:active:after{box-shadow:inset 0 0 0 80px #f4d360;}

@media all and (max-width:1220px) {
	#visual .control, #visual .slick-dots{left:0; top:auto; bottom:40px; margin:0;}
	#visual .slick-dots{left:80px;}

	.slogan{left:2%; width:calc(100% - 600px); margin:0;}
	.slogan div br{display:none;}
	
	#member{right:2%; margin:0;}
	
	#chairman .txt{padding-left:42%;}
	#chairman .pic{max-width:45%;}
	#chairman img{max-width:100%;}
	
	#quick:before{left:0; margin:0; border-top-width:750px; border-left-width:330px;}
}
@media all and (max-width:1024px) {
	#container_main h4{font-weight:800; font-size:23px;}
	#container_main .info{font-size:13px;}

	.sec{padding:30px 0 0 0;}
	
	#visual{height:auto;}
	#visual .list_wrap .list img{max-width:100%;}
	#visual .control, #visual .slick-dots{bottom:20px;}
	
	.slogan{top:15px; width:90%; font-size:15px;}
	.slogan div{padding:0 0 5px; font-size:27px;}

	#member{position:static; width:96%; height:auto; margin:30px auto 0; box-shadow:6px 10px 10px rgba(0,0,0,0.075); text-align:center; background:#fff;}
	#member .tit{position:static; width:100%;}
	#member h4{padding:20px 0 5px;}
	#member h4 span{padding:0 7px 0 0; font-size:14px;}
	#member h4 span br{display:none;}
	#member .list{padding:17px 15px 15px;}
	#member .list a{float:none; display:inline-block; margin:0 4px 10px 4px;}
	#member .more{width:97%;}
	#member .more:before{left:35px; width:calc(100% - 78px);}

	#chairman{width:100%;}
	#chairman,
	#chairman .pic img{height:205px;}
	#chairman .btns a{display:inline-block; margin:0 5px 0 0;}

	#quick{height:auto; width:100%; padding:23px 0; margin:0 0 30px;}
	#quick li a{padding:96px 0 0 0; font-size:17px;}
	#quick li a:before, #quick li a:after{width:88px; height:88px; margin:0 0 0 -44px; background-position:21px 18px;}
	#quick li:nth-child(2) a:before{background-position:-148px 20px;}
	#quick li:nth-child(3) a:before{background-position:-320px 20px;}
	#quick li:nth-child(4) a:before{background-position:-489px 20px;}
	#quick li:nth-child(5) a:before{background-position:-659px 20px;}
	
}
@media all and (max-width:768px) {
	.sec{padding:20px 0 0 0;}

	#visual .control, #visual .slick-dots{bottom:15px;}
	#visual .control{padding:0 0 0 8px;}

	.slogan{top:18px; font-size:14px;}
	.slogan div{padding:0 0 5px; font-size:24px; letter-spacing:-1px;}
	.slogan div br{display:none;}
	.slogan p{display:none;}

	#member{margin-top:20px;}
	#member h4{font-size:22px;}
	#member h4 span{padding:0 5px 0 0;}
	#member .list{padding:13px 13px 20px;}
	#member .list a {width:70px; margin:0 1px 5px 2px;}
	#member .list a img{height:93px;}
	#member .list a span{height:22px; line-height:22px; font-size:12px;}
	
	#chairman{margin:0 0 20px;}
	#chairman, #chairman .pic img{height:195px;}
	#chairman .txt{padding-left:40%; font-size:19px;}
	
	#quick{margin:0 0 20px;}
	#quick h4 img{height:52px;}
	#quick li a{font-size:16px;}
}
@media all and (max-width:580px) {
	#member h4{padding:18px 0 0 0;}
	#member h4 span{font-size:13px;}
	#member .list{padding:11px 10px 17px;}
	#member .list a {width:65px;}
	#member .list a img{height:86px;}
	#member .list a span{font-size:11px;}
	#member .list a span:after{vertical-align:top; height:100%; background-position:0 -134px;}
}
@media all and (max-width:568px) {
	#container_main .info{font-size:12px;}

	#visual .control, #visual .slick-dots{bottom:12px;}

	.slogan{top:10px; font-size:13px;}
	.slogan div{font-size:18px;}

	#member h4{font-size:21px;}
	#member .more:before{left:20px; width:calc(100% - 60px);}

	#chairman, #chairman .pic img{height:193px;}
	#chairman .txt{padding:25px 0 0 42%; font-size:18px;}
	#chairman .txt strong img{height:18px; margin:0 0 3px;}
	#chairman .btns{padding:25px 0 0 0;}
	#chairman .btns a{display:block; height:37px; line-height:38px; margin:0 0 2px;}
	
	#quick h4 img{height:49px;}
	#quick li a{padding:75px 0 0 0; font-size:15px;}
	#quick li a:before, #quick li a:after{width:70px; height:70px; margin:0 0 0 -35px; background-size:auto 44px; background-position:17px 15px;}
	#quick li:nth-child(2) a:before{background-position:-123px 15px;}
	#quick li:nth-child(3) a:before{background-position:-262px 15px;}
	#quick li:nth-child(4) a:before{background-position:-400px 15px;}
}
@media all and (max-width:400px) {
	#container_main .info{font-size:11px;}

	.sec{padding:17px 0 0 0;}

	.slogan div{font-size:16px;}
	
	#member{margin-top:17px;}
	#member h4{font-size:20px;}
	#member .list{padding:9px 8px 15px;}

	#chairman,
	#quick{margin:0 0 17px;}
	#chairman, #chairman .pic img{height:190px;}
	#chairman .txt img{max-width:95%;}
	#chairman .txt{padding:25px 0 0 40%; font-size:17px;}
	#chairman .txt br{display:none;}
		
	#quick h4 img{height:44px;}
	#quick li a{font-size:14px;}
}
@media all and (max-width:383px) {
	#member .list{padding:10px 2.1% 12px;}
	#member .list a{width:54px;}
	#member .list a img{height:72px;}
}