/*our-story部分样式；*/
.page-container {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #003300;
}
/* 导航链接--面包屑 */
.link-tittle-box {
  width: 100%;
  letter-spacing: 2px;
}
.link-tittle-box p {
  margin-top: 1em;
  padding: 1em 2em;
  font-size: 0.9em;
}
.link-tittle-box a {
  margin-right: 1em;
  opacity: 0.8;
  color: #003300;
  text-decoration: none;
}
.link-tittle-box span {
  margin-right: 1em;
}
/*  --introduction左侧部分开始 */
.introduction-box {
  margin-top: 1em;
  color: #fff;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
.profile-box {
  width: calc(100% / 2);
  display: flex;
  flex-flow: row wrap;
  background: #607574;
}
.ourstory-title {
  width: 100%;
  line-height: 3em;
  text-align: center;
  letter-spacing: 2px;
  font-family: Arial, Helvetica, sans-serif;
}
.para {
  width: 100%;
  padding: 0 4em;
  margin: 0 auto;
  line-height: 1.6em;
  text-align: center;
  letter-spacing: 1px;
  font-weight: normal;
  font-size: 1.1em;
}
.link-p {
  margin: 1.5em auto 2.5em auto;
  padding: 0 5em;
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
}
.link-p a {
  line-height: 1.6em;
  padding: 0.1em 0;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
  border-bottom: 2px solid #fff;
  transition: bord-color 0.3s ease-in;
}
.link-p a:hover {
  border-color: #DAB88B;
}
/*  ----introduction右侧部分开始 */
.profile-img {
  width: calc(100% / 2);
  background: url(/static/image/xiamen-one.jpg) no-repeat 0 0/100% 100%;
}
/*  --core部分开始 */
.core-box {
  margin-top: 2em;
  position: relative;
}
.core {
  width: 100%;
  height: 50vh;
  display: flex;
  flex-flow: row wrap;
}
.left-bg {
  width: calc(100% / 2);
  background: url(/static/image/xiamen-four.jpg) no-repeat 0 0/100% 100%;
}
.right-bg {
  width: calc(100% / 2);
  background: url(/static/image/xiamen-five.webp) no-repeat 0 0/100% 100%;
}
.position-bg {
  width: 50%;
  height: 70%;
  background: #607574;
  color: #fff;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.position-bg h1 {
  line-height: 3em;
}
.position-bg .para {
  font-size: 1em;
  margin-top: 0;
  padding: 0 1.5em;
}
.position-bg p:last-child {
  margin: 0 auto 2em auto;
  line-height: 1.5em;
  letter-spacing: 2px;
  border-bottom: 2px solid #fff;
}
.position-bg p:last-child a {
  padding: 0.2em 0;
  color: #fff;
}
.position-bg p:last-child:hover {
  border-color: #DAB88B;
}
/*  --vision部分开始 */
.vision-box {
  margin-top: 2em;
  position: relative;
}
.vision {
  width: 100%;
  height: 50vh;
  background: url(/static/image/vision-one.jpg) no-repeat 0 0/100% 100%;
}
.vision-box .position-bg {
  width: 50%;
  height: 70%;
}
/*  --click-page部分开始 */
.click-page-box {
  width: 100%;
  margin: 2em auto;
}
.click-page {
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: row wrap;
}
.click-page button {
  font-size: 1.5em;
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-100%);
  border: none;
  cursor: pointer;
}
.button-left {
  left: 2em;
}
.button-right {
  right: 2em;
}
.line-container {
  width: 20em;
  height: 0.5em;
  margin: 2em auto;
  display: flex;
  gap: 1em;
}
.line-box {
  display: block;
  width: calc((100% - 2em) / 3);
  height: 0.2em;
  background: #003300;
  cursor: pointer;
}
.line-box.active {
  background: #DAB88B;
}
.bg-class {
  width: 100%;
  color: #fff;
  display: flex;
  flex-flow: row wrap;
  display: none;
  user-select: none;
  -webkit-user-drag: none;
}
.bg-class.active {
  display: flex!important;
}
.bg-color-left {
  width: calc(100% / 2);
}
.bg-color-right {
  width: calc(100% / 2);
  padding-top: 4em;
  background: #607574;
  display: flex;
  flex-flow: row wrap;
  gap: 0;
  align-items: center;
}
.bg-color-right .little-title {
  width: 60%;
  margin: 2em auto 0 auto;
  text-align: center;
  font-weight: normal;
  font-size: 0.9em;
  letter-spacing: 2px;
}
.bg-color-right h1 {
  text-align: center;
  letter-spacing: 3px;
  position: relative;
}
.bg-color-right .para {
  margin: 0 auto 6em auto;
}
.bg-color-right .line {
  width: 2em;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 75%;
}
.first {
  background: url(/static/image/suit-one.png) no-repeat 0 0/100% 100%;
}
.second {
  background: url(/static/image/coats-one-man.jpg) no-repeat 0 0/100% 100%;
}
.third {
  background: url(/static/image/outdoor-windbreaker-two.jpg) no-repeat 0 0/100% 100%;
}
/*  排列三张图片部分*/
.three-img {
  margin: 2em auto;
  font-weight: normal;
}
.img-box {
  padding: 0 3em;
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
}
.img-li {
  width: calc((100% - 6em) / 3);
  height: 80vh;
}
.img-li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.img-li:first-child a {
  background: url(/static/image/Hand-painted.jpg) no-repeat 0 0/100% 100%;
}
.img-li:nth-child(2) a {
  background: url(/static/image/coats-man-two.jpg) no-repeat 0 0/100% 100%;
}
.img-li:last-child a {
  background: url(/static/image/career-img-two.jpg) no-repeat 0 0/100% 100%;
}
.img-li a p {
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.img-li a p:first-child {
  width: 100%;
  font-size: 1.2em;
  bottom: 4em;
}
.img-li a p:last-child {
  font-size: 0.8em;
  border-bottom: 2px solid #fff;
  bottom: 3.5em;
}
.img-li a p:last-child:hover {
  border-color: #DAB88B;
}
/*  长图背景，Find us on socials*/
.find-us-box {
  margin: 2em 0;
}
.find-us {
  width: 100%;
  height: 40vh;
  background: url(/static/image/xiamen-longpic.jpg) no-repeat 0 0/100% 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.find-us p {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  margin-top: 0.5em;
  letter-spacing: 3px;
  font-size: 4em;
  text-align: center;
  font-weight: normal;
}
.social-link {
  width: 50%;
  height: 3em;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  margin-bottom: 4em;
}
.social-link li {
  width: calc((100% - 2em) / 3);
  height: 100%;
  background: #fff;
}
.social-link li a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 3em;
  text-align: center;
  letter-spacing: 2px;
  font-weight: normal;
}
.social-link li:hover {
  background: #DAB88B;
}
/* 媒体查询1：屏幕宽度<=1400px */
@media (max-width: 1400px) {
  /*  --introduction左侧部分开始 */
  .bg-color-left,
  .bg-color-right {
    height: 66vh;
  }
  .img-box {
    padding: 0 2em;
    gap: 1.5em;
  }
  .img-li {
    width: calc((100% - 3em) / 3);
    height: 70vh;
  }
}
/* 媒体查询2：屏幕宽度<=1140px */
@media (max-width: 1140px) {
  /*  --introduction左侧部分开始 */
  .para {
    padding: 0 2em;
    letter-spacing: normal;
  }
  /*  --core部分开始 */
  .core {
    height: 45vh;
  }
  .position-bg,
  .vision-box .position-bg {
    width: 60%;
    height: 76%;
  }
  .bg-color-left {
    height: 60vh;
  }
  .bg-color-right {
    height: 60vh;
    padding-top: 2em;
  }
  .img-box {
    padding: 0 1em;
    gap: 1em;
  }
  .img-li {
    width: calc((100% - 2em) / 3);
    height: 60vh;
  }
}
/* 媒体查询3：屏幕宽度<=992px */
@media (max-width: 992px) {
  /*  --introduction左侧部分开始 */
  .para {
    padding: 0 1em;
  }
  .a-link-box {
    width: 70%;
    margin: 2em auto;
    gap: 1em;
  }
  .ourstory-title {
    line-height: 2em;
  }
  .para {
    padding: 0 2em;
  }
  /*  --core部分开始 */
  .vision {
    height: 45vh;
  }
  .position-bg,
  .vision-box .position-bg {
    height: 70%;
  }
  .bg-color-left {
    height: 50vh;
  }
  .bg-color-right {
    height: 50vh;
    padding-top: 1em;
  }
  .img-box {
    padding: 0 0.5em;
    gap: 0.5em;
  }
  .img-li {
    width: calc((100% - 1em) / 3);
    height: 40vh;
  }
}
/* 媒体查询4：屏幕宽度<=768px */
@media (max-width: 768px) {
  /*  --introduction左侧部分开始 */
  .profile-box {
    width: 100%;
    order: 2;
  }
  .profile-img {
    width: 100%;
    height: 50vh;
    order: 1;
  }
  .core-box {
    margin: 2em auto;
    position: relative;
  }
  .core {
    height: 60vh;
  }
  .left-bg {
    width: 100%;
    height: 66vh;
    display: none;
  }
  .left-bg.active {
    display: block;
  }
  .right-bg {
    width: 100%;
    display: none;
  }
  .position-bg {
    width: 80%;
    height: 60%;
    top: 95%;
  }
  /*  --vision部分开始 */
  .vision-box {
    margin-top: 10em;
  }
  .vision {
    height: 60vh;
  }
  .vision-box .position-bg {
    width: 80%;
    height: 60%;
    top: 85%;
  }
  .click-page-box {
    margin-top: 8em;
  }
  .bg-color-left,
  .bg-color-right {
    width: 100%;
  }
  .click-page button {
    opacity: 0;
  }
  .img-li {
    width: 100%;
    padding: 0 2.5em;
    height: 80vh;
  }
  .find-us p {
    letter-spacing: 3px;
    font-size: 2.5em;
  }
  .social-link {
    width: 90%;
  }
  .social-link li {
    width: calc((100% - 2em) / 3);
    background: #fff;
  }
  .find-us {
    height: 50vh;
  }
  .social-link li a {
    color: #003300;
  }
}