@charset "utf-8";

/* 공통 */
.slick-slide img{display:inline;}

.btn {min-width: auto;}

.more{z-index:1;text-indent: -9999px;position:absolute;top:62px;right:0;display:block;width: 50px;height: 50px;background: #f3f4f4 url(/images/kr/main/ico_more1.png)no-repeat center; border-radius: 5px;}

#bg_main .ico_new{display:inline-block;vertical-align:middle;width:18px;height:18px;line-height: 18px;margin:0 0 0 -20px;font-size:10px;font-weight:400;text-align:center;color:#fff;border-radius:50%;background:#ff9c00;text-transform:uppercase;}

.control {display: flex;flex-wrap: wrap;align-items: center;}
.control > button{position:relative;float:left;width:20px;height:30px;font-size:0;text-indent:-9999px;background: url(/images/kr/main/ico_ctrl.png) no-repeat 5px 8px;}
.control > .btn_next{background-position: -181px 8px;}
.control > .btn_stop{background-position: -58px 8px;}
.control > .btn_stop.on{background-position: -124px 8px;}


/* sec1 */
.sec1 {padding: 50px 0; background: url(/images/kr/main/bg_main.jpg)no-repeat; background-size: cover;}
.sec1 .right {float: right; width: 39.28%;}
.sec2 {padding-top: 80px; padding-bottom: 80px;}


@media all and (max-width:1240px){
    .sec1 .right {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 35px 0 0; width:100%;}
}
@media all and (max-width:1024px){
    .sec2 {padding-top:50px; padding-bottom:50px;}
}
@media all and (max-width:768px){
    .sec1 {padding:35px 0;}
    .sec1 .right {margin:25px 0 0;}
    .sec2 {padding-top:35px; padding-bottom:35px;}
}

/* 비주얼 */
#visual {float: left; overflow: hidden; position: relative; width: 57.14%; height: 520px; border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);}
#visual .list_wrap {width: 100%; height: 100%;}
#visual .list_wrap * {vertical-align: top; width: 100%; height: 100%;}
#visual .list_wrap img {height: 100%;}
#visual .control {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 0 10px 0 20px; height: 30px; background: rgba(0,0,0,.5); border-radius: 15px;}
#visual .slick-dots {float: left; height: 9px;}
#visual .slick-dots li {position: relative; float: left; margin:0 20px 0 0;}
#visual .slick-dots li.slick-active::after {content: ''; position: absolute; top: -6px; left: -6px;  width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%;}
#visual .slick-dots li button {text-indent: -9999px; width: 8px; height: 8px; background: #999; border-radius: 50%;}
#visual .slick-dots li.slick-active button{background: #fff;}

@media all and (max-width:1240px){
    #visual {width:100%;}
}
@media all and (max-width:1024px){
    #visual {height: auto;}
}


/* 열린의장실 */
#chairman {z-index:1;position: relative;height: 325px;} 
#chairman .txt{padding: 0 35% 0 0;}
#chairman .txt h4 {font-size: 26px; font-weight: 600; color: #4c6386;}
#chairman .txt p {margin: 5px 0 40px;font-size: 22px;}
#chairman .txt .name {font-size: 16px;}
#chairman .txt .name img{vertical-align: bottom;}
#chairman .txt .btn_wrap a {margin: 7px 0 0;position: relative;display: flex;justify-content: center;align-items: center;padding: 0 5%;width: 218px;height: 60px;font-weight: 500;color: #fff;background: -moz-linear-gradient(90deg, rgba(27,71,166,1) 0%, rgba(26,146,222,1) 100%);background: -webkit-linear-gradient(90deg, rgba(27,71,166,1) 0%, rgba(26,146,222,1) 100%);background: linear-gradient(90deg, rgba(27,71,166,1) 0%, rgba(26,146,222,1) 100%);border-radius: 30px;box-sizing: border-box;}
#chairman .pic {z-index:-1; position: absolute; bottom: 0; right: 0;}

@media all and (max-width:1380px){
    #chairman .txt p {font-size:20px;}
}
@media all and (max-width:1240px){
    #chairman {margin: 0; width:48%;}
}
@media all and (max-width:1024px){
    #chairman {margin: 35px 0 0;width: 100%;}
    #chairman .txt {padding: 0 48% 0 20px;}
    #chairman .txt p {font-size:17px;}
}
@media all and (max-width:568px){
    #chairman {margin: 0;height: 264px;}
    #chairman .txt {padding: 0 37% 0 20px;}
    #chairman .txt h4 {font-size:24px;}
    #chairman .pic img {width: 220px;}
    #chairman .txt p {margin: 5px 0 30px;font-size:15px;}
    #chairman .txt .name {font-size:15px;}
    #chairman .txt .name img {margin:5px 0 0; height:32px;}
    #chairman .txt .btn_wrap a {width:180px;height:50px;}
}
@media all and (max-width:430px){
    #chairman .txt h4 {font-size:22px;}
    #chairman .pic img {width: 190px;}
    #chairman .txt {padding:0 0 0 10px;}
}
@media all and (max-width:380px){
    #chairman {height: 261px;}
    #chairman .txt .btn_wrap a {padding: 0;width:150px;height: 44px;}
    #chairman .pic img {width: 170px;}
}

/* 바로가기 */
#link {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 50px 0 0;}
#link li {width: 25%;}
#link li a {position: relative; display: block; padding: 133px 0 0; font-weight: 500; text-align: center; text-decoration: none; box-sizing: border-box;}
#link li a::after {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 115px; height: 115px; border-radius: 50%; background: #fff url(/images/en/main/ico_link1.png)no-repeat center;}
#link li:nth-child(2) a::after {background-image: url(/images/en/main/ico_link2.png);}
#link li:nth-child(3) a::after {background-image: url(/images/en/main/ico_link3.png);}
#link li:nth-child(4) a::after {background-image: url(/images/en/main/ico_link4.png);}
#link li a:hover::after {transform: translateX(-50%) rotateY(360deg); transition: 1s ease;}

@media all and (max-width:1240px){
    #link {margin: 0;width: 45%;align-items: center;}
}
@media all and (max-width:1024px){
    #link {margin: 50px 0 0; width:100%;}
}
@media all and (max-width:568px){
    #link {margin: 10px 0 0;}
    #link li {width:50%; margin:25px 0 0;}
    #link li a {padding: 105px 0 0; font-size:14px;}
    #link li a::after {width:90px; height:90px; background-size: 40px auto;}
}

/* 현역의원 */
#member {padding: 45px 0 30px;background: url(/images/kr/main/bg_member.jpg)no-repeat center bottom;background-size: cover;}
#member h4 {margin: 0 0 25px; font-size: 32px; font-weight: 600; color: #000; text-align: center;}
#member > .inner > ul {display: flex; flex-wrap: wrap;}
#member > .inner > ul > li {margin: 0 0 20px 1.4%;padding: 20px 1.4%;width: 23.92%;background: #38415a url(/images/kr/main/bg_list_mem.png)no-repeat right bottom;border-radius: 5px;box-sizing: border-box;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
#member > .inner > ul > li:first-child,
#member > .inner > ul > li:nth-child(5) {margin-left: 0;}
#member > .inner > ul > li.none {display: flex;flex-wrap: wrap;justify-content: center;align-content: center;padding: 10px;background: #d3d4d4;}
#member ul li .pic {float: left; width: 110px; height: 150px; border: 2px solid #fff; box-sizing: border-box;}
#member ul li .pic img {width: 100%; height: 100%;}
#member ul li .txt {float: right; width: calc(100% - 130px); color: #fff;}
#member ul li .wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
#member ul li .name strong {font-size: 21px;font-weight: 600;}
#member ul li .name p {font-weight: 500;}
#member ul li .btn_wrap a{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;margin: 20px 0 0 auto;width: 135px;height: 30px;color: #fff;background:#f05952;border-radius: 10px;}
#member ul li .dash {margin: 20px 0 0;}
#member ul li .dash > li:before {top: 13px; background: #fff;}


@media all and (max-width:1440px){
    #member ul li .btn_wrap {margin: 5px 0 0;width:100%;height: 34px;}
    #member ul li .dash {margin:15px 0 0;}
    #member ul li .dash > li:before {top:11px;}
}
@media all and (max-width:1240px){
    #member ul li .pic {width:100px;height: 130px;}
    #member ul li .txt {width: calc(100% - 115px);}
    #member ul li .name strong {font-size: 18px;}
    #member ul li .name p,
    #member ul li .dash {font-size: 14px;}
    #member ul li .dash > li:before {top: 9px;}
    #member ul li .btn_wrap a {width: 120px;font-size:14px;}
}
@media all and (max-width:1090px){
    #member {padding:50px 0 40px;}
    #member > .inner > ul > li {width: 32.6%;margin:0 0 15px 1%;}
    #member > .inner > ul > li:nth-child(5) {margin-left:1%;}
    #member > .inner > ul > li:nth-child(4),
    #member > .inner > ul > li:nth-child(7) {margin-left:0;}
}
@media all and (max-width:830px){
    #member ul li .pic {width:85px;height: 105px;}
    #member ul li .txt {width: calc(100% - 95px);}
}
@media all and (max-width:768px){
    #member {padding: 35px 0 30px;}
    #member h4 {font-size: 28px;}
    #member > .inner > ul > li {padding: 15px 1.4%; width: 49%; margin-bottom: 5px;}
    #member > .inner > ul > li:nth-child(even) {margin-left: 1%;}
    #member > .inner > ul > li:nth-child(odd) {margin-left: 0;}
}
@media all and (max-width:568px) {
    #member h4 {font-size: 26px;}
    #member ul li .pic {width:70px;height: 90px;}
    #member ul li .txt {width: calc(100% - 80px);}
    #member ul li .name strong {font-size: 16px;}
    #member ul li .btn_wrap {height: 30px;}
    #member ul li .dash {margin: 10px 0 0;}
}
@media all and (max-width:430px){
    #member h4 {margin: 0 0 20px;font-size: 24px;}
    #member > .inner > ul > li {width:100%; margin-bottom:10px;}
    #member > .inner > ul > li:nth-child(even) {margin-left: 0;}
}