@charset "utf-8"; /**
 * @Source ../../static/news/css/share/app.css
 */
@charset "utf-8";#header-news,.context.is-data,.context.is-data .item-img,.context.is-data .item-img .img_wrap,.context.is-data .item-video,.context.is-html,.context.is-html .img_wrap,.context.is-html p {
    position: relative
}

fieldset,img {
    border: 0
}

body,button,dd,dl,dt,fieldset,figcaption,figure,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

body,button,input,select,textarea {
    font: 12px/1 Lucida Grande,'Microsoft YaHei',"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 400
}

h1 {
    font-size: 18px
}

h2 {
    font-size: 16px
}

h3 {
    font-size: 14px
}

h4,h5,h6 {
    font-size: 100%
}

address,cite,dfn,em,var {
    font-style: normal
}

code,kbd,pre,samp,tt {
    font-family: "Courier New",Courier,monospace
}

small {
    font-size: 12px
}

ul {
    list-style: inside
}

ol {
    list-style-type: decimal;
    list-style: decimal;
    padding-left: 12px;
}

ol li {
    display: list-item;
}

a {
    text-decoration: none
}

a:active,a:hover,a:link,a:visited {
    text-decoration: none;
    color: #0f80da;
}

abbr[title],acronym[title] {
    border-bottom: 1px dotted;
    cursor: help
}

q:after,q:before {
    content: ''
}

legend {
    color: #000
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

* {
    word-break: break-all;
    word-wrap: break-word;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.clearfix:after,.clearfix:before {
    content: "";
    display: table
}

.clearfix:after {
    clear: both;
    overflow: hidden
}

.clearfix {
    zoom:1}

.clear {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden
}

.fl,.fr {
    display: inline
}

.fl {
    float: left
}

.fr {
    float: right
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-break: keep-all
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.context.is-data .item-video #video {
    width: 92vw;
    height: 51.76533333333333vw
}

.context.is-data .item-video #video .time {
    width: 81.33333333333333vw
}

.context.is-data .item-video #video .time .track {
    width: 49.333333333333336vw
}

.context.is-data .item-img {
    margin: 4vw 0
}

.context.is-data .item-img img {
    width: 100%;
    margin: auto;
    display: block;
    border-radius: .666666666666667vw
}

.context.is-data .item-img .desc {
    height: 4.533333333333333vw;
    line-height: 4.533333333333333vw;
    font-size: 3.2vw;
    color: #999;
    margin-top: 1.333333333333333vw;
    text-align: center
}

.context.is-data .item-text {
    position: relative;
    margin: 2vw 0
}

.context.is-data .item-text .text {
    font-size: 4.266666666666667vw;
    color: #666;
    line-height: 8.533333333333333vw
}

.context.is-html {
    font-size: 4.533333333333333vw
}

.context.is-html .img_wrap {
    margin: 4vw 0
}

.context.is-html .img_wrap img {
    width: 100%;
    margin: auto
}

.context.is-html p {
    margin: 2vw 0;
    color: #404448;
    line-height: 8.533333333333333vw
}

.context.is-html img {
    width: 100%
}

.context.is-html h2 {
    font-size: 1.5em;
    font-weight: 700
}

.context.is-html h3 {
    font-size: 1.17em;
    font-weight: 700
}

.context.is-html h4 {
    font-size: 1em;
    font-weight: 700
}

.context.is-html ul {
    list-style-type: disc;
    padding-left: 2.5em;
    margin: 1em 0
}

.context.is-html ol {
    list-style-type: decimal;
    padding-left: 2.5em;
    margin: 1em 0
}

.context.is-html li {
    list-style: inherit;
    line-height: 8vw
}

.context.is-html blockquote {
    border-left: .5em solid #ff5655;
    font-style: italic;
    margin: 1em 0;
    padding: 0 1.5em
}

.context.is-html video {
    background-color: #333
}

.context.is-html figcaption {
    background-color: #f7f7f7;
    color: #333;
    text-align: center;
    font-size: .75em;
    outline-offset: -1px;
    padding: .6em
}


#foot-news {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999
}

.album-box,.recommend-box {
    padding: 0 3.2vw
}

#container {
    min-height: 133.33333333333331vw;
    background: #f6f6f6
}

#container .mr-30 {
    margin-right: 4vw
}

