@charset "utf-8";

#container_main{min-height:350px;}

#mainTop { clear: both; position: relative; overflow: hidden; }

#visual { width: 100%; text-align: center; background-color: #888; }
#visual .img { height: 752px; }
#visual .img .wrap { position: relative; height: 100%; overflow: hidden; }
#visual .img .wrap .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); }
#visual .img .wrap .centered img { position: absolute; top: 0; left: 0; width: auto; max-width: 1920px; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
@media all and (max-width: 1024px) {
	#visual .img { height: 490px; }
	#visual .img .wrap .centered img { -webkit-transform: translate(-55%,-50%); -ms-transform: translate(-55%,-50%); transform: translate(-55%,-50%); }
}
@media all and (max-width: 768px) { 
	#visual .img { height: 370px }
	#visual .img .wrap .centered img { -webkit-transform: translate(-43%,-50%); -ms-transform: translate(-43%,-50%); transform: translate(-43%,-50%); }
}

#slogan { width: 100%; max-width: 1920px; height: 538px; position: absolute; left: 0; top: 100px; right: 0; bottom: 0; margin: auto; }
#slogan .inner { height: 100%; }
#slogan .wrap { width: 400px; max-width: 465px; height: 100%; background-color: rgba(33, 121, 185, .8); float: right; box-sizing: border-box; padding: 60px 30px 0; border-radius: 30px; }

/*편삼범 의원*/
.newsize3{height: 452px!important;}
/*박정수 의원*/
.newsize2{height: 589px!important;}
/*유성재 의원*/
.newsize1 .wrap{width:430px;}

#slogan .wrap h3 {font-family: 'SSRock'; font-size: 54px;font-weight: 300;color: #fff;text-align: center;line-height: 1.2;margin-bottom: 40px;}
#slogan .wrap h3 span {font-size: 85%;}
#slogan .wrap p { color: #fff; font-size: 18px; font-weight: 400; line-height: 200%; letter-spacing: -1px; margin-bottom: 40px; text-align: center; word-break: keep-all; }
#slogan .wrap p span { display: block; }
#slogan .wrap h3 span span{font-size:75%;}/* 240618 정은정추가*/
#slogan .wrap .btnWrap { border-top: 1px dashed #fff }
#slogan .wrap .btnWrap:after { content: ''; display: block; clear: both; }
#slogan .wrap .btnWrap > div { float: left; width: 50%; line-height: 120px; }
#slogan .wrap .btnWrap a { display: block; text-align: center; color: #fff; opacity: .5; font-size: 20px; font-weight: 100; }
#slogan .wrap .btnWrap a:hover,
#slogan .wrap .btnWrap a:focus { opacity: 1; }
@media all and (max-width: 1024px) {
	#slogan { height: 367px; }
	#slogan .wrap { width: 50%; padding-top: 40px; margin-right: -2%; border-top-right-radius: 0px; border-bottom-right-radius: 0px; padding-right: 4%; }
	#slogan .wrap h3 {font-size: 40px;margin-bottom: 20px;}
	#slogan .wrap p { font-size: 17px; margin-bottom: 20px; }
	#slogan .wrap .btnWrap > div { line-height: 70px; }
	#slogan .wrap .btnWrap a { font-size: 16px; }
    
    /*편삼범 의원*/
    .newsize3{height: 307px!important;}
    /*박정수 의원*/
    .newsize2{height: 390px!important;}
    .newsize2 .wrap p{font-size: 15px!important;}
    .newsize2 .wrap{padding-top: 23px!important;}
}
@media all and (max-width: 768px) {
	#slogan { height: auto; position: relative; left: auto; top: auto; }
	#slogan .inner { width: 100%; }
	#slogan .wrap { float: none; width: 100%; max-width: none; position: relative; padding: 30px 30px 0; border-radius: 0; }
	#slogan .wrap h3 {font-size: 32px;}
	#slogan .wrap p .txt2 { display: inline; }
    
    .newsize2{height: 320px!important;}
}
@media all and (max-width: 580px) {	
}

