.about {
}
.about .banner {
  width: 100%;
  height: 600px;
  background: rgba(27, 27, 27, 0.9) center no-repeat;
  background-image: url("../img/about/bg.png");
  background-size: cover;
  position: relative;
}
.about .banner .card {
  width: 74.8%;
  position: absolute;
  left: 12.6%;
  top: 520px;
  background: rgba(27, 27, 27, 0.84);
  border-radius: 0px 0px 0px 0px;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start; */
  padding: 80px;
  backdrop-filter: blur(5.5px);
}
.about .banner .card > div {
  font-family: "PingFangSC-Light";
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  letter-spacing: 1px;
  text-align: center;
  padding-top: 25px;
}
.about .banner .card > div:first-of-type {
  padding-top: 0px;
}

.about .philosophy .en,
.about .values .en,
.about .advantages .en {
  color: rgba(197, 168, 111, 0.8) !important;
}
.about .philosophy .cn,
.about .values .cn,
.about .advantages .cn {
  color: #c5a86f !important;
  width: 100%;
}
.about .philosophy .cn .line,
.about .values .cn .line,
.about .advantages .cn .line {
  width: 100%;
  height: 1px;
  background: #c5a86f;
  border-radius: 0px 0px 0px 0px;
}
.about .philosophy .cn > img,
.about .values .cn > img,
.about .advantages .cn > img {
  margin: 0 20px;
}
.about .philosophy .cn > div:nth-child(3),
.about .values .cn > div:nth-child(3),
.about .advantages .cn > div:nth-child(3) {
  white-space: nowrap;
}
/* .about .banner .card > img {
  width: 206px;
  height: 60px;
  position: absolute;
  bottom: 44px;
  right: 80px;
} */

