@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
body,html{font-size:62.5%;color:#333;font-family:'Microsoft YaHei','PingFang SC','SimHei','Arial','SimSun';background:#f5f5f5}
ul,li,form,p,h1,h2,h3,h4,hr,img,dl,dd,dt,a{ padding:0;margin:0;list-style:none;}
input{font-family:"Microsoft YaHei","PingFang SC";outline:none;border:none;padding:0}
input::-webkit-input-placeholder{color:#727272;}
a{color:#333;cursor:pointer;text-decoration:none;}

img{border:none;}
.font-content{line-height:28px;font-size:14px;color:#666;}
.article-bq{margin-left:20px;font-size:12px;color:#999}
.article-bq li{line-height:26px;list-style-type: disc;}
.font-content img{max-width:800px}
.tags{margin-bottom:2rem;font-size:1.4rem;}
.tags a{padding:0.4rem 1.5rem;background:#e9e8e8;margin-right:0.5rem;margin-top:1rem;border-radius:8px;display:inline-block;color:#999}
.tags a:hover {color:#1ab66e}
.article-nav{ width: 120rem; max-width: 100%; margin: 100px auto 0 auto;}
.article1-wrap{width: 129rem; max-width: 100%; margin: 10px auto 0 auto; display: flex;}
/*artile-right*/
.article-right{background:#fff;padding:20px 20px 20px 20px;border-radius:8px;width:26rem;
      position: fixed;/* 默认固定定位 */
      top: 90px; /* 与body的padding-top一致 */
}
.article-tit h4{font-size:18px;}
.article-tit h1{font-size:2.8rem;font-weight:500;color:#333}
.article-tit ul{overflow: hidden;line-height:24px;margin-top:5px;margin-bottom:10px;font-size:12px}
.article-tit ul li{float:left;color:#999;}
.article-tit ul li a{color:#999;margin:0 5px}
 /* 滚动触发后：右侧改为 sticky，随左侧滚动 */
 .article-right.sticky {
      position: sticky;
      top: 90px;
      right: 0px!important;
      align-self: flex-start; /* 在flex容器中顶部对齐 */
      margin-left:20px;
    }
.article-right2{position:relative;margin-left:2rem;height:100%;}
.down-btn{position:relative;padding-bottom:20px;border-bottom:1px solid #e5e5e5;margin-bottom:20px;}
.down-btn .down-bluebtn{display: block;width:100%;height:48px;background: #1ab66e;color:#fff;line-height: 48px;text-align: center;border-radius:48px;font-size:1.5rem;margin-bottom:20px}
.down-btn .down-bluebtn:hover{background: #019f48;}
.down-btn .down-vipbtn{background:#e0ba93;color:#141414}
.down-btn .down-vipbtn:hover{background:#d1a579;color:#141414}
.vipdown-ico{background:url(../images/ico-vip2.png) no-repeat;display:inline-block;width:18px;height:18px;position: relative;top:4px;margin-right:5px;background-size:100%;}
.down-cions{font-size:1.6rem;display: flex;align-items:baseline;justify-content:left;margin-bottom:10px;}
.down-cions span{font-size:3.6rem;margin:0 10px 0 10px}
.down-cions i{background:url(../images/cions.svg) no-repeat;display:inline-block;width:16px;height:16px;position: relative;top:2px;margin-right:5px;}
.down-btn .sp_tubi{font-size: 1.5rem;color: #fb8105;text-decoration: underline}



.font-inf{margin-top:20px;font-size:14px;color:#a1a1a1;line-height:28px;}
.font-inf span{color:#727272}
.down-btn .copypwd{display:inline; background:none; font-size:14px; margin-left: 9px; color: #1ab66e;}
.down-btn .copypwd:hover{background: none;color:#019f48;text-decoration:underline}
.down-ico{background:url(../images/download.svg) no-repeat;display:inline-block;width:16px;height:16px;position: relative;top:2px;margin-right:5px;}
.phone-down{display:none;}

/* ------------------------------------适配样式--------------------------------------- */

/*820px样式*/
@media (max-width:820px){

.phone-down{height:6rem;width:100%;position:fixed;bottom:0;z-index:999;display:flex;justify-content:center;align-items:center;background:#fff;box-shadow:0px  -5px 30px rgba(0, 0, 0, 0.2)}
.phone-down .down-bluebtn{display: block;padding:1px 65px;height:4rem;background: #1ab66e;color:#fff;line-height:4rem;text-align: center;border-radius:4rem;font-size:1.5rem;margin:0 20px;}
.phone-down .down-bluebtn:hover{background: #019f48;}
.phone-down .down-vipbtn{background:#e0ba93;color:#141414}
.phone-down .down-vipbtn:hover{background:#d1a579;color:#141414}
.phone-down .down-cions2{font-size:1.4rem;display: flex;align-items:center;justify-content:left;margin-bottom:10px;}
.phone-down .down-cions2 span{font-size:3.0rem;margin:0 10px 0 10px}
.phone-down .down-cions2 i{background:url(../images/cions.svg) no-repeat;display:inline-block;width:16px;height:16px;position: relative;top:2px;margin-right:5px;}

}



/*430px样式*/
@media (max-width:430px){
 
    .phone-down{font-size:1.2rem;}
    .phone-down .down-cions2{font-size:1.4rem;margin-bottom:0}
    .phone-down .down-bluebtn{font-size:1.4rem;margin:0 0rem 0 0;padding:5px 65px;line-height:3rem;height:3rem;width: 50%;}
    .phone-down .down-cions2 span{font-size:1.6rem;}
    /* .phone-down .down-vipbtn {margin:0 auto 2rem auto} */
    .article-nav {margin-top: 60px}
        .article-tit ul {
        display: none;
    }
     .article-tit{padding-bottom:1rem}
}

@keyframes grow {
    0% {
      transform: scale(0); /* 动画开始时的缩放比例 */
    }
    100% {
      transform: scale(1); /* 动画结束时的缩放比例，这里是1倍大小 */
    }
  }

  
/*笔记详情页*/
  .note-wrap {max-width: 1280px;background: #fff;display:flex;border-radius:8px;overflow:hidden;box-shadow: 0 6px 20px rgba(0,0,0,0.08);margin:0 auto  }
  /* 左侧轮播（固定640px） */
 .note-wrap .carousel {position: relative; width:640px;overflow: hidden;flex-shrink: 0;user-select: none;-webkit-user-select: none;touch-action: pan-y;max-height:853px;  }
 .note-wrap .carousel-track {display:flex;transition: transform 0.45s cubic-bezier(.22,.9,.32,1);will-change: transform;  }
 .note-wrap .carousel-slide {max-width:640px;flex-shrink: 0;display:flex;align-items:flex-start;justify-content:center;     }
 .carousel-slide img { width:640px;object-fit: cover; display:block;pointer-events: none;user-select: none;    cursor: pointer;}

  /* 箭头：默认隐藏，仅当鼠标悬停在 .carousel 时显示 */
 .note-wrap .carousel .pic-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 44px;height: 44px;border-radius: 50%;background: rgba(0,0,0,0.45);color: #fff;border: none;display: flex; align-items: center;justify-content: center;font-size:30px;cursor: pointer;opacity: 0;transition: opacity 0.22s, background 0.15s;  z-index: 5;-webkit-tap-highlight-color: transparent;  }

  /* 仅在鼠标悬停时显现箭头 */
 .note-wrap .carousel:hover .pic-arrow { opacity: 1;  }

 .note-wrap .carousel .pic-arrow.left { left: 12px; }
 .note-wrap .carousel .pic-arrow.right { right: 12px; }
 .note-wrap .carousel .pic-arrow:disabled {opacity: 0 !important;cursor: not-allowed;  }
.note-wrap .carousel .pic-arrow img {
      width: 20px;
    height: 20px;
}
  /* 序号 */
 .note-wrap .carousel .counter {position: absolute;top: 12px;right: 16px;background: rgba(0,0,0,0.55);color: #fff;padding: 6px 10px;border-radius: 20px;font-size: 14px;z-index: 6;  }

  /* 右侧内容自适应 */
 .note-wrap .content {flex: 1;padding:60px;display:flex;flex-direction:column; box-sizing: border-box;}

.note-wrap .content h1 {    font-size: 24px;
    margin-bottom: 10px;
    line-height: 1.4;}
.note-wrap .content p { color:#444; line-height:1.7;    margin-bottom: 5px;}

.note-wrap .content .note-content{color: #444; line-height: 1.7; font-size: 16px;margin-bottom:2rem;max-height: 320px;overflow-y: auto;   scrollbar-width: thin;scrollbar-color: #888 #f1f1f1;}
.note-downbtn{margin:2rem 0}
.note-wrap .content .note-content::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道颜色 */
}

/* 滚动条滑块 */
.note-wrap .content .note-content::-webkit-scrollbar-thumb {
    background: #888; /* 滑块颜色 */
}

/* 滑块在鼠标悬停时的样式 */
.note-wrap .content .note-content::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块悬停颜色 */
}

.express-box2 {margin-top:2rem;margin-bottom:0;}
.express-box2 a{width:50%;margin:0;background:#e9e8e8;color:#333}
.express-box2 a:hover{color:#019f48;background:#e9e8e8;}
.express-box2 .like{margin-right:2rem;}


  @media (max-width:900px) {
    .note-wrap { width: 100%; max-width: 100%; flex-direction: column; border-radius: 0; }
    .note-wrap .content{padding:20px;}
    .note-wrap .carousel { width: 100%; max-width: 100%; }
    .note-wrap .carousel-slide{max-width: 100%;height:max-content;}
    .carousel-slide, .carousel-slide img {
      width: 100%;
      height: auto !important;
    }   
    .arrow { width:40px; height:40px; }
    /* 在移动端，hover 无效，箭头保持隐藏（避免遮挡） */
    .carousel .arrow { opacity: 0 !important; pointer-events: none; }
    .note-wrap .content .note-content{max-height: none}
    .content .down-btn{display:none;}
    .express-box2 {margin:2rem 0;}
  }  

  /*首页广告位轮播*/
 .ad-slider {
  width: 100%; 
  position: relative;
  overflow: hidden;
}

.d-slider img {
  width: 100%;
  height: auto;
  display: block;
}

.slick-dotted .slick-slider {
margin-bottom:0!important}

    /* 自定义状态条（dots） */
.slick-dots {
  position: absolute!important;
  bottom: 10px!important;
  left: 50%!important;
  transform: translateX(-50%);
  display: flex !important;  
  list-style: none;
  padding: 0;
  margin: 0;
  width:auto!important;
}

/*.slick-dots li {
  max-width: 40px;
  max-height:5px;
  border-radius: 2px!important;
  background: rgba(255,255,255,0.2)!important;
  transition: background 0.3s!important;
}*/

.slick-dots li.slick-active {
  background: #fff!important;
}


  /*首页笔记轮播*/ 
  .carousel-container-idx{position:relative}
  .slider-wrap {
      max-width: 150rem;     
    }

    /* Slick item 样式：保持图片自适应，等比裁剪并居中 */
    .slider-wrap .slick-slide {
      /*padding: 6px; /* slide 之间的间距 */
      box-sizing: border-box;
      outline: none; /* 去掉聚焦时的蓝线（若需要可保留无障碍样式） */
    }

    .slider-wrap .slick-track{
        padding-top:10px;
    }
    .slider-card {
      border-radius: 8px;
      overflow: hidden;     
      height: 220px; /* 默认高度，可按需要调整或用响应式高度 */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin:0 10px;
      margin-bottom: 20px;
      background: #fff;
      padding-bottom: 1.5rem;
      transition: 0.3s;
      -webkit-transition: 0.3s;
    }

    .slider-wrap .slider-card:hover {
    transform: translate(0, -10px);
   }

    .slider-card img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* 保持图片完整显示 */
      display: block;
    }
    .slider-card img:hover {
        opacity: 0.7;
    }

    /* 微调 slick 主题按钮位置 */
    .slick-prev, .slick-next {
      z-index: 3;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(14,20,40,0.08);
    }

    .slick-prev:before, .slick-next:before {
      color: #6c6868;
    }

    .slider-card .work-tit a{color:#333;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-weight:normal;max-width: 210px;display: inline-block;text-decoration: none;margin-top: 1.5rem;}
    .slider-wrap .carousel-button {position: absolute;top: 50%;transform: translateY(-50%);width: 44px; height: 44px;background-color: rgba(0,0,0,0.5);color: white; border: none; cursor: pointer;z-index: 10;border-radius: 50%;font-size: 18px;line-height: 30px;text-align: center;user-select: none;}
    .slider-wrap .carousel-button.prev {left: -50px;}
    .slider-wrap .carousel-button.next {right: -50px;} 

    /* 响应式高度微调（可选） */
    @media (max-width: 768px) {
      .slider-card { height: 260px; }
      .slider-wrap .carousel-button.prev {left: 0px;}
      .slider-wrap .carousel-button.next {right: 0px;} 
    }
    @media (max-width: 420px) {
      .slider-card { height: 200px; }
      .slider-wrap .carousel-button.prev {left: 0px;}
      .slider-wrap .carousel-button.next {right: 0px;}
      .slider-card .work-tit a {max-width: 140px;}
    }