@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;}
}


/* 의사일정 */
#agenda {position: relative; padding: 11px 20px 20px; height: 200px; background: rgba(255,255,255,.5); border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); box-sizing: border-box;}
#agenda .tit_wrap {display: flex; justify-content: space-between; align-items: center;}
#agenda .tit_wrap h4 {font-size: 26px; font-weight: 600; color: #4c8660;}
#agenda .tit_wrap .btn {padding: 0;width: 85px;height: 40px;line-height: 38px;font-size: 16px;background: #333;border-color: #333;}
#agenda .tit_wrap .btn:hover {background: #fff; color: #333;}

#agenda .date {margin: 19px 0 22px;display: flex;justify-content: center;}
#agenda .date button {text-indent: -9999px;width: 30px;height: 30px;background: #4c8660 url(/images/kr/main/ico_ctrl.png)no-repeat 10px -35px;border-radius: 50%;}
#agenda .date .btn_next {background-position: -176px -35px;}
#agenda .date .list {margin: 0 30px;max-width: 170px;text-align: center;}
#agenda .date .list strong {font-size: 23px; font-weight: 500; text-align: center;}

#agenda .list_wrap {display: flex;flex-wrap: wrap;padding: 15px 70px 15px 20px;height: 58px;background: #fff;border-radius: 5px;box-sizing: border-box;}

#agenda .list_wrap .slick-track,
#agenda .list_wrap .slick-slide {width: 100% !important;}
#agenda .list_wrap ul {width: calc(100% - 60px);}
#agenda .list_wrap ul li {font-size: 18px; line-height: 30px;}
#agenda .list_wrap p,
#agenda .list_wrap a {display: block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#agenda .btn_stop {position: absolute;bottom: 33px;right: 57px;background-position: -56px -78px;}
#agenda .btn_stop.on {background-position: -125px -78px;}
#agenda .list_wrap .slick-arrow {z-index: 1;position:absolute;top: -2px;right: 35px;width:20px;height:30px;font-size:0;text-indent:-9999px;background: url(/images/kr/main/ico_ctrl.png) no-repeat 6px -78px;}
#agenda .list_wrap .slick-next {right:0; background-position: -181px -78px;}


@media all and (max-width:1240px){
    #agenda {width:48%;height: 270px;padding: 25px 20px;}
    #agenda .date {margin: 40px 0 32px;}
    #agenda .btn_stop {bottom: 58px;}
}
@media all and (max-width:1024px){
    #agenda {width: 100%; height: auto;}
    #agenda .date {margin: 20px 0;}
    #agenda .btn_stop {bottom: 69px;}
}
@media all and (max-width:568px){
    #agenda .tit_wrap h4 {font-size: 23px;}
    #agenda .tit_wrap .btn {height:34px; line-height:32px; font-size:15px;}

    #agenda .date {margin: 25px 0 15px;}
    #agenda .date .list {margin: 0 10px;}
    #agenda .date .list strong {font-size:20px;}
    
    #agenda .list_wrap {height: auto;padding: 10px 70px 0 15px;}
    #agenda .list_wrap p, #agenda .list_wrap a {font-size:15px;}
    #agenda .btn_stop {bottom: 61px;}
}
@media all and (max-width:430px){
    #agenda {padding:15px;}
    #agenda .tit_wrap {flex-wrap:wrap;}
    #agenda .tit_wrap h4 {width: 100%;font-size: 22px;text-align: center;}
    #agenda .tit_wrap .btn_wrap {margin:10px 0 0; width:100%;}
    #agenda .tit_wrap .btn_wrap a {width:48%;}
    #agenda .btn_stop {bottom: 51px;}
}

/* 열린의장실 */
#chairman {z-index:1; position: relative; margin: 50px 0 0; height: 271px;} 
#chairman .txt{padding: 0 48% 0 0;}
#chairman .txt h4 {font-size: 26px; font-weight: 600; color: #4c6386;}
#chairman .txt p {margin: 10px 0 15px; font-size: 18px; line-height: 1.5;}
#chairman .txt .name {font-size: 18px;}
#chairman .txt .name img{vertical-align: bottom;}
#chairman .txt .btn_wrap {margin: 33px 0 0; position: relative; display: flex; align-items: center; padding: 0 5%; width: 218px; height: 60px; 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 .txt .btn_wrap::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(30deg); width: 1px; height: 17px; background: #ccc;}
#chairman .txt .btn_wrap a {display: block; width: 50%; font-weight: 500; color: #fff; text-align: center;}
#chairman .pic {z-index:-1; position: absolute; bottom: 0; right: 0;}