#container .h3-head {
    font-size: 5.333333333333334vw;
    line-height: 8vw;
    padding-top: 1.866666666666667vw;
    font-weight: 800;
    color: #222
}

#container .h3-head span {
    margin-left: 2vw
}

#container .common-width {
    width: 92vw;
    margin: 0 auto
}

#container .details-box {
    background: #fff;
    margin-bottom: 2.666666666666667vw
}

#container .details-box .details-info {
}

#container .details-box p{
    font-size: .43rem;
    line-height: .7rem;
    text-indent: .8rem;
    word-break: keep-all;
}

#container .details-box img{
    width: 100%;
    height: auto;
    padding: .43rem 0;
}

#container .details-box .details-info .inof-title {
    padding: 3.2vw 0;
    line-height: .7rem;
    font-size: 5.333333333333334vw;
    color: #222
}

#container .details-box .details-info .info-source {
    font-size: 3.2vw;
    color: #c4c4c4;
    margin-bottom: .2rem;
}

#container .details-box .details-info .info-source span {
    margin-right: 3.333333333333333vw
}

#container .details-box .details-main {
    position: relative;
    overflow: hidden
}

#container .details-box .details-main.is-read-all {
    max-height: 160vw;
    min-height: 52vw
}

#container .details-box .details-main.is-read-all .mask {
    display: block
}

#container .details-box .details-main>.mask {
    position: absolute;
    display: none;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1
}

#container .details-box .details-main>.mask .gradient-bg {
    width: 100%;
    height: 24vw;
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 90%);
    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0,#fff 90%)
}

#container .details-box .details-main>.mask .show-all {
    margin: auto;
    text-align: center;
    height: 9.333333333333334vw;
    padding-top: 5.333333333333334vw;
    padding-bottom: 13.333333333333334vw;
    background: #fff;
    font-size: 0;
    color: #ff5655;
    opacity: 0
}

#container .details-box .details-main>.mask .show-all span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2.666666666666667vw;
    font-size: 4.533333333333333vw
}

#container .details-box .details-main>.mask .show-all i {
    display: inline-block;
    vertical-align: middle;
    font-size: 2.133333333333333vw
}

#container .details-box .details-main .container-details {
    padding: 1.333333333333333vw 0 13.333333333333334vw
}

#container .details-box .details-main .container-details .mask-gif {
    position: absolute;
    width: 26.666666666666668vw;
    height: 6.666666666666667vw;
    margin-top: -6.666666666666667vw;
    margin-left: -6.666666666666667vw;
    bottom: 2vw;
    right: 1.333333333333333vw;
    background: rgba(0,0,0,.7);
    color: #fff;
    text-align: center;
    line-height: 6.666666666666667vw;
    border-radius: .8vw;
    font-size: 3.466666666666666vw;
    font-style: normal
}

#container .details-box .details-bottom {
    margin-top: 2.666666666666667vw;
    margin-left: -4vw;
    width: 100vw;
    margin-bottom: 4vw;
    height: 1px;
    background: #efefef
}

#container .recommend-box {
    background: #fff;
    margin-bottom: 2.666666666666667vw
}

#container .recommend-box .recommend-list {
    padding-bottom: 9.333333333333334vw
}

#container .recommend-box .recommend-list .recommend-item {
    position: relative;
    display: block;
    padding: 4vw 0 4vw 30.666666666666664vw;
    border-bottom: 1px solid #efefef
}

#container .recommend-box .recommend-list .recommend-item.last-item {
    border-bottom: 0
}

#container .recommend-box .recommend-list .recommend-item .recommend-img {
    position: absolute;
    top: 4vw;
    left: 0;
    width: 29.599999999999998vw;
    height: 18.666666666666668vw;
    border-radius: .533333333333333vw;
    margin-right: 1.6vw
}

#container .recommend-box .recommend-list .recommend-item .recommend-info {
    position: relative
}

#container .recommend-box .recommend-list .recommend-item .recommend-info .recommend-title {
    display: -webkit-box;
    width: 61.33333333333333vw;
    height: 12.8vw;
    line-height: 6.4vw;
    font-size: 4.266666666666667vw;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666
}

#container .recommend-box .recommend-list .recommend-item .recommend-info .recommend-time {
    font-size: 2.666666666666667vw;
    color: #bbb;
    margin-top: 2.133333333333333vw;
    line-height: 3.733333333333334vw
}

