#container_body{ padding: 0px; width: auto; max-width: 100%; }

/* ºí·ç bg¿ë »ó´Ü¿µ¿ª */
.header.white_header .header_top .logo{ background: url(../../img/logo/logo-white-all.png) no-repeat center; background-size: 100%; }

/* »ó´Ü ¸Þ´º¿µ¿ª */
.tab-menu {position: relative; border-bottom: 1px solid #e6e6e6; }
.tab-menu li { margin: 0px 20px; position: relative; }
.tab-menu li a { font-size: 15px; color: #a1a1a1; line-height: 72px; }
.tab-menu li:after { content: ''; position: absolute; bottom: 0px; height: 2px; right: 0; width: 0; background: #4ab8ff; -khtml-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;    }
.tab-menu li.current a{ color: #000; font-weight: 500; }
.tab-menu li.current:after, .tab-menu li:hover:after { width: 100%; left: 0; }

/* ¼­ºê¸Þ´º */
.top_sub_menu{background: #f7f7f7;text-align: center;margin-bottom: 80px;}
.top_sub_menu li a{color: #a1a1a1;font-size: 15px; display: block; margin: 0 16px; padding: 24px 0;}
.top_sub_menu li.current a{color: #222; font-weight: 500;}

/* °Ë»öÆû */
.search_wrap{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.search_wrap .search_inner input{width: 235px; height: 46px; line-height: 46px; padding: 0 10px; box-sizing: border-box; border: none; position: absolute; right: -10px; top: -10px; background: #f7f7f7; font-size: 14px; z-index: -1;padding-right: 40px;}
.search_wrap .search_inner input::placeholder{color: #aaa;}

/* Æ÷Æ®Æú¸®¿À */
.portfolio { width: 1280px; margin: 70px auto; }
.portfolio .port-item { width: 33.333%; height: 600px; position: relative; overflow: hidden; opacity:0;}
.portfolio .port-item a { display: block; width: 100%; height: 100%; }
.portfolio .port-item .thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center !important; background-size: 150% auto !important; background-repeat: no-repeat !important; transition: -webkit-transform 1s cubic-bezier(.19, 1, .22, 1); transition: -moz-transform 1s cubic-bezier(.19, 1, .22, 1); transition: -ms-transform 1s cubic-bezier(.19, 1, .22, 1); transition: transform 1s cubic-bezier(.19, 1, .22, 1); }
.portfolio .port-item:hover .thumb { -webkit-transform: scale(1.12); -moz-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); }
.portfolio .port-item .caption-box { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 11% 7.9%; box-sizing: border-box; }
.portfolio .port-item .caption-box h2.subject { font-size: 25px; color: #fff; font-weight: 500; line-height: 35px; font-family: 'Noto Sans KR', sans-serif; margin: 0px 0px 25px; transform: translateY(54px); transition: -webkit-transform 1s cubic-bezier(.19, 1, .22, 1); transition: transform 1s cubic-bezier(.19, 1, .22, 1); }
.portfolio .port-item .caption-box .des-box { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); overflow: hidden; transition: 1s -webkit-transform cubic-bezier(.19, 1, .22, 1); transition: 1s -moz-transform cubic-bezier(.19, 1, .22, 1); transition: 1s -ms-transform cubic-bezier(.19, 1, .22, 1); transition: 1s transform cubic-bezier(.19, 1, .22, 1); }
.portfolio .port-item .caption-box .box-inner { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); transition: 1s -webkit-transform cubic-bezier(.19, 1, .22, 1); transition: 1s -moz-transform cubic-bezier(.19, 1, .22, 1); transition: 1s -ms-transform cubic-bezier(.19, 1, .22, 1); transition: 1s transform cubic-bezier(.19, 1, .22, 1); }
.portfolio .port-item .caption-box p.description { font-size: 14px; color: #fff; line-height: 21px; font-family: 'Noto Sans KR', sans-serif; margin: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); transition: .6s -webkit-transform cubic-bezier(.19, 1, .22, 1); transition: .6s -moz-transform cubic-bezier(.19, 1, .22, 1); transition: .6s -ms-transform cubic-bezier(.19, 1, .22, 1); transition: .6s transform cubic-bezier(.19, 1, .22, 1); }
.portfolio .port-item .caption-box p.category { font-size: 14px; color: #fff; font-weight: 700; line-height: 27px; font-family: 'Lato', sans-serif; margin: 0px; transition: -webkit-transform .7s cubic-bezier(.19, 1, .22, 1) 0s; transition: -moz-transform .7s cubic-bezier(.19, 1, .22, 1) 0s; transition: -ms-transform .7s cubic-bezier(.19, 1, .22, 1) 0s; transition: transform .7s cubic-bezier(.19, 1, .22, 1) 0s; }
.portfolio .port-item:hover .des-box, .portfolio .port-item:hover .box-inner, .portfolio .port-item:hover p.description { transform: translateY(0); }
.portfolio .port-item:hover h2.subject { transform: translateY(10px); }
.portfolio .port-item:hover p.category { transform: translateY(15px); }
.portfolio .port-item .caption-box.black h2.subject, .portfolio .port-item .caption-box.black p.description, .portfolio .port-item .caption-box.black p.category{ color: #353535; }
.portfolio .port-item span.wa { position: absolute; top: 29px; right: 25px; z-index: 1; }
a.btn-more { position: relative; display: block; width: 174px; height: 54px; box-sizing: border-box; line-height: 52px; font-size: 13px; border: 1px solid #01a7ff; margin: 60px auto; font-family: 'Lato',sans-serif; }
a.btn-more span { display: block; width: 100%; height: 100%; color: #01a7ff; position: relative; z-index: 10; text-indent: 61px; background: url(../../img/icon/icon-arrow-more.png) no-repeat 107px center; -khtml-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;      }
a.btn-more:hover span { color: #fff; background: url(../../img/icon/icon-arrow-more-w.png) no-repeat 107px center; }
a.btn-more:after { content: ""; display: block; width: 0; height: 100%; background: #01a7ff; position: absolute; top: 0; left: 0; -khtml-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;    }
a.btn-more:hover:after { width: 100%; }


.animated {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5);
    transform: scale3d(0.5, 0.5, 0.5);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5);
    transform: scale3d(0.5, 0.5, 0.5);
  }

  50% {
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


/**** ¸ð¹ÙÀÏ/Å×ºí¸´ ¸®»çÀÌ¡ ****/

@media (max-width: 1280px) {

	/* ¼­ºê¸Þ´º */
	.top_sub_menu{padding: 18px 0;}
	.top_sub_menu li a{padding: 5px 0; margin: 0 12px;}

	/* Æ÷Æ®Æú¸®¿À */ 
	.portfolio{ width: 100%; box-sizing: border-box; padding: 0 15px;} 
	.portfolio .port-item{width: 50%;height: 600px;} 

	/* °Ë»öÆû */
	.search_wrap{right: 15px;}
}

@media (max-width: 769px) {

	/* »ó´Ü ¸Þ´º¿µ¿ª */ 
	.tab-menu li {margin: 0px 15px;} 
	.tab-menu li a{font-size: 13px; line-height: 50px;}

	/* ¼­ºê¸Þ´º */
	.top_sub_menu{padding: 10px 0;margin-bottom: 30px;}
	.top_sub_menu .cut_layout{padding-right: 5px;}
	.top_sub_menu ul{text-align: left;}
	.top_sub_menu li a{padding: 2px 0; margin: 0 10px 0 0; font-size: 12px; }

	/* °Ë»öÆû */
	.search_wrap .search_inner input{top: -16px; height: 50px; line-height: 48px; right: -15px; padding-right: 44px;}
	.search_wrap .search_btn img{width: 16px;}

	/* Æ÷Æ®Æú¸®¿À */ 
	.page-title { margin: 86px 0px 20px; } 
	.page-title h1{font-size: 22px;} 
	.portfolio{margin: 40px auto;} 
	.portfolio .port-item{width: 100%;height: 400px;} 
	.portfolio .port-item .caption-box{padding: 5% 5%;} 
}