*, *::after, *::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

body {
  background-color: #f4f4f4;
}

#about {
  padding-bottom: 110px;
}

@media all and (max-width: 699px) {
  #about {
    position: relative;
    padding-bottom: 18px;
  }
}
.vertical {
  writing-mode: vertical-rl;
}

.black_title {
  color: white;
  font-size: 22px;
  position: relative;
  display: inline-block;
  padding: 25px 20px;
  letter-spacing: 3px;
  line-height: 20px;
  font-weight: bold;
}

.black_title-2 {
  color: white;
  font-size: 22px;
  position: relative;
  display: inline-block;
  padding: 25px 20px;
  letter-spacing: 3px;
  line-height: 20px;
  font-weight: bold;
}

.left_box .black_title::after {
  content: "";
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.left_box .black_title::before {
  content: "";
  background-color: #f4f4f4;
  width: 100%;
  height: 99%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.black_title::after {
  content: "";
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.black_title-2::after {
  content: "";
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.black_title::before {
  content: "";
  background-color: #f4f4f4;
  width: 100%;
  height: 99%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}

@media all and (max-width: 699px) {
  .black_title {
    font-size: 18px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding: 12px 27px;
    width: 50%;
    z-index: 5;
  }
  .black_title-2 {
    position: absolute;
    font-size: 18px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding: 12px 27px;
    width: 50%;
    z-index: 5;
  }
}
.about_info {
  margin-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  color: #777777;
  padding-top: 42px;
}

@media all and (max-width: 699px) {
  .about_info {
    margin-top: 13px;
    width: 100%;
    padding-bottom: 0;
    padding-top: 0;
    border-top: 0;
  }
}
.orign {
  position: relative;
  border: 2px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  margin-bottom: 20px;
}

@media all and (max-width: 1200px) {
  .orign {
    margin-bottom: 0px;
    border-bottom: 0;
  }
}
@media all and (max-width: 699px) {
  .orign {
    display: block;
  }
}
.orign.show {
  opacity: 1;
  -webkit-transition: all 1.2s ease;
  transition: all 1.2s ease;
}

.orign.show .black_title::before {
  height: 0;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

@media all and (max-width: 699px) {
  .orign .black_title {
    font-size: 18px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding: 12px 27px;
    position: absolute;
  }
  .vertical {
    writing-mode: unset;
  }
}
.orign .info {
  position: relative;
  padding: 55px 50px;
  min-width: 405px;
  width: 57%;
  line-height: 28px;
  font-family: system-ui, sans-serif;
}

@media only screen and (max-width: 1300px) {
  .orign .info {
    padding-right: 60px;
  }
}
@media all and (max-width: 699px) {
  .orign .info {
    padding: 75px 26px 36px;
    width: 100%;
    min-width: 280px;
    background-color: white;
  }
}
.orign .img {
  display: block;
  border-left: 2px solid black;
  background-color: #dedede;
  position: relative;
  width: 45%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.orign .img img {
  width: 100%;
  opacity: 0;
}

@media all and (max-width: 699px) {
  .orign .img {
    border-left: 0;
    border-top: 2px solid black;
    width: 100%;
  }
  .orign .img img {
    top: 0%;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
.about_us {
  position: relative;
  border-top: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 43% 57%;
  grid-template-columns: 43% 57%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  opacity: 0;
}

.about_us.show {
  opacity: 1;
  -webkit-transition: all 1.2s ease;
  transition: all 1.2s ease;
}

.about_us.show .black_title::before {
  width: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media all and (max-width: 1024px) {
  .about_us {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-left: 1px solid black;
  }
}
@media all and (max-width: 699px) {
  .about_us {
    border-left: 0;
  }
}
.about_us .black_title {
  position: absolute;
  left: 0;
  z-index: 3;
  width: 43%;
}

@media all and (max-width: 1024px) {
  .about_us .black_title {
    width: 205px;
  }
}
@media all and (max-width: 699px) {
  .about_us .black_title {
    width: 50%;
  }
}
.about_us .left_box {
  position: relative;
  border: 2px solid black;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1/1/3/2;
}

@media all and (max-width: 1024px) {
  .about_us .left_box {
    border: 0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    position: relative;
    width: 50%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@media all and (max-width: 699px) {
  .about_us .left_box {
    border-left: 2px solid black;
    width: 100%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
}
.about_us .left_box .black_title {
  position: absolute;
  z-index: 5;
  width: 100%;
}

.about_us .left_box .slide_img {
  position: relative;
}

.about_us .left_box .swiper-slide {
  position: relative;
}

.about_us .left_box .swiper-slide .imgs {
  min-height: 900px;
  background-position: center;
  background-size: cover;
  position: relative;
}

@media all and (max-width: 1024px) {
  .about_us .left_box .swiper-slide .imgs {
    min-height: 500px;
    height: 100%;
  }
}
.about_us .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 28px;
}

.about_us .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: #f4f4f4;
  margin: 0 8px;
  opacity: 1;
  -webkit-box-shadow: 1px -2px 1px rgba(0, 0, 0, 0.48) inset;
  box-shadow: 1px -2px 1px rgba(0, 0, 0, 0.48) inset;
}

.about_us .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: #fd076f;
}

.about_us .info_block {
  position: relative;
  border: 2px solid black;
  border-left: 0;
  border-top: 0;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1/2/2/3;
  border-bottom: 0;
}

@media all and (max-width: 1024px) {
  .about_us .info_block {
    width: 50%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .about_us .info_block.future {
    width: 100%;
  }
  .about_us .info_block.future .box .black_title {
    width: 205px;
  }
}
@media all and (max-width: 699px) {
  .about_us .info_block {
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 0;
    width: 100%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .about_us .info_block.future .box .black_title {
    width: 50%;
  }
}
.about_us .info_block .box {
  padding: 45px;
  border-top: 2px solid black;
  display: flex;
  position: relative;
  padding-right: 21%;
  line-height: 28px;
  font-family: system-ui, sans-serif;
}

.about_us .info_block .box-future .box {
  border-bottom: 2px solid black;
}

.about_us .info_block .box-future {
  height: 100%;
  display: flex;
  position: relative;
  line-height: 28px;
}

@media only screen and (max-width: 1300px) {
  .about_us .info_block .box {
    padding-right: 60px;
  }
}
@media all and (max-width: 1024px) {
  .about_us .info_block .box {
    padding-top: 40px;
    min-height: auto;
  }
}
@media all and (max-width: 699px) {
  .about_us .info_block .box {
    padding: 75px 26px 36px;
    background-color: white;
  }
}
@media all and (max-width: 699px) {
  .about_us .info_block .box .black_title {
    width: 50%;
    min-width: auto;
  }
}
.about_us .info_block.future {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 2/2/3/3;
}

@media all and (max-width: 1024px) {
  .about_us .info_block.future {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .about_us .info_block.future .box {
    padding-bottom: 150px;
  }
}
@media all and (max-width: 699px) {
  .about_us .info_block.future .box {
    padding: 75px 26px 150px 26px;
  }
}
.about_us .info_block .link {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: white;
  bottom: 0;
  left: 0;
  border-top: 1px solid black;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.about_us .info_block .link .news_link {
  position: relative;
  width: 50%;
  padding-left: 44px;
  padding-right: 95px;
  border-right: 1px solid black;
  overflow: hidden;
}

.about_us .info_block .link .news_link:last-child {
  border-right: 0;
}

.about_us .info_block .link .news_link span {
  position: relative;
}

.about_us .info_block .link .news_link::after {
  content: "";
  background-color: #fd076f;
  width: 90px;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 1;
  -webkit-transform: translateX(120%) skewX(-22deg);
  transform: translateX(120%) skewX(-22deg);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.about_us .info_block .link .news_link .arrow {
  position: absolute;
  width: 90px;
  height: 100%;
  right: -10px;
  top: 0;
  z-index: 3;
  -webkit-transition: all 0.3s ease 0.2s;
  transition: all 0.3s ease 0.2s;
}

.about_us .info_block .link .news_link .arrow::before {
  content: "";
  width: 10px;
  background-color: black;
  position: absolute;
  left: 50%;
  height: 1px;
  top: 50%;
  margin-left: -7px;
  margin-top: 0px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.about_us .info_block .link .news_link .arrow::after {
  content: "";
  width: 7px;
  position: absolute;
  left: 50%;
  height: 7px;
  top: 50%;
  margin-left: -3px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -3px;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media all and (min-width: 1025px) {
  .about_us .info_block .link .news_link:hover::after {
    -webkit-transform: translateX(0%) skewX(0);
    transform: translateX(0%) skewX(0);
  }
  .about_us .info_block .link .news_link:hover .arrow {
    right: 0;
  }
  .about_us .info_block .link .news_link:hover .arrow::before {
    background-color: white;
  }
  .about_us .info_block .link .news_link:hover .arrow::after {
    border-color: white;
  }
}
@media all and (max-width: 1024px) {
  .about_us .info_block .link .news_link::after {
    -webkit-transform: translateX(0%) skewX(0);
    transform: translateX(0%) skewX(0);
  }
  .about_us .info_block .link .news_link .arrow {
    right: 0;
  }
  .about_us .info_block .link .news_link .arrow::before {
    background-color: white;
  }
  .about_us .info_block .link .news_link .arrow::after {
    border-color: white;
  }
}
@media all and (max-width: 699px) {
  .about_us .info_block .link .news_link {
    padding-left: 24px;
    padding-right: 0;
  }
  .about_us .info_block .link .news_link .arrow {
    width: 36px;
  }
  .about_us .info_block .link .news_link::after {
    width: 36px;
  }
}
/*# sourceMappingURL=w_about.css.map */