.resource-left{width: 280px;}
.recommend{overflow: hidden;}
.recommend-title a{width: 140px;height: 46px;line-height: 46px;text-align: center;background-color: #F5F8FF;color: #666;}
.recommend-title a:hover,.recommend-title a.active{background-color: #fff;color: #2468F2;}

.type-title{line-height: 40px; justify-content: space-between;}
.type-title a.active{position: relative;}
.type-title a:hover{color: #2468F2;}
.type-title a.active:after{display: block;content: "";width: 28px;height: 2px;background-color: #2468F2;position: absolute;left: 0;top: 39px;}
.recommend-list li a{line-height: 22px;}
/* 左侧推荐（同课精品/精品推荐/所属专辑）列表文字单行省略 */
.recommend .recommend-list li a{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.recommend-list li{padding: 10px 0 10px 20px;}
.recommend-list i{left:0;top: 8px;}
.recommend-list li a:hover{color: #2468F2;text-decoration: underline;}
.recommend-more{line-height: 50px;text-align: center;display: block;}

.collection-list img{width: 72px;height: 88px;}
.collection-list h3{font-weight: normal;}
.collection-list div.fr{width: 160px;}
.collection-list a:hover h3{color: #2468F2;text-decoration: underline;}

.resource-right{width: 908px;}
.resource-title h1{max-width: 640px;line-height: 30px;}
.resource-title .mark{border-radius: 2px 55px 55px 55px; margin-top: 5px; line-height: 19px;height: 19px;box-sizing: border-box;}
.resource-btn-grounp{margin-left: auto;width: 167px;}
.resource-btn-grounp .resource-btn{width: 110px;height: 42px;line-height: 42px;text-align: center;border-radius: 0 6px 6px 0;}
.resource-btn-grounp .resource-btn:hover{opacity: 0.9;}
.resource-btn-grounp .resource-btn:active{transform: translate(1px, 1px);}
.resource-btn-grounp .resource-btn.active{background-color: #2468F2;color: #fff;}
.resource-btn-grounp .resource-btn.active:hover{background-color: #2468F2;color: #fff;}

.resource-btn-grounp .resource-shop{width: 57px;height: 42px;border: 1px solid #2468F2;box-sizing: border-box;
    text-align: center;line-height: 42px;border-radius: 6px 0 0 6px}
.resource-shop i{font-size: 22px;}
.resource-btn-grounp .resource-shop:hover{opacity: 0.9;}
.resource-btn-grounp .resource-shop:active{transform: translate(1px, 1px);}
.resource-btn-grounp .resource-shop.active{background-color: #2468F2;color: #fff;}
.resource-btn-grounp .resource-btn.active:hover{background-color: #2468F2;color: #fff;}


.resource-bar{background-color: #F8FAFF;border: 1px solid #EDF3FF;}
.resource-bar div.absolute{width: 358px;border: 1px solid #EDF3FF;top: 41px;}
.resource-bar .recommend-list li:hover{background-color: #F1F5FE;}
.resource-bar .recommend-list li a:hover{text-decoration: none;}
.resource-bar-btn{width: 100%;height: 42px;line-height: 42px; text-align: center;display: block;}
.resource-bar-title i{width: 5px;height: 17px;border-radius: 7px;left: 15px;top: 18px;}
.title-active{line-height: 50px;width: 500px;}
.title-btn {height: 30px;width: 153px;border: 1px solid #EDF3FF;overflow: hidden;}
.title-btn a{width: 76px;line-height: 30px;text-align: center;}
.title-btn a:hover{background-color: #2468F2;color: #fff;}
.title-btn i{width: 1px;height: 14px;background-color: #eee; margin-top: 8px;}
.show-btn{cursor: pointer;height: 30px;line-height: 30px;text-align: center;}
.resource-content li img{width: 100%;border-radius: 6px;}
.resource-content li.nopreview img{width:30%!important; }
.resource-content li.nopreview{text-align: center;padding: 130px 0;font-size: 16px;}
.resource-bottom {text-align: center;}
.resource-bottom .resource-btn-grounp{margin: 20px auto 0 auto;}

#resource-left,#resource-title {position: -webkit-sticky;position: sticky;top: 0;z-index: 100;}

/* ===== 全屏预览模式 ===== */
.resource-content li{position: relative;cursor: pointer;background-color: #ffffff;}
/* 每张图 hover 遮罩：点击全屏预览 */
.resource-content .resource-preview-overlay{
    position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 10;
    border-radius: 6px;background: rgba(0,0,0,.03);
    display: flex;align-items: center;justify-content: center;
    opacity: 0;transition: opacity .2s;cursor: zoom-in;
}
.resource-content li:hover .resource-preview-overlay{opacity: 1;}
.resource-content .resource-preview-overlay .resource-preview-badge{
    display: flex;align-items: center;gap: 10px;
    background: rgba(0,0,0,.5);color: #fff;font-size: 14px;
    padding: 12px 24px;border-radius: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}
.resource-content .resource-preview-overlay .resource-preview-badge .iconfont{font-size: 18px;margin: 0;}
/* 每张图页码 */
.resource-content .resource-page-num{
    position: absolute;right: 10px;bottom: 15px;z-index: 10;
    height: 20px;line-height: 20px;padding: 0 8px;
    background: rgba(0,0,0,.4);color: #fff;
    border-radius: 2px;font-size: 12px;
}
/* 退出提示条：默认隐藏，全屏模式才显示 */
.viewer-bar{display: none;}

/* 全屏模式：body 锁定滚动 */
body.viewer-on{overflow: hidden !important;}

/* 全屏模式：右侧详情区变为全屏容器（层级需高于左侧置顶 #resource-left 的 z-index:100） */
.resource-right.viewer-stage{
    position: fixed !important;top: 0 !important;left: 0 !important;
    right: 0 !important;bottom: 0 !important;
    width: 100vw !important;height: 100vh !important;
    z-index: 200 !important;background-color: #f2f2f2 !important;
    margin: 0 !important;overflow-y: auto !important;
}
/* 全屏模式：顶部资源信息栏吸顶 */
.resource-right.viewer-stage #resource-title{
    position: sticky !important;top: 0 !important;z-index: 102 !important;
    width: 100% !important;box-sizing: border-box;
    background-color: #fff !important;border-radius: 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
}
/* 全屏模式：退出提示条（右下角悬浮） */
.resource-right.viewer-stage .viewer-bar{
    display: flex !important;position: fixed;bottom: 30px;right: 30px;
    z-index: 200;align-items: center;gap: 6px;
    height: 44px;line-height: 44px;padding: 0 16px;
    background: rgba(0,0,0,.55);color: #fff;font-size: 16px;
    border-radius: 20px;cursor: pointer;pointer-events: auto;
    -webkit-animation: viewer-in .35s ease;
    animation: viewer-in .35s ease;
}
.resource-right.viewer-stage .viewer-bar .iconfont{font-size: 20px;margin: 0;}
@-webkit-keyframes viewer-in{from{opacity: 0;-webkit-transform: translateY(-8px);}}
@keyframes viewer-in{from{opacity: 0;transform: translateY(-8px);}}
/* 全屏模式：预览图放大 */
body.viewer-on .resource-right.viewer-stage .resource-content li img{min-width: 80%;}
/* 全屏模式：hover 遮罩变 zoom-out 且隐藏 badge（点击图片即可退出） */
body.viewer-on .resource-right.viewer-stage .resource-content li .resource-preview-overlay{cursor: zoom-out !important;}
body.viewer-on .resource-right.viewer-stage .resource-content li .resource-preview-overlay .resource-preview-badge{display: none !important;}


.rank-title{background-color: #F8FAFF;border: 1px solid #EDF3FF;width: 260px;box-sizing: border-box;}
.rank-title a{width: 48px;height: 22px;line-height: 22px;text-align: center; border-radius: 6px;margin-right: 1px;}
.rank-title a.active,.rank-title a:hover{background-color: #2468F2;color: #fff}
.rank-list li{padding-left: 30px;}
.rank-list i{width: 22px;height: 16px;top: 12px;}
.rank-list i.rank1{background: url(/img/bg.png) 0 0 no-repeat;background-size: 35px;}
.rank-list i.rank2{background: url(/img/bg.png) 0 -36px no-repeat;background-size: 35px;}
.rank-list i.rank3{background: url(/img/bg.png) 0 -72px no-repeat;background-size: 35px;}
.rank-list i.rank4{left: -2px;top: 10px;}
.mark-icon{text-align: center;width: 80px;height: 22px;line-height: 22px;}

.group-right{width: 908px;}
.group-book0{background: url(/img/book0.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book1{background: url(/img/book1.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book2{background: url(/img/book2.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book3{background: url(/img/book3.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book4{background: url(/img/book4.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book5{background: url(/img/book5.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book6{background: url(/img/book6.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book7{background: url(/img/book7.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book8{background: url(/img/book8.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book9{background: url(/img/book9.png) center no-repeat;width: 128px;height: 158px; background-size: 128px;}
.group-book h2{margin-bottom: 75px;}
.group-book h2,.group-book p{text-align: center;}
.group-title{width: 720px;}
.group-title h1{max-width: 680px;line-height: 30px;padding-left: 50px;}
.group-title h1 span{width: 40px;height: 20px;text-align: center;line-height: 20px;border-radius: 2px 20px 20px 2px; left: 0;top: 5px;font-weight: normal;}
.book-scale{transform: scale(.6);left: -25px;top: -40px;}

.cpoy-title{line-height: 24px;border-radius: 6px 6px 0 0;}
.cpoy-title .ui-checkbox{margin-top: 3px;margin-right: 50px;}
.copy-mark{width: 440px;height: 24px; color: #874D00;background-color: #FDE9D0;line-height: 24px;text-align: center;}
.copy-mark i{width: 28px;height: 32px;background: url(/img/bg.png) 0 -110px no-repeat;background-size: 35px; left: -15px; top: -3px;}
.resource-name{width: 670px;}
a.resource-name:hover{color: #2468F2;text-decoration: underline;}
.resource-secondlist {background-color: #FAFAFA;}
.resource-secondlist .secondlist-box{border: 1px solid #EBEBEB;}
.resource-secondlist li .resource-name{width: 650px;}
.second-title i{width: 5px;height: 17px;background-color: #F3AA1D;border-radius: 7px;left: 5px;top: 3px;}
.resource-thirdlist li .resource-name{width: 600px;}
.resource-thirdlist .third-title{background-color: #F7FBFE;}