/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./public/static/css/web/about.css ***!
  \***************************************************************************************************************/
.about-container .page-banner {
  background-image: url(/static/dist/assets/about_us_banner_cf6d5a.jpg);
}
.about-container .title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.company-profile {
  padding-top: 72px;
  padding-bottom: 72px;
}
.company-profile .title {
  margin-bottom: 36px;
}
.company-profile img {
  width: 100%;
  margin: 32px 0;
}
.company-profile p {
  margin-top: 24px;
}
.development {
  height: 800px;
  background: url(/static/dist/assets/development_bg_632b7d.jpg) no-repeat center center;
  -o-background-size: cover;
     background-size: cover;
}
.development .title {
  padding: 72px 0;
}
.development .timeline {
  height: 9px;
  background: url(/static/dist/assets/timeline_602d52.png) no-repeat center center;
  -o-background-size: cover;
     background-size: cover;
}
.development .wrapper {
  max-width: 1200px;
}
.development .timer {
  margin-top: 20px;
  font-size: 0;
}
.development .timer-box {
  padding-bottom: 72px;
}
.development .timer li {
  display: inline-block;
  width: 144px;
  font-size: 20px;
  cursor: pointer;
}
.development .timer li.active {
  color: #FF6A00;
}
/* .development .swiper-container1 {
  height: 460px;
} */
.development .swiper-container1 .year {
  font-size: 60px;
  color: #FF6A00;
  font-weight: 600;
  position: relative;
}
.development  .year:after {
  content: '';
  width: 56px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.development .swiper-container1 .description {
  font-size: 24px;
  margin-top: 12px;
}
.culture .wrapper {
  max-width: 1200px;
}
.culture .cultures-list {
  max-width: 960px;
  margin: 0 auto 72px;
}
.culture .cultures-list ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.culture .cultures-list li {
  text-align: center;
}
.culture .cultures-list li:last-child {
  padding-right: 0;
}
.cultures-list li img {
  width: 72px;
  margin: 0 auto 26px;
}
.cultures-list li p {
  width: 216px;
}
.cultures-list li p:nth-of-type(1) {
  line-height: 2.5;
}
.cultures-list li p:last-child {
  font-size: 24px;
}

.swiper-container2 {
  margin-top: 36px;
}
.swiper-container2 .swiper-slide {
  width: 1200px;
}
.swiper-container2 .swiper-slide img {
  width: 100%;
}
.culture .title,
.honor .title {
  padding: 72px 0 64px;
}
.about-container .pagination {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.culture .pagination1 {
  bottom: 20px;
}
.honor {
  background-color: #fff;
  padding-bottom: 120px;
  position: relative;
}
.honor-swiper-container {
  max-width: 100%;
}
.honor-swiper-container .swiper-slide {
  width: 20%;
  cursor: pointer;
  border: 1px solid #E6E6E6;
  border-radius: 8px;
}
.honor-swiper-container .swiper-slide img {
  width: 100%;
  border-radius: 8px;
}
.honor-swiper-container .swiper-pagination-bullet {
  border-color: #e6e6e6;
}
.honor-swiper-container .swiper-pagination-bullet-active {
  background: #e6e6e6;
}
.honor-swiper-container .pagination2 {
  bottom: 60px;
}
.navigation-btn>div {
  float: left;
  width: 72px;
  height: 60px;
  cursor: pointer;
  position: relative;
}
.navigation-btn>div:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 100%;
  background: url(/static/dist/assets/arrow_long_f8c837.svg) no-repeat center right;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.navigation-btn .previous:after {
  right: 12px;
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
          outline: none;
}
.navigation-btn .next:after {
  left: 12px;
}
.navigation-btn>div:not(.swiper-button-disabled):hover:after {
  width: 60px;
}

.swiper-big {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.swiper-big-body {
  padding-top: 40px;
  padding-bottom: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.swiper-big .swiper-container {
  width: 90%;
  max-width: 704px;
  height: 100%;
}
.swiper-big-close {
  position: absolute;
  cursor: pointer;
  font-size: 24px;
  width: 24px;
  height: 24px;
  right: 12px;
  top: 10px;
  z-index: 10;
  color: #fff;
}
.swiper-big img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.swiper-big .arrow-right {
  right: 5%;
}
.swiper-big .arrow-left {
  left: 5%;
}
.swiper-big .swiper-button-disabled {
  opacity: 0.3;
}

.duty-container {
  height: 1000px;
  padding: 180px 0;
  background: #f8f8f8;
}
.duty-container .wrapper {
  height: 640px;
}
.duty-container .left {
  background: -webkit-linear-gradient(301deg, #FFA100 0%, #FF6A00 100%);
  background: -moz-linear-gradient(301deg, #FFA100 0%, #FF6A00 100%);
  background: -o-linear-gradient(301deg, #FFA100 0%, #FF6A00 100%);
  background: linear-gradient(149deg, #FFA100 0%, #FF6A00 100%);
  height: 100%;
  padding: 44px 0 0 52px;
  margin-right: 544px;
  position: relative;
}
.duty-container .left .title {
  text-align: left;
  margin-bottom: 20px;
}
.duty-container .left .description {
  padding-right: 40px;
}
.duty-container .left .description p {
  margin-top: 10px;
}
.duty-container .right {
  float: right;
  width: 544px;
  height: 100%;
  position: relative;
}
.duty-container .swiper-slide img {
  /* height: 100%; */
  width: 100%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}
.duty-container .swiper-container {
  height: 100%;
}
.duty-container .navigation-btn {
  position: absolute;
  bottom: 0;
  left: -74px;
  z-index: 1;
}
.duty-container .duty-content {
  position: absolute;
  bottom: 80px;
  right: 20px;
  color: #fff;
  text-align: right;
}
.duty-container .duty-content .duty-title {
  font-size: 24px;
  font-weight: 600;
}
.duty-container .pagination {
  bottom: 16px;
}
.sticky-top {
  background-color: #fff;
}
@media (max-width: 1440px) {
  .swiper-container2 .swiper-slide {
      width: 1024px;
  }
  .duty-container .wrapper {
    height: 576px;
  }
}
@media (max-width: 1200px) {
  .duty-container .left .description-content {
    display: none;
  }
}
@media (max-width: 1024px) {
  .development .timer {
    white-space: nowrap;
  }
  .development .timer-box {
    overflow-x: auto;
  }
  .swiper-container2 .swiper-slide img {
    width: auto;
    height: 576px;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .duty-container {
    height: 816px;
    padding: 120px 0;
  }
  .duty-container .left {
    padding: 20px 0 0 20px;
  }
  .duty-container .left .description {
    padding: 0 20px 0 0;
  }
}
@media (max-width: 768px) {
  .page-bar .page-nav li {
    margin-left: 36px;
  }
  .company-profile {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .company-profile .title {
    margin-bottom: 24px;
  }
  .company-profile img {
    margin: 24px 0;
  }
  .development .title {
    padding-bottom: 60px;
  }
  .culture .title,
  .honor .title {
    padding-top: 56px;
  }
  .culture .cultures-list {
    margin-bottom: 56px;
  }
  .swiper-container2 .swiper-slide img {
    height: 512px;
  }
  .swiper-container2 {
    margin-top: 24px;
  }
  .honor {
    padding-bottom: 100px;
  }
  .honor-swiper-container .pagination2 {
    bottom: 50px;
  }
  .duty-container {
    height: auto;
    padding: 0;
  }
  .duty-container .wrapper {
    height: 1114px;
    position: relative;
    padding: 0;
  }
  .duty-container .right {
    height: 800px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 48px;
    padding: 0 44px;
  }
  .duty-container .swiper-slide img {
    margin: 0 auto;
  }
  .duty-container .left {
    width: 100%;
    height: 100%;
    padding: 56px 44px 0;
  }
  .duty-container .left .title {
    text-align: center;
  }
  .duty-container .left .description {
    max-width: 100%;
    padding: 0;
  }
  .duty-container .navigation-btn {
    bottom: auto;
    top: -66px;
    left: auto;
    right: 0;
  }
  .duty-container .duty-content {
    bottom: auto;
    right: auto;
    top: 185px;
    text-align: left;
  }
}
@media (max-width: 767px) {
  .page-bar-container {
    padding: 0;
  }
  .page-bar .page-nav li {
    margin-left: 24px;
  }
  .page-bar .page-nav li:first-child {
    margin-left: 0;
  }
  .page-bar .page-nav li:last-child {
    padding-right: 16px;
  }
  .page-bar .page-crumbs {
    display: none;
  }
  .page-bar .page-nav {
    float: none;
    white-space: nowrap;
    padding: 0 16px;
  }
  .page-bar {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .company-profile {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .about-container .title {
    font-size: 24px;
  }
  .company-profile img {
    margin: 12px auto;
  }
  .development .title {
    padding: 32px 0 48px;
  }
  .development .timer li {
    width: 108px;
  }
  .development {
    height: 580px;
  }
  .development .timer-box {
    padding-bottom: 56px;
  }
  .development .swiper-container1 .year {
    font-size: 36px;
  }
  .development .swiper-container1 .description {
    font-size: 16px;
  }
  .culture .title, .honor .title {
    padding: 32px 0 48px;
  }
  .cultures-list li img {
    width: 56px;
    margin-bottom: 12px;
  }
  .cultures-list li p {
    width: 110px;
  }
  .cultures-list li p:last-child {
    font-size: 16px;
  }
  .cultures-list li p:nth-of-type(1) {
    font-size: 12px;
  }
  .culture .cultures-list {
    margin-bottom: 14px;
  }
  .swiper-container2 .swiper-slide img {
    height: 300px;
  }
  .culture .pagination1 {
    bottom: 16px;
  }
  .honor {
    padding-bottom: 72px;
  } 
  .honor-swiper-container .pagination2 {
    bottom: 34px;
  }
  .duty-container .wrapper {
    height: 690px;
  }
  .duty-container .right {
    height: 404px;
    padding: 0 16px;
    bottom: 24px;
  }
  .duty-container .left {
    padding: 32px 16px 0;
  }
  .duty-container .duty-content {
    top: 176px;
    width: -webkit-calc(100% - 144px);
    width: -moz-calc(100% - 144px);
    width: calc(100% - 144px);
  }
  .duty-container .duty-content .duty-subtitle {
    height: 42px;
  }
  .duty-container .navigation-btn {
    top: -80px;
  }
}