@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 {height:235px;}
    #chairman .txt h4 {font-size:24px;}
    #chairman .pic img {width: 220px;}
    #chairman .txt p {font-size:15px; line-height:1.6;}
    #chairman .txt .name {font-size:15px;}
    #chairman .txt .name img {margin:0 0 0 5px; width:70px;}
    #chairman .txt .btn_wrap {margin: 25px 0 0;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:225px;}
    #chairman .txt .name img {width:60px;}
    #chairman .txt .btn_wrap {padding: 0;width:150px;height: 44px;}
    #chairman .txt .btn_wrap a {font-size:14px;}
    #chairman .pic img {width: 170px;}
}

/* 바로가기 */
#link ul {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 80px 0;}
#link ul li {width: 122px;}
#link ul li:nth-child(5) {width: 155px;}
#link ul li a {position: relative; display: block; padding: 132px 0 0; width: 100%; font-weight: 500; text-align: center; text-decoration: none;}
#link ul li a::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 122px; height: 122px; background: #f0f3fc url(/images/kr/main/ico_link1.png)no-repeat center; border-radius: 50%; }
#link ul li a:hover::before {transform: translateX(-50%) rotateY(360deg); transition: 1s ease;}
#link ul li:nth-child(2) a::before {background-image:url(/images/kr/main/ico_link2.png);}
#link ul li:nth-child(3) a::before {background-image:url(/images/kr/main/ico_link3.png);}
#link ul li:nth-child(4) a::before {background-image:url(/images/kr/main/ico_link4.png);}
#link ul li:nth-child(5) a::before {background-image:url(/images/kr/main/ico_link5.png);}
#link ul li:nth-child(6) a::before {background-image:url(/images/kr/main/ico_link6.png);}


@media all and (max-width:1024px){
    #link ul {padding: 60px 0;}
    #link ul li a {padding: 115px 0 0;}
    #link ul li a::before{width: 100px; height: 100px; background-size: 40px;}
}
@media all and (max-width:820px){
    #link ul {padding: 40px 0 20px;}
    #link ul li,
    #link ul li:nth-child(5){width:33.33%;}
    #link ul li a {height:40px;}
}
@media all and (max-width:568px){
    #link ul li a {padding: 100px 0 0;}
    #link ul li a::before{width: 90px; height: 90px; background-size: 36px;}
}

/* 현역의원 */
#member {padding: 80px 0 60px;background: url(/images/kr/main/bg_member.jpg)no-repeat center;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 {position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;}
#member ul li .name strong {font-size: 25px; font-weight: 600;}
#member ul li .name p {margin: 5px 0 0;font-size: 20px;font-weight: 500;}
#member ul li .btn_wrap {position: absolute;right: 0;display: flex;flex-wrap: wrap;width: 86px;height: 40px;background:#f05952;border-radius: 10px;}
#member ul li .btn_wrap a {position: relative; text-indent: -9999px; width: 50%; height: 100%; background: url(/images/kr/main/ico_profile.png)no-repeat center;}
#member ul li .btn_wrap a:last-child {background-image: url(/images/kr/main/ico_home.png);}
#member ul li .btn_wrap a:last-child::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 11px; background: rgba(255,255,255,.5);}
#member ul li .dash {margin: 25px 0 0;font-size: 18px;line-height: 1.6;}
#member ul li .dash > li:before {top: 13px; background: #fff;}


@media all and (max-width:1440px){
    #member ul li .name {display:flex;flex-wrap: wrap;align-items:center;}
    #member ul li .name strong {margin:0 5px 0 0;}
    #member ul li .btn_wrap {position: static;margin: 5px 0 0;width:100%;height: 34px;}
    #member ul li .dash {margin:15px 0 0;}
}
@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: 22px;}
    #member ul li .name p,
    #member ul li .dash {font-size:16px;}
}
@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);}
    #member ul li .name strong {font-size: 20px;}
    #member ul li .name p,
    #member ul li .dash {margin: 0;font-size:15px;}
}
@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 .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;}
}


/* 게시판 */
#board {float: left; position: relative; width: 63.57%; height: 420px;}
#board h4 {margin: 0 0 25px; font-size: 26px; font-weight: 600; color: #000;}
#board > ul {display: flex;align-items: center;width: calc(100% - 60px);height: 50px;background: #f3f4f4;border-radius: 5px;}
#board > ul > li {width: 20%; height: 100%;}
#board > ul > li h5 {height: 100%;}
#board > ul > li h5 a {position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 18px;font-weight: 300;text-align: center;word-break: keep-all;text-decoration: none;}
#board > ul > li.on h5 a {font-weight: 500; color: #fff; background: #4c8660;}
#board > ul > li.on h5 a::after {z-index: -1; content: ''; position: absolute; top: -5px; left: 0; width: 100%; height: 60px; background: #4c8660; border-radius: 5px;}

