/* bootstrap reset col */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

/* sub header */
.sub-header { width:100%; padding:30px 0px 30px 0px;}
.sub-header h2{ font-size:30px;}
.sub-header .pos{ font-size:14px; margin-top:5px;  padding:0; border:0px solid #fff; color:#fff; text-align:right}

/* Portfolio list */

.sub-content .img-txt {display:block;margin-left:10px; font-size:16px; color:#333; text-align:center}
.sub-content .img-txt a, a:link, a:visited, a:hover {color:#666;}
.sub-content .img-txt a:hover {text-decoration:underline; }
.sub-content .view {

   margin: 10px;
   
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   
   box-shadow: 0px 0px 5px #aaa;
   cursor: pointer;
   z-index:100001;
}
.sub-content .view .mask, .view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.sub-content .view img {
   display: block;
   position: relative;
   width:100%;
  
}
.sub-content .view .info {
   background:url(../imgs/link.png) center no-repeat;
   display: inline-block;
   position:absolute;
   top:47%;
   left:47%;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
    z-index:100002;
}



/* FOURTH EFFECTS */
.sub-content .fourth-effect {cursor: pointer; overflow:hidden;}
.sub-content .fourth-effect .mask {
	position:absolute; /* Center the mask */
	top:20%;
	left:30%;
	cursor:pointer;
    border-radius: 50px;
    border-width: 50px;
    display: inline-block;
    height: 100px;
    width: 100px;
	border: 50px solid rgba(0, 0, 0, 0.2);
	-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	opacity:1;
	visibility:visible;
	-moz-transform:scale(4);
	-webkit-transform:scale(4);
	-o-transform:scale(4);
	-ms-transform:scale(4);
	transform:scale(4);
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	z-index:100
}
.sub-content .fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

/* CSS3 EFFECTS */

/* THIRD EFFECTS */

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.third-effect a.info {
   position:relative;
   top:-10px;
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
	opacity:1;
	-moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.portfolio-view h1.title {font-size: 20px;color:#777;margin: 0;padding: 0;padding-top: 5px; 
 display:block; border-top:2px solid #777;  border-bottom:1px solid #ddd;  padding:10px; background-color:#f7f7f7;}

.attach-file {font-size: 12px;color:#777;margin: 0;padding: 0;padding-top: 5px; 
 display:block; border-top:1px solid #ddd;  border-bottom:1px solid #ddd;  padding:10px;}

.attach-file li { margin-right:20px; display:inline-block;}
.attach-file li a, .attach-file li span { padding-left:7px; font-size:12px;	text-decoration:none;	color:#777; }
.attach-file span.divline {height:10px; width:1px; background-color:#ddd; padding-left:1px}

.portfolio-info {font-size: 12px;color:#777;margin: 0;padding: 0;
 display:block; border-top:0px solid #333; background-color:#f9f9f9; padding:10px; font-family:'Nanum Gothic'}
 
.portfolio-info li{ margin-right:8px; display:inline-block;}
.portfolio-info li a, .portfolio-info li span{
	
	padding-left:7px;
	font-size:12px;
	text-decoration:none;
	color:#777;
}
.portfolio-info li a:hover{ }
	
.cont-body { padding:15px; padding-top:30px; padding-bottom:30px; }
.cont-body img { max-width:80%; overflow:hidden}
.cont-body .txt { width:100%; margin-top:30px; }

/* Comment */
.depth-2 {width:99%; padding:5px 5px 5px 20px; padding-left:5%}
.depth-3 {width:99%; padding:5px 5px 5px 20px; padding-left:10%}
.comment { width:100%; border:1px solid #ddd; background-color:#fff; margin-top:10px;}
.comment .user-pic {width:80px; float:left;padding:5px; }
.comment .user-pic img {width:100%; padding:0px; border:4px solid #fff; border-radius:2px; }
.comment .post-user-detail {float:left; margin-left:5px;width:89.5%; margin-top:8px; background-color:#fff; padding:10px}
.comment .post-user-detail .author {font:12px; color:#000; font-weight:700;}
.comment .post-user-detail .date {font:12px; color:#999; margin-left:20px;}

.comment .post-user-detail .memo {margin-top:10px; border:1px solid #ddd;padding:10px; background-color:#f7f7f7}

/* Board list - 1*/

.board-list {}

.board-list .cmt-bal {width:36px;}

.board-list .cmt_num {
	background-image: url('../imgs/comment-num.png');
	background-repeat: no-repeat;
	display: inline-block;
	overflow: hidden;
	position: relative;
	top: 11px;
	right: .8em;
	width: 37px;
	height: 40px;
	padding: 8px 0 0 0!important;
	font-size: .8em;
	line-height: 1em;
	color: #0ba000;
	text-align: center;
	
	text-indent:-9999;
}

.board-list .cmt-bal .num{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 37px;
	height: 40px;
	font-size: 12px;
	text-align: center;
	z-index:10000;
	color:#333;
	border:0px solid #333;
}

.ic_new {
	margin-top: -0.2em;
	display: inline-block;
	overflow: hidden;
	width: 12px;
	height: 12px;
	text-indent: -999em;
	vertical-align: middle;
	background-image: url('../imgs/ico-new.png');
	background-repeat: no-repeat;
}


.board-list {display:table; width:100%; border-bottom:1px solid #ddd; padding:10px 0 10px 10px }
.board-list li {display:table-cell;  vertical-align:top;}
.board-list li {display:table-cell;  vertical-align:top;}
.board-list li.thumb {width:60px;}
.board-list li.title {padding-right:30px;}
a.lists {display:block; width:100%} 
a.lists:hover {background-color:#f7f7f7;} 

.bdr-top{border-top:1px solid #ddd;}


.flist .table a {color:#333;}
.flist .table a:hover {text-decoration:underline;}

.flist .table {
		
		background-color: #fff;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
		
		border:0px;
		
}
	
.flist table {
	width:100%;
	border:0px solid #000;
}
	
.flist th {
	padding:10px 0px 7px 0px;
	background-color: #f7f7f7;
	
	text-align: center;
	
	
	color:#333;
	font-size:14px;
	border:0px solid #000;
	border-top:2px solid #333;
	border-bottom:1px solid #ddd;
}

.flist th.tit {
	
	text-align: center;
	width:60%;
	
}

.flist td {
	padding:10px 0px 10px 0px;
	border-top: 1px solid #ddd;
	
	text-align: center;
	vertical-align: middle;
	color:#333;
	font-size:12px;
	border:0px solid #000;
	border-bottom:1px solid #ddd;
}

.flist td a:hover{ text-decoration:underline}

.flist td.tit {
	
	text-align: left;
	padding-left:20px;
	
}

.submenu{}

.submenu > ul{clear:both;overflow:hidden; border-top:2px solid #000; margin-bottom:25px;}
.submenu > ul a {height:41px;font:normal 13px/41px 'Nanum Gothic', sans-serif;color:#666;padding-left:20px;display:block;border-bottom:1px solid #e5e5e5;letter-spacing:-1px;}
.submenu > ul li.current-menu-item a,
.submenu > ul a:hover{background:#01a2a6 url(../imgs/b-css_sprite.png) -377px -91px no-repeat;border:0px solid #025b9e;border-top:0;padding-left:19px;color:#fff;}
.submenu > ul a.Except{border-bottom:1px solid #025b9e;}



@media only screen and (max-width: 1100px) {
	.nav-bar { width:98%;}
	.content { width:100%; }
	.nav-u { display:none; }
	.footer {width:100%;}
	
	
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
	.nav-bar p.logo {width:100%; text-align:center; border:0px solid #333;}
	

	.sub-content .fourth-effect .mask {display:none;}
	
	.comment .post-user-detail {display:block; width:95%; }
	
	
}/*/mediaquery*/

@media only screen and (max-width: 768px) {
	
	
	.content {width:100%;}
	.cont-body img { max-width:100%; overflow:hidden}
	.portfolio-info {display:none}
}/*/mediaquery*/


@media only screen and (min-width: 1100px) {
	.container {width:100%;}
	.portfolio-info {display:block}
	
}/*/mediaquery*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {


}/*/mediaquery*/