/* kv */
#kv {
  width: 100%;
}

#kv .swiper-slide {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#kv .swiper-slide img {
  width: 100%;
  min-width: 1920px;
  display: block;
}

@media (max-width:480px) {
  #kv .swiper-slide img {
    min-width: unset;
    object-fit: cover;
    height: 100vh;
  }
}



@media (max-width:480px) {
  #about_sticky{
    display: none;
  }
}

.white_bg{
  background-color: #ffffff;
}

#about {
  padding: 0 56px;
}
#about .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 70px;
}

#about .left {
  width: calc((100% - 70px - 112px) / 5 * 2);
  padding: 0px 5%;
}

#about .left img {
  width: 100%;
  max-width: 515px;
}


#about_sticky{
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  left: 0px;
  top:100px;
  padding: 0 56px;
  z-index: -1;
}

#about_sticky .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 70px;
}

#about_sticky .left {
  width: calc((100% - 70px - 112px) / 5 * 2);
}

#about_sticky .left img {
  width: 100%;
  max-width: 515px;
}
#about_sticky .right {
  width: calc((100% - 70px - 112px) / 5 * 3);
  height: 1px;
}

/* #about_sticky{
  width: calc((100% - 70px - 112px) / 5 * 2);
  position: fixed;
  left: calc((100% - 1440px) / 2);
  top:100px;
  z-index: -1;
  text-align: left;
}

#about_sticky img{
  width: 600px;
} */

@media (max-width:1400px) {

}

.pc_h{
  display: block;
}
.mb_h{
  display: none;
}


@media (max-width:480px) {
  .pc_h{
    display: none;
  }
  .mb_h{
    display: block;
  }
}

#about .right {
  width: calc((100% - 70px - 112px) / 5 * 3);
}

#about .right .title {
  font-weight: normal;
  font-size: 32px;
  line-height: 125%;
  color: #000000;
  margin-bottom: 20px;
}

#about .right .des {
  font-weight: normal;
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0.1em;
  color: #000000;
  margin-bottom: 20px;
}

#about .right .text {
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0.1em;
  color: #363636;
  margin-bottom: 20px;
}

#about .right a img {
  display: block;
  width: 150px;
}

@media (max-width:1200px) {
  #about .box {
    width: 100%;
    justify-content: center;
  }
  #about .left {
    width: 515px;
  }
  #about .right {
    width: 720px;
  }
}

@media (max-width:480px) {
  #about {
    padding: 0 10px;
  }
}

/* servers */

#servers {
  background-color: #F5F5F5;
}

#servers .title {
  font-weight: normal;
  font-size: 32px;
  line-height: 125%;
  text-align: center;
  color: #000000;
  margin-bottom: 40px;
}

#servers .cards {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}

#servers .cards .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 144px;
}

#servers .cards .card img {
  width: 120px;
}

#servers .cards .card .text {
  font-weight: normal;
  font-size: 18px;
  line-height: 160%;
  text-align: center;
  letter-spacing: 0.1em;
}

@media (max-width:955px) {
  #servers .cards .card:nth-child(3) {
    width: 100%;
  }
}

/* company */
#company .box {
  max-width: 1257px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#company .box .card {
  width: calc(50% - 8px);
  position: relative;
  overflow: hidden;
}

.card_cover{
  position: absolute;
  width: 100%;
  height: 100%;
  top:100%;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  -moz-transition: ease-in-out 0.3s;
	-o-transition: ease-in-out 0.3s;
	-webkit-transition: ease-in-out 0.3s;
	transition: ease-in-out 0.3s;
}
.card_cover span{
  position: relative;
  z-index: 1;
}

.card_cover:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0px;
  left: 0px;
  background-color: #000;
  opacity: .7;
  z-index: 0;
}

#company .box .card:hover .card_cover{
  top:0%;
}

#company .box .long img {
  width: 100%;
  /* 設定寬度自動填滿 */
  height: auto;
  /* 保持比例縮放 */
  aspect-ratio: 620 / 302;
  /* 長方形比例 */
  object-fit: cover;
  /* 確保圖片完整顯示 */
  display: block;
}

#company .box .square {
  display: flex;
  gap: 16px;
  width: calc(((50% - 8px) / 2) - 8px) ;
}

#company .box .square a {
  /* width: calc(50% - 8px); */
  width: 100%;
  display: block;
}

#company .box .square img {
  width: 100%;
  height: 100%;
  /* 設定寬度自動填滿 */
  height: auto;
  /* 保持比例縮放 */
  aspect-ratio: 1 / 1;
  /* 正方形比例 */
  object-fit: cover;
  /* 確保圖片完整顯示 */
  display: block;
}

@media (max-width:480px) {
  #company .box .card {
    width: 100%;
  }
}

/* swiper */
.swiper-pagination-bullet-active {
  background-color: #d9d9d9;
  width: 10px;
  height: 10px;
}

.swiper-button-next {
  right: 50px;
}

.swiper-button-prev {
  left: 50px;
}

.swiper-button-next img,
.swiper-button-prev img {
  width: 40px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: unset;
}

@media (max-width:480px) {

  .swiper-button-next,
  .swiper-button-prev {
    top: unset;
    transform: translateY(0%);
    bottom: 10px;
  }

  .swiper-button-next {
    right: 20px;
  }

  .swiper-button-prev {
    left: 20px;
  }

}