@charset "utf-8";
.slick-vertical .slick-slide{border:none;}

#container_main{position:relative; overflow:hidden; width:100%;}
#container_main h4{font-size: 37px; font-weight: 900; color: #163853; letter-spacing:-2px;}
#container_main h4 span{color: #05a299;}


.more{display:block; position:absolute; right:3px; top:10px; font-weight:800; color:#5a5a5a; letter-spacing:-2px;}
@media all and (max-width:1280px){
    #container_main h4 {font-size: 30px;}
}
@media all and (max-width:1024px) {
	#container_main h4{font-size:28px; letter-spacing:-1px;}

}
@media all and (max-width:768px) {
	#container_main h4 {font-size:28px;}

}
@media all and (max-width:568px) {
	#container_main h4{font-size:23px;}

}
@media all and (max-width:380px) {
	#container_main h4{font-size:22px;}

}

.control button{position:relative; float:left; width:18px; height:20px; font-size:0; text-indent:-9999px; background:url(/images/kr/main/ico_ctrl.png) no-repeat 6px -188px;}
.control .btn_next{background-position:-41px -188px;}
.control .btn_stop{background-position:-19px -188px;}
.control .btn_stop.on{background-position:-35px -116px;}
.control button:hover{background-color:rgba(0,0,0,0.03);}

#visual{z-index:1; position:relative; overflow:hidden; height:448px;}
#visual .list_wrap *{vertical-align:top;}
#visual .list_wrap .list{position:relative; left:50%; top:0; margin:0 0 0 -960px;}
#visual .list_wrap .list:not(:first-of-type){display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;} 
#visual button{padding:0; font-size:0; text-indent:-999px;}
#visual .control{position:absolute; bottom:30px; left:50%; display:inline-block; height:40px; padding:10px 20px 0 15px; box-sizing:border-box; transform:translateX(-50%); background:rgba(0,0,0,0.5);}
#visual .control *{display:inline-block; vertical-align:top;}
#visual .control button{float:none;}
#visual .slick-dots {margin: 0 10px 0 0;} 
#visual .slick-dots li{padding:4px 0 0 0; line-height:0;}
#visual .slick-dots button{position:relative; width:14px; height:14px; margin:0 3px 0 4px; border-radius:10px; transition:0.3s ease; box-sizing:border-box; border:2px solid #fff; background: none;}
#visual .slick-dots .slick-active button{background:#fff;}

@media all and (max-width:1024px) {
	#visual {height:auto;}
	#visual .list_wrap .list{left:0; margin:0;}
	#visual .control{bottom:25px;}
}
@media all and (max-width:768px) {
	.more:before{top:5px;}
	.more span:before{top:13px;}
	.more:after{top:21px;}
	
	#visual .control{bottom:15px; height:25px; padding:2px 12px 0 12px;}
	#visual .slick-dots{padding:1px 0 0 5px;}
	#visual .slick-dots button{width:11px; height:11px;}
}
@media all and (max-width:380px) {
	#visual .control, #visual .slick-dots{bottom:12px;}
}

/* 의사일정 */
#agenda{position:relative; z-index:1; width:100%; color:#fff; background: #1467ad; border-radius: 15px 15px 0 0;}

#agenda .inner{position:relative; overflow:hidden; height:90px; padding:0 0 0 457px; border-radius:20px 0 0 0; }
#agenda .tit{position:absolute; top:0; left:0; overflow:hidden; line-height:90px; font-size:18px; font-weight:400;}
#agenda .tit *{display:inline-block; vertical-align:top;}
#agenda h4{color:#fff; font-size:30px; font-weight:100; letter-spacing:0;}
#agenda h4 span {position: relative; display: block; font-weight: 900; color: #fff;} 
#agenda h4 span:after {content: ''; display: block; position: absolute; width: 84px; height: 6px; top: 18px; left: 14px; background: url(/images/kr/main/ico_dot.png);}
#agenda .date {padding: 0 50px; font-size: 30px;}
#agenda .date em {font-size: 37px; font-weight: 900; line-height: 2.2; color: #fff799;}
#agenda .txt_wrap{position:relative; float:left; overflow:hidden; width:100%; height:50px; top: 20px; background: #085799; border-radius: 5px; box-sizing:border-box;}
#agenda .txt{float:left; width:100%; height:59px; padding:0 80px 0 0; box-sizing:border-box;}
#agenda .txt *{line-height:50px; vertical-align:top;}
#agenda .txt p,
#agenda .txt a{position:relative; display:inline-block; max-width:98%; padding:0 0 0 28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; color:#fff;}
#agenda .txt p:before,
#agenda .txt a:before{content:''; display:block; position:absolute; top:50%; left:20px; width:3px; height:3px; border-radius:50%; margin:-2px 0 0 0; background:#fff;}

#agenda .control{position:absolute; top:11px; right:10px;}
#agenda .control a,
#agenda .control .btn_stop{float:left; display:block; width:29px; height:29px; margin:0 0 0 3px; border-radius:5px; box-sizing:border-box; background:url(/images/kr/main/ico_ctrl.png) no-repeat 11px -233px;}
#agenda .control .btn_stop.on{background-position:-29px -113px;}
#agenda .control a{position:static; font-size:0; text-indent:-999px; background-position:-22px -233px;}
#agenda .control a:hover,
#agenda .control .btn_stop:hover{background-color:rgba(255,255,255,0.08);}
#agenda .btn_agenda{z-index:1; overflow:hidden; position:absolute; right:0; top:20px; display:block; width:160px; height:47px; line-height:48px; font-size:18px; letter-spacing:0; font-family:"hansuw"; font-weight:400; color:#fff; text-align:center; background:#f05952; border-radius:10px; text-decoration:none;}
#agenda .btn_agenda:hover{color:#242737; transition:color 0.25s linear;}
#agenda .btn_agenda:before{z-index:-1; opacity:0; content:''; display:block; position:absolute; top:-5%; left:-130%; width:120%; height:110%; margin:0; background:#fff; transform:skew(-20deg); transition:0.25s linear;}
#agenda .btn_agenda:hover:before{opacity:1; left:-10%;}


@media all and (max-width:1230px) {
	#agenda .inner{padding:0 30px 0 500px;} 
	#agenda .btn_agenda{right:15px;}
	#agenda h4{padding:0 20px 0 30px; font-size: 26px;}
    #agenda h4 span:after {left: 10px;}
    #agenda .date {font-size: 26px; padding: 0 35px;}
    #agenda .date em {font-size: 30px; line-height: 86px;}
}
@media all and (max-width:1024px) {
	#agenda{width:100%; margin:0;}
    
	#agenda .inner{height:auto; padding:17px 15px 15px 20px; border-radius:0;}
	#agenda .tit{position:relative; left:0; height:auto; line-height:35px; font-size:21px;}
	#agenda h4{padding:0 20px 0 0; font-size:21px;}
    #agenda h4 span:after {display: none;}
    #agenda .date {padding: 0;}
    #agenda .date em {line-height: 1;}
    
	#agenda .txt_wrap{margin: 10px 0 0; top: 0; height: 45px;}
	#agenda .txt{height:45px;}
	#agenda .txt *{line-height:45px;}
	#agenda .control{top:10px;}
	#agenda .btn_agenda{top:17px; width:auto; height:35px; line-height:36px; padding:0 20px; font-size:15px; border-radius:5px;}
}
@media all and (max-width:768px) {
	#agenda .tit,
	#agenda h4{font-size:20px;}
	#agenda .btn_agenda{height:32px; line-height:32px; padding:0 17px;}
}
@media all and (max-width:568px) {
	#agenda .inner{padding:15px 10px 10px 15px;}
	#agenda h4{padding:0 10px 0 0; font-size:19px;}
    #agenda .date {font-size: 24px;}
    #agenda .date em {font-size: 26px; line-height: 1.2;}
    #agenda .txt_wrap {margin: 7px 0 0; height: 40px;}
	#agenda .txt{font-size:16px;}
    #agenda .txt * {line-height: 40px;}
    #agenda .txt a {font-size: 14px;}
	#agenda .btn_agenda{top:15px; right:10px; padding:0 15px; font-size:14px;}
    #agenda .control {top: 7px;}
    
}
@media all and (max-width:380px) {
	#agenda .tit{line-height:31px;}
	#agenda .tit,
	#agenda h4{font-size:18px;}
    #agenda .date {font-size: 20px;}
    #agenda .date em {font-size: 24px;}
	#agenda .txt{font-size:15px;}
	#agenda .btn_agenda{height:29px; line-height:29px; padding:0 13px; font-size:13px;}
}


.sec1{margin: 100px 0 0;padding: 50px 0 0;height: 384px;background: #f5f6fa;box-sizing: border-box;}
.sec_wrap{margin:50px 0 0; background:url(/images/kr/main/bg_bottom.jpg)no-repeat; background-size: cover;}
.sec2,
.sec3{position:relative; padding:0 470px 0 0; box-sizing:border-box;}
.sec3{padding: 35px 470px 11px 0;}
.sec3 .unit{position:absolute; right:0; top:35px; width:420px; }

@media all and (max-width:1310px) {
	.sec3 .unit{right:0; padding:0;}
}
@media all and (max-width:1280px){
    .sec1 {margin: 40px 0 0;height: 325px;}
}
@media all and (max-width:1230px) {
	.sec2,
	.sec3{padding:0 440px 0 15px;}
    .sec3 {padding-top: 30px;}
	.sec3 .unit{right:15px; width:390px;}
}
@media all and (max-width:1024px) {
	.sec2, .sec3{padding:0 380px 0 15px;}
    .sec3 {padding-top: 30px;}
	.sec3 .unit{width:330px;}
}
@media all and (max-width:900px){
    .sec1 {padding: 30px 15px; margin: 0; height: auto;}
}
@media all and (max-width:768px) {
	.sec1{padding:25px 10px;}
	.sec2,
	.sec3{padding:0 10px;}
	.sec3 .unit{position:relative; right:0; float:left; width:100%;}
}
@media all and (max-width:568px){
    .sec_wrap {margin: 0;}
    .sec3 {padding: 40px 10px;}
    .sec3 .unit {position: static;}
}
@media all and (max-width:380px) {
	.sec1{padding:21px 10px;}
    .sec3 {padding: 30px 10px;}
}

/* 열린의장실 */
#chairman{z-index:1; overflow:hidden; position:relative; float:left; margin: -100px 0 0; width:48.43%; height:384px; border-radius:10px; font-weight:400; background: url(/images/kr/main/bg_chairman.jpg)no-repeat; background-size:cover; border-radius: 0 0 50px 0;}

#chairman .pic{overflow:hidden; position: absolute; bottom: 0; right: 0; z-index: -1;}
#chairman .txt{position: absolute; top: 60px; right: 287px;}
#chairman .info1 {margin: 0 0 25px 0;font-size: 22px; font-weight: 300;}
#chairman .info2 {margin: 0 0 40px 0;font-size: 23px; font-weight: 900;}
#chairman .info2 img {margin: 8px 5px 0 0; vertical-align: bottom;}
#chairman .btns a{overflow:hidden; position:relative; float:left; display:block; padding:0 0 0 20px; width:137px; height:52px; line-height: 52px; font-size:17px; border-radius:10px; color:#fff; box-shadow:inset 0 0 0 0 rgba(0,0,0,0.1); text-decoration:none; background:#058aa2 url(/images/kr/main/ico_chair2.png)no-repeat 33px 46%; text-align:center; box-sizing:border-box;}
#chairman .btns a:first-of-type{margin:0 10px 0 0; background:#05a299 url(/images/kr/main/ico_chair1.png)no-repeat 33px 46%;}

#chairman .btns a:hover:before{animation:ani_bg 0.7s ease-out; transform-origin:50% 100%;}
@keyframes ani_bg{
	0%{transform:rotate(0);}
	20%{transform:rotate(-8deg);}
	40%{transform:rotate(8deg);}
	60%{transform:rotate(-8deg);}
	80%{transform:rotate(8deg);}
	100%{transform:rotate(0deg);}
}

@media all and (max-width:1280px){
    #chairman {margin: -50px 0 0;width: calc(100% - 520px);height: 324px;}
    #chairman .pic img {width: 220px;}
    #chairman .txt {top: 55px; right: auto; left: 25px;}
    #chairman .info1 {font-size: 18px; margin: 0 0 20px 0;}
    #chairman .info2 {font-size: 20px; margin: 0 0 25px 0;}
    #chairman .info2 img {margin:6px 5px 0 0; width: 110px;}
    #chairman .btns a {width: 120px; height: 48px; line-height: 48px; background-position: 23px 46%;}
    #chairman .btns a:first-of-type {background-position: 25px 48%;}
}
@media all and (max-width:1024px){
    #chairman {width: calc(100% - 450px); height: 300px; }
    #chairman .pic img {width: 200px;}
    #chairman .txt {top: 50px;}
}
@media all and (max-width:900px){
    #chairman {width: 100%; margin: 0 0 30px; float: none; height: 260px;}   
    #chairman .pic img {width: 180px;}
    #chairman .txt {top: 40px;}
    #chairman .info1 {font-size: 17px; margin: 0 0 10px 0;}
    #chairman .info2 {font-size: 19px; margin: 0 0 20px 0;}
    #chairman .info2 img {margin:5px 5px 0 0; width: 100px;}
}
@media all and (max-width:568px){
    #chairman {height: 210px;}
    #chairman .txt {top: 25px;}
    #chairman .pic img {width: 150px;}
    #chairman .btns a {width: 100px; height: 40px; line-height: 40px; font-size: 15px; background-position: 20px 47%; background-size: 16px;}
    #chairman .btns a:first-of-type {margin: 0 5px 0 0;background-position: 23px 48%; background-size: 13px;}
    
    #chairman .info1 {font-size: 16px;margin: 0 0 7px 0;}
    #chairman .info2 {font-size: 17px;margin: 0 0 18px 0;}
    #chairman .info2 img {margin: 4px 4px 0 0;width: 90px;}
}
@media all and (max-width:380px){
    #chairman {height: 210px; margin: 0 0 10px;}
    #chairman .txt {top: 27px; left: 20px;}
    #chairman .pic img {width: 140px;}
    
    #chairman .info1 {font-size: 15px;}
    #chairman .info2 {font-size: 16px;}
    #chairman .info2 img {width: 84px;}
}


/* 바로가기 */
#link{float:left; width: 550px; margin: 0 0 0 100px;}
#link ul{text-align:center;  box-sizing:border-box;}
#link li {float: left; margin: 0 50px 0 0; width:100px; line-height:120%; text-align:center;}
#link li:nth-child(-n + 4){margin:0 50px 17px 0;}
#link li:nth-child(4n){margin: 0;}
#link li a{z-index:1; position:relative; display:block; width:100%; padding:110px 0 0; font-weight: 800; box-sizing:border-box; text-align:center; }
#link li a:before,
#link li a:after{content:''; display:block; position:absolute; top:25px; left:0; width:100%; height:45px; background:url(/images/kr/main/ico_link1.png) no-repeat 50% 100%;}
#link li a:after{z-index:-1; top:0; left:50%; width:100px; height:100px; border-radius:10px; background:#fff; transform:translateX(-50%); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);}
#link li.list2 a:before{background-image:url(/images/kr/main/ico_link2.png);}
#link li.list3 a:before{background-image:url(/images/kr/main/ico_link3.png);}
#link li.list4 a:before{background-image:url(/images/kr/main/ico_link4.png);}
#link li.list5 a:before{background-image:url(/images/kr/main/ico_link5.png);}
#link li.list6 a:before{background-image:url(/images/kr/main/ico_link6.png);}
#link li.list7 a:before{background-image:url(/images/kr/main/ico_link7.png);}
#link li.list8 a:before{background-image:url(/images/kr/main/ico_link8.png);}
#link li a:hover {text-decoration: none;}
#link li a:hover:before{transform:rotateY(360deg); background-position:50% 0; transition:transform 0.6s ease-in-out;}
#link li a:hover:after{transition:0.4s ease-in-out;}

@media all and (max-width:1280px){
    #link {margin: 0 0 0 40px; width: 480px;}
    #link li {margin: 0 25px 0 0; width: 95px;}
    #link li:nth-child(-n + 4) {margin: 0 25px 17px 0;}
    #link li a {padding: 100px 0 0;}
    #link li a:after {width: 80px; height: 80px;}
    #link li a:before {top: 22px; height: 36px; background-size: contain;}    
}

@media all and (max-width:1024px) {
    #link {margin: 0 0 0 30px; width: 420px;}
	#link ul{height:230px;}
    #link li {margin: 0 10px 0 0;}
    #link li:nth-child(-n + 4) {margin: 0 10px 17px 0;}
	#link li a{padding:90px 0 0 0;}
}

@media all and (max-width:900px) {
    #link{width:100%; float: none; margin: 0;}
    #link li {margin: 0; width: 25%;}
    #link li:nth-child(-n + 4) {margin: 0 0 20px;}
}

@media all and (max-width:568px){
    #link li:nth-child(-n + 4) {margin: 0 0 15px;}
    #link li a {padding: 85px 0 0;}
    #link li a:after {width: 70px; height: 70px;}
    #link li a:before {top: 20px; height: 30px;}
    
}

@media all and (max-width:380px) {
	#link ul{height:auto; padding:17px 0 22px;}
	#link li a{padding:63px 0 0 0;}
	#link li a:after{width:55px; height:55px;}
	#link li a:before{top:12px; height:29px;}
}

/* 현역의원 */
#member{position:relative; z-index:53; clear:both; overflow:hidden; width:100%; padding:45px 0 50px; margin:0 0 50px 0; background: #f6fcfe; background-attachment:fixed; background-size:cover;}
#member .inner{position:relative; box-sizing:border-box;}
#member h4 {text-align: center;}
#member .control{z-index:2; position:absolute; top: 12px; right: 0;}
#member .control button{float:left; width:30px; height:30px; margin:0 0 0 7px; border-radius:10px; background: #e9e9e9 url(/images/kr/main/ico_member.png)no-repeat;}
#member .control button:hover{background-color: #cdcdcd;}
#member .control .btn_prev{background-position: 10px 8px;}
#member .control .btn_next{background-position: -24px 8px;} 
#member .control .btn_stop{background-position: -54px 8px;}
#member .control .btn_stop.on{background-position: -83px 8px;}

#member .map {float: left; width: 35%;height: 350px;border-radius: 5px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); background: #fff;vertical-align: middle;}
#member .map_wrap{margin: 45px 0 0;}
#member .map_list:after {content: ''; display: block; clear: both;}
#member .member_wrap {float: right;width: 60.83%;}


#member .big_list{position:relative;float: left;width: 28.76%;height: 350px;color:#fff;border-radius:10px;background:#163853 url(/images/kr/main/bg_member.png) no-repeat 100% 100%;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);}
#member .big_list .list{overflow:hidden;vertical-align:top;padding: 14.28%;width:100%;box-sizing:border-box;}
#member .big_list .list:not(:first-of-type){display:none;} 
#member .big_list.slick-initialized .list:not(:first-of-type){display:block;} 

#member .big_list .pic{width: 100%; border-radius: 5px;border: 1px solid #fff;overflow: hidden;}
#member .big_list .pic img{max-width:100%; max-height:100%;}
#member .big_list .txt .name{margin: 10px 0 0; font-size:25px; font-weight:800; text-align: center; line-height: 30px;}
#member .big_list .txt .name a {display: inline-block; margin: 0 0 0 5px; width: 30px; height: 30px; background: #05a299 url(/images/kr/main/ico_home.png)no-repeat center center; border-radius: 50%; text-indent: -9999px;}
#member .big_list .txt ul{margin: 25px 0 0; font-size:17px;}
#member .big_list .txt li{position: relative; line-height:110%; padding:0 0 10px 12px;}
#member .big_list .txt li:last-child {padding-bottom: 0;}
#member .big_list .txt li p{padding:5px 0 0 0; line-height:160%; font-size:14px;}
#member .big_list .txt li:before{content: ''; display: block; position: absolute; top:5px; left: 0; width:5px; height:5px; border-radius:50%; background:#fff799;}
#member .big_list .home{display:inline-block; width:34px; height:34px; margin:0 0 0 5px; vertical-align:top; border-radius:50%; font-size:0; text-indent:-999px; transition:0.3s ease; background:#f05952 url(/images/common/ico_home.png) no-repeat 55% 45%;}
#member .big_list .home:hover{background-color:#f23c33;}

#member .small_list {overflow:hidden;float: right;width: 64.38%;text-align: center;}
#member .small_list .list{position:relative;float:left;margin: 0 2% 2% 0;width: 23.4%;height:170px;background: #fff;border: 1px solid #ccc;border-radius: 5px;box-sizing:border-box;overflow: hidden;}
#member .small_list .list:nth-child(4n){margin-right: 0;}
#member .small_list .list:nth-child(n+4){margin-bottom: 0;}
#member .small_list .list.active{position: relative; color:#fff; background: #1467ad; box-shadow:inset 0 0 0 0 #1467ad; transition:0.3s ease-in-out; border: 1px solid #1467ad;}
#member .small_list .list.active:after{opacity:1; visibility:visible; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:inset 0 0 0 3px #1467ad; border-radius: 5px;}
#member .small_list .pic {width: 100%;height: 130px;border-radius: 3px 3px 0 0;overflow: hidden;}
#member .small_list .pic img{width:100%; height:100%;}
#member .small_list .txt {padding: 7px 0 0;}

@media all and (max-width:1200px){
    #member .control {right: 15px;}
}

@media all and (max-width:1100px){
    #member .map {display: block; margin: 0 0 25px; width: 100%; background: #fff; text-align: center;}
    #member .map img {margin: 0 auto;}
    #member .member_wrap {width: 100%;}
    #member .big_list {width: 28.76%;}
    #member .big_list .list {padding: 11% 20%;}

    #member .small_list {width: 68%;}
    #member .small_list .list {width: 23%;}
    #member .small_list .list:nth-child(4n){margin-right: 2%;}
    #member .small_list .list:nth-child(n+4){margin-bottom: 2%;}
}

@media all and (max-width:768px){
    #member {padding: 35px 0; margin: 0 0 40px 0;}
    #member .map_wrap {margin: 25px 0 0;}
    #member h4 {text-align: left;}
    #member .control {top: 2px; right: 10px;}
    
    #member .big_list {margin: 0 0 15px; width: 100%; height: auto;} 
    #member .big_list .list {padding: 25px 25px 23px}
    #member .big_list .pic {float: left; margin: 0 25px 0 0; width: 110px;}
    #member .big_list .txt {float: left;}
    
    #member .small_list {width: 100%;}
    #member .small_list .list {width: 18%;}

}
@media all and (max-width:568px){
    #member .map {height: auto;}
    
    #member .big_list .list {padding: 20px;}
    #member .big_list .pic {width: 100px; height: auto;}
    #member .big_list .txt .name {font-size: 22px; line-height: 1.3;}
    #member .big_list .txt li {font-size: 15px;}
    #member .big_list .txt .name a {width: 25px; height: 25px; background-size: 14px; background-position: 6px center;}
    #member .big_list .txt ul {margin: 20px 0 0;}
    
    #member .small_list {width: 100%;}
    #member .small_list .list {width: calc(25% - 5px); height: auto; margin: 0 5px 5px 0 !important;}
    #member .small_list .pic {width: auto; height: auto;}
    #member .small_list .txt {padding: 5px 0;}
}

@media all and (max-width:380px){
    #member {padding: 20px 0; margin: 0 0 25px 0;}
}
 

/* 게시판 */
#board{position:relative; float:left; width:100%; height:357px; box-sizing:border-box;}

#board > ul{position:relative; float:left; width:100%; padding:0 54px 0 0; box-sizing:border-box; background: #4d4a96;}
#board > ul > li{float:left; width:22.41%; box-sizing:border-box;}
#board li h4{line-height:0; padding:0; letter-spacing:-1px;}
#board li h4 br{display:none;}
#board li h4 a{overflow:hidden; position:relative; display:block; width:100%; height:60px; line-height:60px; font-size:18px; letter-spacing:0; font-weight:400;  color:#ccc; text-decoration:none; text-align:center; box-sizing:border-box;}
#board li.on h4 a,
#board li h4 a:hover{color:#fff799; font-weight: 900; transition:color 0.25s linear, border-color 0s 0.2s ease-in-out;}
#board li.on h4 a:before{content: ''; display: block; position: absolute; width: 12px; height: 12px; bottom: -6px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 50%;}

#board .con{visibility:hidden; opacity:0; position:absolute; top:85px; left:0; width:100%;}
#board .on .con{visibility:visible; opacity:1; top:60px; transition:0.25s ease-in-out;}
#board .con ul{overflow:hidden; width:100%;  box-sizing:border-box;}
#board .con li{position:relative; float:left; width:100%; height:60px; padding:0 0 0 20px; box-sizing:border-box; border-bottom: 1px solid #efefef;}
#board .con li:last-child {border-bottom: none;}
#board .con li.notice {padding-left: 80px;}
#board .con li a{float:left; width:100%; padding:0 120px 0 0; box-sizing:border-box; text-decoration:none;}
#board .con a:hover .tit,
#board .con a:focus .tit,
#board .con a:active .tit{color:#000; text-decoration:underline;} 
#board .tit{display:inline-block; vertical-align:middle; max-width:98%; line-height:60px; padding:0 20px 0 0; color:#333; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#board .tit span{position: absolute; top: 11px; left: 0; width:70px; height:40px; line-height:40px; border-radius:20px; color:#fff; background:#05a299; text-align:center;}
#board .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:#f05952; text-transform:uppercase;}
#board .date{display:block; position:absolute; right:20px; top:0; line-height:60px; letter-spacing: -1.5px; }
#board .none{width:100%; padding:3em 0 0 0 !important; text-align:center; background:none;}
#board .more{display:none; top: 20px; right: 30px; width: 25px;}
#board .on .more{display:block;}
#board .on .more .bar{float:right; display:block; width:18px; height:3px; margin:2px 0 3px; border-radius:3px; background:#ccc; transition:0.25s ease-in-out;}
#board .on .more .bar2{width:25px;}
#board .on .more:hover .bar{width:25px;}

@media all and (max-width:1230px) {
	#board .con li{padding:0 0 0 12px;}
}
@media all and (max-width:1024px) {
	#board{height:345px;}
	#board > ul > li{width:33%;}
	#board .bar{border-radius:8px;}
	#board li h4 a{height:47px; line-height:47px; font-size:17px; border-radius:8px;}
	#board .con{top:80px;}
	#board .on .con{top:72px;}
	#board .con li:last-child{display:none;}
    #board .more {top: 13px; right: 15px;}

}
@media all and (max-width:768px) {
	#board{height:280px;}
	#board .bar,
	#board li h4 a{border-radius:5px;}
	#board .con{top:75px;}
	#board .on .con{top:67px;}
	#board .con ul{padding:0 5px 0;}
	#board .con li{height:36px;}
	#board .con li:last-child{display:block;}
    #board .con li.notice {padding: 0 0 0 55px;}
    #board .tit, #board .date {line-height: 36px;}
    #board .tit span {top: 7px; width: 50px; height: 22px; line-height: 22px; font-size: 14px;}
    
}
@media all and (max-width:568px) {
    #board {height: 270px;}
	#board li h4 a{height:44px; line-height:44px; font-size:16px;}
	#board .con{top:70px;}
	#board .on .con{top:60px;}
    #board .more {top: 11px;}
    
}
@media all and (max-width:380px) {
    #board {height: 265px;}
	#board li h4 a{height:40px; line-height:40px; font-size:15px;}
	#board .con{top:64px;}
	#board .on .con{top:55px;}
}

/* 포토갤러리 */
#gallery{z-index:1; position:absolute; right:0; top:0; width:420px; box-sizing:border-box;}
#gallery h4{line-height:100%;}
#gallery .more{display: block; top: 20px; right: 0; width: 25px;}
#gallery .more .bar{float:right; display:block; width:18px; height:3px; margin:2px 0 3px; border-radius:3px; background:#222; transition:0.25s ease-in-out;}
#gallery .more .bar2{width:25px;}
#gallery .more:hover .bar{width:25px;}


#gallery .list_wrap{margin: 25px 0 0; width:100%;}
#gallery .list{display:none;}
#gallery .list:first-of-type{display:block;}
#gallery .list *{display:block;}
#gallery .list a{width:100%; text-decoration:none; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); border-radius:10px; overflow: hidden;}
#gallery .list img{width:100%; max-height:295px; transition:transform 0.3s ease-in-out;}
#gallery .list .img{position:relative; overflow:hidden; border-radius:10px;}
#gallery .list .sbj{z-index:2; position:relative; float:right; width:100%; height:79px; margin:-79px 0 0 0; padding:20px; color:#fff; font-weight: 300; background:rgba(34,34,34,0.8); box-sizing:border-box;}
#gallery .list .tit{display:inline-block; vertical-align:top; max-width:98%; padding:0 20px 0 0; line-height:110%; font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#gallery .new{display:inline-block; vertical-align:middle; width:18px; height:18px; line-height:18px; margin:-5px 0 0 -20px; font-size:11px; font-weight:400; text-align:center; color:#fff; border-radius:50%; background:#f05952; text-transform:uppercase;}
#gallery .list a:active img,
#gallery .list a:hover img,
#gallery .list a:focus img{transform:scale(1.1);}
#gallery .more{top:6px;}

@media all and (max-width:1310px) {
	#gallery{right:0;}
}
@media all and (max-width:1230px) {
	#gallery{right:15px; top:5px; width:390px;}
	#gallery h4{height:49px;}
    #gallery .list_wrap {margin: 15px 0 0;}
}
@media all and (max-width:1024px) {
	#gallery {top:0; width:320px;}
	#gallery h4{height:45px;}
	#gallery .more{top:4px;}
}
@media all and (max-width:768px) {
	#gallery {float:left; position:relative; right:0; width:100%; margin:0 0 50px;}
	#gallery h4{text-align:center;}
	#gallery .list{display:block; float:left; width:31.64%;}
	#gallery .list + .list{margin:0 0 0 2.5%;}
	#gallery .list .img{border-radius:10px 10px 0 0;}
	#gallery .list img{max-height:100%;}
	#gallery .list .sbj{float:none; width:100%; margin:0; padding:17px 10px 0 20px; border-radius:0 0 10px 10px;}
	#gallery .more{top:2px;}
}
@media all and (max-width:568px) {
    #gallery .list_wrap {margin: 5px 0 0;}
	#gallery .list{width:48%;}
	#gallery .list + .list{margin:0 0 0 4%;}
	#gallery .list:last-of-type{display:none;}
	#gallery .more{top:0;}
}
@media all and (max-width:380px) {
	#gallery {margin:0 0 30px;}
	#gallery h4{height:42px;}
	#gallery .list .sbj{height:75px; padding:15px 7px 0 15px;}
    
}


/* 팝업존 */
#popup {position:relative; float:left; width:100%;}
#popup .none{min-height:110px; padding:80px 0 0 0; text-align:center;}
#popup .list_wrap,
#popup .list_wrap .list{overflow:hidden; width:100%; box-sizing:border-box; background:#dfdfdf;}
#popup .list_wrap {margin: 27px 0 0;}
#popup .list_wrap *{vertical-align:top;}
#popup .list_wrap img{margin:0 auto;}
#popup .control{position:absolute;left: 0; bottom:0; width:100%; height:50px; color:#fff; background:rgba(0,0,0,0.8);z-index: 2;padding: 0 27px 0 30px;box-sizing: border-box;}
#popup .control button{float: right;margin: 14px 0 0;width: 17px; height:22px;}
#popup .btn_prev{background-position: -41px -187px;}
#popup .btn_next{background-position: 4px -187px;}
#popup .btn_stop{background-position: -19px -187px;}
#popup .btn_stop.on{background-position: -35px -115px;}
#popup .page{float: left; line-height: 50px;}
#popup .page .dash{margin: 0 5px 0 2px;}
#popup .page .current{font-weight:800;}

@media all and (max-width:1280px){
    #popup .list_wrap {margin: 22px 0 0;}
}
@media all and (max-width:1024px) {
	#popup .list img{height:241px;}
}
@media all and (max-width:768px) {
	#popup{position:relative; margin:0 0 45px;}
}
@media all and (max-width:568px) {
    #popup {margin: 0;}
    #popup .list_wrap {margin: 15px 0 0;}
	#popup .list img{height:auto; width:100%;}
	#popup .page{font-size:15px;}
    #popup .control {height: 40px;}
    #popup .page {line-height: 40px;}
    #popup .control button {margin: 9px 0 0;}
}


#sns{position:relative; float:left; width:100%; height:403px; box-sizing:border-box;}
#sns .title{float:left;}
#sns .title p{padding:0 0 8px; line-height:100%; letter-spacing:0; font-size:18px;  color:#888; font-weight:400;}
#sns > ul{float:right; margin: 10px 0 0;}
#sns > ul > li{float:left; margin:0 0 0 10px;}
#sns > ul > li:first-child{margin:0;}
#sns h5 a{position:relative; display:block; width:108px; height:38px; line-height:36px; border-radius:38px; font-weight:800; font-size: 14.5px; color:#435e99; border:1px solid #435e99; background: #fff; box-sizing:border-box; text-align:center; text-decoration:none;}
#sns .kakao h5 a{width: 140px; color:#ffca08; border-color:#ffca08;}
#sns .yt h5 a{width: 113px; color:#e7161a; border-color:#e7161a;}
#sns h5 a:before{content:''; display:inline-block; vertical-align:middle; width:22px; height:22px; margin:-2px 0 0 0; background:url(/images/kr/main/ico_sns.png) no-repeat -9px -8px;}
#sns h5 a:hover,
#sns .on h5 a{color:#fff; transition:0.25s ease-in-out;}

#sns .kakao h5 a:before{width:26px; background-position:-48px -49px;}
#sns .yt h5 a:before{width:35px; margin:0;background-position:-85px -48px;}

#sns .fb h5 a:hover:before,
#sns .fb.on h5 a:before{background-position:-9px -47px;}
#sns .kakao h5 a:hover:before,
#sns .kakao.on h5 a:before{background-position:-48px -8px;}
#sns .yt h5 a:hover:before,
#sns .yt.on h5 a:before{background-position:-85px -9px;}

#sns .fb h5 a:hover,
#sns .fb.on h5 a{background:#435e99;}
#sns .kakao h5 a:hover,
#sns .kakao.on h5 a{background:#ffca08;}
#sns .yt h5 a:hover,
#sns .yt.on h5 a{background:#e7161a;}

#sns ul ul{z-index:1; opacity:0; visibility:hidden; position:absolute; top:93px; left:0; width:100%;}
#sns .on ul{opacity:1; visibility:visible; top:83px; transition:0.4s ease-in-out;}
#sns ul ul li{float:left; width:32.4%; margin:0 0 0 1.4%;}
#sns ul ul li:first-child{margin-left:0;}
#sns ul ul *{display:block;}
#sns ul ul a{position:relative; overflow:hidden; border-radius:10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); background:#fff; text-decoration:none; transition:0.3s ease-in-out;}
#sns ul ul a:hover {background: #1467ad; color: #fff;}
#sns ul ul a:after{opacity:0; visibility:hidden; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:10px; box-shadow:inset 0 0 0 0 #1467ad; transition:0.3s ease-in-out;}
#sns ul ul a:hover:after{opacity:1; visibility:visible; box-shadow:inset 0 0 0 3px #1467ad;}
#sns ul .kakao a:hover {background:#ffca08;}
#sns ul .kakao a:hover:after{box-shadow:inset 0 0 0 2px #ffca08;}
#sns ul .yt a:hover {background:#e7161a;}
#sns ul .yt a:hover:after{box-shadow:inset 0 0 0 2px #e7161a;}
#sns ul ul img{width:100%; height:170px;}
#sns .img{position:relative; overflow:hidden; border-radius:5px 5px 0 0;}
#sns .sbj{position:relative; overflow:hidden; height:116px;padding: 20px 20px 0 20px; box-sizing:border-box;}
#sns .tit{font-weight:400;overflow:hidden; text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
#sns .date{height:19px;margin: 15px 0 0 0; color:#888;}
#sns .date:before{content:''; display:inline-block; vertical-align:middle; width:21px; height:16px; margin:-2px 0 0 0; background:url(/images/kr/main/ico_date.png) no-repeat 0 -16px;}
#sns .none{width:100%; padding:50px 0 0 0; font-size:110%; font-weight:800; text-align:center;}

@media all and (max-width:1280px){
    #sns > ul {margin: 5px 0 0;}
    #sns .on ul {top: 75px;}
}

@media all and (max-width:1024px) {
	#sns {height:440px;}
	#sns .title p{font-size:17px;}
	#sns ul ul{top:115px;}
	#sns .on ul{top:105px;}
	#sns ul ul img{height:150px;}
    
    #sns h5 a{width:88px; height:35px; line-height:34px; font-size: 13.5px;}
	#sns h5 a:before{width:18px; background-size:90px auto ; background-position:-9px -3px;}
    #sns .kakao h5 a {width: 109px;}
    #sns .yt h5 a {width: 88px;}
	#sns .kakao h5 a:before{width:19px; background-position:-37px -35px;}
	#sns .yt h5 a:before{width:26px; background-position:-67px -35px;}

	#sns .fb h5 a:hover:before,
	#sns .fb.on h5 a:before{background-position:-9px -36px;}
	#sns .kakao h5 a:hover:before,
	#sns .kakao.on h5 a:before{background-position:-37px -4px;}
	#sns .yt h5 a:hover:before,
	#sns .yt.on h5 a:before{background-position:-67px -4px;}
}
@media all and (max-width:768px) {
	#sns {height:432px; text-align:center;}
    #sns .title {float: none;}
	#sns > ul {width:100%; margin:10px 0 0 0;}
	#sns > ul > li{float:none; display:inline-block; margin:0 0 0 3px;}
	#sns ul ul{top:110px;}
	#sns .on ul{top:100px;}
	#sns ul ul li{width:31.64%; text-align:left;}
}
@media all and (max-width:568px) {
    #sns {height: 385px;}
	#sns .title p{font-size:16px;}
	#sns ul ul li{width:48%; margin:0 0 0 4%;}
	#sns ul ul li:nth-child(3){display:none;}
    
	#sns ul ul{top:100px;}
	#sns .on ul{top:95px;}
	#sns .sbj{height:auto; padding:15px 13px;}
}
@media all and (max-width:380px) {
	#sns{height:370px;}
	#sns .title p{font-size:15px;}
    #sns .date {margin: 10px 0 0;}
}

/* 배너모음 */
#banner .tit_wrap {left:20px ;z-index: 1;position: absolute;top: 30px; text-align: center;}
#banner .tit_wrap h4 {font-size: 25px; line-height: 1;}
#banner .control {z-index: 1;position: absolute;top: 35px;left: 113px;}
#banner .control button {width: 25px;height: 25px;background: url(/images/kr/main/ico_banner_ctrl.png)no-repeat 6px 2px;}
#banner .control .btn_stop {background-position: -34px 2px;}
#banner .control .btn_stop.on {background-position: -73px 2px;}
#banner .control .btn_next {background-position: -108px 2px;}
#banner > ul { margin: 0 0 0 190px; padding: 10px 0px; width: calc(100% - 190px);}
#banner {padding: 5px;border: 1px solid #979797;margin: 20px 352.500px;}

@media all and (max-width: 1240px){
	#banner .tit_wrap {left: 15px;}
	#banner .control {left: 115px;}
}
@media all and (max-width: 768px){
	#banner .tit_wrap {top: 20px;}
	#banner .control {top: 30px;}
	#banner > ul {margin: 0; padding: 80px 0 20px; width: 100%;}
	#banner > ul li a {display: block; padding: 0 10px;}
}