/*公共样式*/
html{-webkit-text-size-adjust:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,span{padding:0;margin:0;}
body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei",'PingFang-SC-Medium', sans-serif; background-color: #F4F7F7;color: #222222;}
ol,ul,li{list-style:none;}
em,i{font-weight:normal;font-style:normal;font-size:100%;}
.clearfix{*zoom:1;}
.clearfix:after{content:"."; display:block;clear:both;visibility:hidden;line-height:0;height:0;}
a{color:#333;text-decoration:none;-webkit-transition: all .2s linear;transition: all .2s linear;}
a:hover{color: #d7000f; text-decoration: none;}
input,button,select{outline:0;font-size:inherit;line-height:inherit;color:inherit;font-family:inherit;}
img{border:none;}
.fl{float: left;}
.fr{float: right;}
.center{text-align: center;}
.w1200{width: 1200px; margin: 0 auto;}
.w400 {width: 400px}
h2,h3{font-weight: normal;}
.bg1{background-color: #fff;}
.border1{border:1px solid #e5e5e5;}
.mt30{margin-top: 30px;}
.none{display: none;}
.mt45{margin-top: 45px;}
.mb8{margin-bottom: 8px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb48{margin-bottom: 48px;}
.mb50{margin-bottom: 50px;}
.mb68{margin-bottom: 68px;}
.mr20{margin-right: 20px;}
.ml20{margin-left: 20px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.m30{margin: 30px 0;}
.mr10{margin-right: 10px;}
.mr1{margin-right: 1px;}
.w420 {width: 420px;}
.w560 {width: 560px}

.font20{font-size: 20px!important;}
.font18 {font-size: 18px;}
.font14 {font-size: 14px;}
.fonW {font-weight: bold;}

.pt10{padding-top: 10px;}
.col9{color: #999;}
.col6{color: #666666;}
.cold7{color: #d7000f;}
.cold6 {color: #0d6ddb;}
.col06 {color: #0066cc}
.colf9 {color: #ff9900;}
.f41-lists{margin-right: -24px; text-align: center;}
.f41-lists li{width: 282px; margin-right: 24px; float: left; background-color: #fff; text-align: center;}
.f41-lists li a{display: table-cell; height: 80px;width: 282px; line-height: 22px;padding: 0 20px; vertical-align: middle;}
.f41-lists li a:hover{background-color: #cd0000; color: #fff; text-decoration: none;}
.f7f-list{width: 924px; margin: 20px auto;}
/*header*/
.color8011 {color: #e80011;}
#header{height: 50px; background: #fff;line-height: 50px;overflow: hidden;}
// #header .cd_logo{}
/* #header .mnav a{ float: left; margin-left: 13px; font-size: 14px; line-height: 50px;}
#header .mnav a:hover{text-decoration: underline;color: #e80011;} */
#header .mnav a {padding: 0 13px;height: 20px;;line-height: 20px;font-size: 14px;color: #595959;}
#header .mnav a:hover{color: #d7000f;}
/*footer*/
#footer{background-color: #fff; padding: 30px 0;border-top: 1px #ebebeb solid;}
#footer p{ line-height: 30px; text-align: center; color: #999; font-size: 14px;}
#footer p a{color: #999;}
#footer p span{ margin: 0 5px;}

.content {background: #ebebeb;padding: 20px 0 20px 0;}
.banner {width: 100%;}
.video {width: 100%!important;position: relative;}
.video .time {position: absolute;top: 78%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
.video .time p:nth-child(1) {font-size: 35px;color: #333333;letter-spacing:4px;font-weight: 500;}
.video .time p:nth-child(2) {font-size: 30px;color: #909090;margin-top: 20px;}
.video-js {width: 100%;height: 100%;}
.operation {width: 100%;height: 58px;line-height: 58px;background: #000000;padding: 0 20px;box-sizing: border-box;position: relative;}
.operation a {display: block;color: #ffffff;margin: 0 15px;}
.operation a img {vertical-align: middle;margin-bottom: 0;}
.operation .code {position: absolute;bottom: -120px;right: 0;display: none;}
.operation .code::before {content: '▲';color: #ffffff;position: absolute;top: -36px;left: 50px;font-size: 20px;}
/* .operation .cancleZan {display: none;} */
.journal-reward {margin-bottom: 1px!important;}
.operation .pause {display: none;}
.operation .pause img {margin-right: 10px;}
.operation .begin img {margin-right: 10px;}
.operation .dialog-share {position: absolute;bottom: -44px;right: 74px;background: #ffffff;width: 140px;height: 30px;line-height: 40px;text-align: center;display: none;padding: 6px 6px 6px 10px;}
.dialog-share-active {display: block!important;}
.explain {font-size: 24px;font-weight: bold;color: #000000;margin: 20px 0;}
.con-intro {width: 100%;background: #ffffff;padding: 35px 0;margin-top: 40px;}
.con-intro div {position: relative;}
.con-intro div span::before {content: '▲';color: #ffffff;position: absolute;top: -63px;left: 42px;font-size: 30px;}
.con-intro p {margin-bottom: 25px;color: #333333;line-height: 30px;font-size: 16px;text-align: justify;}
.con-intro div span {font-size: 30px;font-weight: 500;color: #585bf1;margin-bottom:20px;display:inline-block;}

.replays {margin-top:30px;margin-bottom:30px;}
.replays .lab {font-size: 30px;font-weight: 500;color: #585bf1;}
.replays .refresh {line-height: 52px;}
.replays .refresh img {vertical-align: middle;margin-bottom: 3px}
.replays .replays-con {margin-top: 0px;}
.replays .replays-con ul {margin-right: -20px;display: none;}
.replays .replays-con li {width: 285px;margin-right: 20px;margin-top:20px;}
.replays .replays-con li a {display: block;position: relative;width: 100%;height: 191px;}
.replays .replays-con li a img.video {width: 100%;height: 100%;box-sizing: border-box;border: 0;}
.replays .replays-con li a img.play {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 10;}
.replays .replays-con li a p {background: rgb(0, 0, 0, .3);width: 100%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.replays .replays-con li span {display: block;height: 63px;background: #ffffff;line-height: 25px;text-align: center;color: #333333;padding:5px 10px 0;}

/* 画布 */
canvas {display: block;position: absolute;bottom: 0;right: 500px;z-index: 20;cursor: pointer;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

@media screen and (max-width:640px){
    html {font-size: 50px;}
    #footer,#header{display: none;}
    .content {width: 100%;padding: 0;margin: 0 auto;}
    .content .w1200 {width: 100%;}
    .banner {width: 100%;}
    .banner img {width: 100%;}
    .video {width: 100%!important;}
    .operation .pause img {margin-right: .1rem;margin-bottom: .1rem;}
    .operation {width: 100%;padding: 0 .2rem;height: .8rem;line-height: .38rem;}
    .operation a.begin {font-size: .24rem;margin: 0;}
    .operation a.pause {font-size: .28rem;height: 100%;margin: 0;line-height: .8rem;}
    .operation a.pause img {width: .38rem;height: .38rem;}
    .operation div:nth-child(1) {width: 4.5rem;}
    .operation div:nth-child(2) {width: 34%;display: flex;align-items: center;height: .8rem;line-height: .8rem;}
    .operation div:nth-child(2) a {font-size: .28rem;display: flex;align-items: center;box-sizing: border-box;}
    .operation div:nth-child(2) a.player {margin-right: .25rem;}
    .operation div:nth-child(2) a.zan {margin: 0;}
    .operation div:nth-child(2) a.player img {width: .42rem;height: .42rem;}
    .operation div:nth-child(2) a.zan img {width: .32rem;height: .32rem;margin: 0!important;}
    .operation div:nth-child(2) a.share {display: none;}
    .operation div:nth-child(2) a.phone {display: none;}
    .explain {width: 100%;font-size: .3rem;margin: .3rem 0;padding: 0 .2rem;box-sizing: border-box;}
    .con-intro {width: 100%;padding: .4rem 0;margin-top: .6rem;box-sizing: border-box;}
    .con-intro div span::before {top: -1rem;}
    .con-intro .w1200 {width: 100%;}
    .con-intro p {margin-bottom: .3rem;padding: 0 .2rem;box-sizing: border-box;}
    canvas {display: block;position: absolute;bottom: 0;right: 0;z-index: 9999;cursor: pointer;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
}