@charset "utf-8";

.body-page-2{background:#08112d;}
.page2-box{}
.page2-box .left-column{flex-grow: .8;width: 1px;margin-right: 1em;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;-ms-align-items: stretch;
align-items: stretch;}
.page2-box .left-column .top-row{position: relative;height: 1px;flex-grow: 1;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.page2-box .left-column .top-row .map-bar{position: relative;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;margin-left:auto;margin-right:auto;z-index:2;}
.page2-box .left-column .bottom-row{position: relative;margin-top: -1rem;-webkit-flex-shrink: 0;flex-shrink: 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;z-index:2;}
.page2-box .right-column{flex-grow: 1;width: 1px;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;}
.page2-box .right-column .top-row{-webkit-flex-shrink: 0;flex-shrink: 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;margin-bottom: .4rem;}
.page2-box .right-column .top-row .left-lump{flex-grow: 1;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.page2-box .right-column .top-row .right-lump{-webkit-flex-shrink: 0;flex-shrink: 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.page2-box .right-column .bottom-row{height: 1px;flex-grow: 1;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}

.m-data-bbox{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;}
.m-data-bbox .m-title{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: center;align-items: center;}
.m-data-bbox .m-title .pic{margin-right: .2rem;}
.m-data-bbox .m-title .pic img{display: block;height: .6rem;}
.m-data-bbox .m-title h2{flex-grow: 1;}
.m-data-bbox .m-title h2 .n2{font-size: .3rem;}
.m-data-bbox .m-title h2 .s2{font-size: .3rem;}
.m-data-bbox .m-title h3{-webkit-flex-shrink: 0;flex-shrink: 0;font-size: .3rem;}
.m-data-bbox .m-content{}
.map{background: #fff;}


.m-bg-canvas{position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index:1;}
.m-map-grid{position: relative;flex-grow: 1;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;background: url(../img/map-bg.png) center/contain no-repeat;z-index:2;}
.m-map-grid dl{height: 1px;flex-grow: 1;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.m-map-grid dd,
.m-map-grid dt{position: relative;width: 1px;flex-grow: 1;}
/*.m-map-grid dt{background: rgba(255,255,255,0);-webkit-animation-duration:4.4s;animation-duration:4.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:animate-fadeo;animation-name:animate-fadeo;}*/
.m-map-grid dt em{display: block;height: 100%;width: 100%;overflow: hidden}
.m-map-grid dt.current em:after{content:"";display: block;height: 100%;width: 100%;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(#2fffff));background-image:-webkit-linear-gradient(rgba(0,0,0,0),#2fffff);background-image:-moz-linear-gradient(rgba(0,0,0,0),#2fffff);background-image:-ms-linear-gradient(rgba(0,0,0,0),#2fffff);background-image:-o-linear-gradient(rgba(0,0,0,0),#2fffff);background-image:linear-gradient(rgba(0,0,0,0),#2fffff);}
.m-map-grid dt.current em:after{-webkit-animation-name:animate-grid;animation-name:animate-grid;}

@keyframes animate-fadeo{
	0%{background: rgba(255,255,255,0);}
	50%{background: rgba(255,255,255,0.1);}
}

@keyframes animate-grid{
	0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
	100%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
}

.m-data-bbox{padding: .3rem;flex-grow: 1;background: rgba(1,28,84,.5);}
.m-data-bbox .data-icon{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;padding: .2rem 0 .4rem;}
.m-data-bbox .data-icon li{flex-grow: 1;}
.m-data-bbox .data-icon .box{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;text-align: center;-ms-align-items: center;align-items: center;justify-content: center;margin-right: .2rem;}
.m-data-bbox .data-icon h2{width: 2rem;height: 2rem;margin-bottom: .2rem;font-size: 1rem;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;justify-content: center;-ms-align-items: center;align-items: center;line-height: 1.8;background: url(../img/icon-bg.png) bottom center/100% auto no-repeat;font-size: 1rem;color: #2fffff;-webkit-animation-duration:6s;animation-duration:6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:animate-font;animation-name:animate-font;animation-timing-function: linear;-webkit-animation-timing-function: linear;}
.m-data-bbox .data-icon .num{padding-right: 1rem;color: #2fffff;text-align: center;}
.m-data-bbox .data-icon .num span{font-size: .4rem;}
.m-data-bbox .data-icon .num i{font-size: .3rem;vertical-align: super;}
.m-data-bbox .data-place{text-align: right;}
@keyframes animate-font{
	0%,100%{font-size: 1rem;}
	50%{font-size: 1.1rem;}
}

.map-cover{flex-grow: 1;}

.wea-tip{position: absolute;top: 1rem;left: -9rem;width: 7.8rem;padding: .4rem;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: flex-end;align-items: flex-end;background: #040c22;-webkit-box-shadow:0 0 .4rem #5c8ad7;-moz-box-shadow:0 0 .4rem #5c8ad7;box-shadow:0 0 .4rem #5c8ad7;-webkit-border-top-right-radius: .2rem;-moz-border-top-right-radius:.2rem;border-top-right-radius: .2rem;-webkit-border-bottom-right-radius: .2rem;-moz-border-bottom-right-radius:.2rem;border-bottom-right-radius: .2rem;-webkit-transition: .3s ease-out;transition: .3s ease-out;}
.wea-tip.show{left:-.4rem;}
.wea-tip .title{text-align: center;padding-right: .4rem;margin-right: .4rem;border-right: 1px solid #252f48;color: #e5eafd;line-height: 1.6;-webkit-flex-shrink: 0;flex-shrink: 0;}
.wea-tip .title h2{font-weight: bold;}
.wea-tip .title h3{font-size: .3rem;}
.wea-tip .title img{display: block;margin-left:auto;margin-right:auto;width: 1rem;margin-bottom: .2rem;}
.wea-tip .cont{flex-grow: 1;line-height: 1.6;}
.wea-tip .cont .row-1{text-align: center;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: flex-end;
align-items: flex-end;margin-bottom: .3rem;}
.wea-tip .cont h2{width: 1px;flex-grow: 1.4;}
.wea-tip .cont h3{width: 1px;flex-grow: 1;}
.wea-tip .cont .row-1 i.icon{font-size: 1.2rem;line-height: 1;}
.wea-tip .cont h2{text-align: center;}
.wea-tip .cont .row-1 h2{font-size: .5rem;}
.wea-tip .cont .row-2{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;text-align: center;}
.wea-tip .pn{position: absolute;top: 50%;right: -.8rem;width: .8rem;height: 1rem;margin-top: -.5rem;line-height: 1rem;background: #040c22;-webkit-box-shadow:0 0 .4rem #5c8ad7;-moz-box-shadow:0 0 .4rem #5c8ad7;box-shadow:0 0 .4rem #5c8ad7;text-align: center;-webkit-border-top-right-radius: .1rem;-moz-border-top-right-radius:.1rem;border-top-right-radius: .1rem;-webkit-border-bottom-right-radius: .1rem;-moz-border-bottom-right-radius:.1rem;border-bottom-right-radius: .1rem;cursor: pointer;}
.wea-tip .pn:after{display: block;content:"";position: absolute;top: 0;bottom: 0;left: -.22rem;width: .3rem;background: #040c22;}
.wea-tip .pn:before{content:"\e653";font-family: 'iconfont';}
.wea-tip.show .pn:before{content:"\e652";}


.data-addr{}
.data-addr li{position: absolute;}
.data-addr li:after{display: block;content:"";width: .18rem;height: .18rem;background: #8ba8df;-webkit-border-radius: 50%;-moz-border-radius:50%;border-radius: 50%;-webkit-transition: .3s ease-out;transition: .3s ease-out;}
.data-addr li.current:after{width: .24rem;height: .24rem;background: #2fffff;-webkit-box-shadow:0 0 .4rem rgba(255,255,255,0.8);-moz-box-shadow:0 0 .4rem rgba(255,255,255,0.8);box-shadow:0 0 .4rem rgba(255,255,255,0.8);}

.data-addr li.baihe{top: 60%;left: 20%;}
.data-addr li.baisha{top: 46%;left: 36%;}
.data-addr li.jianhua{top: 20%;left: 73%;}
.data-addr li.chuanxin{top: 36%;left: 85%;}
.data-addr li.meijia{top: 81%;left: 59%;}
.data-addr li.maoxiang{top: 62%;left: 66%;}
.data-addr li.shenghua{top: 70%;left: 38%;}

.data-addr li.warn:after{background: #F00;-webkit-box-shadow:0 0 0;-moz-box-shadow:0 0 0;box-shadow:0 0 0;}
.data-addr li.warn i{}
.data-addr li i:after,
.data-addr li i:before,
.data-addr li em:before,
.data-addr li em:after{display: block;position: absolute;top: -50%;right: -50%;bottom: -50%;left: -50%;content:"";border: 1px solid #f00;box-shadow: 0px 0px .2rem #f00;-webkit-border-radius: 50%;-moz-border-radius:50%;border-radius: 50%;transform: scale(.1);}
.data-addr li i:after{animation: ani-warn 2s infinite;}
.data-addr li i:before{animation: ani-warn 2s .5s infinite;}
.data-addr li em:before{animation: ani-warn 2s 1s infinite;}
.data-addr li em:after{animation: ani-warn 2s 1.5s infinite;}
@keyframes ani-warn{
		0% {transform: scale(.1);opacity:1;}
		100% {transform: scale(3);opacity:0;}
	}

.data-addr .baihe-2{margin-top: -3%;margin-left: 3%;}
.data-addr .meijia-2{margin-top: -3%;margin-left: 3%;}
.data-addr .meijia-3{margin-top: -1%;margin-left: 5%;}
.data-addr .meijia-4{margin-top: 3%;margin-left: 4%;}
.data-addr .shenghua-2{margin-top: 3%;margin-left: 4%;}
.data-addr .shenghua-3{margin-top: -3%;margin-left: 4%;}
.data-addr .chuanxin-2{margin-top: 3%;margin-left: 4%;}
.data-addr .jianhua-2{margin-top: 3%;margin-left: 4%;}
.data-addr .jianhua-3{margin-top: 3%;margin-left: -4%;}

.data-addr li.current{z-index:3;}


.m-elayer{position: absolute;right:-.3rem;bottom:100%;width: 6.5rem;min-width:150px;margin: ;background: rgba(0,0,0,.6);-webkit-box-shadow:0 0 .8rem #1ad7f0;-moz-box-shadow:0 0 .8rem #1ad7f0;box-shadow:0 0 .8em #1ad7f0;-webkit-border-radius: .1rem;-moz-border-radius:.1rem;border-radius: .1rem;padding: .3rem;z-index:3;}
.m-elayer .title{}
.m-elayer .content{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: center;align-items: center;}
.m-elayer .content .row-1{flex-grow: 1;margin-right: .4rem;text-align: center;}
.m-elayer .content .row-1 h2{line-height: 1.2;}
.m-elayer .content .row-1 h2 span{color: #ffff00;font-size: 1.2rem;vertical-align: middle;}
.m-elayer .content .row-1 h2 i{vertical-align:super;}
.m-elayer .content .row-2{flex-grow:1;}
.m-elayer:after{position:absolute;content:"";display:block;top:100%;right:.6rem;width:0;height:0;border-top:.2rem solid #000000;border-right:.2rem solid #000000;border-bottom:.2rem solid transparent;border-left:.2rem solid transparent;}



.m-ynum{min-height:2.6rem;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.m-ynum li{flex-grow: 1;}
.m-ynum .box{position: relative;margin-left:auto;margin-right:auto;}
.m-ynum .box h2{position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: center;align-items: center;justify-content: center;color: #FFF;font-size: .45rem;}
.m-ynum .box:after{content:"";display: block;margin-left:auto;margin-right:auto;width: 2rem;height: 2rem;background: url(../img/ring.png) center/contain no-repeat;-webkit-animation-duration:8s;animation-duration:8s;animation-timing-function: linear;-webkit-animation-timing-function: linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:animate-rotate;animation-name:animate-rotate;}
.m-ynum .name{text-align: center;}
@keyframes animate-rotate{
	0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
	100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}

.m-ynum2-bbox{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}

.m-ynum2{flex-grow: 1;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;}
.m-ynum2 li{flex-grow: 1;margin-bottom: .1rem;padding:.1rem .4rem;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: center;align-items: center;background: #0a173f;color: #d4e4ff;}
.m-ynum2 li:last-child{margin-bottom: 0;}
.m-ynum2 h2{font-size: .3rem;margin-right: .5rem;flex-grow: 1;}
.m-ynum2 h3{font-weight: bold;font-size: .5rem;}

.m-yujing-bbox{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;}
.m-yujing-bbox .yujing-title{font-weight: bold;color: #dedee0;font-size: .5rem;-webkit-flex-shrink: 0;flex-shrink: 0;}
.m-yujing-bbox .yujing-time{margin-bottom: .3rem;color: rgba(255,255,255,0.7);font-size: .3rem;-webkit-flex-shrink: 0;flex-shrink: 0;}
.m-yujing-bbox .yujing-content{flex-grow: 1;color: rgba(255,255,255,0.8);display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.m-yujing-bbox .yujing-content img{width: 10rem;-webkit-flex-shrink: 0;flex-shrink: 0;-o-object-fit: cover;object-fit: cover;}
.m-yujing-bbox img{max-width:100%;}

.m-article{line-height: 2;}
.m-article img{max-width:50%;}
.m-article .title{margin-bottom: .2rem;color: #edc214;}
.m-article .operation{margin-bottom: .2rem;}
.m-article .cont{margin-bottom: .2rem;text-align: justify;}



.mid-row{margin-bottom: .4rem;}
.m-qihouyi-bbox{}
.m-qihouyi-bbox .title-rw{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: center;align-items: center;margin-bottom: .1rem;}

.m-qihouyi-bbox .title-rw h2{flex-grow: 1;font-weight: bold;}
.m-qihouyi-bbox .title-rw h3{font-size: .3rem;}
.m-qihouyi-bbox .content-rw{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.m-qihouyi-bbox .content-rw .lump-1,
.m-qihouyi-bbox .content-rw .lump-2{position: relative;padding: .1rem .3rem;width: 1px;flex-grow: 1;background: #0b1741;}
.m-qihouyi-bbox .content-rw .lump-1{margin-right: .2rem;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.weather-tt{margin-right: .5rem;margin-bottom: .1rem;}
.weather-tt dt p{word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.change-crop{position: absolute;right: .2rem;top: 0rem;padding: .2rem 0 0 0;z-index:2;}
.change-crop .icon{font-size: .5rem;}
.change-crop .m-ko-options{width: 3rem;font-size: .3rem;}
.change-crop .m-ko-options:before{right: .1rem;}

.m-qihouyi{position: relative;flex-grow: 1;}
.m-qihouyi ul{}
.m-qihouyi li{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-ms-align-items: center;align-items: center;justify-content: center;color: #FFF;line-height: 1.5;padding-left: .4rem;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.m-qihouyi li[data-swiper-row="0"]{border-bottom: 1px solid #22386f;}
.m-qihouyi .icon{margin-right: .2rem;color: #2fffff;}
.m-qihouyi .icon i{font-size: .8rem;}
.m-qihouyi .cont{flex-grow: 1;}
.m-qihouyi .cont h2{margin-bottom: .1rem;}
.m-qihouyi .swiper-pagination{bottom: 0;}
.m-qihouyi .swiper-slide{height: auto;}
.m-qihouyi .swiper-pagination-bullet{-webkit-border-radius: 0;-moz-border-radius:0;border-radius: 0;height: .1rem;width: .3rem;background: #526184;margin: 0 .05rem !important;opacity: .4;}
.m-qihouyi .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #2047a0;opacity: 1;}


.m-weather-chart{position: relative;z-index:1;min-height: 5rem;}
.m-weather-chart .tab-tt{text-align: center;border-bottom: 1px solid #22376c;}
.m-weather-chart .tab-tt i{display: none;}
.m-weather-chart .tab-tt dt{padding: .2rem 0;cursor: pointer;}
.m-weather-chart .tab-tt dt.current:after{content:"";position: absolute;left: 0;right: 0;bottom: -1px;border-bottom: 2px solid #2fffff;}
.m-weather-chart .tab-tt dt.current{color: #2fffff;}
.m-weather-chart .wea-text{position: absolute;top: 0rem;left: 0;right: 0;text-align: center;font-size: .28rem;}
.m-weather-chart .wea-title{display: none;}

.m-fz{position: absolute;display: block;width: .2rem;height: .2rem;display: block;content:"";background: #F00;-webkit-border-radius: 50%;-moz-border-radius:50%;border-radius:50%;-webkit-transition: .3s ease-out;transition: .3s ease-out;cursor: pointer;}


.m-fz i{}
.m-fz i:after,
.m-fz i:before,
.m-fz em:before,
.m-fz em:after{display: block;position: absolute;top: -50%;right: -50%;bottom: -50%;left: -50%;content:"";border: 1px solid #f00;box-shadow: 0px 0px .2rem #f00;-webkit-border-radius: 50%;-moz-border-radius:50%;border-radius: 50%;transform: scale(.1);}
.m-fz i:after{animation: ani-warn 2s infinite;}
.m-fz i:before{animation: ani-warn 2s .5s infinite;}
.m-fz em:before{animation: ani-warn 2s 1s infinite;}
.m-fz em:after{animation: ani-warn 2s 1.5s infinite;}
@keyframes ani-warn{
		0% {transform: scale(.1);opacity:1;}
		100% {transform: scale(3);opacity:0;}
	}
	
.m-map-name{color: #FFF;width: 2rem;}
.m-map-place{position: absolute;-webkit-transform: translate(.2rem,-.5rem);transform: translate(.2rem,-.5rem);}
.m-map-place:after{content:"";width: .6rem;height: .6rem;display: block;background: url(../img/dingwei.png) center/contain no-repeat;cursor: pointer;}
.m-map-place.current:after{-webkit-animation: ball 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;animation: ball 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;-webkit-filter: brightness(120%);-moz-filter:brightness(120%);-o-filter: brightness(120%);-ms-filter: brightness(120%);filter: brightness(120%);}

.m-map-name-0{-webkit-transform: translate(-1rem);transform: translate(-1rem);}
.m-map-place-0{-webkit-transform: translate(-.8rem,-.5rem);transform: translate(-.8rem,-.5rem);}
.m-map-name-1{-webkit-transform: translate(-1rem);transform: translate(-1rem);}
.m-map-place-1{-webkit-transform: translate(-.8rem,-.9rem);transform: translate(-.8rem,-.9rem);}
.m-map-name-4{-webkit-transform: translate(-1rem);transform: translate(-1rem);}
.m-map-place-4{-webkit-transform: translate(-.8rem,-.5rem);transform: translate(-.8rem,-.5rem);}
.m-map-name-5{-webkit-transform: translate(-1rem);transform: translate(-1rem);}
.m-map-place-5{-webkit-transform: translate(-.8rem,-.5rem);transform: translate(-.8rem,-.5rem);}
.m-map-name-6{-webkit-transform: translate(.2rem,.7rem);transform: translate(.2rem,.7rem);}
.m-map-place-6{-webkit-transform: translate(.4rem,.2rem);transform: translate(.4rem,.2rem);}


@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}70%{-webkit-transform:translate3d(0,-6px,0);transform:translate3d(0,-6px,0)}90%{-webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0)}}
@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}70%{-webkit-transform:translate3d(0,-6px,0);transform:translate3d(0,-6px,0)}90%{-webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0)}}
.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}
.ball{-webkit-animation-name:ball;animation-name:ball;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}
@-webkit-keyframes ball {
  0% {
    -webkit-transform: translateY( 0 );
    transform: translateY( 0 );
  }
  100% {
    -webkit-transform: translateY( -.5rem );
    transform: translateY( -.5rem );
  }
}

@keyframes ball {
  0% {
    -webkit-transform: translateY( 0 );
    transform: translateY( 0 );
  }
  100% {
    -webkit-transform: translateY( -.5rem );
    transform: translateY(-.5rem );
  }
}