.column {
	width:25%;   float:left; 
	padding: 0;
}
 
.column::after {
	content: '';
	clear: both;
	display: block;
}
.column div {
	position: relative;
	float: left;
	width: 100%;
 	margin: 0;
	padding: 0;
	overflow:hidden
}
.column div:first-child {
	margin-left: 0;
}
.column div span {
  	left: 0;
	z-index: -1;  
	  
	width: 100%;  
	height:30px;
	margin: 0;  
 	color: #fff;
	height:100%; 
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:500;
    background:rgba(0,0,0,.9);
	font-size: 1.5rem;
	position:absolute;
    top:-100%;
 	z-index:99999;
	transition: all 0.3s ease-out;
	 
}

.column div:hover span {
 
    top:50%;
	transform: translate(0, -50%);
 	 
}

figure {
    box-sizing:border-box;
  	margin: 0; 
   	padding: 0;
  position:relative; 
	overflow: hidden;
	  transition: all 0.3s ease-out;
}
 
.column div:after {content:' '; display:flex; color:#fff;  font-weight:600;  align-items:Center; justify-content:center;   transition: all 0.3s ease-out; width;0;   height:0; background-color:var(--main_c); position:absolute; right:0; top:0; cursor:pointer; font-size:0}
.column div:hover:after { width:80px; height:80px; font-size:25px; 
content:'\f0c1';
		font-family: "Font Awesome 5 Free";
		font-weight: 900; }
.portfolio01 figure:hover {filter: grayscale(100%)}



/* .portfolio01 figure:before {content:' '; display:flex; color:#fff;  font-weight:600;  align-items:Center; justify-content:center;   transition: all 0.3s ease-out; width;0;   height:0; background:rgba(0,0,0,.8);  position:absolute; right:0; top:0; cursor:pointer; font-size:0}
.portfolio01 figure:hover:before {width:100%; height:100%  }
 */
 
/*  .hover02 figure img {
 	-webkit-transform: scale(1);
 	transform: scale(1);
 	-webkit-transition: .3s ease-in-out;
 	transition: .3s ease-in-out;
 }
 .hover02 figure:hover img {
 	-webkit-transform: scale(1.2);
 	transform: scale(1.2);
 }  
 
  */



  


/*팝업*/

 

.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:99999999999999999999999999999999999999999999999999;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8;  }
.layer .pop-layer {display:block;}

