.nuxt-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 0;
    opacity: 1;
    transition: width .1s,opacity .4s;
    background-color: #000;
    z-index: 999999
}

.nuxt-progress.nuxt-progress-notransition {
    transition: none
}

.nuxt-progress-failed {
    background-color: red
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
	width:4px;
}
/* 外层滚道*/
::-webkit-scrollbar-track {
	background-color:#f0f0f0;
	border-radius:0px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	background-color:#6d6e70;
}
::-webkit-scrollbar-thumb:hover {
	background:#e60012;
}
::-webkit-scrollbar-thumb:window-inactive {
	background-color:#e60012;
}
/* html,body { */
    /* overflow-x: hidden; */
/* } */

/* html::-webkit-scrollbar { */
    /* width: 6px; */
    /* height: 6px; */
    /* background: #CCC; */
/* } */

/* html::-webkit-scrollbar-button { */
    /* display: none; */
/* } */

/* html::-webkit-scrollbar-track-piece { */
    /* display: none; */
/* } */

/* html::-webkit-scrollbar-thumb { */
    /* background: #999; */
/* } */

/* html::-webkit-scrollbar-thumb:hover { */
    /* background: #3399CC; */
/* } */
ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:after,blockquote:before,q:after,q:before {
    content: "";
    content: none
}

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

a,a:hover {
    color: #000
}

a,a:hover,a:link,a:visited {
    text-decoration: none
}

body {
    font-size: 14px
}

img {
    max-width: 100%;
    max-height: 100%
}

input {
    -webkit-appearance: none;
    border-radius: 0
}

body {
    font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial
}

button {
    border: 0;
    outline: 0;
    box-sizing: border-box
}

.fade-enter-active,.fade-leave-active {
    transition: opacity .3s
}

.fade-enter,.fade-leave-to {
    opacity: 0
}

.slide-fade-enter-active {
    transition: all .3s ease
}

.slide-fade-enter,.slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0
}

.router-slid-enter-active {
    transition: all .2s
}

.router-slid-enter {
    transform: translateY(-10px);
    opacity: 0
}

/* body::-webkit-scrollbar { */
    /* display: none */
/* } */

.emoji-picker-wrap {
    position: absolute;
    top: 105%;
    left: -20px;
    z-index: 99
}

.main-banner {
    width: 100%
}

.main-banner img {
    width: 100%;
    height: auto;
    max-height: 350px;
    -o-object-fit: cover;
    object-fit: cover
}

@-webkit-keyframes one-in {
    0% {
        padding-top: 100px;
        height: 0%
    }

    to {
        padding-top: 0;
        height: 100%
    }
}

@keyframes one-in {
    0% {
        padding-top: 100px;
        height: 0%
    }

    to {
        padding-top: 0;
        height: 100%
    }
}

.l-wrap {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 184px;
    box-sizing: border-box
}

@media screen and (max-width: 1750px) {
    .l-wrap {
        padding:0 120px
    }
}

@media screen and (max-width: 1500px) {
    .l-wrap {
        padding:0 50px
    }
}

main .l-wrap {
    padding: 38px 184px 88px;
    display: flex;
    justify-content: space-between
}

main .l-wrap .l-left {
    min-width: 480px;
    width: 480px;
    flex: 0 0 480px
}

main .l-wrap .l-right {
    padding-left: 50px;
    width: 100%;
    flex: 1
}

@media screen and (max-width: 1750px) {
    main .l-wrap {
        padding:38px 220px 200px
    }

    main .l-wrap .l-right {
        padding-left: 50px
    }
}

@media screen and (max-width: 1500px) {
    main .l-wrap {
        padding:38px 100px 88px
    }
}

main {
    margin-top: 100px
}

main .home.l-wrap {
    padding: 38px 184px 88px
}

main .home.l-wrap .home-left {
    width: 75%;
    padding-right: 30px
}

main .home.l-wrap .home-right {
    width: 25%;
    min-width: 325px
}

main .home.l-wrap .home-userinfo {
    display: flex;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e7e7
}

main .home.l-wrap .home-videolist ul {
    margin-bottom: 30px
}

main .home.l-wrap .home-videolist ul>li {
    padding: 16px 0;
    border-bottom: 1px solid #f6f6f6
}

main .home.l-wrap .home-videolist .video-img {
    height: 90px;
    width: 160px;
    flex: 0 0 160px;
    display: flex;
    justify-content: center;
    background-color: #eee;
    align-items: center;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer
}

main .home.l-wrap .home-videolist .video-img>img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

main .home.l-wrap .home-videolist .video-info {
    margin-left: 10px;
    height: 90px;
    display: flex;
    box-sizing: border-box;
    padding: 0 0 2px;
    flex: 1;
    flex-direction: column;
    justify-content: space-between
}

main .home.l-wrap .home-videolist .video-name {
    line-height: 1.8em;
    color: #333;
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-transform: capitalize
}

main .home.l-wrap .home-videolist .video-like {
    font-size: 12px;
    color: #7c7c7f
}

main .home.l-wrap .home-videolist .video-like svg {
    position: relative;
    top: 3px
}

main .home.l-wrap .home-videolist-item {
    display: flex
}

main .home.l-wrap .home-videolist-tit {
    font-size: 18px;
    margin: 0 0 10px
}

main .home.l-wrap .userinfo-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px
}

main .home.l-wrap .userinfo-right .userinfo-name {
    margin-bottom: 14px
}

main .home.l-wrap .userinfo-right .userinfo-line {
    display: flex
}

main .home.l-wrap .userinfo-right .userinfo-line>div {
    font-size: 12px;
    color: #b1b1b1;
    margin-right: 10px;
    position: relative
}

main .home.l-wrap .userinfo-right .userinfo-line>div:first-child:after {
    content: "";
    display: block;
    position: absolute;
    right: -5px;
    top: 5px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #000
}

main .home.l-wrap .userinfo-right .userinfo-line>div em {
    color: #000
}

main .home.l-wrap .userinfo-ava {
    width: 62px;
    height: 62px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box
}

main .home.l-wrap .userinfo-ava>img {
    width: 100%;
    height: 100%;
    display: block
}

main .home.l-wrap .home-video {
    margin-bottom: 50px;
    position: relative
}

main .home.l-wrap .home-video:after {
    content: "";
    display: block;
    padding-top: 56.25%
}

main .home.l-wrap .home-video .video-wrap {
    position: absolute;
    background-color: #eee;
    bottom: 0;
    top: 0;
    width: 100%;
    border-radius: 3px;
    overflow: hidden
}

main .home.l-wrap .home-video .video-switch {
    background-color: #323442;
    border-radius: 18px;
    height: 80px;
    opacity: .4;
    width: 36px;
    position: absolute;
    overflow: hidden;
    right: 16px;
    top: 50%;
    transform: translateY(-50%)
}

main .home.l-wrap .home-video .video-switch .video-next,main .home.l-wrap .home-video .video-switch .video-prev {
    position: absolute;
    cursor: pointer;
    background-color: #323442;
    opacity: .7;
    height: 40px;
    width: 36px
}

main .home.l-wrap .home-video .video-switch .video-next svg,main .home.l-wrap .home-video .video-switch .video-prev svg {
    height: 26px!important;
    left: 5px;
    position: relative;
    top: 7px;
    width: 26px!important
}

main .home.l-wrap .home-video .video-switch .video-next svg path,main .home.l-wrap .home-video .video-switch .video-prev svg path {
    fill: #fff
}

main .home.l-wrap .home-video .video-switch .video-next:hover,main .home.l-wrap .home-video .video-switch .video-prev:hover {
    opacity: 1
}

main .home.l-wrap .home-video .video-switch .video-next.is-disable,main .home.l-wrap .home-video .video-switch .video-prev.is-disable {
    cursor: not-allowed;
    opacity: .3
}

main .home.l-wrap .home-video .video-switch .video-prev {
    top: 0
}

main .home.l-wrap .home-video .video-switch .video-next {
    bottom: 0
}

main .home.l-wrap .home-video-title {
    font-size: 18px;
    margin-bottom: 14px;
    color: #333;
    line-height: 1.8em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-transform: capitalize
}

main .home.l-wrap .home-video-line {
    display: flex;
    align-items: center
}

