@charset "utf-8";

.slick-slide {height:auto !important;}
.sec {margin-top:50px;}
.control a, .more {display:block; font-size:0; text-indent:-9999px; background:url(/images/kr/main/ico_util.png) no-repeat 0 0;}
.control a {float:left; background-position:11px -34px;}
.control a.btn_stop {background-position:-27px -34px; margin-left:-1px;}
.control a.btn_stop.on {background-position:-173px -196px;}
.control a.btn_next {background-position:-65px -34px; margin-left:-1px;}

/* 현역의원 지역구별 색상 */
#map2 .district {background:#e02f78;}
#map3 .district {background:#f85e01;}
#map4 .district {background:#0163a6;}
#map5 .district {background:#3ba3c7;}
#map6 .district {background:#629514;}

#map2 .small_list a.active {border-color:#e26b9c;}
#map3 .small_list a.active {border-color:#f88701;}
#map4 .small_list a.active {border-color:#1b98d9;}
#map5 .small_list a.active {border-color:#6cbbd8;}
#map6 .small_list a.active {border-color:#80ae39;}

/* 메인비주얼 */
#visual {overflow:hidden; position:relative; height:450px;}
#visual * {vertical-align:top;}
#visual .list {position:relative; top:0; left:50%; margin-left:-950px;}
#visual .control {position:absolute; bottom:28px; right:50%;}
#visual .control:after {content:''; display:block; clear:both;}
#visual .control a {float:left; width:7px; height:11px; background-position:0 0;}
#visual .control a.btn_stop {margin:0 13px 0; background-position:-37px 0;}
#visual .control a.btn_stop.on {background-position:-148px -205px;}
#visual .control a.btn_next {background-position:-74px 0;}
.slick-dots {position:absolute; bottom:21px; left:50%; margin-left:15px;}
.slick-dots:after {content:''; display:block; clear:both;}
.slick-dots li {float:left; margin-right:10px;}
.slick-dots li button {width:11px; height:11px; font-size:0; text-indent:-9999px;  background:#666; border-radius:50%;}
.slick-dots li.slick-active button {position:relative; background:#295995;}
.slick-dots li.slick-active button:before {content:''; position:absolute; top:-6px; left:-6px; width:23px; height:23px; border-radius:50%; border:1px solid #295995;}

/* 의장인사말 */
#chairman {position:relative; float:left; width:30.84%;}
#chairman h4 {padding:10px 0 18px; font-size:1.625rem; font-weight:900;}
#chairman h4 span {font-weight:200;}
#chairman .txt {height:373px;box-sizing:border-box;padding:33px 0 0 32px;font-size:1.625rem;background: #fbdfdc;border: 1px solid #e70012;border-bottom: 0;}
#chairman .txt p strong {color:#383736;}
#chairman .txt p.name {z-index:1; position:relative; padding-top:61px; font-size:1rem;}
#chairman .txt p.name img {display:block; margin-top:8px;}
#chairman .pic {position:absolute; bottom:57px; right:0;}
#chairman .pic img { float: right; }
#chairman .btns:after {content:''; display:block; clear:both;}
#chairman .btns a {display:block;height:57px;line-height:57px;text-align:center;box-sizing:border-box;background: #e70012;color:#fff;font-size:1.125rem;transition:0.5s;}

/* 현역의원 */
#member {overflow:hidden; position:relative; float:right; width:66.67%; height:495px;}
#member > ul > li {position:absolute; top:0; left:0; width:100%;}
#member > ul > li > a {position:absolute;top:0;left:0;display:block;width:200px;box-sizing:border-box;padding:0.28em 0;border: 2px solid #e70012;text-align:center;font-size:1.5rem;background: #f3f3f3;color: #666;cursor:default;text-decoration:none;}
#member > ul > li.on > a {background: #e70012;color:#fff;}
#member > ul > li.tab1 > a {border-top-left-radius:100px; border-bottom-left-radius:100px;}
#member > ul > li.tab2 > a {left:200px; border-top-right-radius:100px; border-bottom-right-radius:100px;}
#member ul li > div {visibility:hidden;}
#member ul li.on > div {visibility:visible;}

#member .tit h4 {padding:10px 0 30px; font-size:1.625em; line-height:110%;}
#member .tit h4 span {font-weight:200;}
#member .tit h4 span br {display:none;}
#member .control {position:absolute; top:9px; left:242px; background:#fff; box-sizing:border-box; padding:0 8px; border:1px solid #ccc; border-radius:20px;}
#member .control a {width:30px; height:26px; border-right:1px solid #cdcdcd; margin:0;}
#member .control a:last-child {border-right:none;}
#member .control a.more {background-position:-104px -34px;}

.big_list .pic img, .small_list a img {width:100%; height:100%;}
.big_list .txt .name {margin-bottom:9px; font-size:1.25rem; font-weight:800;}
.big_list .txt .name span {font-size:1.125rem;}
.big_list .txt ul li {position:relative;margin-bottom:10px;padding-left:10px;color: #000;}
.big_list .txt ul li:before {content:'';position:absolute;top:12px;left:0;width:3px;height:3px;background: #666;}
.big_list .txt ul li span {display:block;margin-top:2px;/* color:#fff; */}


#member .btns {position:absolute; top:90px; right:56px;}
#member .btns a {float:left;display:block;width:36px;height:36px;border-radius:50%;background: #e70012 url(/images/kr/main/ico_util.png) no-repeat 10px -77px;font-size:0;text-indent:-9999px;transition:0.3s;}
#member .btns a.btn2 {margin-left:3px; background-color:#777; background-position:-38px -77px;}
#member .btns a:focus,
#member .btns a:active,
#member .btns a:hover {background-color:#ee5400;}
#member .btns a.btn2:focus,
#member .btns a.btn2:active,
#member .btns a.btn2:hover {background-color:#484848;}

/* 인명별 */
#member ul li.tab1 > div {position:absolute;top:65px;left:0;width:100%;box-sizing:border-box;padding:30px 20px;background: #f3f3f3;color: #000;}
.tab1 .tit p {padding:7px 0 10px;}
.tab1 .member_wrap {box-sizing:border-box;padding:29px 0 31px;border-top: 1px solid #e70012;border-bottom: 1px solid #e70012;}
.member_wrap:after, .tab1 .big_list .list:after {content:''; display:block; clear:both;}
.tab1 .control a {float:left;}

.tab1 .big_wrap {position:relative; float:left; width:57.25%;}
.tab1 .big_list .pic {position:relative; float:left; width:45.6%; height:239px; box-sizing:border-box; border:1px solid #cdcdcd;}
.tab1 .big_list .txt {position:relative;float:left;width:54.4%;height:150px;margin-top:89px;box-sizing:border-box;padding:14px 0 13px 10px;/* background:#6185af; */}
#member .tab1 .control {top:37px; left:auto; right:0;}
#member .tab1 .btns {top:auto; right:auto; bottom:15px; left:119px;}

.tab1 .small_wrap {position:relative; float:right; width:306px;}
.tab1 .small_list:after {content:''; display:block; clear:both;}
.tab1 .small_list a {position:relative; float:left; display:block; width:61px; height:80px; box-sizing:border-box; border:1px solid #dddddd; color:#fff;}
.tab1 .small_list a:before {opacity:0; content:''; position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); background:rgba(0,0,0,0.5); transition:0.8s;}
.tab1 .small_list a.active:before {opacity:1;}
.tab1 .small_list a span {display:none; position:absolute; bottom:5px; left:0; right:0; font-size:12px; text-align:center;}
.tab1 .small_list a.active span {display:block;}
.tab1 .small_wrap .council {position:absolute; bottom:0; right:1px; width:61px; height:80px; box-sizing:border-box; border:1px solid #dddddd; background:#fff; color:#343434; text-align:center;}
.tab1 .small_wrap .council img {padding:9px 0 7px; width:47px; height:46px;}
.tab1 .small_wrap .council span {display:block; line-height:110%; font-size:10px;}

/* 지역구별 */
#member ul li.tab2 > div {position:absolute;top:66px;left:0;width:100%;height:430px;background: #f3f3f3;/* color:#fff; */}
#member .map {padding:24px 59px 0 0; text-align:right;}
.map_wrap {position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; padding:24px 59px 0 31px;}
.map_wrap .tit {z-index:1; position:absolute; top:27px; left:31px; width:385px;}
#member .map_wrap .tit h4 {font-size:1.5rem;}
.map_wrap .tit:after {content:''; display:block; clear:both;}
.map_wrap > .list {display:none; overflow:hidden; width:100%; height:100%;}
.map_wrap .list:after, .small_wrap:after {content:''; display:block; clear:both;}
.map_wrap > .list > img {float:right;}
.map_wrap .member_list {float:left; width:385px; height:100%;}
.tab2 .big_list {padding:76px 0 12px;}
.tab2 .big_list .pic {float:left; width:118px; height:153px; border:1px solid #ddd;}
.tab2 .big_list .txt {position:relative; float:left; width:201px; min-height:155px; margin-left:20px;}
.tab2 .big_list .txt .name {margin-top:7px;}
.tab2 .small_wrap {border-top:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd;}
.tab2 .small_wrap .district {float:left; width:120px; height:103px; box-sizing:border-box; padding:20px 0 0; text-align:center; background:#5d1de3; font-size:1.375rem; font-weight:800; color:#fff;}
.tab2 .small_wrap .district span {display:block;}
.tab2 .small_wrap .district .bi {padding-top:15px;}
.tab2 .small_wrap .small_list {float:left; padding:14px 0 0 25px;}
.tab2 .small_list a {position:relative; display:block; float:left; width:56px; height:71px; border:2px solid #ddd; margin-right:10px;}
.tab2 .small_list a:before {opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55);}
.tab2 .small_list a.active {border-color:#8b61e4;}
.tab2 .small_list a span {opacity:0; position:absolute; bottom:8px; left:0; display:block; width:100%; text-align:center; color:#fff; font-size:14px;}
.tab2 .small_list a.active:before,
.tab2 .small_list a.active span {opacity:1;}
.map_wrap > p {position:absolute; bottom:26px; left:28px; width:385px;}

/* 바로가기 */
#quick {position:relative; margin:50px 0 0; height:230px; background:#f5f5f5;}
#quick:before {content:''; position:absolute; top:0; left:0; width:calc(50% - 600px); height:100%; background:#80ae39;}
#quick .inner:before {content:''; position:absolute; top:0; left:0; width:280px; height:230px; background:url(/images/kr/main/bg_quick.png) no-repeat;}
#quick .tit {z-index:1; position:relative; float:left; width:24%; color:#fff;}
#quick .tit h4 {padding:36px 0 15px; font-size:1.75rem;}
#quick .tit p {position:relative; color:#e9f0e1;}
#quick .tit p:before {content:''; display:block; width:50px; height:1px; margin-bottom:14px; background:#d8e1b8;}
#quick ul {float:left; width:76%; padding-top:40px;}
#quick ul:after {content:''; display:block; clear:both;}
#quick ul li {float:left; width:16.66%;}
#quick ul li a {display:block; position:relative; padding-top:130px; text-align:center;}
#quick ul li a:before, #quick ul li a:after {content:''; position:absolute; top:0; left:50%; margin-left:-60px; width:120px; height:120px; border:2px solid #ccc; border-radius:50%; background:#fff ; transition:0.3s;}
#quick ul li a:after {border:none; background:url(/images/en/main/quick1.png) no-repeat center;}
#quick ul li.list2 a:after {background-image:url(/images/en/main/quick2.png);}
#quick ul li.list3 a:after {background-image:url(/images/en/main/quick3.png);}
#quick ul li.list4 a:after {background-image:url(/images/en/main/quick4.png);}
#quick ul li.list5 a:after {background-image:url(/images/en/main/quick5.png);}
#quick ul li.list6 a:after {background-image:url(/images/en/main/quick6.png);}
#quick ul li a:focus:before,
#quick ul li a:active:before,
#quick ul li a:hover:before {border-color:#5bb530;}
#quick ul li a:hover:after,
#quick ul li a:focus:after,
#quick ul li a:active:after{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:1230px) {
  #member {width:68%;}
  #member .control {left:229px;}
  #member .map {padding-right:15px;}
  .map_wrap {padding:24px 15px 0;}
  .map_wrap .tit, .map_wrap > p {left:15px;}
}

@media all and (max-width:1160px) {
  .tab1 .big_wrap {width:53.25%;}
  .tab1 .big_list .pic {width:40%;}
  .tab1 .big_list .txt {width:60%;}
}

@media all and (max-width:1080px) {
  .sec {margin-top:25px;}

  #chairman {float:none; width:100%;}
  #member {float:none; width:100%; height:495px;}
  #chairman {margin-bottom:25px;}
  #chairman h4 {padding-top:0;}
  #chairman .pic {bottom:45px;}
  #chairman .pic img{width: 75%;}
  #chairman .txt {height:190px; padding:35px 100px 0 30px;}
  #chairman .txt p br {display:none;}
  #chairman .txt p.name img {display:inline-block; margin:0 0 0 12px; vertical-align:bottom;}
  #chairman .btns a {height:45px; line-height:45px;}

  #member .tit h4 {padding:0 0 13px;}
  #member .control {left:219px;}
  #member .map, .map_wrap {padding:28px 30px 0 30px;}
  .map_wrap .tit, .map_wrap > p {left:30px;}
  .map_wrap .member_list, .map_wrap .tit, .map_wrap > p {width:500px;}
}

@media all and (max-width:1024px) {
  #visual {height:auto;}
  #visual .list {left:0; margin-left:0;}
  #visual .list img {width:160%; max-width:160%; margin:0 0 0 -30%;}
  #visual .control {bottom:15px;}
  #visual .control a.btn_prev {background-position:0 -205px;}
  #visual .control a.btn_stop {background-position:-37px -205px;}
  #visual .control a.btn_stop.on {background-position:-111px -205px;}
  #visual .control a.btn_next {background-position: -74px -205px;}
  .slick-dots {bottom:7px;}
  .slick-dots li button {background:rgba(255,255,255,0.5);}
  .slick-dots li.slick-active button {background:#fff;}
  .slick-dots li.slick-active button:before {border-color:#fff;}

  #member .tab2 .control {top:0; left:221px;}

  #quick {height:auto; margin:45px 0 0;}
  #quick:before {top:-20px; width:15%; height:55px;}
  #quick .inner:before {top:-20px; left:15%; height:55px;}
  #quick .tit {float:none; width:100%; top:-14px;}
  #quick .tit h4 {padding:0;}
  #quick .tit h4 br {display:none;}
  #quick .tit p {display:none;}
  #quick ul {float:none; width:100%; padding:15px 0 20px;}
}

@media all and (max-width:900px) {
  .map_wrap .member_list {width:calc(100% - 300px);}
  .map_wrap .tit, .map_wrap > p {width:calc(100% - 360px);}
}

@media all and (max-width:768px) {
  #chairman .txt p.name {padding-top:30px;} 
  
  #member {height:auto;}
  #member .tit h4 span br {display:block;} 
  #member > ul > li {width:100%; position:static;}
  #member ul li.tab1 > div {position:static;}
  #member .control {left:260px;}

  #member ul li.tab1 > div {height:auto;}
  .tab1 .member_wrap {position:relative; padding:20px 0;}
  .tab1 .big_wrap, .tab1 .small_wrap {position:static; float:none; width:406px; clear:both; margin:0 auto;}
  .tab1 .big_list .txt {width:286px; height:155px; margin:0 auto 20px; padding:17px 0 15px 10px;}
  .tab1 .big_list .pic {width:120px; height:155px;}
  #member .tab1 .control {top:-39px;}

  .tab1 .small_list a {width:58px; height:73px;}
  .tab1 .small_wrap .council {display:none;}

  #member ul li.tab2 > div {height:820px;}
  #member .map, .map_wrap > .list {text-align:center;}
  .map_wrap .tit, .map_wrap > p {width:100%; left:0px; box-sizing:border-box; padding:0 30px;}
  .map_wrap .tit {top:433px;}
  .map_wrap > .list > img  {float:none;} 
  .map_wrap .member_list {float:none; width:100%;}
  .tab2 .big_list {padding:71px 0 10px;}
  .tab2 .big_list .txt {text-align:left;}

  /* 모바일에서 현역의원 하나만 표출 */
  #member {padding:0 !important;}
  #member ul li.tab2, #member > ul > li.tab1 > a {display:none;}

  #quick:before, #quick .inner:before {height:45px;}
  #quick .tit h4 {font-size:1.375rem;}
  #quick ul {padding-top:5px;}
  #quick ul li a {padding-top:87px; font-size:1rem;}
  #quick ul li a:before, #quick ul li a:after {width:80px; height:80px; margin-left:-40px;}
  #quick ul li a:after {background-size:40px;}
}

@media all and (max-width:568px) {
  #visual .control {bottom:10px;}
  .slick-dots {bottom:4px;}
  #chairman h4, #member .tit h4, .small_wrap .district, #quick .tit h4 {font-size:1.313rem;}

  #chairman h4 {padding:0 0 10px;}
  #chairman .txt {height:auto; padding:35px 100px 0 30px; font-size:1.25rem;}
  #chairman .txt p.name {padding:30px 0;}
  #chairman .txt p.name img {margin:0 0 0 10px; height:20px; vertical-align:top;}
  #chairman .pic {bottom:40px;}
  #chairman .btns a {height:40px; line-height:40px;}

  #member {padding-top:52px;}
  #member > ul > li > a {font-size:1.125rem;}
  #member .control {top:-3px; left:197px;}
  #member .big_list .pic {width:103px; height:138px;}
  .big_list .txt .name {font-size:1.25rem;}
  .big_list .txt ul li:before {top:10px;}
  #member .btns a {width:32px; height:32px; background-position:8px -79px;}
  #member .btns a.btn2 {background-position:-40px -79px;}

  .tab1 .big_list .txt {width:calc(100% - 103px); height:138px; padding:11px 0 8px 10px;}
  #member .tab1 .btns {left:114px;}

  #member ul li.tab2 > div {height:759px;}
  #member > ul > li.tab2 > a {left:139px;}
  #member .map, .map_wrap {padding:20px;}
  .map_wrap .tit, .map_wrap > p {padding:0 20px;}
  .map_wrap > p {bottom:15px;}
  .tab2 .big_list .txt {width:180px; min-height:140px;}
  .tab2 .small_wrap .district {width:103px; line-height:83px;}
  .tab2 .small_wrap .small_list {padding:9px 0 0 20px;}
  .tab2 .small_list a {width:46px; height:61px;margin-right:5px;}
  .tab2 .small_list a span {font-size:13px; bottom:3px;}

  #quick:before, #quick .inner:before {height:40px;}
  #quick .tit {top:-16px;}
  #quick ul li {width:33.33%;}
  #quick ul li:nth-child(-n + 3) {margin-bottom:15px;}
  #quick ul li a {padding-top:77px;}
  #quick ul li a:before, #quick ul li a:after {width:70px; height:70px; margin-left:-35px;}
  #quick ul li a:after {background-size:30px;}
}

@media all and (max-width:480px) {
  #chairman .txt p.name img {display:block; margin:5px 0 0;}

  .tab1 .big_wrap {width:100%;}
  .tab1 .small_wrap {position:relative; width:290px;}
  .tab1 .small_wrap .council {display:block; right:0; bottom:0; width:58px; height:73px;}
  .tab1 .small_wrap .council img {padding:5px 0 2px;}
}

@media all and (max-width:430px) {
  #chairman .txt {padding-top:30px;}
  #chairman .pic {bottom:32px;}
  #chairman .btns a {height:32px; line-height:32px; font-size:1rem;}
  
  #member .big_list .pic {width:83px; height:108px;}
  .big_list .txt .name,
  .tab2 .small_wrap .district {font-size:1.125rem;}
  .big_list .txt .name {margin-bottom:5px;}
  .big_list .txt ul li {margin-bottom:4px;}
  #member .small_list a {width:48px; height:63px;}
  #member .btns a {width:28px; height:28px; background-size:210px; background-position:7px -74px;}
  #member .btns a.btn2 {background-position:-38px -74px;}
  #member .control a {width:25px; background-position:6px -34px;}
  #member .control a.btn_stop {background-position:-30px -34px;}
  #member .control a.btn_stop.on {background-position:-137px -197px;}
  #member .control a.btn_next {background-position:-66px -34px;}
  #member .control a.more {background-position:-106px -34px;}
  
  #member ul li.tab1 > div {padding:30px 10px;}
  #member ul li.tab2 > div {height:725px;}
  #member .tab1 .btns {bottom:3px;}
  .tab1 .big_list .txt {width:calc(100% - 96px); height:108px; padding:5px 0 3px 10px;}
  .tab1 .small_wrap {width:240px;}
  .tab1 .small_wrap .council {width:48px; height:63px;}
  .tab1 .small_wrap .council img {width:35px; height:34px;}

  #member .map, .map_wrap {padding:20px 10px;}
  .map_wrap .tit, .map_wrap > p {padding:0 10px;}
  .tab2 .big_list .txt {width:167px; min-height:108px;}
  .tab2 .small_wrap .district {width:83px; line-height:78px;}
  .tab2 .small_list a span {font-size:12px;}
}

@media all and (max-width:380px) {
  #member {padding-top:50px;}
  .big_list .txt .name {padding-top:4px;}
  .big_list .txt ul li::before {top:9px;}
  #member .control {top:-6px; left:auto; right:10px;}
  #member .btns a {width:25px; height:25px; background-size:190px; background-position:6px -68px;}
  #member .btns a.btn2 {background-position:-35px -68px;}

  .tab1 .big_list .txt {width:calc(100% - 83px); padding-bottom:9px;}
  #member .tab1 .btns {left:100px;}
  
  #member > ul > li.tab2 > a {left:130px;}
  #member ul li.tab2 > div {height:723px;}
  .tab2 .big_list .txt {width:151px;}

  #quick:before, #quick .inner:before {top:-17px; height:34px;}
  #quick .tit {top:-14px;}
  #quick ul {padding-top:0;}
  #quick ul li a {padding-top:62px;}
  #quick ul li a:before, #quick ul li a:after {width:60px; height:60px; margin-left:-30px;}
  #quick ul li a:after {background-size:25px;}
}

@media all and (max-width:360px) {
  #quick:before {display:none;}
  #quick .inner:before {left:0; background-size:280px;}
}