@charset "utf-8";

#container_main{position:relative; overflow:hidden; width:100%;}

/* 메인비주얼 */
#visual {position: relative; max-width: 1920px; margin: 0 auto; padding: 50px 0; box-sizing: border-box;}
#visual:before {content: '';display: block;position: absolute;top: 0;right: 0;width: 1660px;height: 100%;background: url(/images/member/main/bg_main.jpg)no-repeat;background-size: cover;z-index: 0;}
#visual .pic {float: left;width: 50.98%;height: 570px;overflow: hidden;position: relative;}
#visual .pic img {width: 100%; height: 100%;}
#visual .txt {float: left;width: 36.45%;padding: 0 0 0 2.5%;box-sizing: border-box;position: relative;}
#visual .tit strong {display: block; margin: 10px 0 0; font-size: 46px; font-weight: 700;}
#visual .tit strong span{color: #3e8988;}

#visual .dot {margin: 40px 0 0;}
#visual .dot > li {padding: 0 0 15px 163px; font-size: 24px; font-weight: 500;}
#visual .dot > li:before{top: 9px;width: 16px; height: 16px; background: url(/images/member/main/ico_tit.png)no-repeat;}
#visual .dot > li em {position: absolute; top: 0; left: 25px;}
#visual .dot > li span {font-weight: 300;}
#visual .ls2 {letter-spacing: 42px;}
#visual .ls3 {letter-spacing: 10px;}
#visual .btns {margin: 57px 0 0;}
#visual .btns a {float: left;position: relative;display: block;width: 35.72%;height: 60px;line-height: 65px;font-family: 'gmarket';font-size: 22px;font-weight: 800;color: #fff;text-align: center;background: #333;border-radius: 30px;text-decoration: none;}
#visual .btns a:after {content: ''; display: inline-block; margin: 0 0 3px 20px; width: 16px; height: 9px; background: url(/images/member/main/ico_arrow.png)no-repeat;}
#visual .btns a:last-child {margin: 0 0 0 8.48%;}

@media all and (max-width:1500px) {
    #visual:before {width: 100%;}
    #visual .pic {height: 500px;} 
    #visual .txt {padding-top: 20px; width: 45%;}
    #visual .txt img {height: 45px;}
    #visual .tit strong {font-size: 38px;}
    #visual .dot > li {font-size: 22px;}
    #visual .btns {margin: 35px 0 0;}
    #visual .btns a:last-child {margin: 0 0 0 3%;}
}
@media all and (max-width:1280px) {
    #visual .pic {height: 430px;} 
    #visual .txt img {height: 40px;}
    #visual .tit strong {margin: 8px 0 0;font-size: 34px;}
    #visual .dot {margin: 20px 0 0;}
    #visual .dot > li {padding:0 0 10px 140px;font-size: 20px;}
    #visual .dot > li:before {top: 6px;}
    #visual .ls2 {letter-spacing: 35px;}
    #visual .ls3 {letter-spacing: 8px;}
    #visual .btns {margin: 30px 0 0;}
    #visual .btns a {margin-bottom: 2px; width: 40%; height: 55px; line-height: 60px; font-size: 20px;}
}

@media all and (max-width:1024px) {
    #visual {padding: 35px 0;}
    #visual .pic {padding: 0 10px; width: 100%; height: 450px; box-sizing: border-box; }
    #visual .txt {width: 100%;}
}

@media all and (max-width:768px) {
    #visual .pic {height: auto;}
    #visual .txt img {height: 34px;}
    #visual .tit strong {margin: 5px 0 0;font-size: 32px;}
    #visual .dot > li {padding: 0 0 8px 130px; font-size: 18px;}
    #visual .btns {margin: 15px 0 0;}
    #visual .btns a {height: 48px; line-height: 52px; font-size: 18px;}
    #visual .btns a:after {margin:0 0 1px 10px;}
}
@media all and (max-width:568px) {
    #visual .txt img {height: 32px;}
    #visual .tit strong {font-size: 28px;}
    #visual .dot > li {padding: 0 0 8px 110px; font-size: 16px;}
    #visual .ls2 {letter-spacing: 27px;}
    #visual .ls3 {letter-spacing: 6px;}
    #visual .btns a {height: 42px; line-height: 46px; font-size: 16px;}
    #visual .btns a:after {margin:0 0 1px 10px;}
}
@media all and (max-width:430px) {
    #visual .tit strong {font-size: 26px;}
}



/* 바로가기 */
#link {position: relative; max-width:1920px; height: 248px; margin: 50px auto;}
#link:before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 1660px; height: 100%; background: #f0f7f5; z-index: 0;}
#link .inner {height: 100%;}
#link .tit_wrap {position: absolute;top: 51px;left: 67px;height: 79%;}
#link .tit_wrap:after {content: '';display: block;position: absolute;bottom: 0;left: -36%;width: 320px;height: 190px;background: url(/images/member/main/bg_menu.png)no-repeat bottom;}
#link ul {padding: 0 0 0 465px;height: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#link li {width:25%;}
#link li a {position: relative; display: block; padding:131px 0 0; width: 100%; font-size: 18px; text-align: center; text-decoration: none;}
#link li a:hover:after{transform:translateX(-50%) rotateY(360deg); transition:transform 0.6s ease-in-out;}
#link li a:after {content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; background: url(/images/member/main/ico_link1.png)no-repeat; background-size: cover; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);} 
#link li:nth-child(2) a:after {background-image: url(/images/member/main/ico_link2.png);}
#link li:nth-child(3) a:after {background-image: url(/images/member/main/ico_link3.png);}
#link li:nth-child(4) a:after {background-image: url(/images/member/main/ico_link4.png);}

