/* 图片地址  //static.ooopic.com/framework/web/designer/public/images */

:root{
	--trans-2s:all .24s ease-in-out;
	--trans-3s:all .36s;
	--trans-5s:all .5s ease-in-out;
	--line-h20:20px;
	--drop-minWidth:120px;
}

.wt-headerHeg{height: 72px;}
.sjs-banner{position: relative;height: 180px;background: transparent;background-size: cover;background-position: 50%;}
.sjs-banner::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.2);}
.sjs-info{background: var(--bg-color);}
.sjs-info .sjs-info_box{display: flex;padding-bottom: 24px;}
.sjs-info .sjs-info_line{width: 100%;height: 0;border-bottom: 1px solid var(--bwg-color-border);}
.sjs-info .sjs-info_box .sjs-info_lt{flex: 1;}
.sjs-info .sjs-info_box .sjs-info_rt{flex-shrink: 0;margin-left: 40px;}
.sjs-info .sjs-info_box .sjs-avatar{width: 112px;height: 112px;background: var(--orange-light-color);border-radius: 50%;border: 8px solid #FFFFFF;overflow: hidden;position: relative;margin-top: -84px;transition:var(--trans-3s);}
.sjs-info .sjs-info_box .sjs-avatar img{display: block;width: 100%;height: 100%;object-fit: contain;}
.sjs-info .sjs-info_box .sjs-avatar:hover{box-shadow: var(--box-shadow-1);}
.sjs-info .sjs-info_box .sjs-name{font-size: 32px;font-weight: bold;color: var(--bwg-color-tit);line-height: 50px;margin-top: 12px;}
.sjs-info .sjs-info_box .sjs-tag{display: flex;align-items: center;margin-top: 12px;}
.sjs-info .sjs-info_box .sjs-tag .sjs-tag_item{flex-shrink: 0;font-size: var(--font-text);color: var(--bwg-color-tit);margin-right:12px;display: flex;align-items: center;}
.sjs-info .sjs-info_box .sjs-tag .sjs-tag_item .iconfont{font-size: 24px;margin-right: 4px;background:linear-gradient(270deg,  rgb(72, 85, 99), rgb(41, 50, 60));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.sjs-info .sjs-info_box .sjs-btnWrap{margin-top: 16px;}
.sjs-info .sjs-info_box .sjs-info_work{display: flex;padding-top: 40px;}
.sjs-info .sjs-info_box .sjs-info_work .sjs-info_workItem{position: relative;padding: 0 44px;}
.sjs-info .sjs-info_box .sjs-info_work .sjs-info_workItem .tit{font-size: var(--font-text);color: var(--bwg-color-tip)}
.sjs-info .sjs-info_box .sjs-info_work .sjs-info_workItem .num{font-size: var(--font-big-title);color: var(--bwg-color-tit);font-weight: var(--font-bold);margin-top: 8px;}
.sjs-info .sjs-info_box .sjs-info_work .sjs-info_workItem::after{content: '';width: 0px;height: 48px;border-left: 1px solid var(--bwg-color-border);position: absolute;top: 50%;margin-top: -24px;right: 0;}
.sjs-info .sjs-info_box .sjs-info_work .sjs-info_workItem:last-of-type::after{display: none;}
.sjs-info .sjs-info_bar{display: flex;height: 56px;}
.sjs-info .sjs-info_bar .sjs-info_nav{flex:1;display: flex;align-items: center;}
.sjs-info .sjs-info_bar .sjs-info_nav .sjs-info_navItem{position: relative;display: flex;align-items: center;height:100%;font-size: var(--font-subtitle);color: var(--bwg-color-tit);margin-right: 40px;transition: var(--trans-2s);}
.sjs-info .sjs-info_bar .sjs-info_nav .sjs-info_navItem::after{display: none;content: '';position: absolute;bottom: -2px;left: 0;width: 100%;height: 4px;background: var(--green-color);}
.sjs-info .sjs-info_bar .sjs-info_nav .sjs-info_navItem:hover,
.sjs-info .sjs-info_bar .sjs-info_nav .sjs-info_navItem.on{color: var(--green-color);}
.sjs-info .sjs-info_bar .sjs-info_nav .sjs-info_navItem.on::after{display: block;}
.sjs-info .sjs-info_bar .sjs-info_sort{flex-shrink: 0;display: flex;align-items: center;}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem{flex-shrink: 0;min-width:var(--drop-minWidth);position: relative;background:var(--bg-color);border-radius: 4px;padding-left: 12px;padding-right:36px;height: 32px;line-height: 32px;font-size: 14px;color: var(--bwg-color-tip);cursor: pointer;margin-right: 12px;border-radius: 16px;border: 1px solid var(--bwg-color-border);z-index: 3;}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem .wt-info_sortVal{font-size: 14px;color: var(--bwg-color-tip);transition: var(--trans-2s);}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem:hover .wt-info_sortVal,
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem.on .wt-info_sortVal{color: var(--green-color);}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem .wt-downArrow{font-size: 12px;color: var(--bwg-color-tip);transition: var(--trans-2s);position: absolute;top: 1px;right: 10px;}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem:last-child{margin-right: 0;}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem .sort-ipt{border: 0;outline: 0;font-size: var(--font-text);color: var(--bwg-color-tit);margin: 0;padding: 0;width: 86px;height: 28px;}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem .wt-fdj{font-size: 16px;color: var(--bwg-color-tip);transition: var(--trans-2s);position: absolute;top: 0px;right: 10px;}
.sjs-info .sjs-info_bar .sjs-info_sort .wt-info_sortItem .wt-fdj:hover{color: var(--green-color);}

/* 搜索下拉�? */
.wt-dropDown{position: relative;}
.wt-dropDown .wt-drop{position: absolute;max-height: 0;top: -2px;left: -12px;width:max-content;z-index: 1;background-color: var(--color-bg-2);border-radius: 4px;opacity: 0;transition: var(--trans-5s);pointer-events: none;background: var(--bg-color);box-shadow: var(--box-shadow-2);}
.wt-dropDown .wt-drop::before{content: '';width: 100%;height: 10px;background-color: #fff;position: absolute;top: -10px;left: 0;opacity: 0;}
.wt-dropDown .wt-drop .wt-drop_list{max-height: 208px;overflow:auto;padding:8px 0;}
.wt-dropDown .wt-drop .wt-drop_list::-webkit-scrollbar{width:4px;height: 4px;}
.wt-dropDown .wt-drop .wt-drop_list::-webkit-scrollbar-thumb{border-radius: 2px;background-color:var(--bwg-color-disabled);}
.wt-dropDown .wt-drop .wt-drop_list::-webkit-scrollbar-track{border-radius: 2px;}
.wt-dropDown .wt-drop .wt-drop_list .wt-drop_item{display: block;width:max-content;min-width:var(--drop-minWidth);height: 32px;line-height: 32px;padding: 0 12px;font-size: 14px;color: var(--bwg-color-tip);transition: var(--trans-2s);cursor: pointer;}
.wt-dropDown .wt-drop .wt-drop_list .wt-drop_item:hover,
.wt-dropDown .wt-drop .wt-drop_list .wt-drop_item.on{color: var(--green-color);}
.wt-dropDown .wt-drop .wt-drop_list .wt-drop_item .ico-chekced{display: inline-block;width: 14px;height: 14px;line-height: 14px;border: 1px solid #ABACB3;font-size: 12px;margin-right: 8px;border-radius: 2px;color: transparent;font-weight: 700;}
.wt-dropDown .wt-drop .wt-drop_list .wt-drop_item.on .ico-chekced{border-color: var(--green-color);background-color: var(--green-color);color: #161A1F;}
.wt-dropHover{position: relative;}
.wt-dropHover:hover .wt-drop{top: 4px;opacity:1;pointer-events: auto;max-height: 240px;}

.sjs-section{padding: 28px 0;}
.sjs-section .sjs-floor{margin-bottom: 28px;}
.sjs-floor .sjs-floor_tit{font-size: var(--font-big-title);color: var(--bwg-color-tit);}
.sjs-floor .sjs-floor_tit span{display: inline-block;position: relative;}
.sjs-floor .sjs-floor_tip{font-size: var(--font-text);color: var(--bwg-color-desc);letter-spacing: 4px;margin-top: 8px;}
.sjs-floor .sjs-floor_works{margin-top: 8px;}
.sjs-floor .sjs-floor-more{text-align: center;margin-top: 20px;}
.sjs-floor .sjs-floor-more .sjs-floor-moreBtn{display: inline-block;width: 354px;height: 40px;line-height:40px;text-align: center;font-size: 16px;color: #fff;background:var(--button-bg-green);border-radius: 20px;transition: var(--trans-2s);}
.sjs-floor .sjs-floor-more .sjs-floor-moreBtn>.iconfont{display: inline-block;font-size: 24px;color: #fff;vertical-align:-4px;}
.sjs-floor .sjs-floor-more .sjs-floor-moreBtn:hover{background:var(--button-bg-hover-green)}
.sjs-floor .sjs-floor-more .sjs-floor-moreBtn:active{background:var(--button-bg-active-green)}
.sjs-floor_keyword{margin-top: 20px;display: flex;flex-wrap: wrap;}
.sjs-floor_keyword .kw-item{flex-shrink: 0;padding: 0 16px;line-height: 36px;border-radius: 20px;font-size: 14px;color: var(--bwg-color-tit);border: 1px solid var(--bwg-color-border);margin-right: 12px;margin-bottom: 12px;transition: var(--trans-2s);background: var(--bg-color);}
.sjs-floor_keyword .kw-item:last-child{margin-right: 0;}
.sjs-floor_keyword .kw-item:hover{background-color:var(--bwg-color-tableHead);}

.sjs-floor_works .flex-list{padding-top: 8px;}

.sjs-category{position: relative;margin-top: -4px;}
.sjs-category{display: flex;flex-wrap: wrap;position: relative;margin-top: -4px;}
.sjs-category .sjs-category_item{flex-shrink: 0;height: 34px;padding: 0 12px;font-size: var(--font-text);color: var(--bwg-color-tit);display: flex;align-items: center;border-radius: 32px;margin-right: 6px;margin-bottom: 6px;transition: var(--trans-2s);background: transparent;}
.sjs-category .sjs-category_item .num{flex-shrink: 0;height: 22px;padding: 0 8px;font-size: var(--font-text);color: var(--bwg-color-tit);background: var(--bwg-color-divide);margin-left: 8px;border-radius: 32px;display: flex;align-items: center;}
.sjs-category .sjs-category_item:hover{background: var(--bwg-color-divide)}
.sjs-category .sjs-category_item.on{color:var(--green-color);background: transparent;}
.sjs-category .sjs-category_item.on .num{color:var(--green-color);background: var(--green-light-color);}
.sjs-category .category-path{display: flex;align-items: center;font-size: 14px;color: var(--bwg-color-desc);margin-bottom: 16px;}
.sjs-category .category-path .path-item{flex-shrink: 0;padding:4px 8px;border-radius: 24px;border: 1px dashed var(--bwg-color-desc);line-height: 1;}
.sjs-category .category-path .path-item .wt-closeIco{color:var(--bwg-color-desc);vertical-align: -1px;font-weight: 700;margin-left: 4px;}
.sjs-category .category-path .path-item:hover{border-color: var(--green-color);}
.sjs-category .category-path .path-item:hover h1{color: var(--green-color);}
.sjs-category .category-path .path-item .wt-closeIco:hover{color: var(--green-color);}
.sjs-category .category-path .path-item,
.sjs-category .category-path .path-tit{color: var(--bwg-color-desc);font-size: 14px;}
.sjs-category .category-path .wt-nextArr{display: inline-block;font-size: 20px;color: var(--bwg-color-desc);vertical-align: -3px;}
.sjs-category .category-path .path-item:hover{color: var(--green-color);}
.sjs-category .category-container{width: 100%;margin-bottom: 12px;box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.06);border-radius: 8px;padding: 20px 20px 14px;background-color: #fff;}
.sjs-category .cate-wrap{display: flex;min-width: 0;}
.sjs-category .cate-wrap .cate-tit{flex-shrink: 0;font-size: 14px;color: var(--bwg-color-tit);}
.sjs-category .cate-wrap .cate-list{flex: 1;display: flex;flex-wrap: wrap;}
.sjs-category .cate-wrap .cate-list .cate-item{position: relative;flex-shrink: 0;line-height: 1;padding: 4px 10px;font-size: 14px;color: var(--bwg-color-tit);margin-bottom: 6px;margin-left: 2px;border-radius: 4px;}
.sjs-category .cate-wrap .cate-list .cate-item .icon-newBadge{width: max-content;display: inline-block;padding:2px 4px;background: #FF2525;border-radius: 4px 0px 4px 0px;font-size: 12px;color: #fff;position: absolute;top: -10px;left: 2px;line-height:1;transform: scale(.86);}
.sjs-category .cate-wrap .cate-list .cate-item:hover,
.sjs-category .cate-wrap .cate-list .cate-item:hover *{color: var(--green-color);}
.sjs-category .cate-wrap .cate-list .cate-item.on{background-color: #E1FDF9;color: var(--green-color);}
.sjs-category .cate-wrap .cate-list .cate-item.on *{color: var(--green-color);}
.wt-button.had-followed{background: var(--button-bg-green)!important;color: var(--button-text-green) !important;border: none;}
.wt-button.had-followed:hover{background: var(--button-bg-hover-green)!important;color: var(--button-text-green)!important;}
.wt-button.had-followed:active{background: var(--button-bg-active-green)!important;color: var(--button-text-green)!important;}

.sjs-albumWrap .pic-list .pic-item{height: auto;}
.sjs-albumWrap .pic-list .pic-item .subject-albumWrap{background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48) 100%);position: absolute;left: 8px;right: 8px;bottom: 8px;padding: 32px 12px 12px;opacity: .95;transition: all .24s;z-index: 2;border-radius: 0 0 4px 4px;}
.sjs-albumWrap .pic-list .pic-item .subject-albumWrap .subject-name{font-size: 16px;color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all .36s;}
.sjs-albumWrap .pic-list .pic-item .subject-albumWrap .subject-amount{font-size: 12px;color:  #fff;margin-top: 4px;}
.sjs-albumWrap .pic-list .pic-item .subject-albumWrap .subject-amount .iconfont{display: inline-block;margin-right: 2px;font-size: 13px;color: #fff;transform: scale(0.83);vertical-align: -1px;}
.sjs-albumWrap .pic-list .pic-item:hover .subject-albumWrap{opacity: 1;}

.sjs-albumWrap .flex-list .pic-item .subject-albumWrap{background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48) 100%);position: absolute;left: 0px;right: 0px;bottom: 0px;padding: 32px 12px 12px;opacity: .95;transition: all .24s;z-index: 2;border-radius: 0 0 4px 4px;}
.sjs-albumWrap .flex-list .pic-item .subject-albumWrap .subject-name{font-size: 16px;color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all .36s;}
.sjs-albumWrap .flex-list .pic-item .subject-albumWrap .subject-amount{font-size: 12px;color:  #fff;margin-top: 4px;}
.sjs-albumWrap .flex-list .pic-item .subject-albumWrap .subject-amount .iconfont{display: inline-block;margin-right: 2px;font-size: 13px;color: #fff;transform: scale(0.83);vertical-align: -1px;}
.sjs-albumWrap .flex-list .pic-item:hover .subject-albumWrap{opacity: 1;}

.sjs-albumWrap .video-list .video-item{height: auto;}
.sjs-albumWrap .video-list .video-item .subject-albumWrap{background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48) 100%);position: absolute;left: 8px;right: 8px;bottom: 8px;padding: 32px 12px 12px;opacity: .95;transition: all .24s;z-index: 2;border-radius: 0 0 4px 4px;}
.sjs-albumWrap .video-list .video-item .subject-albumWrap .subject-name{font-size: 16px;color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all .36s;}
.sjs-albumWrap .video-list .video-item .subject-albumWrap .subject-amount{font-size: 12px;color:  #fff;margin-top: 4px;}
.sjs-albumWrap .video-list .video-item .subject-albumWrap .subject-amount .iconfont{display: inline-block;margin-right: 2px;font-size: 13px;color: #fff;transform: scale(0.83);vertical-align: -1px;}
.sjs-albumWrap .video-list .video-item:hover .subject-albumWrap{opacity: 1;}

/* 适配店铺页面 */
.video-list .video-item .pic-name{max-width: 166px}