@media only screen and (min-width:1px) and (max-width:540px) {







/*뉴 포트폴리오_모바일*/
.port_list_wrap{ float:left; width:100%; padding:50px 0 0 0;  }

.port_list{position:relative; width:211px; height:100%; margin:0 auto;}
.port_list .port_box{ margin:0 0px 20px 0; border:1px solid #ddd; }
.port_list .port_box .port_img,.port_list .works_item a{position:relative;display:block;}
.port_list .port_box ul li { float:left; position:relative; overflow:hidden; cursor:pointer; }
.port_list .port_box ul li a {color:#fff;}
.port_list .port_box ul li a:hover, a:active, a:focus{color:#fff; text-decoration:none;}

.img-responsive { width:100%; height:100%; cursor: pointer;}

.port_list .port_box ul li:hover .p-mask {
	opacity: 0.8; visibility: visible;
	-webkit-transform: translate3d( 0px, 0px, 0px);
	-moz-transform: translate3d( 0px, 0px, 0px);
	-ms-transform: translate3d( 0px, 0px, 0px);
	-o-transform: translate3d( 0px, 0px, 0px);
	transform: translate3d( 0px, 0px, 0px);
}


.p-mask {   float:left; padding:20px 0; 
	opacity:0; visibility:hidden; background:#000; bottom:0%; position:absolute; padding:0px; width:100%; 
	-webkit-transform: translate3d( 0px, 70%, 0px); 
	-moz-transform: translate3d( 0px, 70%, 0px); 
	-ms-transform: translate3d( 0px, 70%, 0px);
	-o-transform: translate3d( 0px, 70%, 0px);
	transform: translate3d( 0px, 70%, 0px);
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	text-align: left;
	float:left;
	color:#fff;
}

.p-mask h4 { padding:10px 10px 0 10px; font-size:14px;}
.p-mask p { padding:5px 0 0px 10px; font-size:12px;  }

.p-mask_le { float:left; width:100%; }
.p-mask_ri { float:left; width:100%; margin:10px 0px 20px 10px;  }
.more {margin-top:10px; } 

.p-mask_btn { width:26px;}


/*뉴 포트폴리오 끝*/
.scroll_guide { display:none;  }


.port_list_wrap2 {width:100%;float:left;  }
.ex_serv {width:96%; margin:0 auto;  margin-top:40px; margin-bottom:60px;   }
.other_w {display:none;  }
.other_t {display:none;}
.other_m  {width:100%; margin-top:20px; margin-bottom:40px;}

.pagination_wrap {width:100%; float:left; }
.pagination { width:96%; margin:0 auto; text-align:center; margin-bottom:40px; font-size:14px;  }
.pagination img { vertical-align:middle; padding-bottom:3px; }
.pagination a{color: #555; text-decoration:none;}
.pagination a:hover, a:active, a:focus{ text-decoration:none;}



}

 
 
 
 
 
 
 
 /* 반응형 1xp~ 860px */

@media only screen and (min-width:541px) and (max-width:860px) { 






/*뉴 포트폴리오_모바일*/
.port_list_wrap{ float:left; width:100%; padding:50px 0 0 0; }

.port_list{position:relative; width:500px; height:100%; margin:0 auto; }
.port_list .port_box{ margin:0 0px 20px 0; border:1px solid #ddd; }
.port_list .port_box .port_img,.port_list .works_item a{position:relative;display:block;}
.port_list .port_box ul li { float:left; position:relative; overflow:hidden; cursor:pointer; }
.port_list .port_box ul li a {color:#fff;}
.port_list .port_box ul li a:hover, a:active, a:focus{color:#fff; text-decoration:none;}

.img-responsive { width:100%; height:100%; cursor: pointer;}

.port_list .port_box ul li:hover .p-mask {
	opacity: 0.8; visibility: visible;
	-webkit-transform: translate3d( 0px, 0px, 0px);
	-moz-transform: translate3d( 0px, 0px, 0px);
	-ms-transform: translate3d( 0px, 0px, 0px);
	-o-transform: translate3d( 0px, 0px, 0px);
	transform: translate3d( 0px, 0px, 0px);
}

.p-mask {   float:left; padding:20px 0; 
	opacity:0; visibility:hidden; background:#000; bottom:0%; position:absolute; padding:0px; width:100%; 
	-webkit-transform: translate3d( 0px, 70%, 0px); 
	-moz-transform: translate3d( 0px, 70%, 0px); 
	-ms-transform: translate3d( 0px, 70%, 0px);
	-o-transform: translate3d( 0px, 70%, 0px);
	transform: translate3d( 0px, 70%, 0px);
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	text-align: left;
	float:left;
	color:#fff;
}

.p-mask h4 { padding:10px 10px 0 10px; font-size:14px;}
.p-mask p { padding:5px 0 0px 10px; font-size:12px;  }

.p-mask_le { float:left; width:100%; }
.p-mask_ri { float:left; width:100%; margin:10px 0px 20px 10px;  }
.more {margin-top:10px; } 

.p-mask_btn { width:26px;}


/*뉴 포트폴리오 끝*/

.scroll_guide { display:none;  }

.port_list_wrap2 {width:100%;float:left;  }
.ex_serv {width:96%; margin:0 auto;  margin-top:40px; margin-bottom:60px;   }
.other_w {display:none;  }
.other_t {width:100%; margin-top:20px; margin-bottom:40px;}
.other_m  {display:none;}


.pagination_wrap {width:100%; float:left; }
.pagination { width:96%; margin:0 auto; text-align:center; margin-bottom:40px; font-size:14px;  }
.pagination img { vertical-align:middle; padding-bottom:3px; }
.pagination a{color: #555; text-decoration:none;}
.pagination a:hover, a:active, a:focus{ text-decoration:none;}



} 










 /* 반응형 860px~  */
@media only screen and (min-width: 861px) {

/*뉴 포트폴리오*/
.port_list_wrap{ width:1190px; height:100%; margin:0 auto; padding:50px 0 0px 0; background:#fff;  }

.port_list{position:relative; float:left; width:960px; height:100%; padding:0 0 20px 130px; }
.port_list .port_box{ margin:0 0px 30px 0; border:1px solid #999; }
.port_list .port_box .port_img,.port_list .works_item a{position:relative;display:block;}
.port_list .port_box ul li { float:left; position:relative; overflow:hidden; cursor:pointer; }
.port_list .port_box ul li a {color:#fff;}
.port_list .port_box ul li a:hover, a:active, a:focus{color:#fff; text-decoration:none;}


.img-responsive { width:100%; height:100%; cursor: pointer;}


.port_list .port_box ul li:hover .p-mask {
	opacity: 0.8; visibility: visible;
	-webkit-transform: translate3d( 0px, 0px, 0px);
	-moz-transform: translate3d( 0px, 0px, 0px);
	-ms-transform: translate3d( 0px, 0px, 0px);
	-o-transform: translate3d( 0px, 0px, 0px);
	transform: translate3d( 0px, 0px, 0px);
}


.p-mask {   float:left; padding:20px 0; 
	opacity:0; visibility:hidden; background:#000; bottom:0%; position:absolute; padding:0px; width:100%; 
	-webkit-transform: translate3d( 0px, 70%, 0px); 
	-moz-transform: translate3d( 0px, 70%, 0px); 
	-ms-transform: translate3d( 0px, 70%, 0px);
	-o-transform: translate3d( 0px, 70%, 0px);
	transform: translate3d( 0px, 70%, 0px);
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	text-align: left;
	float:left;
	color:#fff;
}

.p-mask h4 { padding:10px 10px 0 10px; font-size:14px; line-height:18px;}
.p-mask p { padding:5px 0 0px 10px; font-size:12px;  }

.p-mask_le { float:left; width:100%; }
.p-mask_ri { float:left; width:100%; margin:10px 0px 20px 10px;  }
.more {margin-top:10px; } 

.p-mask_btn { width:26px;}


/*뉴 포트폴리오 끝*/

.scroll_guide { display:block;  }
.scroll_guide { float:left; width:100px; height:50px; z-index:11; bottom:10px; right:0px; margin:380px 0 0 0;}
.scroll_guide ul li { float:left;  padding:0 0 0 10px; font-size:13px; font-weight:600; color:#999;  }


.port_list_wrap2 {width:100%;float:left;  }
.ex_serv {width:1100px; margin:0 auto;  margin-top:40px; margin-bottom:60px;   }
.other_w {width:100%; margin-top:20px; margin-bottom:40px; }
.other_t {display:none; }
.other_m  {display:none;}

.pagination_wrap {width:100%; float:left; }
.pagination { width:1100px; margin:0 auto; text-align:center; margin-bottom:60px; font-size:16px;  }
.pagination img { vertical-align:middle; padding-bottom:3px; }
.pagination a{color: #555; text-decoration:none;}
.pagination a:hover, a:active, a:focus{ text-decoration:none;}


}