@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); }

/*title*/
.link--yaku {overflow: hidden;}
.link--yaku:hover::before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.link--yaku span { display: inline-block; position: relative; -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg); transform: perspective(1000px) rotate3d(0, 1, 0, 0deg); -webkit-transition: -webkit-transform 0.5s, color 0.5s; transition: transform 0.5s, color 0.5s; }
.link--yaku:hover span { color: #003399; -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 360deg); transform: perspective(1000px) rotate3d(0, 1, 0, 360deg); }
.link--yaku span:nth-child(4), .link--yaku:hover span:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; }
.link--yaku span:nth-child(3), .link--yaku:hover span:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.link--yaku span:nth-child(2), .link--yaku:hover span:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.link--yaku span:first-child, .link--yaku:hover span:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }

/*产品类别*/

.link--kumya { overflow: hidden; }
.link--kumya:hover { border:1px #003399 solid; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #003399; }
.link--kumya::after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; right: 0; z-index: -1; -webkit-transform: translate3d(101%, 0, 0); transform: translate3d(101%, 0, 0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
.link--kumya:hover::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.link--kumya span { display: block; position: relative; }
.link--kumya span::before { content: attr(data-letters); position: absolute; color: #fff; left: 0; overflow: hidden; white-space: nowrap; width: 0%; -webkit-transition: width 0.5s; transition: width 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
.link--kumya:hover span::before { width: 100%; }

/*产品展示*/

.rotate { 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); }
.rotate:hover, .rotate:focus, .rotate:active { -webkit-transform: rotate(4deg); transform: rotate(4deg); }

/*优势*/
/* 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; }

/*案例*/
/* Glow */
.glow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.glow:hover, .glow:focus, .glow:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

/*about*/
/* Curl Bottom Right */
.curl-bottom-right { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background:#cccccc; /* IE9 */
background: linear-gradient(315deg, #003399 45%, #cccccc 50%, #003399 56%, #cccccc 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; }
.curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before { width: 25px; height: 25px; }