/* ------------------- 포트폴리오 ------------------- */
.p-wrap1 {
	position:relative;
	top:-100px;	
	color:#212121; 
	background-color:rgba( 255, 255, 255, 0.9 );
}
.color-1o{
	color:#fd4b00 !important;
}
.font-size-27 {
	font-size:2.7rem;
}
.font-size-09 {
	font-size:12px;
}
.portfolio-title h3 {
	color:#fd4b00;
	text-transform: uppercase;
	font-weight:900;
}
#nav-tab .active {
	background-color:#fd4b00;
	border:1px solid #fff;
	color:#fff;
	border-radius:0;
}
#nav-tab {
	border:0;
}
#portfolio1-tab, #portfolio2-tab, #portfolio3-tab, #portfolio4-tab {
	border:0;
	width:120px;
	text-align:center;
	font-weight:600;
}
.pl-0 { padding-left:0;}
.pr-0 { padding-right:0; }


@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,500,900);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure { margin:0; }
figure.snip1382 {
	font-family: 'Source Sans Pro', Arial, sans-serif;
	position: relative;
	overflow: hidden;
	width: 100%;
	color: #ffffff;
	text-align: center;
	font-size: 16px;
}
figure.snip1382 * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}
figure.snip1382 img {
	max-width: 100%;
}
figure.snip1382:after,
figure.snip1382:before,
figure.snip1382 figcaption:after,
figure.snip1382 figcaption:before {
	background: #0a0a0a;
	height: 25%;
	position: absolute;
	content: '';
	opacity: 0;
	-webkit-transition: all 0.35s steps(4);
	transition: all 0.35s steps(4);
	z-index: 1;
	left: 50%;
	right: 50%;
}
figure.snip1382:before {
	top: 0;
	-webkit-transition-delay: 0;
	transition-delay: 0;
}
figure.snip1382:after {
	top: 25%;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
figure.snip1382 figcaption:before {
	top: 50%;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	z-index: -1;
}
figure.snip1382 figcaption:after {
  top: 75%;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  z-index: -1;
}
figure.snip1382 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 30px;
}
figure.snip1382 h3,
figure.snip1382 p,
figure.snip1382 .icons {
	margin: 0;
	width: 100%;
	opacity: 0;
}
figure.snip1382 li {
	margin: 0;	
	opacity: 0;
}
figure.snip1382 h3 {
  font-weight: 900;
  text-transform: uppercase;
}
figure.snip1382 p {
  font-weight: 300;
}
figure.snip1382 .icons {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
}
figure.snip1382 i {
  padding: 0px 10px;
  display: inline-block;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  opacity: 0.8;
  text-decoration: none;
}
figure.snip1382 i:hover {
  opacity: 1;
}
figure.snip1382:hover:after,
figure.snip1382.hover:after,
figure.snip1382:hover:before,
figure.snip1382.hover:before,
figure.snip1382:hover figcaption:after,
figure.snip1382.hover figcaption:after,
figure.snip1382:hover figcaption:before,
figure.snip1382.hover figcaption:before {
  left: 0;
  right: 0;
  opacity: 0.8;
}
figure.snip1382:hover figcaption h3,
figure.snip1382.hover figcaption h3,

figure.snip1382:hover figcaption p,
figure.snip1382.hover figcaption p,
figure.snip1382:hover figcaption .icons,
figure.snip1382.hover figcaption .icons {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
figure.snip1382:hover figcaption h3,
figure.snip1382.hover figcaption h3,
figure.snip1382:hover figcaption li,
figure.snip1382.hover figcaption li,
figure.snip1382:hover figcaption .icons,
figure.snip1382.hover figcaption .icons {
  opacity: 1;
}
figure.snip1382:hover figcaption p,
figure.snip1382.hover figcaption p {
  opacity: 0.7;
}


/* 페이드인 */
@keyframes flipInY {
  0% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

[data-animation] {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
  animation-duration: 1s;
}
.animations-disabled, .animations-disabled [data-animation] {
  animation: none !important;
  opacity: 1 !important;
}

.flipInY {
  animation-name: flipInY;
}

.flipOutY {
  animation-name: flipInY;
  animation-direction: reverse;
}


/* 에니메이션 */
.animation {
  
}
.animation .anm_mod {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: all 1s ease;
}


.animation .anm_mod.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 페이드인2 */
.img{
	opacity:0;
}