/* CSS Document */
/*切图：zcy*/
html{ overflow-x:auto; overflow-y:auto;}
*{ padding:0; margin:0;outline:none !important;}
.wow{visibility:inherit !important;}
ul, ol,li{ list-style-type:none;}
body, button, input, select, textarea{  font-family: 'Microsoft yahei'; font-size:12px;}
img{border:0; max-width:100%;}
li { line-height:normal; }
/*********************************************************************重置***********************************************************************/

/*首页*/
.tit_1{ width:100%; float:left; text-align:center; position:relative;}
.tit_1 span{ display:inline-block; *zoom:1; *display:inline; width:310px; line-height:50px; font-size:36px; padding-bottom:32px; border-bottom:solid 1px #cbaf61;}
.tit_1_s span{ font-size:30px;}
.tit_1 svg{ display:block; background:url(../image/zico1.png) no-repeat center center; width:31px; height:27px; position:absolute; left:50%; bottom:-15px; margin-left:-15px; background-size:contain;}
.ul_1{ width:100%; float:left; text-align:center; margin-top:80px;}
.ul_1 li{ display:inline-block; *zoom:1; *display:inline; vertical-align:top; width:177px; margin:0 55px;}
.ul_1 li .imgbox{ width:177px; height:205px; position:relative; background:url(../image/zico2.png) no-repeat center center; background-size:contain;}
.ul_1 li:hover .imgbox{animation:mymoved 250s infinite;-webkit-animation:mymoved 250s infinite;}
@keyframes mymoved
{
from { transform:rotate(0deg);}
to {transform:rotate(3600deg);}
}
@-moz-keyframes mymoved /* Firefox */
{
from { transform:rotate(0deg);}
to {transform:rotate(3600deg);}
}
@-o-keyframes mymoved /* Opera */
{
from { transform:rotate(0deg);}
to {transform:rotate(3600deg);}
}
@-webkit-keyframes mymoved /*Safari and Chrome*/
{
from { transform:rotate(0deg);}
to {transform:rotate(3600deg);}
}
.ul_1 li .imgbox .bian{ background:url(../image/zico3.png) no-repeat center center; width:176px; height:153px; position:absolute; top:0; left:0; background-size:contain;
-webkit-transition: all 0.3s ease-out 0s; 
-moz-transition: all 0.3s ease-out 0s; 
-o-transition: all 0.3s ease-out 0s; 
transition: all 0.3s ease-out 0s;}
.ul_1 li .imgbox .img{position:absolute; left:0; top:0;overflow:hidden;
-webkit-transition: all 0.3s ease-out 0s; 
-moz-transition: all 0.3s ease-out 0s; 
-o-transition: all 0.3s ease-out 0s; 
transition: all 0.3s ease-out 0s;}
.ul_1 li h5{ width:100%; float:left; margin-top:24px; font-size:20px; color:black; line-height:28px;}
.ul_1 li:hover h5{ color:#cbaf61;}
.ul_1 li.l1 .imgbox .img{ width:176px; height:153px; top:20px;}
.ul_1 li.l2 .imgbox .bian{ top:13px; left:auto; right:0; width:152px; height:175px; background-image:url(../image/zico3_1.png);}
.ul_1 li.l2 .imgbox .img{ width:152px; height:175px; top:13px;}
.ul_1 li.l3 .imgbox .bian{ top:13px; width:152px; height:175px; background-image:url(../image/zico3_1.png); transform:rotate(180deg); left:0;}
.ul_1 li.l3 .imgbox .img{ top:13px; left:auto; right:0;}
.ul_1 li.l4 .imgbox .img{ width:175px; height:152px; top:31px;}
.ul_1 li.l4 .imgbox .bian{ transform:rotate(180deg); top:auto; bottom:0;}
.ul_1 li.l1:hover .imgbox .bian{animation:mymove 80s infinite;-webkit-animation:mymove 80s infinite;
transform: scale(1.3,1.3);
	-ms-transform: scale(1.3,1.3);	
-webkit-transform: scale(1.3,1.3);
	 -o-transform: scale(1.3,1.3);	
   -moz-transform: scale(1.3,1.3);}
@keyframes mymove
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
@-moz-keyframes mymove /* Firefox */
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
@-o-keyframes mymove /* Opera */
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
.ul_1 li.l1:hover .imgbox .img{ top:0;}
.ul_1 li.l2:hover .imgbox .bian{animation:mymovea 80s infinite;-webkit-animation:mymovea 80s infinite;
transform: scale(1.3,1.3);
	-ms-transform: scale(1.3,1.3);	
-webkit-transform: scale(1.3,1.3);
	 -o-transform: scale(1.3,1.3);	
   -moz-transform: scale(1.3,1.3);}
@keyframes mymovea
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
@-moz-keyframes mymovea /* Firefox */
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
@-o-keyframes mymovea /* Opera */
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
@-webkit-keyframes mymovea /*Safari and Chrome*/
{
from { transform:rotate(0deg);}
to {transform:rotate(-3600deg);}
}
.ul_1 li.l2:hover .imgbox .img{ left:23px;}
.ul_1 li.l3:hover .imgbox .bian{animation:mymoveb 80s infinite;-webkit-animation:mymoveb 80s infinite;
transform: scale(1.3,1.3);
	-ms-transform: scale(1.3,1.3);	
-webkit-transform: scale(1.3,1.3);
	 -o-transform: scale(1.3,1.3);	
   -moz-transform: scale(1.3,1.3);}
@keyframes mymoveb
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
@-moz-keyframes mymoveb /* Firefox */
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
@-o-keyframes mymoveb /* Opera */
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
@-webkit-keyframes mymoveb /*Safari and Chrome*/
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
.ul_1 li.l3:hover .imgbox .img{ right:23px;}
.ul_1 li.l4:hover .imgbox .bian{animation:mymovec 80s infinite;-webkit-animation:mymovec 80s infinite;
transform: scale(1.3,1.3);
	-ms-transform: scale(1.3,1.3);	
-webkit-transform: scale(1.3,1.3);
	 -o-transform: scale(1.3,1.3);	
   -moz-transform: scale(1.3,1.3);}
@keyframes mymovec
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
@-moz-keyframes mymovec /* Firefox */
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
@-o-keyframes mymovec /* Opera */
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
@-webkit-keyframes mymovec /*Safari and Chrome*/
{
from { transform:rotate(-180deg);}
to {transform:rotate(-3600deg);}
}
.ul_1 li.l4:hover .imgbox .img{ top:50px;}
@media screen and (max-width: 1199px) {
.ul_1 li{ margin:0 25px;}
}
@media screen and (max-width: 991px) {
.tit_1 span{ width:260px; line-height:40px; font-size:30px; padding-bottom:26px;}
.tit_1_s span{ font-size:24px;}
.tit_1 svg{ width:26px; height:20px; bottom:-10px; margin-left:-13px;}
.ul_1{ margin-top:50px;}
.ul_1 li .imgbox{ width:130px; height:150px;}
.ul_1 li{ margin:0 15px; width:140px;}
.ul_1 li .imgbox .bian{ width:130px; height:110px;}
.ul_1 li h5{ margin-top:18px; font-size:16px; line-height:22px;}
.ul_1 li.l1 .imgbox .img{ width:130px; height:110px; top:15px;}
.ul_1 li.l2 .imgbox .bian{ top:12px; width:110px; height:130px;}
.ul_1 li.l2 .imgbox .img,.ul_1 li.l3 .imgbox .img{ width:110px; height:130px; top:14px;}
.ul_1 li.l3 .imgbox .bian{ top:12px; width:110px; height:130px;}
.ul_1 li.l4 .imgbox .img{ width:130px; height:112px; top:18px;}
.ul_1 li.l4:hover .imgbox .img{ top:36px;}
}
@media screen and (max-width: 767px) {
.tit_1 span{ width:200px; line-height:30px; font-size:20px; padding-bottom:20px;}
.tit_1_s span{ font-size:18px;}
.tit_1 svg{ width:20px; height:16px; bottom:-8px; margin-left:-10px;}
.ul_1{ margin-top:30px;}
.ul_1 li{ margin: 5px;}
.ul_1 li h5{ margin-top:10px; font-size:14px; line-height:20px;}
}