@font-face {
    font-family: InterRegular;
    src: url(/build/fonts/Inter_18pt-Regular.37dcabff.ttf);
}

@font-face {
    font-family: InterMedium;
    src: url(/build/fonts/Inter_18pt-Medium.8540f35b.ttf);
}


@font-face {
    font-family: InterBold;
    src: url(/build/fonts/Inter_18pt-Bold.7ef6f6d6.ttf);
}

@font-face {
    font-family: InterSemiBold;
    src: url(/build/fonts/Inter_18pt-SemiBold.e5532d99.ttf);
}

@font-face {
    font-family: InterLight;
    src: url(/build/fonts/Inter_18pt-Light.dfaec8b8.ttf);
}

@font-face {
    font-family: RubikBold;
    src: url(/build/fonts/Rubik-Bold.627d0e53.ttf);
}

@font-face {
    font-family: RubikMediun;
    src: url(/build/fonts/Rubik-Medium.e785acbf.ttf);
}

@font-face {
    font-family: RubikSemiBold;
    src: url(/build/fonts/Rubik-SemiBold.742cf1e6.ttf);
}

@font-face {
    font-family: RubikLight;
    src: url(/build/fonts/Rubik-Light.86699cab.ttf);
}

@font-face {
    font-family: RubikRegular;
    src: url(/build/fonts/Rubik-Regular.46df2880.ttf);
}




body{
  margin: 0px;
  padding: 0px;
  background-color: #F1F1F1;
    cursor: default;

  overflow-x: hidden;
  color: var(--c-text);
}

.mainContainer{
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mainArea{
    height: 90%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* 背景蓝色圆形 1（位置不变，只把 absolute 改成 fixed） */
body::before{
  content:"";
  position: fixed;            /* ← 改为 fixed */
  top: 46%;
  right: 10%;
  transform: translateY(-50%);
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(7, 48, 167, 0.7) 0%,
    rgba(58, 123, 213, 0) 80%
  );
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

/* 背景蓝色圆形 2（位置不变，只把 absolute 改成 fixed） */
body::after{
  content:"";
  position: fixed;            /* ← 改为 fixed */
  top: 80%;
  right: 76%;
  transform: translateY(-50%);
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(7, 48, 167, 0.7) 0%,
    rgba(58, 123, 213, 0) 80%
  );
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}




.TitleArea{
    border-bottom: 1px solid #9b9b9b !important;
    padding-bottom: 16px;
    width: 66vw;
    height: 100px;
    font-family: InterSemiBold;
    font-size: 34px;
    align-content:end;
    margin-top: 4vh;
    @media (max-width: 1190px) {
      font-size: 32px;

    }

    @media (max-width: 750px) {
      width: 90vw;
      font-size: 28px;
      margin-top: 2vh;
      height: 60px;


    }
}

.Instruction{
    font-family: InterRegular;
    font-size: 16px;
    display: flex;
    width: 66vw;
    color:#757575;
    margin-top: 10px;
    @media (max-width: 750px) {
      width: 90vw;


    }
}

/* 固定宽度，少于宽屏改为纵列式排布 */
.DetailArea{
    margin-top: 24px;
    width: 1320px;
    height: max-content;
    display: flex;
    justify-content: space-between;    
}

.Type{
    font-size: 22px;
    font-family: Inter;
}

.ContentArea {
    display: grid;
    /* 全屏时固定 3 列 */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  /* 小于 1574px 时，ContentArea 从 3 列变 2 列 */
@media (max-width: 1574px) {
    .ContentArea {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* 小于 1024px 时，再变成 1 列（可选，保持你现有的逻辑） */
  @media (max-width: 1164px) {
    .ContentArea {
      grid-template-columns: 1fr;
    }
  }

  

.ContentUnit {
    display: flex;
    filter: drop-shadow(0px 3px 4px rgba(211, 211, 214, 0.397));
    border-radius: 5px;
    overflow: hidden;
    /* 删掉 width/height，改用最小高度保证内容不压扁 */
    height: 90px;
    width: 420px;

      /* 毛玻璃 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.629);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* 可选：初始阴影让浮起效果更明显 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

    /* 最小移动端下，缩小单元 */
    @media (max-width: 750px) {
    height: 80px;
    width: 90vw;
    }

  }

.ContentUnit:hover{
    transform: translateY(-1px) scale(1.02);
    
    filter: drop-shadow(0px 3px 4px rgba(192, 192, 196, 0.397));

}

  .imageUnit {
    flex: 0 0 30%;
    background-color: #ffffff;
  }

  .ContentInfo{
    font-family:InterRegular;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding-left: 20px;
    padding-right:20px;
  }
  .imageUnit img {
    /* fill its container */
    width: 100%;
    height: 100%;
    object-fit: cover;       /* crop/fill behavior */
    object-position: center 80%;  /* move the “focus” down to 60% */
  }

  .TypeTitle{
    font-family: InterSemiBold;
    margin-top: 30px;
  }

  
.largeSloganSlideIn{
    opacity: 0;
    transform: translateY(16px);
    transition: ease-out 500ms;

}

.largeSloganSlideIn.active{
    opacity: 1;
    transform: translateY(0);
    transition: ease-out 500ms;
  
}


*{
    border: none !important;
}