#container .album-box .album-list {
    padding-bottom: 4vw
}

#container .album-box .album-list .album-item {
    position: relative;
    display: block;
    height: 18.666666666666668vw;
    padding: 4vw 0 4vw 30.666666666666664vw;
    border-bottom: 1px solid #efefef
}

#container .album-box .album-list .album-item.last-item {
    border-bottom: 0
}

#container .album-box .album-list .album-item .album-left-box {
    position: absolute;
    top: 4vw;
    left: 0;
    width: 28.000000000000004vw;
    height: 18.666666666666668vw
}

#container .album-box .album-list .album-item .album-left-box .mask {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8vw;
    height: 8vw;
    margin-top: -4vw;
    margin-left: -4vw;
    background-image: url(../../res/share/play_small.png);
    border-radius: 100%;
    background-size: 100%
}

#container .album-box .album-list .album-item .album-img {
    width: 28.000000000000004vw;
    height: 18.666666666666668vw
}

#container .album-box .album-list .album-item .album-info {
    position: relative
}

#container .album-box .album-list .album-item .album-info .album-title {
    display: -webkit-box;
    width: 61.33333333333333vw;
    height: 12vw;
    line-height: 6vw;
    font-size: 4.266666666666667vw;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333
}

#container .album-box .album-list .album-item .album-info .album-num {
    font-size: 3.2vw;
    color: #a6a6b4;
    margin-top: 2.266666666666667vw;
    line-height: 4.399999999999999vw
}

#container .hot-live-box {
    background: #fff;
    padding-bottom: 20vw
}

#container .hot-live-box .hot-live-list .hot-live-item {
    display: block;
    margin-top: 4vw;
    margin-right: 1.333333333333333vw;
    margin-bottom: 1.333333333333333vw;
    width: 45.33333333333333vw
}

#container .hot-live-box .hot-live-list .hot-live-item.last-item {
    margin-right: 0
}

#container .hot-live-box .hot-live-list .hot-live-item .live-img-box {
    position: relative;
    width: 45.33333333333333vw;
    height: 25.6vw
}

#container .hot-live-box .hot-live-list .hot-live-item .live-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 45.33333333333333vw;
    height: 25.6vw;
    border-radius: 1.066666666666667vw 1.066666666666667vw 0 0
}

#container .hot-live-box .hot-live-list .hot-live-item .live-main {
    width: 42.66666666666667vw;
    position: relative;
    height: 9.6vw;
    padding: 1.6vw 1.333333333333333vw;
    background: #fff;
    box-shadow: 0 .533333333333333vw 1.6vw 0 rgba(0,0,0,.08)
}

#container .hot-live-box .hot-live-list .hot-live-item .live-main .live-room-name {
    line-height: 4.8vw;
    font-size: 3.2vw;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: .8vw
}

#container .hot-live-box .hot-live-list .hot-live-item .live-main .live-info .live-nick-name {
    width: 45%;
    display: inline-block;
    font-size: 2.666666666666667vw;
    line-height: 4vw;
    color: #999;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

#container .hot-live-box .hot-live-list .hot-live-item .live-main .live-info .ht-icon-popularity {
    display: inline-block;
    background: url(../../../common/res/newadd/ht-icon-popularity.png) no-repeat;
    background-size: 100% auto;
    width: 2.66667vw;
    height: 2.66667vw;
    margin-right: .53333vw
}

#container .hot-live-box .hot-live-list .hot-live-item .live-main .live-info .live-online {
    display: inline-block;
    text-align: right;
    width: 50%;
    font-weight: 100;
    color: #666;
    font-size: 2.666666666666667vw
}

.header-right {
    line-height: 1
}

.header-right .wxtips {
    display: none;
    position: fixed;
    top: 1.066666666666667vw;
    right: 2.933333333333333vw;
    width: 43.06666666666666vw;
    height: 24.133333333333333vw;
    color: #fff;
    background: url(../../../client/index/res/arrow@3x.png) center no-repeat;
    background-size: 100%;
    padding: 4.666666666666667vw 4vw 3.466666666666666vw;
    box-sizing: border-box;
    font-size: 3.466666666666666vw;
    line-height: 5.333333333333334vw;
    letter-spacing: .133333333333333vw;
    z-index: 100
}