#board { position: relative; background-color: #f9f9f9; overflow: hidden; }
#board .inner { border-bottom: 1px dashed #888; box-sizing: border-box; padding: 50px 0; }
#board .inner:after { content: ''; display: block; clear: both; } 
#board .tit { float: left; width: 180px; text-align: center; }
#board .tit h3 { font-size: 40px; font-weight: 400; color: #333; line-height: normal; letter-spacing: -2px; }
#board .tit h3:after { content: ''; display: block; width: 30px; height: 1px; background-color: #2179b9; margin: 0 auto; margin-top: 15px; }
#board .tit p { font-size: 18px; font-weight: 100; color: #888; word-break: keep-all; line-height: 130%; margin-top: 20px; }
#board .tit p span { display: block; }
#board .list { float: right; width: calc(100% - 180px); box-sizing: border-box; padding-left: 60px; }
#board .list ul { margin-left: -15px; margin-right: -15px; }
#board .list ul:after { content: ''; display: block; clear: both; }
#board .list ul li { float: left; width: 33.33%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; }
#board .list ul li a { display: block; background-color: #fff; position: relative; box-sizing: border-box; padding: 30px; }
#board .list ul li a h4 { font-size: 20px; font-weight: 100; color: #333; height: 48px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; word-break: break-word; margin-bottom: 50px; }
#board .list ul li a p { width: calc(100% - 58px); font-size: 15px; font-weight: 100; color: #888; height: 48px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; word-break: break-word; }
#board .list ul li a div { position: absolute; width: 38px; height: 38px; right: 30px; bottom: 37px; }
#board .list ul li a div span { font-size: 0; display: block; position: relative; width: 100%; height: 100%; border: 1px solid #ccc; }
#board .list ul li a div span:before { content: ''; display: block; width: 1px; height: 9px; background-color: #888; position: absolute; right: 18px; top: 13px; }
#board .list ul li a div span:after { content: ''; display: block; width: 9px; height: 1px; background-color: #888; position: absolute; right: 14px; top: 17px; }
#board .more { position: absolute; left: 30px; bottom: 50px; width: 120px; height: 40px; }
#board .more a { display: block; text-align: center; font-size: 15px; background-color: #fff; color: #888; font-weight: 100; line-height: 40px; border: 1px solid #ccc; }
@media all and (max-width: 1024px) {
	#board .tit { float: none; width: 130px; }
	#board .tit h3 { font-size: 30px; margin-bottom: 20px; }
	#board .tit p { display: none; }
	#board .list { float: none; width: 100%; padding: 0; } 
	#board .list ul li a h4 { margin-bottom: 20px; }
	#board .list ul li a p { width: 100%; }
	#board .more { left: auto; bottom: auto; right: 0px; top: 50px; }
}
@media all and (max-width: 1024px) and (min-width: 569px) {
	#board .list ul li a p { margin-bottom: 20px; }
	#board .list ul li a div { position: relative; left: 0; right: 0; margin: auto; bottom: 0; }
}
@media all and (max-width: 768px) {
	#board .tit { width: 105px; }
	#board .tit h3 { font-size: 25px; }
	#board .list ul li a h4 { font-size: 17px; }
	#board .list ul li a p { font-size: 15px; }
}
@media all and (max-width: 568px) {
	#board .tit { width: 93px; }
	#board .tit h3 { font-size: 22px; }
	#board .list ul li a h4 { font-size: 16px; }
	#board .list ul li a p { font-size: 14px; }
	#board .list ul li { float: none; width: 100%; margin-bottom: 10px; }
	#board .list ul li:last-child { margin-bottom: 0px; }
	#board .list ul li a { padding: 20px; }
	#board .list ul li a h4 { margin-bottom: 10px; }
	#board .list ul li a div { bottom: 27px; }
	#board .more { width: 90px; }
}

