/* Here is your custom css styles. */


.progress-bar {background: #00faff;}

#indexCard /*.container,.container, 是推荐文章，不显示*/
.bg-cover:before, .bg-cover:after,
.logo-name, .post-charts, 
.cover-btns , 
.container .cover-social-link {display: none;}

.social-link {text-align: right;}
.top-scroll .btn-floating {transform: scale(0.6);}

#floating-toc-btn {
    bottom: 55px!important;
    transform: scale(0.6);
}
#artDetail {
	margin-top: 60px;

}
#articles {margin-bottom: 65px;}	
footer .copy-right,
footer a,
nav a,
nav ul a {
    color: #222222;
	text-align: left;
}
#floating-toc-btn .btn-floating {
    background: linear-gradient(to bottom right, #4cbf30 0%, #0f9d58 100%) !important;
}
.bg-color,
header .nav-transparent {
    background-color: #ffffff80 !important;
  backdrop-filter: blur(10px);
  background-image:none;
  padding-bottom: 10px;
}
header .side-nav .mobile-head .logo-desc {
    color: #696969;
}
.sidenav {height: 100Vh;}
.sidenav-overlay {backdrop-filter: blur(5px);background-color: rgb(255 255 255 / 35%);}
.sidenav li>a>i {
    margin: 0;
}
.index-card .container .card {background-color: #ffffff00;}
#category-cloud .card,
#tags .card {margin-top: 100px;}
.card {
box-shadow: none !important;
margin-top: 60px;
}
.recommend .row .col {
    padding: 0 0.75em;
}

.index-card .card .card-content {
    padding: 0px;
}
.recommend {
    padding: 0;
}

  .product-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	max-width: 1000px;
	
    /*gap: 20px;*/
    justify-items: center;
	width: 100%;margin: 0 auto;
	
  }
  .product {
    /*border: 1px solid #ccc;*/
    /*border-radius: 5px;*/

    width: 100%;
    box-sizing: border-box;
	background-color: #fff;
  }
  .product img {
    max-width: 100%;
    height: auto;
	/*border-radius: 8px;*/
  }
.product:hover .card-image .title  {
	/*opacity: 0.8;*/
	color: #34495e;
	background-color: #fff;
}

.product .card-image .info-desc {
  position: absolute; /* 绝对定位，相对于父元素定位 */
  padding:15px;
  color: #fff;
  background-color: #90a0b0;
  top: 50%; /* 顶部距离父元素上边框的距离为 50% */
  left: 50%; /* 左边距离父元素左边框的距离为 50% */
  letter-spacing: 0.1rem;
  transform: translate(-50%, -50%); /* 将元素的中心点移动到父元素的中心点 */
  border-radius: 10px;
  display: none; /* 默认隐藏 */
}

.product .card-image:hover .info-desc {
    display: block; /* 鼠标经过时显示 */
}

.product .card-image .title {
  position: absolute;
  /*left: 10%;
  top: 40%;
  transform: translate(-50%, -50%);line-height: 1.8rem;*/
  font-size: 1rem;
  padding:0 10px;
  margin: 0px;
  letter-spacing: 0.5rem;/*字体间距*/
  color: #ffffff50;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: #34495e50;
  border-radius: 0 0 10px 0;
  /*display: none; /* 默认隐藏 */
}

.product .card-image:hover .title {
  display: block; /* 鼠标悬停时显示 */
}

     
  .card-padding{padding: 15px;}
  
.container {width: 90%!important; max-width: 100%!important;}


/*.my-projects .info .info-desc {color: #34495e;}*/


.homeone1{
	padding: 60px 0;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	}
.homeone2{
	width: 90%;
	margin: 0 auto;
	}
.homeone1 h1{margin-top: 0;}
.recommend .row {margin: 20px 0 100px 0;}
.homeone1 p {margin: 30px 0;}

.my-gallery {max-width: 90%;}

.nav-menu li .sub-nav li {
	width: 100%;
	height:auto;
	padding: 2px 10px;
}
.post-body * {
    visibility: hidden; /* 初始状态为隐藏 */
    opacity: 0; /* 设置透明度为0，使内容不可见但仍占据空间 */
    transition: opacity 0.3s; /* 添加过渡效果，使显示和隐藏平滑 */
}

.post-body:hover * {
    visibility: visible; /* 鼠标经过时显示 */
    opacity: 1; /* 显示内容 */
}
.post-body:hover {
	background-color: #ffffff80 !important;
	height: 100%;
	border-radius: 10px;
}
header .side-nav .mobile-head img {width: 80%;}
.circle {border-radius: 0%;}

.dplayer-video{box-shadow:none!important;border-radius: 10px;}
article .article-tags .chip{background-color: #34495e !important;}
.chip .tag-length {font-size: 1rem;}

.aos-animate .center-align > img {border-radius: 10px;}

@media screen and (max-width: 767px) {
	.page-footer .center-align .col{display: flex;
justify-content: center;}
.homeone1 .homeone2 .product .card-image {height: 200px!important;}
}
#floating-toc-btn, 
.top-scroll {right: 0px!important;}
.text-center {text-align: center;}