body {
  background: linear-gradient(180deg, #EBEBEB 0%, rgba(250, 235, 196, 0.7) 48.34%, rgba(235, 235, 235, 0.7) 100%)
}

.f_65 {
  font-size: 3.38542vw
}

img {
  display: block
}

.banner {
  position: relative;
  height: 100vh
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.banner .text {
  width: 50.8125vw;
  bottom: 7.03125vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center
}

.banner .text .p1 {
  color: #FFF;
  font-weight: 500;
  text-transform: capitalize
}

.banner .text .p1 p {
  font-family: 'LibreCaslonCondensed-Regular'
}

.banner .text .p2 {
  color: #FFF;
  font-weight: 500;
  text-transform: capitalize;
  margin: 1.09375vw 0 0
}

.banner .text .p2 p {
  font-family: 'LibreCaslonCondensed-Regular'
}

.sec1 {
  padding: 2.60417vw 5.72917vw 0 6.25vw;
  width: 100%;
  overflow: hidden;
  position: relative
}

.sec1 .r_fixed2 {
  position: absolute;
  right: -12.76042vw;
  top: 34.375vw;
  z-index: 3;
  opacity: 0;
  transition: 0.6s;
  transform: rotate(90deg)
}

.sec1 .r_fixed2 p {
  color: rgba(133, 133, 133, 0.5);
  font-family: 'LibreCaslonCondensed-Italic';
  font-size: 6.61458vw;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize
}

.sec1 .r_fixed2.on {
  opacity: 1
}

.sec1 .swiper {
  width: 100%;
  position: relative
}

.sec1 .swiper .next {
  position: absolute;
  left: 6.35417vw;
  bottom: 12.34375vw;
  z-index: 4;
  cursor: pointer
}

.sec1 .swiper .next p {
  color: #222;
  font-weight: 400;
  text-transform: uppercase
}

.sec1 .swiper .swiper-slide {
  display: flex;
  justify-content: space-between
}

.sec1 .swiper .swiper-slide .l {
  width: 23.4375vw;
  padding: 14.22917vw 0 0
}

.sec1 .swiper .swiper-slide .l .slide_title {
  font-family: 'LibreCaslonCondensed-Regular';
  color: transparent;
  font-weight: 400;
  line-height: 1.2;
  text-transform: capitalize;
  text-align: center;
  transform: translateY(1.04167vw)
}

.sec1 .swiper .swiper-slide .l .slide_text {
  margin: 2.60417vw 0 0;
  color: transparent;
  font-weight: 300;
  line-height: 1.4;
  transform: translateY(1.04167vw)
}

.sec1 .swiper .swiper-slide .r {
  width: 52.08333vw;
  height: 51.35417vw;
  overflow: hidden
}

.sec1 .swiper .swiper-slide .r img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
  transform: scale(1.1)
}

.sec1 .swiper .swiper-slide.swiper-slide-active .l .slide_title {
  transform: translateY(0);
  transition: 0.6s;
  color: rgba(0, 0, 0, 0.9)
}

.sec1 .swiper .swiper-slide.swiper-slide-active .l .slide_text {
  color: #000;
  transform: translateY(0);
  transition: 0.6s;
  transition-delay: 0.1s
}

.sec1 .swiper .swiper-slide.swiper-slide-active .r img {
  transform: scale(1)
}

.sec2 {
  width: 100%;
  overflow-x: hidden;
  padding: 7.55208vw 0 8.64583vw
}

.sec2 .title {
  color: #000;
  font-family: 'LibreCaslonCondensed-Regular';
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 6.92708vw
}

.sec2 .list {
  display: flex;
  justify-content: space-between;
  padding: 0 6.25vw;
  position: relative
}

.sec2 .list .item .icon {
  width: 2.5vw;
  height: 2.5vw;
  margin: 0 auto 1.51042vw
}

.sec2 .list .item .icon img {
  width: 100%
}

.sec2 .list .item p {
  color: #000;
  font-weight: 400
}

.sec2 .list .item:nth-child(2n) {
  margin: 6.77083vw 0 0
}

.sec2 .list .bg {
  position: absolute;
  width: 100%;
  top: -1.5625vw;
  left: 0;
  clip-path: inset(0 100% 0 0);
  transition: 2s
}

.sec2 .list .bg img {
  width: 100%
}

.sec2 .list .bg.animated {
  clip-path: inset(0 0 0 0)
}

.sec3 {
  width: 100%
}

.sec3 .fix {
  width: 100%;
  display: flex;
  justify-content: center
}

.sec3 .fix .wrap {
  width: 100%
}

.sec3 .fix .wrap .title {
  color: #000;
  font-family: 'LibreCaslonCondensed-Regular';
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 3.59375vw
}

.sec3 .fix .wrap .content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 5.72917vw 0 11.45833vw;
  position: relative
}

