@charset 'utf-8';
/* 层级 */
.weiwang-z-index-min{ z-index:-9999999;}
.weiwang-z-index-1{ z-index:1;}
.weiwang-z-index-2{ z-index:2;}
.weiwang-z-index-3{ z-index:3;}
.weiwang-z-index-4{ z-index:4;}
.weiwang-z-index-5{ z-index:5;}
.weiwang-z-index-6{ z-index:6;}
.weiwang-z-index-7{ z-index:7;}
.weiwang-z-index-8{ z-index:8;}
.weiwang-z-index-9{ z-index:9;}
.weiwang-z-index-max{ z-index:9999999;}
/* 间距 */
.weiwang-pt10{padding-top:10px;}
.weiwang-pt15{padding-top:15px;}
.weiwang-pt20{padding-top:20px;}
.weiwang-pt30{padding-top:30px;}
.weiwang-pt40{padding-top:40px;}
.weiwang-pb10{padding-bottom:10px;}
.weiwang-pb15{padding-bottom:15px;}
.weiwang-pb20{padding-bottom:20px;}
.weiwang-pb30{padding-bottom:30px;}
.weiwang-pb40{padding-bottom:40px;}
.weiwang-mt10{ margin-top:10px;}
.weiwang-mt15{ margin-top:15px;}
.weiwang-mt20{ margin-top:20px;}
.weiwang-mt30{ margin-top:30px;}
.weiwang-mt40{ margin-top:40px;}
.weiwang-mb10{ margin-bottom:10px;}
.weiwang-mb15{ margin-bottom:15px;}
.weiwang-mb20{ margin-bottom:20px;}
.weiwang-mb30{ margin-bottom:30px;}
.weiwang-mb40{ margin-bottom:40px;}
/* 清浮动 */
.weiwang-clearfix:after {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}
.weiwang-clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.weiwang-left {
  float: left;
}
.weiwang-right {
  float: right;
}
/* 隐藏 */
.weiwang-hide {
  display: none;
}
/* 显示 */
.weiwang-show{
	display: block !important;
}
/* 英文大写 */
.weiwang-upper {
  text-transform: uppercase;
}
/* 显示一行文字 */
.weiwang-ellipsis {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/* 显示文字2行 */
.weiwang-over-line-2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
/* 遮罩层 */
.mask{display: none; position: fixed; height:100vh; width:100vw;background-color: rgba(0,0,0,.4); z-index:9999;transition:all .5s ease;}
/* 技术支持 */
.weiwang-powerby {
  display: inline-block;
  color: #fff !important;
  padding-left: 20px;
  font-size: 12px;
}
.weiwang-powerby a {
  color: #fff !important;
}
/* 线条 */
.weiwang-line{
	display: block;
	width: 100%;
	height: 1px;
	background-color:#f5f5f5;
}
/*字体样式*/
.weiwang-yahei{font-family: "微软雅黑"}
.weiwang-kaiti{font-family: "SimKai","楷体"}
.weiwang-songti{font-family: "NSimSun","宋体"}
.weiwang-arile{font-family: "Arial";}
.weiwang-tnr{font-family: "Times New Roman"}
.weiwang-en {font-family: Arial, Helvetica, sans-serif;}
/* 字体颜色 */
.weiwang-color-000{
	color: #000;
}
.weiwang-color-fff{
	color: #FFF;
}
.weiwang-color-333{
	color: #333;
}
.weiwang-color-666{
	color: #666;
}
.weiwang-color-999{
	color: #999;
}
/* 背景颜色 */
.weiwang-bg-white{
	background-color: #fff;
}
.weiwang-bg-black{
	background-color: #000;
}
.weiwang-bg-gray{
	background-color: #f8f8f8;
}
/*文字垂直居中*/
.weiwang-vertical-center{height: 100%}
.weiwang-vertical-center:before{content: " ";display: inline-block;height: 100%;width: 0;vertical-align: middle;}
.weiwang-vertical-center p{display: inline-block;vertical-align: middle;max-width: 98%}

/*图片居中*/
.weiwang-widget-box{display: table;table-layout: fixed;width: 100%;}
.weiwang-widget-respimg{display:table-cell!important;text-align:center;vertical-align:middle;font-size: 0;line-height: 0;}
.weiwang-widget-respimg img{width: auto;height: auto;max-height:100%;max-width:100%;}
/* 缩略图图片居中 */
/* 宽图 */
.weiwang-img-cover-1by1{height: 0;width: 100%;padding-bottom: 100%;overflow: hidden;position: relative; }
.weiwang-img-cover-4by3{height: 0;width: 100%;padding-bottom: 75%;overflow: hidden;position: relative; }
.weiwang-img-cover-3by2{height: 0;width: 100%;padding-bottom: 66.667%;overflow: hidden;position: relative; }
.weiwang-img-cover-2by1{height: 0;width: 100%;padding-bottom: 50%;overflow: hidden;position: relative; }
/* 竖图 */
.weiwang-img-cover-1by2{height: 0;width: 100%;padding-bottom: 200%;overflow: hidden;position: relative; }
.weiwang-img-cover-3by4{height: 0;width: 100%;padding-bottom: 133.333333%;overflow: hidden;position: relative; }
.weiwang-img-cover-2by3{height: 0;width: 100%;padding-bottom: 150%;overflow: hidden;position: relative; }
.weiwang-img-cover img{ max-width:100%; max-height:100%; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
/* 居中 */
.weiwang-abs-center{ margin:auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute;}
/* 鼠标放上去文字 */
.weiwang-hover-title{ position: relative;}
.weiwang-hover-title::before{height: 100%;content: attr(title);position: absolute;word-break: keep-all;color: #029741;left: 0; width: 0%;rigit:0; margin:auto;overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.weiwang-hover-title:hover::before{ width:100%;}
.weiwang-hover-title:hover{ color: #fff;}
.red.weiwang-hover-title::before{ color: #e50012;}
.white.weiwang-hover-title::before{ color: #ffffff;}
.green.weiwang-hover-title::before{ color: #029741;}
/* 箭头 */
.weiwang-arrow-down{
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 7px solid #000000;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;}
.weiwang-arrow-left{
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #000;
}
.weiwang-arrow-right{
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #000;
}
.weiwang-arrow-top{
  width: 0;
  height: 0;
  display: inline-block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 7px solid #000;
} 
/* 导航下划线左右展开特效 */
.weiwang-a-underline > li > a {
	display: block;
	position: relative;
}
.weiwang-a-underline > li.on > a:after{
	width: 100%;
	left: 0;
}
.weiwang-a-underline > li > a:after {
  content: '';

  width: 0;

  height: 2px;

  background: #932024;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transition: all 0.8s;

  transition: all 0.8s;
}
/* 还可以用放到缩小处理width: 100%;transform: scaleX(0);transform: scaleX(1); */
.weiwang-a-underline > li > a:hover:after {
  /*动画效果是从中间向左延伸至50%的宽度*/

  left: 0%;

  width: 100%;
}
/* 鼠标放上去下划线左右展开特效 */
.weiwang-underline{
	position: relative;
}
.weiwang-underline::after {
  content: '';

  width: 0;

  height: 2px;

  background: #932024;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transition: all 0.8s;

  transition: all 0.8s;
}
/* 还可以用放到缩小处理width: 100%;transform: scaleX(0);transform: scaleX(1); */
.weiwang-underline:hover::after {
  /*动画效果是从中间向左延伸至50%的宽度*/

  left: 0%;

  width: 100%;
}

/* ==========================================通用特效======================================== */
/* 横线动画 */
.weiwang-animation-line{ height: 2px; width:100px; overflow: hidden;position: relative;}
.weiwang-animation-line::before{content: ''; display: block; background-color: rgba(255,255,255,.5); height:100%; width:100%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.weiwang-animation-line::after{ content: ''; display: block; position: absolute; width:100%; right:-100%; top: 0; bottom: 0;background-color: #ffffff;-webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s linear 0; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -ms-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s;}

.weiwang-animation-line-box:hover .weiwang-line::before{ width:0;}
.weiwang-animation-line-box:hover .weiwang-line::after{ right:0;}
.weiwang-animation-line-box:hover img{-webkit-transform: rotateX(1deg); -moz-transform: rotateX(1deg); -ms-transform: rotateX(1deg); -o-transform: rotateX(1deg); transform: rotateX(1deg); -webkit-box-shadow: 0px 5px 5px 0px rgb(192, 192, 192);-moz-box-shadow: 0px 5px 5px 0px rgb(192, 192, 192);    ; box-shadow: 0px 5px 5px 0px rgb(192, 192, 192); }


/* icon橡皮筋动画 */
.weiwang-animation-rubber:hover{ animation: rubberBand 1s 1 linear}
/* 背景缺右下角 */
.weiwang-bg-missing{
    background: -webkit-linear-gradient(135deg, transparent 20px, #fff 0);
    background: -moz- oldlinear-gradient(135deg, transparent 20px, #fff 0);
    background: -o-linear-gradient(135deg, transparent 20px, #fff 0);
    background: linear-gradient(-45deg, transparent 20px, #fff 0);
}

/* ==========================================按钮特效======================================== */
/* 闪电按钮 */
.weiwang-animation-flash-btn{display: inline-block;padding: 15px; background-color: #80c269; color: #ffffff;text-align: center;font-size: 16px; position: relative; overflow: hidden;border-radius: 5px;}
.weiwang-animation-flash-btn::before{ content: ''; position: absolute; width:100%; height:300%;background-color: rgba(255,255,255,.16); left: -50%;margin: auto;;bottom: 0%; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); -webkit-transition: transform .3s; -moz-transition: transform .3s; -ms-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s;}
.weiwang-animation-flash-btn span{ position: relative; z-index:2;}
.weiwang-animation-flash-btn:hover{ background-color: #029741;}
.weiwang-animation-flash-btn:hover::before{transform: rotate(30deg) translateX(100%);}
.weiwang-animation-flash-btn:hover + .btn.ask-btn{ background-color: #80c269;}
/* 滑动按钮 */
.weiwang-animation-slide-btn{ position: relative; z-index: 2; overflow: hidden; background: none !important;} 
.weiwang-animation-slide-btn:before{ content: ""; display: block; width: 0%; height: 100%;  position: absolute; top: 0; left: 0; z-index: -1; background: #1A9FCA;
	transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}
.weiwang-animation-slide-btn:before{background: #1A9FCA;}
.weiwang-animation-slide-btn:hover::before{
	width: 100%;
}
/* 左右滑动按钮 */
.weiwang-animation-out-slide-btn { overflow: hidden; position: relative; width: 300px;height: 50px;}
.weiwang-animation-out-slide-btn:after { content: ''; position: absolute; left: 50%; top: 50%; width: 200%; height: 0%; -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; -moz-transition: all 0.35s ease; transition: all 0.35s ease; background: #176bab; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); -o-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); z-index: -1;}
.weiwang-animation-out-slide-btn:hover {color: #fff; }
.weiwang-animation-out-slide-btn:hover:after {height: 500%;}
/* ==========================================文字特效======================================== */
/* 渐变文字 */
.weiwang-text-shadow{
	text-shadow: 2px 0 2px rgb(0 0 0 / 30%);
}
.weiwang-gradient-text{
	color: #e6e6e6;
	text-transform: uppercase;
	opacity: .7;
	background-image: -webkit-linear-gradient(bottom, #e8e8e8, #adadad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* 镂空文字 */
.weiwang-text-stroke{
	-webkit-text-stroke:1px #ff9c00;
	color: transparent;
}
/* 标题下划线 */
.weiwang-animation-title-underline{
	position: relative;
	display: inline-block;
}

.weiwang-animation-title-underline::after{ content: ''; display: block; height:1px;background-color: CurrentColor; width:100px; margin:10px auto 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.weiwang-animation-title-underline::before{content: ''; display: block; height:1px;background-color: CurrentColor; width:0; margin:10px auto 0; position: absolute; margin:auto; left: 0; right: 0; bottom: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.weiwang-animation-title-underline:hover::before{ width:50px;}
.weiwang-animation-title-underline:hover::after{ width:0;}

/* 标题左右线条 */
.weiwang-animation-title-sidesline:before {
	content: '';
	display: inline-block;
	width: 156px;
	height: 1px;
	vertical-align: middle;
	background: -webkit-linear-gradient(left transparent, #c6c6c6);
	/* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(right, transparent, #c6c6c6);
	/* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(right, transparent, #c6c6c6);
	/* Firefox 3.6 - 15 */
	background: linear-gradient(to right, transparent, #c6c6c6);
	margin-right: 25px
		/* 标准的语法 */
}

.weiwang-animation-title-sidesline:after {
	content: '';
	display: inline-block;
	width: 156px;
	height: 1px;
	vertical-align: middle;
	background: -webkit-linear-gradient(right transparent, #c6c6c6);
	/* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(left, transparent, #c6c6c6);
	/* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(left, transparent, #c6c6c6);
	/* Firefox 3.6 - 15 */
	background: linear-gradient(to left, transparent, #c6c6c6);
	margin-left: 25px
		/* 标准的语法 */
}
/* 超链接文字下划线 */
.weiwang-animation-link-underline a{
	position: relative;
}
.weiwang-animation-link-underline a::after{ z-index:1;content: ''; position: absolute; left: 0; bottom: 0; display: block; height:8px; background-color: rgba(2, 151, 65, .2);width:100%; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0);
	transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center;}
.weiwang-animation-link-underline a:hover::after{ -webkit-transform-origin: left center;transform-origin: left center;  -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);}

/* 发光文字 */
.weiwang-animation-flash-text{		
color: #029741;	
text-transform: uppercase;	
font-weight:bold;
font-style: italic;
background: -webkit-linear-gradient(right, #029741, #18b55a, #029741, #18b55a, #007532);
	
-webkit-text-fill-color: transparent;
	
-webkit-background-clip: text;
	
background-size: 200% 100%;
	
-webkit-animation: text_animation 2s infinite;
	
animation: text_animation 2s infinite;
	
}

@keyframes text_animation {
	0% {background-position: 0 0}
	100% {background-position: -100% 0}
}
@-webkit-keyframes text_animation {
	0% {background-position: 0 0}
	100% {background-position: -100% 0}
}
/* ==========================================hover======================================= */
/* 转动边框 */
.weiwang-animation-rotate-border::before {
    top: 0;
    left: 0;
}
.weiwang-animation-rotate-border::before, .weiwang-animation-rotate-border::after {
    border: 3px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    box-sizing:border-box;
    z-index:9;
}

.weiwang-animation-rotate-border {
    -webkit-transition: color 0.25s;
    transition: color 0.25s;
    position: relative;
}

.weiwang-animation-rotate-border:hover::before,
.weiwang-animation-rotate-border:hover::after {
    width: 100%;
    height: 100%;
}
.weiwang-animation-rotate-border:hover::before {
    border-top-color: #eb3719;
    border-right-color: #eb3719;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s
}

.weiwang-animation-rotate-border:hover::after {
    border-bottom-color: #eb3719;
    border-left-color: #eb3719;
    -webkit-transition: border-color 0s ease-out 0.5s, width 10s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s
}
.weiwang-animation-rotate-border::after {
    bottom: 0;
    right: 0;
}
/* 图片渐进方框线条 */
.weiwang-animation-step-line{display: block;position: relative;}
.weiwang-animation-step-line::before,
.weiwang-animation-step-line::after {
  content: '';
  left: 4%;
  top: 4%;
  -webkit-transform-origin: center;
  transform-origin: center;
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 92%;
  height: 92%;
  z-index: 2;
}

.weiwang-animation-step-line::before {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}

.weiwang-animation-step-line::after {
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

.weiwang-animation-step-line:hover::before,
.weiwang-animation-step-line:hover::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
}
/* 图片方框线条 */
.weiwang-animation-box-line{display: block;position: relative;}
.weiwang-animation-box-line:after{content: '';display: block;width: 100%;height: 100%;background: rgba(52,56,65,.2);position: absolute;top: 0;left: 0;box-sizing: border-box;border: 1px solid rgba(250,250,250,.6);transform: scale(0.9);transition: 0.4s ease-out;}
.weiwang-animation-box-line:before{content: '';display: block;width: 100%;height: 100%;background: rgba(252,207,28,.2);position: absolute;top: 0;left: 0;opacity: 0;transition: 0.4s ease-out;box-sizing: border-box;border: 1px solid rgba(250,250,250,.6);z-index: 1;}
.weiwang-animation-box-line:hover::after{transform: scale(1.1);opacity: 0;}
.weiwang-animation-box-line:hover::before{transform: scale(0.9);opacity: 1;}
/* 产品容器下划线滑动 */
.weiwang-animation-box-slide-line{-webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;position: relative;}
.weiwang-animation-box-slide-line:after{
	content:'';
	display: block;width: 0;
	height: 2px;
	background: #bf6d20;
	position: absolute;
	left: 0;
	bottom: 0;
	-webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;
}
.weiwang-animation-box-slide-line:hover:after{
	width: 100%;
}
/* 产品容器上浮阴影 */
.weiwang-animation-box-shadow{-webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;}
.weiwang-animation-box-shadow:hover{ -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-10px); -webkit-box-shadow: 0 10px 15px 0 rgba(0,0,0,.15); -moz-box-shadow: 0 10px 15px 0 rgba(0,0,0,.15); box-shadow: 0 10px 15px 0 rgba(0,0,0,.15);}
/* 产品容器闪电 */
.weiwang-animation-box-flash{ overflow: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: relative;}
.weiwang-animation-box-flash::after{opacity:.2; z-index:2; content: ''; position: absolute; width:1%; height:100%;background-color: #fff; top: 0;border-radius: 100%;-webkit-box-shadow: 0 0 10px 15px #fff; -moz-box-shadow: 0 0 10px 15px #fff; box-shadow: 0 0 10px 15px #fff ; -webkit-transform: skewX(-10deg) translateX(-800px); -moz-transform: skewX(-10deg) translateX(-800px); -ms-transform: skewX(-10deg) translateX(-800px); -o-transform: skewX(-10deg) translateX(-800px); transform: skewX(-10deg) translateX(-800px); -webkit-transition: transform .1s; -moz-transition: transform .1s; -ms-transition: transform .1s; -o-transition: transform .1s; transition: transform 1s;}
.weiwang-animation-box-flash:not(:hover)::after{-webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; transition: all 0s;}
.weiwang-animation-box-flash:hover::after{ -webkit-transform: skewX(-10deg) translateX(800px); -moz-transform: skewX(-10deg) translateX(800px); -ms-transform: skewX(-10deg) translateX(800px); -o-transform: skewX(-10deg) translateX(800px); transform: skewX(-10deg) translateX(800px); }
/* 产品幕布动画 */
.weiwang-animation-box-screen{
	position: relative;
	overflow: hidden;
}
.weiwang-animation-box-screen::after{-webkit-transition: transform .3s, left .5s;-moz-transition: transform .3s, left .5s;-ms-transition: transform .3s, left .5s;-o-transition: transform .3s, left .5s;transition: transform .3s, width .5s,left .4s .1s linear;position: absolute;content: '';display: block;width: 60%;height: 110%;background-color: rgba(255, 255, 255, 0.51);bottom: 0;left: -15px;-webkit-transform: skewX(50deg);-moz-transform: skewX(50deg);-ms-transform: skewX(50deg);-o-transform: skewX(50deg);transform: skewX(50deg);z-index: 0;}
.weiwang-animation-box-screen:hover{ -webkit-box-shadow: 0 0 19px rgba(127, 127, 127, 0.2); -moz-box-shadow: 0 0 19px rgba(127, 127, 127, 0.2)    ; box-shadow: 0 0 19px rgba(127, 127, 127, 0.2);}
.weiwang-animation-box-screen:hover::after{width:100%; left: -30%;height: 150%;}
/* 鼠标滑过容器内图片放大离开缩小 */
.weiwang-img-scale {
  /* overflow: hidden; */
}
.weiwang-img-scale img {
  -webkit-transition: all 2s ease 0s;
  transition: all 2s ease 0s;
}
.weiwang-img-scale:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2); /* 放大1.2倍 */
}
/* 产品图片黑白变彩色 */
.weiwang-animation-box-filter img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	transition: all .5s ease 0s;
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
}

.weiwang-animation-box-filter:hover img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
}

/* ============================================基础动画============================================== */
/* 光圈闪动 */
/* 示范：animation: 1.2s linear infinite weiwang-animation-prop; */
@-webkit-keyframes weiwang-animation-prop{
from{box-shadow:0 0 0 0 rgba(255,255,255,.4);opacity:1;filter:alpha(opacity=10)}
to{box-shadow:0 0 0 25px rgba(255,255,255,.4);opacity:0;filter:alpha(opacity=0)}
}
@-o-keyframes weiwang-animation-prop{
from{box-shadow:0 0 0 0 rgba(255,255,255,.4);opacity:1;filter:alpha(opacity=10)}
to{box-shadow:0 0 0 25px rgba(255,255,255,.4);opacity:0;filter:alpha(opacity=0)}
}
@-moz-keyframes weiwang-animation-prop{
from{box-shadow:0 0 0 0 rgba(255,255,255,.4);opacity:1;filter:alpha(opacity=10)}
to{box-shadow:0 0 0 25px rgba(255,255,255,.4);opacity:0;filter:alpha(opacity=0)}
}
@-ms-keyframes weiwang-animation-prop{
from{box-shadow:0 0 0 0 rgba(255,255,255,.4);opacity:1;filter:alpha(opacity=10)}
to{box-shadow:0 0 0 25px rgba(255,255,255,.4);opacity:0;filter:alpha(opacity=0)}
}
@keyframes weiwang-animation-prop{
from{box-shadow:0 0 0 0 rgba(255,255,255,.4);opacity:1;filter:alpha(opacity=10)}
to{box-shadow:0 0 0 25px rgba(255,255,255,.4);opacity:0;filter:alpha(opacity=0)}
}
/* 发光的圈 */
@keyframes weiwang-animation-play-circle {
    from {
        transform: scale(1);
        filter: opacity(0.8);
    }
    to {
        transform: scale(1.4);
        filter: opacity(0);
    }
}
/* 上下跳动 */
@keyframes weiwang-animation-bounce{
0%,100%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}
}
@-moz-keyframes weiwang-animation-bounce{
0%,100%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}
}
@-ms-keyframes weiwang-animation-bounce{
0%,100%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}
}
@-webkit-keyframes weiwang-animation-bounce{
0%,100%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}
}
@-o-keyframes weiwang-animation-bounce{
0%,100%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}
}

/* 由远到近，由大到小 */
@-webkit-keyframes weiwang-animation-text-one-by-one-from-bottom-matrix {
    0% {
        -webkit-transform: matrix(2,0,0,2,0,100);transform: matrix(2,0,0,2,0,100);
        opacity: 0
    }
    50% {
        -webkit-transform: matrix(1,0,0,1,0,0);transform: matrix(1,0,0,1,0,0);
        opacity: 1
    }
    100% {
        -webkit-transform: matrix(1,0,0,1,0,0);transform: matrix(1,0,0,1,0,0);
        opacity: 1
    }
}

@-moz-keyframes weiwang-animation-text-one-by-one-from-bottom-matrix {
    0% {
        -moz-transform: matrix(2,0,0,2,0,100);transform: matrix(2,0,0,2,0,100);
        opacity: 0
    }
    50% {
        -moz-transform: matrix(1,0,0,1,0,0);transform: matrix(1,0,0,1,0,0);
        opacity: 1
    }
    100% {
        -moz-transform: matrix(1,0,0,1,0,0);transform: matrix(1,0,0,1,0,0);
        opacity: 1
    }
}

@-o-keyframes weiwang-animation-text-one-by-one-from-bottom-matrix {
    0% {
        -o-transform: matrix(2,0,0,2,0,100);transform: matrix(2,0,0,2,0,100);
        opacity: 0
    }
    50% {
        -o-transform: matrix(1,0,0,1,0,0);transform: matrix(1,0,0,1,0,0);
        opacity: 1
    }
    100% {
        -o-transform: matrix(1,0,0,1,0,0);transform: matrix(1,0,0,1,0,0);
        opacity: 1
    }
}

@keyframes weiwang-animation-text-one-by-one-from-bottom-matrix {
    0% {
        transform: matrix(2,0,0,2,0,100);font-family: 'Montserrat',sans-serif;
        opacity: 0
    }
    50% {
        transform: matrix(1,0,0,1,0,0);font-family: 'Montserrat',sans-serif;
        opacity: 1
    }
    100% {
        transform: matrix(1,0,0,1,0,0);font-family: 'Montserrat',sans-serif;
        opacity: 1
    }
}

/* 电话摆动 */
@keyframes weiwang-animation-swing {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0)
    }

    25% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg)
    }

    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg)
    }
}

@-webkit-keyframes weiwang-animation-swing {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0)
    }

    25% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg)
    }

    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg)
    }
}

@-moz-keyframes weiwang-animation-swing {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0)
    }

    25% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg)
    }

    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg)
    }
}