main .home.l-wrap .home-video-intro {
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #dbdbdb;
    border-radius: 999px;
    margin-right: 36px;
    color: #56575b;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

main .home.l-wrap .home-video-intro span {
    vertical-align: middle
}

main .home.l-wrap .home-video-intro .arrow svg {
    width: 20px;
    height: 20px;
    transform: rotate(180deg)
}

main .home.l-wrap .home-video-intro .arrow svg path {
    fill: #999
}

main .home.l-wrap .home-video-intro.is-active .arrow svg {
    transform: rotate(0)
}

main .home.l-wrap .home-video-introcon {
    margin: 30px 0 0;
    color: #888;
    line-height: 1.8em;
    font-size: 16px
}

main .home.l-wrap .home-video-act {
    display: flex
}

main .home.l-wrap .home-video-date {
    margin-left: auto;
    font-size: 14px;
    color: #888
}

main .home.l-wrap .home-videocate {
    margin: 80px 0 30px
}

main .home.l-wrap .home-comment-tit,main .home.l-wrap .home-videocate-tit {
    font-size: 24px;
    color: #333;
    margin-bottom: 26px
}

main .home.l-wrap .home-comment-tit span {
    font-size: 16px;
    color: #333
}

main .home.l-wrap .home-catelist {
    display: flex;
    flex-wrap: wrap;
    margin: 50px -7.5px 0
}

main .home.l-wrap .home-catelist>li {
    width: 25%;
    margin-bottom: 40px
}

main .home.l-wrap .home-cateitem {
    padding: 0 7.5px;
    position: relative
}

main .home.l-wrap .home-cateitem .home-cateimg {
    position: relative;
    border-radius: 3px;
    overflow: hidden
}

main .home.l-wrap .home-cateitem .home-cateimg:after {
    content: "";
    display: block;
    padding-top: 56%
}

main .home.l-wrap .home-cateitem .home-cateimg>p {
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: #fff
}

main .home.l-wrap .home-cateitem .home-catename {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.4em;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

main .home.l-wrap .home-cateitem .img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #a2a2a2
}

main .home.l-wrap .home-cateitem .img-wrap>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

main .home.l-wrap .home-cateitem .img-wrap>span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

main .home.l-wrap .home-cateitem:after {
    position: absolute;
    display: block;
    background-color: #d1d1d2;
    content: "";
    width: 90%;
    height: 80%;
    left: 5%;
    top: -8px;
    border-radius: 3px;
    z-index: -1
}

main .home.l-wrap .home-cateitem:before {
    position: absolute;
    display: block;
    background-color: #ededed;
    content: "";
    width: 80%;
    height: 80%;
    left: 10%;
    top: -16px;
    z-index: -2;
    border-radius: 3px
}

main .home.l-wrap .home-comment-send {
    display: flex;
    margin-bottom: 40px
}

main .home.l-wrap .home-comment-send.is-replay {
    margin: 14px 0
}

main .home.l-wrap .home-comment-send.is-replay .comment-right {
    margin-left: 0
}

main .home.l-wrap .comment-item {
    display: flex;
    margin-top: 20px;
	padding: 8px;
}

main .home.l-wrap .comment-right-bottom {
    display: flex;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px dotted #e8e7e7
}

main .home.l-wrap .comment-right-bottom .comment-btn-list {
    display: flex
}

main .home.l-wrap .comment-right-bottom .comment-btn-list>div {
    font-size: 13px;
    color: #7c7c7f
}

main .home.l-wrap .comment-right-bottom .comment-btn-list .comment-reply {
    cursor: pointer
}

main .home.l-wrap .comment-right-bottom .comment-btn-list .comment-fold {
    cursor: pointer;
    margin-left: 20px
}

main .home.l-wrap .comment-left {
    min-width: 42px;
    flex: 0 0 42px
}

main .home.l-wrap .comment-left .comment-ava {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden
}

main .home.l-wrap .comment-left .comment-ava img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

main .home.l-wrap .comment-right {
    flex: 1;
    width: 100%;
    margin-left: 10px;
    position: relative
}

main .home.l-wrap .comment-right .sendComment {
    width: 100%;
    height: 130px;
    font-size: 16px;
    font: inherit;
    box-sizing: border-box;
    background-color: #f6f6f6;
    border: 0;
    outline: 0;
    padding: 20px 20px 46px;
    resize: none
}

main .home.l-wrap .comment-right .comment-btn {
    position: absolute;
    height: 30px;
    left: 20px;
    bottom: 0;
    right: 20px;
    background-color: #f6f6f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px
}

main .home.l-wrap .comment-right .comment-btn .btn-list {
    display: flex
}

main .home.l-wrap .comment-right .comment-btn .btn {
    font-size: 14px;
    color: #333;
    cursor: pointer
}

main .home.l-wrap .comment-right .comment-btn .btn svg {
    position: relative;
    top: 4px
}

main .home.l-wrap .comment-right .comment-btn .btn.close {
    margin-right: 14px
}

main .home.l-wrap .comment-right .comment-btn .btn.close,main .home.l-wrap .comment-right .comment-btn .btn.send {
    width: 77px;
    box-sizing: border-box;
    border-radius: 3px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e2e2e2
}

main .home.l-wrap .comment-right .comment-login {
    height: 130px;
    background: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6f6f6f
}

main .home.l-wrap .comment-right .comment-login .login-link {
    cursor: pointer
}

main .home.l-wrap .comment-right .comment-login .login-link:hover {
    text-decoration: underline
}

main .home.l-wrap .comment-content,main .home.l-wrap .comment-user {
    color: #888
}

main .home.l-wrap .comment-user span {
    font-size: 12px
}

main .home.l-wrap .comment-user .name {
    margin-right: 24px;
    font-size: 14px
}

main .home.l-wrap .comment-content {
    margin: 18px 0;
    line-height: 1.4em
}

main .home.l-wrap .comment-reply-list {
    margin-top: 18px
}

main .home.l-wrap .comment-reply-list>li {
    margin-bottom: 18px
}

main .home.l-wrap .comment-reply-list .reply-list-close {
    cursor: pointer;
    font-size: 13px;
    color: #7c7c7f;
    display: flex;
    justify-content: flex-end
}

main .home.l-wrap .comment-reply-list .reply-list-close .is-down svg {
    position: relative;
    top: 2px;
    transform: rotate(180deg)
}

main .home.l-wrap .comment-like {
    font-size: 12px;
    cursor: pointer;
    color: #7c7c7f
}

main .home.l-wrap .comment-like svg {
    position: relative;
    top: 3px
}

main .home.l-wrap .comment-like .is-like svg path {
    fill: #fe2c55
}

main .home.l-wrap .reply-arrow {
    position: relative;
    top: -2px;
    border: 5px solid transparent;
    border-right: none;
    border-left: 7px solid #7c7c7f;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    margin: 0 8px;
    width: 0
}

main .home.l-wrap .act-item {
    margin-right: 36px;
    cursor: pointer;
    position: relative
}

main .home.l-wrap .act-item span {
    font-size: 16px;
    height: 20px;
    line-height: 20px
}

main .home.l-wrap .act-item svg {
    position: relative;
    top: 4px
}

main .home.l-wrap .act-item svg path {
    transition: fill .1s
}

main .home.l-wrap .act-item:nth-of-type(2):hover>span svg path,main .home.l-wrap .act-item:nth-of-type(3):hover>span svg path {
    fill: #191919
}

main .home.l-wrap .act-item:nth-of-type(2):hover>.act-share .card,main .home.l-wrap .act-item:nth-of-type(3):hover>.act-share .card {
    max-height: 80px;
    padding: 10px;
    opacity: 1
}

main .home.l-wrap .act-item .act-share {
    padding-top: 10px;
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    transition: max-height .2s,opacity .2s
}

main .home.l-wrap .act-item .act-share .share-item a {
    display: inline-block
}

main .home.l-wrap .act-item .act-share .share-item {
    margin-right: 10px
}

main .home.l-wrap .act-item .act-share .share-item:last-child {
    margin-right: 0
}

main .home.l-wrap .act-item .act-share .share-item svg {
    width: 30px;
    height: 30px
}

main .home.l-wrap .act-item .act-share .share-embed {
    position: relative;
    background: #e8e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 4px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 5px
}

main .home.l-wrap .act-item .act-share .share-embed svg {
    width: 20px;
    height: auto
}

main .home.l-wrap .act-item .act-share .card {
    box-shadow: 0 0 24px rgba(0,0,0,.1);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    transition: max-heigh .3s,opacity .3s
}

main .home.l-wrap .act-item .act-share .card span {
    width: auto;
    height: auto;
    line-height: 24px
}

main .home.l-wrap .icon-like path {
    transition: fill .2s
}

main .home.l-wrap .icon-like.is-like path {
    fill: #fe2c55
}

@media screen and (max-width: 1750px) {
    main .home.l-wrap {
        padding:38px 100px 200px
    }
}

@media screen and (max-width: 1500px) {
    main .home.l-wrap {
        padding:38px 40px 200px
    }
}

@media screen and (max-width: 1105px) {
    main .home.l-wrap .home-right {
        display:none
    }

    main .home.l-wrap .home-left {
        width: 100%;
        padding-right: 0
    }
}

body .toasted-container.top-center {
    top: 40%
}

body .toasted.toasted-primary {
    background-color: #323442
}

body .toasted .primary .action,body .toasted.toasted-primary .action {
    color: #fe2c55
}

.tip-container {
    display: flex;
    width: 100vw;
    height: 100vh
}

.tip-container .tip {
    text-align: center;
    margin: auto
}

.home-btn {
    margin: 10px 0;
    height: 38px;
    width: 102px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
    outline: 0;
    border: 0;
    color: #fff;
    background-color: #fe2c55
}

.head {
    border-bottom: 1px solid #e8e8e8;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 299
}

.head .l-wrap {
    height: 100px;
    justify-content: space-between
}

.head .l-wrap,.head .user-info {
    align-items: center;
    display: flex
}

.head .user-info-box {
    display: flex
}

.head .user-ava {
    width: 226px;
    height: 60px;
    margin-right: 10px;
    /* border-radius: 50%; */
    overflow: hidden;
    cursor: pointer;
    /* border: 1px solid #e2e2e2; */
    display: flex;
    justify-content: center;
    align-items: center
}

.head .user-ava>img {
    width: 90%;
    height: 90%;
    -o-object-fit: contain;
    object-fit: contain
}

.head .user-view {
    margin-right: 14px;
    position: relative
}

.head .user-view:after {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    background-color: #666;
    border-radius: 50%;
    right: -10px;
    top: 7px
}

.head .user-name {
    font-size: 18px;
    font-weight: 700;
    margin-right: 20px;
    margin-bottom: 10px
}

.head .user-re {
    font-size: 15px;
    color: #666
}

.head .user-re>span {
    color: #000;
    font-weight: 700
}

.head .head-login {
    height: 38px;
    width: 102px;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    outline: 0;
    border: 0;
    color: #fff;
    background-color: #c00
}

.head .head-login,.head .l-right {
    display: flex;
    align-items: center
}

.head .head-lang {
    display: inline-block;
    margin:0 20px
}

.head .head-lang .lang-box {
    width: 136px;
    height: 38px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center
}

.head .head-lang-btn {
    border-radius: 999px;
    padding: 10px;
    color: #030303;
    font-size: 15px;
    cursor: pointer
}

.head .head-lang-btn img {
    position: relative;
    top: 4px
}

.head .head-lang-btn i {
    font-size: 12px;
    font-weight: 700;
    color: #555
}

.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #eee;
    color: #fe2c55
}

