

/* ==================用户头像====================*/
.user-img{
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    margin: 0px auto;
    border:2px solid #fff;
    background-color: #fff;
    box-shadow: 0 0 10px #000;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    -webkit-animation: avatar .3s forwards;
    animation: avatar .3s forwards;
}
.user-title{
    font-weight: 400;
    font-size: 17px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    padding-top: 5px;
}
.user-desc{
    color: #999999;
    font-size: 13px;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
}
.PcIconWidth{ width: 30px;}
/* fade in and expand image to full size, with a slight bounce */
@keyframes avatar { 70% {  opacity: 1;  -webkit-transform: scale(1.1);  transform: scale(1.1);  } 100% {  opacity: 1;  -webkit-transform: scale(1);  transform: scale(1);  } }
@-webkit-keyframes avatar { 70% {  opacity: 1;  -webkit-transform: scale(1.1);  transform: scale(1.1);  } 100% {  opacity: 1;  -webkit-transform: scale(1);  transform: scale(1);  } } /* Safari 和 Chrome */
@-moz-keyframes  avatar { 70% {  opacity: 1;  -webkit-transform: scale(1.1);  transform: scale(1.1);  } 100% {  opacity: 1;  -webkit-transform: scale(1);  transform: scale(1);  } } /* Firefox */
@-o-keyframes  avatar { 70% {  opacity: 1;  -webkit-transform: scale(1.1);  transform: scale(1.1);  } 100% {  opacity: 1;  -webkit-transform: scale(1);  transform: scale(1);  } } /* Opera */
@-ms-keyframes  avatar { 70% {  opacity: 1;  -webkit-transform: scale(1.1);  transform: scale(1.1);  } 100% {  opacity: 1;  -webkit-transform: scale(1);  transform: scale(1);  } } /* IE */
/* ==================end 用户头像====================*/
.i {
    display: block;
    width: 80%;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
    margin: 0 auto;
}
a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ==========　start 底部数据加载 style ========== */
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========　end 底部数据加载 style ========== */

/*  ========== 底部导航栏  ==========*/

.shuiGuo-1{
    background:url(../images/FruitGame/person-center/footer/shuiGuo-1.png) no-repeat;
}
.shuiGuo-2{
    background:url(../images/FruitGame/person-center/footer/shuiGuo-2.png) no-repeat;
}

.Guess-1{
    background:url(../images/FruitGame/person-center/footer/Guess-1.png) no-repeat;
}

.Guess-2{
    background:url(../images/FruitGame/person-center/footer/Guess-2.png) no-repeat;
}

.share-1{
    background:url(../images/FruitGame/person-center/footer/share-1.png) no-repeat;
}

.share-2{
    background:url(../images/FruitGame/person-center/footer/share-2.png) no-repeat;
}
.myCenter-1{
    background: url(../images/FruitGame/person-center/footer/myCenter-1.png) no-repeat;
}
.myCenter-2{
    background:url(../images/FruitGame/person-center/footer/myCenter-2.png) no-repeat;
}
/*  ========== end 底部导航栏  ==========*/

/*关闭游戏规则*/
.close-play{
    position: absolute;
    bottom: 20px;
    padding: 20px 175px;
}
.close-icon{
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    padding: 25px;
}

