/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트	: RFLOGIX-홈페이지
* ○ 파일		: index.css
* ○ 생성		: 2017.03.30(목요일)
* ○ 최종변경	: 2017.03.30(목요일)
************************************************************************************/

/*html, body {height:100%;margin:0;padding:0}*/
#container {width:100%}

/***********************************************************************************
* 포트폴리오
***********************************************************************************/

.portfolio {	
	margin-bottom:-1px;
	z-index:0;	
	/*max-width:1140px;*/				
	max-width:1090px;
	margin:0 auto;	
	position:relative;
	overflow:hidden;
}

.portfolio-wrap {
	margin:0 auto;	
	/*width:1140px;*/
	/*margin:30px 30px 30px;*/
	height:100%;
}

#portfolio-wrap.no-gutter {
	margin:0 auto;
}

#portfolio {
     width: 100%;
	-webkit-transition: height 0.3s ease-in-out;
	-moz-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	-ms-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}

.item {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow:hidden;
	/*width:500px;*/
	width:485px;	
	height:279px;
	/*margin:15px;*/
	float:left;
	margin:0 30px 60px 30px;	
}

   
.item.animate-in .anim-content {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	opacity:1;
	webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	-moz-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	-o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.item .anim-content {
	height:100%;
	width:100%;
	opacity:0;
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-o-transform: translateY(200px);
	-ms-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-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;
}

.item-content {
	height:100%;
	width:100%;
	position:absolute;
	background-color:#eee;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align:center;
	padding:0px;
	background-size:cover;
	background-position:center center;
	overflow:hidden;
	display: table;
	display:block;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
   }

.item:hover .item-content {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-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.3 ease-in-out;
}	

.item-overlay {
	height:100%;
	width:100%;
	background:rgba(0,0,0,0);
	position:absolute;
	opacity:0;
	padding:60px;
	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;		
}

.item-overlay .inner {
	vertical-align:bottom;
}

.mf-zoom .inner {
	vertical-align:middle;
}

.item:hover .item-overlay {
	background:rgba(0,0,0,0.85);
	opacity:1;
}

.item-cat {
	display:block;
	color:rgba(255,255,255,1)!important;
	margin-bottom:25px;
	opacity:0;
	font-size: 13px;
	font-weight: 400;
	position:relative;	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: translateX(-30px);
	-moz-transform: translateX(-30px);
	-o-transform: translateX(-30px);
	-ms-transform: translateX(-30px);
	transform: translateX(-30px);
}

.item:hover .item-cat {
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-transition: all 0.2s ease-in-out 0.3s;
	-moz-transition: all 0.2s ease-in-out 0.3s;
	-o-transition: all 0.2s ease-in-out 0.3s;
	-ms-transition: all 0.2s ease-in-out 0.3s;
	transition: all 0.2s ease-in-out 0.3s;
}

 .item-cat:after {
	width: 0px;
	background: none repeat scroll 0 0 #0c00ff;
	bottom: -15px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
 }

.item:hover .item-cat:after {		
	width: 20px;
	-webkit-transition: all 0.2s ease-in-out 0.4s;
	-moz-transition: all 0.2s ease-in-out 0.4s;
	-o-transition: all 0.2s ease-in-out 0.4s;
	-ms-transition: all 0.2s ease-in-out 0.4s;
	transition: all 0.2s ease-in-out 0.4s;
}

.item-title {
	display:block;
	font-weight: 600;
	color:#fff;
	font-size:24px;
	line-height:36px;
	font-weight: 700;
	opacity:1;
	color:#fff;
	font-family: 'Montserrat', sans-serif;
	opacity:0;
	text-transform:uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: translateX(-30px);
	-moz-transform: translateX(-30px);
	-o-transform: translateX(-30px);
	-ms-transform: translateX(-30px);
	transform: translateX(-30px);
}

.item:hover .item-title {
	opacity:1;
	-webkit-transform: translateX(-1px);
	-moz-transform: translateX(-1px);
	-o-transform: translateX(-1px);
	-ms-transform: translateX(-1px);
	transform: translateX(-1px);
	-webkit-transition: all 0.2s ease-in-out 0.5s;
	-moz-transition: all 0.2s ease-in-out 0.5s;
	-o-transition: all 0.2s ease-in-out 0.5s;
	-ms-transition: all 0.2s ease-in-out 0.5s;
	transition: all 0.2s ease-in-out 0.5s;
}

.zoom-box {
	height: 10px;
	margin: 0 auto;
	padding-top: 10px;
	position: relative;
	width: 20px;
}

.wide .zoom-box, .tall .zoom-box {
	height: 15px;
	margin: 0 auto;
	padding-top: 15px;
	position: relative;
	width: 30px;
}

.item .zoom-box {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-o-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity:0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.item:hover .zoom-box {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity:1;
	-webkit-transition: all 0.2s ease-in-out 0.3s;
	-moz-transition: all 0.2s ease-in-out 0.3s;
	-o-transition: all 0.2s ease-in-out 0.3s;
	-ms-transition: all 0.2s ease-in-out 0.3s;
	transition: all 0.2s ease-in-out 0.3s;
}

.zoom-in-left, .zoom-in-right {
	width:20px;
	height:2px;
	background-color:#FFF;
	position:absolute;
}

.wide .zoom-in-left, .wide .zoom-in-right, .tall .zoom-in-left, .tall .zoom-in-right {
	width:30px;
}

.zoom-in-right {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.skew_web {
	width:324px;
	/*height:182px;*/
	height:202px;	
	margin:0 auto;
	padding-top:20px;	
	padding-right:6px;
}

.skew_mobile {
	width:152px;
	height:122px;
	margin:0 auto;
	/*padding-top:10px;*/	
   	transform:translate(-10px,15px) rotate(-109deg) skew(10deg,-45deg) scale(1,1.1);   	
   	/*-moz-transform:translate(-10px,15px) rotate(-109deg) skew(10deg,-45deg) scale(1,1.1);*/
   	-moz-transform: matrix3d(-1.12, -0.43, 0, 0.000420, 
                    1.9, -0.87, 0, 0.000703, 
                    0, 0, 1, 0, 
                    44, 220, 0, 1);
 	-moz-transform-origin: 0px 0px 0px;
   	   	
   	
   	/*-webkit-transform:translate(5px,0px) rotate(-110deg) skew(10deg,-30deg);*/
   	-webkit-transform: matrix3d(-1.12, -0.43, 0, 0.000420, 
                    1.9, -0.87, 0, 0.000703, 
                    0, 0, 1, 0, 
                    44, 220, 0, 1);
	-webkit-transform-origin: 0px 0px 0px;
	
	-ms-transform: matrix3d(-1.12, -0.43, 0, 0.000420, 
                    1.9, -0.87, 0, 0.000703, 
                    0, 0, 1, 0, 
                    44, 220, 0, 1);
	-ms-transform-origin: 0px 0px 0px;
	
	-o-transform: matrix3d(-1.12, -0.43, 0, 0.000420, 
                    1.9, -0.87, 0, 0.000703, 
                    0, 0, 1, 0, 
                    44, 220, 0, 1);
	-o-transform-origin: 0px 0px 0px;
   	
   	/*-o-transform:translate(5px,-5px) rotate(-110deg) skew(10deg,-30deg);*/
}


/***********************************************************************************
* 오시는 길
***********************************************************************************/

.company_map {width:1030px; margin:0 auto; margin-top:100px;position:relative;background:url('../image/common/company_map.png') no-repeat}
.company_map ul {width:100%; }
.company_map ul li {margin-left:30px; width:160px; height:30px; cursor:pointer; float:left;}
.company_map ul li:first-child {margin-left:0;}
.company_map ul li #divSendComment {width:130px; height:30px; cursor:pointer;}


/***********************************************************************************
* Footer
***********************************************************************************/

#footer {width:100%; overflow:hidden; background:url('../image/common/footer_line.png') repeat;}
#footer .footer {width:1100px; height:215px;margin: 0 auto; position:relative; overflow:hidden; background:url('../image/page/bg_footer.png') no-repeat;}

/* 하단 메뉴 */
#footer .footer-menu 	{width:100%; overflow:hidden; color:#999; font-size:11px;}
#footer .footer-menu ul		{height:13px; overflow:hidden;}
#footer .footer-menu li		{height:13px; line-height:13px; font-size:11px; color:#999; float:left; margin-left:10px;}
#footer .footer-menu li:first-child	{margin-left:0px;}
#footer .footer-menu a		{color:#999; font-size:11px;}

/* 회사정보 */
#footer .company-info		{width:100%; height:160px; margin:0 auto; overflow:hidden; background:url('../image/common/bg_footer.png') no-repeat;}
#footer .company-info ul	{width:100%; height:17px; overflow:hidden;}
#footer .company-info li	{height:17px; line-height:17px; margin-left:10px;}
#footer .company-info li:first-child	{margin-left:0px;}
#footer .company-info a		{color:#999; font-size:11px;}

/* COPYRIGHT */
#footer .copyright		{width:100%; overflow:hidden; color:#999; font-size:11px; margin-top:10px; margin-bottom:20px;}
#footer .copyright ul		{width:100%; overflow:hidden;}
#footer .copyright li		{height:20px; line-height:20px; margin-left:10px;}
#footer .copyright li:first-child	{margin-left:0px;}
#footer .copyright a		{color:#999; font-size:11px; line-height:15px;}




/***********************************************************************************
* 지도
***********************************************************************************/

.map_title {max-width:1030px; overflow:hidden; margin:0 auto; padding:30px 0 20px 0;}
.map_title .title_wrap {width:100%; margin:0; font-family:"Lato"; font-weight:400; font-size:20px;}

.map_content {max-width:1030px; overflow:hidden; margin:0 auto; padding-bottom:40px;}
.map_content .map_wrap {width:100%; height:600px; margin:0;}

.map_wrap div {width:auto; height:300px;}
/*
@media (min-width:960px) {
	.map_title {padding-top:40px;}
	.map_title .title_wrap {width:90%; margin:0 5%; font-size:25px;}
	
	.map_content {padding-bottom:45px;}
	.map_content .map_wrap {width:90%; height:400px; margin:0 5%;}
}

@media (min-width:1030px) {
	.map_title {padding-top:50px;}
	.map_title .title_wrap {width:100%; margin:0; font-size:30px;}
	
	.map_content {padding-bottom:50px;}
	.map_content .map_wrap {width:100%; height:600px; margin:0;}
}
*/