/*每个页面公共css */ /* 阿里巴巴矢量图标库 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; flex-wrap: wrap; } .bottoc{margin-top: 6rpx;color: #414141;} .opc{opacity: 0.7;} .width100{width: 100%;} .width55{width: 55%;} .width50{width: 50%;} .width49{width: 49%;} .width48_5{width: 48.5%;} .width48{width: 48%;} .width47{width: 47%;} .width46{width: 46%;} .width45{width: 45%;} .width33{width: 33%;} .width30{width: 30%;} .width29{width: 29%;} .width28{width: 28%;} .width27{width: 27%;} .width26{width: 26%;} .width25{width: 25%;} .posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;} .posir{position: relative;} .posia{position: absolute;} .poszy{position: fixed;left: 0;right: 0;z-index: 3;} .posiszy{position: fixed;left: 0;right: 0;z-index: 5;} .posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;} .posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;} .syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;} .posi-sticky{position: -webkit-sticky;position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;} .dis{display: flex;} .disac{display: flex;align-items: center;} .disja{display: flex;justify-content: space-around;} .disjb{display: flex;justify-content: space-between;} .disje{display: flex;justify-content: flex-end;} .disjbac{display: flex;justify-content: space-between;align-items: center;} .disjcac{display: flex;justify-content: center;align-items: center;} .fc{flex-direction: column;} .fw{flex-wrap: wrap;} .fe{justify-content: flex-end;} .flexs{flex-shrink: 0;} .wh42{width: 42rpx;height: 42rpx;} .wh44{width: 44rpx;height: 44rpx;} button:after{content: none!important;} .borbot{border-bottom: 2rpx solid #EEEEEE;} .borbot:last-child{border-bottom: none;} .bbot{border-bottom: 2rpx solid #EEEEEE;} .tbot{border-top: 2rpx solid #EEEEEE;} .borbot-df{border: 2rpx solid #DFDFDF;} .borbot-cc{border: 2rpx solid #CCCCCC;} .bleft {border-left: 2rpx solid #EEEEEE;} .bbt-d9{border-bottom: 2rpx solid #d9d9d9;} /* 行高 */ .line-h30{line-height: 30rpx;} .line-h32{line-height: 32rpx;} .line-h34{line-height: 34rpx;} .line-h36{line-height: 36rpx;} .line-h38{line-height: 38rpx;} .line-h40{line-height: 40rpx;} .line-h42{line-height: 42rpx;} .line-h44{line-height: 44rpx;} .line-h46{line-height: 46rpx;} .line-h48{line-height: 48rpx;} .line-h50{line-height: 50rpx;} .line-h52{line-height: 52rpx;} .line-h54{line-height: 54rpx;} .line-h56{line-height: 56rpx;} .line-h58{line-height: 58rpx;} .line-h60{line-height: 60rpx;} .line-h62{line-height: 62rpx;} .line-h64{line-height: 64rpx;} .line-h66{line-height: 66rpx;} .line-h68{line-height: 60rpx;} .line-h70{line-height: 70rpx;} .line-h72{line-height: 72rpx;} .line-h74{line-height: 74rpx;} .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;} /* 字体大小 */ .fon20{font-size: 20rpx;} .fon22{font-size: 22rpx;} .fon24{font-size: 24rpx;} .fon25{font-size: 25rpx;} .fon26{font-size: 26rpx;} .fon27{font-size: 27rpx;} .fon28{font-size: 28rpx;} .fon30{font-size: 30rpx;} .fon32{font-size: 32rpx;} .fon34{font-size: 34rpx;} .fon36{font-size: 36rpx;} .fon38{font-size: 38rpx;} .fon40{font-size: 40rpx;} .fon42{font-size: 42rpx;} .fon44{font-size: 44rpx;} .fon46{font-size: 46rpx;} .fon48{font-size: 48rpx;} .fon50{font-size: 50rpx;} .fon52{font-size: 52rpx;} .fon54{font-size: 54rpx;} .fon56{font-size: 56rpx;} .fon58{font-size: 58rpx;} .fon60{font-size: 60rpx;} .fon62{font-size: 62rpx;} .fon64{font-size: 64rpx;} .fon66{font-size: 66rpx;} .fon68{font-size: 68rpx;} .fon70{font-size: 70rpx;} .fon72{font-size: 72rpx;} /* 字体颜色 */ .colf{color: #FFFFFF;} .colf6{color: #f6f6f6;} .colb{color: #000000;} .colc{color: #CCCCCC;} .col3{color: #333333;} .col34{color: #343434;} .col6{color: #666666;} .colf8{color: #F85050;} .col9{color: #999999;} .pcol{color: #3875F6;} .col2c{color: #2C2C2C;} .col80{color: #808080;} .col7D{color: #7D7D7D;} .colB3{color: #B3B3B3;} .col5b{color: #5B5B5B;} .colpeili{color: #868695;} /* 字体位置 */ .tright{text-align: right;} .tcenter{text-align: center;} /* 文字空两格 */ .tindent{text-indent: 2em;} /* 元素缩小 */ .scal13{-webkit-transform: scale(1.3);transform: scale(1.3);} .scal12{-webkit-transform: scale(1.2);transform: scale(1.2);} .scal11{-webkit-transform: scale(1.1);transform: scale(1.1);} .scal10{-webkit-transform: scale(1);transform: scale(1);} .scal09{-webkit-transform: scale(.9);transform: scale(.9);} .scal08{-webkit-transform: scale(.8);transform: scale(.8);} .scal07{-webkit-transform: scale(.7);transform: scale(.7);} .scal06{-webkit-transform: scale(.6);transform: scale(.6);} .scal05{-webkit-transform: scale(.5);transform: scale(.5);} /* 行间距 */ .linh40{line-height: 40rpx;} .linh50{line-height: 50rpx;} .linh60{line-height: 60rpx;} .linh70{line-height: 70rpx;} /* 粗体 */ .bold{font-weight: bold;} .bold400{font-weight: 400;} .bold500{font-weight: 500;} /* 背景颜色 */ .pbackc{background-color: #3875F6;} .bacf{background-color: #FFFFFF;} .bac0{background-color: #000000;} .bcdb{background-color: #DBDBDB;} .bcf8{background: #F85050;} .bacf5{background: #F5F5F5;} .bacf6{background-color: #f6f6f6;} /* 圆角 */ .radius10{border-radius: 10rpx;} .radius15{border-radius: 15rpx;} .radius20{border-radius: 20rpx;} .radius30{border-radius: 30rpx;} .radius35{border-radius: 35rpx;} .radius40{border-radius: 40rpx;} .radius45{border-radius: 45rpx;} /* 上下左右---外边距 */ .mar10{margin: 10rpx;} .mar20{margin: 20rpx;} .mar25{margin: 25rpx;} .mar30{margin: 30rpx;} .mar32{margin: 32rpx;} .mar36{margin: 36rpx;} .mar40{margin: 40rpx;} .mar50{margin: 50rpx;} /* 上下---外边距 */ .mar-sx10{margin-top: 10rpx;margin-bottom: 10rpx;} .mar-sx20{margin-top: 20rpx;margin-bottom: 20rpx;} .mar-sx25{margin-top: 25rpx;margin-bottom: 25rpx;} .mar-sx30{margin-top: 30rpx;margin-bottom: 30rpx;} .mar-sx32{margin-top: 32rpx;margin-bottom: 32rpx;} .mar-sx36{margin-top: 36rpx;margin-bottom: 36rpx;} .mar-sx40{margin-top: 40rpx;margin-bottom: 40rpx;} .mar-sx50{margin-top: 50rpx;margin-bottom: 50rpx;} /* 左右---外边距 */ .mar-zy10{margin-left: 10rpx;margin-right: 10rpx;} .mar-zy20{margin-left: 20rpx;margin-right: 20rpx;} .mar-zy25{margin-left: 25rpx;margin-right: 25rpx;} .mar-zy30{margin-left: 30rpx;margin-right: 30rpx;} .mar-zy32{margin-left: 32rpx;margin-right: 32rpx;} .mar-zy36{margin-left: 36rpx;margin-right: 36rpx;} .mar-zy40{margin-left: 40rpx;margin-right: 40rpx;} .mar-zy50{margin-left: 50rpx;margin-right: 50rpx;} .mar-zy85{margin-left: 85rpx;margin-right: 85rpx;} /* 上---外边距 */ .mar-s10{margin-top: 10rpx;} .mar-s20{margin-top: 20rpx;} .mar-s25{margin-top: 25rpx;} .mar-s30{margin-top: 30rpx;} .mar-s32{margin-top: 32rpx;} .mar-s36{margin-top: 36rpx;} .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-s90{margin-top: 90rpx;} .mar-s100{margin-top: 100rpx;} .mar-s120{margin-top: 120rpx;} .mar-s140{margin-top: 140rpx;} .mar-s160{margin-top: 160rpx;} .mar-s180{margin-top: 180rpx;} /* 下---外边距 */ .mar-x10{margin-bottom: 10rpx;} .mar-x20{margin-bottom: 20rpx;} .mar-x25{margin-bottom: 25rpx;} .mar-x30{margin-bottom: 30rpx;} .mar-x32{margin-bottom: 32rpx;} .mar-x36{margin-bottom: 36rpx;} .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;} .mar-x90{margin-bottom: 90rpx;} .mar-x100{margin-bottom: 100rpx;} .mar-x120{margin-bottom: 120rpx;} .mar-x140{margin-bottom: 140rpx;} .mar-x160{margin-bottom: 160rpx;} .mar-x180{margin-bottom: 180rpx;} /* 左---外边距 */ .mar-z10{margin-left: 10rpx;} .mar-z20{margin-left: 20rpx;} .mar-z25{margin-left: 25rpx;} .mar-z30{margin-left: 30rpx;} .mar-z32{margin-left: 32rpx;} .mar-z36{margin-left: 36rpx;} .mar-z40{margin-left: 40rpx;} .mar-z50{margin-left: 50rpx;} /* 右---外边距 */ .mar-y10{margin-right: 10rpx;} .mar-y20{margin-right: 20rpx;} .mar-y25{margin-right: 25rpx;} .mar-y30{margin-right: 30rpx;} .mar-y32{margin-right: 32rpx;} .mar-y36{margin-right: 36rpx;} .mar-y40{margin-right: 40rpx;} .mar-y50{margin-right: 50rpx;} /* 上下左右---内边距 */ .pad10{padding: 10rpx;} .pad20{padding: 20rpx;} .pad25{padding: 25rpx;} .pad30{padding: 30rpx;} .pad32{padding: 32rpx;} .pad36{padding: 36rpx;} .pad40{padding: 40rpx;} .pad50{padding: 50rpx;} /* 上下---内边距 */ .pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;} .pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;} .pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;} .pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;} .pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;} .pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;} .pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;} .pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;} /* 左右---内边距 */ .pad-zy10{padding-left: 10rpx;padding-right: 10rpx;} .pad-zy20{padding-left: 20rpx;padding-right: 20rpx;} .pad-zy25{padding-left: 25rpx;padding-right: 25rpx;} .pad-zy30{padding-left: 30rpx;padding-right: 30rpx;} .pad-zy32{padding-left: 32rpx;padding-right: 32rpx;} .pad-zy36{padding-left: 36rpx;padding-right: 36rpx;} .pad-zy40{padding-left: 40rpx;padding-right: 40rpx;} .pad-zy50{padding-left: 50rpx;padding-right: 50rpx;} /* 上---内边距 */ .pad-s10{padding-top: 10rpx;} .pad-s20{padding-top: 20rpx;} .pad-s25{padding-top: 25rpx;} .pad-s28{padding-top: 28rpx;} .pad-s30{padding-top: 30rpx;} .pad-s32{padding-top: 32rpx;} .pad-s36{padding-top: 36rpx;} .pad-s40{padding-top: 40rpx;} .pad-s50{padding-top: 50rpx;} .pad-s60{padding-top: 60rpx;} .pad-s70{padding-top: 70rpx;} .pad-s80{padding-top: 80rpx;} .pad-s90{padding-top: 90rpx;} .pad-s100{padding-top: 100rpx;} .pad-s110{padding-top: 110rpx;} .pad-s120{padding-top: 120rpx;} .pad-s140{padding-top: 140rpx;} .pad-s160{padding-top: 160rpx;} .pad-s180{padding-top: 180rpx;} /* 下---内边距 */ .pad-x10{padding-bottom: 10rpx;} .pad-x20{padding-bottom: 20rpx;} .pad-x25{padding-bottom: 25rpx;} .pad-x30{padding-bottom: 30rpx;} .pad-x32{padding-bottom: 32rpx;} .pad-x36{padding-bottom: 36rpx;} .pad-x40{padding-bottom: 40rpx;} .pad-x50{padding-bottom: 50rpx;} .pad-x120{padding-bottom: 120rpx;} .pad-x140{padding-bottom: 140rpx;} .pad-x160{padding-bottom: 160rpx;} .pad-x180{padding-bottom: 180rpx;} .pad-x260{padding-bottom: 260rpx;} /* 左---内边距 */ .pad-z10{padding-left: 10rpx;} .pad-z20{padding-left: 20rpx;} .pad-z25{padding-left: 25rpx;} .pad-z30{padding-left: 30rpx;} .pad-z32{padding-left: 32rpx;} .pad-z36{padding-left: 36rpx;} .pad-z40{padding-left: 40rpx;} .pad-z50{padding-left: 50rpx;} /* 右---内边距 */ .pad-y10{padding-right: 10rpx;} .pad-y20{padding-right: 20rpx;} .pad-y25{padding-right: 25rpx;} .pad-y30{padding-right: 30rpx;} .pad-y32{padding-right: 32rpx;} .pad-y36{padding-right: 36rpx;} .pad-y40{padding-right: 40rpx;} .pad-y50{padding-right: 50rpx;} .pad-sx27-zy20{padding: 27rpx 20rpx;} 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; } /* 边距 */ .pad-b140{padding-bottom: 140rpx;} .pad-b150{padding-bottom: 150rpx;} /* 项目基础样式 end */ /* 项目页面样式 start */ page {background-color: #eaeaea;} /* 登录页 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: 192rpx; height: 192rpx; border-radius: 100%; box-shadow: 0px 0px 20px rgba(0,0,0,.3); } .logo-name { font-size: 30rpx; font-weight: bold; margin-top: 30rpx; color: #333333; text-align: center; } .login-footer { width: 100%; text-align: center; position: fixed; left: 0; bottom: 120rpx; } .login-btn { width: 70%; height: 80rpx; line-height: 80rpx; margin: 0 auto; box-shadow: 0rpx 0rpx 10rpx rgba(0,115,188, .5); } .login-txt { justify-content: center; align-items: center; color: #333333; margin-top: 30rpx; } .agreement-box{ margin-top: 20rpx; } .agreement{ color: #0073bc; } /* 首页 start */ /* 搜索 */ .search-bg { padding: 30rpx; background-color: #FFFFFF; } .search { align-items: center; width: 100%; height: 84rpx; background-color: #eaeaea; border-radius: 10rpx; } .search .search-img { width: 36rpx; height: 36rpx; margin-left: 30rpx; } .search .search-input { width: calc(100% - 226rpx); height: 100%; padding: 0 24rpx; font-size: 28rpx; color: #333333; } .search-line { width: 2rpx; height: 46rpx; background-color: #a8a8a8; } .search-btn { justify-content: center; align-items: center; width: 110rpx; height: 100%; font-size: 28rpx; color: #000000; letter-spacing: 2rpx; } /* 历史搜索 */ .search-history{ padding: 0 30rpx 28rpx; background-color: #FFFFFF; } .search-history .title{ flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; font-size: 30rpx; line-height: 1.5; color: #666666; margin-bottom: 30rpx; } .search-history .title>image{ width: 27rpx; height: 31rpx; } .search-history .item{ background-color: #eaeaea; max-width: 25%; line-height: 50rpx; padding: 0 28rpx; margin-right: 12rpx; border-radius: 10rpx; font-size: 24rpx; color: #000000; margin-bottom: 12rpx; } /* 关键词 */ .search-keyword{ padding: 25rpx 30rpx 0; font-size: 30rpx; line-height: 1.5; color: #666666; } .search-keyword>text:first-child{ margin-right: 24rpx; } .search-keyword>text:last-child{ margin: 0 6rpx; } /* 推荐列表 */ .flag-list { justify-content: space-between; align-items: center; padding: 34rpx 30rpx; } .flag-item { box-sizing: border-box; width: calc(50% - 16rpx); padding: 30rpx; background-color: #FFFFFF; } .flag-item .flag-img { height: 174rpx; overflow: hidden; } .flag-item .flag-img image { width: 100%; min-height: 100%; } .flag-item .flag-txt { font-size: 28rpx; line-height: 1.2; margin-top: 20rpx; text-align: center; color: #000000; } /* 产品展示 */ .index-product-list { background-color: #FFFFFF; padding: 0 30rpx; margin-bottom: 20rpx; } .product-list-title { justify-content: space-between; align-items: center; font-size: 36rpx; color: #000000; line-height: 2.5; padding: 40rpx 0 56rpx; } .product-list-title .line { width: 75rpx; height: 5rpx; background-color: #000000; border-radius: 3rpx; } .product-list-title image { width: 19rpx; height: 35rpx; } /* 疑难解答&行业资讯 */ .index-news { background-color: #FFFFFF; padding: 30rpx; } .more-txt { font-size: 24rpx; line-height: 1.5; padding: 40rpx 0 20rpx; text-align: center; color: #666666; } .more-txt.more-txt-other{ padding: 40rpx 0; } /* 资讯列表页 start */ .nav-list-bg{ background-color: #FFFFFF; padding: 5rpx 30rpx 0; position: -webkit-sticky; position: sticky; left: 0; z-index: 99; overflow-x: auto; } .news-list-bg{ padding: 10rpx 30rpx; } /* 分类列表 */ .company-top{ width: 100%; height: 121rpx; background-color: #eaeaea; position: fixed; left: 0; z-index: 1; } .company{ width: 100%; height: 76rpx; padding: 20rpx 0 25rpx; position: fixed; left: 0; z-index: 99; } .company input{ height: 76rpx; margin: 0 30rpx; padding: 0 25rpx; border-radius: 10rpx 10rpx 0 0; background-color: #FFFFFF; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAYAAAD7PHgWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFGNzM1NjUxRjVCMzExRUNCNjZFOUJBRkE3MzZFMUIxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFGNzM1NjUyRjVCMzExRUNCNjZFOUJBRkE3MzZFMUIxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUY3MzU2NEZGNUIzMTFFQ0I2NkU5QkFGQTczNkUxQjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUY3MzU2NTBGNUIzMTFFQ0I2NkU5QkFGQTczNkUxQjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7QkWUpAAACSUlEQVR42uyXTUhUURiGr+NfukjxL1GojRa4UBARsRSj0E2EtQstoWQwCFyoGwV1lFYqKOQuo0IXLszQlYQxka7FhbUIEVqViFr+4E9a7xfvyOF6LzOOeucs7gvPPTNzj9dnzplzvnujvF7vsGEYNYaeGfbg8MPQNz9jcGgG4yAJ7GsiFgt+gdkYfjCr6xB6DM3jCrqCrmCQBLaZCyBOM7c9sCOCj0APJXXKDmgRwXqQoeHsXgSPRfAJaAKpmpW6FdAngt9Ag7uKXcEI74NO5BYoAtlgDXwBU2A90oL3QCfItzgncv3AF6kpbgfvbOQkyZT/EAnBh6aReQMqwWWQBxrBd567DSbtpjgXPGMtPjyBQBSYBmMW55IoFEgtGDH1+Qpe8hol4A64CybMgkOgLMxRegpS+KNXU88vIBmwkAtkm6O3DBJBm5WgfIurICEMwWn+E3Oq2P4BXUGusQVecRaLQRrL3JHgWzAK4sMQ/G3z+RW2UkZXQ7jODAUlOWZByS45q/xlGx1if7XfvhOreImtLMCsEPpXsD0Ai04ITiorvTdI33RQx9efzJXlvASHlMXzALTa9LsE/MoW1+3URr1LsUCeg498vJBNuhR0sB7nKTuC38laPMGV+YLvbxK7FIJq8N7JWjxIKb/N+Tnwmq/lkWOcksdG8AYfUvZOcB/p4f61GaSvnxSA66w88jcLyk3CklK3RfI+2/+CvXxoCifL3Fg3Qug7T6zSxRXfyfdyB1QOPssoZJ5iCjPO8GfiUwQl1+TwT4ABAGG4b4Ynm3YPAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: calc(100% - 30rpx) center; background-size: 40rpx 36rpx; font-size: 30rpx; color: #666; } .pull-all-bg{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,.4); position: fixed; top: 0; left: 0; z-index: 9; } .company-list{ margin: 0 30rpx; background-color: #FFFFFF; } .company-item{ padding: 0 40rpx; font-size: 30rpx; line-height: 84rpx; color: #333; } .company-item.cur{ background-color: #0073bc; color: #FFFFFF; } .cate-nav-bg{ box-sizing: border-box; width: 160rpx; padding: 121rpx 0 130rpx; position: fixed; left: 0; overflow: hidden; } .cate-nav-bg.to-top{ padding-top: 20rpx; } .cate-nav{ box-sizing: border-box; width: 160rpx; height: 100%; padding-top: 35rpx; border-radius: 0 10rpx 0 0; background: #FFFFFF; overflow-y: auto; } .cate-nav-item{ line-height: 86rpx; color: #000000; text-align: center; } .cate-nav-item.active{ background-color: #0073bc; color: #FFFFFF; } .shop-list-bg { width: calc(100vw - 210rpx); height: 100%; margin-left: 180rpx; margin-top: 121rpx; } .shop-list-bg.to-top{ margin-top: 20rpx; } .cate-nav::-webkit-scrollbar{ width: 0; height: 0; } .shop-list-bg .tips, .cate-nothing-tips{ font-size: 24rpx; color: #999; line-height: 2; text-align: center; margin-top: 8rpx; } .shop-item{ width: calc(33.33% - 20rpx); margin: 30rpx 30rpx 0 0; } .shop-list-bg .shop-item:nth-of-type(3n){ margin-right: 0; } .shop-list-bg .shop-item:nth-of-type(-n+3){ margin-top: 0; } .shop-item .img{ box-sizing: border-box; justify-content: center; align-items: center; width: 100%; height: 160rpx; background-color: #FFFFFF; border: 2rpx solid #d6d6d6; border-radius: 10rpx; overflow: hidden; } .shop-item .img image{ max-width: 100%; max-height: 100%; } .shop-item .txt{ font-size: 24rpx; line-height: 1.5; text-align: center; color: #333333; margin: 10rpx 0; } /* 商品列表 */ .shop-nav{ width: 100%; height: 76rpx; background-color: #FFFFFF; position: fixed; left: 0; z-index: 99; } .shop-nav .shop-sort, .shop-nav .shop-cate{ justify-content: center; align-items: center; width: 50%; font-size: 30rpx; color: #666666; position: relative; } .shop-nav image{ width: 13rpx; height: 25rpx; margin-left: 18rpx; } .shop-cate-list, .shop-sort-list{ justify-content: space-around; width: 100%; background-color: #FFFFFF; border-top: 2rpx solid #eaeaea; position: absolute; top: 76rpx; left: 0; } .shop-cate-list .shop-cate-item, .shop-sort-list .shop-sort-item{ width: 100%; padding: 0 75rpx; font-size: 30rpx; color: #333333; line-height: 84rpx; } .shop-cate-list .shop-cate-item.cur, .shop-sort-list .shop-sort-item.cur{ background-color: #0073bc; color: #FFFFFF; } .shop-bg{ box-sizing: border-box; padding: 76rpx 30rpx 0; } .shop-ul { justify-content: space-between; } .shop-ul .shop-li{ width: calc(50% - 13rpx); border-radius: 10rpx; overflow: hidden; background-color: #FFFFFF; margin-top: 30rpx; } .shop-ul .shop-li .img{ width: 100%; height: 215rpx; overflow: hidden; } .shop-ul .shop-li .img image{ width: 100%; min-height: 215rpx; } .shop-ul .shop-li .txt{ padding: 22rpx 22rpx 0; font-size: 24rpx; line-height: 1.5; color: #000000; margin-bottom: 22rpx; } /* 商品详情 */ .shop-summary{ padding: 0 30rpx 80rpx; background-color: #FFFFFF; } .shop-title{ font-size: 36rpx; line-height: 1.5; color: #000; text-align: justify; padding-top: 20rpx; font-weight: bold; } .shop-txt{ align-items: flex-end; } .shop-txt .left{ width: 50%; } .shop-customized{ display: inline-block; border-radius: 20rpx; font-size: 24rpx; line-height: 40rpx; background-color: #0073bc; color: #FFFFFF; padding: 0 24rpx; margin: 16rpx 0 12rpx -6rpx; -webkit-transform: scale(.9); transform: scale(.9); } .shop-pric{ font-size: 48rpx; font-weight: bold; line-height: 1.2; color: #000000; } .shop-pric-vip{ font-size: 30rpx; color: #0073bc; line-height: 1.5; margin-top: 10rpx; } .shop-txt .right{ justify-content: flex-end; align-items: center; width: 50%; margin-bottom: 8rpx; } .collection-btn{ width: 60rpx; margin-right: 30rpx; } .collection-btn.active{ width: 74rpx; } .collection-btn image{ width: 45rpx; height: 41rpx; margin: 0 auto; -webkit-filter: invert(100%) grayscale(100%); -moz-filter: invert(100%) grayscale(100%); -ms-filter: invert(100%) grayscale(100%); -o-filter: invert(100%) grayscale(100%); filter: invert(100%) grayscale(100%); } .collection-btn.active image{ -webkit-filter: invert(0) grayscale(0); -moz-filter: invert(0) grayscale(0); -ms-filter: invert(0) grayscale(0); -o-filter: invert(0) grayscale(0); filter: invert(0) grayscale(0); } .share-btn{ width: 60rpx; position: relative; } .share-btn image{ width: 50rpx; height: 41rpx; margin: 0 auto; } .collection-btn text, .share-btn text{ display: block; width: 100%; font-size: 24rpx; line-height: 1.5; text-align: center; color: #666666; margin-top: 10rpx; } .share-btn>button{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; } .specs-btn{ flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 86rpx; padding: 0 20rpx; margin-top: 40rpx; border: 2rpx solid #999999; } .specs-btn text{ width: calc(100% - 92rpx); font-size: 30rpx; color: #999999; } .specs-btn image:first-child{ width: 33rpx; height: 37rpx; } .specs-btn image:last-child{ width: 13rpx; height: 26rpx; } .shop-detail{ padding: 0 30rpx; } .shop-detail-tab{ justify-content: center; align-items: center; margin: 30rpx; } .shop-detail-tab .tab-btn{ width: 220rpx; line-height: 66rpx; margin: 0 25rpx; border-radius: 10rpx; font-size: 30rpx; color: #000000; text-align: center; } .shop-detail-tab .tab-btn.cur{ background-color: #0073bc; color: #FFFFFF; } .shop-detail-tab .tab-btn:first-child{ margin-left: 0; } .shop-detail-tab .tab-btn:last-child{ margin-right: 0; } .shop-detail-txt{ color: #8c8c9b; font-size: 24rpx; line-height: 1.8; } .shop-detail-txt image{ width: 100%; height: auto; } .kit-shop-btns, .shop-btns{ box-sizing: border-box; justify-content: space-between; width: 100%; height: 120rpx; background-color: #FFFFFF; padding: 20rpx 30rpx; position: fixed; left: 0; bottom: 0; z-index: 99; } .kit-shop-btns .btn, .shop-btns .btn{ width: calc(50% - 10rpx); border-radius: 10rpx; font-size: 36rpx; line-height: 80rpx; text-align: center; color: #000000; background-color: #c9c9c9; } .shop-btns .btn-grey{ color: #000000 !important; background-color: #c9c9c9 !important; } .kit-shop-btns .btn:first-child{ width: 100%; background-color: #0073bc; color: #FFFFFF; } .shop-btns .btn:last-child{ background-color: #0073bc; color: #FFFFFF; } .specs-detail-bg{ box-sizing: border-box; width: 100%; background-color: #FFFFFF; padding: 30rpx; border-radius: 30rpx; position: fixed; left: 0; bottom: 0; z-index: 999; } .specs-detail{ width: 100%; color: #000000; position: relative; } .specs-detail .close-specs{ width: 66rpx; height: 66rpx; border-radius: 100%; position: absolute; top: -8rpx; right: -14rpx; } .specs-detail .close-specs image{ width: 100%; height: 100%; } .specs-detail .price{ font-size: 36rpx; line-height: 1.8; text-align: center; } .specs-detail .price text{ font-size: 32rpx; } .specs-ul{ margin-top: 20rpx; } .specs-ul text{ font-size: 30rpx; line-height: 1.8; } .specs-ul .specs-li{ align-items: center; height: 106rpx; padding: 0 40rpx; border: 2rpx solid #d2d2d2; margin-top: 14rpx; font-size: 24rpx; line-height: 1.8; color: #666666; } .specs-ul .specs-li.checked{ background-color: #0073bc; color: #FFFFFF; padding: 0 25rpx; } .specs-detail .specs-detail-btn{ width: 100%; background-color: #0073bc; border-radius: 10rpx; margin: 50rpx 0 10rpx; color: #FFFFFF; font-size: 36rpx; line-height: 98rpx; text-align: center; } /* 套件列表 */ .kit-list .kit-item{ background-color: #FFFFFF; margin-top: 30rpx; padding: 25rpx 30rpx; } .kit-list .kit-item:first-child{ margin-top: 20rpx; } .kit-item .kit-title{ font-size: 30rpx; line-height: 1.8; color: #000000; margin-top: 10rpx; font-weight: bold; } .kit-item .kit-compose{ font-size: 24rpx; line-height: 1.8; color: #999999; } .kit-item .kit-img{ height: 450rpx; border-radius: 10rpx; margin: 22rpx 0; overflow: hidden; } .kit-item .kit-img image{ width: 100%; min-height: 450rpx; } .kit-item .compose-list-bg{ overflow-x: auto; } .kit-item .compose-list-bg::-webkit-scrollbar{ width: 0; height: 0; } .kit-item .compose-list{ width: auto; flex-wrap: nowrap; } .compose-list .compose-item{ width: 270rpx; margin-right: 22rpx; border-radius: 10rpx; overflow: hidden; } .compose-list .compose-item:last-child{ margin-right: 0; } .compose-list .compose-item image{ width: 100%; min-height: 176rpx; } .compose-list .compose-item .compose-title{ font-size: 24rpx; line-height: 1.8; margin-top: 16rpx; text-align: center; } /* 套件简介 */ .kit-summary{ padding-bottom: 50rpx; } .shop-txt .kit-compose{ font-size: 24rpx; line-height: 1.8; color: #999999; margin-bottom: 16rpx; } .kit-contain{ padding: 20rpx 30rpx; } .kit-contain .contain-h2{ font-size: 30rpx; color: #000000; line-height: 1.5; font-weight: bold; margin: 30rpx 0 8rpx; } .kit-contain .contain-list{ justify-content: space-between; } .contain-list .contain-item{ width: calc(50% - 13rpx); background-color: #FFFFFF; border-radius: 10rpx; margin-top: 30rpx; overflow: hidden; } .contain-list .contain-item .contain-img{ height: 214rpx; overflow: hidden; } .contain-list .contain-item .contain-img image{ width: 100%; min-height: 214rpx; } .contain-list .contain-item .contain-title{ padding: 16rpx 22rpx; font-size: 24rpx; color: #000000; line-height: 1.8; text-align: justify; } /* 新闻详情 */ .news-video-img{ height: 500rpx; position: relative; } .news-video-img>image{ width: 100%; min-height: 500rpx; } .news-video-btn{ width: 160rpx; height: 160rpx; border-radius: 100%; overflow: hidden; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .news-video-btn image{ width: 100%; height: 100%; } .news-video-content{ height: 100vh; background-color: rgba(0,0,0,.4); position: fixed; left: 0; top: 0; z-index: 9; } video#my-video{ min-height: 400rpx; position: fixed; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 999; } .news-detail{ padding: 35rpx 30rpx; font-size: 24rpx; line-height: 1.8; color: #8c8c9b; } .news-detail image{ width: 100%; height: auto; } .news-summary{ padding-bottom: 60rpx; } .news-txt{ margin-top: 40rpx; } .news-txt .news-author, .news-txt .news-time{ font-size: 24rpx; color: #999; line-height: 1.8; } .news-txt .news-author{ text-indent: 4rpx; } .news-txt .right{ margin-bottom: 4rpx; } /* 我的 */ .my-herder{ margin-bottom: 20rpx; padding: 20rpx 30rpx; background-color: #FFFFFF; } .my-portrait{ width: 220rpx; height: 220rpx; margin: 0 auto; position: relative; } .my-portrait-img{ width: 220rpx; height: 220rpx; border-radius: 100%; overflow: hidden; } .my-portrait-img image{ width: 100%; min-height: 220rpx; } .my-vip{ justify-content: center; align-items: center; width: 50rpx; height: 50rpx; box-shadow: 0 0 48rpx rgba(0,0,0,.52); background-color: #FFFFFF; border-radius: 100%; position: absolute; right: 0; bottom: 5rpx; } .my-vip image{ width: 36rpx; height: 33rpx; } .my-nick-name{ font-size: 36rpx; line-height: 1.5; color: #000000; margin: 20rpx 0; text-align: center; } .my-order{ flex-wrap: nowrap; align-items: flex-end; margin: 60rpx 0 10rpx; } .my-order .item{ width: 25%; text-align: center; font-size: 30rpx; line-height: 1.8; color: #000000; } .my-order .item>text{ color: #666666; } .my-content{ background-color: #FFFFFF; padding: 30rpx; } .my-content .item{ justify-content: space-between; align-items: center; flex-wrap: nowrap; height: 96rpx; } .my-content .item .left{ flex-wrap: nowrap; align-items: center; width: 100%; justify-content: space-between; } .my-content .item .img{ justify-content: center; align-items: center; width: 60rpx; margin-right: 10rpx; } .my-content .item .title{ font-size: 30rpx; color: #000000; } .my-content .item .left .tips{ font-size: 24rpx; color: #8c8c9b; } .my-content .item .more{ margin-left: 20rpx; } .my-content .item .more image{ width: 14rpx; height: 26rpx; } .my-content .item .btn{ box-sizing: border-box; width: 90rpx; height: 40rpx; background-color: #dedede; border-radius: 20rpx; padding: 2rpx; } .my-content .item .btn>view{ width: 36rpx; height: 36rpx; border-radius: 100%; background-color: #FFFFFF; } .my-content .item .btn.show{ justify-content: flex-end; background-color: #0073bc; } .my-content .item .btn.show>view{ background-color: #FFFFFF; } /* 申请会员 */ .vip-box-bg{ box-sizing: border-box; width: 100%; padding: 30rpx 80rpx 0; position: fixed; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 999; } .vip-box{ box-sizing: border-box; width: 100%; background-color: #FFFFFF; border-radius: 28rpx; padding: 40rpx 60rpx; position: relative; } .vip-box .vip-close{ display: flex; justify-content: center; align-items: center; width: 60rpx; height: 60rpx; background-color: #d9d9d9; border-radius: 100%; position: absolute; top: -30rpx; right: -30rpx; } .vip-box .vip-close>text{ font-size: 30rpx; -webkit-transform: scaleX(1.3); transform: scaleX(1.3); color: #FFFFFF; } .vip-box .title{ font-size: 32rpx; line-height: 1.5; text-align: center; color: #000000; } .vip-box .vip-item{ margin-top: 20rpx; } .vip-box .vip-item .tips{ font-size: 28rpx; color: #666666; line-height: 1.5; margin-bottom: 10rpx; } .vip-box .vip-item .tips>text{ color: #d50000; margin-left: 4rpx; } .vip-box .input{ box-sizing: border-box; width: 100%; height: 86rpx; border-bottom: 2rpx solid #c9c9c9; font-size: 28rpx; color: #000000; } .vip-box .btn{ width: 100%; background-color: #0073bc; border-radius: 30rpx; font-size: 30rpx; line-height: 96rpx; text-align: center; color: #FFFFFF; margin-top: 70rpx; } .vip-box .vip-btns .btn:first-child{ background-color: #c9c9c9; color: #000000; } /* 个人中心 */ .ucenter{ padding: 30rpx; margin-top: 20rpx; background-color: #FFFFFF; } .ucenter .item{ flex-wrap: nowrap; align-items: center; height: 100rpx; } .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:nth-of-type(1){ 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{ width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 9; } /* 修改弹窗 */ .edit-box-bg{ box-sizing: border-box; width: 100%; padding: 30rpx 45rpx 0; position: fixed; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 999; } .edit-box{ box-sizing: border-box; width: 100%; background-color: #FFFFFF; border-radius: 28rpx; padding: 58rpx; position: relative } .edit-box .edit-close{ display: flex; justify-content: center; align-items: center; width: 60rpx; height: 60rpx; background-color: #d9d9d9; border-radius: 100%; position: absolute; top: -30rpx; right: -30rpx; } .edit-box .edit-close>text{ font-size: 30rpx; -webkit-transform: scaleX(1.3); transform: scaleX(1.3); color: #FFFFFF; } .edit-box .title{ font-size: 32rpx; line-height: 1.5; margin-bottom: 24rpx; text-align: center; color: #000000; } .edit-box .subtitle{ font-size: 28rpx; line-height: 1.5; margin-bottom: 20rpx; color: #666666; } .edit-box .subtitle>text{ color: #d50000; margin-left: 4rpx; } .edit-box .input, .edit-box .textarea{ box-sizing: border-box; width: 100%; height: 86rpx; border-bottom: 2rpx solid #c9c9c9; font-size: 28rpx; color: #000000; } .edit-box .textarea{ height: 150rpx; padding: 10rpx 0; line-height: 1.8; } .edit-box .btn{ width: 100%; background-color: #0073bc; border-radius: 30rpx; font-size: 30rpx; line-height: 96rpx; text-align: center; color: #FFFFFF; margin-top: 70rpx; } /* 免责声明 */ .disclaimers{ box-sizing: border-box; padding: 20rpx 30rpx; background-color: #FFFFFF; } .disclaimers-title{ font-size: 30rpx; line-height: 1.5; color: #000000; margin-bottom: 30rpx; text-align: center; } .disclaimers-txt{ font-size: 24rpx; line-height: 1.8; color: #8c8c9b; text-align: justify; } /* 关于我们 */ .about-bg{ box-sizing: border-box; padding: 20rpx 30rpx; background-color: #FFFFFF; } .about-map{ border-radius: 30rpx; border: 2rpx solid #8c8c9b; overflow: hidden; } .navigation-btn{ background-color: #0073bc; border-radius: 30rpx; line-height: 98rpx; font-size: 36rpx; color: #FFFFFF; text-align: center; margin-top: 30rpx; } .about-title{ font-size: 48rpx; line-height: 1.5; margin: 70rpx 0; color: #000000; } .about-txt{ font-size: 24rpx; line-height: 1.8; color: #8c8c9b; text-align: justify; } /* 订单管理 */ .order-nav{ flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 15rpx 30rpx; background-color: #FFFFFF; position: -webkit-sticky; position: sticky; left: 0; z-index: 99; } .order-nav .item{ padding: 0 40rpx; border-radius: 20rpx; font-size: 30rpx; color: #8c8c9b; line-height: 64rpx; } .order-nav .item.cur{ background-color: #0073bc; color: #FFFFFF; } .order-list{ padding: 15rpx 30rpx 20rpx; } .order-item{ padding: 28rpx 0; background-color: #FFFFFF; border-radius: 30rpx; margin-top: 30rpx; } .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-code .status{ color: #0073bc; } .order-code .status.cur{ color: #999999; } .order-item .item-bg{ padding: 0 15rpx; /* margin-top: 18rpx; */ } .order-item .item{ flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 30rpx 0; border-bottom: 2rpx solid #eaeaea; } .order-item .item .img{ width: 230rpx; height: 150rpx; border-radius: 10rpx; overflow: hidden; } .order-item .item .img image{ width: 100%; min-height: 150rpx; } .order-item .item .txt{ width: calc(100% - 255rpx); } .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: 3rpx 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; margin-top: 25rpx; } .order-item .total-price>text{ font-size: 30rpx; color: #f81c1c; font-weight: bold; } .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.cur{ border: 2rpx solid #0073bc; background-color: #0073bc; color: #FFFFFF; } /* 订单详情 */ .order-info-bg{ padding: 0 30rpx; margin-top: 20rpx } .order-info{ padding: 20rpx; background-color: #FFFFFF; border-radius: 30rpx; } .order-info>view{ flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 70rpx; font-size: 30rpx; color: #000000; } .order-info>view text:first-child{ width: 140rpx; } .order-info>view text:last-child{ width: calc(100% - 140rpx); text-align: right; } .order-information{ font-size: 30rpx; line-height: 1.5; padding: 0 20rpx; } .order-item .total-price-detail{ border-top: 2rpx solid #eaeaea; margin-top: 0; } .order-item .total-price-detail>text{ width: 100%; text-align: right; margin-top: 30rpx; } .order-item-detail{ margin-top: 10rpx; } .order-item-detail .item:nth-last-of-type(1){ border-bottom: 0; } .order-btns{ padding: 20rpx 50rpx; } .order-btns .btn{ width: 100%; } .contact-info-bg{ padding: 0 30rpx; margin-top: 20rpx } .contact-info{ padding: 25rpx 35rpx; background-color: #FFFFFF; border-radius: 30rpx; } .contact-info .title{ font-size: 30rpx; line-height: 80rpx; color: #000000; } .contact-info .name{ font-size: 30rpx; line-height: 1.5; font-weight: bold; margin-bottom: 10rpx; } .contact-info .name>text:first-child{ margin-right: 18rpx; } .contact-info .item{ font-size: 24rpx; line-height: 2; color: #8c8c9b; } /* 商家二维码 */ .customer-all-bg{ box-sizing: border-box; width: 100vw; height: 100vh; padding-left: 30rpx; padding-right: 30rpx; background-color: rgba(0,0,0,.86); position: fixed; left: 0; top: 0; z-index: 9; } .customer-txt{ padding: 86rpx 34rpx 60rpx; background-color: #FFFFFF; border-radius: 30rpx; margin-top: 136rpx; } .customer-txt>image{ display: block; width: 338rpx; height: 338rpx; margin: 0 auto; } .customer-txt>text{ display: block; font-size: 30rpx; line-height: 1.5; color: #000000; text-align: center; margin: 42rpx 0 70rpx; } .customer-txt>.btn{ border-radius: 30rpx; background-color: #0073bc; font-size: 36rpx; line-height: 98rpx; text-align: center; color: #FFFFFF; } /* 提交订单 */ .settlement-content{ padding: 20rpx 30rpx; } .settlement-title{ font-size: 38rpx; line-height: 1.5; color: #000000; margin: 40rpx 0 15rpx; } .settlement-tips{ font-size: 24rpx; line-height: 1.5; color: #000000; padding-bottom: 30rpx; } .settlement-item { margin-top: 30rpx; } .settlement-item .name{ font-size: 24rpx; line-height: 2; color: #999; } .settlement-item .txt{ flex-wrap: nowrap; align-items: center; height: 90rpx; padding-bottom: 10rpx; border-bottom: 2rpx solid #000000; font-size: 30rpx; color: #000000; } .settlement-item .txt>text{ width: 136rpx; } .settlement-item .txt>input{ width: calc(100% - 136rpx); } .settlement-btn{ box-sizing: border-box; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; height: 130rpx; background-color: #FFFFFF; position: fixed; left: 0; bottom: 0; z-index: 999; } .settlement-btn .btn{ width: calc(100% - 130rpx); background-color: #0073bc; border-radius: 30rpx; line-height: 98rpx; text-align: center; font-size: 36rpx; color: #FFFFFF; } /* 提交成功 */ .finish-content{ padding: 20rpx 30rpx; } .finish-img{ box-sizing: border-box; width: 314rpx; height: 314rpx; padding: 30rpx; background-color: #FFFFFF; margin: 50rpx auto; } .finish-img>image{ width: 254rpx; height: 254rpx; } .finish-code{ font-size: 48rpx; line-height: 1.2; text-align: center; color: #000000; } .finish-title{ font-size: 30rpx; line-height: 1.5; color: #0c0c0c; text-align: center; margin: 40rpx 0 34rpx; } .finish-tips{ font-size: 30rpx; line-height: 1.8; color: #999; text-align: center; } .finish-content .cope-btn{ width: calc(100% - 48rpx); line-height: 98rpx; background-color: #0073bc; border-radius: 30rpx; font-size: 36rpx; color: #FFFFFF; text-align: center; margin: 60rpx auto 0; } .finish-content .shoping-btn{ width: calc(100% - 48rpx); line-height: 94rpx; border: 2rpx solid #000000; border-radius: 30rpx; font-size: 36rpx; color: #000000; text-align: center; margin: 50rpx auto 0; } /* 项目页面样式 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); } }