/* CSS Document */

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button{
  line-height: normal;
}
body {
  font-family: '宋体';
  line-height: 1.75;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}
img{
    max-width: 100%
}
  /* 标题样式 */
h2 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
}

h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}
  /* 标签样式 */
.tag{
  margin-bottom: 20px;
}
.tag  span{
  display: inline-block;
  background-color: #92D050;
  color: var(--black);
  border-radius: var(--border-radius);
  padding: 2px 8px;
  margin-bottom: var(--spacing-sm);
}

/* 卡片样式 */


/* 布局工具类 */
.c_gsjs_container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 14px;
}
.c_gsjs_container p{
  line-height: 30px;letter-spacing:normal;
}
.flex {
  display: flex;
}
/* 案例展示区域 - 左右布局 */
.case-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.case-image {
  flex: 1 1 60%;
  min-width: 300px;
}

.case-content {
  flex: 1 1 35%;
  min-width: 250px;
}

.ktsb_shenqingren{
    display: flex;
}
.c_img3con h2{
  margin-top: 20px;
}
/* 响应式设计 */
/* 平板设备 */
@media (min-width: 768px) {
  body {
    padding: var(--spacing-lg);
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
  }
}

/* 桌面设备 */
@media (min-width: 1024px) {
  body {
    padding: var(--spacing-lg) var(--spacing-xl);
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .case-image img {
    width: 415px;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
  }
}

/* 手机设备 */
@media (max-width: 767px) {
  /* 案例展示区域在手机上的样式 */
  .case-showcase {
    flex-direction: column;
  }
  
  .case-image, .case-content {
    flex: 1 1 100%;
  }
  .case-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
  }
}
.rightcontent div>p{
  margin-top: 50px;
}

/*动画效果-start*/
/* 基础动画设置 */
.c_gsjs_container {
  overflow-x: hidden;
}
 
/* 通用动画类 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity 1s ease-out,
    transform 1s ease-out;
}
 
.animate-on-scroll.active  {
  opacity: 1;
  transform: translateY(0);
}
 
/* 标题动画 */
.tag span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  transition: 
    opacity 0.8s ease-out 0.3s,
    transform 0.8s ease-out 0.3s;
}
 
.tag.active  span {
  opacity: 1;
  transform: translateX(0);
}
 
/* 段落动画 */
.c_gsjs_container > p,
.c_gsjs_container > div > p {
  opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 1s ease-out 0.2s,
    transform 1s ease-out 0.2s;
}
 
.c_gsjs_container > p.active, 
.c_gsjs_container > div > p.active  {
  opacity: 1;
  transform: translateY(0);
}
 
/* 图片动画 */
.c_gsjs_container img {
  opacity: 0;
  transform: scale(0.95);
  transition: 
    opacity 1.2s ease-out,
    transform 1.2s ease-out;
}
 
.c_gsjs_container img.active  {
  opacity: 1;
  transform: scale(1);
}
 
/* 案例展示特殊动画 */
.case-showcase > div {
  opacity: 0;
  transition: opacity 1s ease-out;
}
 
.case-showcase > div:nth-child(1) {
  transform: translateX(-50px);
  transition: 
    opacity 1s ease-out 0.2s,
    transform 1s ease-out 0.2s;
}
 
.case-showcase > div:nth-child(2) {
  transform: translateX(50px);
  transition: 
    opacity 1s ease-out 0.4s,
    transform 1s ease-out 0.4s;
}
 
.case-showcase.active  > div {
  opacity: 1;
  transform: translateX(0);
}
 
/* 弹性动画 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
 
.bounce-in {
  animation: bounceIn 1.2s both;
}
 
/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
.fade-in {
  animation: fadeIn 1.5s ease-in-out both;
}

/*动画效果-end*/