@charset "utf-8";

.page{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:200px; height:40px; line-height:40px; border-radius:20px 20px 0 0; color:#fff; font-size:14px; text-align:center; background:rgba(0,0,0,0.8); color:#fff; font-size:15px; font-weight:100;}
.page .current{color:#fbfbe1; font-weight:800;}
.page .current:after{content:''; display:inline-block; width:4px; height:4px; margin:-2px 14px 0 15px; border-radius:50%; background:#cacacb; vertical-align:middle;}

.control{position:absolute; bottom:29px; left:50%;}
.control:after{content:''; display:block; clear:both;}
.control button, .control a{position:absolute; top:0; left:50%; margin:0 0 0 -50px; width:20px; height:20px; font-size:0; text-indent:-9999px; vertical-align:top;}
.control button:before{content:''; position:absolute; top:5px; left:7px; width:50%; height:50%; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(-135deg);}
.control .btn_next{margin:0 0 0 28px;}
.control .btn_stop{margin:0 0 0 51px;}
.control .btn_next:before{transform:rotate(45deg);}
.control .btn_stop:before{opacity:0.7; width:7px; height:11px; border-top:none; border-left:2px solid #fff; border-right-width:2px; transform:none;}
.control .btn_stop.on:before{margin:0 0 0 -5px; border-right:none; border-top:10px solid #fff; border-left:10px solid transparent !important; transform:rotate(45deg);}

#main_wrap{height:710px; box-sizing:border-box; padding:50px 0; background:#e9f5f9 url(../../images/kr/main/bg_mainvisual.jpg) no-repeat center;}
#main_wrap .inner{padding:0 0 0 210px;}
.sec1{float:left; width:845px;}
.sec2{float:right; width:305px;}

#visual{overflow:hidden; position:relative; margin:0 0 40px; border-radius:10px; box-shadow:5px 0 20px rgba(107,107,107,0.4);}
#visual .list_wrap *{vertical-align:top;}
#visual .list_wrap .list img{width:100%; height:100%;}
#visual .list_wrap .list:not(:first-of-type){display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;}
#visual .slogan{z-index:1; position:absolute; top:42px; left:0; width:100%; font-size:30px; font-weight:500; color:#fff; text-align:center; text-shadow:0 0 5px rgba(0,0,0,0.5); color:#fff;}
#visual .slogan .txt{animation:slideup 1s both;}
#visual .slogan .txt span{color:#fbfbe1;}
#visual .slogan .txt2{display:block; margin:-10px 0 0; font-size:1.333em; font-weight:900; animation:slideup 1s both; animation-delay:0.5s;}

@keyframes slideup{
	0%{transform:translateY(20px); opacity:0; visibility:hidden;}
	100%{transform:translateY(0); opacity:1; visibility:visible;}
}

#visual .page .total{padding:0 9px 0 0;}
#visual .control button{margin:0 0 0 -57px;}
#visual .control .btn_next{margin:0 0 0 24px;}
#visual .control .btn_stop{margin:0 0 0 45px;}

/* 현역의원 */
#member *{vertical-align:top;}
#member .list:after{content:''; display:block; clear:both;}
#member .list a{overflow:hidden; position:relative; float:left; width:80px; height:100px; margin:0 0 5px 5px;}
#member .list a:first-child,
#member .list a:nth-of-type(11){margin-left:0;}
#member .list a:before{z-index:2; opacity:0; visibility:hidden; content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:3px solid #f3c122; transition:.3s;}
#member .list a:hover:before,
#member .list a:active:before,
#member .list a:focus:before{opacity:1; visibility:visible;}
#member .list a img{width:100%; height:100%;}
#member .list a span{z-index:1; position:absolute; bottom:0; left:0; width:100%; height:25px; line-height:25px; background:rgba(0,0,0,0.7); color:#fff; font-size:12px; font-weight:400; text-align:center;}

/* 열린의장실 */
#chairman{overflow:hidden; position:relative; margin:0 0 40px; border-radius:10px; box-shadow:5px 0 20px rgba(204,204,204,0.5);}
#chairman .txt{height:305px; box-sizing:border-box; padding:35px 0 0 30px; background:#fff url(../../images/kr/main/bg_chairman.png) no-repeat bottom right;}
#chairman .txt p:not(.name){font-size:18px; font-weight:400; color:#295daa;}
#chairman .txt p:not(.name) strong{display:block; margin:-2px 0 0; font-size:1.444em; font-weight:900; color:#2b425b;}
#chairman .name{padding:14px 0 0;}
#chairman .name strong{font-size:28px; font-weight:900;}
#chairman .pic{position:absolute; bottom:60px; right:0;}
#chairman .btns:after{content:''; display:block; clear:both;}
#chairman .btns a{position:relative; display:block; height:60px; line-height:60px; box-sizing:border-box; padding:0 0 0 100px; font-weight:400; color:#fff; background:#258eba;}
#chairman .btns a:before{content:''; position:absolute; top:50%; margin:-5px 0 0; right:100px; width:10px; height:10px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); }

/* 현역의원 더보기 */
#quick{overflow:hidden; position:relative; height:205px; box-sizing:border-box; padding:24px 30px 30px; border-radius:10px; background:#fff url(../../images/en/main/bg_quick1.png) no-repeat bottom left; box-shadow:5px 0 20px rgba(204,204,204,0.4);}
#quick:before{content:''; position:absolute; bottom:0; right:0; width:140px; height:168px; background:url(../../images/en/main/bg_quick2.png) no-repeat bottom right;}
#quick .tit_wrap p{letter-spacing:0; font-weight:300; font-size:14px; color:#aaa;}
#quick .tit_wrap h4{padding:8px 0 0; line-height:125%; font-size:24px; color:#2b425b;}
#quick .tit_wrap h4 span{display:block; color:#295daa;}
#quick a{display:block; width:120px; height:40px; line-height:40px; margin:23px 0 0; color:#fff; text-align:center; font-weight:400; border-radius:25px;
background:rgb(47,162,171);
background: -moz-linear-gradient(95deg, rgba(47,162,171,1) 0%, rgba(43,127,171,1) 50%, rgba(41,92,170,1) 100%);
background: -webkit-linear-gradient(95deg, rgba(47,162,171,1) 0%, rgba(43,127,171,1) 50%, rgba(41,92,170,1) 100%);
background: linear-gradient(95deg, rgba(47,162,171,1) 0%, rgba(43,127,171,1) 50%, rgba(41,92,170,1) 100%);}

/* 바로가기 링크 */
#link{position:absolute; top:0; left:0; width:170px; height:610px; border-radius:10px; background:#fff; text-align:center; box-shadow:5px 0 20px rgba(204,204,204,0.4);}
#link li{position:relative; box-sizing:border-box; padding:33px 0;}
#link li + li:before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:37px; height:2px; background:url(../../images/kr/main/bg_link.gif) no-repeat;}
#link li a{position:relative; display:block; padding:58px 0 0; font-weight:400;}
#link li a:before{content:''; position:absolute; top:0; left:50%; width:59px; height:49px; margin:0 0 0 -28px; background:url(../../images/en/main/ico_link1.png) no-repeat center; transition:0.6s ease-in-out;}
#link li:nth-child(2) a:before{background-image:url(../../images/en/main/ico_link2.png);}
#link li:nth-child(3) a:before{background-image:url(../../images/en/main/ico_link3.png);}
#link li:nth-child(4) a:before{background-image:url(../../images/en/main/ico_link4.png);}
#link li a:hover:before,
#link li a:focus:before,
#link li a:active:before{animation:ani_link 0.9s ease-in-out;}
@keyframes ani_link {
	0%{transform:translateY(0);}
	25%{transform:translateY(6px);}
	50%{transform:translateY(0);}
	75%{transform:translateY(8px);}
	100%{transform:translateY(0);}
}

@media all and (max-width:1430px) {
	img{max-width:100%;}

	#main_wrap{height:auto;}
	.sec1{width:70.4116%;}
	.sec2{width:27.4442%;}

    #visual, #chairman{margin:0;}
    #member, #quick{margin:20px 0;}
    #visual .list_wrap .list img{height:365px;}
    #chairman .txt{background-size:cover;}
    #member .list a{width:calc((100% - 45px) / 10);}
    
    #link{float:left; position:static; width:100%; height:auto;}
	#link ul:after{content:''; display:block; clear:both;}
	#link li{float:left; width:25%;}
    #link li + li:before{top:50%; left:-18px; transform:rotate(90deg);}
}
@media all and (max-width:1024px) {
    .sec1,
	.sec2{overflow:hidden; width:100%;}
	#main_wrap{padding:15px 0;}
    
    #visual .list_wrap .list img{height:100%;}
    #member{margin:15px 0 10px;}
    
    #chairman{float:left; width:calc(100% - 325px);}
    #chairman .txt{height:209px; padding:25px 0 0 25px;}
    #chairman .name strong{font-size:1.250em;}
    #chairman .pic{bottom:0; height:100%;}
    #chairman .btns{position:absolute; bottom:10px; left:25px;}
    #chairman .btns a{width:170px; height:45px; line-height:45px; margin:0 8px 0 0; border-radius:25px; padding:0 0 0 20px;}
    #chairman .btns a:before{right:20px;}
    
    #quick{float:right; width:305px; margin:0 0 15px;}
}
@media all and (max-width:768px) {
    #main_wrap{padding:10px 0;}
    
    #visual .slogan{font-size:20px;}
    #visual .slogan .txt2{margin:-5px 0 0;}
    
    #member{margin:10px 0 5px;}
    #member .list a{height:90px;}
    #member .list a span{height:20px; line-height:20px; font-size:13px;}
    
    #chairman{width:calc(100% - 315px);}
    #chairman .txt{height:204px; padding:20px 0 0 20px;}
    #chairman .txt p:not(.name){font-size:1em;}
    #chairman .pic img{height:100%;}
    #chairman .btns{left:20px;}
    #chairman .btns a{width:160px; height:38px; line-height:38px; margin:0 5px 0 0; font-size:0.938em;}
    #chairman .btns a:before{width:8px; height:8px; margin:-4px 0 0;}
    
    #quick{margin:0 0 10px;}
    
    #link li{padding:20px 0;}
    #link li a:before{background-size:40px;}
}
@media all and (max-width:568px) {
    .page{width:135px; height:30px; line-height:32px; border-radius:10px 10px 0 0; font-size:13px;}
    .page .current:after{margin:-2px 9px 0 10px;}
    .control{bottom:25px;}
    .control button{margin:0 0 0 -40px;}
    
    #visual .slogan{top:15px; font-size:1em;}
    #visual .control button {margin:0 0 0 -51px;}
    #visual .control .btn_next{margin:0 0 0 18px;}
    #visual .control .btn_stop {margin:0 0 0 39px;}
    
    #member .list a{height:70px;}
    #member .list a span{font-size:12px;}
    
    #chairman{width:100%;}
    #chairman .txt{height:auto; padding:20px 20px 60px;}
    #chairman .txt p:not(.name) strong{margin:0;}
    #chairman .btns a{width:140px; height:35px; line-height:35px; padding:0 0 0 15px;}
    #chairman .btns a:before{right:15px;}
    
    #quick{width:100%; height:auto; margin:10px 0; padding:20px 25px;}
    #quick:before{background-size:100px;}
    #quick .tit_wrap h4{font-size:20px;}
    #quick a{width:100px; height:35px; line-height:35px; margin:20px 0 0;}
    
    #link li{padding:10px 0 20px;}
    #link li a{padding:50px 0 0;}
    #link li a:before{background-size:35px;}
}
@media all and (max-width:480px) {
    #member .list a{width:calc((100% - 20px) / 5);}
    #member .list a:nth-of-type(6), #member .list a:nth-of-type(16){margin-left:0;}
}
@media all and (max-width:380px) {
    #link li + li:before, #sns .con ul li:nth-child(2){display:none;}
}