body{margin:0; padding:0}
div{box-sizing:border-box}
.blank{clear:both;}
.main-contents{position:relative; width:100%; min-width:300px;  max-width:1200px; margin:auto;}

  @media all and (min-width:0px) and (max-width:1064px){
  .main-contents{width:90%; margin:auto; }
  }


 /* 바로가기 아이콘 */
.main-quick{display:table-cell; vertical-align:top; width:27%; max-width:330px;}
.main-quick h1{background:#3c9535; color:#fff; padding:25px 15px 15px 25px; border-top-left-radius:20px; font-size:22px;}
.main-quick h1 b{color:#fce20b;}
.main-quick .main-quick-div{background:#5daf56; }
.main-quick .main-quick-div ul{margin:0; padding:0}
.main-quick .main-quick-div ul li{display:inline-block; margin-left:-3px;border-right:1px solid #3c9535; border-bottom:1px solid #3c9535; width:49%; text-align:center; padding:13px 0} 
.main-quick .main-quick-div ul li:last-child{border-right:0}
.main-quick .main-quick-div ul li a{color:#fff; font-weight:200; font-size:1.1em; display:block}
.main-quick .main-quick-div ul li a:hover{color:#fce20b}
.main-quick .main-quick-div ul li:nth-child(even){border-right:0;}
.main-quick .main-quick-div ul li:nth-child(odd){margin-left:2px;}
.main-quick .main-quick-div p{width:90px; height:90px;margin:auto; text-align:center}
.main-quick .main-quick-div p:hover{background:#3c9535; border-radius:50%;transition: all ease 0.3s 0s;}

@media all and (min-width:0px) and (max-width:400px){
.main-quick{display:table; width:100%; padding-bottom:20px}
.main-quick .main-quick-div ul li{width:49.5%; }
}

@media all and (min-width:401px) and (max-width:942px){
.main-quick{display:table; width:100%; max-width:100%; padding-bottom:20px}
.main-quick .main-quick-div ul li{width:24.6%; }
.main-quick .main-quick-div ul li:nth-child(even){border-right:1px solid #3c9535;}
.main-quick .main-quick-div ul li:nth-child(odd){margin-left:0px;}
.main-quick .main-quick-div ul li:nth-child(4){border-right:0}
}





 /* 공지사항, 게시판 */
 .main-board{position:relative; display:table-cell; vertical-align:top; width:50%; max-width:570px; background:#f8f7f1; padding:25px 30px; margin-left:-4px; position:relative; z-index:10; box-sizing:border-box}

/*tab css*/
.board-tab{float:left; width:100%; height:auto;}
.board-tabnav{position:relative; font-size:0; width:100%; border-bottom:1px solid #ddd;}
.board-tabnav li{display: inline-block;  height:46px; text-align:center; } 
.board-tabnav li a.active:before{}
.board-tabnav li a.active{}
.board-tabnav li a{ position:relative; display:block; color: #777; padding:0 30px 30px 0;  text-decoration:none; font-size:23px;font-family:nanumsquareb}
.board-tabnav li a:hover,
.board-tabnav li a.active{color:#000}
.more-btn{background:url(/assets/images/main/icon-more.png) no-repeat; width:30px; height:30px; cursor:pointer; position:absolute; right:10px; top:-40px;}

.board-tabcontent{position:relative; width:100%; padding:20px 0 0 0; height:auto; min-height:245px;}
.board-list{}
.board-list ul{clear:both; display:block; width:100%; padding:10px 0 10px 0; }
.board-list ul li{display:inline-block; vertical-align:top;}
.board-list ul li a{font-size:1.15em; overflow: hidden;   text-overflow: ellipsis;  white-space: nowrap; }
.board-list ul li .n-icon{position:absolute; background:url(/assets/images/main/icon-new.png) no-repeat; width:25px; height:25px;}
.board-list ul li:nth-child(1){width:auto; min-width:20px;}
.board-list ul li:nth-child(2){width:70%;}
.board-list ul li:nth-child(3){text-align:right; width:18%;  min-width:90px; letter-spacing:-0.06em}

@media all and (min-width:0px) and (max-width:680px){
.main-board{display:block; width:100%; max-width:100%; padding:25px 25px; margin:0 0 20px 0; background:#f8f7f1; height:330px;}
.more-btn{top:-42px; right:-5px}
.board-list{}
.board-list ul li:nth-child(1){display:none}
.board-list ul li:nth-child(2){width:51%}
.board-list ul li:nth-child(3){min-width:75px; float:right}
}
@media all and (min-width:681px) and (max-width:842px){
.main-board{width:61%; max-width:100%; float:left;}
.board-list ul li:nth-child(2){width:58%}
.more-btn{top:-40px}
.board-list ul li:nth-child(3){float:right}
}
@media all and (min-width:843px) and (max-width:942px){
.main-board{width:60.5%; max-width:100%; float:left; }
.board-list ul li:nth-child(2){width:60%}
.more-btn{top:-40px}
.board-list ul li:nth-child(3){float:right}
}
@media all and (min-width:943px) and (max-width:1064px){
.main-board{width:45%}
.board-list ul li:nth-child(2){width:60%}
}


 /* 팝업존 */
.main-popup{display:table-cell; vertical-align:top; width:100%; max-width:300px; margin-left:-4px; position:relative; z-index:10}
.main-popup h1{position:relative; color:#fff;  font-size:24px; margin:0; padding:25px 15px 15px 30px; width:100%; background:#e37f29; border-top-right-radius:20px}
.main-popup h1 p{display:inline-block; vertical-align:top; float:right}
.main-popup h1 span{display:inline-block; vertical-align:top; padding:0 5px}
.main-popup h1 span a{display:block; color:#fff}
.main-popup .main-popup-div{border:1px solid #e3e3e3; border-bottom-right-radius:20px; min-height:320px; text-align:center; background:#fff}
.main-popup .main-popup-div img{width:100%; max-width:350px; margin:auto; border-bottom-right-radius:20px;}

@media all and (min-width:0px) and (max-width:680px){
.main-popup{display:table; width:100%; max-width:100% }
}
@media all and (min-width:681px) and (max-width:842px){
.main-popup{float:right; width:40%; max-width:auto}
.main-popup h1{padding-top:30px}
}
@media all and (min-width:843px) and (max-width:942px){
.main-popup{float:left; width:40%; max-width:100%}
.main-popup h1{padding-top:30px}
}

.main-popup-div {position : relative; margin:0 auto; padding:0; }
.main-popup-div ul {position: absolute; margin: 0px; padding:0; list-style: none; }
.main-popup-div ul li {float: left; margin:0; padding:0;}  
.act-title{font-weight : bold}               
.main-popup-div{           
  overflow : hidden;         
}     
.button{cursor : pointer;}      




  /* 센터활동 */
  .center-act{clear:both; width:49%; display:inline-block; vertical-align:top;}
  .center-act h1{position:relative; margin:0; padding:18px 18px 18px 30px; background:#305e98;  color:#fff; width:100%; border-top-left-radius:20px; border-top-right-radius:20px; font-size:24px;}
  .center-act h1 span{position:absolute; right:18px; top:18px; background:url(/assets/images/main/icon-more-w.png) no-repeat; width:30px; height:30px; cursor:pointer}
  .center-act .center-act-list {position:relative; padding:20px 0; border:1px solid #e3e3e3; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top:0px;;height:250px}
  .center-act .center-act-list ol{display:table; width:95%; margin:auto}
  .center-act .center-act-list ol li{display:table-cell; vertical-align:top; text-align:center; padding:0 3px;}
  .center-act .center-act-list ol li img{margin-bottom:15px; width:100%; max-width:249px; height:150px;}
  .center-act .center-act-list ol li p{color:#767676; padding-top:5px; margin:0; }
  .center-act .center-act-list ol li .act-title{margin:auto; width:100%; max-width:250px; text-align:left}

@media all and (min-width:0px) and (max-width:864px){
.center-act{width:100%; display:block; margin-bottom:20px;}
.center-act .center-act-list{height:auto}
}


  /* 소식지 */
  .news-book{clear:both; width:49%;  display:inline-block; vertical-align:top; float:right; }
  .news-book h1{position:relative; margin:0; padding:18px 18px 18px 30px; background:#d6d6d6;  width:100%; border-top-left-radius:20px; border-top-right-radius:20px; font-size:24px;}
  .news-book h1 span{position:absolute; right:18px; top:18px; background:url(/assets/images/main/icon-more.png) no-repeat; width:30px; height:30px; cursor:pointer}
  .news-book .news-book-list {position:relative; padding:25px 0 50px 0; border:1px solid #e3e3e3; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top:0px;height:250px;}
  .news-book .news-book-list ol{display:table; width:92%; margin:auto}
  .news-book .news-book-list ol li{display:table-cell; vertical-align:top; text-align:center; padding:0 3px;}
  .news-book .news-book-list ol li img{box-shadow:2px 2px 2px 2px #e2e2e2; width:100%; max-width:140px;}
  .prev-btn{position:absolute; left:20px; top:42%; width:25px; height:25px; z-index:2;/*transform: rotate(-45deg)*/}
  /*.prev-btn:before{content:''; border-top:2px solid #6d6d6d; border-left:2px solid #6d6d6d; padding:0 15px 0 0; }*/
  .next-btn{position:absolute; right:0; top:42%; width:25px; height:25px; z-index:2; /*transform: rotate(135deg)*/}
  /*.next-btn{position:absolute; right:20px; top:42%; width:25px; height:25px; z-index:2; /*transform: rotate(135deg)}*/
  /*.prev-btn{position:absolute; left:20px; top:42%; width:25px; height:25px; z-index:2;/*transform: rotate(-45deg)}*/
  

@media all and (min-width:0px) and (max-width:864px){
  .news-book{display:block; width:100%}
  .news-book .news-book-list {padding:25px 0; height:auto}
  .news-book-list img {margin-left : 230px;}
  .prev-btn{position:absolute; left:10px;}
  .next-btn{position:absolute; right:10px;}
}


/* 메인이미지 */
.main-visual{clear:both;}
.main-visual .main-img img{width:100%; max-width:1200px; padding:0 0 40px 0}

@media all and (min-width:0px) and (max-width:864px){
}
@media all and (min-width:865px) and (max-width:1024px){
}

	/* 롤링배너 */
	  .roll-banner{clear:left; padding:30px 0; width:100%; max-width:1200px; margin:auto}
	  .roll-banner ul{overflow:hidden; display:table; width:100%; margin:0; padding:0; }
	  .roll-banner ul li{display:table-cell; margin-left:1em; text-align:center;}
	  .roll-banner ul li:first-child{margin-left:0}
	  .roll-banner ul li img{width:100%; max-width:220px;border:1px solid #e3e3e3; }
    
@media all and (min-width:0px) and (max-width:1060px){
  .roll-banner{width:90%}
}

/* 베너*/
@media screen and (min-width : 1000px){
  .roll-banner{margin-top : 50px;}
 }   

 @media screen and (max-width : 1000px){
    .roll-banner{           
      width: 90%;           
      overflow-x: scroll;
      white-space:nowrap
    }    
 }
 @media screen and (max-width : 1000px){
  .roll-banner  img{min-width : 200px;}
 }   
 @media screen and (max-width : 700px){
  .roll-banner img{min-width : 180px;}
 }          
