@charset "utf-8";
#container_main{position:relative;}
#container_main h4{font-size:20px; letter-spacing:-1px;}

.bx-controls *{display:inline-block; vertical-align:top;}
.bx-controls a{font-size:0; text-indent:-999px;}

.more{z-index:2; position:absolute; top:0; right:0; display:block; width:24px; height:24px; font-size:0; text-indent:-999px; border:1px solid #aaa; background:#fff; transition:background 0.3s;}
.more:before,
.more:after{content:''; display:block; position:absolute; top:11px; right:5px; width:14px; height:1px; transition:0.3s ease; background:#aaa;}
.more:after{top:5px; right:11px; width:1px; height:14px;}
.more:hover,
.more:focus,
.more:active{border-color:#555; background:#f9f9f9;}
.more:hover:before,
.more:focus:before,
.more:active:before,
.more:hover:after,
.more:focus:after,
.more:active:after{background:#555; transform:rotate(90deg);}

.control a{float:left; width:24px; height:24px; margin:0 0 0 -1px; font-size:0; text-indent:-9999px; border:1px solid #ccc; background:#fff url(/images/kr/main/bg_bullet.png) no-repeat 8px -663px;}
.control a:first-child{margin:0;}
.control .btn_next{background-position:8px -704px;}
.control .btn_stop{background-position:9px -744px;}
.control .btn_play,
.control .btn_stop.on{background-position:9px -781px;}
.control a:hover,
.control a:active,
.control a:focus{background-color:#f9f9f9;}

.sec2{position:relative; overflow:hidden; padding:0 0 62px 520px; box-sizing:border-box;}

#visual{position:relative; height:490px; width:100%; background:#f9f9ee; margin:0 0 41px;}
#visual li{position:absolute; top:0; left:50%; margin:0 0 0 -797px;}
#visual .bx-controls{display:none; z-index:56; position:absolute; top:20px; left:50%; width:1160px; margin:0 0 0 -580px; text-align:right; box-sizing:border-box;}
#visual .bx-controls a{width:16px; height:16px; background:url(/images/common/btn_w_control.png) no-repeat 0 -309px;}
#visual .bx-controls-direction {position:absolute; top:0; right:0; display:block;}
#visual .bx-controls-direction a{position:absolute; left:0; top:0;}
#visual .bx-controls-direction .bx-next{right:0; left:auto; background-position:100% -279px;}
#visual .bx-pager {padding:0 40px 0 20px;}
#visual .bx-pager a{position:relative; width:10px; height:10px; margin:0 5px; background:#fff; border-radius:50%; transition:0.3s ease;}
#visual .bx-pager .active{width:40px; border-radius:10px; background:#333e58;}
#visual .bx-controls-auto {position:absolute; right:20px; top:0;}
#visual .bx-controls-auto .bx-start{background-position:3px -342px}
#visual .bx-controls-auto .bx-stop{background-position:2px -244px}
#visual .bx-controls-auto .active{display:none;}
#visual .slogan{z-index:55; position:absolute; top:83px; left:50%; margin:0 0 0 -600px; letter-spacing:-1px; line-height:130%; font-weight:800; font-size:35px; color:#fff; text-shadow:1px 2px 2px #111;}
#visual .slogan div{font-size:43px; color:#ffe18f;}
@keyframes scale {
	50%{transform:scale(1.06);}
}

/* 열린의장실 */
#chairman {position:absolute; top:0; left:0; width:478px; height:287px; letter-spacing:-1px; color:#fff; background:#005aab url(/images/kr/main/bg_chairman.gif) no-repeat 100% 0;}
#chairman:before{z-index:-1; content:''; display:block; position:absolute; top:10px; left:10px; width:100%; height:100%; background:url(/images/kr/main/bg_chairman2.gif) repeat;}
#chairman .pic{z-index:1; position:absolute; left:0; bottom:0;}
#chairman .txt {z-index:2; position:relative; display:block; padding:95px 0 0 195px; line-height:160%; word-break:break-all;}
#chairman .txt .greeting{padding:0 0 28px;}
#chairman .txt .greeting strong{font-weight:700; font-size:18px; color:#f9d05f;}
#chairman .btns {padding:0 0 0 85px;}
#chairman .btns a{overflow:hidden; position:relative; display:block; width:152px; line-height:33px; padding:0 48px 0 43px; border:1px solid #b3cee6; font-size:13px; color:#fff; box-sizing:border-box;}
#chairman .btns a:first-child{margin:0 0 10px;}
#chairman .btns a:before,
#chairman .btns a:after{z-index:-1; content:''; display:block; position:absolute;  top:0; left:-130%; width:120%; height:100%; background:#1b4273;}
#chairman .btns a:after{top:15px; left:auto; right:44px; width:11px; height:5px; transition:0.3s ease-in; background:url(/images/kr/main/bg_bullet.png) no-repeat 0 -368px;}
#chairman .btns a:hover:before,
#chairman .btns a:focus:before,
#chairman .btns a:active:before{animation-name:onHover;}
#chairman .btns a:hover:after,
#chairman .btns a:focus:after,
#chairman .btns a:active:after{right:30px;}
#chairman .btns a:before{transform:skew(-25deg); animation:outHover 0.5s ease 1 forwards;}

@keyframes onHover {
	from{left:-130%;}
	to{left:-10%;}
}
@keyframes outHover {
	from{left:-10%;}
	to{left:-130%;}
}

/* 현역의원 */
#member {z-index:1; position:relative; clear:both; width:100%; height:344px; text-align:center; background:#e4ebf2 url(/images/kr/main/bg.gif) repeat-x 50% 100%; background-size:cover;}
#member h4{padding:44px 0 50px; line-height:100%;}
#member .info{margin:0 0 28px; font-size:15px; color:#777; letter-spacing:-1px;}
#member .list li{display:inline-block; padding:3px 3px 0 3px;}
#member .pic{display:block; overflow:hidden; width:131px; height:131px; border-radius:50%; box-shadow:0 0 0 2px #aaa; transition:box-shadow 0.3s ease-in-out; background:#fff;}
#member .pic img{margin:-4px 0 0 0;}
#member .name {display:block; padding:8px 0 0 0; line-height:150%; font-size:14px;}
#member .name em{display:block; font-size:16px; font-weight:400;}
#member a:hover .pic,
#member a:focus .pic,
#member a:active .pic{box-shadow:0 0 0 3px #f58220;}
#member .bx-controls{display:none;}

#quick {float:right; width:100%; letter-spacing:-1px;}
#quick h4{position:relative; line-height:49px; padding:0 0 0 60px;}
#quick h4:before{z-index:2; content:''; position:absolute; top:0; left:25px; display:block; width:15px; height:100px; background:#e2b742;}
#quick .list{position:relative; width:100%; height:248px; padding:52px 0 0 40px; box-sizing:border-box; background:url(/images/kr/main/bg_quick.gif) repeat;}
#quick .list:before{content:''; display:block; position:absolute; top:10px; left:10px; width:calc(100% - 20px); height:calc(100% - 20px); background:#fff;}
#quick li{display:inline-block; width:32%; padding:0 0 30px 7px; vertical-align:top; box-sizing:border-box;}
#quick li a{z-index:1; position:relative; display:block; height:60px; line-height:120%; padding:17px 0 0 70px; font-size:17px; color:#555; font-weight:400; box-sizing:border-box;}
#quick li.list5 a{padding-top:20px;}
#quick li a:before{z-index:1; content:''; display:block; position:absolute; top:0; left:0; width:60px; height:60px; border:2px solid #dfdfdf; border-radius:50%; transition:0.3s ease-out; box-sizing:border-box; background:url(/images/kr/main/ico_link1.png) no-repeat 14px 14px;}
#quick li.list2 a:before{background-image:url(/images/kr/main/ico_link2.png);}
#quick li.list3 a:before{background-image:url(/images/kr/main/ico_link5.png);}
#quick li.list4 a:before{background-image:url(/images/kr/main/ico_link4_new.png);}
#quick li.list5 a:before{background-image:url(/images/kr/main/ico_link6.png);}
#quick li.list6 a:before{background-image:url(/images/kr/main/ico_link3.png);}
#quick li a:focus,
#quick li a:hover,
#quick li a:active{color:#dca610;}
#quick li a:focus:before,
#quick li a:hover:before,
#quick li a:active:before{border-color:#f0d488; background-position:14px -31px;}

@media all and (max-width:1220px) {
	#visual .slogan{left:10px; margin:0;}
	#visual .bx-controls{left:auto; right:10px; width:auto; margin:0;}

	#member h4{padding:30px 0 30px;}
	#member .bx-controls{display:block; padding:17px 0 0 0;}
	#member .bx-controls a{position:relative; line-height:24px; padding:0 45px 0 20px; margin:0 2px 0 2px; color:#fff; font-size:12px; text-indent:0; text-transform:uppercase; border-radius:24px; box-sizing: border-box; text-align:left; background:#d49e0d;}
	#member .bx-controls a:before{content:''; display:block; position:absolute; top:9px; right:19px; width:14px; height:8px; transition:0.3s ease; background:url(/images/kr/main/bg_bullet.png) no-repeat 0 -395px;}
	#member .bx-controls .bx-prev{padding:0 20px 0 45px;}
	#member .bx-controls .bx-prev:before{top:8px; right:auto; left:19px; transform:rotate(180deg);}
	
	#quick .list{padding-top:25px;}
	#quick li{width:45%; padding:0 0 13px 5%;}
}
@media all and (max-width:1024px) {
	
	#visual{height:auto; margin:0;}
	#visual li{left:0; margin:0;}
	#visual .slogan{top:35px; font-size:28px; text-shadow:1px 1px 1px #000;}
	#visual .slogan div{font-size:35px;}
	#visual .bx-controls{top:auto; bottom:5px; right:auto; left:50%; transform:translateX(-50%);}
	#visual .bx-pager .active{background:#ffd153;}

	.sec2{padding:0;}

	#chairman{position:relative; width:calc(100% - 10px); height:225px; margin:10px 0;}
	#chairman .txt{padding-top:70px;}
	#chairman .txt .greeting{padding:0 0 20px;}
	#chairman .txt .greeting br{display:none;}
	#chairman .pic img{height:225px;}

	#member{height:auto; padding:0 0 30px;}
	#member .name{line-height:130%;}
	
	#quick {margin:0 0 10px;}
	#quick h4{padding:0; text-align:center;}
	#quick h4:before{display:none;}
	#quick .list{height:auto; padding:0; background:none;}
	#quick .list:before{display:none;}
	#quick li{width:49.2%; padding:0 0 3px 1px;}
	#quick li a{height:auto; line-height:38px; padding:0 0 0 52px; font-size:15px; border-radius:4px; border:1px solid #c1ddf5; background:rgba(165, 194, 231, 0.3);}
	#quick li.list5 a{padding-top:0;}
	#quick li a:before{width:40px; height:38px; border-radius:4px 0 0 4px; border:none; border-right: 1px solid #c1ddf5; background-color:rgba(255,255,255,0.4); background-size:26px auto; background-position:6px 5px;}
	#quick li a:focus:before,
	#quick li a:hover:before,
	#quick li a:active:before{background-position:6px -37px;}
}
@media all and (max-width:768px) {
	#visual .slogan{top:25px; font-size:22px;}
	#visual .slogan div{font-size:28px;}
	
	#chairman,
	#chairman .pic img{height:190px;}
	#chairman{margin:7px 0;}
	#chairman .txt{padding-top:40px; line-height:130%;}
	#chairman .txt .greeting br{display:inline-block;}
	#chairman .btns a:first-child{margin:0 0 5px;}

	#quick{margin:0 0 7px;}

	#member{padding:0 0 25px;}
	#member h4{padding:25px 0 20px;}
		
}
@media all and (max-width:568px) {
	#container_main h4{font-size:19px;}

	#visual .slogan{top:15px; font-size:18px;}
	#visual .slogan div{font-size:23px;}

	#chairman,
	#chairman .pic img{height:170px;}
	#chairman .txt{padding:35px 0 0 34%;}
	#chairman .btns{padding:0 0 0 35px;}
	#chairman .btns a{line-height:30px;}
	#chairman .txt .greeting strong{font-size:17px;}
	
	#member{padding:0 0 23px;}
	#member h4{padding:23px 0 17px;}
	#member .list li{width:120px !important;}
	#member .pic{width:120px; height:120px;}
	#member .pic img{height:135px;}
	
	#quick li{width:100%;}
	#quick li a{line-height:35px; font-size:14px;}
	#quick li a:before{height:35px; background-position:6px 4px;}
}
@media all and (max-width:400px) {
	#container_main h4{font-size:18px;}

	#visual .slogan{top:10px; font-size:16px;}
	#visual .slogan div{font-size:21px;}

	#chairman{font-size:13px;}
	#chairman, #chairman .pic img{height:160px;}
	#chairman .btns{padding:0 0 0 25px;}
	#chairman .txt .greeting strong{font-size:16px;}
	
	#quick li a{font-size:13px;}
	
	#member{padding:0 0 20px;}
	#member h4{padding:20px 0 16px;}
}