:root {
  --var-active: #59a3ff;
  --var-bg: #f9f9f9;
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;
}
/**单线**/
.graphic.bline .item{border-bottom: 1px solid #ebebeb;padding:10px 0 10px 0;}
.graphic.bline .item:first-child{padding-top:0;}
.graphic.bline .item:last-child{border-bottom:0;}
.graphic.bline .item img{line-height: 1px;}
/**常用阴影格式**/
.graphic.round .item{background:var(--bg-color);box-shadow:0 4px 20px 5px rgba(68,93,127,0.1);border-radius:100px;transition:box-shadow .3s ease,transform .3s ease;cursor: pointer;text-align: center;}
.graphic.round .item img{line-height: 1px;}
.graphic.round .item:hover{box-shadow:0 2px 14px 2px rgba(68,93,127,0.2);transform:translateY(-15px);background:var(--bg-active);color:#ffffff;}
.graphic.round .item.on{background:var(--bg-active);color:#ffffff;}
/**常用阴影格式**/
.graphic.shadowUp .item{background:#fff;box-shadow:0 4px 20px 5px rgba(68,93,127,0.1);border-radius:4px;transition:box-shadow .3s ease,transform .3s ease;cursor: pointer;}
.graphic.shadowUp .item img{line-height: 1px;}
.graphic.shadowUp .item:hover{box-shadow:0 2px 14px 2px rgba(68,93,127,0.2);transform:translateY(-15px)}
/**常用阴影格式**/
.graphic.message .item{}
.graphic.message .item .fill{position: relative;width: 100%;padding: 20px;background-color: var(--bg-color);border-radius: 5px;height:200px;}
.graphic.message .item .fill::after{content: '';position: absolute;top:30px;left: -5px; width: 15px;height: 15px;transform: rotate(45deg);background-color: var(--bg-color);}
/**常用阴影格式**/
.graphic.brand .item{background:#fff;box-shadow: 0 4px 20px 5px rgba(68,93,127,0.1);transition: box-shadow .3s ease,transform .3s ease;text-align: center;align-items: center;justify-content: center;display: flex;}
.graphic.brand .item .item-thumb{display: table-cell; vertical-align: middle;}
.graphic.brand .item img{line-height: 1px;max-height: 90px; max-width: 80%;}
.graphic.brand .item:hover{box-shadow:0 2px 14px 2px rgba(68,93,127,0.2);transform:translateY(-2px)}
/**常用阴影格式**/
.graphic.icon .item{background:#fff;text-align: center;}
.graphic.icon .item .item-thumb{line-height:1px;}
.graphic.icon .item .item-thumb img{width:60%;}
.graphic.icon .item .item-title{font-size:20px;margin-top:10px;}
/**常用排序格式**/
.graphic.serial .item{ position: relative; background: #fff; box-shadow: 0 2px 18px 2px rgb(217 223 231 / 60%); border-radius: 8px; transition: box-shadow .65s cubic-bezier(.19,1,.22,1); padding:20px 30px 20px 60px; }
.graphic.serial .item:hover{ box-shadow:0 4px 20px 5px rgba(217,223,231,0.8); transition:box-shadow .3s ease,transform .3s ease; transform:translateY(-5px) }
.graphic.serial .item:before { content: attr(data-index); position: absolute; top: 20px; left: 20px; width: 25px; height: 25px; line-height: 25px; font-size: 16px; color: #fff; text-align: center; background-color:var(--var-active); box-shadow: 0 6px 12px 0 rgb(43 123 255 / 30%); border-radius: 4px; }
.graphic.serial .item .item-title{ font-size:20px; }
.graphic.serial .item .item-desc{ font-size:15px; padding:10px 0; color:#aaaaaa; }

/***卡片滚动**/
.graphic.arrowUp .item{width: 100%;background-color: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);overflow: hidden;-webkit-transition: box-shadow 0.5s;transition: box-shadow 0.5s;}
.graphic.arrowUp .item:hover{box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);}
.graphic.arrowUp .item .item-thumb{height:200px;overflow: hidden;-webkit-transition: height 0.5s;transition: height 0.5s;background:#000;}
.graphic.arrowUp .item:hover .item-thumb{height: 120px;}
.graphic.arrowUp .item img{display: block;opacity: 1;-webkit-transform: scale(1);transform: scale(1);-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, transform 0.5s;transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;width:100%;height:200px;}
.graphic.arrowUp .item:hover .item-thumb img{opacity: 0.6;-webkit-transform: scale(1.2);transform: scale(1.2);}
.graphic.arrowUp .item .item-body{position: relative;height: 80px;padding: 20px;-webkit-transition: height 0.5s;transition: height 0.5s;}
.graphic.arrowUp .item:hover .item-body{height: 150px;}
.graphic.arrowUp .item .item-body .item-tag{position: absolute;top: -25px;left: 0;height: 25px;padding: 0 15px;background-color: coral;color: #fff;text-transform: uppercase;font-size: 11px;line-height: 25px;}
.graphic.arrowUp .item .item-body .item-title{font-size: 22px;font-weight: bold;text-transform: uppercase;padding-bottom:10px;}
.graphic.arrowUp .item .item-body .item-sub{padding: 0 0 10px 0;font-size: 17px;color: coral;}
.graphic.arrowUp .item .item-desc{position: absolute;left: 20px;right: 20px;bottom: 40px;margin: 0;padding: 0;color: #666C74;line-height: 25px;opacity: 0;-webkit-transform: translateY(45px);transform: translateY(45px);-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;transition: opacity 0.3s, -webkit-transform 0.3s;transition: opacity 0.3s, transform 0.3s;transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;-webkit-transition-delay: 0s;transition-delay: 0s;}
.graphic.arrowUp .item:hover .item-desc{opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.graphic.arrowUp .item .item-footer{position: absolute;bottom: 12px;left: 20px;right: 20px;font-size: 13px;color: #A3A9A2;}
.graphic.arrowUp .item .item-footer span + span {padding-left: 10px;}
.graphic.arrowUp .item .item-footer em{margin-left:5px;}
.graphic.maskBox .item{position: relative;}
.graphic.maskBox .item .item-thumb{width:100%;}
.graphic.maskBox .item .item-title{position: absolute;width:100%;}
/**动画1**/
.animate1{overflow: hidden;position: relative;z-index: 1;transition: all .5s;cursor:pointer;}
.animate1:hover{ box-shadow: 3px 3px 5px #999; }
.animate1:before, .animate1:after{content: "";background: radial-gradient(circle at 23% 70%,rgba(255,255,255,0.8),#fff 30%);width: 150%;height: 150%;opacity: 0;transform: rotate(45deg);position: absolute;top:-10.5%;right:-150%;z-index: 1;transition: all 0.35s ease;}
.animate1:after{background: rgba(255,255,255,0.5);width: 65%;height: 65%;right: auto;left: -20%;top: -65%;}
.animate1:hover:before{opacity: 1;right: -85%;}
.animate1:hover:after{opacity: 1;top: -42%;}
.animate1 .item-thumb img{width: 100%;height: auto;transition: all 0.5s ease;}
.animate1:hover .item-thumb img{ transform: scale(1.2); }
.animate1 .item-body{text-align: right;transform: translateY(-50%);position: absolute;top: 50%;right: -100%;z-index: 2;transition: all .5s;}
.animate1:hover .item-body{ right: 5%; }
/**动画2**/
.animate2{box-shadow: 0 0 2px rgba(0, 0, 0, .1);overflow: hidden;position: relative;z-index: 1;}
.animate2:before,.animate2:after,.animate2 .item-body:before,.animate2 .item-body:after{
content: "";width: 100%;height: 50%;background:#000000;opacity: 0.8;transform: translateX(-50%) translateY(0%);position: absolute;top: -50%;left: 50%;z-index: 1;-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);clip-path: polygon(0 0, 50% 100%, 100% 0);transition: all .3s;}
.animate2:after{transform: translateX(-50%) translateY(0%);top: auto;bottom: -50%;z-index: 0;-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
.animate2 .item-body:before{width: 50%;height: 100%;transform: translateX(0%) translateY(-50%);top: 50%;left: auto;right: -50%;-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);clip-path: polygon(100% 0, 0 50%, 100% 100%);}
.animate2 .item-body:after{width: 50%;height: 100%;transform: translateX(0%) translateY(-50%);top: 50%;right: auto;left: -50%;z-index: 0;-webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);clip-path: polygon(0 100%, 100% 50%, 0 0);}
.animate2:hover:before{ top:0; }
.animate2:hover:after{ bottom:0; }
.animate2:hover .item-body:before{ right:0; }
.animate2:hover .item-body:after{ left:0; }
.animate2 .item-thumb img{width: 100%;height: auto;transform: scale(1);transition: all 0.5s;}
.animate2:hover .item-thumb img{ transform: scale(1.5); }
.animate2 .item-body{height: 100%;width: 100%;position: absolute;left: 0;top: 0;}
.animate2 .item-mask{text-align: center;width: 100%;transform: translateX(-50%) translateY(-50%);position: absolute;left: 50%;top: 50%;z-index: 1;}
.animate2 .item-title{color: #fff;font-size: 25px;font-weight: 600;text-transform: uppercase;margin: 0 0 5px;transform: rotateY(360deg) scale(0);transition: all 0.5s;}
.animate2:hover .item-title{ transform: rotateY(0) scale(1); }
.animate2 .item-sub{
color: #fff;font-size: 15px;letter-spacing: 1px;text-transform: capitalize;margin: 0 0 15px;display: block;transform: rotateY(360deg) scale(0);transition: all 0.5s ease 0.25s;}
.animate2:hover .item-sub{ transform: rotateY(0) scale(1); }
.animate2 .item-lists{text-align: center;padding: 0;margin: 0; list-style: none;transform: rotateY(360deg) scale(0);transition: all 0.5s ease 0.45s;}
.animate2:hover .item-lists{ transform: rotateY(0) scale(1); }
.animate2 .item-lists li{display: inline-block;margin: 0 3px;}
.animate2 .item-lists li span{color: #E65100;background-color: #fff;font-size: 18px;line-height: 35px;height: 35px;width: 35px;border-radius: 10px;display: block;transition: all 0.3s;}
/**
.animate2 .item-lists li span:hover{color: #fff;background-color: #E65100;box-shadow: 0 0 10px #000;}**/
/**动画3**/
.animate3{text-align: center;overflow: hidden;position: relative;}
.animate3 .item-thumb img{width: 100%;height: auto;transform: scale(1.6);transition: all 0.3s ease 0s;}
.animate3:hover .item-thumb img{filter: grayscale(100%);transform: scale(1.2);}
.animate3 .item-body{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;transition: all 0.2s ease 0s;}
.animate3:before,.animate3:after,.animate3 .item-body:before,.animate3 .item-body:after{content: "";width: 100%;height: 25%;background: linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),transparent,rgba(0,0,0,0.7),rgba(0,0,0,0.9));z-index: 1;position: absolute;top: 0;left: 0;transition: all 0.3s ease 0s;}
.animate3:before{ transform: translateX(100%); }
.animate3:after{height: 25.1%;top: 25%;transform: translateX(-100%);transition-delay: 0.05s;}
.animate3 .item-body:before{top: 50%;transform: translateX(100%);transition-delay: 0.1s;}
.animate3 .item-body:after{top: 75%;transform: translateX(-100%);transition-delay: 0.15s;}
.animate3:hover:before,.animate3:hover:after,.animate3:hover .item-body:before,.animate3:hover .item-body:after{ transform: translateX(0); }
.animate3 .item-mask{padding: 7px 0;text-align: right;position: absolute;bottom: 10px;right: 20px;z-index: 2;transition: all 0.3s ease 0s;}
.animate3 .item-title{font-size: 22px;font-weight: 700;color: #faac01;letter-spacing: 1px;text-transform: uppercase;margin: 0 0 3px 0;opacity: 0;transform: translateY(150px);transition: all 0.4s ease 0s;}
.animate3 .item-sub{display: inline-block;padding: 0 5px;font-size: 16px;color: #fff;opacity: 0;transform: translateY(50px);transition: all 0.4s ease 0s;}
.animate3:hover .item-title,.animate3:hover .item-sub{opacity: 1;transform: translate(0, 0);}
.animate3 .item-lists{padding: 0;margin: 0;list-style: none;position: absolute;top: -200px;left: 10px;z-index: 2;transition: all 0.4s ease 0.2s;}
.animate3:hover .item-lists{ top: 15px; }
.animate3 .item-lists li span{display: block; width: 40px;height: 40px;line-height: 40px;background: #faac01;font-size: 20px;color: #fff;margin-bottom: 10px;position: relative;transition: all 0.3s ease 0s;}
/**
.animate3 .item-lists li span:hover{text-decoration: none;border-radius: 30%; background: #fff;color: #faac01;}**/
/**动画4**/
.animate4 {position: relative;display: flex;align-items: flex-end;overflow: hidden;width: 100%;text-align: center;color: whitesmoke;background-color: whitesmoke;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);height: 350px;}
.animate4:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 110%;background-size: cover;background-position: 0 0;transition: transform 1050ms cubic-bezier(0.19, 1, 0.22, 1);pointer-events: none;}
.animate4:after {content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 200%;pointer-events: none;background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);transform: translateY(-50%);transition: transform calc(1400ms) cubic-bezier(0.19, 1, 0.22, 1);}
.animate4 .item-thumb{width:100%;position: absolute;top:0;left:0;transition: all .5s ease .1s;}
.animate4:hover .item-thumb{transform: scale(1.3);}
.animate4 .item-thumb img{width:100%;}
.animate4 .item-body {position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;padding: 1rem;transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);z-index: 1;}
.animate4 .item-body > * + * {margin-top: 1rem;}
.animate4 .item-title {font-size: 18px;font-weight: 600;}
.animate4 .item-desc{line-height: 25px;font-size:14px;}
.animate4 .item-btn{cursor: pointer;margin-top: 1.5rem;padding: 0.75rem 1.5rem;font-size: 0.65rem;font-weight: bold;letter-spacing: 0.025rem;text-transform: uppercase;color: white;background-color: black;border: none;}
.animate4 .item-btn:hover {background-color: #0d0d0d;}
.animate4 .item-btn:focus {outline: 1px dashed yellow;outline-offset: 3px;}
.animate4 .item-body {transform: translateY(calc(100% - 4.5rem));}
.animate4 .item-body > *:not(.item-title) {opacity: 0;transform: translateY(1rem);transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);}
.animate4:hover .item-body, .animate4:focus-within .item-body {transform: translateY(0);}
.animate4:hover .item-body > *:not(.item-title), .animate4:focus-within .item-body > *:not(.item-title) {opacity: 1;transform: translateY(0);transition-delay: calc(var(--d) / 8);}
.animate4:focus-within:before, .animate4:focus-within:after, .animate4:focus-within .item-body, .animate4:focus-within .item-body > *:not(.item-title) {transition-duration: 0s;}
/**鼠标经过效果1**/
.mask-hover1{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover1 .item-thumb img{width: 100%;display: block;position: relative;-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;}
.mask-hover1:hover .item-thumb img{-webkit-transform: scale(2.1,2.1);-moz-transform: scale(2.1,2.1);-o-transform: scale(2.1,2.1);-ms-transform: scale(2.1,2.1);transform: scale(2.1,2.1);}
.mask-hover1 .item-body{ width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0; -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;}
.mask-hover1:hover .item-body{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.mask-hover1 .item-title{-webkit-transform: translateY(-100px);-moz-transform: translateY(-100px);-o-transform: translateY(-100px);-ms-transform: translateY(-100px);transform: translateY(-100px);-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;text-transform: uppercase;color: #fff;text-align: center; position: relative;font-size: 17px;padding: 10px; background: rgba(0, 0, 0, 0.8);margin: 20px 0 0 0;}
.mask-hover1:hover .item-title, .mask-hover1:hover .item-desc, .mask-hover1:hover .item-btn{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);}
.mask-hover1 .item-desc{font-size: 14px;position: relative;color: #fff;padding: 10px 20px 20px;line-height:25px;-webkit-transform: translateY(100px);-moz-transform: translateY(100px);-o-transform: translateY(100px);-ms-transform: translateY(100px);transform: translateY(100px);-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;}
.mask-hover1:hover .item-desc{-webkit-transition-delay: 0.1s;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay: 0.1s;}
.mask-hover1 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;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;-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;cursor:pointer;}
.mask-hover1:hover .item-btn{-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay: 0.2s;}


/**鼠标经过效果2**/
.mask-hover2{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover2 .item-thumb img{width: 100%;display: block;position: relative;-webkit-transform: scaleY(1);-moz-transform: scaleY(1);-o-transform: scaleY(1);-ms-transform: scaleY(1);transform: scaleY(1);-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;-ms-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;}
.mask-hover2:hover .item-thumb img{-webkit-transform: scale(10);-moz-transform: scale(10);-o-transform: scale(10);-ms-transform: scale(10);transform: scale(10);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}
.mask-hover2 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;transition: all 0.5s linear;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;background-color: rgba(255, 231, 179, 0.3);}
.mask-hover2:hover .item-body{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.mask-hover2 .item-title{border-bottom: 1px solid rgba(0, 0, 0, 0.3);background: transparent;margin: 20px 40px 0px 40px;-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;transition: all 0.5s linear;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;text-transform: uppercase;text-align: center; position: relative;font-size: 17px;padding: 10px;margin: 20px 0 0 0;}
.mask-hover2:hover .item-title, .mask-hover2:hover .item-desc, .mask-hover2:hover .item-btn{-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.mask-hover2 .item-desc{font-size: 14px;position: relative;padding: 10px 20px 20px;line-height:25px;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;transition: all 0.5s linear;}
.mask-hover2:hover .item-desc{-webkit-transition-delay: 0.1s;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay: 0.1s;}
.mask-hover2 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;transition: all 0.5s linear;cursor:pointer;}
.mask-hover2:hover .item-btn{-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay: 0.2s;}


/**鼠标经过效果3**/
.mask-hover3{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover3 .item-thumb img{width: 100%;display: block;position: relative;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
.mask-hover3 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0; background-color: rgba(0,0,0,0.6);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transform: translate(460px, -100px) rotate(180deg);-moz-transform: translate(460px, -100px) rotate(180deg);-o-transform: translate(460px, -100px) rotate(180deg);-ms-transform: translate(460px, -100px) rotate(180deg);transform: translate(460px, -100px) rotate(180deg);-webkit-transition: all 0.2s 0.4s ease-in-out;-moz-transition: all 0.2s 0.4s ease-in-out;-o-transition: all 0.2s 0.4s ease-in-out;-ms-transition: all 0.2s 0.4s ease-in-out;transition: all 0.2s 0.4s ease-in-out;}
.mask-hover3:hover .item-body{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition-delay: 0s;-moz-transition-delay: 0s;-o-transition-delay: 0s;-ms-transition-delay: 0s;transition-delay: 0s;-webkit-transform: translate(0px, 0px);-moz-transform: translate(0px, 0px);-o-transform: translate(0px, 0px);-ms-transform: translate(0px, 0px);transform: translate(0px, 0px);}
.mask-hover3 .item-title{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(0, 0, 0, 0.8);margin: 20px 0 0 0;-webkit-transform: translateY(-100px);-moz-transform: translateY(-100px);-o-transform: translateY(-100px);-ms-transform: translateY(-100px);transform: translateY(-100px);-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;}
.mask-hover3:hover .item-title{ -webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.5s;transition-delay: 0.5s;}
.mask-hover3 .item-desc{font-size: 14px;position: relative;padding: 10px 20px 20px;line-height:25px;color: #fff;-webkit-transform: translateX(300px) rotate(90deg);-moz-transform: translateX(300px) rotate(90deg);-o-transform: translateX(300px) rotate(90deg);-ms-transform: translateX(300px) rotate(90deg);transform: translateX(300px) rotate(90deg);-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;}
.mask-hover3:hover .item-desc{-webkit-transform: translateX(0px) rotate(0deg);-moz-transform: translateX(0px) rotate(0deg);-o-transform: translateX(0px) rotate(0deg);-ms-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay: 0.4s;}
.mask-hover3 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-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;cursor:pointer;}
.mask-hover3:hover .item-btn{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.3s;-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay: 0.3s;}


/**鼠标经过效果4**/
.mask-hover4{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover4 .item-thumb img{width: 100%;display: block;position: relative;-webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s;-ms-transition: all 0.4s ease-in-out 0.2s;transition: all 0.4s ease-in-out 0.2s;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.mask-hover4:hover .item-thumb img{-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);opacity: 0;-webkit-transition-delay: 0s;-moz-transition-delay: 0s;-o-transition-delay: 0s;-ms-transition-delay: 0s;transition-delay: 0s;}
.mask-hover4 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0; background-color: rgba(0,0,0,0.8);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0) rotate(-180deg);-moz-transform: scale(0) rotate(-180deg);-o-transform: scale(0) rotate(-180deg);-ms-transform: scale(0) rotate(-180deg);transform: scale(0) rotate(-180deg);-webkit-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-o-transition: all 0.4s ease-in;-ms-transition: all 0.4s ease-in;transition: all 0.4s ease-in;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
.mask-hover4:hover .item-body{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100); opacity: 1;-webkit-transform: scale(1) rotate(0deg);-moz-transform: scale(1) rotate(0deg);-o-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay: 0.2s;}
.mask-hover4 .item-title{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(0, 0, 0, 0.8);margin: 20px 0 0 0;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3);background: transparent;margin: 20px 40px 0px 40px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.mask-hover4:hover .item-title, .mask-hover4:hover .item-desc, .mask-hover4:hover .item-btn{-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.mask-hover4:hover .item-title{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.5s;transition-delay: 0.5s;}
.mask-hover4:hover .item-title, .mask-hover4:hover .item-desc, .mask-hover4:hover .item-btn{-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
.mask-hover4 .item-desc{font-size: 14px;position: relative;padding: 10px 20px 20px;line-height:25px;color: #fff; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.mask-hover4:hover .item-desc{-webkit-transform: translateX(0px) rotate(0deg);-moz-transform: translateX(0px) rotate(0deg);-o-transform: translateX(0px) rotate(0deg);-ms-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay: 0.4s;}
.mask-hover4 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.mask-hover4:hover .item-btn{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.5s;transition-delay: 0.5s;}


/**鼠标经过效果5**/
.mask-hover5{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover5 .item-thumb img{width: 100%;display: block;position: relative;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.mask-hover5:hover .item-thumb img{-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%);}
.mask-hover5 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0;background-color: rgba(0,0,0,0.8); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.mask-hover5:hover .item-body{-webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);}
.mask-hover5 .item-title{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(255, 255, 255, 0.5);-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);margin-top:20px;}
.mask-hover5 .item-desc{font-size: 14px;position: relative;color: #fff;padding: 10px 20px 20px;line-height: 25px;}
.mask-hover5:hover .item-desc{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-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;}
.mask-hover5 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.mask-hover5:hover .item-btn{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.5s;transition-delay: 0.5s;}

/**鼠标经过效果6**/
.mask-hover6{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover6 .item-thumb img{width: 100%;display: block;position: relative;-webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s;}
.mask-hover6:hover .item-thumb img{-webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;}
.mask-hover6 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0;background-color: rgba(146,96,91,0.5); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-in 0.4s; -moz-transition: all 0.3s ease-in 0.4s; -o-transition: all 0.3s ease-in 0.4s; -ms-transition: all 0.3s ease-in 0.4s; transition: all 0.3s ease-in 0.4s;}
.mask-hover6:hover .item-body{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;}
.mask-hover6 .item-title{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -webkit-transition: all 0.3s ease-in-out 0.1s; -moz-transition: all 0.3s ease-in-out 0.1s; -o-transition: all 0.3s ease-in-out 0.1s; -ms-transition: all 0.3s ease-in-out 0.1s; transition: all 0.3s ease-in-out 0.1s;}
.mask-hover6:hover .item-title{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; }
.mask-hover6 .item-desc{font-size: 14px;position: relative;color: #fff;padding: 10px 20px 20px;line-height: 25px; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -webkit-transition: all 0.3s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; transition: all 0.3s ease-in-out 0.2s;} .mask-hover6:hover .item-desc{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;}
.mask-hover6 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
/**鼠标经过效果7**/
.mask-hover7{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;} .mask-hover7 .item-thumb img{width: 100%;display: block;position: relative;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .mask-hover7:hover .item-thumb img{-webkit-transform: rotate(720deg) scale(0); -moz-transform: rotate(720deg) scale(0); -o-transform: rotate(720deg) scale(0); -ms-transform: rotate(720deg) scale(0); transform: rotate(720deg) scale(0); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;} .mask-hover7 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0;background-color: rgba(0,0,0,0.8); -webkit-transform: rotate(0deg) scale(1); -moz-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} .mask-hover7:hover .item-body{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .mask-hover7 .item-title{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0;-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -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;} .mask-hover7:hover .item-title{-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s;} .mask-hover7 .item-desc{font-size: 14px;position: relative;color: #fff;padding: 10px 20px 20px;line-height: 25px;-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -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;} .mask-hover7:hover .item-desc{-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s;} .mask-hover7 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -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;} .mask-hover7:hover .item-btn{-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s;}
/**鼠标经过效果8**/
.mask-hover8{overflow: hidden;position: relative;-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;}
.mask-hover8 .item-thumb img{width: 100%;display: block;position: relative;}
.mask-hover8 .item-body{width: 100%;height:100%;position: absolute;overflow: hidden;top: 0;left: 0;background-color: rgba(0,0,0,0.8); top: -200px; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-out 0.5s; -moz-transition: all 0.3s ease-out 0.5s; -o-transition: all 0.3s ease-out 0.5s; -ms-transition: all 0.3s ease-out 0.5s; transition: all 0.3s ease-out 0.5s;}
.mask-hover8:hover .item-body{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.9s linear; -moz-animation: bounceY 0.9s linear; -ms-animation: bounceY 0.9s linear; animation: bounceY 0.9s linear;}
.mask-hover8 .item-title{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;margin-top:20px;background: rgba(0, 0, 0, 0.5);-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out 0.1s; -moz-transition: all 0.2s ease-in-out 0.1s; -o-transition: all 0.2s ease-in-out 0.1s; -ms-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s;}
.mask-hover8:hover .item-title{-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s;}
.mask-hover8 .item-desc{font-size: 14px;position: relative;color: #fff;padding: 10px 20px 20px;line-height: 25px;color: #ffffff; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; transition: all 0.2s ease-in-out 0.2s;}
.mask-hover8:hover .item-desc{-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;}
.mask-hover8 .item-btn{display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out 0.3s; -moz-transition: all 0.2s ease-in-out 0.3s; -o-transition: all 0.2s ease-in-out 0.3s; -ms-transition: all 0.2s ease-in-out 0.3s; transition: all 0.2s ease-in-out 0.3s;}
.mask-hover8:hover .item-btn{-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;}
@keyframes bounceY {
  0% { transform: translateY(-205px);}
  40% { transform: translateY(-100px);}
  65% { transform: translateY(-52px);}
  82% { transform: translateY(-25px);}
  92% { transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
  0% { -moz-transform: translateY(-205px);}
  40% { -moz-transform: translateY(-100px);}
  65% { -moz-transform: translateY(-52px);}
  82% { -moz-transform: translateY(-25px);}
  92% { -moz-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100%
  { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
  0% { -webkit-transform: translateY(-205px);}
  40% { -webkit-transform: translateY(-100px);}
  65% { -webkit-transform: translateY(-52px);}
  82% { -webkit-transform: translateY(-25px);}
  92% { -webkit-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}

/**鼠标经过效果9**/
.mask-hover9 { height: 250px; display:inline; float: left; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6; }
.mask-hover9 .item-thumb img{width: 100%;display: block;position: relative;}
.mask-hover9 .mask,.mask-hover9 .item-body{ width: 100%; height: 250px; position: absolute; overflow: hidden; top: 0; left: 0; }
.mask-hover9 .item-title{ text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; }
.mask-hover9 .mask-1, .mask-hover9 .mask-2 { background-color: rgba(0, 0, 0, 0.5); height: 461px; width: 461px; background: rgba(119, 0, 36, 0.5); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out 0.6s; -moz-transition: all 0.3s ease-in-out 0.6s; -o-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s; }
.mask-hover9 .mask-1 { left: auto; right: 0; -webkit-transform: rotate(56.5deg) translateX(-180px); -moz-transform: rotate(56.5deg) translateX(-180px); -o-transform: rotate(56.5deg) translateX(-180px); -ms-transform: rotate(56.5deg) translateX(-180px); transform: rotate(56.5deg) translateX(-180px); -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; }
.mask-hover9 .mask-2 { top: auto; bottom: 0; -webkit-transform: rotate(56.5deg) translateX(180px); -moz-transform: rotate(56.5deg) translateX(180px); -o-transform: rotate(56.5deg) translateX(180px); -ms-transform: rotate(56.5deg) translateX(180px); transform: rotate(56.5deg) translateX(180px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; }
.mask-hover9 .item-body{ background: rgba(0, 0, 0, 0.9); height: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; width: 100%; overflow: hidden; -webkit-transform: rotate(-33.5deg) translate(-112px, 166px); -moz-transform: rotate(-33.5deg) translate(-112px, 166px); -o-transform: rotate(-33.5deg) translate(-112px, 166px); -ms-transform: rotate(-33.5deg) translate(-112px, 166px); transform: rotate(-33.5deg) translate(-112px, 166px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.4s ease-in-out 0.3s; -moz-transition: all 0.4s ease-in-out 0.3s; -o-transition: all 0.4s ease-in-out 0.3s; transition: all 0.4s ease-in-out 0.3s; }
.mask-hover9 .item-title{ background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.mask-hover9 .item-desc{padding: 10px 20px 20px;line-height: 25px;color: #ffffff;}
.mask-hover9:hover .item-body{ height: 150px; width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); opacity: 0.9; top: 50px; -webkit-transform: rotate(0deg) translate(0, 0); -moz-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0); transform: rotate(0deg) translate(0, 0); }
.mask-hover9:hover .mask-1, .mask-hover9:hover .mask-2 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }
.mask-hover9:hover .mask-1 { -webkit-transform: rotate(56.5deg) translateX(1px); -moz-transform: rotate(56.5deg) translateX(1px); -o-transform: rotate(56.5deg) translateX(1px); -ms-transform: rotate(56.5deg) translateX(1px); transform: rotate(56.5deg) translateX(1px); }
.mask-hover9:hover .mask-2 { -webkit-transform: rotate(56.5deg) translateX(-1px); -moz-transform: rotate(56.5deg) translateX(-1px); -o-transform: rotate(56.5deg) translateX(-1px); -ms-transform: rotate(56.5deg) translateX(-1px); transform: rotate(56.5deg) translateX(-1px); }


/***布局管理**/
.layout .item-thumb img{width:100%;}
.layout .item-title {font-size:20px;}
.layout .item-desc {margin-top:30px;font-size:15px;line-height: 25px;}
.layout .item-desc p{margin-bottom: 20px;}
.layout .item-desc p:last-child{margin-bottom:0;}

/****按钮定义***/
.button{width:225px;height:45px;display:inline-block;text-align:center;line-height:45px;position:relative;overflow:hidden;transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;cursor:pointer;z-index: 100;background-color:var(--bg-color);color:#ffffff;}
.button.arrow{width:225px;font-size:0;background-color:transparent;}
.button.arrow span{display:inline-block;vertical-align:top;font-size:14px;margin-right:20px;color:#2a2a2a;transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease}
.button.arrow:before{content:"";width:205px;height:43px;position:absolute;bottom:0;left:0;z-index:2;transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;}
.button.arrow:after{content:"";width:0%;height:100%;position:absolute;left:-2px;top:0;z-index:-1;transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;}
.button.arrow:hover:before{width:100%;}
.button.arrow:hover:after{width:102%;}
.button.arrow span{color:var(--bg-color);}
.button.arrow::before{border:1px solid var(--bg-color);}
.button.arrow:hover span{color:#fff}
.button.arrow.active:hover span{color:var(--font-color);}
.button.arrow:after{background-color:var(--bg-color);}
/**空心按钮**/
.button.empty{background-color:transparent;width:225px;border:1px solid var(--bg-color);color:var(--bg-color);}
.button.empty span{color:var(--bg-color);}

/**空心按钮**/
.button.round{border-radius: 100px;}

.scaleDraw{
  animation: scaleDraw 1s infinite linear;
}
@keyframes scaleDraw {
  0%{
    transform: scale(1);
  }
  25%{
    transform: scale(1.1);
  }
  50%{
    transform: scale(1);
  }
  75%{
    transform: scale(1.1);
  }
}
.medias{position: absolute; width: 100%; z-index: 100; height: 550px;max-width: 100%;}
.floatWin{width:60px;position: fixed;right:10px;top:40%;text-align: center;padding:10px;z-index: 100;border: 1px solid #ebebeb;border-radius: 5px;line-height: 25px;background: #ffffff;}
.floatWin .item{margin-bottom: 20px;}
.floatWin .item:last-child{margin-bottom: 0;}
.waterfall.span2{
  column-count: 2
}
.waterfall.span3{
  column-count: 3
}
.waterfall .item{
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  box-shadow:0 2px 14px 2px rgba(68,93,127,0.2);
  transform:translateY(-15px);
}
.thumb{
  background-size:100%;
  height:80px;
  background-position:center;
  background-repeat: no-repeat;
}
.navs{}
.navs .item{padding-left:var(--pm);padding-right:var(--pm);cursor: pointer;position: relative;height:50px;}
.navs .item.on{color:var(--on-color);}
.navs .item:hover{background-color: var(--on-color);color:#ffffff;}
.navs .item .childBox{border:1px solid #ebebeb;min-width:200px;background-color: #ffffff;position: absolute;top:50px;left:0;display: none;text-align: left;z-index: 1000;line-height: 25px;}
.navs .item .childBox .childItem{white-space: nowrap;border-bottom: 1px solid #ebebeb;padding:10px;color:#333;cursor: text;}
.navs .item .childBox .childItem:hover{background-color: var(--on-color);color:#ffffff;}
.navs .item .childBox .childItem:last-child{border-bottom: 0;}
.navs .item .childBox .childItem a{display: block;}
.navs .item:hover .childBox{display: block;}
.header.fixed{position:fixed;width:100%;z-index: 10;border-bottom: 1px solid #ebebeb;top:0;}

.search{
  width:100%;
  border:1px solid var(--color);
}

.search .el-input__inner{
  background-color:#FFF;
  border:0;
  border-right:0;
}
.search .el-select{
  min-width:100px;
  background: #FFF;
  border:0;
}
.search .el-input-group__prepend{
  border:0;
}
.search .el-input-group__append{
  border:0;
  background: var(--color);
  border-radius: 0;
}
.search .el-button{
  border:0;
  background: var(--color);
}
.search .el-button .el-icon-search{
  color:#ffffff;
}
.tableBox{
  width:100%;
  border-spacing: 0;
  border: 1px solid #ebebeb;
}
.tableBox td {
  border: 1px solid #ebebeb;
  padding:10px;
}
.tableBox th {
  border: 1px solid #ebebeb;
  padding:15px 10px;
}