html{ font-size:20px; height:100%;}
body{ word-break:keep-all;word-wrap:break-word;}

* {padding:0; margin:0;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;word-wrap:break-word;}

body,input,textarea,select{ 
	font-family: 'Noto Sans KR', sans-serif;
	font-size:1rem;  
	color:#000; 
	font-weight: inherit; 
	font-style: normal;
	border: 0;
}
td,th{position:relative; margin:0;padding:0;word-break:break-all}

dl, ul, ol, li {list-style: none;}
table{width:100%;border-collapse:separate;empty-cells:show;border-spacing:0}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

button, input {-webkit-border-radius:0;border-radius:0;background:0 0}/*아이폰 테두리 명암 없애기*/
input {appearance:none; -webkit-appearance:none; -moz-appearance:none;}/*아이폰 테두리 명암 없애기*/

img, fieldset {border:0 none; vertical-align:middle;}
hr {display:none;}
caption, legend {position: absolute; width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999em; display:none;}
strong {font-weight:bold;}

a{color:#000;text-decoration:none;}
a:link,a:hover,a:active{text-decoration:none;} 

.clearFix:after {clear:both;  content:""; display:block; visibility:hidden; }
.hidden { position:absolute; width:0; height:0; line-height:0; font-size:0; visibility:hidden; text-indent:-9999em;}
.cb { clear:both;}
.fl { float:left;}
.fr { float:right;}
.bg_none { background:none  }
.br_none { border-right:none  }
.block { display:block;}
.inline_block{display:inline-block;}
.dn { display:none;}  

/* skipToContent */
#skipToContent { position:absolute; top:0px; left:0; width:100%; z-index:999; }
#skipToContent a { display:block; height:0px; width:0px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#fff; white-space:nowrap; background:#001; }
#skipToContent a:focus, #skipToContent a:active { height:auto; width:auto; padding:5px; margin-bottom:10px; }

/* returnToPageTop */
#returnToPageTop { position:absolute; bottom:0px; left:0; width:100%; z-index:999; }
#returnToPageTop a { display:block; height:0px; width:0px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#fff; white-space:nowrap; background:#001; }
#returnToPageTop a:focus, #returnToPageTop a:active { height:auto; width:auto; padding:5px; margin-bottom:10px; }

/* common column */ 
.col_2>[class*="item"]{float:left;width:49%;vertical-align:top; border:1px solid #ddd; box-sizing:border-box;}
.col_2>[class*="item"]+[class*="item"]{margin-left:2%;}
.col_3>[class*="item"]{float:left;width:32%; border:1px solid #ddd; box-sizing:border-box;}
.col_3>[class*="item"]{margin:0.5% 0.5%;}
/*.col_3>[class*="item"]:not(:first-of-type){margin-left:2%;}*/
.col_4>[class*="item"]{float:left;width: 24%; border:1px solid #ddd; box-sizing:border-box;}
.col_4>[class*="item"]:not(:first-of-type){margin-left:1.3%;}

.mg_t30{ margin-top:30px;}

/* 탭메뉴 */
.site_tabWrap .tab_nav {}
.site_tabWrap .tab_nav li {float:left; width:25%; text-align:center;}
.site_tabWrap .tab_nav li a {display:block; height:2.7rem; line-height:2.7rem;color:#333; background:#f6f5f6;border-bottom:1px solid #000; border-top:1px solid #dedede; border-left:1px solid #dedede; border-right:1px solid #dedede; background-color:#fbfbfb; }
.site_tabWrap .tab_nav:first-child li a{border-left:none;}
.site_tabWrap .tab_nav:last-child li a{border-right:none;}
.site_tabWrap .tab_nav li.on a {background-color:#fff; border-bottom:1px solid #fff; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;color:#333;   font-weight:bold;}
.site_tabWrap .tab_nav:after {content:""; display:block; clear:both;}
.tab_cont {display:none;}
.tab_cont.on {display:block;}



/* board_list */ 


.template_view{margin-top:30px;}
.template_view > div.box{  
	position:relative;
	border:1px solid #ddd;
    border-radius: 5px; 
    padding:10px;
    
}
.template_view > div.box:hover{border:1px solid #000; box-shadow:2px 2px 10px 1px rgba(0,0,0,0.5);/* background:#000; position:absolute;; top:0; left:0; z-index:10;*/}
.template_view > div.box > a { display:block;}
.template_view > div.box > a > img {width:100%;}

.template_view .bottom{ 
	border-top:1px solid #ddd;
	 
}
.template_view .bottom .title{
	display:block;
	text-align:center;
	font-size:1rem;
	padding: 0.25rem 0;
}




.snip1273 { 
  position: relative;
  padding:5px;
  margin: 10px; 
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #000000; 
}
.snip1273 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.snip1273 img {
  position: relative;
  max-width: 100%;
  vertical-align: top;
}
.snip1273 figcaption {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  padding: 2.5rem 1.5rem;
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  width: 1px;
  height: 0;
}
.snip1273 figcaption:before {
  right: 0;
  top: 0;
}
.snip1273 figcaption:after {
  left: 0;
  bottom: 0;
}
.snip1273 h3,
.snip1273 p {
  line-height: 1.5em; 
}
 
.snip1273 a.view {
    display: block;
	width:70%;
	margin:2rem auto;
    position: static;
	text-align:center;
    color: #fff;
    padding: 0.25rem 1.25rem;
  border-radius:5px; 
  border:1px solid #fff; 
}
.snip1273 a.view:hover { 
  border:1px solid #000;  
}
 
.snip1273 h3 {
  margin: 0 0 5px;
  font-weight: 700;
  text-transform: uppercase;
} 
.snip1273 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.snip1273:before,
.snip1273:after,
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  position: absolute;
  content: '';
  background-color: #ffffff;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0.8;
}
.snip1273:before,
.snip1273:after {
  height: 1px;
  width: 0%;
}
.snip1273:before {
  top: 0;
  left: 0;
}
.snip1273:after {
  bottom: 0;
  right: 0;
}
.snip1273:hover img,
.snip1273.hover img {
  opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
  opacity: 1;
}
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  height: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after {
  width: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  opacity: 0.1;
}



/***************max-width: 1119px*******************/ 
@media screen and (max-width: 1119px){    

/*
	html{font-size:20px;}
	body{font-size:1rem;}
*/

}






/***************max-width: 769px*******************/ 
@media screen and (max-width: 769px){     
	html{font-size:16px;}
	body{font-size:1rem;}

	.col_3>[class*="item"] {
		float: left;
		width: 48%;
		border: 1px solid #ddd;
		box-sizing: border-box;
	}
	.snip1273 figcaption { 
		padding: 0.5rem 0.5rem;
	}
	.snip1273 a.view { 
    width: 95%;
	}

	 
	



}