#board .con{visibility:hidden; opacity:0; position:absolute; top:100px; left:0; width:100%;}
#board .on .con{visibility:visible;opacity:1;top: 130px;transition:0.25s ease-in-out;}

#board .con ul {display: flex; flex-wrap: wrap;}
#board .con ul li {position: relative;margin: 0 1.1% 0 0;padding: 30px 3.37%;width: 32.58%;height: 290px;background: #fff;border: 1px solid #ccc;border-radius: 10px;box-sizing: border-box;}
#board .con ul li.none {width:100%; text-align:center; border:none;}
#board .con ul li:last-child {margin: 0;}
#board .con ul li a {display: block;width: 100%;height: 100%;text-decoration: none;}
#board .con ul li .tit {overflow:hidden;margin: 0 0 25px;width:100%;height: 2.8em;line-height:1.4em;max-height: 2.8em;display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size: 20px; font-weight: 500;}
#board .con ul li a:hover .tit {text-decoration:underline;}
#board .con ul li .stit {overflow:hidden;width:100%;height: 5.6em;line-height:1.4em;max-height: 5.6em;display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size: 18px;}
#board .con ul li .date {position: absolute; bottom: 30px; left: 30px;}


@media all and (max-width:1024px){
    #board {width:100%;}
}
@media (max-width: 768px){
    #board > ul > li h5 a {font-size:16px;}
    #board .con ul li {padding:20px 15px;height: 250px;}
    #board .con ul li .tit {margin: 0 0 20px;font-size:18px;}
    #board .con ul li .stit {font-size:16px;}
    #board .con ul li .date {left:15px; bottom:20px;}
}
@media all and (max-width:568px) {
    #board {height:390px;}
    #board h4 {font-size:24px;}
    #board > ul {width:100%;height: 42px;}
    #board > ul > li h5 a {font-size:15px;}
    #board > ul > li.on h5 a::after {height: 52px;}
    #board .more {text-indent: 0;top: auto;bottom: 0;width:100%;height: 42px;line-height: 42px;font-weight: 400;text-align: center;background-image: none;text-decoration: none;}
    #board .on .con {top:110px;}
    #board .con ul li {width:49.2%;height: 220px;}
    #board .con ul li:nth-child(2) {margin-right:0;}
    #board .con ul li:nth-child(3) {display:none;}
    #board .con ul li .tit {margin: 0 0 15px;font-size:16px;}
    #board .con ul li .stit,
    #board .con ul li .date {font-size:14px;}
}
@media all and (max-width:430px) {
    #board h4 {font-size:22px;}
}
@media all and (max-width:380px) {
    #board {height:380px;}
    #board .con ul li {padding:15px 10px; height:210px;}
    #board .con ul li .date {left:10px; bottom:15px;}
}


/* 팝업존 */
#popup {float: right; width: 32.85%;}
#popup .tit_wrap {position: relative; display: flex; justify-content: space-between;}
#popup .tit_wrap h4 {font-size: 26px; font-weight: 600; color: #000;}
#popup .tit_wrap .control .page_v {margin: 0 15px 0 0; font-size: 20px;}
#popup .tit_wrap .control .page_v .current{font-weight: 500; color: #f05952;}
#popup .tit_wrap .control .btn_prev {background-position: 6px -226px;}
#popup .tit_wrap .control .btn_stop {background-position: -59px -226px;}
#popup .tit_wrap .control .btn_stop.on {background-position: -129px -226px;}
#popup .tit_wrap .control .btn_next {background-position: -186px -226px;}
#popup .list_wrap {overflow: hidden;margin: 25px 0 0;text-align: center;border-radius: 10px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
#popup .list_wrap li {width:100%; height:360px;}
#popup .list_wrap .none {display: flex;justify-content: center;align-items: center;height: 100%;line-height: 1;}


@media all and (max-width:1024px){
    #popup {margin: 35px 0 0;width:100%;}
    #popup .tit_wrap .control .page_v {font-size:18px;}
}
@media all and (max-width:568px){
    #popup .tit_wrap h4 {font-size:24px;}
    #popup .tit_wrap .control .page_v {font-size:16px;}
    #popup .list_wrap li {height:auto;}
    #popup .list_wrap .none {padding:100px 0 0; box-sizing:border-box;}
}
@media all and (max-width:430px){
    #popup .tit_wrap h4 {font-size:22px;}
}

