.about-kv {
  padding: 160px 0 230px;
  background: linear-gradient(to right, #505f69, #505f6999);
}

.about-kv::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../img/about-kv.png) no-repeat left center;
  background-blend-mode: overlay;
  background-size: 60%;
  z-index: 0;
}

.about-kv .Wrapper {
  position: relative;
  z-index: 1;
}

.about-kv .hp-title1 {
  color: #fff;
}

.about-fv {
  width: 95%;
  margin: 30px 0 100px;
}

.about-kv-content {
  position: relative;
}

.about-kv-content-div {
  position: relative;
  background: #ffffff14;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 60px));
  width: 75%;
  padding: 240px 60px 100px;
  margin: 0 0 0 auto;
  z-index: 1;
}

.about-kv-content-div p {
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

.about-kv-content-div-title {
  font-size: 1.5rem;
  background: linear-gradient(to right, #505f6970 0%, #505f6900 100%);
  padding: 40px 50px;
  position: absolute;
  left: 18%;
  top: 70px;
  color: #fff;
  z-index: 2;
}

.about-kv-btn {
  position: absolute;
  right: 50px;
  width: 260px;
  height: 260px;
  bottom: -160px;
  background: linear-gradient(to bottom, #23475d 0%, #23475d00 100%);
  border-radius: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-kv-btn p {
  text-align: center;
  color: #fff;
	    margin-right: 10px;
}

.about-kv-btn span {
  font-size: 0.7rem;
  display: block;
}

.about-content {
  position: relative;
  z-index: 1;
  background: #faf7f7;
  padding: 80px 0;
}

.about-sec2 {
  width: calc(100% - 60px);
  max-width: 1020px;
  margin: 0 auto;
  position: relative;
  padding: 0 0 160px;
}

.about-sec2-flex {
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 50px));
  display: flex;
}

.about-sec2-left {
  width: 50%;
  padding: 60px 80px;
	    position: relative;
    overflow: hidden;
}

.about-sec2-right {
  width: 50%;
  background: url(../../img/about-img1.png) no-repeat center;
  background-size: cover;
}

.about-sec2-btn {
  background: linear-gradient(to bottom, #23475d 0%, #23475d70 100%);
  padding: 30px 50px;
  display: flex;
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 100px;
  align-items: center;
  gap: 30px;
}

.about-sec2-btn p,
.about-sec3-btn p {
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

.about-sec2-text,
.about-sec3-text {
  font-family: 'Noto Sans JP', sans-serif;
}

.about-sec3 {
  width: calc(100% - 60px);
  max-width: 1020px;
  margin: 0 auto;
  position: relative;
  padding: 0 0 60px;
}

.about-sec3-flex {
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);
  display: flex;
}

.about-sec3-left {
  width: 50%;
  padding: 60px 80px;
}

.about-sec3-right {
  width: 50%;
  background: url(../../img/about-img2.png) no-repeat center;
  background-size: cover;
}

.about-sec3-btn {
  background: linear-gradient(to bottom, #23475d 0%, #23475d70 100%);
  padding: 30px 50px;
  display: flex;
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 0;
  align-items: center;
  gap: 30px;
}

.about-sec3-btn p {
  color: #fff;
}

.top-sec2-btn-arrow {
	    position: relative;
    color: #fff;
}

.scroll-arrow-div{
	transform:rotate(90deg);
	position:relative;
}

.scroll-arrow {
  position: absolute;
  top: 100%;
  left: 51%;
  transform: translateX(-50%);
  animation: pulse 1.5s infinite ease-in-out;
	
}

/* 确保动画元素可以正确应用变换 */
.about-kv-content-div,
.about-kv-content-div-title,
.about-kv-btn {
    will-change: transform, opacity;
}

/* 标题需要设置为inline-block才能应用clip-path */
.about-kv-content-div-title {
    display: inline-block;
}

/* 按钮初始状态 */
.about-kv-btn {
    transform: scale(0.8);
    transform-origin: center;
}
.about-kv-content > * {
    visibility: hidden;
  }

@keyframes pulse {
  0% { opacity: 0.5; transform: translateX(0) translateY(-50%); }
  50% { opacity: 1; transform: translateX(10px) translateY(-50%); }
  100% { opacity: 0.5; transform: translateX(0) translateY(-50%); }
}


@media screen and (max-width: 768px) {
  .about-fv {
    width: 100%;
    margin: 30px 0 60px;
  }

  .about-sec2-flex,
  .about-sec3-flex {
    flex-direction: column;
  }

  .about-sec2-left,
  .about-sec3-left {
    width: 100%;
    padding: 60px 80px;
    order: 1;
  }

  .about-sec2-right,
  .about-sec3-right {
    width: 100%;
    height: 300px;
    order: 2;
  }
}

@media screen and (max-width: 660px) {
  .about-kv {
    padding: 100px 0 200px;
  }

  .about-kv .hp-title1 {
    font-size: 1.6rem;
  }

  .about-fv {
    margin: 20px 0 30px;
  }

  .about-kv-content-div {
    position: relative;
    background: #ffffff14;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 40px));
    width: 100%;
    padding: 140px 20px 60px;
  }

  .about-kv-content-div-title {
    width: 100%;
    font-size: 1.4rem;
    background: linear-gradient(to right, #505f6999 0%, #505f6900 100%);
    padding: 20px 0 20px 20px;
    position: absolute;
    line-height: 1.5;
    left: -20px;
    top: 21px;
  }

  .about-kv-btn {
    position: absolute;
    right: 0px;
    width: 200px;
    height: 200px;
    bottom: -160px;
    background: linear-gradient(to bottom, #23475ddb 0%, #23475d00 100%);
  }

  .about-content {
    padding: 40px 0;
  }

  .about-sec2 {
    width: calc(100% - 30px);
    padding: 0 0 130px;
  }

  .about-sec2-flex,
  .about-sec3-flex {
    clip-path: border-box;
    background: none;
  }

  .about-sec2-left,
  .about-sec3-left {
    padding: 50px 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 50px));
    background: #fff;
  }

  .about-sec2-right,
  .about-sec3-right {
    height: 500px;
  }

  .about-sec2-btn,
  .about-sec3-btn {
    width: 90%;
    padding: 40px 20px;
    right: 5%;
    gap: 10px;
    justify-content: space-between;
    left: 5%;
  }

  .about-sec2-btn {
    bottom: 60px;
  }
	
	.about-sec2-btn .top-sec2-btn-arrow,
	.about-sec3-btn .top-sec2-btn-arrow{
		right:20%;
	}

  .about-sec3-btn {
    bottom: -10px;
  }
}

@media screen and (max-width: 330px) {

  .about-sec2-btn,
  .about-sec3-btn {
    width: 96%;
    padding: 30px 20px;
    right: 2%;
    gap: 5px;
    justify-content: space-between;
    left: 2%;
  }
}