@-o-keyframes weiwang-animation-swing {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0)
    }

    25% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg)
    }

    100% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg)
    }
}
/* 大图由远到近由近到远 */
@keyframes weiwang-animation-imgScale { 
	0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
	50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); }
	100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }
/* 鼠标上下动 */
@keyframes scroll {
        0% { 
            transform: translate(0,-10px); 
            opacity: 0;
        }
        100% { 
            transform: translate(0,5px); 
            opacity: 1;
        }
    }
/* 发光闪动的边框 */
/* 示例：animation: weiwang-animation-pulse 0.75s infinite; */
@keyframes weiwang-animation-pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(189,16,224, 0.8);
    box-shadow: 0 0 0 0 rgba(189,16,224, 0.8);
  }
  70% {
      -moz-box-shadow: 0 0 0 5px rgba(189,16,224, 0.3);
      box-shadow: 0 0 0 5px rgba(189,16,224, 0.3);
  }
  100% {
      -moz-box-shadow: 0 0 0 10px rgba(189,16,224, 0);
      box-shadow: 0 0 0 10px rgba(189,16,224, 0);
  }
}
/* 不规则透明图片闪闪发光 */
/* 示例：animation: weiwang-animation-slowpulse 1s infinite; */
@keyframes weiwang-animation-slowpulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
  }
  60% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 1)) drop-shadow(0 0 10px rgba(125,23,154,36, 1)) drop-shadow(0 0 5px rgba(200,35,247, 1));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 1)) drop-shadow(0 0 10px rgba(125,23,154, 1)) drop-shadow(0 0 5px rgba(200,35,247, 1));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
  }
}