.header-right .wxtips .dots {
    display: inline-block;
    width: 4.533333333333333vw;
    height: 1.6vw;
    background: url(../../../client/index/res/dots@3x.png) center no-repeat;
    background-size: 100%;
    margin: 0 2.266666666666667vw
}

.header-btn-search {
    width: 16vw;
    height: 8vw;
    display: inline-block;
    background: #f0f0f0;
    border-radius: 4vw;
    position: relative
}

.header-btn-search:after {
    content: '';
    display: inline-block;
    height: 5.3333vw;
    width: 5.3333vw;
    background-image: url(../../../common/res/index/ht_icon.png);
    background-repeat: no-repeat;
    background-size: 68.8vw 33.6vw;
    background-position: -2.6667vw -2.6667vw;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

.header-btn-download {
    display: inline-block;
    width: 24vw;
    height: 8vw;
    background: #ffd800;
    border-radius: 4vw;
    line-height: 8vw;
    text-align: center;
    vertical-align: top;
    margin-left: 1.6vw;
    font-size: 3.2vw
}

.ht-icon-search-history-icon {
    display: inline-block;
    vertical-align: middle;
    width: 4vw;
    height: 3.7333vw;
    background: url(../../../common/res/index/ht_icon.png) -34.4vw -11.6vw no-repeat;
    background-size: 68.8vw 36.9333vw
}

.ht-icon-search-history-delete-icon {
    display: inline-block;
    vertical-align: middle;
    width: 3.6vw;
    height: 3.6vw;
    background: url(../../../common/res/index/ht_icon.png) -26.5333vw -11.6vw no-repeat;
    background-size: 68.8vw 36.9333vw
}

.header,.index-search .index-search-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox
}

.header {
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 3.2vw 4vw;
    border-bottom: 1px solid #eee;
    background-color: #fff
}

.header .logo {
    display: inline-block;
    height: 7.7333vw;
    width: 26.8vw;
    background: url(../../../common/res/index/logo-new.png) center center no-repeat;
    background-size: contain
}

.index-search {
    position: fixed;
    width: 100vw;
    z-index: 999;
    height: 100%;
    background: #eee;
    top: 0;
    left: 0;
    display: none;
    overflow: scroll
}

