.cost-product{background-image:url(http://f.fwxgx.com/w/software/icon/20240711/8ae70f60668d4caa89a026da5cfe8dd9.svg)}
.calculation-product{background-image:url(http://f.fwxgx.com/w/software/icon/20240711/015471ec101848f4a74efd4ba226f403.svg)}
.construction-product{background-image:url(http://f.fwxgx.com/w/software/icon/20240711/aa4fbfa17f444b9e8a31a37a2232fc89.svg)}
.design-product{background-image:url(http://f.fwxgx.com/w/software/icon/20240711/d4c6be14c309437298da65565223dd51.svg)}
.lock-and-other{background-image:url(http://f.fwxgx.com/w/software/icon/20240711/adac2bec82cc458ebbe08e81313a78b1.svg)}
.soft-detail-release{
    color:#0084FF;
    font-size:12px;
    margin-left:10px;
}
.soft-detail-span:first-child { width: 240px ;}
.J_version_info_wrap img {
    max-width: 100%;
}
#J_version_info_wrap {
   line-height: 35px;
}
.soft-city-box{
    width: 202px;
    height: 76px;
    border-radius: 4px;
    position: absolute;
    background: #fff;
    box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05),0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px 0px rgba(0, 0, 0, 0.12);
}
.soft-city-box .area-select-list{
    width: 202px;
    height: 76px;
    background: linear-gradient(180deg, #e0f0ff 0%, #ffffff00 57%);
}
.area-select-list li {
  padding: 8px 16px;
  font-size: 14px;
  color: #4E4E4E;
  cursor: pointer;
}

.area-select-list li:hover {
  background: rgba(0, 132, 255, 0.04);
}

.area-select-list li.active {
  color: #0084FF;
  background: rgba(0, 132, 255, 0.04);
}

.soft-city-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  background: url(//static-f.fwxgx.com/image/software/soft-city-18fee66d35dc2f5bc11e046e007483ee.png) no-repeat;
  vertical-align: -2px;
}

.soft-city-icon.local {
  background-position: 0 0;
}

.soft-city-icon.global {
  background-position: 0 -30px;
}
.soft-position-icon-area.global {
    background-position: 0 -30px;
}
.area-select-list li.active .local,.area-select-list li:hover .local{
    background-position: -45px 0;
}
.area-select-list li.active .global,.area-select-list li:hover .global{
    background-position: -44px -30px;
}
.area-select-list li.active,.area-select-list li:hover{
    color: #0084ff;
}

/* 软件推荐课程列表（hover/默认激活软件下方） */
.recommend-course-list{
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
}

/* 推荐课程列表展开/收起过渡动画 */
.rec-course-enter-active {
    transition: opacity 0.5s ease-out, max-height 0.5s ease-out;
    overflow: hidden;
    max-height: 239px;
    will-change: max-height, opacity;
}
.rec-course-leave-active {
    transition: opacity 1s ease-in, max-height 1s ease-in;
    overflow: hidden;
    max-height: 239px;
    will-change: max-height, opacity;
}
.rec-course-enter {
    opacity: 0;
    max-height: 0;
}
.rec-course-leave-to {
    opacity: 0;
    max-height: 0;
}
.recommend-course-list .rec-course-item{
    width: 285px;
    height: 206px;
    padding: 0;
    margin-right: 20px;
}
.recommend-course-list .rec-course-card{
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
}
.recommend-course-list .rec-course-card:hover{
    box-shadow: 0px 4px 8px 0px rgba(5, 0, 106, 0.1);
}
.recommend-course-list .rec-course-card:hover .rec-course-title{
    color: #0084FF;
}
.recommend-course-list .rec-course-img{
    width: 261px;
    height: 148px;
    object-fit: cover;
    display: block;
    margin: 12px 12px 0 12px;
}
.recommend-course-list .rec-course-info{
    padding: 10px;
}
.recommend-course-list .rec-course-title{
    font-size: 14px;
    color: #333;
    margin: 0 0 6px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recommend-course-list .rec-course-learn{
    font-size: 12px;
    color: #999;
    margin: 0;
    line-height: 1.4;
}

/* 当前展示推荐课程的软件项高亮背景
   Vue 列表靠 :class="recactive"；fragment 列表无法注入响应式 class，改用 :has 匹配其下可见的课程列表 */
.soft_type_con > li.recactive,
.soft_type_con > li:has(> .recommend-course-list){
    background: rgba(0, 132, 255, 0.04);
    border-radius: 6px;
}