@charset "utf-8";
#container_main{position:relative; overflow:hidden; width:100%;}

.main_top{padding:52px 0 45px 0; background:#e6f3f8 url(/images/kr/main/bg_visual.jpg) no-repeat 50% 0; background-size:cover;}
.main_top .inner{position:relative; padding:0 0 0 262px; box-sizing:border-box;}
.sec1{float:left; width:795px;}
.sec2{position:relative; float:right; width:303px; box-sizing:border-box;}

.more{z-index:2; position:absolute; top: 150px; right: 20px; display:block; width:43px; height:43px; font-size:14px; background: #449ebb; border-radius: 50%; color: #fff; padding: 11px 6px; box-sizing: border-box; transition: background 0.2s ease-in-out;}
.more:after{position: absolute; content:''; display:block; border: 1px dashed #449ebb; width: 53px; height: 53px; border-radius: 50%; top: -5px; left: -5px; }
.more:hover {color: #fff; text-decoration: none; background: #1b7897;}
.more:hover::after {border-color: #1b7897;}

@media all and (max-width:1430px) {
	img{max-width:100%;}
	.main_top .inner{padding:0 15px 0 20.7%;}

	.sec1{width:70.79%;}
	.sec2{width:26.53%;}
}
@media all and (max-width:1230px) {
	.main_top{padding:35px 0 40px;}
	.main_top .inner{max-width:1160px; padding:0 15px;}
}
@media all and (max-width:1024px) {
	.main_top{padding:17px 0 30px;}
	.sec1,
	.sec2{width:100%;}
}
@media all and (max-width:768px) {
	.main_top{padding:12px 0 25px;}
	.main_top .inner{padding:0 10px;}
}

.control:after{content:''; display:block; clear:both; width:100%;}
.control button{position:relative; float:left; width:18px; height:20px; font-size:0; text-indent:-9999px; background:url(/images/kr/main/ico_ctrl.png) no-repeat 4px -122px;}
.control .btn_next{background-position:-34px -122px;}
.control .btn_stop{background-position:-15px -122px;}
.control .btn_stop.on{background-position:-53px -122px;}
.control button:hover{background-color:rgba(0,0,0,0.03);}

/* 비주얼 */
#visual{position:relative; width:100%; height:364px; margin:0 0 30px; box-shadow:5px 10px 15px rgba(0,0,0,0.1);}
#visual .list_wrap *{vertical-align:top;}
#visual .list_wrap .list{position:relative; left:0; top:0;}
#visual .list_wrap .list:not(:first-of-type){display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;}
#visual .list img{height:364px; width:100%;}

#visual .control{z-index:2; position:absolute; bottom:0; left:50%; width:146px; height:38px; margin:0 0 0 -73px; border-radius:17px 17px 0 0; background:rgba(0,0,0,0.8); box-sizing:border-box;}
#visual .control *{display:inline-block; vertical-align:top;}
#visual .control button{width:20px;}
#visual .btn_prev{background-position:4px 3px;}
#visual .btn_next{background-position:-33px 3px;}
#visual .btn_stop{background-position:-14px 3px;}
#visual .btn_stop.on{background-position:-51px 3px;}

#visual .page_v{padding:0 12px 0 23px; line-height:38px; color:#fff; font-size:15px; font-weight:500;}
#visual .page_v .dash{display:inline-block; padding:0 5px;}
#visual .btns{padding:9px 0 0 0;}
#visual .slogan{z-index:1; position:absolute; top:62px; left:0; width:100%; line-height:150%; font-size:30px; color:#fff; text-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35); padding-left: 6.28%; font-weight: 500; box-sizing: border-box;}
#visual .slogan strong{color:#fffdc0; font-weight: 500;}
#visual .slogan strong.fz35{font-size: 35px;}

@media all and (max-width:1230px) {
	#visual .slogan{font-size:33px;}
}
@media all and (max-width:1024px) {
	#visual,
	#visual .list img{height:auto;}
	#visual .slogan{top:55px; font-size:31px;}
    #visual .slogan strong.fz35 {font-size: 31px;}
}
@media all and (max-width:768px) {
	#visual{margin:0 0 20px;}
	#visual .slogan{top:40px; font-size:26px;}
    #visual .slogan strong.fz35 {font-size: 26px;}
	#visual .control{height:33px; width:135px; margin:0 0 0 -67px; border-radius:14px 14px 0 0;}
	#visual .page_v{padding:0 8px 0 18px; line-height:34px; font-size:14px;}
	#visual .btns{padding:6px 0 0 0;}
}
@media all and (max-width:568px) {
	#visual .slogan{top:25px; font-size:20px;}
    #visual .slogan strong.fz35 {font-size: 20px;}
}
@media all and (max-width:380px) {
	#visual .slogan{top:20px; font-size:18px;}
    #visual .slogan strong.fz35 {font-size: 18px;}
	#visual .control{height:29px; width:125px; margin:0 0 0 -63px;}
	#visual .page_v{padding:0 8px 0 15px; line-height:30px; font-size:13px;}
	#visual .btns{padding:4px 0 0 0;}
}
@media all and (max-width:350px) {
	#visual .slogan{top:17px; font-size:17px;}
    #visual .slogan strong.fz35 {font-size: 17px;}

}

/* 현역의원 */
#member{float:left; position:relative; width:100%;}
#member *{vertical-align:top;}
#member .list{position:relative; float:left; width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:center;}
#member .list a{overflow:hidden; position:relative; display:inline-block; width:100px; margin:0 0 6px 15px;}
#member .list a:first-child,
#member .list a:nth-of-type(8){margin-left:0;}
#member .list a img{width:100%; height:109px;}
#member .list a span{z-index:1; overflow:hidden; display:block; position:absolute; bottom:0; left:0; width:100%; height:27px; line-height:27px; color:#fff; font-weight:400; font-size:13px; text-align:center; background:rgba(30,165,173,0.8); letter-spacing: -1.6px;}
#member .list a span:last-child {display: none;}
#member .list a span:before{content: ''; position:absolute; bottom:-50%; left:0; height:100%; width:110%; transform:skewY(9.5deg) scaleY(0); transform-origin:bottom center; transition:transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); background:linear-gradient(to right, #1f4ea3 0%,#547bc7 100%);}
#member .list a span:after{opacity:0; content:attr(data-text); position:absolute; right:0; left:0; color:#fff; text-align:center; transform:translate3d(0, 100%, 0); transition:all 0.55s cubic-bezier(0.48, 0, 0.12, 1);}
#member .list a:hover span:before{transform:skewY(9.5deg) scaleY(2);}
#member .list a:hover span:after{opacity:1; transform:translate3d(0, 0, 0);}
#member .list .tit{display:table; width:192px; height:109px; font-size:15px; text-align:center; box-shadow:3px 5px 10px rgba(0,0,0,0.1); color:#585858; background:#fff;}
#member .tit div{display:table-cell; vertical-align:middle;}
#member .tit p{display:inline-block; vertical-align:top; padding:0 0 0 9px; text-align:left;}
#member .tit p strong{display:block; font-size:23px; color:#2c9ba1;}

@media all and (max-width:1430px) {
	#member .list a{width:13.5%; margin:0 0.4% 6px 0.4%;}
}
@media all and (max-width:1250px) {
    #member .list a span {display: none;}
    #member .list a span:last-child {display: block;}
}
@media all and (max-width:1230px) {
	#member{margin:0 0 24px;}
}
@media all and (max-width:1024px) {
	#member .list a{margin:0 0.39% 6px;}
	#member .list a img{height:auto;}
	#member .list a:first-child,
	#member .list a:nth-of-type(8){margin:0 0.39% 6px;}
}
@media all and (max-width:768px) {
	#member{margin:0 0 15px;}
	#member .list a,
	#member .list a:first-child,
	#member .list a:nth-of-type(8){width:13%; margin:0 0.63% 6px 0.63%;}
	#member .tit{font-size:11px;}
	#member .list a span{height:19px; line-height:21px; font-size:12px;}
    
}
@media all and (max-width:568px) {
	#member .list a,
	#member .list a:first-child,
	#member .list a:nth-of-type(8){width:19%; margin:0 0.5% 5px;}
}
@media all and (max-width:380px) {
	#member .tit{font-size:10px;}
	#member .list a span{height:16px; line-height:18px; font-size:11px;}
}

/* 바로가기 */
#link {position:absolute; top:0; left:0; float:left; width:222px; height:618px; font-weight:400; text-align:center; border:1px solid #bdd5f2; box-shadow:5px 10px 15px rgba(0,0,0,0.07); background:#fff; box-sizing:border-box;}
#link ul{padding:1px 6px 0;}
#link li{display:inline-block; width:100%; margin:58px 0 0 0; vertical-align:top;}
#link li a{z-index:1; position:relative; display:block; padding:107px 0 0 0; line-height:20px;}
#link li a:before,
#link li a:after{z-index:1; content:''; position:absolute; top:0; left:50%; display:block; width:96px; height:96px; transform:translateX(-50%); border-radius:50%; border:3px solid #2350a6; box-sizing:border-box; transition:border 0.25s ease-in-out; background:#fff;}
#link li a:before{z-index:2; border:none; transition:none; background:url(/images/kr/main/ico_lnk1.png) no-repeat 50% 50%;}
#link li.list2 a:before{background-image:url(/images/kr/main/ico_lnk2.png);}
#link li.list3 a:before{background-image:url(/images/en/main/ico_lnk7.png);}
#link li a:hover:after,
#link li a:focus:after,
#link li a:active:after{border:3px dashed #2350a6;}
#link li a:hover:before{animation:ani_link 0.55s infinite ease-in-out;}

@keyframes ani_link {
	50%{transform:translate(-50%, 6px);}
}

@media all and (max-width:1430px) {
	#link{left:15px; width:17.642%;}
}
@media all and (max-width:1230px) {
	#link{position:static; width:100%; height:auto;}
	#link ul{padding:25px 10px;}
	#link li{width:16%; margin:0 8%;}
	#link li a{padding:95px 0 0 0;}
	#link li a:before,
	#link li a:after{width:83px; height:83px;}
	#link li a:before{background-size:auto 37px;}
}
@media all and (max-width:768px) {
	#link ul{padding:23px 5px; font-size:15px;}
	#link li a:before,
	#link li a:after{width:69px; height:69px;}
	#link li a:before{background-size:auto 34px;}
	#link li a{padding:77px 0 0 0;}
}
@media all and (max-width:568px) {
	#link ul{padding:19px 5px; font-size:14px;}
	#link li{width:32%;}
	#link li:nth-child(-n + 3){margin:0 0 14px;}
	#link li a:before,
	#link li a:after{width:65px; height:65px;}
	#link li a:before{background-size:auto 30px;}
	#link li a{padding:73px 0 0 0;}
}
@media all and (max-width:380px) {
	#link li a:before,
	#link li a:after{width:60px; height:60px;}
	#link li a:before{background-size:auto 28px;}
	#link li a{padding:68px 0 0 0;}
}

/* 열린의장실 */
#chairman{overflow:hidden; position:relative; width:100%; margin:0 0 30px; color:#fff; box-shadow:5px 10px 15px rgba(0,0,0,0.1); background:#1f7fa3 url(/images/kr/main/bg_chairman.jpg) no-repeat;}
#chairman .txt{z-index:1; position:relative; height:302px; max-width:180px; padding:35px 0 0 29px; box-sizing:border-box; font-weight:400; word-break:keep-all; text-shadow:2px 5px 7px rgba(0,0,0,0.35);}
#chairman h4{line-height:130%; color:#fff; font-size:23px;}
#chairman .name {line-height:180%; padding:19px 0 0 0; font-size:17px;}
#chairman .name strong{color:#fffdd6; font-size:19px;}
#chairman .pic{position:absolute; right:0; bottom:60px; text-align:right;}
#chairman .pic img{max-width:100%;}
#chairman .btns{overflow:hidden; width:100%;}
#chairman .btns a{float:left; position:relative; width:100%; height:60px; line-height:60px; font-weight:400; font-size:17px; text-align:center; color:#fff; background:#1f7fa3; box-sizing:border-box;}
#chairman .btns a:before{content:''; display:inline-block; vertical-align:middle; width:22px; height:22px; margin:-2px 10px 0 0; background:url(/images/kr/main/ico_chair2.png) no-repeat;}
#chairman .btns a:first-child:before{background-image:url(/images/kr/main/ico_chair1.png);}
#chairman .btns a:hover:before,
#chairman .btns a:focus:before,
#chairman .btns a:active: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) {
	#chairman{background-size:cover}
	#chairman .pic{width:70%;}
}
@media all and (max-width:1024px) {
	#chairman{float:left; width:55%;}
	#chairman h4{font-size:23px;}
    #chairman h4 br {display: none;}
	#chairman .pic{top:-10px;}
	#chairman .pic img{height:255px;}
	#chairman .txt{height:225px; max-width:70%; padding:30px 0 0 30px;}
	#chairman .name{padding:15px 0 0 0; line-height:150%; font-size:17px;}
	#chairman .name strong{line-height:130%; font-size:23px;}
    #chairman .name br:first-child,
    #chairman .name br:last-child {display: none;}
	#chairman .btns{position:absolute; bottom:0; left:0; width:calc(100% - 175px);}
	#chairman .btns a{height:55px; line-height:55px; font-size:16px;}
}
@media all and (max-width:768px) {
	#chairman{width:100%; margin:0 0 20px;}
	#chairman h4{font-size:22px;}
	#chairman .pic img{height:230px;}
	#chairman .txt{height:195px;}
	#chairman .name{padding:17px 0 0 0; font-size:16px;}
    #chairman .name strong {font-size: 20px;}
	#chairman .btns a{height:52px; line-height:53px; font-size:16px;}
}
@media all and (max-width:568px) {
	#chairman h4{font-size:21px;}
	#chairman .pic img{height:200px;}
	#chairman .txt{height:auto; max-width:265px; padding:25px 0 30px 23px;}
	#chairman .btns{position:relative; width:100%;}
	#chairman .btns a{height:48px; line-height:50px; font-size:15px;}
    #chairman .name strong {font-size: 18px;}
}
@media all and (max-width:380px) {
	#chairman h4{font-size:20px;}
	#chairman .pic img{height:195px;}
	#chairman .txt{padding:23px 0 27px 22px;}
	#chairman .name{padding:15px 0 0 0; font-size:15px;}
    #chairman .name strong {font-size: 16px;}
}

/* 의사일정 */
#agenda{position:relative; float:left; width:100%; height:225px; padding:12px 28px 0; box-shadow:5px 10px 15px rgba(0,0,0,0.1); border:1px solid #a6e9ff; background:#fff url(/images/en/main/bg_member.jpg) no-repeat bottom left;  box-sizing:border-box; }
#agenda h4{height:55px; line-height:55px; font-size:22px; font-weight:600; text-align: right;}
#agenda p {width: 135px; text-align: left; margin: 35px 0 0 auto;}

@media all and (max-width:1350px) {
	#agenda h4{letter-spacing:-2px;}

}
@media all and (max-width:1024px) {
	#agenda {float:none; float:right; width:42%;}

}
@media all and (max-width:768px) {
	#agenda{width:100%; height:auto; margin:0 0 20px; padding:10px 28px 23px; background-size: contain;}
	#agenda h4{height:45px; line-height:46px; font-size:21px; text-align: left;margin: 0 0 0 20%;}
    #agenda p {width: 220px; margin: 0 0 0 20%;}
    .more {top: 50%; transform: translateY(-50%);}

}
@media all and (max-width:568px) {
	#agenda{padding:10px 25px 23px;}
	#agenda h4{font-size:20px; }

}
@media all and (max-width:380px) {
	#agenda{padding:10px 22px 21px;}
	#agenda h4{height:43px; line-height:44px; font-size:19px; margin-left: 16%;} 
    #agenda p {margin-left: 16%;}
}