.index-search .index-search-header {
    width: 100%;
    height: 11.7333vw;
    background-color: #fff;
    position: relative;
    z-index: 2;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.index-search .index-search-input {
    padding: 1.0667vw 2.4vw;
    background: #eee;
    border-radius: 1.3333vw;
    margin-left: 3.8667vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-search .index-search-input input {
    background-color: #eee;
    width: 67.3333vw;
    height: 5.3333vw;
    font-size: 4vw;
    border: none
}

.index-search .index-search-input .header-btn-search {
    height: 5.3333vw;
    width: 5.3333vw;
    background: 0 0
}

.index-search .search-cancel {
    display: inline-block;
    margin-right: 3.8667vw;
    font-size: 4.5333vw;
    color: #ff5655
}

.index-search .search-history {
    position: absolute;
    top: 11.7333vw;
    background-color: #fff;
    display: none;
    z-index: 4
}

.index-search .search-history li {
    height: 5.8667vw;
    width: 93.4667vw;
    padding: 2.9333vw 0 2.9333vw 6.5333vw
}

.index-search .search-history span {
    display: inline-block;
    font-size: 3.2vw;
    width: 72vw;
    height: 5.6vw;
    margin: 0 3.6vw;
    vertical-align: middle
}

.index-search .search-history .clear-search-history {
    display: block;
    width: 100vw;
    height: 11.7333vw;
    line-height: 2;
    text-align: center;
    color: #ff5655;
    font-size: 4vw
}

.index-search .index-search-no-result,.index-search .index-search-result {
    padding-top: .1333vw;
    display: none
}

.index-search .index-search-result h2 {
    display: block;
    font-size: 4vw;
    height: 5.6vw;
    line-height: 1;
    color: #666;
    margin: 2.6667vw 0 2.6667vw 4.1333vw
}

.index-search .index-search-result .index-search-section-content {
    margin: 0 2.4vw
}

.index-search .index-search-result .index-search-section-content .index-search-section-ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.index-search .index-search-no-result,.index-search .no-search-result {
    text-align: center;
    font-size: 4vw;
    color: #999
}

.index-search .index-search-no-result p,.index-search .no-search-result p {
    background: url(../../../common/res/index/no_data.png) center center no-repeat;
    background-size: 40vw 40vw;
    height: 31.0667vw;
    margin-top: 35.3333vw;
    margin-bottom: 4.4vw
}

.foot-news {
    position: relative
}

.foot-news .foot-box {
    position: relative;
    width: 77.06666666666668vw;
    padding-right: 22.933333333333334vw;
    background: #fff;
    height: 13.333333333333334vw;
    box-shadow: 0 -2px 4px 0 rgba(0,0,0,.05)
}

.foot-news .foot-box .open-app-btn {
    position: absolute;
    top: 50%;
    margin-top: -4vw;
    right: 2.666666666666667vw;
    background: #ff5655;
    border-radius: 8.4vw;
    color: #fff;
    width: 17.599999999999998vw;
    height: 8vw;
    line-height: 8vw;
    font-size: 3.733333333333334vw;
    text-align: center
}

.foot-news .foot-box .foot-match,.foot-news .foot-box .foot-match .foot-match-item {
    width: 77.06666666666668vw;
    height: 13.333333333333334vw
}

.foot-news .foot-box .foot-match .foot-match-item {
    position: relative
}

.foot-news .foot-box .foot-match .foot-match-item .main-item {
    position: absolute;
    left: 50%;
    margin-left: -9.333333333333334vw;
    width: 18.666666666666668vw;
    height: 9.733333333333333vw;
    top: 50%;
    margin-top: -4.866666666666666vw
}

#video,.foot-news .foot-box .foot-news .foot-news-item {
    position: relative
}

.foot-news .foot-box .foot-match .foot-match-item .main-item .match-item-score {
    font-size: 4.266666666666667vw;
    color: #ff5655;
    line-height: 6vw;
    text-align: center
}

.foot-news .foot-box .foot-match .foot-match-item .main-item .match-item-state {
    font-size: 2.666666666666667vw;
    line-height: 3.733333333333334vw;
    color: #ff5655;
    text-align: center
}

.foot-news .foot-box .foot-match .foot-match-item .left-item,.foot-news .foot-box .foot-match .foot-match-item .right-item {
    width: 29.46666666666667vw;
    height: 13.333333333333334vw;
    font-size: 0
}

.foot-news .foot-box .foot-match .foot-match-item .left-item img,.foot-news .foot-box .foot-match .foot-match-item .right-item img {
    display: inline-block;
    vertical-align: middle;
    width: 13.333333333333334vw;
    height: 13.333333333333334vw
}

.foot-news .foot-box .foot-match .foot-match-item .left-item span,.foot-news .foot-box .foot-match .foot-match-item .right-item span {
    display: inline-block;
    width: 16vw;
    vertical-align: middle;
    font-size: 3.733333333333334vw;
    color: #333
}

.foot-news .foot-box .foot-news,.foot-news .foot-box .foot-news .foot-news-item {
    width: 77.06666666666668vw;
    height: 13.333333333333334vw
}

.foot-news .foot-box .foot-match .foot-match-item .left-item span {
    text-align: left
}

.foot-news .foot-box .foot-match .foot-match-item .right-item span {
    text-align: right
}

.foot-news .foot-box .foot-news .foot-news-item .left-item {
    margin-top: 1.866666666666667vw;
    margin-left: 1.866666666666667vw;
    width: 9.6vw;
    height: 9.6vw
}

.foot-news .foot-box .foot-news .foot-news-item .left-item img {
    display: inline-block;
    width: 9.6vw;
    height: 9.6vw
}

.foot-news .foot-box .foot-news .foot-news-item .right-item {
    margin-top: 1.6vw;
    margin-left: 2.666666666666667vw;
    display: -webkit-box;
    width: 60vw;
    height: 9.866666666666667vw;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
}

.foot-news .foot-box .foot-news .foot-news-item .right-item p {
    line-height: 4.933333333333334vw;
    font-size: 3.466666666666666vw;
    color: #333
}

@font-face {
    font-family: iconfont;
    src: url(../../res/icon/iconfont.eot?t=1517196945605);
    src: url(../../res/icon/iconfont.eot?t=1517196945605#iefix) format('embedded-opentype'),url(../../res/icon/iconfont.woff?t=1517196945605) format('woff'),url(../../res/icon/iconfont.ttf?t=1517196945605) format('truetype'),url(../../res/icon/iconfont.svg?t=1517196945605#iconfont) format('svg')
}

.iconfont {
    font-family: iconfont!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-zhankai:before {
    content: "\e62c"
}

.icon-guanzhong:before {
    content: "\e62d"
}

.icon-remenzhibo:before {
    content: "\e62e"
}

.icon-xiangguanzixun:before {
    content: "\e62f"
}

.icon-ic_video:before {
    content: "\e632"
}

.none {
    display: none
}

#video {
    width: 100vw;
    height: 56.266666666666666vw
}

#video video {
    width: 100%;
    height: 100%;
    background: #eee
}

#video .display {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#video .display .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block
}

