/**
 * 云工具首页 style
 */
 .banner {height:3rem;background: url(https://sanger-sc-prod.oss-cn-shanghai.aliyuncs.com/static/img/web/cmd/banner.jpg) no-repeat center;background-size: cover;margin-top: 72px;}
 .banner .wrap {display: flex;height: 100%;color:#fff;margin-left: 13.54%;flex-direction: column;    justify-content: center;align-items:flex-start;
  opacity: 0;
    animation: fadeIn 3s forwards;  -webkit-animation: fadeIn 3s forwards;
}
 .banner .wrap > div {padding-bottom: .8rem;position: relative;}
 .banner .txt h5 {font-size: 0.54rem;font-weight:700;margin-bottom: 0.05rem;}
 .banner .txt p {font-size:0.16rem;margin-bottom: 0.24rem;letter-spacing:1px;}
 .banner .txt a {display: flex;height: 0.8rem;border-radius: 50%;width: .8rem;color:#09B07F;background:#fff;font-size: 0.16rem;flex-direction: column;align-items: center;justify-content: center;position: absolute;left: 0;bottom: 0;z-index: 2;}
 .banner .txt .button-bg {width: 1rem;height: 1rem;border-radius: 50%;background: #F5F6F6;opacity: .26;position: absolute;left: .3rem;bottom: -.1rem;z-index: 1;}
 
 /*top 标题*/
 .tools-wrap {display: flex;padding-bottom: 0.3rem;color: #2E2F33;background: #F9F9F9;}
 .tools-content {flex:1;}
 .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
   height: 30px !important;
   line-height: 28px !important;
   border-radius: .5rem;
 }
 .tools-content .tools-title {display: flex;align-items: center;margin-top: .18rem;color: #595858;}
 .tools-content .tools-title .icon-wrapper{margin-right: 5px;display: flex;align-items: center;width: 22px;height: 22px;}
 /*侧栏子导航*/
 .tools-side-wrap {width:2.15rem;padding:.18rem .08rem;flex-shrink: 0;margin-right: 0.26rem;align-self: flex-start;position: sticky;top: 82px;left: 16px;z-index: 99;}
 .left_sidebar>ul>li {font-size: 0.14rem;height:0.45rem;line-height:0.45rem;margin-top: 5px;}
 .left_sidebar>ul>li:first-child {margin-top: 0;}
 .left_sidebar>ul>li a {padding-left:0.35rem;transition: .3s ease;color: #2E2F33;display: flex;align-items: center;}
 .left_sidebar>ul>li.current a {background: rgba(9,176,127,.24);color:var(--primary);font-weight: bold;border-radius: 8px;}
 .left_sidebar>ul>li.current a .icon-wrapper {color: var(--primary);}
 .left_sidebar>ul>li:not(.current) a:hover {background:rgba(9, 176, 127, .11);border-radius: 8px;}
 
 /*筛选*/
 .tools-content .filter-box {margin-bottom:0.15rem;display: flex;flex-wrap: wrap;padding: 0 0.26rem 0 0;border-radius: 4px;margin-top: .2rem;}
 .tools-content .filter-box .col-l {display: flex;align-items: center;margin-bottom: 5px;color: #2E2F33;}
 .tools-content .filter-box .col-r {display: flex;margin-bottom: 5px;align-items: center;flex: 1;margin-left: .9rem;}
 .tools-content .filter-box .col-r .input {flex: 1;max-width: 2.35rem;min-width: 1.5rem;}
 .tools-content .filter-box .col-r #tag_2 {margin: 0 5px;}
 
 /*工具权益*/
 .instrument-equity {font-size: 0;flex-shrink: 0;background: rgba(204,204,204,0.8);border-radius: .5rem;padding: 3px 10px 3px 3px;position: relative;}
 .instrument-equity li {display: inline-block;height: 28px;line-height: 28px;border-radius:50px;font-size: 0.14rem;color:#6C757D;padding:0 17px;cursor:pointer;transition:.3s ease;}
 .instrument-equity li.active {color:#fff;}
 .instrument-equity li + li {margin-left: 0.2rem;}
 .instrument-equity .tab-slider {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  background: var(--primary);
  border-radius: .5rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.instrument-equity .tab-button {
  flex: 1;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
 
 /*最新 最热 btn*/
 .order-by {margin-left: 0.37rem;margin-right: 0.3rem;}
 .btn-tools-new,.btn-tools-hot {border:none;height: 0.26rem;border-radius: 4px;cursor:pointer;padding:0 0.2rem;position: relative;transition: all .3s ease;color:#6C757D;background:none;font-size: .14rem;}
 .btn-tools-hot {margin-left: 0.05rem;}
 .layui-input {height: 30px;line-height: 30px;border: 1px solid #D2D2D2 !important;}
 xm-select[size='small']{min-height: 30px !important;line-height: 30px !important;}
 xm-select{border: 1px solid #D2D2D2 !important;}
 .btn-tools-new:before {content:"";display: inline-block;position: absolute;top:5px;left:0;width:0.16rem;height:0.16rem;background:url(/static/img/web/cmd/new.svg) no-repeat;background-size: 100% 100%;}
 .btn-tools-hot:before {content:"";display: inline-block;position: absolute;top:5px;left:0;width:0.16rem;height:0.16rem;background:url(/static/img/web/cmd/hot.svg) no-repeat;background-size: 100% 100%;}
 .btn-tools-new.active:before {content:"";display: inline-block;position: absolute;top:5px;left:0;width:0.16rem;height:0.16rem;background:url(/static/img/web/cmd/new-active.svg) no-repeat;background-size: 100% 100%;}
 .btn-tools-hot.active:before {content:"";display: inline-block;position: absolute;top:5px;left:0;width:0.16rem;height:0.16rem;background:url(/static/img/web/cmd/hot-active.svg) no-repeat;background-size: 100% 100%;}
 .btn-tools-new.active {color:var(--primary);}
 .btn-tools-hot.active {color:var(--primary);}
 
 /*所有云工具展示列表*/
 .tools-all {margin-bottom: 0.2rem;min-height:3rem;width: 100%;display: flex;flex-wrap: wrap;}
 .tools-all > div {transition: all .5s ease;width: 18%;margin: 0.11rem .13rem .1rem .13rem;}
 .tools-all > div:hover {
   margin-top: -1px;
 }
 .tools-all-item {height: 1.12rem;background: #fff;border-radius:6px;box-sizing:border-box;display: flex;padding:0.15rem 0.15rem;overflow:hidden;transition:.3s ease;box-shadow: 0px 3px 6px 1px rgba(153,154,170,0.16);}
 .tools-all-item[data-type="graph"] .img:after {background-color: #fa5c7c;}
 .tools-all-item[data-type="data"] .img:after {background-color: #727cf5;}
 .tools-all-item[data-type="table"] .img:after {background-color: #0acf97;}
 .tools-all-item[data-type="statistic"] .img:after {background-color: #ffbc00;}
 .tools-all-item[data-type="tool"] .img:after {background-color: #1E90FF}
 .tools-all-item[data-type="sequence"] .img:after {background-color: #54c7da;}
 .tools-all-item[data-type="idconv"] .img:after {background-color: #54c7da;}
 .tools-all-item[data-type="tool"] .img:after {background-color: #1E90FF;}
 .tools-all-item .col-l {flex-shrink: 0;text-align: center;}
 .tools-all-item .img {width:0.44rem;height:0.44rem;line-height:0.44rem;overflow:hidden;color:#fff;position: relative;padding: 2px;border-radius: 50%;display: flex;
  align-items: center;
  justify-content: center;}
 .tools-all-item .img img {width:100%;height:100%;border-radius: 50%;}
 .tools-all-item .img .iconfont{position: relative;z-index: 1;font-size: 0.25rem;}
 .tools-all-item .img:after {content:"";position: absolute;width:100%;height:100%;border-radius: 50%;top:0;left:0;}
 .tools-all-item .img .lock {position: absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.4);z-index: 2;display: flex;
  align-items: center;
  justify-content: center;}
 .tools-all-item .img .lock:before {content:"";display: inline-block;background:url(/static/img/web/cmd/imgs0720.png) no-repeat -53px -25px;width:20px;height:25px;}
 .tools-all-item .col-r {position: relative;}
 .tools-all-item .title {font-size:0.16rem;color:#2E2F33;word-break: break-all;max-height:0.46rem;overflow:hidden;margin-bottom: 5px;-webkit-box-orient: vertical;-webkit-line-clamp: 1;display: -webkit-box;}
 .tools-all-item .title-state {font-size:0.12rem;color:#fff;background: burlywood;border-radius: 2px;padding: 0.02rem 0.03rem;vertical-align: text-top;margin-top: 0.08rem;white-space: nowrap;display: inline-block;}
 .tools-all-item .col-r {margin-left: 0.2rem;position: relative;flex:1;}
 .tools-all-item .desc {color:#999AAA;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;height: 0.2rem;overflow:hidden;word-break:break-all;font-size: 0.12rem;}
 .tools-all-item .bot {width:100%;display: flex;align-items: center;justify-content: space-between;margin-top: 0.08rem;}
 .tools-all-item .bot .price {color:#17233D;white-space: nowrap;margin-right: 0.09rem;}
 .tools-all-item .bot .price span {font-size:0.18rem;color:#ED4014;}
 .tools-all-item .bot .price em {font-style: normal;font-size:24px;}
 .tools-all-item .bot .price em i {font-size: 0.14rem;font-style: normal;}
 #tool_page {text-align:center;}
 
 /*专享类型*/
 .instrument-equity-type {font-size:.7em;border-radius:10px;color:#fff;white-space: nowrap;padding:1px 4px;background:#F2F3F8;height: 16px;line-height: 16px;margin-top: 5px;color: #FF8A24;}
 .instrument-equity-type.pay {background:#F2F3F8;color:#ED4014;}
 .instrument-equity-type.vip {background:#F2F3F8;color:#F2A000;}
 .instrument-equity-type.activity {background:#F2F3F8;color:#09B07F;}
 .instrument-equity-type.num {background:#F2F3F8;color:#2680EB;}
 
 /*无工具展示*/
 .empty-tools {background: url(/static/img/web/cmd/empty.png) no-repeat center 0;width:470px;height:308px;margin:0 auto;padding:20px 0;box-sizing: initial;}
 .empty-tools p {color:#999;padding-top: 270px;text-align: center;}
 
 /*页面底部立即咨询层*/
 .contact-bottom-layer {height:4rem;background:url(https://sanger-sc-prod.oss-cn-shanghai.aliyuncs.com/static/img/web/pipeline/bg_1.jpg) no-repeat;text-align:center;box-sizing: border-box;background-size: cover;display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;}
 .contact-bottom-layer h5 {font-size: 0.32rem;font-weight:bold;margin-bottom: 0.2rem;color: #fff;}
 .contact-bottom-layer p {font-size: 0.14rem;margin-bottom: 50px;color: #fff;}
 .contact-bottom-layer a {display: inline-block;color:#fff;background: linear-gradient(239deg, #00CE82, #2298EB, #2297E9 100%);border-radius:5px;height:0.54rem;line-height:0.54rem;width: 2.54rem;text-align: center;}
 .contact-bottom-layer a:hover {color:#fff;}
 
 /*只针对云工具列表中，工具描述tips样式设置*/
 .layui-layer-tips .layui-layer-content {background:#F5F8FF !important;box-shadow:none !important;color:#345D9B !important;}
 .layui-layer-tips i.layui-layer-TipsT {z-index: -1 !important;border-right-color:#d5d8df !important;}
 .layui-layer-tips i.layui-layer-TipsB {z-index: -1 !important;border-right-color:#d5d8df !important;transform: rotate(90deg);top: -16px;}
 
 .tools-side-wrap .icon-wrapper,.my-icon {width: 22px;height: 22px;}
 .tools-side-wrap .icon-wrapper {margin-right: .14rem;display: flex;
  align-items: center;
  justify-content: center;
  color: #6C757D;
}

.align-items-c {align-items: center;}
button:focus {outline: none !important;}
.layui-laypage span {background: none;}