@charset "utf-8";
/*图片放大*/
.imgs { display: block; -m oz-transition: .3s ease-in;-webkit-transition: .3s ease-in; -o-transition: .3s ease-in; -ms-transition: .3s ease-in; transition: .3s ease-in; }
a:hover .imgs { transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); -o-transform: scale(1.1, 1.1); }

/*产品*/
.cplc img { transform: scale(1); transition: all .5s; }
.cplc:hover .cp1 dt img { transform: scale(1.3); }

.cplc .cp2 { visibility: hidden; opacity: 0; -webkit-transition: all .6s ease .1s; -o-transition: all .6s ease .1s; transition: all .6s ease .1s;}
.cplc:hover .cp2 { opacity: 1; visibility: visible; }

.cplc .col { width:353px; height:104px; position: absolute; bottom: 0; left: 18px; visibility: hidden; opacity: 0; background: #f77912; -webkit-transition: all .5s ease .1s; -o-transition: all .5s ease .1s; transition: all .5s ease .1s; -webkit-transform: scale3d(0, 1, 0); -ms-transform: scale3d(0, 1, 0); -o-transform: scale3d(0, 1, 0); transform: scale3d(0, 1, 0); -webkit-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; }
.cplc:hover .col { opacity: 1; visibility: visible; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* 标题效果 */
@-webkit-keyframes hang {  50% {
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
}
 100% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
}
}
 @keyframes hang {  50% {
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
}
 100% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
}
}
.hang { display: inline-block; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.hang:hover, .hang:focus, .hang:active { -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hang; animation-name: hang; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }




/*about*/

/* Hover Shadow */
@-webkit-keyframes hover {  50% {
 -webkit-transform: translateY(-3px);
 transform: translateY(-3px);
}
 100% {
 -webkit-transform: translateY(-6px);
 transform: translateY(-6px);
}
}
 @keyframes hover {  50% {
 -webkit-transform: translateY(-3px);
 transform: translateY(-3px);
}
 100% {
 -webkit-transform: translateY(-6px);
 transform: translateY(-6px);
}
}
 @-webkit-keyframes hover-shadow {  0% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
 opacity: .4;
}
 50% {
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
 opacity: 1;
}
 100% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
 opacity: .4;
}
}
 @keyframes hover-shadow {  0% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
 opacity: .4;
}
 50% {
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
 opacity: 1;
}
 100% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
 opacity: .4;
}
}
.hover-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.hover-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */
-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; }
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }
.hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before { opacity: .4; -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hover-shadow; animation-name: hover-shadow; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }


/*优势动画*/
/* more */
.skew-backward { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.skew-backward:hover, .skew-backward:focus, .skew-backward:active { -webkit-transform: skew(10deg); transform: skew(10deg); }
/*******/
.list_ov{ position: relative;}
.list_ov .lista{ display:block; transition: all .6s ease-out; width: 100%; height: 100%;}
.list_ov .listb{ position: absolute; top: 0; opacity: 0; transform: rotateY(180deg); transition: all .6s ease-out; width: 100%; height: 100%; display: block;} 
.list_ov:hover .lista{ transition: all .6s ease-out; transform: rotateY(180deg); opacity: 0;}
.list_ov:hover .listb{ transition: all .6s ease-out; transform: rotateY(360deg); opacity: 1;}

/*工程动画*/
.hyr { width: 386px; height: 243px; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition: color 0.3s; transition: color 0.3s; }
.hyr { background: #eeeeee; overflow: hidden; -webkit-transition: color 0.3s; transition: color 0.3s; }
.hyr::before, .hyr::after { content: ''; position: absolute; width: 386px; height: 243px; bottom: 243px; left: 0; z-index: -1; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.hyr::before { background: #eeeeee; }
.hyr::after { background: #f77912; }
.gcd:hover .hyr a{ color: #fff; }
.gcd:hover .hyr::before, .gcd:hover .hyr::after { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
.gcd:hover .hyr::after { -webkit-transition-delay: 0.175s; transition-delay: 0.175s; }
/*合作图片效果*/
.list_own{ position: relative;}
.list_own img{ display:block; transition: all .6s ease-out; width: 100%; height: 100%;}
.list_own p{ position: absolute; top: 0; opacity: 0; transform: rotateY(180deg); transition: all .6s ease-out; width: 100%; height: 100%; display: block; background:#FFF; text-align:center; line-height:134px; font-size:15px;}
@media screen and (min-width: 768px) {
.list_own:hover img{ transition: all .6s ease-out; transform: rotateY(180deg); opacity: 0;}
.list_own:hover p{ transition: all .6s ease-out; transform: rotateY(360deg); opacity: 1;}
}

/*新闻底部阴影*/
.shadowb { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.shadowb:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; }
.shadowb:hover, .shadowb:focus, .shadowb:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.shadowb:hover:before, .shadowb:focus:before, .shadowb:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); }


/*线条动画*/
.bottoma { position: absolute; z-index: 1; height: 3px; width: 0%; bottom: 0px; left: 0px; }