#video .display .video-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -6.666666666666667vw;
    margin-left: -6.666666666666667vw;
    width: 13.333333333333334vw;
    height: 13.333333333333334vw;
    z-index: 2
}

#video .display .video-btn.is-play .bigplay {
    display: none!important
}

#video .display .video-btn.is-play .bigpause {
    display: block!important
}

#video .display .video-btn .btn {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: 100%
}

#video .display .video-btn .btn.bigplay {
    display: block;
    background-image: url(../../res/share/play.png)
}

#video .display .video-btn .btn.bigpause {
    display: none;
    background-image: url(../../res/share/pause.png)
}

#video .display .ctrl {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    font-size: 0;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);
    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%)
}

#video .display .ctrl .time {
    display: inline-block;
    vertical-align: middle;
    width: 89.33333333333333vw;
    padding: 2.666666666666667vw 0
}

#video .display .ctrl .time .time-left,#video .display .ctrl .time .time-right {
    display: inline-block;
    vertical-align: middle;
    font-size: 3.2vw;
    color: #fff;
    line-height: 5.333333333333334vw;
    width: 13.333333333333334vw;
    height: 5.333333333333334vw;
    text-align: center
}

#video .display .ctrl .time .track {
    display: inline-block;
    vertical-align: middle;
    width: 57.333333333333336vw;
    height: .8vw;
    margin: 1.6vw 2vw;
    border-radius: 100px;
    position: relative;
    background: #464646
}

#video .display .ctrl .time .track .trackbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: .8vw;
    border-radius: 100px;
    background: #ff5655;
    z-index: 2;
    -webkit-transition: width .3s;
    transition: width .3s
}

#video .display .ctrl .time .track .trackbar .dot {
    position: absolute;
    width: 4vw;
    height: 4vw;
    right: -2vw;
    top: -1.6vw;
    background: #fff;
    border-radius: 100%;
    z-index: 3
}

#video .display .ctrl .time .track .loadingbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: .8vw;
    border-radius: 100px;
    background: #7f7a7d;
    z-index: 1;
    -webkit-transition: width .3s;
    transition: width .3s
}

#video .display .ctrl .full-btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.666666666666667vw;
    width: 5.333333333333334vw;
    height: 5.333333333333334vw;
    background-size: 100%;
    background-image: url(../../res/share/ic_full.png)
}

#video .display .poster {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3
}

#video .display .poster img {
    width: 100%;
    height: 100%
}

#video .display .poster .init-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6.666666666666667vw;
    margin-top: -6.666666666666667vw;
    width: 13.333333333333334vw;
    height: 13.333333333333334vw;
    background-image: url(../../res/share/play.png);
    border-radius: 100%;
    background-size: 100%
}

#video .display .loading {
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: .8;
    border-radius: 50%;
    width: 2.5vw;
    height: 2.5vw;
    margin: auto;
    box-shadow: 0 -4vw 0 0 #000,-2.8vw -2.8vw 0 0 rgba(0,0,0,.75),-4vw 0 0 0 rgba(0,0,0,.5),-2.8vw 2.8vw 0 0 rgba(0,0,0,.25);
    -webkit-animation: .85s video-loader-rotate steps(8) infinite;
    -moz-animation: .85s video-loader-rotate steps(8) infinite;
    animation: .85s video-loader-rotate steps(8) infinite
}

@-webkit-keyframes video-loader-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes video-loader-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}