/*文字滚动样式*/
.sliderbox{position:relative; }/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.content{ position: relative; padding-bottom: 50px;}
.text{  height: 30px;  width: 320px;  overflow: hidden;  margin: 0 auto;  position: absolute;  z-index: 999;  top: 5px;  left: 60px;  color: #E4C468;  }
.text li{line-height:30px; height: 30px; width: 330px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
.text li a{  color: #E4C468;}


/*支付方式 微信 ---- 余额 样式*/
.mgr {  position: relative;  width: 16px;  height: 16px;  background-clip: border-box;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  margin: -.15px .6px 0 0;
    vertical-align: text-bottom;  border-radius: 50%;  background-color: #fff;  border: 1px solid #d7d7d7;  }
.mgr-danger {  background-color: #fff;  border: 1px solid #d7d7d7;  }
.mgr-lg {  width: 19px;  height: 19px;  }
.mgr-danger:checked {  border: 1px solid #cf3b3a;  }
.mgr:checked {  border: 1px solid #555;  }
.mgr-lg:checked:before {  height: 11px;  width: 11px;  border-radius: 50%;  margin: 3px 0 0 3px;  }
.mgr-danger:checked:before {  background-color: #cf3b3a;  }
.mgr:checked:before {  height: 10px;  width: 10px;  border-radius: 50%;  margin: 3px 0 0 3px;  }
.mgr:before {  content: '';  display: block;  height: 0;  width: 0;  -webkit-transition: width .25s,height .25s;  transition: width .25s,height .25s;  }
.pay{ text-align: center;  margin: 19px;  color: #fff;  font-size: 14px;}

/* button */
/**
 * $keyframes \ gelatine
 **/
@keyframes gelatine {
    from, to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(0.9, 1.1);
        transform: scale(0.9, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, 0.9);
        transform: scale(1.1, 0.9);
    }

    75% {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }

    from, to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(0.9, 1.1);
        transform: scale(0.9, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, 0.9);
        transform: scale(1.1, 0.9);
    }

    75% {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}
@-webkit-keyframes gelatine {
    from, to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(0.9, 1.1);
        transform: scale(0.9, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, 0.9);
        transform: scale(1.1, 0.9);
    }

    75% {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }

    from, to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(0.9, 1.1);
        transform: scale(0.9, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, 0.9);
        transform: scale(1.1, 0.9);
    }

    75% {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}

/* 水果跳动 */
@keyframes bounce {
    0% {
        bottom: 0;
    }
    65% {
        bottom: 8px;
    }
    100% {
        bottom: 0;
        border-radius: 49% 47% 42% 40%/60% 60% 40% 40%;
    }
}
@keyframes arm-bounce {
    0%, 100% {
        bottom: 28px;
    }
    33% {
        bottom: 23px;
    }
    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    66% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes shadow {
    0%, 100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scaleX(0.9);
        transform: scaleX(0.9);
    }
}
@keyframes mounth {
    0%, 100% {
        height: 4px;
        border-radius: 50% 50% 100% 100%;
    }
    50% {
        height: 8px;
        bottom: 17px;
        border-radius: 30% 30% 100% 100%;
    }
}

/* =========== slime  ===========*/

.slime:hover{
    -webkit-animation: changeForme 1s;
    animation: changeForme 1s;
    /*animation-iteration-count: infinite;*/
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

@-webkit-keyframes changeForme
{
    0% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1) scaleY(1);}
    40% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(0.8) scaleY(1.2);}
    50% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.2) scaleY(0.8);}
    60% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(0.9) scaleY(1.1);}
    70% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.2) scaleY(0.8);}
    80% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(0.9) scaleY(1.1);}
    90% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.2) scaleY(0.8);}
    100% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1) scaleY(1);}
}

@keyframes changeForme
{
    0% {transform-origin: 50% 100%;transform : scaleX(1) scaleY(1);}
    40% {transform-origin: 50% 100%;transform : scaleX(0.8) scaleY(1.2);}
    50% {transform-origin: 50% 100%;transform : scaleX(1.2) scaleY(0.8);}
    60% {transform-origin: 50% 100%;transform : scaleX(0.9) scaleY(1.1);}
    70% {transform-origin: 50% 100%;transform : scaleX(1.2) scaleY(0.8);}
    80% {transform-origin: 50% 100%;transform : scaleX(0.9) scaleY(1.1);}
    90% {transform-origin: 50% 100%;transform : scaleX(1.2) scaleY(0.8);}
    100% {transform-origin: 50% 100%;transform : scaleX(1) scaleY(1);}
}

.button{
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    box-shadow: none;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 12px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 1.5;
    position: relative;
    vertical-align: top;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.ui-flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
    align-items: center;
}
.ui-flex__item{
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    text-align: center;
}
.ui-flex__between{
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.ui-flex__around{
    -webkit-justify-content:space-around;
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.ui-flex__center{
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center
}
.ui-flex__middle{
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    -ms-grid-row-align:center;
    align-items:center
}