.sec3 .fix .wrap .content .l {
  position: absolute;
  top: 0;
  left: 15.05208vw
}

.sec3 .fix .wrap .content .l .line {
  width: 1px;
  height: 72vh;
  background: #000000;
  margin: 0 auto
}

.sec3 .fix .wrap .content .r .sec3_swiper1 {
  height: 90vh;
  overflow: hidden;
  cursor: pointer
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 6.25vw
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .icon img {
  width: 7.08333vw
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .rt {
  width: 69.53125vw
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .rt .item_title {
  color: #000;
  font-family: 'LibreCaslonCondensed-Regular';
  font-weight: 400
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .rt .item_text {
  color: #000;
  font-weight: 400;
  margin: .52083vw 0
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .rt .img {
  width: 52.60417vw;
  height: 24.79167vw;
  margin: 0 0 0 auto;
  overflow: hidden
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .rt .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 600ms
}

.sec3 .fix .wrap .content .r .sec3_swiper1 .item .rt .img:hover img {
  transform: scale(1.05)
}

.sec4 {
  padding: 7.29167vw 5.88542vw 11.45833vw 6.51042vw
}

.sec4 .p1,
.sec4 .p2 {
  text-align: center;
  font-style: italic;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  font-family: 'LibreCaslonCondensed-Regular'
}

.sec4 .p2 {
  width: 67.70833vw;
  margin: 1.51042vw auto 2.60417vw
}

.sec4 .list {
  display: flex;
  justify-content: space-between
}

.sec4 .list .part {
  position: relative
}

.sec4 .list .part .item {
  display: flex;
  flex-direction: column;
  gap: 1.45833vw 0;
  width: 28.17708vw;
  pointer-events: none
}

.sec4 .list .part .item .img {
  width: 100%;
  height: 22.76042vw;
  overflow: hidden;
  opacity: 0;
  transition: 0.6s;
  pointer-events: none
}

.sec4 .list .part .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec4 .list .part .item .img:hover img {
  transform: scale(1.1)
}

.sec4 .list .part .item .item_box {
  width: 100%;
  height: 22.76042vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1.30208vw;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.04167vw)
}

.sec4 .list .part .item .item_box .item_text {
  color: #000;
  text-align: center;
  font-weight: 300;
  line-height: 1.4
}

.sec4 .list .part .item .item_box .item_link {
  margin: 1.5625vw auto 0
}

.sec4 .list .part .item .item_box .item_link p {
  color: #222;
  font-weight: 400;
  text-transform: uppercase
}

.sec4 .list .part .item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0
}

.sec4 .list .part .item.on {
  pointer-events: auto
}

.sec4 .list .part .item.on .img {
  opacity: 1;
  pointer-events: auto
}

.sec4 .list .part .item.on .item_box {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: 0.6s;
  transition-delay: 0.1s
}

.sec4 .list .part:nth-child(2n) .item {
  flex-direction: column-reverse
}

.sec4 .list .part:nth-child(2n) .item .item_box .item_text {
  min-height: 7.23958vw
}

.sec4 .list .part:nth-child(2n) .item.on .img {
  transition-delay: 0.1s
}

@media screen and (max-width: 768px) {
  .f_65 {
    font-size: 30px
  }

  .banner {
    height: 100vh
  }

  .banner img {
    height: 100%;
    object-fit: cover
  }

  .banner .text {
    top: unset;
    bottom: 30vh;
    width: 90%
  }

  .banner .text .p2 {
    margin: 20px 0 0
  }

  .sec1 {
    padding: 40px 5vw
  }

  .sec1 .swiper .swiper-slide {
    flex-direction: column-reverse
  }

  .sec1 .swiper .swiper-slide .r {
    width: 100%;
    height: 88vw
  }

  .sec1 .swiper .swiper-slide .l {
    width: 100%;
    padding: 30px 0 0
  }

  .sec1 .swiper .next {
    position: unset;
    margin: 30px auto;
    gap: 0 10px
  }

  .sec1 .swiper .next .jt {
    width: 60px
  }

  .sec2 {
    padding: 40px 0
  }

  .sec2 .title {
    margin-bottom: 40px
  }

  .sec2 .list {
    overflow: unset;
    flex-wrap: wrap;
    padding: 0 5vw
  }

  .sec2 .list .item {
    width: 100%;
    text-align: center;
    margin: 0 0 40px !important
  }

  .sec2 .list .item .icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 20px
  }

  .sec3 {
    padding: 20px 5vw 40px;
    height: unset !important
  }

  .sec3 .fix {
    position: unset;
    width: 100%;
    height: unset
  }

  .sec3 .fix .wrap .title {
    margin-bottom: 30px
  }

  .sec3 .fix .wrap .content {
    display: none
  }

  .sec3 .fix .wrap .swiper {
    width: 100%;
    display: block !important
  }

  .sec3 .fix .wrap .swiper .swiper-pagination .swiper-pagination-bullet {
    background: #000000;
    opacity: 0.2
  }

  .sec3 .fix .wrap .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1
  }

  .sec3 .fix .wrap .swiper .swiper-slide .item {
    margin-bottom: 60px !important;
    opacity: 0;
    transform: translateY(20px)
  }

  .sec3 .fix .wrap .swiper .swiper-slide .item .item_title {
    font-size: 20px
  }

  .sec3 .fix .wrap .swiper .swiper-slide .item .item_text {
    font-size: 16px;
    margin: 15px 0 20px
  }

  .sec3 .fix .wrap .swiper .swiper-slide .item .img {
    width: 100%;
    height: 60vw
  }

  .sec3 .fix .wrap .swiper .swiper-slide .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .sec3 .fix .wrap .swiper .swiper-slide.swiper-slide-active .item {
    opacity: 1;
    transform: translateY(0px);
    transition: 0.6s
  }

  .sec4 {
    padding: 40px 5vw 60px
  }

  .sec4 .p1,
  .sec4 .p2 {
    width: 100%;
    line-height: 1.4;
    color: #000000
  }

  .sec4 .p2 {
    margin: 15px 0 0
  }

  .sec4 .list {
    display: block;
    margin: 50px 0 0
  }

  .sec4 .list .part .item {
    position: unset !important;
    pointer-events: auto;
    width: 100%;
    display: block;
    margin-bottom: 50px
  }

  .sec4 .list .part .item .item_box {
    height: unset;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding: 20px 0 0
  }

  .sec4 .list .part .item .item_box .item_link {
    gap: 0 10px;
    margin: 25px 0 0
  }

  .sec4 .list .part .item .item_box .item_link .icon {
    width: 60px
  }

  .sec4 .list .part .item .item_box .item_link p {
    font-size: 16px
  }

  .sec4 .list .part .item .img {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: 72vw
  }
}