@font-face {
  font-family: 'icomoon-page-share';
  src:  url('fonts/icomoon-page-share.eot?b737bp');
  src:  url('fonts/icomoon-page-share.eot?b737bp#iefix') format('embedded-opentype'),
    url('fonts/icomoon-page-share.ttf?b737bp') format('truetype'),
    url('fonts/icomoon-page-share.woff?b737bp') format('woff'),
    url('fonts/icomoon-page-share.svg?b737bp#icomoon-page-share') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*  分享按钮图标 */

.fa {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon-page-share' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-map-marker:before {
  content: "\f041";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook:before {
  content: "\f09a";
}
.fa-bars:before {
  content: "\f0c9";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before {
  content: "\f1d7";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-spinner:before {
  content: "\f110";
}

.m-page-bottom-share{
  position: fixed;
  left:0;
  bottom:-47px;
  opacity: 0;
  flex-direction: row;
  width:100%;
  height:68px;
  background-color:rgba(255,255,255,0.5);
  z-index:9999;
  -webkit-transition:bottom .5s,opacity .5s;
          transition:bottom .5s,opacity .5s;
}
.m-page-bottom-share.mini-right{
  display: inline-block;
  width:auto;
  left:auto;
  right:0;
}
.m-page-bottom-share.slideInUp {
  opacity: 1;
  bottom:0;
}

.m-page-bottom-share a{
  color:#5d5d5d;
}
.m-page-bottom-share a:hover{
  color:#111;
}
.m-page-bottom-share .footer-desc {
	color: #bdbdbd;
	font-size: 12px;
	text-align: left;
	line-height: 14px;
	margin-top: 8px;
}
.m-page-bottom-share .middle{
  text-align: center;
  line-height: 68px;
  font-size:14px;
  color:#111;
}
.m-page-bottom-share .middle-text {
  padding: 10px 0;
  width: 350px;
  margin: 0 auto;
}
.m-page-bottom-share .right{
  float: right;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  display: flex;
  flex-direction: row;
  justify-content: flex-end; 
  padding-right: 20px;
}
.m-page-bottom-share .right > div{
  display: inline-block;
  position: relative;
  padding: 0 5px;
}
.m-page-bottom-share .right-complaint .icon-right{
  width: 30px;
  height: 68px;
  color:#111;
  text-align: center;
  line-height: 68px;
  font-size:24px;
}
.m-page-bottom-share .right-complaint .icon-right > a{
  display: inline-block;
  margin-top:12px;
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background: rgba(255,255,255,0.5) url(../images/complaint.png) no-repeat center center;
  background-size:70%;
  opacity: .6;
  -webkit-transition:opacity .6s ease-out;
          transition:opacity .6s ease-out;
}
.m-page-bottom-share .right-complaint .icon-right > a:hover{
  opacity: 1;
}
.m-page-bottom-share .right-share{
  text-align:right;
}
.m-page-bottom-share .sharefield{
  position: static;
  display: inline-block!important;
  margin-right: 30px;
  -webkit-transform: translate(14px,14px);
          transform: translate(14px,14px);
}
.m-page-bottom-share .flyout-wrap .flyout-btn{
  width:28px;
  height:28px;
}
.m-page-bottom-share .flyout-wrap .flyout-btn span{
  line-height: 28px;
  font-size: 18px;
}
@media only screen and (max-width: 735px){
  .m-page-bottom-share .left{
    display: none;
  }
  .m-page-bottom-share .middle{
    text-align: left;
    padding-left:10px;
  }
  .m-page-bottom-share .right{
    padding-right:10px;
  }
  .m-page-bottom-share .sharefield .flyout-wrap {
      height:auto;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li{
    top:auto;
  }

  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(1){
    height:350px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(2){
    height:314px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(3){
    height:278px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(4){
    height:242px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(5){
    height:206px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(6){
    height:170px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(7){
    height:134px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(8){
    height:98px;
  }
  .m-page-bottom-share .flyout-wrap .flyout > li:nth-of-type(9){
    height:62px;
  }
}
.sharefield {
	display:none;
  margin: 0 auto;
  position:fixed;
  right:45px;
  bottom:45px;
  z-index:999999;
}

.flyout-wrap {
  position: relative;
}
.flyout-wrap .flyout {
  position: relative;
  /*margin: 0 0 1px 6px;*/
    width:100%;
    height:100%;
  line-height: 0;
}
.flyout-wrap .flyout > li {
  position: absolute;
  right:0;
  top:-210px;
  display: block;
  height: 210px;
  background: yellow;
  -webkit-transform-origin: 0 bottom;
  transform-origin: 0 bottom;
  /*-webkit-transform-origin: 16px 166px;
  transform-origin: 16px 166px;*/
}
.flyout-wrap .flyout.extend > li{

}
.flyout-wrap .flyout > li:nth-of-type( 1) {
	-webkit-transform: rotate(0deg);
  	transform: rotate(0deg);
}
.flyout-wrap .flyout > li:nth-of-type( 2) {
	-webkit-transform: rotate(-11.25deg);
  	transform: rotate(-11.25deg);
}
.flyout-wrap .flyout > li:nth-of-type( 3) {
	-webkit-transform: rotate(-22.5deg);
  	transform: rotate(-22.5deg);
}
.flyout-wrap .flyout > li:nth-of-type( 4) {
	-webkit-transform: rotate(-33.75deg);
  	transform: rotate(-33.75deg);
}
.flyout-wrap .flyout > li:nth-of-type( 5) {
	-webkit-transform: rotate(-45deg);
  	transform: rotate(-45deg);
}
.flyout-wrap .flyout > li:nth-of-type( 6) {
	-webkit-transform: rotate(-56.25deg);
  	transform: rotate(-56.25deg);
}
.flyout-wrap .flyout > li:nth-of-type( 7) {
	-webkit-transform: rotate(-67.5deg);
  	transform: rotate(-67.5deg);
}
.flyout-wrap .flyout > li:nth-of-type( 8) {
  -webkit-transform: rotate(-78.75.5deg);
    transform: rotate(-78.75deg);
}
.flyout-wrap .flyout > li:nth-of-type( 9) {
  -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.flyout-wrap .flyout > li a {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  overflow: hidden;
  /*text-indent: -99999px;*/
  color:#fff;
  font-size:16px;
  line-height:26px;
  text-align:center;
  background: #444;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px 0, rgba(0, 0, 0, 0.2) 0 0 0 1px, inset rgba(0, 0, 0, 0.5) 0 0 2px 0;
}
.flyout-wrap .flyout > li a:active {
  background: #000;
  border-color: #555;
}
.flyout-wrap .flyout > li a:active span {
  opacity: .3;
}
.flyout-wrap .flyout > li a span {
  /*display: block;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'><path fill='#fff' d='M11.045,9.879l1.906,6.114l-4.949-3.791L3.059,16l1.9-6.117L0,6.114l6.123,0.013L7.998,0l1.879,6.12L16,6.104L11.045,9.879z'/></svg>") no-repeat center center;
  background-size: 16px 16px; */
}
.flyout-wrap .flyout > li a span.icon-mingdao{
  display:block;
  width:26px;
  height:26px;
  /*background: url(../icons/mingdao.png) no-repeat center center;*/
}
.flyout-wrap .flyout-init li {
  display: none;
}
.flyout-wrap .flyout li a {
  /*top: 150px;*/
  bottom:-15px;
  left:-15px;
  opacity: 0;
  -webkit-animation: contract 0.35s ease-out 1 backwards;
  animation: contract 0.35s ease-out 1 backwards;
  -webkit-transition:opacity 1s ease-out;
          transition:opacity 1s ease-out;
}
.flyout-wrap .flyout.expand li a {
  top: 10px;
  opacity: 1;
  -webkit-animation: expand .6s ease 1 backwards;
  animation: expand .6s ease 1 backwards;
}
.flyout-wrap .flyout.fade li a.clicked {
  top: 10px;
  -weblot-animation: clicked 0.5s ease-out 1 forwards;
  animation: clicked 0.5s ease-out 1 forwards;
}
.flyout-wrap .flyout.fade li a:not(.clicked) {
  top: 10px;
  -webkit-animation: fade 0.5s ease-out 1 forwards;
  animation: fade 0.5s ease-out 1 forwards;
}
.flyout-wrap .flyout.fade li a:not(.clicked) span {
  opacity: .1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}
.flyout-wrap .flyout li:nth-of-type(1) a {
  -webkit-animation-delay: 0.40s;
  animation-delay: 0.40s;
}
.flyout-wrap .flyout li:nth-of-type(1) a:not(.clicked) span {
  -webkit-animation: spin1-contract .9s ease-out 1 backwards;
  animation: spin1-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(1) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.flyout-wrap .flyout.expand li:nth-of-type(1) a span {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: spin1-expand .6s ease-out 1 backwards;
  animation: spin1-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(1) a.clicked span {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.flyout-wrap .flyout li:nth-of-type(2) a {
	-webkit-animation-delay: 0.36s;
  	animation-delay: 0.36s;
}
.flyout-wrap .flyout li:nth-of-type(2) a:not(.clicked) span {
  -webkit-animation: spin2-contract .9s ease-out 1 backwards;
  animation: spin2-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(2) a {
  -webkit-animation-delay: 0.04s;
  animation-delay: 0.04s;
}
.flyout-wrap .flyout.expand li:nth-of-type(2) a span {
  -webkit-transform: rotate(11.25deg);
  transform: rotate(11.25deg);
  -webkit-animation: spin2-expand .6s ease-out 1 backwards;
  animation: spin2-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(2) a.clicked span {
  -webkit-transform: rotate(11.25deg);
  transform: rotate(11.25deg);
}
.flyout-wrap .flyout li:nth-of-type(3) a {
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}
.flyout-wrap .flyout li:nth-of-type(3) a:not(.clicked) span {
	-webkit-animation: spin3-contract .9s ease-out 1 backwards;
  animation: spin3-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(3) a {
	-webkit-animation-delay: 0.08s;
  animation-delay: 0.08s;
}
.flyout-wrap .flyout.expand li:nth-of-type(3) a span {
	-webkit-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
  -webkit-animation: spin3-expand .6s ease-out 1 backwards;
  animation: spin3-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(3) a.clicked span {
	-webkit-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}
.flyout-wrap .flyout li:nth-of-type(4) a {
	-webkit-animation-delay: 0.28s;
  animation-delay: 0.28s;
}
.flyout-wrap .flyout li:nth-of-type(4) a:not(.clicked) span {
	-webkit-animation: spin4-contract .9s ease-out 1 backwards;
  animation: spin4-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(4) a {
	-webkit-animation-delay: 0.12s;
  animation-delay: 0.12s;
}
.flyout-wrap .flyout.expand li:nth-of-type(4) a span {
	-webkit-transform: rotate(33.75deg);
  transform: rotate(33.75deg);
  -webkit-animation: spin4-expand .6s ease-out 1 backwards;
  animation: spin4-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(4) a.clicked span {
	-webkit-transform: rotate(33.75deg);
  transform: rotate(33.75deg);
}
.flyout-wrap .flyout li:nth-of-type(5) a {
	-webkit-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.flyout-wrap .flyout li:nth-of-type(5) a:not(.clicked) span {
	-webkit-animation: spin5-contract .9s ease-out 1 backwards;
  animation: spin5-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(5) a {
	-webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
.flyout-wrap .flyout.expand li:nth-of-type(5) a span {
	-webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: spin5-expand .6s ease-out 1 backwards;
  animation: spin5-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(5) a.clicked span {
	-webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.flyout-wrap .flyout li:nth-of-type(6) a {
	-webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.flyout-wrap .flyout li:nth-of-type(6) a:not(.clicked) span {
	-webkit-animation: spin6-contract .9s ease-out 1 backwards;
  animation: spin6-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(6) a {
	-webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.flyout-wrap .flyout.expand li:nth-of-type(6) a span {
	-webkit-transform: rotate(56.25deg);
  transform: rotate(56.25deg);
  -webkit-animation: spin6-expand .6s ease-out 1 backwards;
  animation: spin6-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(6) a.clicked span {
	-webkit-transform: rotate(56.25deg);
  transform: rotate(56.25deg);
}

.flyout-wrap .flyout li:nth-of-type(7) a {
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
.flyout-wrap .flyout li:nth-of-type(7) a:not(.clicked) span {
  -webkit-animation: spin6-contract .9s ease-out 1 backwards;
  animation: spin6-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(7) a {
  -webkit-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.flyout-wrap .flyout.expand li:nth-of-type(7) a span {
  -webkit-transform: rotate(67.5deg);
  transform: rotate(67.5deg);
  -webkit-animation: spin6-expand .6s ease-out 1 backwards;
  animation: spin6-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(7) a.clicked span {
  -webkit-transform: rotate(67.5deg);
  transform: rotate(67.5deg);
}

.flyout-wrap .flyout li:nth-of-type(8) a {
  -webkit-animation-delay: 0.12s;
  animation-delay: 0.12s;
}
.flyout-wrap .flyout li:nth-of-type(8) a:not(.clicked) span {
  -webkit-animation: spin6-contract .9s ease-out 1 backwards;
  animation: spin6-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(8) a {
  -webkit-animation-delay: 0.28s;
  animation-delay: 0.28s;
}
.flyout-wrap .flyout.expand li:nth-of-type(8) a span {
  -webkit-transform: rotate(78.75deg);
  transform: rotate(78.75deg);
  -webkit-animation: spin6-expand .6s ease-out 1 backwards;
  animation: spin6-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(8) a.clicked span {
  -webkit-transform: rotate(78.75deg);
  transform: rotate(78.75deg);
}

.flyout-wrap .flyout li:nth-of-type(9) a {
	-webkit-animation-delay: 0.08s;
  animation-delay: 0.08s;
}
.flyout-wrap .flyout li:nth-of-type(9) a:not(.clicked) span {
	-webkit-animation: spin6-contract .9s ease-out 1 backwards;
  animation: spin6-contract .9s ease-out 1 backwards;
}
.flyout-wrap .flyout.expand li:nth-of-type(9) a {
	-webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}
.flyout-wrap .flyout.expand li:nth-of-type(9) a span {
	-webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: spin6-expand .6s ease-out 1 backwards;
  animation: spin6-expand .6s ease-out 1 backwards;
}
.flyout-wrap .flyout.fade li:nth-of-type(9) a.clicked span {
	-webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

@media only screen and (max-width: 735px){
	.sharefield{
		width:auto;
	}
	.sharefield .flyout-wrap{
		height:379px;
	}
	.sharefield .flyout-wrap .flyout > li{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.sharefield .flyout-wrap .flyout.expand li a span{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.flyout-wrap .flyout > li{
		-webkit-transition:bottom 0.3s;
		transition:bottom 0.3s;
	}
	
	/*.flyout-wrap .flyout.expand > li:nth-of-type(1){
		top:0;
	}
	.flyout-wrap .flyout.expand > li:nth-of-type(2){
		top:36px;
	}
	.flyout-wrap .flyout.expand > li:nth-of-type(3){
		top:72px;
	}
	.flyout-wrap .flyout.expand > li:nth-of-type(4){
		top:108px;
	}
	.flyout-wrap .flyout.expand > li:nth-of-type(5){
		top:144px;
	}
	.flyout-wrap .flyout.expand > li:nth-of-type(6){
		top:180px;
	}
	.flyout-wrap .flyout.expand > li:nth-of-type(7){
		top:216px;
	}*/

  .flyout-wrap .flyout > li:nth-of-type(1){
    height:379px;
  }
  .flyout-wrap .flyout > li:nth-of-type(2){
    height:343px;
  }
  .flyout-wrap .flyout > li:nth-of-type(3){
    height:307px;
  }
  .flyout-wrap .flyout > li:nth-of-type(4){
    height:271px;
  }
  .flyout-wrap .flyout > li:nth-of-type(5){
    height:235px;
  }
  .flyout-wrap .flyout > li:nth-of-type(6){
    height:199px;
  }
  .flyout-wrap .flyout > li:nth-of-type(7){
    height:163px;
  }
  .flyout-wrap .flyout > li:nth-of-type(8){
    height:127px;
  }
  .flyout-wrap .flyout > li:nth-of-type(9){
    height:91px;
  }
  
  .flyout-wrap .flyout > li{
    bottom:0;
  }
}

.flyout-wrap .flyout-btn {
  position: absolute;
  bottom: 0;
  right: -20px;
  bottom: -17px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  overflow: hidden;
  /*text-indent: -99999px;*/
/*   background: #f76f54;
background: -webkit-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
background: linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
border: 4px solid #fff; */
  border:none;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.5);
  outline: none;
  opacity: .6;
  -webkit-transition:opacity .6s ease-out;
          transition:opacity .6s ease-out;
  /* box-shadow: rgba(0, 0, 0, 0.3) 0 3px 8px 0, rgba(0, 0, 0, 0.2) 0 0 0 1px, inset rgba(0, 0, 0, 0.3) 0 0 0 1px, inset rgba(255, 255, 255, 0.3) 0 1px 0 1px; */
}
.flyout-wrap .flyout-btn:hover{
  opacity: 1;
}
.flyout-wrap .flyout-btn span {
  display: block;
  color: #000;
  font-size: 24px;
  text-align: center;
  line-height: 36px;
/*   background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px'><g><path fill='#fff' d='M20,11.402c0,0.453-0.367,0.82-0.822,0.82H0.82c-0.453,0-0.82-0.367-0.82-0.82V8.598 c0-0.454,0.367-0.821,0.82-0.821h18.357C19.633,7.776,20,8.144,20,8.598V11.402z'/><path fill='#fff' d='M8.598,20c-0.453,0-0.821-0.367-0.821-0.82V0.821c0-0.452,0.368-0.82,0.821-0.82h2.804 c0.453,0,0.82,0.368,0.82,0.82V19.18c0,0.453-0.367,0.82-0.82,0.82H8.598z'/></g></svg>") no-repeat center center;
   */  
   -webkit-transition: -webkit-transform .4s ease;
   transition: transform .4s ease;
}
.flyout-wrap .flyout-btn.btn-rotate span {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.flyout-wrap .ani-expand 0% {
  top: 150px;
}
.flyout-wrap .ani-expand 50% {
  top: -10px;
}
.flyout-wrap .ani-expand 70% {
  top: 15px;
}
.flyout-wrap .ani-expand 100% {
  top: 10px;
}
.flyout-wrap .ani-contract 0% {
  top: 10px;
}
.flyout-wrap .ani-contract 40% {
  top: -25px;
}
.flyout-wrap .ani-contract 100% {
  top: 150px;
}
.flyout-wrap .ani-clicked 0% {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.flyout-wrap .ani-clicked 100% {
  opacity: 0;
  -webkit-transform: scale(5);
  transform: scale(5);
}
@-webkit-keyframes expand {
  0% {
    top: 190px;
  }
  50% {
    top: -10px;
  }
  70% {
    top: 15px;
  }
  100% {
    top: 10px;
  }
}
@-webkit-keyframes contract {
  0% {
    top: 10px;
  }
  40% {
    top: -25px;
  }
  100% {
    top: 190px;
  }
}
@-webkit-keyframes clicked {
  0% {
  	-webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 10px;
  }
  90% {
    top: 10px;
  }
  99% {
  	-webkit-transform: scale(6);
    transform: scale(6);
    opacity: 0;
    top: 190px;
  }
  100% {
  	-webkit-transform: scale(0);
    transform: scale(0);
  }
}
@-webkit-keyframes fade {
  0% {
  	-webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 10px;
  }
  90% {
    opacity: 0;
    top: 10px;
  }
  99% {
  	-webkit-transform: scale(0);
    transform: scale(0);
    top: 190px;
  }
  100% {
  	-webkit-transform: scale(0);
    transform: scale(0);
  }
}

/* 兼容其他 */
@keyframes expand {
  0% {
    top: 190px;
  }
  50% {
    top: -10px;
  }
  70% {
    top: 15px;
  }
  100% {
    top: 10px;
  }
}
@keyframes contract {
  0% {
    top: 10px;
  }
  40% {
    top: -25px;
  }
  100% {
    top: 190px;
  }
}
@keyframes clicked {
  0% {
  	-webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 10px;
  }
  90% {
    top: 10px;
  }
  99% {
  	-webkit-transform: scale(6);
    transform: scale(6);
    opacity: 0;
    top: 190px;
  }
  100% {
  	-webkit-transform: scale(0);
    transform: scale(0);
  }
}
@keyframes fade {
  0% {
  	-webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 10px;
  }
  90% {
    opacity: 0;
    top: 10px;
  }
  99% {
  	-webkit-transform: scale(0);
    transform: scale(0);
    top: 190px;
  }
  100% {
  	-webkit-transform: scale(0);
    transform: scale(0);
  }
}

.flyout-wrap .ani-spin1-expand 0% {
	-webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.flyout-wrap .ani-spin1-expand 60% {
	-webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.flyout-wrap .ani-spin1-expand 100% {
	-webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.flyout-wrap .ani-spin2-expand 0% {
	-webkit-transform: rotate(-18deg);
  transform: rotate(-18deg);
}
.flyout-wrap .ani-spin2-expand 60% {
	-webkit-transform: rotate(-378deg);
  transform: rotate(-378deg);
}
.flyout-wrap .ani-spin2-expand 100% {
	-webkit-transform: rotate(-378deg);
  transform: rotate(-378deg);
}
.flyout-wrap .ani-spin3-expand 0% {
	-webkit-transform: rotate(-36deg);
  transform: rotate(-36deg);
}
.flyout-wrap .ani-spin3-expand 60% {
	-webkit-transform: rotate(-396deg);
  transform: rotate(-396deg);
}
.flyout-wrap .ani-spin3-expand 100% {
	-webkit-transform: rotate(-396deg);
  transform: rotate(-396deg);
}
.flyout-wrap .ani-spin4-expand 0% {
	-webkit-transform: rotate(-54deg);
  transform: rotate(-54deg);
}
.flyout-wrap .ani-spin4-expand 60% {
	-webkit-transform: rotate(-414deg);
  transform: rotate(-414deg);
}
.flyout-wrap .ani-spin4-expand 100% {
	-webkit-transform: rotate(-414deg);
  transform: rotate(-414deg);
}
.flyout-wrap .ani-spin5-expand 0% {
	-webkit-transform: rotate(-72deg);
  transform: rotate(-72deg);
}
.flyout-wrap .ani-spin5-expand 60% {
	-webkit-transform: rotate(-432deg);
  transform: rotate(-432deg);
}
.flyout-wrap .ani-spin5-expand 100% {
	-webkit-transform: rotate(-432deg);
  transform: rotate(-432deg);
}
.flyout-wrap .ani-spin6-expand 0% {
	-webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.flyout-wrap .ani-spin6-expand 60% {
	-webkit-transform: rotate(-450deg);
  transform: rotate(-450deg);
}
.flyout-wrap .ani-spin6-expand 100% {
	-webkit-transform: rotate(-450deg);
  transform: rotate(-450deg);
}
.flyout-wrap .ani-spin1-contract 0% {
	-webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.flyout-wrap .ani-spin1-contract 50% {
	-webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin1-contract 100% {
	-webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin2-contract 0% {
	-webkit-transform: rotate(-18deg);
  transform: rotate(-18deg);
}
.flyout-wrap .ani-spin2-contract 50% {
	-webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin2-contract 100% {
	-webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin3-contract 0% {
	-webkit-transform: rotate(-36deg);
  transform: rotate(-36deg);
}
.flyout-wrap .ani-spin3-contract 50% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin3-contract 100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin4-contract 0% {
  -webkit-transform: rotate(-54deg);
  transform: rotate(-54deg);
}
.flyout-wrap .ani-spin4-contract 50% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin4-contract 100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin5-contract 0% {
  -webkit-transform: rotate(-72deg);
  transform: rotate(-72deg);
}
.flyout-wrap .ani-spin5-contract 50% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin5-contract 100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin6-contract 0% {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.flyout-wrap .ani-spin6-contract 50% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.flyout-wrap .ani-spin6-contract 100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
@-webkit-keyframes spin1-expand {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes spin2-expand {
  0% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  60% {
    -webkit-transform: rotate(-378deg);
    transform: rotate(-378deg);
  }
  100% {
    -webkit-transform: rotate(-378deg);
    transform: rotate(-378deg);
  }
}
@-webkit-keyframes spin3-expand {
  0% {
    -webkit-transform: rotate(-36deg);
    transform: rotate(-36deg);
  }
  60% {
    -webkit-transform: rotate(-396deg);
    transform: rotate(-396deg);
  }
  100% {
    -webkit-transform: rotate(-396deg);
    transform: rotate(-396deg);
  }
}
@-webkit-keyframes spin4-expand {
  0% {
    -webkit-transform: rotate(-54deg);
    transform: rotate(-54deg);
  }
  60% {
    -webkit-transform: rotate(-414deg);
    transform: rotate(-414deg);
  }
  100% {
    -webkit-transform: rotate(-414deg);
    transform: rotate(-414deg);
  }
}
@-webkit-keyframes spin5-expand {
  0% {
    -webkit-transform: rotate(-72deg);
    transform: rotate(-72deg);
  }
  60% {
    -webkit-transform: rotate(-432deg);
    transform: rotate(-432deg);
  }
  100% {
    -webkit-transform: rotate(-432deg);
    transform: rotate(-432deg);
  }
}
@-webkit-keyframes spin6-expand {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  60% {
    -webkit-transform: rotate(-450deg);
    transform: rotate(-450deg);
  }
  100% {
    -webkit-transform: rotate(-450deg);
    transform: rotate(-450deg);
  }
}
@-webkit-keyframes spin1-contract {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin2-contract {
  0% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin3-contract {
  0% {
    -webkit-transform: rotate(-36deg);
    transform: rotate(-36deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin4-contract {
  0% {
    -webkit-transform: rotate(-54deg);
    transform: rotate(-54deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin5-contract {
  0% {
    -webkit-transform: rotate(-72deg);
    transform: rotate(-72deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin6-contract {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* 兼容其他 */

@keyframes spin1-expand {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes spin2-expand {
  0% {
    transform: rotate(-18deg);
  }
  60% {
    transform: rotate(-378deg);
  }
  100% {
    transform: rotate(-378deg);
  }
}
@keyframes spin3-expand {
  0% {
    transform: rotate(-36deg);
  }
  60% {
    transform: rotate(-396deg);
  }
  100% {
    transform: rotate(-396deg);
  }
}
@keyframes spin4-expand {
  0% {
    transform: rotate(-54deg);
  }
  60% {
    transform: rotate(-414deg);
  }
  100% {
    transform: rotate(-414deg);
  }
}
@keyframes spin5-expand {
  0% {
    transform: rotate(-72deg);
  }
  60% {
    transform: rotate(-432deg);
  }
  100% {
    transform: rotate(-432deg);
  }
}
@keyframes spin6-expand {
  0% {
    transform: rotate(-90deg);
  }
  60% {
    transform: rotate(-450deg);
  }
  100% {
    transform: rotate(-450deg);
  }
}
@keyframes spin1-contract {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin2-contract {
  0% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin3-contract {
  0% {
    transform: rotate(-36deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin4-contract {
  0% {
    transform: rotate(-54deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin5-contract {
  0% {
    transform: rotate(-72deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin6-contract {
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}