.about .philosophy {
  background: rgba(27, 27, 27, 0.9) center no-repeat;
  background-image: url("../img/about/bg1.png");
  background-size: cover;
  height: 889px;
  width: 100%;
  padding: 208px 12.6% 102px 12.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.about .philosophy > div {
  font-family: "PingFangSC-Light";
  font-size: 18px;
  color: #ffffff;
  line-height: 18px;
  padding-top: 25px;
}
.about .philosophy > div:nth-child(3) {
  display: flex;
  align-items: center;
  padding: 25px 0 5px 0;
}
.about .philosophy > div:nth-child(3) > div {
  font-family: "PingFangSC-Medium";
  font-size: 20px;
  color: #ffffff;
  line-height: 20px;
  letter-spacing: 1px;
  padding: 0 6px;
}
.about .philosophy > div:nth-child(3) > img {
  height: 14px;
  width: auto;
  object-fit: contain;
}

.about .lnsights {
  position: relative;
  width: 100%;
  height: 450px;
  padding: 0 12.6%;
  /* margin-top: -102px; */
  background: #272727;
  display: flex;
  justify-content: end;
}
.about .lnsights > .left .en {
  color: rgba(39, 39, 39, 0.8) !important;
}
.about .lnsights > .left .cn {
  color: #272727 !important;
}
.about .lnsights > .left {
  width: 37.76vw;
  height: auto;
  padding: 8.6vh;
  background: #c1a56f;
  position: absolute;
  z-index: 3;
  top: -20px;
  left: 12.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about .lnsights > .left > div:nth-child(1) {
  padding-top: 0;
}
.about .lnsights > .left > div {
  font-family: "PingFangSC-Light";
  font-size: 18px;
  color: rgba(39, 39, 39, 0.8);
  line-height: 22px;
  letter-spacing: 1px;
  text-align: left;
}
.about .lnsights > .left > div:nth-child(3) {
  width: 100%;
  padding-top: 25px;
}
.about .lnsights > .left > div:nth-child(4) {
  width: 100%;
  padding-top: 20px;
}
.about .lnsights > .left > img {
}
.about .lnsights > img {
  width: 57.29%;
  height: 552px;
  object-fit: cover;
  position: relative;
  z-index: 2;
  margin-top: -102px;
}

.about .values {
  width: 100%;
  /* height: 119.35vh; */
  background: #272727;
  /* background: #272727 center no-repeat;
  background-image: url("../img/about/bg2.png");
  background-size: cover; */
  padding: 17.23vh 12.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.about .values > img {
  width: 100%;
  height: 119.35vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.about .values > div:nth-child(3) {
  font-family: "PingFangSC-Light";
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 18px;
  letter-spacing: 1px;
  text-align: left;
  padding: 25px 0 60px 0;
}
.about .values > .imgbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.about .values > .imgbox > .img {
  width: 18.89%;
  height: 353px;
  padding: 60px 0;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 111, 0.8);
}
.about .values > .imgbox > .img:nth-child(1) {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img1.png");
  background-size: cover;
}
.about .values > .imgbox > .img:nth-child(2) {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img2.png");
  background-size: cover;
}
.about .values > .imgbox > .img:nth-child(3) {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img3.png");
  background-size: cover;
}
.about .values > .imgbox > .img:nth-child(4) {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img4.png");
  background-size: cover;
}
.about .values > .imgbox > .img:nth-child(5) {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img5.png");
  background-size: cover;
}
.about .values > .imgbox .text {
  position: relative;
  z-index: 3;
}
.about .values > .imgbox .text > div {
  font-family: "PingFangSC-Light";
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 18px;
  text-align: center;
  padding-top: 15px;
}
.about .values > .imgbox .text > div:nth-child(1) {
  font-family: "PingFangSC-Medium";
  font-size: 20px;
  color: #ffffff;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: left;
  padding-bottom: 15px;
  padding-top: 0px;
}
.about .values > .imgbox > .img .C5A86F {
  width: 100%;
  height: 394px;
  background: rgba(197, 168, 111, 0.8);
  position: absolute;
  top: 394px;
  left: 0;
  z-index: 2;
  transition: all 0.5s;
}
.about .values .img:hover .text > div {
  color: rgba(27, 27, 27, 0.8);
  transition: all 0.5s;
}
.about .values .img:hover .text > div:nth-child(1) {
  color: #1b1b1b;
}
.about .values .img:hover .C5A86F {
  top: 0px;
  left: 0;
  transition: all 0.5s;
}

.about .advantages {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12.6% 80px 12.6%;
  background: #272727;
}
.about .advantages > div:nth-child(3) {
  width: 54.03%;
  font-family: "PingFangSC-Light";
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 22px;
  letter-spacing: 1px;
  text-align: center;
  padding: 25px 0 60px 0;
}
.about .advantages .box {
  display: flex;
}
.about .advantages .box > * {
  width: 50%;
  height: 375px;
}
.about .advantages .box > .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.about .advantages .boxbody > div:nth-child(1) > .left {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img6.png");
  background-size: cover;
}
.about .advantages .boxbody > div:nth-child(2) > .left {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img7.png");
  background-size: cover;
}
.about .advantages .boxbody > div:nth-child(3) > .left {
  background: #272727 center no-repeat;
  background-image: url("../img/about/img8.png");
  background-size: cover;
}
.about .advantages .box > .left > div:nth-child(1),
.about .advantages .box > .left > div:nth-child(3) {
  width: 255px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 50%,
    rgba(255, 255, 255, 0) 100%
  );

  border-radius: 0px 0px 0px 0px;
}
.about .advantages .box > .left.on > div:nth-child(1),
.about .advantages .box > .left.on > div:nth-child(3) {
  background: linear-gradient(
    90deg,
    rgba(197, 168, 111, 0) 0%,
    #c5a86f 50%,
    rgba(197, 168, 111, 0) 100%
  );
  transition: all 0.5s;
}
.about .advantages .box > .left > div:nth-child(2) {
  font-family: "PingFangSC-Medium";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  letter-spacing: 1px;
  padding: 15px 0;
}
.about .advantages .box > .left.on > div:nth-child(2) {
  color: rgba(197, 168, 111, 0.8);
  transition: all 0.5s;
}
.about .advantages .box > .left > div:nth-child(4) {
  font-family: "PingFangSC-Light";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 24px;
  letter-spacing: 1px;
  text-align: center;
  padding-top: 30px;
}
.about .advantages .box > .left.on > div:nth-child(4) {
  color: rgba(197, 168, 111, 0.7);
  transition: all 0.5s;
}
.about .advantages .box > .right {
  background: #1b1b1b;
  padding: 80px;
  display: flex;
  align-items: center;
  font-family: "PingFangSC-Regular";
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 25px;
  letter-spacing: 1px;
  text-align: left;
}
.about .advantages .box > .right.on {
  background: #c5a86f;
  color: #1b1b1b;
  transition: all 0.5s;
}