/* 의정포토 */
#gallery {padding: 70px 0 80px; background: #f4f6fa;}
#gallery h4 {font-size: 26px; font-weight: 600; color: #000; text-align: center;}
#gallery .control {position: absolute; top: 0; right: 50px; background: #fff; border-radius: 15px;}
#gallery .control::after {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: #ccc;}
#gallery .control button {width: 40px; height: 40px;}
#gallery .control .btn_prev {background-position: 15px -130px;}
#gallery .control .btn_next {background-position: -172px -130px;}
#gallery .more {top: 0; width: 40px; height: 40px; background: #fff url(/images/kr/main/ico_more2.png)no-repeat center; border-radius: 15px;}
#gallery .list_wrap {margin: 25px auto 0; max-width: 1920px;}
#gallery .list_wrap li a {overflow: hidden;display: block;width: 420px;margin: 0 35px 0 0;background: #fff;border-radius: 10px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);text-decoration: none;}

#gallery .pic {height: 280px;}
#gallery .pic img {width: 100%; height: 100%;}
#gallery .txt {padding: 15px 20px; font-size: 18px; box-sizing: border-box;}
#gallery .txt .tit {overflow: hidden; display: block; margin: 0 0 15px; width: 100%; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;}
#gallery .list_wrap li a:hover .tit {text-decoration:underline;}
#gallery .txt .date {color: #666;}


@media all and (max-width:1440px){
    #gallery .list_wrap {max-width: none;width:100%;}
    #gallery .list_wrap li a {width:calc(100% - 30px); margin:0 auto;}
}
@media all and (max-width:1024px){
    #gallery {padding: 50px 0;}
    #gallery .pic {height: 220px;}
    #gallery .list_wrap li a {width: calc(100% - 20px);}
    #gallery .txt {font-size: 16px;}
    #gallery .txt .tit {margin:0 0 10px;}
}
@media all and (max-width:840px){
    #gallery .pic {height: 180px;}
    #gallery .txt {padding: 15px;}
    #gallery .txt .tit {margin: 0 0 5px;}
}
@media all and (max-width:768px){
    #gallery {padding: 35px 0;}    
}
@media all and (max-width:568px){
    #gallery h4 {font-size: 24px;text-align: left;}
    #gallery .pic {height: 150px;}
    #gallery .txt {font-size: 15px;}
}
@media all and (max-width:430px){
    #gallery h4 {font-size: 22px;}
    #gallery .control,
    #gallery .more{top: -5px;}
    #gallery .list_wrap li a {width: calc(100% - 10px);}
    #gallery .pic {height: 120px;}
    #gallery .txt {padding: 10px;}
    #gallery .txt .date {font-size:14px;}
}

/* 배너모음 */
#banner{position:relative; width:100%; height:auto; padding: 30px 0; background:#fff; box-sizing: border-box;}
#banner .tit_wrap {position: absolute; top: 10px; left: 0; display: flex; align-items: center; z-index: 1;}
#banner .tit_wrap h4 {font-size: 20px; font-weight: 500;}
#banner .control {margin: 0 0 0 21px;}
#banner .control button {width: 50px;height: 50px;border: 1px solid #ccc;background-position: 18px -175px;border-radius: 50%;}
#banner .control .btn_next {margin: 0 10px;background-position: -168px -175px;}
#banner .control .btn_stop {background-position: -40px -175px;}
#banner .control .btn_stop.on {background-position: -114px -175px;}

#banner .list_wrap{position:relative; float:left; width:100%; padding:0 0 0 294px; box-sizing:border-box;}
#banner .list{float:left; margin:0 26px 0 0;}
#banner .list a{overflow: hidden; display:block; width: 257px; height: 70px; border: 1px solid #f1f1f1; border-radius: 10px; overflow: hidden; box-sizing: border-box; transition:0.2s ease;}
#banner .list a img {width: 100%; height: 100%;}

@media all and (max-width:1430px){
    #banner .tit_wrap {left: 15px;}
}
@media all and (max-width:1024px){
    #banner .tit_wrap {top: 9px;}
    #banner .list {margin: 0 20px 0 0;}
    #banner .list a {width: 200px; height: 56px;}
    #banner .list a img {margin: 0 auto;}
}
@media all and (max-width:768px){
    #banner h4 {font-size: 24px;}
    #banner .control {margin: 0 0 0 15px;}
    #banner .control button {width: 32px;height: 32px;background-position: 9px -184px;}
    #banner .control .btn_next {margin: 0 3px;background-position: -177px -184px;}
    #banner .control .btn_stop {background-position: -49px -184px;}
    #banner .control .btn_stop.on {background-position: -123px -184px;}
    #banner .tit_wrap {top: 0;}
    #banner .list_wrap {padding: 45px 0 0;}
}
@media all and (max-width:568px){
    #banner {padding: 20px 0;}
    #banner h4 {font-size: 20px;}
    #banner .list {margin: 0 10px 0 0;}
    #banner .list a {width: 180px; height: 52px;}
    #banner .list_wrap {padding: 40px 0 0;}
}
@media all and (max-width:380px){
    #banner h4 {font-size: 18px;}
}