.flag-img {
    display: inline-block;
    position: relative;
    top: -2px;
    font-size: 14px;
    color: #555
}

.flag-img>img {
    position: relative;
    top: 2px;
    margin-right: 6px
}

.lang-active {
    width: 540px
}

.lang-active .el-dropdown-menu__item {
    width: 33.33%;
    float: left;
    box-sizing: border-box
}

.lang-active .el-dropdown-menu__item .flag-img {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.info-line {
    display: flex
}

.info-line>div {
    width: 62px;
    height: 62px;
    margin-right: 50px;
    display: flex;
    justify-content: center;
    align-items: center
}

.info-av {
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #e2e2e2
}

.info-av>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.info-num {
    flex-direction: column
}

.info-num>p {
    margin-bottom: 10px;
    font-size: 12px;
    color: #b1b1b1
}

.info-like {
    position: relative
}

.info-like:after {
    content: "";
    height: 20px;
    width: 1px;
    display: block;
    position: absolute;
    left: 90px;
    top: 20px;
    background-color: #dadada
}

.info-name {
    font-size: 20px;
    margin: 16px 0
}

.info-url {
    font-size: 12px
}

.info-url:hover {
    color: #fe2c55;
    text-decoration: underline
}

.info-intro {
    font-size: 14px
}

.info-intro a {
    color: #777;
    text-decoration: underline
}

.info-link,.info-link i {
    display: flex;
    align-items: center
}

.info-link i {
    width: 18px;
    height: 18px;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: #1ca9fb;
    margin-right: 10px
}

.info-url {
    color: #000;
    font-size: 15px
}

.info-intro {
    margin: 1em 0;
    color: #777;
    line-height: 2em
}

.info-follow {
    min-width: 88px;
    height: 36px;
    cursor: pointer;
    background-color: #fe2c55;
    border-radius: 3px;
    color: #fff;
    font-size: 14px
}

.cate {
    margin-top: 50px
}

.cate>ul>li {
    padding: 15px 30px 15px 10px;
    border-radius: 3px;
    overflow: hidden;
    transition: background-color .2s
}

.cate>ul>li.is-active,.cate>ul>li:hover {
    background-color: #f6f6f6
}

.cate-tit {
    margin-bottom: 18px;
    font-size: 18px;
    text-transform: uppercase;
    color: #000;
	display: flex;
    align-items: center;
}
.rec {
	margin-left:6px;
}
.cate-item {
    width: 100%;
    display: flex
}

.cate-img {
    width: 110px;
    min-width: 110px;
    flex: 0 0 110px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #e8e7e7;
    border-radius: 5px
}

.cate-img>img {
    max-height: 100%;
    max-width: 100%
}

.cate-img>span svg {
    width: 30px;
    height: 30px
}

.cate-img>span svg path {
    fill: #ccc
}

.cate-record {
    margin-top: 8px;
    font-size: 14px;
    display: flex
}

.cate-record .num {
    position: relative;
    margin-right: 20px;
    color: #555
}

.cate-record .num:after {
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #555;
    right: -10px;
    top: 6px
}

.cate-record .play {
    color: #d90000
}

.cate-name {
    cursor: pointer;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    white-space: nowrap
}

.cate-name>i {
    display: inline-block;
    position: relative;
    top: -2px;
    width: 4px;
    height: 4px;
    border-bottom: 2px solid #8e8e8e;
    border-right: 2px solid #8e8e8e;
    transform: rotate(315deg)
}

.cate-info {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
    box-sizing: border-box
}

.cate-bottom>p {
    color: #606060;
    line-height: 1.4em;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.cate-bottom>p a {
    color: #606060;
    text-decoration: underline
}

.video-list>div>ul {
    margin: 0 -8px 10px;
    display: flex;
    flex-wrap: wrap
}

.video-list>div>ul>li {
    width: 33%;
    margin-bottom: 22px;
    box-sizing: border-box;
    padding: 0 8px
}

.video-list-name {
    margin-bottom: 26px;
    font-size: 18px;
    text-transform: uppercase;
    color: #000
}
/* search */
.form-box {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.form-box .search-form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
	margin-right: 0.5rem!important;
}
.search-form-control {
    display: block;
    width: 100%!important;
    height: 26px!important;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* cate */
.video-cate-box{
	margin-bottom:10px;
}
.video-cate-content {
	flex: 0 0 100%; 
    max-width: 100%;
}
.mb-3 {
	margin-right:15px;
	margin-bottom:10px;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-info {
    color: #fff;
    background-color: #e60012;
    border-color: #e60012;
}
.btn-info:hover {
    color: #fff;
    background-color:#e60012;
    border-color:#e60012;
}
.video-list-name img {
    margin-right: 6px
}

.video-list-name h1 {
    display: inline-block
}

.vidoe-cate-info {
    color: #888;
    line-height: 1.5em
}

.video-item {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer
}

.video-item .video-info {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 16px;
    color: #fff;
    text-align: right
}

.video-item .video-info svg {
    position: relative;
    top: 2px
}

.video-item .video-name {
    margin: 10px 20px;
    line-height: 1.3em;
    font-size: 15px;
    overflow: hidden;
    max-height: 2.6em;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-transform: capitalize;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #212529;
    font-weight: 700;
    transition: color .2s ease
}

.video-item .video-play {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background-color: rgba(0,0,0,.6);
    transition: opacity .3s ease
}

.video-item .img-wrap,.video-item .video-play {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    overflow: hidden
}

.video-item .img-wrap {
    background-color: #eee
}

.video-item .img-wrap>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.video-item .video-img {
    position: relative;
	height:178px;
}

.video-item .video-img:after {
    content: "";
    /* display: block; */
    padding-top: 130%
}

.video-item:hover .video-name {
    color: #fe2c55
}

.video-item:hover .video-play {
    opacity: 1
}

.dialog-wrap {
    z-index: 9999
}

.dialog-outter,.dialog-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.dialog-outter {
    opacity: .6;
    background: #000
}

.dialog-inner {
    z-index: 9;
    margin: auto;
    background-color: #fff;
    border-radius: 3px
}

.dialog-top {
    padding: 0 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 65px;
    border-bottom: 1px solid #e9e9e9;
    min-width: 300px
}

.dialog-close {
    cursor: pointer
}

.dialog-title {
    font-size: 20px;
    color: #333
}

.dialog-wrap.dialog-embed .dialog-top {
    padding-left: 0;
    height: 45px
}

.dialog-wrap.dialog-embed .dialog-inner {
    display: flex
}

.dialog-wrap.dialog-embed .dialog-left>iframe {
    display: block;
    height: 400px;
    width: 600px
}

.dialog-wrap.dialog-embed .dialog-right {
    margin-left: 25px
}

.dialog-wrap.dialog-embed .dialog-content {
    padding: 25px 25px 25px 0;
    box-sizing: border-box
}

.dialog-wrap.dialog-embed .dialog-content>.textarea {
    width: 260px;
    height: auto;
    resize: none;
    outline: 0;
    border: 0;
    padding-bottom: 14px;
    line-height: 1.4em;
    color: #606060;
    word-break: break-all;
    border-bottom: 1px solid #e9e9e9;
    font-family: consolas,Source code pro,monaco,menlo,monospace
}

.dialog-wrap.dialog-embed .dialog-content .btn-copy {
    padding-right: 25px;
    cursor: pointer;
    margin-top: 20px;
    text-align: right;
    font-size: 14px;
    color: #606060
}

.login {
    width: 600px;
    height: auto;
    padding: 26px 86px 50px;
    box-sizing: border-box
}

.login .field-wrap {
    position: relative;
    border: 1px solid #e9e9e9;
    height: 60px;
    display: flex;
    padding-left: 16px;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 24px
}

.login label {
    position: absolute;
    top: 0;
    left: 16px;
    min-width: 80px;
    height: 100%;
    line-height: 58px;
    color: #a0a0a0
}

.login label>img {
    position: relative;
    margin-right: 8px;
    top: 2px
}

.login input {
    width: calc(100% - 80px);
    height: 100%;
    font-size: 14px;
    box-shadow: inset 0 0 0 1000px #fff!important;
    border: 0;
    outline: 0;
    padding: 0;
    margin-left: 80px
}

.login .login-codebtn {
    cursor: pointer;
    height: 60px;
    width: 126px;
    color: #888
}

.login .field-code {
    border: 0;
    padding-left: 0;
    margin-bottom: 0
}

.login .field-code .login-input {
    flex: 1;
    display: flex;
    margin-right: 16px;
    height: 100%;
    padding-left: 16px;
    align-items: center;
    border: 1px solid #e9e9e9
}

.login .login-msg {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    margin-bottom: 10px;
    color: #fe3824
}

.login-title {
    font-size: 18px;
    color: #636363;
    margin-bottom: 26px
}

.login-btn {
    height: 65px;
    width: 100%;
    cursor: default;
    background-color: rgba(254,51,85,.5);
    transition: background-color .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff
}

.login-btn.is-active {
    cursor: pointer
}

.el-pagination.is-background .el-pager li:not(.disabled).active,.login-btn.is-active {
    background-color: #fe3355
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #fe3355
}

.el-pagination {
    display: flex;
    justify-content: center
}

.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    color: #fff
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    margin: 8px;
    border-radius: 50%;
    -webkit-animation: lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;
    animation: lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;
    border: 4px solid transparent;
    border-top-color: #fe3355
}

.lds-ring div:first-child {
    -webkit-animation-delay: -.45s;
    animation-delay: -.45s
}

.lds-ring div:nth-child(2) {
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}

.lds-ring div:nth-child(3) {
    -webkit-animation-delay: -.15s;
    animation-delay: -.15s
}

@-webkit-keyframes lds-ring {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}
/* comment */
.admin-user {widht:95%;padding-left:5%;}
.comment-list {background-color:#f9f9f9}
.pagination {margin: 20px 0 20px 0;text-align: center;}
.pagination a{padding: 5px 16px;line-height: 25px;border: 1px solid #ddd;margin: 0 2px;color:#969696;border-radius: 2px;}
.pagination .page-num-current,.pagination a:hover{background: #e60012;border-color: #e60012;color: #fff;}
.inquiry {
    margin-top: 55px
}

.inquiry .tit {
    position: relative;
    margin-bottom: 34px;
    padding-bottom: 16px;
    font-size: 24px;
    color: #050713
}

.inquiry .tit:after {
    position: absolute;
    display: block;
    content: "";
    height: 2px;
    width: 36px;
    background-color: #1f1f1f;
    top: 100%;
    left: 0
}

.inquiry .form-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px
}

.inquiry .form-item-wrap {
    box-sizing: border-box;
    padding: 0 10px;
    width: 50%
}

.inquiry .form-item-wrap.item-content {
    width: 100%
}

.inquiry .form-item {
    margin-bottom: 18px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    background-color: #f2f2f2;
    border: 1px solid #e3e3e3;
    transition: border .2s;
    text-transform: capitalize
}

.inquiry .form-item .form-icon {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0
}

.inquiry .form-item label {
    display: block;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 14px;
    color: #6f6f6f;
    height: 55px;
    line-height: 55px;
    min-width: 100px
}

.inquiry .form-item input {
    line-height: 55px
}

.inquiry .form-item input,.inquiry .form-item textarea {
    background-color: #f2f2f2;
    margin-right: 55px;
    font: inherit;
    outline: 0;
    border: 0;
    flex: 1
}

.inquiry .form-item textarea {
    resize: none;
    height: 230px;
    padding: 16px 10px 10px 0;
    line-height: 1.5em
}

.inquiry .form-item .icon {
    display: block;
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAADrElEQVRYhe3XXYiVZRAH8N9aiaUmKNiFtZkXXmSaUVhZYKWkrIpRmZVEQZIUZRaVTVCp5Q5ZliRGZEikqJRUYCVhH3YTESaUH0GsoZY3UcH2IWbUdvG+J4/bOWePe9FF7B8OvO8z88zM/3lnnplDH/rwv0JL9UtXV9c/z5k5Ck9gEkbgMN7HMuyIiL/+uzBrIzMH4W5ci3PRH/uxFc9FxP6KbktLQbUm4cw8GzvK5fU4gMFYiKHYhhkRcbRBMHswGr/1gstp2BsR4xvYn4A38ANexGc4gvNwE6ZhQUSs4Rjhk+vYC5yEsRFxqMrJSszEOtyHpxoE3VoGMy8i3umR4jEfl2EzxjTQGYcPsRxPdsu2vXgtM6djY2b+GRFrK8J+dWxehVeryUJE/BIRG7ARN/cQ+4+Kw3kpM+f0oFshMlVB9kZ1MiMz+ymybk1ELK1XWuUhz8XqzBxRWa9HeBgONojtIAb1RCAiduBqLM/MeY10M/N6rMXMiPi4gWobzsCjTfjforh3FlbW6hHej7ENbI3H1z05LJ3uUWTMosy8v5ZOZt6OFZhSHlIjzMJbEfFrM/4V5Te98lKvhofi5wZGDuHyJh2KiH2ZeSW2ZuaQiHi8IisP4U5Mqr5VG2AU3iz3XoLJEbEsM1txLxbhFEV9L8UunFPZXI/wNszNzFUR0VEtyMwxmINXmgiuGr8rbtE7MnMIHsRjuA1HG8RSC5W6HYkLyufhuFTRmgZigqI0j0M9JwsxGc/gmm6yFfgODzcbXWaeqailjVipqNVObMf5ipTbnpltEfFlD+Y6MA4iYhM2lc87MLHUOYyLS983YF9lc80ajojDWIxZmTm/KvAFmIrFpU4zZEfjE6yOiCUR0RkR12FgRLRFxE8RsU6R1u+VbakRvlf02mZxi2IQQR3CmdmCzxUnM61KdAW+wq5SpyEy80J8hEciYlW1LCK6ur1vUbSjzZnZVsfecEWdPtuT71J/JqYosgo1CJc9swMfYCceqBI/hN0liY4e+uswvI35EbG+mQDLdtSGNWq3vSX4Bjszc2RmtpZ9+V/IzBnYgLuq54njvlJ7e/s8PI9bsbn7V6gy1oLZiotrQUS8XEPnC8V825vR8lTsioiLutnsxOnddHfjBXyKP0qfcxX9/55KbDVn6fb29m8VQ8XrTQY2G60RcdYJkOk1MnMABlQt9Vd8nDmKum5RzP3vKv48HKgo1pulBytuuomaR+eJBt5bRMQRRWurxtPlrw99wN+vqkfD9A1oygAAAABJRU5ErkJggg==) no-repeat
}

.inquiry .form-item .icon-mail {
    background-position: -20px 0
}
.inquiry .form-item .icon-phone {
    display: block;
    width: 21px;
    height: 21px;
    background: url(../fonts/phone.svg) no-repeat

}
.inquiry .form-item .icon-whatsapp {
    display: block;
    width: 20px;
    height: 20px;
    background: url(../fonts/whatsapp.svg) no-repeat

}
.inquiry .form-item .icon-content {
    background-position: -40px 0
}

.inquiry .form-item.is-error {
    border: 1px solid red
}

.inquiry .inquiry-btn {
    padding: 13px 80px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    background-color: #fe2c55;
    border-radius: 3px;
    color: #fff
}

.inquiry .inquiry-btn:active {
    transform: scale(.95)
}

.inquiry .inquiry-btn.is-disable {
    cursor: default;
    background-color: rgba(34,34,34,.3)
}
.form-group {margin-bottom:15px;}
.form-group label {color:#5a5a5a}
.form-group .col-6 {width:100px;height:30px;display:inline-block;margin-right:10px;vertical-align:top;}	
.form-group .row {margin-top:10px;}
.form-group input {width:100px;height:26px;border:1px solid #ccc;}
.error-wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.error-box {
    height: 450px;
    width: 1050px;
    margin: 0 30px;
    background: url(/_nuxt/img/404.d1c0c32.png) no-repeat
}

.error-con {
    margin-left: 680px
}

.error-con .error-tit {
    margin-top: 40px;
    font-size: 90px;
    color: #111634
}

.error-con .error-tip {
    font-size: 18px;
    color: #666;
    margin: 8px 0 20px
}

.error-con a.btn-home,.error-con button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 5px;
    outline: 0;
    border: 0;
    color: #fff;
    background: #2f6bff
}

.error-con a.btn-home:active,.error-con button:active {
    transform: scale(.95)
}

.xgplayer-skin-dy {
    background: #000;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -ms-user-select: none
}

.xgplayer-skin-dy * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

.xgplayer-skin-dy.xgplayer-rotate-fullscreen {
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    right: 0;
    height: 100vw!important;
    width: 100vh!important;
    transform-origin: top left;
    transform: rotate(90deg)
}

.xgplayer-skin-dy.xgplayer-is-fullscreen {
    width: 100%!important;
    height: 100%!important;
    padding-top: 0!important;
    z-index: 9999
}

.xgplayer-skin-dy.xgplayer-is-fullscreen.xgplayer-inactive {
    cursor: none
}

.xgplayer-skin-dy video {
    width: 100%;
    height: 100%;
    outline: none
}

.xgplayer-skin-dy .xgplayer-none {
    display: none
}

@-webkit-keyframes loadingRotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes loadingRotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes loadingDashOffset {
    0% {
        stroke-dashoffset: 236
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes loadingDashOffset {
    0% {
        stroke-dashoffset: 236
    }

    to {
        stroke-dashoffset: 0
    }
}

.xgplayer-skin-dy .xgplayer-controls {
    display: flex;
    position: absolute;
    bottom: 0;
    padding-bottom: 8px;
    left: 0;
    right: 0;
    height: 40px;
    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.37),rgba(0,0,0,.75),rgba(0,0,0,.75));
    z-index: 10
}

.xgplayer-skin-dy.xgplayer-inactive .xgplayer-controls,.xgplayer-skin-dy.xgplayer-is-live .xgplayer-controls .xgplayer-progress,.xgplayer-skin-dy.xgplayer-is-live .xgplayer-controls .xgplayer-time,.xgplayer-skin-dy.xgplayer-no-controls .xgplayer-controls {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-live .xgplayer-controls .xgplayer-live {
    display: block
}

.xgplayer-skin-dy .xgplayer-live {
    display: block;
    font-size: 12px;
    color: #fff;
    line-height: 40px;
    order: 1
}

.xgplayer-skin-dy .xgplayer-icon {
    display: block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    fill: #fff
}

.xgplayer-skin-dy .xgplayer-icon svg {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-tips {
    background: #323442;
    border-radius: 1px;
    display: none;
    position: absolute;
    font-family: PingFangSC-Regular;
    font-size: 11px;
    color: #fff;
    padding: 4px 6px;
    text-align: center;
    top: -30px;
    left: 50%;
    margin-left: -16px;
    width: auto;
    white-space: nowrap
}

.xgplayer-skin-dy.xgplayer-mobile .xgplayer-tips {
    display: none!important
}

.xgplayer-skin-dy .xgplayer-screen-container {
    display: block;
    width: 100%
}

.xgplayer-skin-dy .xgplayer-enter {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 120
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 30px;
    width: 30px;
    position: relative;
    transform: translate(-50%,-50%)
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div {
    width: 10%;
    height: 26%;
    background-color: hsla(0,0%,100%,.7);
    position: absolute;
    left: 44%;
    top: 37%;
    opacity: 0;
    border-radius: 30px;
    -webkit-animation: fade 1s linear infinite;
    animation: fade 1s linear infinite
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar1 {
    transform: rotate(0deg) translateY(-142%);
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar2 {
    transform: rotate(30deg) translateY(-142%);
    -webkit-animation-delay: -.9163s;
    animation-delay: -.9163s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar3 {
    transform: rotate(60deg) translateY(-142%);
    -webkit-animation-delay: -.833s;
    animation-delay: -.833s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar4 {
    transform: rotate(90deg) translateY(-142%);
    -webkit-animation-delay: -.7497s;
    animation-delay: -.7497s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar5 {
    transform: rotate(120deg) translateY(-142%);
    -webkit-animation-delay: -.6664s;
    animation-delay: -.6664s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar6 {
    transform: rotate(150deg) translateY(-142%);
    -webkit-animation-delay: -.5831s;
    animation-delay: -.5831s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar7 {
    transform: rotate(180deg) translateY(-142%);
    -webkit-animation-delay: -.4998s;
    animation-delay: -.4998s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar8 {
    transform: rotate(210deg) translateY(-142%);
    -webkit-animation-delay: -.4165s;
    animation-delay: -.4165s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar9 {
    transform: rotate(240deg) translateY(-142%);
    -webkit-animation-delay: -.3332s;
    animation-delay: -.3332s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar10 {
    transform: rotate(270deg) translateY(-142%);
    -webkit-animation-delay: -.2499s;
    animation-delay: -.2499s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar11 {
    transform: rotate(300deg) translateY(-142%);
    -webkit-animation-delay: -.1666s;
    animation-delay: -.1666s
}

.xgplayer-skin-dy .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar12 {
    transform: rotate(330deg) translateY(-142%);
    -webkit-animation-delay: -.0833s;
    animation-delay: -.0833s
}

@-webkit-keyframes fade {
    0% {
        opacity: 1
    }

    to {
        opacity: .25
    }
}

@keyframes fade {
    0% {
        opacity: 1
    }

    to {
        opacity: .25
    }
}

.xgplayer-skin-dy.xgplayer-is-enter .xgplayer-enter {
    display: block
}

.xgplayer-skin-dy .xgplayer-play,.xgplayer-skin-dy .xgplayer-play-img {
    width: 40px;
    position: relative;
    order: 0;
    display: block;
    cursor: pointer;
    margin-left: 3px
}

.xgplayer-skin-dy .xgplayer-play-img .xgplayer-icon,.xgplayer-skin-dy .xgplayer-play .xgplayer-icon {
    margin-top: 3px;
    width: 32px
}

.xgplayer-skin-dy .xgplayer-play-img .xgplayer-icon div,.xgplayer-skin-dy .xgplayer-play .xgplayer-icon div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-play-img .xgplayer-icon .xgplayer-icon-play,.xgplayer-skin-dy .xgplayer-play .xgplayer-icon .xgplayer-icon-play {
    display: block
}

.xgplayer-skin-dy .xgplayer-play-img .xgplayer-icon .xgplayer-icon-pause,.xgplayer-skin-dy .xgplayer-play .xgplayer-icon .xgplayer-icon-pause {
    display: none
}

.xgplayer-skin-dy .xgplayer-play-img .xgplayer-tips .xgplayer-tip-play,.xgplayer-skin-dy .xgplayer-play .xgplayer-tips .xgplayer-tip-play {
    display: block
}

.xgplayer-skin-dy .xgplayer-play-img .xgplayer-tips .xgplayer-tip-pause,.xgplayer-skin-dy .xgplayer-play .xgplayer-tips .xgplayer-tip-pause {
    display: none
}

.xgplayer-skin-dy .xgplayer-play-img:hover,.xgplayer-skin-dy .xgplayer-play:hover {
    opacity: .85
}

.xgplayer-skin-dy .xgplayer-play-img:hover .xgplayer-tips,.xgplayer-skin-dy .xgplayer-play:hover .xgplayer-tips {
    display: block
}

.xgplayer-skin-dy.xgplayer-playing .xgplayer-play-img .xgplayer-icon .xgplayer-icon-play,.xgplayer-skin-dy.xgplayer-playing .xgplayer-play .xgplayer-icon .xgplayer-icon-play {
    display: none
}

.xgplayer-skin-dy.xgplayer-playing .xgplayer-play-img .xgplayer-icon .xgplayer-icon-pause,.xgplayer-skin-dy.xgplayer-playing .xgplayer-play .xgplayer-icon .xgplayer-icon-pause {
    display: block
}

.xgplayer-skin-dy.xgplayer-playing .xgplayer-play-img .xgplayer-tips .xgplayer-tip-play,.xgplayer-skin-dy.xgplayer-playing .xgplayer-play .xgplayer-tips .xgplayer-tip-play {
    display: none
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-play-img .xgplayer-icon .xgplayer-icon-play,.xgplayer-skin-dy.xgplayer-pause .xgplayer-play .xgplayer-icon .xgplayer-icon-play,.xgplayer-skin-dy.xgplayer-playing .xgplayer-play-img .xgplayer-tips .xgplayer-tip-pause,.xgplayer-skin-dy.xgplayer-playing .xgplayer-play .xgplayer-tips .xgplayer-tip-pause {
    display: block
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-play-img .xgplayer-icon .xgplayer-icon-pause,.xgplayer-skin-dy.xgplayer-pause .xgplayer-play .xgplayer-icon .xgplayer-icon-pause {
    display: none
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-play-img .xgplayer-tips .xgplayer-tip-play,.xgplayer-skin-dy.xgplayer-pause .xgplayer-play .xgplayer-tips .xgplayer-tip-play {
    display: block
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-play-img .xgplayer-tips .xgplayer-tip-pause,.xgplayer-skin-dy.xgplayer-pause .xgplayer-play .xgplayer-tips .xgplayer-tip-pause {
    display: none
}

.xgplayer-skin-dy .xgplayer-start {
    border-radius: 50%;
    display: inline-block;
    width: 70px;
    height: 70px;
    background: rgba(0,0,0,.38);
    overflow: hidden;
    text-align: center;
    line-height: 70px;
    vertical-align: middle;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 115;
    margin: -35px auto auto -35px;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-start div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-start div svg {
    fill: hsla(0,0%,100%,.7)
}

.xgplayer-skin-dy .xgplayer-start .xgplayer-icon-play {
    display: block
}

.xgplayer-skin-dy .xgplayer-start .xgplayer-icon-pause {
    display: none
}

.xgplayer-skin-dy .xgplayer-start:hover {
    opacity: .85
}

.xgplayer-skin-dy.xgplayer-pause.xgplayer-start-hide .xgplayer-start,.xgplayer-skin-dy.xgplayer-playing .xgplayer-start,.xgplayer-skin-dy.xgplayer-playing .xgplayer-start .xgplayer-icon-play,.xgplayer-skin-dy.xgplayer-start-hide .xgplayer-start {
    display: none
}

.xgplayer-skin-dy.xgplayer-playing .xgplayer-start .xgplayer-icon-pause {
    display: block
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-start {
    display: inline-block
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-start .xgplayer-icon-play {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-replay .xgplayer-start,.xgplayer-skin-dy.xgplayer-pause .xgplayer-start .xgplayer-icon-pause {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-replay .xgplayer-start .xgplayer-icon-play {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-replay .xgplayer-start .xgplayer-icon-pause {
    display: none
}

.xgplayer-skin-dy .xgplayer-poster {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-size: cover;
    background-position: 50%
}

.xgplayer-skin-dy.xgplayer-nostart .xgplayer-poster {
    display: block
}

.xgplayer-skin-dy .xgplayer-placeholder {
    flex: 1;
    order: 3;
    display: block
}

.xgplayer-skin-dy .xgplayer-fullscreen,.xgplayer-skin-dy .xgplayer-fullscreen-img {
    position: relative;
    order: 13;
    display: block;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 3px
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-icon,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-icon {
    margin-top: 3px
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-icon div,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-icon div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-icon .xgplayer-icon-requestfull,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-icon .xgplayer-icon-requestfull {
    display: block
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-icon .xgplayer-icon-exitfull,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-icon .xgplayer-icon-exitfull {
    display: none
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-tips,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-tips {
    position: absolute;
    right: 0;
    left: auto
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-tips .xgplayer-tip-requestfull,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-tips .xgplayer-tip-requestfull {
    display: block
}

.xgplayer-skin-dy .xgplayer-fullscreen-img .xgplayer-tips .xgplayer-tip-exitfull,.xgplayer-skin-dy .xgplayer-fullscreen .xgplayer-tips .xgplayer-tip-exitfull {
    display: none
}

.xgplayer-skin-dy .xgplayer-fullscreen-img:hover,.xgplayer-skin-dy .xgplayer-fullscreen:hover {
    opacity: .85
}

.xgplayer-skin-dy .xgplayer-fullscreen-img:hover .xgplayer-tips,.xgplayer-skin-dy .xgplayer-fullscreen:hover .xgplayer-tips {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen-img .xgplayer-icon .xgplayer-icon-requestfull,.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen .xgplayer-icon .xgplayer-icon-requestfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen-img .xgplayer-icon .xgplayer-icon-requestfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen .xgplayer-icon .xgplayer-icon-requestfull {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen-img .xgplayer-icon .xgplayer-icon-exitfull,.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen .xgplayer-icon .xgplayer-icon-exitfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen-img .xgplayer-icon .xgplayer-icon-exitfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen .xgplayer-icon .xgplayer-icon-exitfull {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen-img .xgplayer-tips .xgplayer-tip-requestfull,.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen .xgplayer-tips .xgplayer-tip-requestfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen-img .xgplayer-tips .xgplayer-tip-requestfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen .xgplayer-tips .xgplayer-tip-requestfull {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen-img .xgplayer-tips .xgplayer-tip-exitfull,.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-fullscreen .xgplayer-tips .xgplayer-tip-exitfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen-img .xgplayer-tips .xgplayer-tip-exitfull,.xgplayer-skin-dy.xgplayer-rotate-fullscreen .xgplayer-fullscreen .xgplayer-tips .xgplayer-tip-exitfull {
    display: block
}

.xgplayer-skin-dy .xgplayer-cssfullscreen,.xgplayer-skin-dy .xgplayer-cssfullscreen-img {
    position: relative;
    order: 12;
    display: block;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-icon,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-icon {
    width: 32px;
    margin-top: 5px
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-icon div,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-icon div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-icon .xgplayer-icon-requestfull,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-icon .xgplayer-icon-requestfull {
    display: block
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-icon .xgplayer-icon-exitfull,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-icon .xgplayer-icon-exitfull {
    display: none
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-tips,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-tips {
    margin-left: -40px
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-tips .xgplayer-tip-requestfull,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-tips .xgplayer-tip-requestfull {
    display: block
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img .xgplayer-tips .xgplayer-tip-exitfull,.xgplayer-skin-dy .xgplayer-cssfullscreen .xgplayer-tips .xgplayer-tip-exitfull {
    display: none
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img:hover,.xgplayer-skin-dy .xgplayer-cssfullscreen:hover {
    opacity: .85
}

.xgplayer-skin-dy .xgplayer-cssfullscreen-img:hover .xgplayer-tips,.xgplayer-skin-dy .xgplayer-cssfullscreen:hover .xgplayer-tips {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-icon .xgplayer-icon-requestfull,.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-icon .xgplayer-icon-requestfull {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-icon .xgplayer-icon-exitfull,.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-icon .xgplayer-icon-exitfull {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-tips,.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-tips {
    margin-left: -47px
}

.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-tips .xgplayer-tip-requestfull,.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-tips .xgplayer-tip-requestfull {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-tips .xgplayer-tip-exitfull,.xgplayer-skin-dy.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-tips .xgplayer-tip-exitfull {
    display: block
}

.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-cssfullscreen,.xgplayer-skin-dy.xgplayer-is-fullscreen .xgplayer-cssfullscreen-img {
    display: none
}

.xgplayer-skin-dy.xgplayer-is-cssfullscreen {
    position: fixed!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
    z-index: 99999!important
}

.xgplayer-lang-is-en .xgplayer-cssfullscreen-img .xgplayer-tips,.xgplayer-lang-is-en .xgplayer-cssfullscreen .xgplayer-tips,.xgplayer-lang-is-en.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-tips,.xgplayer-lang-is-en.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-tips {
    margin-left: -46px
}

.lang-is-jp .xgplayer-cssfullscreen-img .xgplayer-tips,.lang-is-jp .xgplayer-cssfullscreen .xgplayer-tips {
    margin-left: -120px
}

.lang-is-jp.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen-img .xgplayer-tips,.lang-is-jp.xgplayer-is-cssfullscreen .xgplayer-cssfullscreen .xgplayer-tips {
    margin-left: -60px
}

.xgplayer-skin-dy .xgplayer-volume {
    outline: none;
    order: 4;
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
    z-index: 18
}

.xgplayer-skin-dy .xgplayer-volume .xgplayer-icon {
    margin-top: 8px;
    cursor: pointer;
    position: absolute;
    bottom: -9px
}

.xgplayer-skin-dy .xgplayer-volume .xgplayer-icon div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-volume .xgplayer-icon .xgplayer-icon-large {
    display: block
}

.xgplayer-skin-dy .xgplayer-volume .xgplayer-icon .xgplayer-icon-muted,.xgplayer-skin-dy .xgplayer-volume .xgplayer-icon .xgplayer-icon-small {
    display: none
}

.xgplayer-skin-dy .xgplayer-slider {
    display: none;
    position: absolute;
    width: 28px;
    height: 92px;
    background: #323442;
    border-radius: 1px;
    bottom: 42px;
    outline: none
}

.xgplayer-skin-dy .xgplayer-slider:after {
    content: " ";
    display: block;
    height: 15px;
    width: 28px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 20
}

.xgplayer-skin-dy .xgplayer-bar,.xgplayer-skin-dy .xgplayer-drag {
    display: block;
    position: absolute;
    bottom: 6px;
    left: 12px;
    background: hsla(0,0%,100%,.3);
    border-radius: 100px;
    width: 4px;
    height: 76px;
    outline: none;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-drag {
    bottom: 0;
    left: 0;
    background: #fa1f41;
    max-height: 76px
}

.xgplayer-skin-dy .xgplayer-drag:after {
    content: " ";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.26);
    position: absolute;
    border-radius: 50%;
    left: -2px;
    top: -6px
}

.xgplayer-skin-dy.xgplayer-volume-active .xgplayer-slider,.xgplayer-skin-dy.xgplayer-volume-large .xgplayer-volume .xgplayer-icon .xgplayer-icon-large {
    display: block
}

.xgplayer-skin-dy.xgplayer-volume-large .xgplayer-volume .xgplayer-icon .xgplayer-icon-muted,.xgplayer-skin-dy.xgplayer-volume-large .xgplayer-volume .xgplayer-icon .xgplayer-icon-small,.xgplayer-skin-dy.xgplayer-volume-small .xgplayer-volume .xgplayer-icon .xgplayer-icon-large {
    display: none
}

.xgplayer-skin-dy.xgplayer-volume-small .xgplayer-volume .xgplayer-icon .xgplayer-icon-small {
    display: block
}

.xgplayer-skin-dy.xgplayer-volume-muted .xgplayer-volume .xgplayer-icon .xgplayer-icon-large,.xgplayer-skin-dy.xgplayer-volume-muted .xgplayer-volume .xgplayer-icon .xgplayer-icon-small,.xgplayer-skin-dy.xgplayer-volume-small .xgplayer-volume .xgplayer-icon .xgplayer-icon-muted {
    display: none
}

.xgplayer-skin-dy.xgplayer-volume-muted .xgplayer-volume .xgplayer-icon .xgplayer-icon-muted {
    display: block
}

.xgplayer-skin-dy.xgplayer-mobile .xgplayer-volume .xgplayer-slider {
    display: none
}

.xgplayer-skin-dy .xgplayer-loading {
    display: none;
    width: 100px;
    height: 100px;
    overflow: hidden;
    transform: scale(.7);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px auto auto -50px
}

.xgplayer-skin-dy .xgplayer-loading svg {
    border-radius: 50%;
    transform-origin: center;
    -webkit-animation: loadingRotate 1s linear infinite;
    animation: loadingRotate 1s linear infinite
}

.xgplayer-skin-dy .xgplayer-loading svg path {
    stroke: #ddd;
    stroke-dasharray: 236;
    -webkit-animation: loadingDashOffset 2s linear infinite;
    animation: loadingDashOffset 2s linear infinite;
    animation-direction: alternate-reverse;
    fill: none;
    stroke-width: 12px
}

.xgplayer-skin-dy.xgplayer-nostart .xgplayer-loading {
    display: none
}

.xgplayer-skin-dy.xgplayer-pause .xgplayer-loading {
    display: none!important
}

.xgplayer-skin-dy.xgplayer-isloading .xgplayer-loading {
    display: block
}

.xgplayer-skin-dy .xgplayer-progress {
    display: block;
    position: absolute;
    height: 20px;
    line-height: 20px;
    left: 12px;
    right: 12px;
    outline: none;
    top: -15px;
    z-index: 35
}

.xgplayer-skin-dy .xgplayer-progress-outer {
    background: hsla(0,0%,100%,.3);
    display: block;
    height: 3px;
    line-height: 3px;
    margin-top: 8.5px;
    width: 100%;
    position: relative;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-progress-cache,.xgplayer-skin-dy .xgplayer-progress-played {
    display: block;
    height: 100%;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0
}

.xgplayer-skin-dy .xgplayer-progress-cache {
    width: 0;
    background: hsla(0,0%,100%,.5)
}

.xgplayer-skin-dy .xgplayer-progress-played {
    display: block;
    width: 0;
    background-image: linear-gradient(-90deg,#fa1f41,#e31106);
    border-radius: 0 1.5px 1.5px 0
}

.xgplayer-skin-dy .xgplayer-progress-btn {
    display: none;
    position: absolute;
    left: 0;
    top: -5px;
    width: 13px;
    height: 13px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.26);
    left: 100%;
    transform: translate(-50%);
    z-index: 36
}

.xgplayer-skin-dy .xgplayer-progress-point {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-progress-point.xgplayer-tips {
    margin-left: 0;
    top: -25px;
    display: none;
    z-index: 100
}

.xgplayer-skin-dy .xgplayer-progress-dot {
    display: inline-block;
    position: absolute;
    height: 3px;
    width: 5px;
    top: 0;
    background: #fff;
    border-radius: 6px;
    z-index: 16
}

.xgplayer-skin-dy .xgplayer-progress-dot .xgplayer-progress-tip {
    position: absolute;
    bottom: 200%;
    right: 50%;
    transform: translateX(50%);
    height: auto;
    line-height: 30px;
    width: auto;
    background: rgba(0,0,0,.3);
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.8);
    cursor: default;
    white-space: nowrap;
    display: none
}

.xgplayer-skin-dy .xgplayer-progress-dot-show .xgplayer-progress-tip {
    display: block
}

.xgplayer-skin-dy .xgplayer-progress-thumbnail {
    position: absolute;
    box-sizing: border-box
}

.xgplayer-skin-dy .xgplayer-progress-thumbnail.xgplayer-tips {
    margin-left: 0;
    display: none;
    z-index: 99
}

.xgplayer-skin-dy .xgplayer-coverpreview {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none
}

.xgplayer-skin-dy .xgplayer-coverpreview .xgplayer-coverpreview-outer {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.xgplayer-skin-dy .xgplayer-coverpreview .xgplayer-coverpreview-outer .xgplayer-coverpreview-thumbnail {
    display: block
}

.xgplayer-skin-dy .xgplayer-coverpreview .xgplayer-coverpreview-outer .xgplayer-coverpreview-point {
    display: block;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 11px;
    color: #ccc;
    padding: 2px 4px
}

.xgplayer-skin-dy .xgplayer-coverpreview .xgplayer-coverpreview-outer .xgplayer-coverpreview-point span {
    color: #fff
}

.xgplayer-skin-dy .xgplayer-progress:focus .xgplayer-progress-outer,.xgplayer-skin-dy .xgplayer-progress:hover .xgplayer-progress-outer {
    height: 6px;
    margin-top: 7px
}

.xgplayer-skin-dy .xgplayer-progress:focus .xgplayer-progress-dot,.xgplayer-skin-dy .xgplayer-progress:hover .xgplayer-progress-dot {
    height: 6px
}

.xgplayer-skin-dy .xgplayer-progress:focus .xgplayer-progress-btn,.xgplayer-skin-dy .xgplayer-progress:hover .xgplayer-progress-btn {
    display: block;
    top: -3px
}

.xgplayer-skin-dy.xgplayer-definition-active .xgplayer-progress,.xgplayer-skin-dy.xgplayer-playbackrate-active .xgplayer-progress,.xgplayer-skin-dy.xgplayer-texttrack-active .xgplayer-progress,.xgplayer-skin-dy.xgplayer-volume-active .xgplayer-progress {
    z-index: 15
}

.xgplayer-skin-dy.xgplayer-mobile .xgplayer-progress-btn {
    display: block!important
}

.xgplayer-skin-dy.xgplayer-mobile .xgplayer-progress:focus .xgplayer-progress-outer,.xgplayer-skin-dy.xgplayer-mobile .xgplayer-progress:hover .xgplayer-progress-outer {
    height: 3px!important;
    margin-top: 8.5px!important
}

.xgplayer-skin-dy.xgplayer-mobile .xgplayer-progress:focus .xgplayer-progress-btn,.xgplayer-skin-dy.xgplayer-mobile .xgplayer-progress:hover .xgplayer-progress-btn {
    display: block!important;
    top: -5px!important
}

.xgplayer-skin-dy .xgplayer-time {
    order: 2;
    font-family: ArialMT;
    font-size: 13px;
    color: #fff;
    line-height: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
    margin: auto 8px
}

.xgplayer-skin-dy .xgplayer-time span {
    color: hsla(0,0%,100%,.5)
}

.xgplayer-skin-dy .xgplayer-time .xgplayer-time-current {
    color: #fff
}

.xgplayer-skin-dy .xgplayer-time .xgplayer-time-current:after {
    content: "/";
    display: inline-block;
    padding: 0 3px
}

.xgplayer-skin-dy .xgplayer-replay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 105;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.54);
    flex-direction: column
}

.xgplayer-skin-dy .xgplayer-replay svg {
    background: rgba(0,0,0,.58);
    border-radius: 100%;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-replay svg path {
    transform: translate(20px,21px);
    fill: #ddd
}

.xgplayer-skin-dy .xgplayer-replay svg:hover {
    background: rgba(0,0,0,.38)
}

.xgplayer-skin-dy .xgplayer-replay svg:hover path {
    fill: #fff
}

.xgplayer-skin-dy .xgplayer-replay .xgplayer-replay-txt {
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #fff;
    line-height: 34px
}

.xgplayer-skin-dy.xgplayer.xgplayer-ended .xgplayer-controls {
    display: none
}

.xgplayer-skin-dy.xgplayer.xgplayer-ended .xgplayer-replay {
    display: flex
}

.xgplayer-skin-dy .xgplayer-playbackrate {
    order: 8;
    width: 60px;
    height: 150px;
    z-index: 18;
    position: relative;
    display: inline-block;
    cursor: default;
    margin-top: -119px
}

.xgplayer-skin-dy .xgplayer-playbackrate ul {
    display: none;
    list-style: none;
    width: 60px;
    background: #323442;
    border-radius: 1px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    white-space: nowrap;
    z-index: 26;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-playbackrate ul li {
    opacity: .7;
    font-family: PingFangSC-Regular;
    font-size: 11px;
    color: hsla(0,0%,100%,.8);
    position: relative;
    padding: 10px 0;
    text-align: center
}

.xgplayer-skin-dy .xgplayer-playbackrate ul li.selected,.xgplayer-skin-dy .xgplayer-playbackrate ul li:hover {
    color: #fe2c55;
    opacity: 1
}

.xgplayer-skin-dy .xgplayer-playbackrate ul li:first-child {
    position: relative;
    margin-top: 12px
}

.xgplayer-skin-dy .xgplayer-playbackrate ul li:last-child {
    position: relative;
    margin-bottom: 12px
}

.xgplayer-skin-dy .xgplayer-playbackrate .name {
    width: 60px;
    height: 20px;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    background: rgba(0,0,0,.38);
    color: hsla(0,0%,100%,.8);
    border-radius: 10px;
    line-height: 20px
}

.xgplayer-skin-dy .xgplayer-playbackrate span {
    position: relative;
    top: 19px;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0,0,0,.6)
}

.xgplayer-skin-dy .xgplayer-playbackrate:hover {
    opacity: 1
}

.xgplayer-skin-dy.xgplayer-playbackrate-active .xgplayer-playbackrate ul {
    display: block
}

.xgplayer-skin-dy .xgplayer-download {
    position: relative;
    order: 9;
    display: block;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-download .xgplayer-icon {
    margin-top: 3px
}

.xgplayer-skin-dy .xgplayer-download .xgplayer-icon div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-download .xgplayer-icon svg {
    position: relative;
    top: 5px;
    left: 5px
}

.xgplayer-skin-dy .xgplayer-download .xgplayer-tips {
    margin-left: -20px
}

.xgplayer-skin-dy .xgplayer-download .xgplayer-tips .xgplayer-tip-download {
    display: block
}

.xgplayer-skin-dy .xgplayer-download:hover {
    opacity: .85
}

.xgplayer-skin-dy .xgplayer-download:hover .xgplayer-tips {
    display: block
}

.xgplayer-lang-is-en .xgplayer-download .xgplayer-tips {
    margin-left: -32px
}

.xgplayer-lang-is-jp .xgplayer-download .xgplayer-tips {
    margin-left: -40px
}

.xgplayer-skin-dy .xgplayer-pip {
    order: 9;
    position: relative;
    outline: none;
    display: block;
    cursor: pointer;
    height: 20px;
    top: 10px
}

.xgplayer-skin-dy .xgplayer-pip .name {
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    color: hsla(0,0%,100%,.8)
}

.xgplayer-skin-dy .xgplayer-pip .name span {
    width: 60px;
    height: 20px;
    line-height: 20px;
    background: rgba(0,0,0,.38);
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle
}

.lang-is-jp .xgplayer-pip .name span {
    width: 70px;
    height: 20px
}

.xgplayer-skin-dy .xgplayer-miniplayer {
    order: 9;
    position: relative;
    outline: none;
    display: block;
    cursor: pointer;
    height: 20px;
    top: 10px
}

.xgplayer-skin-dy .xgplayer-miniplayer .name {
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    color: hsla(0,0%,100%,.8)
}

.xgplayer-skin-dy .xgplayer-miniplayer .name span {
    width: 80px;
    height: 20px;
    line-height: 20px;
    background: rgba(0,0,0,.38);
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle
}

.xgplayer-skin-dy .xgplayer-miniplayer-lay {
    position: absolute;
    top: 26px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 130;
    cursor: pointer;
    background-color: transparent;
    display: none
}

.xgplayer-skin-dy .xgplayer-miniplayer-lay div {
    width: 100%;
    height: 100%
}

.xgplayer-skin-dy .xgplayer-miniplayer-drag {
    cursor: move;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    line-height: 26px;
    background-image: linear-gradient(rgba(0,0,0,.3),transparent);
    z-index: 130;
    display: none
}

.xgplayer-skin-dy .xgplayer-miniplayer-drag .drag-handle {
    width: 100%
}

.xgplayer-skin-dy.xgplayer-miniplayer-active {
    position: fixed;
    right: 0;
    bottom: 200px;
    width: 320px;
    height: 180px;
    z-index: 110
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-controls {
    display: flex;
    height: auto;
    padding-bottom: 0
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-controls>* {
    display: none
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-controls .xgplayer-progress {
    top: -11px;
    display: block;
    left: 0;
    right: 0
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-controls .xgplayer-progress:focus .xgplayer-progress-outer,.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-controls .xgplayer-progress:hover .xgplayer-progress-outer {
    margin-top: 5px
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-danmu {
    display: none
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay:hover>div:after,.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay:hover>div:before {
    background-color: #fff
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay {
    width: 20px;
    height: 20px;
    top: 8px;
    right: 10px;
    left: auto;
    display: block
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay>div:after,.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay>div:before {
    position: absolute;
    content: " ";
    background-color: hsla(0,0%,100%,.8);
    transition: background-color .2s;
    top: 2px;
    left: 10px;
    width: 2px;
    height: 16px
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay>div:before {
    transform: rotate(45deg)
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-lay>div:after {
    transform: rotate(-45deg)
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-miniplayer-drag {
    display: none
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-start {
    width: 50px;
    height: 50px;
    margin: -25px auto auto -25px
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-start svg {
    width: 50px;
    height: 50px
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-loading {
    width: 50px;
    height: 50px;
    margin: -25px auto auto -25px
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-loading svg {
    width: 50px;
    height: 50px
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-replay .xgplayer-replay-txt {
    display: none
}

.xgplayer-skin-dy.xgplayer-miniplayer-active .xgplayer-replay svg {
    width: 50px;
    height: 50px
}

.xgplayer-skin-dy.xgplayer-inactive .xgplayer-miniplayer-drag {
    display: none
}

.lang-is-jp .xgplayer-miniplayer .name span {
    width: 70px;
    height: 20px
}

.xgplayer-skin-dy .xgplayer-reload {
    position: relative;
    order: 1;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-reload .xgplayer-icon {
    margin-top: 7px;
    width: 26px
}

.xgplayer-skin-dy .xgplayer-reload .xgplayer-icon div {
    position: absolute
}

.xgplayer-skin-dy .xgplayer-reload .xgplayer-tips {
    margin-left: -22px
}

.xgplayer-skin-dy .xgplayer-reload .xgplayer-tips .xgplayer-tip-reload {
    display: block
}

.xgplayer-skin-dy .xgplayer-reload:hover {
    opacity: .85
}

.xgplayer-skin-dy .xgplayer-reload:hover .xgplayer-tips {
    display: block
}

.xgplayer-lang-is-en .xgplayer-reload .xgplayer-tips {
    margin-left: -26px
}

.xgplayer-lang-is-jp .xgplayer-reload .xgplayer-tips {
    margin-left: -38px
}

.xgplayer-skin-dy .xgplayer-error {
    background: #000;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 125;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 100%;
    justify-content: center;
    align-items: center
}

.xgplayer-skin-dy .xgplayer-error .xgplayer-error-refresh {
    color: #fa1f41;
    padding: 0 3px;
    cursor: pointer
}

.xgplayer-skin-dy .xgplayer-error .xgplayer-error-text {
    line-height: 18px;
    margin: auto 6px
}

.xgplayer-skin-dy.xgplayer-is-error .xgplayer-error {
    display: flex
}
.footer-bottom {
    font-size: 14px;
    color: #aaa;
    padding:30px 0;
    background: #f7f7f7;
	text-align:center;
}
.footer-bottom a {color:#5a5a5a}
iframe#YQ-icon {
    width: 200px!important;
}