.comment-menu{width:1100px;margin:49px auto 0 auto;color:#999;}
.line{background-color:#999;width:1px;height:10px;margin-left:10px;margin-right:10px;}
.comment-menu div{display:inline-block;font-size:16px;}
.comment-menu a:hover{color:#319FFF;}
.comment-wrap{width:1100px;margin:20px auto 0 auto;}
.comment-item{position:relative;border-bottom:1px solid rgba(0, 0, 0, 0.2);}
.head-image{position:absolute;top:15px;left:0;width:50px;height:50px;border-radius:25px;overflow:hidden;}
.head-image img{width:100%;}
.comment-right{width:1031px;margin-left:65px;margin-top:15px;}
.user-name{font-size:20px;margin-bottom:13px;color:#333;font-weight:bold;}
.comment-detail{font-size:16px;padding-bottom:20px;line-height:29px;word-break:break-word;overflow:hidden;}
.comment-item:last-child .comment-right{border:none;}
.reply-wrap{box-sizing:border-box;width:1031px;padding:20px;background-color:#f4f4f4;border-radius:5px;font-size:18px;line-height:30px;}
.reply-num{color:#319FFF}
.reply-name{color:#999;}
.reply-content{color:#333;word-break:break-word;}
.comment-bottom-wrap{color:#ccc;font-size:18px;line-height:40px;}
.comment-bottom-wrap span{margin-right:10px; color:#999;}
.comment-bottom-right-wrap{float:right}
.selected{color:#319FFF;}
.selected-detail{width:1100px;margin:19px auto 0 auto;font-size:18px;color:#333;line-height:29px;}
.description{margin-top:20px;font-size:18px;}
.description-tag div{display:inline-block;}
.tag{height:34px;line-height:34px;text-align:center;font-size:16px;padding:0 23px;color:#999;background-color:#f4f4f4;border-radius:5px;margin-right:9px;margin-top:20px;margin-bottom:5px;}
.hot-comment-wrap{font-size:28px;font-weight:bold;line-height:90px;border-top:1px solid rgba(0, 0, 0, 0.2);margin-top:30px;}
.recommended-wrap{margin-bottom:90px;}
.recommended-title{font-size:28px;font-weight:bold;line-height:90px;margin-top:10px;border-top:1px solid #ccc;}
.recommend-item{display:inline-block;margin-right:30px;}
.comics-image{width:160px;height:214px;}
.comics-image img{width:100%;}
.recommend-comics-title{font-size:16px;color:#333;width:160px;height:30px;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.comics-type{color:#999;font-size:14px;width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.selected-episodes{width:1100px;margin:0 auto;}
.episode-count{font-size:18px;line-height:88px;color:#999;}
.episodes-wrap{margin-top: 30px;}
.episode-item{width:1100px;height:60px;float:left;display:flex;align-items: center;}
.episode-item-bg{background: #FAFAFA;}
.episode-item-wrap{width: 1040px;height: 30px;margin: 10px 0;display: flex;align-items: center;position:relative;left:10px;}
.item-left{color:#333;width: 830px;height: 30px;display: flex;align-items: center;}
.item-left:hover{color: #319FFF;}
.episode-index{width: 30px;font-size: 18px;text-align: center;}
.watch-icon{font-size: 30px; margin-left: 20px;}
.pause-icon{font-size: 30px; margin-left: 20px;display: none}
.item-right{margin-left:20px;display:flex;right:0;position:absolute;}
.watch-count-icon{font-size: 14px;color:#C4C4C4;}
.watch-count-wrap{margin-left:20px;}
.lock{position:absolute;right:10px;top:30px;font-size:35px;}
.episode-title{font-size:18px;margin-left:20px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.episode-date{margin-top:10px;font-size:14px;color:#999;}
.episode-date span{margin-left:10px;color:#999;}
.like-icon{color:#999;margin-left:25px;font-size: 16px;}
.update-date{color:#319FFF;margin-left:25px}
.page{padding:25px 0;width:1100px;margin:0 auto;overflow:hidden;}
.previous{border:1px solid #666666;border-radius:25px;width:180px;height:50px;line-height:50px;color:#666666;
    font-size:14px;text-align:center;float:left;margin-left:410px;}
.next{border:1px solid #666666;border-radius:25px;width:180px;height:50px;line-height:50px;color:#666666;
    font-size:14px;text-align:center;float:left;margin-left:20px;}
.previous-icon{color:#666666;font-size:14px;margin-right:5px;}
.next-icon{color:#666666;font-size:14px;margin-left:5px;}
.un-click{border:1px solid #ccc;color:#ccc;}
.un-click-icon{color:#ccc;}
.br{display:none;}
.mobile-video-description{display:none;}
.pc-video-description{display:flex;flex-direction:row;padding:30px 0;}
.pc-video-description .video-cover{width:150px;height:200px;margin-right:40px;}
.pc-video-description .video-cover img{width:150px;height:200px;}
h1{margin:0;}
.pc-video-title{font-size:28px;color:#333;line-height:33px;font-weight:bold;}
.pc-video-alias-title{font-size:16px;color:#999;line-height:22px;margin-bottom:20px;}
.audio-bottom-wrap{position: fixed;bottom: 0;background:#222;height: 100px;width: 100%;z-index: 100;}
.audio-info-wrap{width: 1100px;display: flex;margin: auto auto;}
.content-img-small{width: 75px;height: 100px;}
.play-button-wrap{width: 168px;height: 36px;margin: auto 30px;position: relative;}
.play-button-wrap span:hover{color:#319FFF}
.icon-pre{position: absolute; left:0;color: white;line-height: 30px;font-size: 36px;}
.icon-play{position: absolute; left:40%;color: white;line-height: 30px;font-size: 36px;}
.icon-next{position: absolute; right:0;color: white;line-height: 30px;font-size: 36px;}
.icon-pause{position: absolute; left:40%;color: white;line-height: 30px;font-size: 36px;display: none;}
.audio-bottom-options-wrap{width: 800px;height: 46px;display: flex;align-items: center;margin: auto 0;}
.progress-bar-wrap{width: 500px;height: 100%;}
.play-time-wrap{width: 100%;height: 24px;position: relative;display: flex;}
.play-time-episode-title{color:#FFF;font-size: 16px;}
.play-time{position: absolute; right: 0;}
.current-time{color: #FFF;}
.total-time{color: #666;}
#audio-progress {position: relative;height: 18px;display: flex;align-items: center;cursor: pointer;}
#audio-progress .progress-bar {position: absolute;width: 100%;background-color: #b9b9b9;height: 4px;border-radius: 5px;z-index: 1;transition: all .1s;}
#audio-progress .progress-cur {position: absolute;background-color: #319FFF;height: 4px;width: 0;border-radius: 5px;  z-index: 2;transition: all .1s;}
#audio-progress .progress-btn {width: 12px;height: 12px;position: absolute;margin-left: -5px;background-color: #FFFFFF;  border-radius: 50%;left: 0;z-index: 3;transition: all .1s;}
#audio-progress#audio-progress .progress-btn:hover,
#audio-progress#audio-progress .progress-btn.playing {box-shadow: 0 0 10px 0 #319FFF}
.audio-bottom-options-right-wrap{width: 240px;height: 36px;margin-left: 60px;display: flex;align-items: center;}
.play-speed-btn{}
.play-speed{font-size: 20px;color: #FFF;}
.play-speed:hover{color:#319FFF}
.episodes-select-btn{margin-left: 30px;}
.episodes-select-icon{color: #FFF;font-size: 36px;}
.episodes-select-icon:hover{color:#319FFF}
.volume-control-btn{margin-left: 30px;}
.volume-control-icon{color: #FFF;font-size: 36px;}
.volume-control-icon:hover{color:#319FFF}
.volume-control-mute-icon{color: #FFF;font-size: 36px;display: none}
.volume-control-mute-icon:hover{color:#319FFF}
.play-speed-selector{height: 190px;background: #222;width: 90px;border-radius: 10px;position: absolute;align-items: center;right:180px;bottom:10px;display: none;}
.play-speed-select{font-size: 20px;color:#FFF;text-align: center;line-height: 150%;}
.play-speed-select:hover{color:#319FFF}
.episodes-selector{width:1100px;height:564px;position: absolute;display: none;}
.episodes-count-wrap{width:100%;height:84px;background: #222;border-radius: 20px 20px 0 0;border-bottom:1px solid rgba(102, 102, 102, 0.5);}
.episodes-count{font-size: 24px;color:#FFF;position: absolute;width: 170px;height: 24px;left: 20px;top: 30px;font-weight: bold;}
.episodes-list{width:100%;height:480px;background: #222;overflow-y:scroll;}
.episodes-list::-webkit-scrollbar{background: #222;width: 8px;}
.episodes-list::-webkit-scrollbar-thumb{height: 100px;border-radius: 4px;background: rgba(255, 255, 255, 0.2);}
.episode-wrap{width:100%;height:60px;justify-content: center;align-items: flex-start;}
.episode-wrap:hover{background: #333;}
.episode-text-wrap{display: flex;align-items: center;padding-top:21px;padding-left:10px;}
.episode-text-wrap span{color:#FFF;font-size: 18px;}
.volume-control{background: #222;width: 76px;height:160px;bottom:10px;position: absolute;border-radius: 10px;right:54px;display: none}
.volume-bar-wrap{width: 16px;height: 120px;margin-left: 30px;margin-top: 20px;position: relative;display: flex;flex-direction: column-reverse}
.vol-progress-bar{background-color: #b9b9b9;height: 100%;width:4px;left:6px;border-radius: 4px;z-index: 1;transition: all .1s;position: absolute}
.vol-progress-cur{background-color: #319FFF;height: 100%;width:4px;left:6px;border-radius: 4px;z-index: 2;transition: all .1s;position: absolute}
.vol-progress-btn{width: 16px;height: 16px;background-color: #FFFFFF;  border-radius: 50%;left: 0;top:0;z-index: 3;transition: all .1s;position: absolute}
.popup-wrap{height:564px;margin: auto auto;position: fixed; bottom:100px;width: 1100px;left: 50%;transform: translateX(-50%);z-index: 100;display:none;}
.audio-top-wrap{display: none;}
.mobile-audio-episodes-list{display: none;}
.mobile-detail-description-wrap{display: none}
.mobile-item-right{display: none}
.mobile-detail-icon-play{display: none;}
/* 手机端CSS适配 */
@media only screen and (max-width:800px){
    .comment-menu{width:90%;margin-top:20px;color:#999;margin-left:10px;}
    .line{background-color:#999;width:1px;height:10px;margin-left:10px;margin-right:10px;}
    .comment-menu div{display:inline-block;font-size:16px;}
    .comment-wrap{width:100%;margin-top:10px;}
    .icon-wrap{margin:20px;}
    .like-icon{color:#999;margin-left:10px;}
    .update-date{color:#319FFF;margin-left:0;}
    .br{display:block;}
    .head-image{position:absolute;top:0;left:16px;width:40px;height:40px;border-radius:50%;overflow:hidden;}
    .head-image img{width:100%;}
    .comment-right{width:76%;border-bottom:1px solid rgba(0, 0, 0, 0.2);margin-left:64px;margin-top:15px;}
    .user-name{font-size:14px;margin-bottom:5px;padding-top:10px;color:#333;font-weight:bold;}
    .comment-detail{font-size:14px;padding-bottom:10px;line-height:150%;word-break:break-word;}
    .comment-item{border-bottom: 0 solid #eee}
    .comment-item:last-child .comment-right{border:none;}
    .reply-wrap{box-sizing:border-box;width:95%;padding:15px;background-color:#f4f4f4;border-radius:10px;font-size:14px;line-height:20px;}
    .reply-num{color:#319FFF}
    .reply-name{color:#999;}
    .reply-content{color:#333;word-break:break-word;}
    .comment-bottom-wrap{font-size:100%;}
    .like-button{color:#ccc;font-size:14px;line-height:30px;}
    .like-button span{margin-right:10px;}
    .selected{color:#319FFF;}
    .selected-detail{width:100%;margin:10px 0;font-size:14px;color:#333;line-height:20px;}
    .description{margin:20px;font-size:12px;}
    .mobile-video-description{display:block;margin:20px;font-size:12px;}
    .pc-video-description{display:none;}
    .description-tag{margin-left:20px;}
    .tag{font-size:12px;padding:4px 10px;color:#999;background-color:#f4f4f4;border-radius:5px;margin-right:5px;margin-top:0;}
    .hot-comment-wrap{font-size:20px;font-weight:bold;line-height:40px;border-top:1px solid rgba(0, 0, 0, 0.2);margin-top:20px;padding-left:10px;}
    .recommended-wrap{margin-bottom:0;}
    .recommended-title{font-size:20px;font-weight:bold;line-height:40px;padding-top:10px;border-top:1px solid #ccc;padding-left:20px;margin-bottom:10px;}
    .recommend-comics{overflow:hidden;}
    .recommend-item{float:left;width:32%;margin-bottom:20px;}
    .recommend-item:nth-child(3n){margin-right:0;}
    .recommend-item:nth-child(3n+1){margin-right:2%;}
    .recommend-item:nth-child(3n+2){margin-right:2%;}
    .comics-image{padding-bottom:133.33%;height:0;width:100%;}
    .comics-image img{width:100%;}
    .recommend-comics-title{padding:0 5px;font-size:14px;color:#333;width:95%;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .comics-type{padding:0 5px;color:#999;font-size:12px;width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .selected-episodes{width:100%;margin:0;}
    .episodes-wrap{width:100%;overflow:hidden;margin-top: 0;}
    .episode-count{font-size:16px;line-height:50px;color:#999;margin-top:2px;margin-left:20px;}
    .episode-item{width:100%;height:72px;border-top:1px solid #eee;float:left;margin-right:0;position:relative;}
    .episode-item-bg{background: #FFF;}
    .episode-item-wrap{width:100%;display: block;height:72px;margin: 0;}
    .episode-index{width: 10px;font-size: 14px;}
    .item-left{color:#333;width: 80%;height: 14px;display: flex;align-items: center;margin-top: 16px;}
    .item-right{display:none;}
    .watch-icon{display: none;}
    .watch-count-icon{font-size: 12px;color: #999;}
    .watch-count-wrap{margin-left: 0;margin-right: 20px;}
    .watch-count{font-size: 12px;color: #999;}
    .lock{position:absolute;right:10px;top:30px;font-size:35px;}
    .episode-title{font-size:14px;color:#333;margin-left:18px;}
    .episode-date{margin-top:5px;font-size:12px;color:#999;}
    .episode-date span{margin-left:10px;color:#999;}
    .page{padding:10px 0;width:100%;margin:0;overflow:hidden;border-top:1px solid #d8d8d8;}
    .previous{border:0;border-radius:0;width:49%;height:50px;line-height:50px;color:#666666;
        font-size:14px;text-align:center;float:left;margin-left:0;border-right:1px solid #d8d8d8;}
    .next{border:0;border-radius:0;width:50%;height:50px;line-height:50px;color:#666666;
        font-size:14px;text-align:center;float:left;margin-left:0;}
    .previous-icon{color:#666666;font-size:14px;margin-right:5px;}
    .next-icon{color:#666666;font-size:14px;margin-left:5px;}
    .un-click{color:#ccc;}
    .un-click-icon{color:#ccc;}
    .audio-bottom-wrap{display: none;}
    .audio-top-wrap{height: 300px;width: 100%;background: #333;top:0;z-index:999;display: flex;flex-direction: column;justify-content: center;}
    .audio-top{height: 208px;display: flex;flex-direction: column;}
    .audio-top-player{height:100px;display: flex;justify-content: center;align-items: center;}
    .content-img-small-wrap{margin-left: 20px;position: relative;}
    .content-img-small{width: 100px;height: 100px;overflow: hidden;}
    .icon-pre{position:relative;}
    .icon-next{position:relative;margin-left: 20px;}
    .episode-item-wrap .icon-play{color:#c4c4c4;left:85%;top:34%; background: transparent; font-size: 28px;}
    .episode-item-wrap .icon-pause{color:#319FFF;left:85%;top:34%; background: transparent; font-size: 28px;display: block;}
    .icon-play{color:#FFF;left:34%;top:34%;background: #333;}
    .icon-pause{color:#FFF;left:34%;top:34%;background: #333;}
    .audio-top-title{text-align: center;color: white;font-size: 20px;line-height: 32px;}
    .audio-top-progress-bar-wrap {position: relative;height: 18px;display: flex;align-items: center;cursor: pointer;margin: 0 32px;}
    .audio-top-progress-bar {position: absolute;width: 100%;background-color: #b9b9b9;height: 4px;border-radius: 5px;z-index: 1;transition: all .1s;}
    .audio-top-progress-cur {position: absolute;background-color: #319FFF;height: 4px;width: 0;border-radius: 5px;  z-index: 2;transition: all .1s;}
    .audio-top-progress-btn {width: 12px;height: 12px;position: absolute;margin-left: -5px;background-color: #FFFFFF;  border-radius: 50%;left: 0;z-index: 3;transition: all .1s;}
    .audio-top-progress-btn:hover,
    .audio-top-progress-btn.playing {box-shadow: 0 0 10px 0 #319FFF}
    .audio-top-play-time{margin: 4px 28px 0;display: flex;}
    .audio-top-current-time{color: white;font-size: 10px;}
    .audio-top-total-time{color: white;right:32px;position: absolute;font-size: 10px;}
    .mobile-audio-episodes-list{height:400px;overflow-y:scroll;display: block;}
    .mobile-episode-wrap{width:100%;height:60px;justify-content: center;align-items: flex-start;border-bottom:1px solid rgba(0, 0, 0, 0.2);}
    .mobile-episode-text-wrap{display: flex;align-items: center;padding-top:21px;padding-left:10px;}
    .mobile-episode-text-wrap span{color:#000;font-size: 18px;}
    .mobile-episode-text-title{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;flex:1;margin-left: 20px;}
    .mobile-detail-description-wrap{display: block;}
    .mobile-item-right{display:flex;position:relative;margin-left: 0;margin-top: 10px;}
    .mobile-detail-icon-play{display: block;}
}