.chunk{display: grid;grid-template-columns: 1fr auto;grid-gap: 20px;}
.details-block .details{background-color: #fff;padding: 0 20px 20px 20px;box-sizing: border-box;}
.details-block .details>.title{font-size: 28px;font-weight: bold;color: #333;padding: 20px 0;}
.details-block .details>.seat{font-size: 13px;color: #999;padding-bottom: 15px;}
.details-block .details>.seat a{color: #999;}
.details-block .details>.seat a.seat-color{color: #eea21c;}
.details-block .details>.seat .seat-icon::before{content: '';display: inline-block;width: 8px;height: 8px;border-top: 1px solid #b3b3b3;border-left: 1px solid #b3b3b3;transform: rotate(-45deg);margin-left: 5px;}
.details-block .details>.other-info{display: flex;align-items: center;justify-content: space-between;padding: 20px 0;border-bottom: 1px solid #f5f5f5;}
.details-block .details>.other-info .other-info-block{display: flex;align-items: center;}
.details-block .details>.other-info .other-info-block .userinfo{display: flex;align-items: center;justify-content: flex-start;}
.details-block .details>.other-info .other-info-block .userinfo .avatar{width: 24px;height: 24px;border-radius: 50%;overflow: hidden;background-color: #eee;}
.details-block .details>.other-info .other-info-block .userinfo .username{font-size: 13px;color: #333;padding: 0 6px;}
.details-block .details>.other-info .other-info-block .userinfo .avatar img{width: inherit;height: inherit;object-fit: contain;}
.details-block .details>.other-info .other-info-block .datetime{font-size: 13px;color: #999;padding: 0 6px;}
.details-block .details>.other-info .other-info-block .browse{font-size: 13px;color: #999;display: flex;align-items: center;justify-content: center;}
.details-block .details>.other-info .other-info-block .browse img{width: 16px;height: 12px;object-fit: contain;margin-right: 6px;}
.details-block .details .audio-player{padding: 15px 0;user-select: none;}
.details-block .details .audio-player .player{width: 100%;height: 80px;background-color: #f9f9f9;border-radius: 5px;padding: 20px;box-sizing: border-box;display: grid;grid-template-columns: auto 1fr;grid-gap: 15px;}
.details-block .details .audio-player .player .play-pause-btn{width: 40px;height: 40px;border: 1px solid #979797;border-radius: 5px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.details-block .details .audio-player .player .play-pause-btn .action-image{width: 16px;height: 16px;position: absolute;}
.details-block .details .audio-player .player .play-pause-btn .action-image img{width: inherit;height: inherit;object-fit: contain;}
.details-block .details .audio-player .player .play-pause-btn .play-image{display: block;}
.details-block .details .audio-player .player .play-pause-btn .pause-image{display: block;}
.details-block .details .audio-player .player .progress-notice{display: flex;align-items: flex-start;justify-content: space-between;flex-direction: column;}
.details-block .details .audio-player .player .progress-notice .notice{font-size: 12px;color: #4d4d4d;width: 100%;}
.details-block .details .audio-player .player .progress-notice .progress{display: grid;grid-template-columns: auto 1fr auto;align-items: center;grid-gap: 12px;width: 100%;font-size: 13px;color: #333;}
.details-block .details .audio-player .player .progress-notice .progress .progress-bar{position: relative;display: flex;align-items: center;}
.details-block .details .audio-player .player .progress-notice .progress .progress-bar .progress-bar-bg{width: 100%;height: 4px;background-color: #f0f0f0;}
.details-block .details .audio-player .player .progress-notice .progress .progress-bar .progress-bar-current{width: 0%;height: 4px;background-color: #333;border-radius: 4px;position: absolute;}
.details-block .details .audio-player .player .progress-notice .progress .progress-bar .progress-bar-dot{width: 0;height: 8px;background-color: #333;border-radius: 50%;position: absolute;left: 0%;}
.details-block .details .audio-player .player .progress-notice .progress .progress-bar .progress-bar-dot::before{content: '';width: 8px;height: 8px;background-color: #333;border-radius: 50%;position: absolute;left: -4px;cursor: pointer;}
.details-block .details .video-player{padding: 15px 0;}
.details-block .details .content{font-size: 16px;line-height: 1.5;color: #333;}
.details-block .details .content img{width: 100%;margin: 10px 0;}
.details-block .prev-next{margin-top: 20px;display: grid;grid-template-columns: 1fr 1fr;background-color: #fff;border-radius: 5px;padding: 30px;user-select: none;}
.details-block .prev-next .action-item{display: grid;grid-template-columns: auto 1fr;grid-gap: 15px;cursor: pointer;}
.details-block .prev-next .action-item .item-image{width: 120px;height: 75px;border-radius: 5px;overflow: hidden;}
.details-block .prev-next .action-item .item-image img{width: inherit;height: inherit;object-fit: cover;}
.details-block .prev-next .action-item .item-body{display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;padding: 10px 0;font-size: 14px;color: #333;}
.details-block .prev-next .action-item .item-body .action-text{font-weight: bold;}
.details-block .prev-next .action-item:hover .item-body .action-text{color: #eea21c;}
.details-block .prev-next .action-item:hover .item-body .action-text{color: #eea21c;}
.details-block .prev-next .action-item .item-body .prev-text::before{content: '';display: inline-block;width: 8px;height: 8px;border-top: 2px solid #333;border-left: 2px solid #333;transform: rotate(-45deg);margin-left: 5px;}
.details-block .prev-next .action-item .item-body .next-text::after{content: '';display: inline-block;width: 8px;height: 8px;border-top: 2px solid #333;border-right: 2px solid #333;transform: rotate(45deg);margin-left: 5px;}
.details-block .prev-next .action-item:hover .item-body .prev-text::before{border-top: 2px solid #eea21c;border-left: 2px solid #eea21c;}
.details-block .prev-next .action-item:hover .item-body .next-text::after{border-top: 2px solid #eea21c;border-right: 2px solid #eea21c;}
/* comments start */
.details-block .comments{background-color: #fff;border-radius: 5px;padding: 30px;box-sizing: border-box;margin-top: 20px;}
.details-block .comments .comments-title{font-size: 16px;font-weight: bold;color: #333;}
.details-block .comments .comment-submit-textarea{display: flex;align-items: flex-start;justify-content: space-between;padding: 20px 0;}
.details-block .comments .comment-submit-textarea .avatar{width: 40px;height: 40px;border-radius: 50%;overflow: hidden;background-color: #eee;}
.details-block .comments .comment-submit-textarea .avatar img{width: inherit;height: inherit;object-fit: cover;}
.details-block .comments .comment-submit-textarea .textarea{flex: 1;padding: 0 0 0 15px;}
.details-block .comments .comment-submit-textarea .textarea .username{height: 40px;line-height: 40px;}
.details-block .comments .comment-submit-textarea .textarea .textarea-input{padding: 20px 0;}
.details-block .comments .comment-submit-textarea .textarea .textarea-input textarea{background-color: #f9f9f9;border-radius: 5px;padding: 20px;font-size: 16px;border: none;outline: none;resize: none;width: 100%;min-height: 140px;box-sizing: border-box;}
.details-block .comments .comment-submit-textarea .submit-btn{display: flex;align-items: center;justify-content: flex-end;}
.details-block .comments .comment-submit-textarea .submit-btn .btn{background: linear-gradient(146deg, #EFA21B 0%, #FFBA42 100%);border-radius: 5px;color: #fff;font-size: 16px;font-weight: bold;display: inline-block;width: 150px;height: 44px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.details-block .comments .comment-lists{}
.details-block .comments .comment-lists .comment-list-item{display: flex;align-items: flex-start;justify-content: space-between;padding: 20px 0 0 0;}
.details-block .comments .comment-lists .comment-list-item .avatar{width: 40px;height: 40px;border-radius: 50%;overflow: hidden;background-color: #eee;}
.details-block .comments .comment-lists .comment-list-item .avatar img{width: inherit;height: inherit;object-fit: cover;}
.details-block .comments .comment-lists .comment-list-item .context{flex: 1;padding: 0 0 20px 15px;border-bottom: 1px solid #f5f5f5;}
.details-block .comments .comment-lists .comment-list-item:last-child .context{border-bottom: none;}
.details-block .comments .comment-lists .comment-list-item .context .username{font-size: 14px;color: #666;}
.details-block .comments .comment-lists .comment-list-item .context .text{font-size: 16px;color: #333;margin-top: 6px;line-height: 1.5;}
.details-block .comments .comment-lists .comment-list-item .context .time-txt{font-size: 13px;color: #999;margin-top: 13px;}
/* comments end */

.recommendation{background-color: #fff;width: 300px;border-radius: 5px;}
.recommendation .recommendation-title{padding: 0 12px;}
.recommendation .recommendation-title .title{font-size: 20px;font-weight: bold;padding: 12px 0 5px 0;border-bottom: 2px solid #ebebeb;position: relative;}
.recommendation .recommendation-title .title span{color: #333;position: relative;}
.recommendation .recommendation-title .title span::after{content: '';border-bottom: 2px solid #eea21c;position: absolute;top: auto;right: 0;bottom: -7px;left: 0;}
.recommendation .recommendation-title .title span strong{color: #eea21c;}
.recommendation .recommendation-title .title .yh-icon{position: absolute;left: 90px;bottom: -5px;width: 28px;height: 25px;}
.recommendation .recommendation-title .title .yh-icon img{width: inherit;height: inherit;}
.recommendation .recommendation-lists{padding: 0 12px;}
.recommendation .recommendation-lists .lists{display: grid;grid-template-columns: 1fr;grid-gap: 0;}
.recommendation .recommendation-lists .lists .list-item a{display: grid;grid-template-columns: 70px 1fr;grid-gap: 12px;padding: 20px 0 0 0;}
.recommendation .recommendation-lists .lists .list-item a .item-image{width: 70px;height: 70px;border-radius: 5px;overflow: hidden;}
.recommendation .recommendation-lists .lists .list-item a .item-image img{width: inherit;height: inherit;object-fit: cover;}
.recommendation .recommendation-lists .lists .list-item a .item-body{padding: 0 0 20px 0;border-bottom: 1px solid #ebebeb;}
.recommendation .recommendation-lists .lists .list-item a .item-body .item-body-view{height: 70px;display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;}
.recommendation .recommendation-lists .lists .list-item a .item-body .item-body-view .item-name{font-size: 15px;color: #333;line-height: 1.5;}
.recommendation .recommendation-lists .lists .list-item a .item-body .item-body-view .browse{font-size: 13px;color: #999;display: flex;align-items: center;justify-content: flex-start;}
.recommendation .recommendation-lists .lists .list-item a .item-body .item-body-view .browse img{width: 16px;height: 12px;object-fit: contain;margin-right: 6px;}