2022-07-31 02:14:22 +00:00
/* 阿里巴巴矢量图标库 start */
@font-face {
font-family: "iconfont"; /* Project id 3180711 */
src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
}
.icon {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-del:before {
content: "\e718";
}
.icon-cut:before {
content: "\e609";
}
.icon-add:before {
content: "\e60a";
}
.icon-add-picture05:before {
content: "\e639";
}
.icon-add-picture04:before {
content: "\e636";
}
.icon-add-picture03:before {
content: "\e642";
}
.icon-add-picture02:before {
content: "\e8bc";
}
.icon-add-picture01:before {
content: "\e62c";
}
.icon-sandian:before {
content: "\e769";
}
.icon-nothing-collection:before {
content: "\e610";
}
.icon-nothing-more:before {
content: "\e624";
}
.icon-nothing-data:before {
content: "\e60c";
}
.icon-address-check:before {
content: "\e6c2";
}
.icon-address-unchecked:before {
content: "\e623";
}
.icon-navigate-now:before {
content: "\e640";
}
.icon-send-goods:before {
content: "\e601";
}
.icon-payment:before {
content: "\e602";
}
.icon-finish:before {
content: "\e63f";
}
.icon-take:before {
content: "\e649";
}
.icon-refund:before {
content: "\e613";
}
.icon-customer-black:before {
content: "\ec2e";
}
.icon-customer:before {
content: "\e628";
}
.icon-check:before {
content: "\e61e";
}
.icon-del-white:before {
content: "\e61f";
}
.icon-screen:before {
content: "\e60b";
}
.icon-search:before {
content: "\e653";
}
.icon-caidan-mo:before {
content: "\e73e";
}
.icon-renwu-mo:before {
content: "\e73f";
}
.icon-shop-cart:before {
content: "\e73d";
}
.icon-caidan-active:before {
content: "\e608";
}
.icon-renwu-acitve:before {
content: "\e67c";
}
.icon-home-mo:before {
content: "\e673";
}
.icon-home-active:before {
content: "\e674";
}
.icon-return:before {
content: "\e600";
}
.icon-next:before {
content: "\e60e";
}
/* 阿里巴巴矢量图标库 end */
/* 项目基础样式 start */
/* flex布局 */
.flex {display: flex;}
/* 盒模型 */
.border-box{box-sizing: border-box;}
/* 背景颜色 */
.background-white{background-color: #ffffff;}
.background-orange{background-color: #febf00;}
.background-grey{background-color: #484848;}
/* 圆角 */
.radius10{border-radius: 10rpx;}
.radius15{border-radius: 15rpx;}
.radius20{border-radius: 20rpx;}
.radius25{border-radius: 25rpx;}
.radius30{border-radius: 30rpx;}
.radius35{border-radius: 35rpx;}
.radius40{border-radius: 40rpx;}
.radius100{border-radius: 100%;}
/* 外边距 */
.mar-sxc10{margin: 10rpx auto;}
.mar-sxc15{margin: 15rpx auto;}
.mar-sxc20{margin: 20rpx auto;}
.mar-sxc25{margin: 25rpx auto;}
.mar-sxc30{margin: 30rpx auto;}
.mar-sx10{margin: 10rpx 0;}
.mar-sx15{margin: 15rpx 0;}
.mar-sx20{margin: 20rpx 0;}
.mar-sx25{margin: 25rpx 0;}
.mar-sx30{margin: 30rpx 0;}
.mar-zy10{margin: 0 10rpx;}
.mar-zy15{margin: 0 15rpx;}
.mar-zy20{margin: 0 20rpx;}
.mar-zy25{margin: 0 25rpx;}
.mar-zy30{margin: 0 30rpx;}
.mar-s10{margin-top: 10rpx;}
.mar-s15{margin-top: 15rpx;}
.mar-s20{margin-top: 20rpx;}
.mar-s25{margin-top: 25rpx;}
.mar-s30{margin-top: 30rpx;}
.mar-s35{margin-top: 35rpx;}
.mar-s40{margin-top: 40rpx;}
.mar-s50{margin-top: 50rpx;}
.mar-s60{margin-top: 60rpx;}
.mar-s70{margin-top: 70rpx;}
.mar-s80{margin-top: 80rpx;}
.mar-x10{margin-bottom: 10rpx;}
.mar-x15{margin-bottom: 15rpx;}
.mar-x20{margin-bottom: 20rpx;}
.mar-x25{margin-bottom: 25rpx;}
.mar-x30{margin-bottom: 30rpx;}
.mar-x35{margin-bottom: 35rpx;}
.mar-x40{margin-bottom: 40rpx;}
.mar-x50{margin-bottom: 50rpx;}
.mar-x60{margin-bottom: 60rpx;}
.mar-x70{margin-bottom: 70rpx;}
.mar-x80{margin-bottom: 80rpx;}
/* 内边距 */
.pad-all10{padding: 10rpx;}
.pad-all15{padding: 15rpx;}
.pad-all20{padding: 20rpx;}
.pad-all25{padding: 25rpx;}
.pad-all30{padding: 30rpx;}
.pad-all35{padding: 35rpx;}
.pad-all40{padding: 40rpx;}
.pad-sx10{padding: 10rpx 0;}
.pad-sx15{padding: 15rpx 0;}
.pad-sx20{padding: 20rpx 0;}
.pad-sx25{padding: 25rpx 0;}
.pad-sx30{padding: 30rpx 0;}
.pad-sx35{padding: 35rpx 0;}
.pad-sx40{padding: 40rpx 0;}
.pad-zy10{padding: 0 10rpx;}
.pad-zy15{padding: 0 15rpx;}
.pad-zy20{padding: 0 20rpx;}
.pad-zy25{padding: 0 25rpx;}
.pad-zy30{padding: 0 30rpx;}
.pad-zy35{padding: 0 35rpx;}
.pad-zy40{padding: 0 40rpx;}
.pad-x130{padding-bottom: 130rpx;}
.pad-x140{padding-bottom: 140rpx;}
.pad-x150{padding-bottom: 150rpx;}
.pad-x160{padding-bottom: 160rpx;}
.pad-x170{padding-bottom: 170rpx;}
.pad-x180{padding-bottom: 180rpx;}
.pad-x190{padding-bottom: 190rpx;}
/* 字体 */
2022-08-24 02:13:26 +00:00
.font18{ font-size: 18rpx;}
.font20{ font-size: 20rpx;}
.font22{ font-size: 22rpx;}
2022-07-31 02:14:22 +00:00
.font24{ font-size: 24rpx;}
.font26{ font-size: 26rpx;}
.font28{ font-size: 28rpx;}
.font30{ font-size: 30rpx;}
.font32{ font-size: 32rpx;}
.font34{ font-size: 34rpx;}
.font36{ font-size: 36rpx;}
.font38{ font-size: 38rpx;}
.font40{ font-size: 40rpx;}
.font42{ font-size: 42rpx;}
.font44{ font-size: 44rpx;}
.font46{ font-size: 46rpx;}
.font48{ font-size: 48rpx;}
.font60{ font-size: 60rpx;}
.color-ff{ color: #ffffff;}
.color-00{ color: #000000;}
.color-48{ color: #484848;}
.color-66{ color: #666666;}
.color-99{ color: #999999;}
.color-orange{color: #febf00;}
.color-red{ color: #dd062f;}
.color-8c{ color: #8c8c9b;}
/* 文字行数 */
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
image{
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 ① */
vertical-align: middle;
/* 取消图片底侧有空白缝隙的问题 ② */
object-fit: cover;
}
/* 去除滚动条 */
scroll-view ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* 圆圈中间一个原点 start */
.mo-item {
width: 30rpx;
height: 30rpx;
border-radius: 100%;
border: 2rpx solid #000000;
box-sizing: border-box;
}
.active-item{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #FF0000;
}
.active-item::before{
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 20rpx;
height: 20rpx;
border-radius: 100%;
background-color: #FF0000;
}
/* 项目基础样式 end */
/* 项目页面样式 start */
page {background-color: #FFFFFF;}
/* 登录页 staat */
.login-header {
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 0;
position: fixed;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.infoImg {
width: 224rpx;
height: 224rpx;
border-radius: 100%;
border: 2rpx solid #d8d8d8;
}
.logo-name {
font-size: 30rpx;
margin-top: 30rpx;
color: #333333;
text-align: center;
}
.login-footer {
width: 100%;
text-align: center;
position: fixed;
left: 0;
bottom: 120rpx;
}
.login-btn {
2022-08-04 05:38:20 +00:00
width: calc(100% - 60rpx);
line-height: 100rpx;
2022-07-31 02:14:22 +00:00
margin: 0 auto;
box-shadow: 0rpx 8rpx 20rpx rgba(254,191,0,.75);
}
.login-txt {
justify-content: center;
align-items: center;
color: #333333;
margin-top: 30rpx;
}
.agreement-box{
margin-top: 30rpx;
}
.agreement{
color: #febf00;
}
/* 首页 */
.index-top{
width: 100%;
2022-08-15 10:40:35 +00:00
height: 500rpx;
2022-07-31 02:14:22 +00:00
position: relative;
2022-08-15 09:27:17 +00:00
z-index: 0;
2022-07-31 02:14:22 +00:00
}
2022-08-15 09:27:17 +00:00
.index-top image{
width: 100%;
min-height: 420rpx;
2022-07-31 02:14:22 +00:00
}
/* 内容区 */
.index-content{
width: 100%;
border-radius: 20rpx 20rpx 0 0;
2022-08-15 09:27:17 +00:00
margin-top: -20rpx;
position: relative;
z-index: 1;
2022-07-31 02:14:22 +00:00
}
2022-08-03 08:13:19 +00:00
/* 顶部背景 */
.index-statis-bg{
width: 100%;
position: fixed;
2022-07-31 02:14:22 +00:00
top: 0;
2022-08-03 08:13:19 +00:00
left: 0;
2022-07-31 02:14:22 +00:00
z-index: 9;
2022-08-03 08:13:19 +00:00
}
/* 搜索框 */
.pull-search-bg{
height: 140rpx;
2022-07-31 02:14:22 +00:00
}
.pull-search{
align-items: center;
width: calc(100% - 80rpx);
height: 80rpx;
background-color: #eaeaea;
margin: 0 auto;
}
.pull-search>.img{
width: 42rpx;
height: 42rpx;
margin-left: 18rpx;
}
.pull-search>.input{
width: calc(100% - 60rpx);
}
/* 分类 */
.index-cate-bg{
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 9;
}
.index-cate-bg.show{
2022-08-03 08:13:19 +00:00
box-shadow: 0 7rpx 7rpx rgba(0,0,0,.18);
2022-07-31 02:14:22 +00:00
}
.index-cate{
width: 100%;
margin: 5rpx auto 0;
border-bottom: 2rpx solid #eaeaea;
}
.index-cate.show{
border-bottom: 0;
}
.pull-title .txt{
line-height: 1.5;
letter-spacing: 2rpx;
}
.pull-title .line{
width: 62rpx;
height: 8rpx;
border-radius: 4rpx;
}
/* 分类列表 */
.cate-list{
padding: 24rpx 0 42rpx;
}
.cate-list .cate-item{
width: 100rpx;
margin: 0 29rpx;
}
.cate-list .cate-item:first-child{
margin-left: 0;
}
.cate-list .cate-item:last-child{
margin-right: 0;
}
.cate-list .cate-item>.img{
width: 100rpx;
height: 100rpx;
}
.cate-list .cate-item>.img image{
width: 100%;
min-height: 100%;
}
.cate-list .cate-item>.txt{
line-height: 1.5;
text-align: center;
}
/* 商品列表 */
.commodity{
flex-wrap: wrap;
justify-content: space-between;
}
.commodity .item{
width: calc(50% - 10rpx);
box-shadow: 0 0 20rpx rgba(0,0,25,.12);
overflow: hidden;
}
.commodity .item>.img{
width: 100%;
height: 230rpx;
overflow: hidden;
}
.commodity .item>.img image{
width: 100%;
min-height: 230rpx;
}
.commodity .title{
line-height: 1.4;
}
.commodity .bottom{
justify-content: space-between;
align-items: center;
}
.commodity .bottom>.btn{
justify-content: center;
align-items: center;
width: 150rpx;
height: 52rpx;
border-radius: 23rpx;
}
/* 到底了 */
.no-more{
color: #8c8c9b;
text-align: center;
line-height: 1.5;
margin: 60rpx 0 25rpx;
text-align: center;
}
/* 搜索结果 */
.search-box{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.close-box{
width: 100%;
}
/* 搜索框 */
.search-bg{
height: 140rpx;
border-radius: 20rpx 20rpx 0 0;
}
.search{
align-items: center;
width: calc(100% - 80rpx);
height: 80rpx;
background-color: #eaeaea;
margin: 0 auto;
}
.search>.img{
width: 42rpx;
height: 42rpx;
margin-left: 18rpx;
}
.search>.input{
width: calc(100% - 60rpx);
}
.keyword-txt{
line-height: 1.5;
2022-08-04 05:38:20 +00:00
padding-bottom: 10rpx;
2022-07-31 02:14:22 +00:00
text-align: center;
}
.search-list{
2022-08-04 05:38:20 +00:00
height: calc(100% - 205rpx);
}
.search-list .item:nth-of-type(1),
.search-list .item:nth-of-type(2){
margin-top: 30rpx !important;
}
.search-list .item:last-child{
margin-bottom: 20rpx;
2022-07-31 02:14:22 +00:00
}
/* 商品详情 */
.scrool-top{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.back-btn{
align-items: center;
width: 35px;
height: 35px;
position: fixed;
left: 20rpx;
z-index: 999;
}
.shop-top-img{
width: 100%;
2022-09-27 08:57:57 +00:00
position: relative;
2022-07-31 02:14:22 +00:00
}
.shop-top-img>image{
width: 100%;
}
2022-09-27 08:57:57 +00:00
.shop-top-img .video-bg{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.shop-top-img .video-btn{
width: 160rpx;
height: 160rpx;
position: absolute;
left: 50%;
top: 50%;
z-index: 99;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.shop-top-img .video-btn>image{
width: 100%;
height: 100%;
}
2022-07-31 02:14:22 +00:00
.shop-content{
border-radius: 20rpx 20rpx 0 0;
2022-09-27 08:57:57 +00:00
margin-top: -20rpx;
position: relative;
z-index: 9;
2022-07-31 02:14:22 +00:00
}
.shop-title{
line-height: 1.5;
text-align: justify;
padding: 10rpx 0 20rpx;
border-bottom: 2rpx solid #eaeaea;
}
.body-txt{
line-height: 1.5;
text-align: justify;
padding-top: 20rpx;
}
/* 尾部 */
.shop-foot{
width: 100%;
height: 170rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}
.shop-footer{
align-items: center;
height: 100rpx;
}
.shop-footer .shop-nav{
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 144rpx;
height: 100%;
border-right: 2rpx solid #FFFFFF;
}
.shop-footer .shop-nav>image{
width: 39rpx;
height: 40rpx;
}
.shop-footer .shop-nav>text{
width: 100%;
line-height: 1.2;
text-align: center;
}
.shop-footer .shop-cart{
justify-content: center;
align-items: center;
width: 88rpx;
height: 88rpx;
margin: 0 50rpx 0 58rpx;
position: relative;
}
.shop-footer .shop-cart>.shop-num{
justify-content: center;
align-items: center;
width: 38rpx;
height: 38rpx;
background-color: #e4143b;
position: absolute;
top: 0;
right: -10rpx;
z-index: 1;
}
.shop-footer .shop-cart image{
width: 46rpx;
height: 45rpx;
}
.shop-btn{
justify-content: center;
align-items: center;
width: 340rpx;
height: 86rpx;
}
/* 商品规格 */
.pull-bg{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,.47);
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
.shop-specs{
width: 100%;
padding: 20rpx 40rpx 30rpx;
border-radius: 30rpx 30rpx 0 0;
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
}
.specs-top{
justify-content: space-between;
align-items: center;
height: 66rpx;
}
.specs-top .close{
width: 66rpx;
height: 66rpx;
}
.specs-top .close>image{
width: 100%;
}
.specs-list{
padding-top: 30rpx;
max-height: 418rpx;
}
.specs-item{
justify-content: space-between;
align-items: center;
width: 100%;
height: 106rpx;
border: 2rpx solid #484848;
}
.specs-item.active{
background-color: #febf00;
color: #ffffff;
border: 0;
}
.specs-btns{
width: 100%;
justify-content: space-between;
align-items: center;
margin-top: 50rpx;
}
.specs-btns>.btn{
justify-content: center;
align-items: center;
width: calc(50% - 16rpx);
height: 98rpx;
box-shadow: 0 0 10rpx rgba(254,191,0, .42);
}
.specs-btns>.btn:last-child{
box-shadow: 0 0 10rpx rgba(72,72,72, .42);
}
/* 公共底部 */
.pull-footer-bg{
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 999;
}
.pull-footer{
justify-content: space-between;
align-items: center;
}
.pull-footer .price{
line-height: 1.2;
}
.pull-footer .btn{
justify-content: center;
align-items: center;
width: 280rpx;
height: 86rpx;
margin: 2rpx 0;
}
/* 订单确认 */
.settlement-content .section{
box-shadow: 0 7rpx 20rpx rgba(0,0,0,.12);
}
.settlement-content .section>.title{
margin-bottom: 30rpx;
}
.addressee-info {
align-items: center;
}
.addressee-info .txt{
width: calc(100% - 35rpx);
}
.addressee-info .txt>view>text{
margin-left: 55rpx;
}
.addressee-info .txt>.txt-coding{
justify-content: space-between;
align-items: center;
}
.addressee-info .txt>.txt-coding>text{
margin-left: 0;
}
.addressee-info image{
width: 18rpx;
height: 34rpx;
margin-left: 15rpx;
}
.shop-slide-item .item{
align-items: center;
width: 100%;
padding: 30rpx 0;
margin: 0 auto;
border-bottom: 2rpx solid #eaeaea;
}
.shop-slide-item .item:first-child{
padding-top: 10rpx;
}
.shop-slide-item .item:last-child{
padding-bottom: 10rpx;
border: 0;
}
.shop-slide-item .shop-img{
width: 194rpx;
height: 194rpx;
margin-right: 36rpx;
overflow: hidden;
}
.shop-slide-item .shop-img image{
width: 100%;
min-height: 194rpx;
}
.shop-slide-item .shop-txt{
width: calc(100% - 230rpx);
}
.shop-slide-item .shop-txt-top{
min-height: 134rpx;
}
.shop-slide-item .shop-txt-top .title{
line-height: 1.5;
}
.shop-slide-item .shop-txt-top .specs{
line-height: 1.5;
}
.shop-slide-item .shop-txt-bottom{
justify-content: space-between;
align-items: center;
width: 100%;
height: 50rpx;
}
.shop-slide-item .shop-txt-bottom .price{
line-height: 1.5;
}
.shop-slide-item .shop-txt-bottom .price>text{
margin-left: 12rpx;
}
.settlement-content .section-list .item{
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
}
.settlement-content .section-list .item:nth-last-of-type(1){
margin-bottom: 0;
}
.settlement-content .item .radio{
display: flex;
align-items: center;
}
.settlement-content .item .radio>radio{
-webkit-transform: scale(.8);
transform: scale(.8);
margin-left: -5rpx;
}
.settlement-content .item .txt{
justify-content: flex-end;
align-items: center;
}
.settlement-content .item .btn{
display: flex;
align-items: center;
width: 20rpx;
height: 36rpx;
margin-left: 15rpx;
}
.settlement-content .item .btn>image{
width: 14rpx;
}
/* 优惠券选择 */
.coupon-box{
width: 100%;
border-radius: 30rpx 30rpx 0 0;
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
}
.coupon-box .title{
text-align: center;
}
.coupon-box .coupon-list .coupon-item:first-child{
margin-top: 0;
}
.coupon-scoll{
max-height: 656rpx;
}
.coupon-btns{
justify-content: space-between;
align-items: center;
}
.coupon-btns .btn{
width: calc(50% - 27rpx);
line-height: 98rpx;
text-align: center;
}
/* 支付成功 */
.finish-content .finish-img{
justify-content: center;
height: 337rpx;
margin: 105rpx 0 70rpx;
}
.finish-content .finish-img>image{
width: 337rpx;
height: 337rpx;
}
.finish-content .finish-txt{
text-align: center;
line-height: 1.5;
padding-bottom: 120rpx;
}
.finish-content .finish-btns{
padding: 0 65rpx;
}
.finish-content .finish-btns .btn{
justify-content: center;
align-items: center;
height: 98rpx;
border: 2rpx solid #eaeaea;
margin-top: 50rpx;
}
.finish-content .finish-btns .btn:nth-of-type(1){
border: 0;
}
/* 我的 */
.my-top{
position: relative;
}
.my-bg{
width: 100%;
}
.my-bg>image{
width: 100%;
}
.my-herder{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.my-message{
align-items: center;
width: 100%;
}
.my-portrait{
width: 142rpx;
height: 142rpx;
margin-right: 36rpx;
overflow: hidden;
}
.my-portrait>image{
width: 100%;
}
.my-txt{
flex-wrap: wrap;
width: calc(100% - 178rpx);
}
.my-nickname{
align-items: center;
width: 100%;
}
.my-nickname>image{
width: 32rpx;
margin-left: 26rpx;
}
.my-vip-txt{
width: auto;
line-height: 50rpx;
}
.my-money{
justify-content: space-around;
text-align: center;
margin: 44rpx 0 40rpx;
}
.my-money .item{
line-height: 1.2;
}
.my-order{
justify-content: space-around;
align-items: center;
height: 130rpx;
border-radius: 30rpx 30rpx 0 0 ;
}
.my-order .item>.img{
justify-content: center;
align-items: flex-end;
width: 50rpx;
height: 50rpx;
margin: 0 auto;
position: relative;
}
.my-order .item>.img>.point{
2022-08-24 02:13:26 +00:00
justify-content: center;
align-items: center;
width: 32rpx;
height: 32rpx;
2022-07-31 02:14:22 +00:00
background-color: #fe002a;
position: absolute;
2022-08-24 02:13:26 +00:00
top: -14rpx;
right: -14rpx;
2022-07-31 02:14:22 +00:00
z-index: 1;
}
.my-order .item>.txt{
line-height: 1.2;
margin-top: 12rpx;
}
.my-content .item{
justify-content: space-between;
align-items: center;
height: 80rpx;
position: relative;
}
.my-content .item .get-phone-btn{
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.my-content .item>.title{
align-items: center;
}
.my-content .item>.title .img{
width: 62rpx;
}
/* 会员申请 */
.vip-box-bg{
padding: 34rpx 40rpx 0;
width: 100%;
position: fixed;
left: 0;
top: 50%;
2022-08-01 09:46:21 +00:00
z-index: 999;
2022-07-31 02:14:22 +00:00
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.vip-box{
padding: 50rpx 60rpx 60rpx;
line-height: 1.5;
position: relative;
}
.vip-box .title{
text-align: center;
}
.vip-box .input{
height: 80rpx;
border-bottom: 2rpx solid #e6e6e6;
}
.vip-box .close-btn{
width: 76rpx;
height: 76rpx;
position: absolute;
top: -34rpx;
right: -30rpx;
}
.vip-box .close-btn>image{
width: 100%;
}
.vip-box .submit-btn{
justify-content: center;
align-items: center;
height: 98rpx;
}
.vip-box .submit-btn>image{
width: 56rpx;
margin-right: 30rpx;
}
.vip-box .addr-input{
width: 100%;
justify-content: space-between;
align-items: center;
position: relative;
}
.vip-box .addr-input .input-box{
justify-content: space-between;
align-items: center;
width: calc(33% - 20rpx);
border-bottom: 2rpx solid #e6e6e6;
}
.vip-box .addr-input .input-box .input-flex{
width: calc(100% - 35rpx);
height: 80rpx;
}
.vip-box .addr-input .input-box>image{
width: 15rpx;
height: 28rpx;
}
.vip-box .shear-btn{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
/* 个人中心 */
.ucenter-bg{
width: 100%;
background-color: #f5f5f5;
padding-top: 20rpx;
}
.ucenter{
padding: 30rpx;
background-color: #FFFFFF;
}
.ucenter .item{
flex-wrap: nowrap;
align-items: center;
height: 100rpx;
position: relative;
}
.ucenter .item .title{
width: 170rpx;
font-size: 30rpx;
color: #000000;
}
.ucenter .item .more{
margin-left: 20rpx;
}
.ucenter .item .more image{
width: 14rpx;
height: 26rpx;
}
.ucenter .item .msg{
width: calc(100% - 204rpx);
height: 60rpx;
font-size: 24rpx;
color: #8c8c9b;
text-align: right;
}
.ucenter .item-first{
justify-content: space-between;
height: 146rpx;
padding: 5rpx 0;
}
.ucenter .item .img{
width: 136rpx;
height: 136rpx;
border-radius: 100%;
margin-right: 34rpx;
overflow: hidden;
}
.ucenter .item .img image{
width: 136rpx;
min-height: 136rpx;
}
.ucenter .get-phone-btn{
display: block;
width: 100%;
height: 100rpx;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9;
}
/* 地址管理 */
2022-08-24 02:13:26 +00:00
.addr-info{
position: relative;
}
2022-07-31 02:14:22 +00:00
.addr-info .txt>view{
margin-bottom: 12rpx;
}
2022-08-24 02:13:26 +00:00
.addr-info>.change-btn{
padding: 5rpx 10rpx 6rpx;
border-radius: 8rpx;
position: absolute;
top: 0;
right: 0;
}
2022-07-31 02:14:22 +00:00
.addr-bottom{
justify-content: space-between;
align-items: center;
width: 100%;
}
.addr-bottom .radio{
align-items: center;
}
.addr-bottom .radio>radio{
-webkit-transform: scale(.8);
transform: scale(.8);
margin-left: -6rpx;
}
.addr-bottom .btns{
justify-content: space-between;
align-items: center;
width: 140rpx;
}
/* 公共底部按钮 */
.pull-btn{
width: 100%;
padding: 20rpx 20rpx 30rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}
.pull-btn .btn{
justify-content: center;
align-items: center;
height: 98rpx;
}
.pull-btn .btn.border-btn{
border: 2rpx solid #d3d3d3;
}
/* 我的余额 */
.recharge{
width: 100%;
padding: 15rpx 20rpx;
}
.recharge-msg{
height: 256rpx;
padding: 40rpx 40rpx 40rpx 64rpx;
box-shadow: 0 9rpx 21rpx rgba(254,191,0,.56);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAEACAYAAACwMbCBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YTgxMTE3OS0xMGM5LTQ2OTQtOWFhYS0wYzdiYWFmYWQ5NDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NURGQjE3RjYwQzg4MTFFREFCM0Q5MjkxQkFFRTJGODciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NURGQjE3RjUwQzg4MTFFREFCM0Q5MjkxQkFFRTJGODciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTViOTUzNi1hNmNiLTRmNWItYjE3Yy01ZGU3ZGIzNTgyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NWE4MTExNzktMTBjOS00Njk0LTlhYWEtMGM3YmFhZmFkOTQwIi8+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
background-size: 100%;
line-height: 1.5;
overflow: hidden;
}
.recharge-msg .txt{
justify-content: space-between;
align-items: center;
text-indent: 8rpx;
}
.recharge-msg .price{
margin-top: 35rpx;
}
.recharge-title{
align-items: center;
line-height: 2;
}
.recharge-title>.line{
width: 8rpx;
height: 35rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
.amount-list{
flex-wrap: wrap;
}
.amount-item{
width: calc(33.33% - 17rpx);
height: 144rpx;
margin-right: 24rpx;
text-align: center;
border: 2rpx solid #e6e6e6;
color: #575a66;
line-height: 1.4;
}
.amount-list .amount-item:nth-of-type(3n){
margin-right: 0;
}
.amount-item.checked{
background-color: #fce8aa;
color: #fe6c00;
border: 2rpx solid #febf00;
}
.detailed-list .detailed-item{
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #e6e6e6;
}
/* 分销管理 */
.distribution{
width: 100%;
padding: 15rpx 20rpx;
}
.distribution-msg{
height: 422rpx;
box-shadow: 0 9rpx 21rpx rgba(254,191,0,.56);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAGmCAYAAAB/dEJyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YTgxMTE3OS0xMGM5LTQ2OTQtOWFhYS0wYzdiYWFmYWQ5NDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OThBQzQ3NjkwQ0IyMTFFREE3N0RCOTdFM0EyRjRBRUQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OThBQzQ3NjgwQ0IyMTFFREE3N0RCOTdFM0EyRjRBRUQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0OTlmYmEzYi01ZjY4LTRlMDYtYjAxMS1lMTg0YThjMTAyNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NWE4MTExNzktMTBjOS00Njk0LTlhYWEtMGM3YmFhZmFkOTQwIi8+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
background-size: 100%;
line-height: 1.5;
overflow: hidden;
}
.distribution-txt{
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid rgba(255,255,255,.43);
}
.distribution-txt .txt{
padding-bottom: 30rpx;
}
.distribution-txt .txt>.title{
text-indent: 8rpx;
}
.distribution-txt .code-btn{
text-align: center;
}
.distribution-profit{
justify-content: space-between;
align-items: center;
width: 100%;
}
.distribution-profit .item{
text-align: center;
}
.distribution-profit .line{
width: 2rpx;
height: 80rpx;
background-color: rgba(255,255,255,.6);
}
.record-nav{
justify-content: center;
align-items: center;
width: 100%;
margin: 45rpx 0 40rpx;
}
.record-nav .item{
min-width: 210rpx;
line-height: 80rpx;
text-align: center;
}
.record-nav .item.cur{
background-color: #febf00;
color: #000000;
}
.record-list{
background-color: #f5f5f5;
padding: 10rpx 20rpx;
}
.record-list .record-item{
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #e6e6e6;
}
2022-08-01 10:31:20 +00:00
.record-list .record-item:last-child{
border-bottom: 0;
}
2022-07-31 02:14:22 +00:00
.record-item .left{
align-items: center;
}
.record-item .img{
width: 100rpx;
height: 100rpx;
margin-right: 26rpx;
overflow: hidden;
}
.record-item .img>image{
width: 100%;
min-height: 100rpx;
}
.record-item .right{
text-align: right;
}
.vip-code{
justify-content: center;
padding: 100rpx 0 40rpx;
}
.vip-code>image{
width: 466rpx;
height: auto;
}
.team-nav{
justify-content: center;
align-items: center;
}
.team-nav .item{
margin: 0 45rpx;
line-height: 1.5;
}
.team-nav .line{
height: 10rpx;
border-radius: 5rpx;
}
/* 优惠券 */
.coupon-list{
padding-bottom: 30rpx;
}
.coupon-item{
align-items: center;
height: 182rpx;
background-color: #fff3ec;
overflow: hidden;
}
.coupon-item:nth-of-type(1){
margin-top: 30rpx;
}
.coupon-item .price{
width: 195rpx;
height: 182rpx;
background-image: linear-gradient(to right,#ff9547,#ff6f0c);
font-size: 72rpx;
line-height: 102rpx;
2022-08-01 09:46:21 +00:00
text-indent: 20rpx;
2022-07-31 02:14:22 +00:00
padding-top: 40rpx;
margin-right: 35rpx;
}
.coupon-item .txt{
width: calc(100% - 390rpx);
}
.coupon-item .btn{
width: 120rpx;
line-height: 56rpx;
border-radius: 28rpx;
background-color: #ff6f0c;
text-align: center;
}
.coupon-item.grey{
background-color: #f5f5f5;
}
.coupon-item.grey .price{
background-image: linear-gradient(to right,#666666,#666666);
}
.coupon-item.grey .txt{
width: calc(100% - 250rpx);
}
/* 免责声明 */
.disclaimers{
padding: 20rpx 30rpx;
}
.disclaimers-title{
line-height: 1.5;
margin-bottom: 30rpx;
text-align: center;
}
.disclaimers-txt{
line-height: 1.8;
text-align: justify;
}
/* 订单管理 */
.order-search input{
width: calc(100% - 80rpx);
background-color: #eaeaea;
margin: 20rpx auto 30rpx;
height: 80rpx;
}
.order-nav-bg{
padding: 25rpx 20rpx;
background-color: #f5f5f5;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 99;
}
.order-nav{
align-items: center;
}
.order-nav .item{
width: 130rpx;
line-height: 80rpx;
margin-right: 20rpx;
text-align: center;
}
.order-nav .item:last-child{
margin-right: 0;
}
.order-nav .item.cur{
background-color: #febf00;
color: #000000;
}
.order-list{
padding: 15rpx 30rpx 20rpx;
}
.order-item{
padding: 28rpx 0;
background-color: #FFFFFF;
border-radius: 30rpx;
margin-top: 30rpx;
box-shadow: 0 7rpx 20rpx rgba(0,0,0,.12);
}
.order-code{
justify-content: space-between;
align-items: center;
padding: 0rpx 30rpx 20rpx;
font-size: 30rpx;
line-height: 1.5;
color: #000000;
border-bottom: 2rpx solid #eaeaea;
}
.order-item .item-bg{
padding: 0 15rpx;
}
.order-item .item{
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 30rpx 0;
border-bottom: 2rpx solid #eaeaea;
}
.order-item .item:last-child{
border-bottom: 0;
}
.order-item .item .img{
width: 194rpx;
height: 194rpx;
border-radius: 10rpx;
overflow: hidden;
}
.order-item .item .img image{
width: 100%;
min-height: 194rpx;
}
.order-item .item .txt{
width: calc(100% - 230rpx);
}
.order-item .item .title{
font-size: 30rpx;
line-height: 1.5;
color: #000000;
}
.order-item .item .specs{
min-height: 60rpx;
font-size: 24rpx;
line-height: 1.5;
margin: 20rpx 0;
color: #8c8c9b;
}
.order-item .item .price{
justify-content: space-between;
align-items: center;
font-size: 24rpx;
line-height: 1.5;
color: #8c8c9b;
}
.order-item .item .price>text{
font-size: 30rpx;
color: #f81c1c;
}
.order-item .item .price>view{
display: flex;
align-items: center;
}
.order-item .item .price>view text{
margin-right: 4rpx;
}
.order-item .total-price{
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
padding-top: 25rpx;
border-top: 2rpx solid #eaeaea;
}
.order-item .total-price>text{
font-size: 30rpx;
color: #f81c1c;
}
.order-item .total-price .btn{
box-sizing: border-box;
width: 150rpx;
border: 2rpx solid #d3d3d3;
border-radius: 20rpx;
font-size: 30rpx;
color: #8c8c9b;
line-height: 64rpx;
text-align: center;
}
.order-item .total-price .btn:nth-of-type(2){
margin-left: 20rpx;
}
.order-item .total-price .btn-01{
background-color: #f81c1c;
color: #ffffff;
border: 0;
}
.order-item .total-price .btn-02{
color: #000000;
border: 0;
}
2022-08-15 09:27:17 +00:00
/* 取消订单 */
.cancle-reason{
margin-top: 30rpx;
}
.cancle-reason .item{
align-items: center;
height: 74rpx;
}
.cancle-reason .item>.radio{
-webkit-transform: scale(.8);
transform: scale(.8);
margin-left: -5rpx;
}
2022-07-31 02:14:22 +00:00
/* 订单详情 */
.order-info>view{
justify-content: space-between;
align-items: center;
}
/* 付款详情 */
.pay-info>view{
justify-content: space-between;
align-items: center;
}
.pay-info>.pay-actual{
justify-content: flex-end;
}
.pay-info>.pay-actual>text{
margin-left: 8rpx;
}
.distributor{
padding: 40rpx 40rpx 170rpx;
}
.distributor .input{
height: 80rpx;
border-bottom: 2rpx solid #e6e6e6;
}
.distributor-btn{
padding: 20rpx 40rpx;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}
.distributor-btn .btn{
justify-content: center;
align-items: center;
height: 130rpx;
2022-08-15 09:27:17 +00:00
}
.order-btns-bg{
justify-content: space-between;
align-items: center;
}
.order-btns-bg .btn{
width: calc(50% - 22rpx);
height: 84rpx;
2022-07-31 02:14:22 +00:00
}
/* 项目页面样式 end */
/* 动画样式 start */
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license
Copyright (c) 2013 Daniel Eden
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
.bounce{-webkit-animation-name:bounce;animation-name:bounce}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
.flash{-webkit-animation-name:flash;animation-name:flash}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}
.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}
@keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}
.shake{-webkit-animation-name:shake;animation-name:shake}
@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}
@keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}
@keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}
.wobble{-webkit-animation-name:wobble;animation-name:wobble}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}
@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}
@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}
@keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}
.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}
@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}
@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}
@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}
.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}
@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}
@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}
@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}
@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}
.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}
@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
@keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}
@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}
.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}
@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}
.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}
@keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}
.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}
@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}
@keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}
.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}
@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}
@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}
.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
@keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}
@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}
@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}
@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}
@keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}
.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}
@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}
@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}
@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}
@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}
@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}
@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}
@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}
@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}
@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}
@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
@keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
@-webkit-keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}
@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
@keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}
@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}
@keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}
.hinge{-webkit-animation-name:hinge;animation-name:hinge}
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}
@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}
.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}
@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}
@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}
.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}
@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}
@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}
@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}
@keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}
.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}
@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}}
@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}}
.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}
@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}}
@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}}
.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}
@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}}
@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}}
.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}
@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}}
@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}}
.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
/* 动画样式 end */
.loading-box {
display: flex;
justify-content: center;
width: 100%;
padding-top: 20px;
font-size: 30px;
color: rgba(253, 82, 75, 1);
vertical-align: top;
transition: .3s color, .3s border;
}
/* .loading-box:hover {
color: #d60b52;
font-size: 0;
padding: 0;
border-width: 3px;
line-height: 200px;
}
.loading-box:hover [class*="loader-"] {
font-size: 70px;
line-height: 200px;
} */
[class*="loader-"] {
display: inline-block;
width: 1em;
height: 1em;
color: inherit;
vertical-align: middle;
pointer-events: none;
}
.loader-01 {
border: .2em dotted currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-01 linear infinite;
animation: 1s loader-01 linear infinite;
}
@-webkit-keyframes loader-01 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-01 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-02 {
border: .2em solid transparent;
border-left-color: currentcolor;
border-right-color: currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-02 linear infinite;
animation: 1s loader-02 linear infinite;
}
@-webkit-keyframes loader-02 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-02 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-03 {
border: .2em solid currentcolor;
border-bottom-color: transparent;
border-radius: 50%;
-webkit-animation: 1s loader-03 linear infinite;
animation: 1s loader-03 linear infinite;
position: relative;
}
@-webkit-keyframes loader-03 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-03 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-04 {
border: 1px solid currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-04 linear infinite;
animation: 1s loader-04 linear infinite;
position: relative;
}
.loader-04:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -.2em;
left: 50%;
border: .2em solid currentcolor;
border-radius: 50%;
}
@-webkit-keyframes loader-04 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-04 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-05 {
border: .2em solid transparent;
border-top-color: currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-05 linear infinite;
animation: 1s loader-05 linear infinite;
position: relative;
}
.loader-05:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -.2em;
left: -.2em;
border: .2em solid currentcolor;
border-radius: 50%;
opacity: .5;
}
@-webkit-keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-06 {
border: .2em solid currentcolor;
border-radius: 50%;
-webkit-animation: loader-06 1s ease-out infinite;
animation: loader-06 1s ease-out infinite;
}
@-webkit-keyframes loader-06 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-06 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader-07 {
border: 0 solid transparent;
border-radius: 50%;
position: relative;
}
.loader-07:before,
.loader-07:after {
content: '';
border: .2em solid currentcolor;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
-webkit-animation: loader-07 1s linear infinite;
animation: loader-07 1s linear infinite;
opacity: 0;
}
.loader-07:before {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.loader-07:after {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@-webkit-keyframes loader-07 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-07 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader-08 {
position: relative;
}
.loader-08:before,
.loader-08:after {
content: '';
width: inherit;
height: inherit;
border-radius: 50%;
background-color: currentcolor;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: loader-08 2.0s infinite ease-in-out;
animation: loader-08 2.0s infinite ease-in-out;
}
.loader-08:after {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes loader-08 {
0%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loader-08 {
0%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loader-09 {
background-color: currentcolor;
border-radius: 50%;
-webkit-animation: loader-09 1.0s infinite ease-in-out;
animation: loader-09 1.0s infinite ease-in-out;
}
@-webkit-keyframes loader-09 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-09 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader-10 {
position: relative;
-webkit-animation: loader-10-1 2.0s infinite linear;
animation: loader-10-1 2.0s infinite linear;
}
.loader-10:before,
.loader-10:after {
content: '';
width: 0;
height: 0;
border: .5em solid currentcolor;
display: block;
position: absolute;
border-radius: 100%;
-webkit-animation: loader-10-2 2s infinite ease-in-out;
animation: loader-10-2 2s infinite ease-in-out;
}
.loader-10:before {
top: 0;
left: 50%;
}
.loader-10:after {
bottom: 0;
right: 50%;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes loader-10-1 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-10-1 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-10-2 {
0%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loader-10-2 {
0%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loader-11 {
background-color: currentcolor;
-webkit-animation: loader-11 1.2s infinite ease-in-out;
animation: loader-11 1.2s infinite ease-in-out;
}
@-webkit-keyframes loader-11 {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@keyframes loader-11 {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.loader-12 {
position: relative;
}
.loader-12:before,
.loader-12:after {
content: '';
display: block;
position: absolute;
background-color: currentcolor;
left: 50%;
right: 0;
top: 0;
bottom: 50%;
box-shadow: -.5em 0 0 currentcolor;
-webkit-animation: loader-12 1s linear infinite;
animation: loader-12 1s linear infinite;
}
.loader-12:after {
top: 50%;
bottom: 0;
-webkit-animation-delay: .25s;
animation-delay: .25s;
}
@-webkit-keyframes loader-12 {
0%,
100% {
box-shadow: -.5em 0 0 transparent;
background-color: currentcolor;
}
50% {
box-shadow: -.5em 0 0 currentcolor;
background-color: transparent;
}
}
@keyframes loader-12 {
0%,
100% {
box-shadow: -.5em 0 0 transparent;
background-color: currentcolor;
}
50% {
box-shadow: -.5em 0 0 currentcolor;
background-color: transparent;
}
}
.loader-13:before,
.loader-13:after,
.loader-13 {
border-radius: 50%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: loader-13 1.8s infinite ease-in-out;
animation: loader-13 1.8s infinite ease-in-out;
}
.loader-13 {
color: currentcolor;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
top: -1em;
}
.loader-13:before {
right: 100%;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader-13:after {
left: 100%;
}
.loader-13:before,
.loader-13:after {
content: '';
display: block;
position: absolute;
top: 0;
width: inherit;
height: inherit;
}
@-webkit-keyframes loader-13 {
0%,
80%,
100% {
box-shadow: 0 1em 0 -1em;
}
40% {
box-shadow: 0 1em 0 -.2em;
}
}
@keyframes loader-13 {
0%,
80%,
100% {
box-shadow: 0 1em 0 -1em;
}
40% {
box-shadow: 0 1em 0 -.2em;
}
}
.loader-14 {
border-radius: 50%;
box-shadow: 0 1em 0 -.2em currentcolor;
position: relative;
-webkit-animation: loader-14 0.8s ease-in-out alternate infinite;
animation: loader-14 0.8s ease-in-out alternate infinite;
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
top: -1em;
}
.loader-14:after,
.loader-14:before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
box-shadow: inherit;
-webkit-animation: inherit;
animation: inherit;
}
.loader-14:before {
left: -1em;
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
.loader-14:after {
right: -1em;
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
@-webkit-keyframes loader-14 {
0% {
box-shadow: 0 2em 0 -.2em currentcolor;
}
100% {
box-shadow: 0 1em 0 -.2em currentcolor;
}
}
@keyframes loader-14 {
0% {
box-shadow: 0 2em 0 -.2em currentcolor;
}
100% {
box-shadow: 0 1em 0 -.2em currentcolor;
}
}
.loader-15 {
background: currentcolor;
position: relative;
-webkit-animation: loader-15 1s ease-in-out infinite;
animation: loader-15 1s ease-in-out infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
width: .25em;
height: .5em;
}
.loader-15:after,
.loader-15:before {
content: '';
position: absolute;
width: inherit;
height: inherit;
background: inherit;
-webkit-animation: inherit;
animation: inherit;
}
.loader-15:before {
right: .5em;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader-15:after {
left: .5em;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes loader-15 {
0%,
100% {
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
}
50% {
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
}
}
@keyframes loader-15 {
0%,
100% {
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
}
50% {
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
}
}
.loader-16 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-perspective: 1000px;
perspective: 1000px;
border-radius: 50%;
}
.loader-16:before,
.loader-16:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: 50%;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
.loader-16:before {
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
}
.loader-16:after {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@-webkit-keyframes rotateccw {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes rotateccw {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@-webkit-keyframes spin {
0%,
100% {
box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
box-shadow: .2em -.2em 0 0 currentcolor;
}
}
@keyframes spin {
0%,
100% {
box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
box-shadow: .2em -.2em 0 0 currentcolor;
}
}
.loader-17 {
position: relative;
background-color: currentcolor;
border-radius: 50%;
}
.loader-17:after,
.loader-17:before {
content: "";
position: absolute;
width: .25em;
height: .25em;
border-radius: 50%;
opacity: .8;
}
.loader-17:after {
left: -.5em;
top: -.25em;
background-color: currentcolor;
-webkit-transform-origin: .75em 1em;
transform-origin: .75em 1em;
-webkit-animation: loader-17 1s linear infinite;
animation: loader-17 1s linear infinite;
opacity: .6;
}
.loader-17:before {
left: -1.25em;
top: -.75em;
background-color: currentcolor;
-webkit-transform-origin: 1.5em 1em;
transform-origin: 1.5em 1em;
-webkit-animation: loader-17 2s linear infinite;
animation: loader-17 2s linear infinite;
}
@-webkit-keyframes loader-17 {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
transform: rotateZ(360deg) translate3d(0, 0, 0);
}
}
@keyframes loader-17 {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
transform: rotateZ(360deg) translate3d(0, 0, 0);
}
}
.loader-18 {
position: relative;
}
.loader-18:before,
.loader-18:after {
content: '';
display: block;
position: absolute;
border-radius: 50%;
border: .1em solid transparent;
border-bottom-color: currentcolor;
top: 0;
left: 0;
-webkit-animation: 1s loader-18 linear infinite;
animation: 1s loader-18 linear infinite;
}
.loader-18:before {
width: 1em;
height: 1em;
}
.loader-18:after {
width: .8em;
height: .8em;
top: .1em;
left: .1em;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
@-webkit-keyframes loader-18 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-18 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-19 {
border-top: .2em solid currentcolor;
border-right: .2em solid transparent;
-webkit-animation: loader-19 1s linear infinite;
animation: loader-19 1s linear infinite;
border-radius: 100%;
position: relative;
}
@-webkit-keyframes loader-19 {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-19 {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
