.view_common {

   float: left;
   border:  0px solid #f4f4f4;
   overflow: hidden;
   position: relative;
   text-align: center;
   /*
   -webkit-box-shadow: 1px 1px 3px #e6e6e6;
   -moz-box-shadow: 1px 1px 3px #e6e6e6;
   box-shadow: 1px 1px 3px #e6e6e6;
   */
   cursor: default;

   //background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view_common_none{
   border: 0 solid #fff !important;
}

.view_common .mask,.view_common .content {
   width: 100%;
   height: 100%;
   cursor:pointer;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_common img {
   display: block;
   position: relative;
}
.view_common h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 25px;
   padding: 0 0 0px;
   /*
   background: rgba(0, 0, 0, 0.8);
   */
   margin: 20px 0 0 0;
}
.view_common .line{
	width:10px; height:2px; background-color:#fff;margin:15px auto ;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
 position:relative;
}


.view_common p {
  /*font-family: Georgia, serif;
  font-style: italic;*/
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view_common a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   /*
   background:url(/images/common/dview.png) center center no-repeat;
   */
   width:82px;
   height:89px;
   text-indent:-1000px;
   color: #fff;
   text-transform: uppercase;
   /*
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   */
}
.view_common a.info: hover {
   /*
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;*/
}






.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(0,0,0,0.7);
   -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;

   /*
   left:-110px;
   top:-110px;
   transform: rotateY(360deg);
*/

}
.gall_li_cate_1 .view-first:hover .mask,
.gall_li_cate_2 .view-first:hover .mask,
.gall_li_cate_3 .view-first:hover .mask,
.gall_li_cate_4 .view-first:hover .mask,
.gall_li_cate_5 .view-first:hover .mask{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   left:0px;
   top:0px;
     /*
   -webkit-transform:perspective(1px) translateZ(0);
transform::perspective(1px) translateZ(0);
transform: rotateY(  0deg);
*/
}



.gall_li_cate_4 .view-first:hover .mask{background-color: rgba(0,0,0,0.3) }

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes mvv3 {
  from {transform: rotateY(  0deg);  }
  to  {
transform: rotateY(360deg);
  }
}

@keyframes mvv3 {
  from {transform: rotateY(  0deg);  }
  to  {
transform: rotateY(360deg);
  }
}

.view-first h2{
  right: 50%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  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;
}


.gall_li_cate_1 .view-first h2,
.gall_li_cate_2 .view-first h2,
.gall_li_cate_3 .view-first h2,
.gall_li_cate_4 .view-first h2,
.gall_li_cate_5 .view-first h2{
  top: 60%;
 transform: translate(50%,-50%);
}

.view-first h2:after{ content:"";display: block;border-bottom:2px solid #fff;width:25px;position: absolute;left:50%;bottom:-18px;margin-left:-12px; }


.view-first p {
  top: 60%; right: 50%;
  transform: translate(50%,-50%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);


}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   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;
}

.port_tit{
	width:100%; text-align:center; font-size:18px; padding:10px 0 50px; color:#333;
}
.port_tit { }

.view-first a.info { position:absolute; left:50%;top:50%;margin-left:-50px; }

.view-first:hover h2,
.view-first:hover p{
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1; right: 50%;
}
.gall_li_cate_1 .view-first:hover h2,
.gall_li_cate_2 .view-first:hover h2,
.gall_li_cate_3 .view-first:hover h2,
.gall_li_cate_4 .view-first:hover h2,
.gall_li_cate_5 .view-first:hover h2{
  top: 40%;
  transform: translate(50%,-50%);
}

.gall_li_cate_1 .view-first:hover p,
.gall_li_cate_2 .view-first:hover p,
.gall_li_cate_3 .view-first:hover p,
.gall_li_cate_4 .view-first:hover p,
.gall_li_cate_5 .view-first:hover p{

  top:50%;
  transform: translate(50%,-50%);
}


.gall_li_cate_4 .view-first h2{ text-align:left;padding-left:30px;top:120%;font-size: 23px; font-weight:500; }
.gall_li_cate_4 .view-first:hover h2{top:86%;padding:30px;background:rgba(0,0,0,0.5) }
.gall_li_cate_4 .view-first:hover h2:after{
display:block; content:"";
width:25px; height:2px; background-color:#fff;opacity:0.7; position: absolute;left:43px;top:15px; border:0;}

.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   margin-left:-40px;
   -webkit-transform: translate(-10%, -50%);
   -moz-transform: translate(-10%, -50%);
   -o-transform: translate(-10%, -50%);
   -ms-transform: translate(-10%, -50%);
   transform: translate(-10%, -50%);
}
.view-first.detailview:hover h2,
.view-first.detailview:hover p,
.view-first.detailview:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(120%);
   -moz-transform: translateY(120%);
   -o-transform: translateY(120%);
   -ms-transform: translateY(120%);
   transform: translateY(120%);
}

.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}





#typeWriter {
  width: 100%;
  height: 100%;
  color: #33d011;
  background: #222;
  font-family: 'Open Sans', courier;
  padding-left: 30px;
  padding-top: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

#typeWriter span {
  display: block;
  font-size: 20px;
  letter-spacing: 2px;
}

#typeWriter :last-child::after {
  content: '_';
  display: inline-block;
  animation: blink 1s step-end infinite;
}

#typeWriter #init::after { display: none; }

#typeWriter span.typewriter-item::before {
  content: '>';
  display: inline-block;
  margin-right: 10px;
}
 @keyframes
blink {  from, to {
 opacity: 0;
}
 50% {
 opacity: 1;
}
}