@charset "utf-8";
.slick-vertical .slick-slide{border:none;}

#container_main{position:relative; overflow:hidden; width:100%;}
#container_main h4 {font-size:30px; font-family:"gmarket";}

.more{z-index:2; position:absolute; top:0; right:0; display:block; width:32px; height:32px; font-size:0; text-indent:-999px;}
.more:before,
.more:after,
.more span:before{content:''; display:block; position:absolute; top:5px; left:3px; width:28px; height:3px; border-radius:3px; transition:0.3s ease; background:#3d3d3d;}
.more:after{top:23px;}
.more span:before{top:14px; width:18px;}
.more:hover:before,
.more:hover:after,
.more:hover span:before,
.more:focus span:before,
.more:active span:before{width:28px; box-shadow:inset 30px 0 0 #375999;}

@media all and (max-width:1230px) {
	.more{right:15px;}
}
@media all and (max-width:1024px) {
	#container_main h4 {font-size:24px;}
}
@media all and (max-width:768px) {
	#container_main h4 {font-size:23px;}
	.more{right:10px;}
}
@media all and (max-width:568px) {
	#container_main h4 {font-size:20px;}
}
@media all and (max-width:380px) {
	#container_main h4 {font-size:19px;}
}

#visual{z-index:1; position:relative; overflow:hidden; height:639px;}
#visual .list_wrap *{vertical-align:top;}
#visual .list_wrap .list{position:relative; left:50%; top:0; margin:0 0 0 -960px;}

.slogan{z-index:2; position:absolute; top:45px; left:50%; margin:0 0 0 -600px; padding:27px 0 0 24px; color:#fff; font-size:30px; word-break:keep-all;}
.slogan:before{z-index:-1; content:''; display:block; position:absolute; top:0; left:0; width:53px; height:53px; border:8px solid #ffad00; animation:slideup 0.8s both;}
.slogan div{font-weight:800; font-family:"gmarket"; text-shadow:5px 5px 10px rgba(0,0,0,0.5); animation:slideup 0.8s both; animation-delay:0.3s;}
.slogan strong{display:block; font-size:40px;}
.slogan .yellow{color:#ffad00;}
.slogan p{padding:7px 0 0 1px; line-height:110%; font-size:18px; text-shadow:1px 1px 3px rgba(0,0,0,0.6); animation:slideup 1.2s both; animation-delay:0.8s;}

@keyframes slideup{
	0%{transform:translateY(20px); opacity:0; visibility:hidden;}
	100%{transform:translateY(0); opacity:1; visibility:visible;}
}
@media all and (max-width:1230px) {
	.slogan{left:15px; width:calc(100% - 15px); margin:0;}
}
@media all and (max-width:1024px) {
	#visual {height:auto;}
	#visual .list_wrap .list{left:0; margin:0;}

	.slogan{top:35px; padding:5px 0 0 15px; font-size:20px;}
	.slogan:before{top:-10px; width:30px; height:30px; border:5px solid #ffad00;}
	.slogan strong{font-size:30px;}
	.slogan p{font-size:16px; font-weight:200;}
}
@media all and (max-width:768px) {
	.more:before{top:5px;}
	.more span:before{top:13px;}
	.more:after{top:21px;}
	
	.slogan{top:25px; padding-left:10px; font-size:17px;}
	.slogan:before{top:-5px; width:23px; height:23px; border-width:4px;}
	.slogan strong{font-size:20px;}
	.slogan p{font-size:15px;}
}
@media all and (max-width:568px) {
	.slogan{top:15px; padding:3px 0 0 7px; font-size:15px;}
	.slogan:before{top:-3px; width:17px; height:17px;}
	.slogan strong{font-size:17px;}
	.slogan p{font-size:12px;}

}
@media all and (max-width:380px) {
	.slogan{top:12px; left:10px; font-size:13px;}
	.slogan strong{font-size:16px;}
	.slogan p{font-size:11px;}
}

.sec1{z-index:1; position:absolute; top:337px; left:50%; transform:translateX(-50%);}

/* 열린의장실 */
#chairman{position:relative; float:right; width:629px; height:252px; box-sizing:border-box; padding:38px 270px 0 32px; border-radius:0 50px 0 0; background:#a58138; color:#fff;}
#chairman .pic{overflow:hidden; position:absolute; right:15px; bottom:0; width:48.36%; text-align:right;}
#chairman .txt{z-index:1; position:relative; word-break:keep-all;}
#chairman .info {line-height:130%; font-size:21px; font-weight:800; font-family:"gmarket";}
#chairman .info span {display:block;}
#chairman .name{padding:11px 0 24px; line-height:100%; font-size:18px;}
#chairman .name br {display:none;}
#chairman .btns a{display:inline-block; height:40px; line-height:40px; padding:0 52px; border-radius:57px; background:#796033; color:#fff; font-weight:400;}
#chairman .btns a:after{content:''; display:inline-block; vertical-align:middle; width:20px; height:18px; margin:-3px 0 0 10px; transition:0.25s ease-in-out; background:url(/images/kr/main/ico_chairman.png) no-repeat;}
#chairman .btns a:hover:after,
#chairman .btns a:focus:after,
#chairman .btns a:active:after{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:1230px) {
	#chairman .pic img{max-width:100%;}
}
@media all and (max-width:1024px) {
    .sec1 {position:static; transform:none; margin:20px 0;}
    
	#chairman{width:500px; height:250px; padding:38px 160px 0 34px;}
	#chairman .pic img{max-height:260px;}
	#chairman .name{padding-right:80px;}
    #chairman .btns a {padding:0 30px;}
}
@media all and (max-width:768px) {
    .sec1 {margin:10px 0;}
    
	#chairman{height:auto; width:100%; padding:25px 140px 25px 30px;}
	#chairman .pic img{max-height:187px;}
    #chairman .info {font-size:19px;}
	#chairman .name{padding:13px 0 22px; font-size:1em;}
	#chairman .btns a{height:43px; line-height:44px;}
}
@media all and (max-width:568px) {
    #chairman {padding:20px 100px 20px 20px;}
	#chairman .pic img{max-height:182px;}
    #chairman .info {font-size:17px;}
	#chairman .btns a{height:40px; line-height:41px; font-size:14px;}
}
@media all and (max-width:380px) {
	#chairman .tit{padding:0 0 10px;}
	#chairman .pic img{max-height:174px;}
    #chairman .info span {display:inline;}
	#chairman .name{padding:11px 0 20px;}
	#chairman .btns a{height:38px; line-height:39px; font-size:13px;}
}
@media all and (max-width:350px) {
	#chairman .pic {right:-8px;}
	#chairman .pic img{max-height:172px;}
    #chairman .info {font-size:16px;}
	#chairman .name br {display:block;}
	#chairman .btns a span{display:none;}
}

/* 바로가기 */
#link {position:relative; float:left; width:530px;}
#link li{float:left;}
#link li a{z-index:1; position:relative; display:block; width:250px; height:252px; box-sizing:border-box; padding:38px 0 0 32px; color:#fff; background:rgba(30,49,85,0.85); text-decoration:none;}
#link li a span{display:block; line-height:120%; font-family:"gmarket"; font-weight:800; font-size:21px;}
#link li a span:after{content:''; display:block; width:27px; height:1px; margin:15px 0; background:#f7ab28; transition:0.25s ease-in-out;}
#link li a:before{z-index:1; content:''; position:absolute; bottom:19px; right:21px; display:block; width:79px; height:75px; transition:0.3s ease; background:url(/images/en/main/ico_link1.png) no-repeat 100% 100%;}
#link li.list2 {float:right;}
#link li.list2 a:before{bottom:25px; background-image:url(/images/en/main/ico_link2.png);}
#link li a:hover:before,
#link li a:focus:before,
#link li a:active:before{transform:scale(1.13);}
#link li a:hover span:after{width:45px;}

@media all and (max-width:1230px) {
    #link {width:calc(100% - 650px);}
    #link li {width:100%;}
    #link li:first-child {margin:0 0 8px;}
    #link li a {width:100%; height:122px; padding:23px 0 0 30px;}
    #link li a br {display:none;}
}

@media all and (max-width:1024px) {
	#link{width:calc(100% - 520px);}
	#link li a{height:121px; padding:20px 60px 0 15px;}
	#link li a:before{right:5px; bottom:5px; width:56px; height:56px; background-size:contain;}
	#link li.list2 a:before {bottom:8px;}
}
@media all and (max-width:768px) {
	#link {width:100%; padding:10px 0 0;}
	#link li{width:49.5%; margin:0 !important;}
    #link li a {font-size:0.938em;}
	#link li a:before{width:48px; height:48px;}
    #link li a span {padding:0 0 5px; font-size:19px;}
	#link li a span:after{margin:10px 0;}
}
@media all and (max-width:660px) {
	#link li a{height:150px; padding:60px 8px 0; text-align:center;}
	#link li a:before{bottom:auto; right:auto; left:50%; top:30px; height:35px; transform:translate(-50%, -50%);}
	#link li a:hover:before,
	#link li a:focus:before,
	#link li a:active:before{transform:translate(-50%, -50%) scale(1.13);}
	#link li a span:after{display:none;}
}
@media all and (max-width:568px) {
    #link li a span {font-size:17px;}
}
@media all and (max-width:380px) {
	#link li a {height:130px;}
	#link li a:before{height:36px;}
    #link li a span {font-size:16px;}
}

/* 현역의원 */
#member{z-index:1; overflow:hidden; position:relative; height:631px; padding:52px 0 0 0; box-sizing:border-box; text-align:center; background:#fff url(/images/kr/main/bg_member.jpg) no-repeat 50% 100%; background-size:cover;}
#member h4{line-height:110%;}
#member h4 span{font-weight:200;}
#member .info{padding:9px 0 33px; font-size:17px;}
#member .list{text-align:left;}
#member .list:after{content:''; display:block; width:100%;}
#member .list > li{position:relative; float:left; width:23.75%; height:188px; margin:0 0 30px 1.666%; background:#fff; box-shadow:10px 10px 20px rgba(0,0,0,0.3); box-sizing:border-box;}
#member .list > li:first-child,
#member .list > li:nth-child(5n){margin-left:0;}
#member .pic{overflow:hidden; position:absolute; bottom:0; left:0;}
#member .txt{z-index:1; position:relative; padding:0 0 0 54.736%;}
#member .name{position:relative; width:105px; height:102px; padding:13px 0 0 0; margin:-9px 0 0 0; line-height:150%; font-size:15px; font-weight:800; font-family:"gmarket"; color:#fff; text-align:center; background:#357ca6; box-sizing:border-box;}
#member .name:before{position:absolute; top:0; left:-16px; content:''; display:block; border-left:16px solid transparent; border-bottom:9px solid #2c6587;}
#member .name span {display:block;}
#member .home{position:absolute; display:block; width:31px; height:31px; bottom:12px; left:50%; transform:translateX(-50%); font-size:0; text-indent:-999px; border-radius:50%; background:#255774 url(/images/kr/main/ico_home.png) no-repeat -25px 50%;}
#member .home:hover{background-position:7px 50%;}
#member .txt ul{padding:8px 0 0 10px; line-height:120%;}
#member .txt li{padding:0 0 5px 9px;}
#member .txt li:before{top:7px; width:2px; height:2px; background:#333;}
#member .list .tit{display:table; text-align:center; background:#ededed;}
#member .tit > div{display:table-cell; vertical-align:middle;}
#member .tit .en{font-size:20px; color:#bcbcbc; letter-spacing:-0.5px; text-transform:uppercase;}
#member .tit .img{padding:9px 0 12px 0;}
#member .tit h4{font-size:25px; line-height:110%; color:#357ca6;}
#member .more{top:-3px;}
@media all and (max-width:1230px) {
	#member .pic{width:63.157%;}
	#member .pic img{max-width:100%;}
	#member .tit .en{font-size:17px;}
}
@media all and (max-width:1024px) {
	#member{height:auto; padding:40px 0 20px 0;}
	#member .info{padding:5px 0 34px; font-size:14px;}
	#member .pic img{max-height:144px;}
	#member .name{width:85px; padding:15px 0 7px 0; font-size:14px;}
	#member .home{height:28px; width:28px; background-size:auto 14px; background-position:-19px 50%;}
	#member .txt ul{padding:12px 0 0 10px;}
	#member .txt li{padding:0 0 2px 7px;}
	#member .tit .en{font-size:12px;}
	#member .tit h4{font-size:16px;}
	#member .tit h4 strong{font-size:24px;}
	#member .tit .img {padding:5px 0 8px 0;}
	#member .tit .img img{height:50px;}
	#member .more{top:-6px;}
}
@media all and (max-width:768px) {
	#member{padding:33px 0 13px 0;}
	#member .info{padding:3px 0 32px; font-size:13px;}
	#member .list > li{height:170px; width:32%; margin-left:2%;}
	#member .list > li:first-child{margin-left:16%;}
	#member .list > li:nth-child(5n){margin-left:2%;}
	#member .list > li:nth-child(3n){margin-left:0;}
	#member .pic img{max-height:135px;}
	#member .name{padding:14px 0 6px 0;}
	#member .home{height:26px; width:26px; background-position: -20px 50%;}
	#member .tit .img img{height:45px;}
	#member .txt ul{font-size:14px;}
}
@media all and (max-width:568px) {
	#member{padding:28px 0 10px 0;}
	#member .inner > h4{padding:0 0 30px;}
    #member h4 span {display:block; padding:0 0 5px;}
	#member .info{display:none;}
	#member .list > li{width:calc(50% - 5px); margin-left:10px;}
	#member .list > li:nth-child(3n){margin-left:10px;}
	#member .list > li:first-child,
	#member .list > li:nth-child(odd){margin-left:0;}
	#member .pic img{max-height:125px;}
	#member .name{padding:11px 0 5px 0;}
	#member .name:before{left:-12px; border-left-width:12px;}
	#member .tit h4{font-size:15px;}
	#member .tit h4 strong{font-size:20px;}
	#member .tit .img {padding:3px 0 6px 0;}
	#member .tit .img img{height:40px;}
    #member .txt {padding:0 0 0 45%;}
	#member .txt ul{font-size:13px;}
}
@media all and (max-width:380px) {
	#member{padding:26px 0 8px 0;}
	#member .inner > h4{padding:0 0 28px;}
	#member .list > li{height:150px; margin-bottom:27px;}
	#member .pic{width:62%;}
	#member .pic img{max-height:115px;}
	#member .name{width:85%; height:90px; font-size:12px;}
	#member .txt ul{padding:10px 0 0 7px;}
	#member .tit .en{font-size:11px;}
	#member .tit h4{font-size:14px;}
	#member .tit h4 strong{font-size:19px;}
	#member .tit .img img{height:35px;}
	#member .txt ul{font-size:12px;}
}