.pop-layer {display:none; position: absolute; top:50%; left:50%;  background-color:#fff;  border-radius:10px;  overflow:hidden;  z-index: 10; width:1000px; transform: translate(-50%, -50%); }	
.pop-layer .pop-container {}
.pop-conts {display:flex; width:100%}
.pop-layer .pop-container div.pop_img { }
.pop-layer .pop-container div.right_box {width:calc(100% - 500px);   box-sizing:border-box; padding:40px 30px;  margin-left:auto}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .btn-r {width: 100%; float:left;   padding-top: 10px;  text-align:right;}

a.cbtn {   display:inline-block; padding:5px 25px 9px 25px; border:1px solid #304a8a; background-color:var(--main_c);  color:#fff;   border-radius:1px;}	
 
.pop-layer .flex {margin-top:20px;}
a.cbtn2 { width:49%; background-color:var(--main_c);   margin-top:10px; color:#fff ; padding:0; line-height:50px; text-align:center; }	
a.cbtn2 + a.cbtn2 {margin-left:auto} 
a.cbtn3 { width:50px; height:50px; display:flex; align-items:center;  justify-content:Center; background-color:var(--main_c); border:none; color:#fff; padding:0;position:absolute; right:0; top:0;  font-size:30px;  }	

  

.pop_info_title {font-size:1.5em; color:#333;  font-weight:800; margin-bottom:10px; width:100%; display:inline-block;  }

.pop_info {width:100%;  }
.pop_info p { width:100%;  color:#666; box-sizing:border-box;  }
.pop_info p + p {border:2px solid #ddd; margin-top:20px;  padding:13px}
.pop_info p + p a { display:flex; align-items:center;}
.pop_info b {font-weight:600; color:#333;}
.pop_info .site_link { margin-left:auto;  color:var(--main_c);  font-size:16px;   line-height:25px; }


/*ing*/


#lastPostsLoader {display:none}
.portfolio_ing_wrap { width:100%; display:flex;  flex-wrap:wrap;  justify-content:space-between; gap:20px 0 }
.portfolio_ing_wrap * {   word-break: normal}
.portfolio_ing {width:calc(50% - 10px); border:1px solid #ddd;   margin-right:-1px; box-sizing:border-box;   display:flex;  align-items:center }
 
.ing_img {width:55%; flex-shrink:0; background-color:#fff;  display:flex  }

.ing_img .img {width:100%;  border:1px solid #ddd;}
.portfolio_ing  div.info_text {width:45%;  box-sizing:border-box; display:flex;  align-items:center; padding:15px 20px}
.portfolio_ing  div.info_text div {width:100%}
.portfolio_ing  div.info_text ul {width:100%}
.portfolio_ing  div.info_text ul li {width:100%; font-size:.94em; display:flex; margin:6px 0}
.portfolio_ing  div.info_text ul li:last-child {margin-top:13px}
.portfolio_ing  div.info_text ul li.info_line a {color:#222; }
.portfolio_ing  div.info_text ul li.info_line a:hover {text-decoration:underline}
.portfolio_ing  div.info_text ul li.info_line p {width:100px; font-weight:700;  flex-shrink:0}
.portfolio_ing  div.info_text h4 {font-size:1.2em; font-weight:800;  width:100%; margin-bottom:12px}


.pf_info_box {width:100%;  margin-top:20px; float:left; border-top:2px solid #0b4366;}
.pf_info_box  table {width:100%;}
.pf_info_box  table tr {border-bottom:1px solid #ddd; }
.pf_info_box  table th {padding:12px;font-size:1rem; color:#333; vertical-align:middle}
.pf_info_box  table td {padding:10px; text-align:left;  font-size:1rem; color:#666; vertical-align:middle}

.percentbg { width:100%;  position:relative;  display:inline-block; text-align:left; background-color:#ddd; border-radius:20px; overflow:hidden; height:25px}
.percentbg p { background: linear-gradient( to left, var(--main_c), #5A57C9); height:100%;  }
.percentbg10 {width:10%;  }
.percentbg20 {width:20% }
.percentbg30 {width:30%;  }
.percentbg40 {width:40%; }
.percentbg50 {width:50%;  }
.percentbg60 {width:60%;  }
.percentbg70 {width:70%;  }
.percentbg80 {width:80%; }
.percentbg90 {width:90%;   }
.percentbg100 {width:100% }
.percentbg  span {z-index:9; position:absolute; font-size:16px; top:0; line-height:25px; left:3%; color:#fff}


/*프로그램*/

.portfolio_prog {width:100%; display:flex; flex-wrap:wrap; }
.pf_prog {width:25%; margin-right:-1px; margin-bottom:-1px;  position:relative; padding-bottom:16%; box-sizing:border-box; border:1px solid #ddd;  display:inline-block   }

.pf_prog_img_ov {display:none}
.pf_prog:hover .pf_prog_img_ov {width:100%; position:absolute; top:0; left:0; height:100%;  color:#fff; filter:alpha(opacity=90);  background-color:var(--main_c); box-sizing:border-box; padding:20px; display:flex ; align-items:center; }
.pf_prog_img_ov a {color:#fff; width:100%;  height:100%; display:flex; flex-wrap:wrap; align-items:center; }
.pf_prog_img_ov a h3 {font-size:1.25em; font-weight:800;  margin-bottom:10px; color:#fff;  }
.pf_prog_img_ov a b {color:#fff }
.pf_prog_img_ov span {width:100%; text-align:center;  display:inline-block; border:1px solid #fff; color:#fff ; margin-top:10px;}

.prog_view_wrap {gap:30px}
.prog_view_img {border:1px solid #ddd;  }

/*모바일*/

.portfolio04 {width:100%;  display:flex; flex-wrap:wrap; gap:40px 20px;   }
div.portfolio04_box {flex: 1 1 calc(16.6% - 20px); background-color:#f4f6f8;   display:inline-block; box-sizing:border-box; }
div.portfolio04_box .portfolio04_img img {width:100%;   box-sizing:border-box;   }
div.portfolio04_box .portfolio04_tt  {width:100%;  display:inline-block;  font-size:1em;  color:#333; font-weight:600;  text-align:center; padding:15px 0;  }

 @media all and (min-width:900px) {
 
	.ing_img  a {width:100%; height:100%; max-height:220px;  justify-content:center; overflow:hidden;   display:flex; align-items:center;  }
    .ing_img  a img {max-width:100%; max-height:100%}
}

@media all and (max-width:1200px) {
 		.portfolio_ing { flex: 100%; }

}

@media all and (max-width:1000px) {

	.pop-layer {width:94%;  }	
		.portfolio_ing { flex: 100%; }

}
 
 @media all and (max-width:900px) {

		.column {width:50%}
		figure {height:34vw; }
		.pf_prog {width:50%; padding-bottom:40%}
		div.portfolio04_box {flex: 1 1 calc(50% - 20px);}
		
		.pop_info_title  {font-size:1.3em}
		.prog_view_img {width:100%; text-align:center}
		.pop-conts {flex-wrap:wrap}
		.pop-layer .pop-container div.right_box {width:100%; padding:20px}
		.pop_info_title {margin-bottom:5px}
		.pop_info p + p {margin-top:10px}
		.pop-layer .flex {margin-top:10px}
		.pop_info .site_link {display:none}
		a.cbtn2 {line-height:40px}

		.portfolio_ing {width:100%; display:inline-block }
 
		.ing_img {width:100%; }
		.portfolio_ing  div.info_text {width:100%;}

		.pf_prog:hover .pf_prog_img_ov {display:none }


}