/* gallery */
#gallery { position: relative; box-sizing: border-box; padding: 50px 0; overflow: hidden; background-color: #f9f9f9; }
#gallery .tit { text-align: center; margin-bottom: 20px; }
#gallery .tit h3 { font-size: 40px; color: #333; margin-bottom: 20px; text-align: center; font-weight: 400; letter-spacing: -2px; }
#gallery .tit h3:after { content: ''; display: block; width: 30px; height: 1px; background-color: #2179b9; margin: 0 auto; margin-top: 15px; }
#gallery .tit p { font-size: 18px; font-weight: 100; color: #888; word-break: keep-all; line-height: 130%; margin-top: 20px; }
#gallery .list { position: relative; z-index: 2; }
#gallery .list .slick-track { margin-left: 0; margin-right: 0; }
#gallery .list .slick-track .slick-slide { box-sizing: border-box; padding-left: 15px; padding-right: 15px; }
#gallery .list .item { box-sizing: border-box; position: relative; }
#gallery .list .item a { display: block; position: relative; transition: all 300ms ease; }
#gallery .list .item a:hover { text-decoration: none; }
#gallery .list .item .img { position: relative; display:block; }
#gallery .list .item .img .wrap { position: relative; padding-top: 100%; overflow: hidden; }
#gallery .list .item .img .wrap .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); }
#gallery .list .item .img .wrap .centered img { position: absolute; top: 0; left: 0; width: auto; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#gallery .list .item a .txt h5,
#gallery .list .item a .txt p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gallery .list .item a .more2 { display: none; width: 38px; height: 38px; position: absolute; right: 30px; bottom: 50px; }
#gallery .list .item a .more2 span { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #fff; position: relative; z-index: 3; font-size: 0; }
#gallery .list .item a .more2 span:before { content: ''; display: block; width: 1px; height: 9px; background-color: #fff; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
#gallery .list .item a .more2 span:after { content: ''; display: block; width: 9px; height: 1px; background-color: #fff; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
#gallery .list .slick-dots li { width: 10px; height: 10px; }
#gallery .list .slick-dots li button { width: 10px; height: 10px; }
#gallery .list .slick-dots li button:before { content: ''; background-color: #ccc; width: 10px; height: 10px; opacity: 1; border-radius: 50%; }
#gallery .list .slick-dots li.slick-active button:before { background-color: #2179b9; }
#gallery .more { width: 120px; height: 40px; line-height: 40px; position: absolute; right: 0; top: 0; text-align: center; }
#gallery .more a { display: block; width: 100%; height: 100%; box-sizing: border-box; background-color: #fff; border: 1px solid #ccc; position: absolute; right: 0; top: 0; }
@media all and (min-width: 769px) {
	#gallery .list .item a .img:after { content: ''; display: none; width: 100%; height: 100%; background-color: rgba(33, 121, 185, .8); position: absolute; left: 0; top: 0; z-index: 1; }
	#gallery .list .item a .txt { display: none; width: 100%; box-sizing: border-box; padding: 30px; position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; }
	#gallery .list .item a .txt h5 { font-weight: 100; font-size: 20px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; letter-spacing: .5px; margin-bottom: 2px; margin-top: 20px; }
	#gallery .list .item a .txt p { font-weight: 100; font-size: 15px; color: #fff; line-height: normal; letter-spacing: .25px; position: absolute; bottom: 50px; left: 30px; }
	#gallery .list .item a:hover .img:after,
	#gallery .list .item a:hover .txt,
	#gallery .list .item a:hover .more2 { display: block; }
}
@media all and (max-width: 1024px) {
	#gallery .tit { width: 130px; }
	#gallery .tit h3 { font-size: 30px; margin-bottom: 20px; }
	#gallery .tit p { display: none; }
}
@media all and (max-width: 768px) {
	#gallery .tit { width: 105px; }
	#gallery .tit h3 { font-size: 25px; }
	#gallery .list { margin-right: -7.5px; margin-left: -7.5px; }
	#gallery .list .slick-track .slick-slide { padding-left: 7.5px; padding-right: 7.5px; }
	#gallery .list .item a .txt { margin-top: 10px; }
	#gallery .list .item a .txt h5 { font-size: 17px; color: #333; }
	#gallery .list .item a .txt p { font-size: 15px; color: #888; }
	#gallery .list .item a .more2 { display: block; right: 0; top: 0; bottom: auto; }
	#gallery .list .item a .more2 span { border-color: #ccc; background-color: #fff; }
	#gallery .list .item a .more2 span:before,
	#gallery .list .item a .more2 span:after { background-color: #888; }
}
@media all and (max-width: 568px) {
	#gallery .tit { width: 93px; }
	#gallery .tit h3 { font-size: 22px; }
	#gallery .list .item a .txt { margin-top: 5px; }
	#gallery .list .item a .txt h5 { font-size: 16px; }
	#gallery .list .item a .txt p { font-size: 14px; }
	#board .more { width: 90px; }
}