@charset "utf-8";
*{margin:0px; padding:0px;font-family:'微软雅黑'; box-sizing:border-box; -webkit-box-sizing:border-box;}
a{text-decoration:none;}
img{border:none; display:block;}
ul{list-style:none;}
input,button,textarea{outline:none;}
button, input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance:none;
    cursor: pointer;
}
.clearfix {zoom:1;}
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}

.thidden{overflow:hidden;text-overflow:ellipsis; white-space:nowrap;}

.w100{width:100%; max-width:640px;}


/*居左居中*/
.text_left_center{display:-webkit-flex; display:flex; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center;}

/*居中居中*/
.text_center_center{display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center;}
.text_center_center_column{display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; -webkit-flex-direction:column; flex-direction:column;}
/*左右分离居中*/
.text_between_center{display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center;}

.text_space-around{display:-webkit-flex; display:flex; -webkit-justify-content:space-around; justify-content:space-around; -webkit-align-items:center; align-items:center;}

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../font/iconfont.woff') format('woff'),
    url('../font/iconfont.ttf') format('truetype'),
    url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'shipin1';
    src: url('../font/shipin1/shipin1.eot');
    src: url('../font/shipin1/shipin1.eot?#iefix') format('embedded-opentype'),
    url('../font/shipin1/shipin1.woff') format('woff'),
    url('../font/shipin1/shipin1.ttf') format('truetype'),
    url('../font/shipin1/shipin1.svg#fajie1') format('svg');
}
.shipin1{font-family:'shipin1';}


/*progress*/
.gx_progress {
    width:100%;
    height: 0.8rem;
    background: #d2cccc;
    padding: 0 0 0 1px;
    overflow: visible;
    border-radius: 20px;
    border-top: 0 solid #d2cccc;
    border-bottom: 1px solid #d2cccc;
    margin-top: 2px;
}

.gx_progress .gx_progress-bar {
    border-radius: 20px;
    position: relative;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    background-color: #5bc0de;
    color: #fff;
    text-align: center;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
}
.gx_progress-bar.active {
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
    -webkit-animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
.gx_progress .gx_progress-value {
    font-size: 13px;
    color: #a94442;
    font-weight: 600;
    position: absolute;
    top: -9px;
    right: -18px;
}

.bgm-btn {
    right: -1rem;
    top: 40%;
    border-radius: 1.5rem;
    background-image: url(/img/pause.png);
    background-size: contain;
    background-repeat: no-repeat;
              position: fixed;
    z-index: 200;
    width: 4.5rem;
    height: 4.5rem;
}

@-webkit-keyframes animate-positive {
    0% {
        width: 0;
    }
}
@keyframes animate-positive {
    0% {
        width: 0;
    }
}
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
@-o-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}