@charset "utf-8";
.slick-slide img{display:inline;}

#container_main{position:relative; overflow:hidden; width:100%;}
#container_main h4,
#container_main h3{z-index:1; position:relative; line-height:110%; font-size:28px; color:#333;}

@media all and (max-width:1024px) {
	#container_main h4,
	#container_main h3{font-size:25px; letter-spacing:-2px;}
}
@media all and (max-width:768px) {
	#container_main h4,
	#container_main h3{font-size:23px;}
}
@media all and (max-width:568px) {
	#container_main h4,
	#container_main h3{font-size:21px;}
}
@media all and (max-width:380px) {
	#container_main h4,
	#container_main h3{font-size:20px;}
}


.more{z-index:1; position:absolute; top:0; right:0; display:block; width:36px; height:36px; border:1px solid #ddd; border-radius:50%; font-size:0; text-indent:-999px; transition:0.25s ease-in-out; background:url(/images/kr/main/ico_ctrl.png) no-repeat -94px -90px; box-sizing:border-box;}
.more:hover{border-color:#888;}

.control:after{content:''; display:block; clear:both; width:100%;}
.control button{position:relative; float:left; width:36px; height:36px; margin:0 0 0 5px; font-size:0; text-indent:-9999px; box-sizing:border-box; border:1px solid #ddd; border-radius:50%; background:url(/images/kr/main/ico_ctrl.png) no-repeat 6px -57px;}
.control .btn_next,
.control .slick-next{background-position:-31px -57px;}
.control .btn_stop{background-position:-67px -57px;}
.control .btn_stop.on{background-position:-127px -56px;}
.control button:hover{border-color:#888;}
.control .more{background-position:-93px -59px;}

.main_top{padding:50px 0 42px 0; background:#e5f3f1 url(/images/kr/main/bg.jpg) no-repeat 50% 0; background-size:cover;}
.main_top .inner{position:relative; padding:0 0 0 277px; box-sizing:border-box;}

@media all and (max-width:1430px) {
	img{max-width:100%;}
	.main_top .inner{padding:0 15px 0 20.7%;}
}
@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 35px;}
}
@media all and (max-width:768px) {
	.main_top{padding:12px 0 35px;}
	.main_top .inner{padding:0 10px;}
}

.main_bottom .unit{position:relative; float:left; width:100%; padding:0 472px 0 0; box-sizing:border-box;}
.main_bottom .unit:after{content:''; display:block; clear:both; width:100%;}

@media all and (max-width:1280px) {
	.main_bottom .unit{padding-right:470px;}
}
@media all and (max-width:1024px) {
	.main_bottom .unit{padding:0 365px 0 0;}
}
@media all and (max-width:768px) {
	.main_bottom{padding:0 10px 35px;}
	.main_bottom .unit{padding:0;}
}

/* 비주얼 */
#visual{position:relative; float:left; width:69.725%; height:391px; 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:not(:first-of-type){display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;}
#visual .list img{height:391px; width:100%;}

#visual .control{z-index:2; position:absolute; bottom:0; left:50%; width:195px; height:38px; padding:0 0 0 17px; margin:0 0 0 -97px; border-radius:17px 17px 0 0; background:rgba(0,0,0,0.8); box-sizing:border-box;}
#visual .control button{display:block; border-radius:0; border:none;}
#visual .btn_prev{width:35px; background-position:2px 0;}
#visual .btn_next{width:35px; background-position:-124px 0;}
#visual .btn_stop{width:17px; background-position:-98px -1px;}
#visual .btn_stop.on{background-position:-59px -1px;}

#visual .page_v{float:left; padding:0 12px; line-height:38px; color:#b0afaf; font-size:15px; font-weight:500;}
#visual .page_v .dash{display:inline-block; padding:0 6px; font-weight:200;}
#visual .page_v .current{color:#fff;}
#visual .btns{padding:9px 0 0 0;}

@media all and (max-width:1024px) {
	#visual{width:100%;}
	#visual,
	#visual .list img{height:auto;}
}
@media all and (max-width:768px) {
	#visual{margin:0 0 20px;}
}

/* 현역의원 */
#member{float:left; position:relative; width:100%;}
#member *{vertical-align:top;}
#member .small_list{position:relative; float:left; width:69.725%; box-sizing:border-box; display:flex; flex-wrap:wrap; text-align:left;}
#member .small_list > a{overflow:hidden; position:relative; display:inline-block; width:79px; margin:0 0 18px 9px; box-shadow:10px 10px 15px rgba(0,0,0,0.1);}
#member .small_list a:nth-of-type(9n + 1){margin-left:0;}
#member .small_list a img{width:100%; height:117px;}
#member .small_list a span{z-index:1; overflow:hidden; display:block; position:absolute; bottom:0; left:0; width:100%; height:25px; line-height:25px; color:#fff; font-size:14px; text-align:center; background:rgba(5,40,62,0.8);}
#member .small_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:rgba(31,176,207,0.8);}
#member .small_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 .small_list a.active span:before,
#member .small_list a:hover span:before{transform:skewY(9.5deg) scaleY(2);}
#member .small_list a.active span:after,
#member .small_list a:hover span:after{opacity:1; transform:translate3d(0, 0, 0);}
#member .title{position:absolute; bottom:18px; right:0; width:167px; height:117px; margin:0 0 0 9px; text-align:center; box-shadow:10px 10px 15px rgba(0,0,0,0.1); background:#fff;}
#member .title p{display:inline-block; vertical-align:top; padding:16px 0 0 0; font-size:15px;}
#member .title p span{text-transform:uppercase;}
#member .title p strong{display:block; font-size:18px;}
#member .control {padding:8px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center; text-align:center;}
#member .control button,
#member .control a{width:31px; height:31px; margin:0 5px 0 0; background-color:#fff;}
#member .control .more{position:static; float:left; background-position:-106px -59px; border-color:#375365; background-color:#375365;}
#member .btn_prev{background-position:3px -59px;}
#member .btn_next{background-position:-34px -59px;}
#member .btn_stop{background-position:-70px -59px;}
#member .btn_stop.on{background-position:-130px -59px;}

#member .big_list{float:right; width:27.6%; height:252px; background: #fff url(/images/en/main/bg_member.jpg) no-repeat 100% 100%; box-shadow:10px 10px 15px rgba(0,0,0,0.1);}
#member .pic{position:absolute; top:21px; right:31px; overflow:hidden; border:5px solid #cbd7d9; box-sizing:border-box;}
#member .pic img{width:101px;}
#member .txt{position:relative; padding:28px 0 0 10%; line-height:110%; font-size:15px; font-weight:300;}
#member .txt .name{line-height:110%; font-size:17px; font-weight:600;}
#member .txt ul{padding:7px 0 6px;}
#member .txt li{width:100%; padding:1px 0 9px 0;}
#member .btns{overflow:hidden; width:100%; margin: 15px 0 0;}
#member .btns a{position:relative; float:left; display:block; width:156px; height:43px; line-height:41px; color:#fff; border-radius:21px; background:#3b9697; text-align:center;}
#member .btns a:before{content:''; display:inline-block; vertical-align:middle; width:24px; height:14px; margin:-3px 0 0 0; background:url(/images/en/main/ico_home.png) no-repeat;}
#member .btns a:hover{background:#008595;}

#member .sns{overflow:hidden; width:100%; padding:0 0 7px;}
#member .sns a{float:left; width:28px; height:28px; margin:0 4px 0 0; border-radius:50%; font-size:0; text-indent:-9999px; background:#4db2f3 url(/images/common/ico_sns.png) no-repeat -26px 5px;}
#member .sns .fb{background-color:#1f51b2; background-position:9px 5px;}
#member .sns .bl{background-color:#24c000; background-position:-66px 5px;}
#member .sns .kko{background-color:#fbc000; background-position:-141px 5px;}
#member .sns .insta{background-color:#c536a4; background-position:-104px 5px;}
#member .sns .off{display:none; background-color:#aaa;}

@media all and (max-width:1430px) {
	#member .small_list > a{width:10.4%; margin:0 0 18px 0.8%;}
	#member .title{width:21.22%;}
	#member .control button, #member .control a{margin:0 2px 0 0;}
}
@media all and (max-width:1024px) {
	#member .title{position:static; width:100%; height:50px; margin:0; font-size:24px; text-align:left; background:none; box-shadow:none; letter-spacing:-2px;}
	#member .title p{width:300px; padding:0;}
	#member .title p strong{display:inline-block; vertical-align:top; font-size:25px;}
	#member .control{display:inline-block; vertical-align:top; width:150px; padding:0;}
	#member .small_list{width:65%;}
	#member .small_list > a{width:11.8%;}
	#member .small_list a:nth-of-type(9n + 1){margin-left:0.8%;}
	#member .small_list a:nth-of-type(8n + 1){margin-left:0;}
	#member .big_list{width:32%; margin:50px 0 0 0;}
	#member .pic{right:10%;}
	#member .pic img{width:92px;}
    
    #member .small_list a span, #member .small_list a.active span:before, #member .small_list a:hover span:before, #member .title p span {display: none;}
}
@media all and (max-width:768px) {
	#member:before{opacity:0.6; content:''; display:block; position: absolute; bottom:10px; right:0; width:45%; height:285px; background:url(/images/common/logo_l.png) no-repeat 100% 100% / contain;}
	#member .title p{width:auto;}
	#member .title p strong{font-size:23px;}
	#member .small_list{width:55%;}
	#member .small_list > a{width:21.5%; margin:0 0 10px 2%;}
	#member .small_list a:nth-of-type(9n + 1),
	#member .small_list a:nth-of-type(8n + 1){margin-left:2%;}
	#member .small_list a:nth-of-type(4n + 1){margin-left:0;}
	#member .small_list a img{height:auto;}
	#member .big_list{width:45%;}
}
@media all and (max-width:568px) {
    
	#member:before{width:30%; bottom:260px;}
	#member .title{height:auto; padding:0 0 10px;}
	#member .title p strong{font-size:21px;}
	#member .control{float:right; width:auto; margin:-4px 0 0 0;}
	#member .small_list{width:100%;}
	#member .small_list > a{width:15.8%; margin:0 0 7px 1%;}
	#member .small_list a:nth-of-type(9n + 1),
	#member .small_list a:nth-of-type(8n + 1),
	#member .small_list a:nth-of-type(4n + 1){margin-left:1%;}
	#member .small_list a:nth-of-type(6n + 1){margin-left:0;}
	#member .big_list{width:100%; height: 240px; margin:5px 0 0 0;}
    
}
@media all and (max-width:380px) {
	#member .title p strong{font-size:20px;}
}

/* 바로가기 */
#link {position:absolute; top:0; left:0; float:left; width:247px; height:673px; font-weight:400; letter-spacing:0; text-align:center; box-shadow:5px 10px 15px rgba(0,0,0,0.07); background:#fff; box-sizing:border-box;}
#link ul{padding:12px 6px 0;}
#link li{width:100%; margin:33px 0 0 0; vertical-align:top;}
#link li a{z-index:1; position:relative; display:block; padding:104px 0 0 0; line-height:120%;}
#link li a:before,
#link li a:after{z-index:1; content:''; position:absolute; top:0; left:50%; display:block; width:99px; height:99px; transform:translateX(-50%); border-radius:50%; border:3px solid #31987a; 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_lnk7.png);}
#link li.list3 a:before{background-image:url(/images/kr/main/ico_lnk6.png);}
#link li.list4 a:before{background-image:url(/images/en/main/ico_lnk4.png);}
#link li a:hover:after,
#link li a:focus:after,
#link li a:active:after{border:3px dashed #31987a;}
#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; margin:15px 0 0 0;}
	#link ul{padding:25px 10px;}
	#link li{display:inline-block; vertical-align:top; width:24%; margin:0;}
	#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:1024px) {
	#link{margin:20px 0 0 0;}
}
@media all and (max-width:768px) {
	#link ul{padding:23px 5px; font-size:15px;}
	#link li{width:24%;}
	#link li:nth-child(-n + 4){margin:0 0 14px;}
	#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 {margin:35px 0 0 0;}
	#link ul{padding:19px 5px; font-size: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;}
}
@media all and (max-width:340px) {
	#link ul{font-size:13px;}
}

/* 열린의장실 */
#chairman{float:right; position:relative; width:27.6%; margin:0 0 30px; color:#fff; box-shadow:5px 10px 15px rgba(0,0,0,0.1); background:#416574;}
#chairman .txt{display:none; z-index:1; position:relative; height:316px; max-width:170px; padding:35px 0 0 29px; box-sizing:border-box; font-weight:300; word-break:keep-all; text-shadow:2px 5px 7px rgba(0,0,0,0.35);}
#chairman h4{line-height:100%; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.35);}
#chairman .name {line-height:180%; padding:27px 0 0 0;}
#chairman .name strong span {font-size: 22px;color: #ccffe2;}
#chairman .pic{width:100%; text-align:center;}
#chairman .pic img{max-width:100%;}
#chairman .btns{overflow:hidden; width:100%; background:#38977b;}
#chairman .btns a{position:relative; display:block; height:75px; line-height:75px; font-weight:400; font-size:16px; text-align:center; color:#fff; box-sizing:border-box; letter-spacing:0;}
#chairman .btns a:before{content:''; display:inline-block; vertical-align:middle; width:32px; height:31px; background:url(/images/kr/main/ico_chair1.png) no-repeat 50% 0;}
#chairman .btns a:after{content:''; display:block; position:absolute; top:50%; left:-4px; width:7px; height:7px; margin:-4px 0 0 0; background: rgba(255,255,255,0.2); transform:rotate(45deg);}
#chairman .btns a:first-child:after{display:none;} 
#chairman .btns a.list2:before{background-image:url(/images/kr/main/ico_chair2.png);}
#chairman .btns a.list3:before{background-image:url(/images/kr/main/ico_chair3.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:60%;}
}
@media all and (max-width:1024px) {
	#chairman{float:left; width:100%; margin:0 0 38px;}
	#chairman h4{font-size:23px;}
	#chairman .pic{bottom:0; height:100%;}
	#chairman .pic img{height:230px;}
	#chairman .txt{height:220px; max-width:65%; padding:30px 0 0 30px;}
	#chairman .name{padding:15px 0 0 0;}
	#chairman .name strong{display:inline-block; vertical-align:top;}
	#chairman .name img{vertical-align:top;}
	#chairman .name > span{padding:0 0 0 5px;}
	#chairman .btns{position:absolute; bottom:0; left:0; width:calc(100% - 175px);}
	#chairman .btns a{height:55px; line-height:55px; padding:0; font-size:16px;}
	#chairman .btns a:before{display:inline-block; vertical-align:middle; width:32px; height:18px; margin:-3px 0 0 0; background-size:contain;}
}
@media all and (max-width:768px) {
	#chairman h4{font-size:22px;}
	#chairman .pic img{height:230px;}
	#chairman .txt{height:195px;}
	#chairman .name{line-height:170%; padding:12px 0 0 0;}
	#chairman .btns a{height:52px; line-height:53px;}
}
@media all and (max-width:568px) {
	#chairman h4{font-size:21px;}
	#chairman .pic img{height:auto; width:100%;}
	#chairman .txt{height:auto; max-width:180px; padding:25px 0 30px 23px;}
	#chairman .btns{position:relative; width:100%;}
}
@media all and (max-width:380px) {
	#chairman h4{font-size:20px;}
	#chairman .txt{padding:23px 0 27px 22px;}
	#chairman .btns a{font-size:15px;}
}