.tag-price-box{position: relative}
.tag-price-box .tag{width: 64px;height: 24px;position: absolute;border: 1px solid #FF7517;border-radius: 12px 12px 12px 0px;font-size: 12px;color: #FF7517;line-height: 24px;text-align: center;left: 38px;top: -30px;box-sizing: border-box;}
.long-a{margin-top: 17px;padding: 0 16px;height: 30px;text-align: center;line-height: 42px;display: inline-block;background: #FFFFFF;font-size: 14px;color: #859CE4 !important; line-height: 30px;border-radius: 22px;text-decoration:none !important}
.long-a:hover {color: #859CE4;}

.system .wrap.flex{margin-top: 20px}
.system .synopsis-box{width: 420px;background: #FAFAFA;position: relative;-webkit-box-orient: vertical; -webkit-flex-flow: column; flex-flow: column;  }
.system .synopsis-box.active{width: 0;overflow: hidden; }
.system .synopsis-box .form-box .form-btn{ background: #39A6FF;}
.system .synopsis-box .synopsis{padding: 20px;position: relative;overflow: hidden}
.system .synopsis-box .synopsis .img{width: 121px;height:172px;position: relative;border-radius: 6px;background-color: #f1f1f1;overflow: hidden}
.system .synopsis-box .synopsis .img img{display: block;width: 100%;}
.system .synopsis-box .synopsis .img .tag{position: absolute;top: 0;left: 0;width:60px;height: 22px;line-height: 22px;text-align: center;background-image: linear-gradient(to right, #FDE9C6 , #F2B878);color: #785223;border-radius: 6px;border-top-left-radius: 0;font-size: 12px}
.system .synopsis-box .synopsis .img .num{position: absolute; bottom: 9px;right:9px;  color: #fff; font-size: 12px}
.system .synopsis-box .synopsis .cont{width: calc(100% - 137px);position: relative;}
.system .synopsis-box .synopsis .cont .name{font-size: 18px;font-weight: bold;line-height: 22px;margin-bottom: 8px;margin-top: 7px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.system .synopsis-box .synopsis .cont .text p{font-size: 12px;line-height: 16px;color: #999;margin-bottom: 4px}
.system .synopsis-box .synopsis .cont .price-box{margin-top:25px;line-height: 34px;position: absolute;left: 0;bottom: 10px;width: 100%;}
.system .synopsis-box .synopsis .cont .price-box .price{font-size: 20px;color: #FF7517}
.system .synopsis-box .synopsis .cont .price-box .price-max{font-size:14px;color: #999;margin-left:5px;display: inline-block;text-decoration:line-through; }
.system .synopsis-box .synopsis .cont .btn{width: 96px;height: 34px;text-align: center;line-height: 33px;background: #FF7517;border-radius: 16px;color: #fff;display: inline-block;margin-top:0}
.system .synopsis-box .catalogue-box{ border-radius: 6px;overflow: hidden;flex: 1;}
.system .synopsis-box .catalogue-box .navs{height: 46px;padding-top: 12px;box-sizing: border-box;border-top: 1px solid #DDDDDD;}
.system .synopsis-box .catalogue-box .navs p{display: inline-block;width: 49%;text-align: center}
.system .synopsis-box .catalogue-box .navs span{cursor:pointer;font-size: 16px;color: #999;text-align: center;padding: 0 0 10px; position: relative;;}
.system .synopsis-box .catalogue-box .navs p.active span::after{ content: ''; width: 30px; height: 3px; background: #39A6FF;position: absolute;left: 50%;margin-left: -15px; bottom: 0;}
.system .synopsis-box .catalogue-box .navs p.active span{ color: #333333;font-weight: bold;}
.system .catalogue .name span.tits{ padding-left: 20px; color:#333;display: inline-block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: calc(100% - 90px);font-weight: bold;}
.system .catalogue .name .nums{position: relative;top: -5px}
.system .catalogue .name{font-size: 16px;cursor: pointer;margin-top: 25px}
.system .catalogue .name.active .icon{transform:rotate(-90deg)}
.system .catalogue .name span.nums{font-size: 12px;color: #999;line-height: 1;} 
.system .catalogue .name .icon{ float: right;position: relative;top:4px;right:20px;color: #999;transform:rotate(90deg)}
.system .catalogue{padding: 5px 0 30px 0}
.system .catalogue ul{margin-top:15px;position: relative;padding-bottom: 1px}
.system .catalogue ul:before{width: 1px ;height:calc(100% - 15px) ;background: #DDDDDD;position: absolute;left:19px;top:9px}
.system .catalogue ul li{padding: 13px 20px; position: relative;}
.system .catalogue ul li .down { width: 36px;height: 37px;background: url(../image/video-down.png); background-size: 100% 100%; position: absolute;left: 0;top: 0;}
.system .catalogue ul li .down span { display: block;font-size: 12px;white-space: nowrap;color: #FFF; transform: rotate(-45deg) scale(0.8); position: relative; top: 4px;left: -5px;}
.system .catalogue ul li:last-child{margin-bottom: 0}
.system .catalogue ul li .tit {font-size: 14px;color: #666;}
.system .catalogue ul li .tit .num{line-height: 18px;}
.system .catalogue ul li a{font-size: 14px;color: #666;}
.system .catalogue ul li.look a{color: #999}
.system .catalogue ul li.look.free.lastTime .text{max-width: calc(100% - 205px)}
.system .catalogue ul li.free .text{max-width: calc(100% - 135px)}
.system .catalogue ul li.lastTime .text{max-width: calc(100% - 165px)}
.system .catalogue ul li .text{transition: all .4s;display: inline-block; white-space: nowrap;  overflow: hidden; text-overflow:ellipsis;position: relative;top: 4px}
.system .catalogue ul li .text:hover{color:#39A6FF; }
.system .catalogue ul li .time{color: #999;margin-left: 28px;line-height: 18px;}
.system .catalogue ul li .free-text{float: left;display: block;padding: 0 6px;font-size: 12px;color: #FFF;height: 18px; background: #39A6FF; border-radius: 9px;}
.system .catalogue ul li .lastTime-text{font-size: 12px;color: #F67A33;padding: 0 2px;margin-left: 20px}
.system .catalogue ul li .circle{display: inline-block;width: 9px;height: 9px;border-radius: 100%;border: 1px  solid #999999;position: relative;top: -1px;margin-right: 9px;background: #fff}
.system .catalogue ul li .icon{position: relative;font-size: 20px;margin-left: 12px;top: -1px;color:rgba(153, 153, 153, 1);}
.system .catalogue ul li .icon.icon-lock-outline { font-weight: bold;}
.system .catalogue ul li.active{background: #F1F1F1;}
.system .catalogue ul li.active .tit .num{color:#39A6FF;}
.system .comment{padding: 0 15px 20px; height: calc(100% - 40px); box-sizing: border-box;}
.system .comment .top-btn{color:#333;font-size:16px;width: 100%; line-height: 36px;text-align: center;line-height: 34px;border: 1px solid #DDDDDD;border-radius: 6px}
.system .comment .form-box{position: absolute;left: 15px;bottom: 20px;}
.system .comment .form-box.reply-form-box{position: relative;left: unset;bottom: unset;}
.system .comment .item-box .commen-item:last-child{margin-bottom:52px;}
.system .comment .item-box.active .commen-item:last-child{margin-bottom: 162px;}

.system .player-box{position: relative;width: calc(100% - 350px)}
.system .player-box.active{width: 100%}
.system .handle{position: absolute;top: 10px;left: -16px;cursor: pointer;}
.system .handle span{color: #fff;font-size: 12px;position: absolute;top: 0;left:2px;padding-top: 3px}
.system .handle span .icon{font-size: 12px;display: inline-block}
.system .handle.active span .icon{transform: rotate(180deg);}
.system .synopsis-box .handle{position: absolute;top: 10px;left: unset;right:-17px;cursor: pointer;z-index: 999;display: none}
.system .synopsis-box .handle img{  transform: rotateY(180deg);}
.system .synopsis-box .handle .icon{  transform: rotateY(180deg);}
.system .player-box .zc_plv{height:540px;background: #f1f1f1;width: 100%;/*border-radius: 6px;*/position: relative;z-index: 1;overflow: hidden;background-size: 100% 100%;}
.system .player-box.active .zc_plv{height: 731px}
.system .player-box .name-box{padding: 10px 0; background: #151518;}
.system .player-box .name-box .name{font-size: 18px;padding-left: 15px;display: flex; align-items:center; /*justify-content:center;*/flex: 1;max-width: calc(100% - 330px)}
.system .player-box .name-box .name i{font-size: 14px;color: #999;margin-left: 12px;display: inline-block;min-width: 75px}
.system .player-box .name-box .name span{display: inline-block; white-space: nowrap;max-width:100%; overflow: hidden; text-overflow:ellipsis;color: #FEFEFE;}
.system .player-box .name-box .btn-box{width: 315px}
.system .btn-box a{display: inline-block;width: 90px;  height: 30px;background: #2A2A31;text-align: center;line-height: 28px;color: #ddd;margin-right: 10px;border-radius: 16px}
.system .btn-box a .icon{display: inline-block;margin-right: 8px;position: relative;top: 2px}
.system .btn-box a .icon-huaban{font-size: 20px;color: #999}
.system .right>.cont{margin-top:20px;overflow: hidden;/*background: #F5F6F8*/}
.system .right>.cont .top{padding: 23px;overflow:hidden;position:relative;background-image: linear-gradient(to right,#7F7FD5,#86A8E7,#91EAE4);box-sizing: border-box;text-align: center;}
.system .right>.cont .top .name{font-size: 30px;color: #fff;text-align: center;line-height: 34px;font-weight: bold;}
.system .right>.cont .top .text{color: #fff;font-size: 14px;margin-top: 11px;text-align: center;}
.system .right>.cont .top .text span{margin-right: 20px;display: inline-block}
.system .right>.cont .top .text .icon{display: inline-block;margin-right: 10px;color: #fff;}
.system .right>.cont .top .collection{box-sizing:border-box;display: inline-block;width:100px;height:100px;background: #F5F6F8;display: flex; align-items:center; justify-content:center;transform:rotate(45deg);position: absolute;top: -54px;right:-54px; text-align: center;padding-top: 40px;}
.system .right>.cont .top .collection .icon{transform:rotate(-45deg);color: #999;cursor: pointer;font-size: 21px;position: relative;top: 9px}
.system .right>.cont .top .collection.active .icon{color:#FF7517 }
.system .right>.cont .top .bot-btn{margin-top: 18px;justify-content: center;}
.system .right>.cont .top .bot-btn .price {font-size: 14px;color: #FFFFFF;line-height: 30px;margin-right: 10px;}
.system .right>.cont .top .bot-btn .price span {font-size: 30px;font-weight: bold;}
.system .right>.cont .top .btn{ padding: 0 16px;height: 30px;text-align: center;line-height: 42px;display: inline-block;background: #FFFFFF;font-size: 14px;color: #859CE4; line-height: 30px;border-radius: 22px;}
.system .right>.cont .details-tit {height: 60px; background: #E8F5FF;font-size: 20px; font-weight: bold; color: #333333;line-height: 60px;text-align: center;}
.system .right>.cont .details{box-sizing: border-box;word-wrap: break-word!important;}

/*padding: 30px 20px;*/
.system .right>.cont .details img{display: block;max-width: 100%!important;width: 100% !important;position: unset!important;top: unset!important;bottom: unset!important;left: unset!important;right: unset!important}
.system .right>.cont .details p{word-wrap: break-word!important;}
.system .right>.cont .details span{word-wrap: break-word!important;}
@media screen and (max-width: 1540px) {
    .system .player-box { width: calc(100% - 440px);}
}
.system .comment .commen-item{margin-top: 20px;border-bottom: 1px solid #ddd;padding-bottom: 20px}
.system .comment .commen-item .flex{margin-top: 20px}
.system .comment .commen-item .flex.child{padding-left:45px; }
.system .comment .commen-item .userimg{ margin-right: 10px;width: 40px;height: 40px;border-radius: 100%}
.system .comment .commen-item .cont{width: calc(100% - 50px);line-height: 1}
.system .comment .commen-item .user-name{font-size: 14px;line-height: 18px;color: #333;margin-bottom: 6px;display: block}
.system .comment .commen-item .user-name i{color: #999;font-style: unset;display: inline-block;margin: 0 2px}
.system .comment .commen-item .text{font-size: 14px;line-height: 18px;color: #666;margin-bottom: 14px;display: inline-block; max-width:100%;word-break: break-all;}
.system .comment .commen-item .text .selected{width: 40px;height: 20px;background-image: linear-gradient( #FF7619,#FFA365);text-align: center;line-height: 20px;font-size: 12px;color: #fff;display: inline-block;border-radius:10px;margin-right: 10px}
.system .comment .commen-item .date{font-size: 12px;color: #999; }
.system .comment .commen-item .date .click{margin-left:5px;transition: all .4s;cursor: pointer}
.system .comment .commen-item .date .click:hover{ color: #39a6ff}
.system .comment .commen-item .date .icon{float: right;color: #999;position: relative; cursor: pointer;font-size: 14px}
.system .comment .commen-item .date .icon span{font-size: 12px;margin: unset;padding-left: 6px;}
.system .comment .commen-item .date .icon.active{color: #FF7517}
.system .form-box{display: block;width:390px;margin-top: 20px}
.system .form-box .text-box{box-sizing: border-box; height: 30px;display: inline-block;position: relative;border: 1px solid #DDDDDD;border-radius: 2px;width: calc(100% - 70px);}
.system .form-box .text-box .num{opacity: 0;position: absolute;bottom:0px;right:15px;color: #999;font-size: 12px}
.system .form-box .text-box.active .num{ opacity: 1;background: #fff;padding-bottom: 10px}
.system .form-box .input{background:#fff;padding:3px 10px;display:block;width: 100%; height: 28px;box-sizing: border-box }
.system .form-box .text-box.active{height: 102px;width: 100%;margin-bottom: 10px}
.system .form-box .text-box.active .input{height: 100px;line-height: unset}
.system .form-box .form-btn{cursor:pointer;float:right;width: 60px;height: 30px;border-radius: 15px;background: #39A6FF;color: #fff;text-align: center;line-height: 30px;display: inline-block}
.system .all-comment{font-size:12px; margin-top:18px; padding-left: 95px;/*position: absolute;bottom:-15px;*/width: 100%;cursor: pointer}
.system .all-comment .icon{font-size: 12px}
.system .first-com>.child-list{position: relative}
.system .first-com>.child-list.heightAuto{max-height: unset!important;}
.system .first-com{position: relative}
.system .first-com .first-box .date .click{margin-left: 20px;}
.system .first-com .first-box .date .icon{margin-left: 20px;}
.system .commen-item .child-list .flex-box {display: none}
.system .commen-item .child-list .flex-box:first-child {display: block;}
.system .all-comment.active .icon{display: inline-block}
.system .all-comment .putaway {display: none;}
.system .all-comment .more {display: inline-block;}
.system .all-comment.active .putaway {display: inline-block;}
.system .all-comment.active .more {display: none;}
.system .child-list.unset{height: auto!important;max-height: unset!important;}
.system .right .plv-box{position: relative;z-index: 7;}
.system .right .plv-box .dialog-box{z-index:8; position:absolute;width: 100%;height:100%;border-radius:6px;background-color: rgba(0,0,0,0.4); top: 0;left:0;}
.system .right .plv-box .dialog{z-index:8;box-sizing:border-box;position:absolute;width: 720px;height:390px;border-radius:6px;background-color: #fff; top: 47px;left:calc(50% - 360px);padding: 0 60px 0 50px}
.system .right .plv-box .dialog .tit{font-size:24px;margin-top:45px;text-align: center;}
.system .right .plv-box .dialog .btn{width: 128px;height: 40px;margin-top: 45px;background-color: #FA8409;color: #fff;display: inline-block;line-height: 38px;border-radius: 20px}

.system .right .plv-box .dialog .text{color: #666;margin-bottom: 10px}
.system .right .plv-box .dialog .text span{color: #FF7517}
.system .right .plv-box .dialog>.flex{margin-top: 50px}
.system .plv-box .dialog .synopsis{background-color: #fff;padding-bottom: 20px}
.system .plv-box .dialog .synopsis .img{width: 140px;position: relative;border-radius: 6px}
.system .plv-box .dialog .synopsis .img img{display: block;width: 100%;}
.system .plv-box .dialog .synopsis .img .tag{position: absolute;top: 0;left: 0;width:60px;height: 22px;line-height: 22px;text-align: center;background-image: linear-gradient(to right, #FDE9C6 , #F2B878);color: #785223;border-radius: 6px;border-top-left-radius: 0;font-size: 12px}
.system .plv-box .dialog .synopsis .img .num{position: absolute; bottom: 9px;right:9px;  color: #fff; font-size: 12px}
.system .plv-box .dialog .synopsis .cont{width: calc(100% - 150px)}
.system .plv-box .dialog .synopsis .cont .name{font-size: 16px;margin-bottom: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.system .plv-box .dialog .synopsis .cont .text p{font-size: 12px;color: #999;margin-bottom: 12px}
.system .plv-box .dialog .synopsis .cont .price-box{margin-top:20px}
.system .plv-box .dialog .synopsis .cont .price-box .price{font-size: 20px;color: #FF7517}
.system .plv-box .dialog .synopsis .cont .price-box .price-max{font-size:14px;color: #999;margin-left:5px;display: inline-block;text-decoration:line-through; }
.system .plv-box .dialog .synopsis .cont .btn{width: 96px;height: 35px;text-align: center;line-height: 33px;background: #39A6FF;border-radius: 16px;color: #fff;display: inline-block;margin-top:40px}
.system .plv-box .dialog .dialog-left{width: 40%}
.system .plv-box .dialog .dialog-left .img-box{display: block;width: 120px;height: 120px;overflow: hidden}
.system .plv-box .dialog .dialog-left .img-box img{display: block;width:100%; }
.system .plv-box .dialog .dialog-right{width: 60%}
.system .plv-box .dialog .synopsis .cont .btn2 .btn{width: 96px;height: 35px;text-align: center;line-height: 33px;background: #FF7517;border-radius: 16px;color: #fff;display: inline-block;margin-top:40px}

.system .btn2{float: right;display: inline-block;position: relative}
.system .btn2 .qp{display: inline-block;width: 158px; height:20px; border: 1px  solid #FF7517; border-radius: 9px;font-size: 12px; color: #FF7517;line-height:18px; top: 10px; left: -36px; position: absolute;}
.system .btn2 .qp::after{ content: ''; width: 0; height: 0; border: 8px solid; position: absolute; bottom: -15px; left: 75px; border-color:  #fff transparent transparent; }
.system .btn2 .qp::before{ content: ''; width: 0; height: 0; border: 8px solid; position: absolute; bottom: -16px; left: 75px; border-color:#FF7517 transparent transparent;  }
@media screen and (max-width: 1219px) {  .system .right .plv-box .dialog{transform: scale(.8);} .system .right .player-box.active .plv-box .dialog{transform: scale(1);}}
@media screen and (max-width: 1024px) {  .system .right .plv-box .dialog{transform: scale(.6);}.system .right .player-box.active .plv-box .dialog{transform: scale(.9);} }
@media screen and (max-width: 900px) {  .system .right .plv-box .dialog{transform: scale(.4);}.system .right .player-box.active .plv-box .dialog{transform: scale(.8);} }


.noMemberSystem.system .progress-box{font-size: 12px;margin-top: 60px}
.noMemberSystem.system .progress-box .text{font-size: 12px;color:#FF7517}
.noMemberSystem.system .progress-box .flex{margin-top: 10px}
.noMemberSystem.system .progress-box .flex .progress{height: 8px;background-color: #eeee;position: relative;display: inline-block;width: calc(100% - 40px);border-radius: 3px;overflow: hidden}
.noMemberSystem.system .progress-box .flex .progress i{position: absolute;background-color: #FF7517;display: inline-block;top: 0;left: 0;height: 8px}
.noMemberSystem.system .progress-box .flex .num{position: relative;top: -3px;color: #666}
.noMemberSystem.system .btn2 .qp{display: inline-block;width: 158px; height:20px; border: 1px  solid #FF7517; border-radius: 9px;font-size: 12px; color: #FF7517;line-height:18px; top: 10px; left: -30px; position: absolute;background-color: #fff}
.noMemberSystem.system .btn2 .qp::after{ content: ''; width: 0; height: 0; border: 8px solid; position: absolute; bottom: -15px; left: 75px; border-color:  #fff transparent transparent; }
.noMemberSystem.system .btn2 .qp::before{ content: ''; width: 0; height: 0; border: 8px solid; position: absolute; bottom: -16px; left: 75px; border-color:#FF7517 transparent transparent;  }
.noMemberSystem.system .right .bot{margin-top: 20px;position: relative;padding-top: 15px}
.noMemberSystem.system .right .bot:before{position: absolute;content: "";border-top: 1px dotted #fff;width:calc(100% + 50px);left: -25px;top: 0}
.noMemberSystem.system .right .bot .num{color: #fff;flex: 1;text-align: right;}
.noMemberSystem.system .right .bot .num span{color: #FF1414}
.noMemberSystem.system .right .progress-box{font-size: 12px;width:300px;margin-top: 0}
.noMemberSystem.system .right>.cont .top{padding :20px 50px }
.noMemberSystem.system .right>.cont .top .text{margin-top:14px}
.noMemberSystem.system .right>.cont .top .text a{display: inline-block;margin-left:20px;text-decoration: underline;color: #fff}
.noMemberSystem.system .right>.cont .top .text1{margin-top:12px;color: #fff;font-size: 14px;line-height: 1;}
.noMemberSystem.system .right>.cont .top .progress{background-color: #fff}

.noMemberNoOPenSystem.system .right>.cont .top{text-align: center;padding: 20px 50px}
.noMemberNoOPenSystem.system .right>.cont .top .btn{position: unset;width: 263px;height: 44px;font-size: 14px;margin-top: 15px}
.noMemberNoOPenSystem.system .right>.cont .top .text{margin-top: 15px}


.noMemberOPenSystem.system .progress-box{font-size: 12px;margin-top: 60px}
.noMemberOPenSystem.system .progress-box .text{font-size: 12px;color:#FF7517}
.noMemberOPenSystem.system .progress-box .flex{margin-top: 10px}
.noMemberOPenSystem.system .progress-box .flex .progress{height: 6px;background-color: #eee;position: relative;display: inline-block;width: calc(100% - 40px);border-radius: 3px;overflow: hidden}
.noMemberOPenSystem.system .progress-box .flex .progress i{position: absolute;background-color: #FF7517;display: inline-block;top: 0;left: 0;height:6px}
.noMemberOPenSystem.system .progress-box .flex .num{position: relative;top: -5px;color: #666}
.noMemberOPenSystem.system .right>.cont .top{text-align: center;padding:50px}
.noMemberOPenSystem.system .right>.cont .top .btn{position: unset;width: 263px;height: 44px;font-size: 14px;margin-top: 15px}
.noMemberOPenSystem.system .right>.cont .top .text{margin-top: 15px}
.noMemberOPenSystem.system .right>.cont .top .text a{display: inline-block;margin-left:20px;text-decoration: underline;color: #fff}


/*笔记*/
.note{position: relative;cursor: pointer}
.note-box{display: none; padding:20px 15px;position: fixed;width: 420px; z-index: 999;box-shadow: 0 0 6px 3px rgba(0,0,0,0.2);text-align: left;background-color: #fff;right: 6px;top: 50%; margin-top: -233px;box-sizing: border-box;border-radius: 6px;}
.system .btn-box a .note-box .close.icon{cursor:pointer;position: absolute;right: 15px;left:unset;font-size: 16px;margin: 0;width: 16px;height: 16px}
.note-box .tit{font-size: 18px;text-align: center;color: #333}
.note-box .top{height: 34px;line-height: 34px;background-color: #F0F0F0;margin-top: 20px;padding: 0 10px;box-sizing: border-box;color: #333;display: inline-block; white-space: nowrap;max-width:100%; overflow: hidden; text-overflow:ellipsis;width: 100%}
.note-box .list .flex{ margin-bottom: 15px;position: relative}
.note-box .list .left{width: calc(100% - 50px)}
.note-box .list .left .circle{float: left;width: 9px;height: 9px;border-radius: 100%;background-color: #FF7517;margin-right: 10px;position: relative;top:6px;z-index: 9}
.note-box .list .right{width:40px}
.note-box .list .left .text{float: left;font-size: 14px;color: #666;line-height: 1.6;width: calc(100% - 110px); position: relative}
.note-box .list .left .text .texts{word-break:break-all;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;width: 100%}
.note-box .list .left .date{float: left;width: 68px;margin-right: 20px;font-size: 12px;color: #999;line-height: 1.8}
.note-box .list .ul-box{position: relative;max-height: 230px;overflow-y: scroll;margin-top: 15px;min-height: 100px;
    overflow-y: scroll;
    scrollbar-width:thin;
    scrollbar-color: #ddd transparent;
    scrollbar-track-color: #ddd;
    -ms-scrollbar-track-color: #ddd;

}
.note-box .list .ul-box::-webkit-scrollbar { width:4px; background: white;  }
.note-box .list .ul-box::-webkit-scrollbar-corner, .list .ul-box::-webkit-scrollbar-thumb, .list ul::-webkit-scrollbar-track { border-radius: 4px; }
.note-box .list .ul-box::-webkit-scrollbar-corner,.list .ul-box::-webkit-scrollbar-track {  background-color: #fff;   }
.note-box .list .ul-box::-webkit-scrollbar-thumb {background-color: #ddd; }
.note-box .list ul::-webkit-scrollbar { width:4px; background: white;  }
.note-box .list ul::-webkit-scrollbar-corner, .list ul::-webkit-scrollbar-thumb, .list ul::-webkit-scrollbar-track { border-radius: 4px; }
.note-box .list ul::-webkit-scrollbar-corner,.list ul::-webkit-scrollbar-track {  background-color: #fff;   }
.note-box .list ul::-webkit-scrollbar-thumb {background-color: #ddd; }

.note-box .list ul li:before { content: ""; width: 1px; height: calc(100% + 15px); background: #DDDDDD; position: absolute; left: 4px; top: 10px;}
.note-box .list ul li:first-child:before { content: ""; width: 1px; height: calc(100% + 10px); background: #DDDDDD; position: absolute; left: 4px; top:10px;}

.note-box .list ul li:nth-last-child(2):before{display: none}
.note-box .list ul li:last-child:before{display: none}
.note-box .operation{cursor: pointer;text-align: center;padding-bottom: 10px;position: relative}
.note-box .operation .operation-box{position: absolute;width:50px;height:60px;right:15px;top:35px;background-color:#fff;box-shadow: 0 0 3px 0px rgba(0,0,0,0.2);background-color: #fff;z-index: 99;display: none }
.note-box .operation .operation-box i::before{ content: ''; width: 0; height: 0; border: 8px solid; position: absolute; top: -8px; right:-9px; border-color:#ececec transparent transparent;transform:rotate(315deg);  }
.note-box .operation .operation-box i::after{ content: ''; width: 0; height: 0; border: 6px solid; position: absolute;top: -6px; right:-6px; border-color:  #fff transparent transparent;transform:rotate(315deg); }
.note-box .operation .operation-box span{display: block;color: #999;padding-top: 10px;line-height: 1;transition: all .3s}
.note-box .operation .operation-box span:hover{color: #39a6ff}
.note-box .operation .operation-box.active{display: block!important;}
.system .note .form-box{width: 100%;margin-top: 0}
.system .note .form-box .text-box.active .input{height: 68px}
.system .note .form-box .text-box.active{height: 70px}
.system .form-box .form-btn{background-color: #FF7517}
.note-box .note-textarea{position: relative;z-index: 99;background-color: #fff;display: none}
.note-box .note-textarea.active{display: block}
.note-box .note-textarea textarea{display: block;width: 100%;height: 60px;border: 1px solid #DDDDDD; border-radius: 2px;padding: 8px 10px}
.note-box .note-textarea .form-btn { cursor: pointer; float: right; width: 60px; height: 25px; border-radius: 15px; background:#FF7517; color: #fff; text-align: center; line-height:25px; display: inline-block;margin-left: 10px;margin-top: 10px;}
.note-box .note-textarea .cancel{background-color: #DDDDDD;color: #666}

@media(max-width:1024px) {
    .system .player-box .name-box .name{font-size: 16px}
    .system .btn-box a{width: 80px;height: 25px;line-height: 23px}
    .system .right > .cont .top .btn { width: 100px }
    .system.noMemberSystem .right > .cont .top .btn {right: 100px;  top: calc(40% - 22px); }
    .noMemberSystem.system .btn2 .qp{left: -30px}

    .system .player-box{width: 100%!important;}
    .system .player-box.active{width: 100%!important;}
    .system .synopsis-box{width: 0!important;}
    .system .synopsis-box.active{width:320px!important;position: fixed;height: 100%;z-index: 99;box-shadow: 0 0 6px 3px rgba(0,0,0,0.2);} 
    .system .handle{display: none}
    .system .synopsis-box .handle{display: block}
    .system .handle+.synopsis{ width: 0 !important;overflow: hidden;padding: 0;}
    .system .handle.active+.synopsis{ width: auto !important;padding: 20px;}
}



@-moz-keyframes living-icon-ani {
    from {
        transform: scaleY(.5)
    }
    50% {
        transform: scaleY(1)
    }
    to {
        transform: scaleY(.5)
    }
}

@-webkit-keyframes living-icon-ani {
    from {
        transform: scaleY(.5)
    }
    50% {
        transform: scaleY(1)
    }
    to {
        transform: scaleY(.5)
    }
}

@-o-keyframes living-icon-ani {
    from {
        transform: scaleY(.5)
    }
    50% {
        transform: scaleY(1)
    }
    to {
        transform: scaleY(.5)
    }
}

@keyframes living-icon-ani {
    from {
        transform: scaleY(.5)
    }
    50% {
        transform: scaleY(1)
    }
    to {
        transform: scaleY(.5)
    }
}


.living-icon-col {
    width: 2px;
    margin: 0 1px;
    background-color: #9d9e9e;
    border-radius: 2px;
    animation: linear .6s infinite living-icon-ani ;
    transform-origin: bottom;
    display: inline-block;;
    height: 100%;
}

.living-icon-col:first-child {
    animation-delay: -.2s;
    margin-left: 0
}

.living-icon-col:last-child {
    animation-delay: .2s;
    margin-right: 0
}
.living-icon{
    margin-top: 6px;
    width: 10px;
    height: 10px;
    margin-right: 2px;
    float: right;position: relative;
    display: none;
}

.breadcrumb { width: 100%; position: fixed; top: 66px;left: 0;z-index: 8;margin-top: 0;}
.system .wrap.flex { justify-content: flex-end;}
.system .synopsis-box { display: flex; z-index: 100; height: calc(100% - 120px); position: fixed; top: 135px; left: 20px;}
.system .catalogue { height: calc(100% - 90px);overflow-x: hidden; overflow-y: scroll;}
.system .comment { overflow-x: hidden; overflow-y: scroll;}
.system .comment::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; height: 0;}
.system .comment::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 3px; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); background: rgba(170,170,170,0.7);}
.system .comment::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); border-radius: 0; background: rgba(0,0,0,0);}
.system .comment::-webkit-scrollbar-corner { background-color: rgba(0,0,0,0); }
.system .catalogue::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; height: 0;}
.system .catalogue::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 3px; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); background: rgba(170,170,170,0.7);}
.system .catalogue::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); border-radius: 0; background: rgba(0,0,0,0);}
.system .catalogue::-webkit-scrollbar-corner { background-color: rgba(0,0,0,0); }

.dialog-box-new { width: 397px; height: 460px; background: #FFFFFF; border-radius: 6px;text-align: center;z-index:8; position:absolute;top: 40px;left:50%;margin-left: -198px;}
.dialog-box-new .text { margin-top: 50px; font-size: 18px; font-weight: bold; color: #333333; line-height: 24px;}
.dialog-box-new .text1 { margin-top: 10px; font-size: 14px; color: #666666; line-height: 26px;}
.dialog-box-new .text2 { font-size: 14px; color: #666666;}
.dialog-box-new .text2 span { color: rgba(255, 117, 23, 1)} 
.dialog-box-new .kefu { margin: 13px auto; width: 186px;height: 186px; position: relative;border: 1px solid #DDDDDD;border-radius: 5px;}
.dialog-box-new .kefu img { width: 100%;height: 100%;}
.dialog-box-new .kefu::before { content: ''; width: 11px;height: 11px;border-radius: 5px 0 0 0; border-top: 2px solid #39c4f9; border-left: 2px solid #009CDD;position: absolute;top: -1px;left: -1px;}
.dialog-box-new .kefu::after {content: ''; width: 11px;height: 11px;border-radius: 5px 0 0 0; border-top: 2px solid #39c4f9; border-left: 2px solid #009CDD; position: absolute;top: -1px;right: -1px; transform: rotate(90deg);}
.dialog-box-new .kefu em { display: block; width: 11px;height: 11px;border-radius: 5px 0 0 0; border-top: 2px solid #39c4f9; border-left: 2px solid #009CDD;}
.dialog-box-new .kefu em:nth-of-type(1) { position: absolute;bottom: -1px;left: -1px; transform: rotate(-90deg)}
.dialog-box-new .kefu em:nth-of-type(2) { position: absolute;bottom: -1px;right: -1px; transform: rotate(180deg)}
.dialog-box-new .btn { margin-top: 20px; display: inline-block; padding: 0 24px; height: 44px; background: #000000; border-radius: 22px;font-size: 16px; color: #FFFFFF; line-height: 44px;}
.dialog-box-new .btn span { font-size: 12px;}
.dialog-box-new .btn span span { color: rgba(255, 117, 23, 1);}

.system .player-box.active .dialog-box-new { top: 140px;}