@media all and (max-width:1430px){
    #link:before {width: 100%;}
    #link ul {padding: 0 0 0 30%;}
}
@media all and (max-width:1024px){
    #link {margin: 40px auto;}
    #link .tit_wrap {display: none;}
    #link ul {padding: 0;}
    #link li a {padding: 120px 0 0;}
    #link li a:after {width: 110px; height: 110px;}
}
@media all and (max-width:768px){
    #link {height: 200px;}
    #link li a {padding: 100px 0 0; font-size: 16px;}
    #link li a:after {width: 90px; height: 90px;}
}
@media all and (max-width:568px){
    #link {margin: 30px auto; height: 180px;}
    #link li a {padding: 85px 0 0; font-size: 15px;}
    #link li a:after {width: 75px; height: 75px;}
}
@media all and (max-width:440px){
    #link {padding: 20px 0; height: 230px;}
    #link li {width: 50%;}
    #link li:nth-child(n + 3) {margin: 15px 0 0;}
}

/* 의정활동사진 */
#gallery .tit_wrap {position: relative;}
#gallery .tit_wrap h4{font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -0.13em; text-align: center;}
#gallery .tit_wrap a {position: absolute; top: 5px; right: 0;}
#gallery .tit_wrap a .bar{display: block; width: 27px; height: 3px; background: #333; border-radius: 5px; transition: 0.2s;}
#gallery .tit_wrap a .bar:nth-child(2) {margin: 7px 0;width: 21px;}
#gallery .tit_wrap a:hover .bar:nth-child(2) {width:27px;}

#gallery .slick-arrow {position: absolute;top: 50%;left: -100px;transform: translateY(-50%);width: 50px;height: 50px;border-radius: 50%;font-size: 0;background: #ccc url(/images/kr/main/ico_ctrl.png) no-repeat 19px -134px; z-index: 2;}
#gallery .slick-next {left:auto;right: -100px;background-position: -81px -134px;}
#gallery .list_wrap{margin: 31px auto 50px; width:calc(100% - 200px);}
#gallery .list_wrap .list:not(:first-of-type){display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type){display:block;}
#gallery .list{float:left;}
#gallery .list *{display:block;}
#gallery .list a{overflow:hidden;position:relative;width: 285px;margin: 0 20px 0 0;text-decoration:none;background:#fff;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%;height: 202px; transition: 0.3s ease-in-out;}
#gallery .list a:hover .img img {transform: scale(1.2);}
#gallery .sbj{height: 64px;padding: 6px 9px;box-sizing:border-box;}
#gallery .tit{position:relative;z-index:1;display:inline-block;max-width:90%;padding: 0 20px 8px 0;color:#333;font-size:18px;font-weight: 300;line-height: 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;box-sizing:border-box;}
#gallery .date{font-size: 18px;}
#gallery .new{position:relative;z-index:1;display:inline-block;vertical-align: top;width:17px;height:17px;line-height:18px;margin: 2px 0 0 -20px;font-size:10px;font-weight:200;border-radius:50%;text-transform:uppercase;text-align:center;color:#fff;background:#ff9c00;}

@media all and (max-width:1024px) {
    #gallery .tit_wrap h4 {font-size: 30px;}
    #gallery .list_wrap {width:calc(100% - 20px);}
    #gallery .list a {width:calc(100% - 20px); margin:0 10px;} 
    #gallery .slick-arrow {top: 39%;left: -10px;}
    #gallery .slick-next {left: auto; right: -10px;}
}
@media all and (max-width:768px) {
    #gallery .tit_wrap h4 {font-size: 27px;}
    #gallery .tit_wrap a .bar:nth-child(2) {margin: 5px 0;}
    #gallery .list_wrap {margin:28px auto 30px;}
    #gallery .img img {height: 170px;}
    #gallery .tit, #gallery .date {font-size: 16px;}
    #gallery .tit {padding-bottom: 5px;}
}
@media all and (max-width:568px) {
    #gallery .tit_wrap h4 {font-size: 25px;}
    #gallery .tit_wrap a {top: 0;}
    #gallery .tit_wrap a .bar {width: 20px; height: 3px; margin: 3px 0;}
    #gallery .tit_wrap a .bar:nth-child(2), #gallery .tit_wrap a:hover .bar:nth-child(2) {width: 17px;}
    #gallery .img img {height: 150px;}
    #gallery .slick-arrow {left: -15px; width: 40px; height: 40px; background-position: 14px -139px;}
    #gallery .slick-next {left: auto; right: -15px; background-position: -86px -139px;}
    #gallery .list a {width:calc(100% - 10px); margin: 0 5px;}
    #gallery .tit {max-width:97%; font-size: 15px;}
    #gallery .date {font-size: 14px;}
}
@media all and (max-width:430px) {
    #gallery .img img {height: 130px;}

}