.container {
  position: relative;
  background: rgba(227, 221, 204, 1);
  min-height: 100vh;
  padding: 1.6rem 0 1.8rem 0;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

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

.yun_1 {
  position: absolute;
  top: 10.63rem;
  left: 9.02rem;
  width: 3.26rem;
  height: .93rem;
  z-index: 1;
  pointer-events: none;
}

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

.yun_2 {
  position: absolute;
  top: 19rem;
  left: 1.67rem;
  width: 3.18rem;
  height: 1.06rem;
  z-index: 1;
  pointer-events: none;
}

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

.sec_title {
  justify-content: center;
}

.title_icon {
  display: flex;
  width: 6rem;
  justify-content: space-between;
  gap: 1.605rem;
  margin: 0 auto;
}

.title_icon img {
  width: 2.195rem;
  height: .3rem;
}

.m_box_1 {
    display: none;
}
.box_1 {
  padding: .7rem 0 0 0;
}
.box_1 .swiper_box_1 {
  width: 100%;
  overflow: hidden;
  /*padding-right: 32%;*/
}



.box_1 .swiper_box_1 .swiper-wrapper {
    height: 6rem;
    
    align-items: center;
}


 .box_1 .swiper_box_1 .swiper-slide {
  /*width: auto !important;*/
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(71%);
  transition: all .5s;
} 

.box_1 .swiper_box_1 .swiper-slide-active {
  /*width: auto !important;*/
  /*width: 10.49rem !important;*/
  transform: translateX(45%);
  transition: all .5s;

}

.box_1 .item {
  display: flex;
  height: 3.28rem;
  width: 2.33rem;
  position: relative;
  margin-right: 1.5rem;
transition: all .5s ease-in-out; 
   
}

.box_1 .item:not(.on) {
    /*transform: translateX(10%);*/
}

.box_1 .item.on {
  height: 5.97rem;
  width: 11.49rem;
  margin-right: 0;
	transition: all .5s ease-in-out; 
	/*transform: translateX(35%);*/
}

.box_1 .item .title {
  /*flex: 1;*/
  height: 3.28rem;
  width: 2.35rem;
  position: relative;
  top: 0;
  transition: all .5s ease-in-out; 
}

.box_1 .item.on .title {
  position: absolute;
  /*top: .77rem;*/
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  /*width: 3.11rem;*/
  /*height: 4.73rem;*/
  width: 5.36rem;
  height: 3.49rem;
  flex: unset;
  z-index: 1;
  transition: all .5s ease-in-out; 
}

.box_1 .item .title img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-position: 100%;
  object-fit: cover;
}


.box_1 .item .info {
  display: flex;
  position: absolute;
  /*left: .97rem;*/
  right: 0;
  top: 0;
  transition: all 1.5s;
  height: 100%;
}

.box_1 .item.on .info {
    left: .97rem;
}

.box_1 .item .info .sub_title {
  /*background: rgba(125, 63, 0, 1);*/
  background: rgba(71, 76, 83, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .16rem;
  width: .88rem;
  height: 3.28rem;
  opacity: 1;
  position: absolute;
  right: 0;
  /*transition: opacity 1.5s ease-in; */
  
  
}

.box_1 .item.on .info .sub_title {
  opacity: 0;
  width: 0;
  height: 0;
}

.box_1 .item .info .sub_title .dot {
  background: #fff;
  width: .16rem;
  height: .16rem;
  border-radius: 50%;
}

.box_1 .item .info .sub_title span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 400;
  font-family: 'LXGWWenKaiMonoTC-Regular';
  color: rgba(246, 235, 223, 1);
}


.box_1 .item .info .desc_box {
  width: 0;
  left: 0;
  overflow: hidden;
  background: rgba(71, 76, 83, 1);
  position: relative;
  transition: all .5s ease-in; 
  
}

.box_1 .item .info .desc_box img {
  opacity: 0.1;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  pointer-events: none;
}


.box_1 .item.on .info .desc_box {
  width: 9.57rem;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: .92rem;
  /*padding: 1.48rem .97rem 0 3.19rem;*/
  padding: 1.48rem .87rem 0 4.32rem;
  transition: all 1s ease-in; 
}

.box_1 .item .info .desc_box .name {
    opacity: 0;
}
.box_1 .item .info .desc_box .desc {
    opacity: 0;
}

.box_1 .item.on .info .desc_box .name {
  font-family: 'LXGWWenKaiMonoTC-Regular';
  font-weight: 400;
  color: rgba(246, 235, 223, 1);
  line-height: 1.5;
  margin-bottom: .4rem;
  /*width: 5.35rem;*/
  width: 4.38rem;
  opacity: 1;
}

.box_1 .item.on .info .desc_box .desc {
  font-weight: 400;
  line-height: 1.5;
  color: rgba(246, 235, 223, 0.8);
  /*width: 5.35rem;*/
  width: 4.38rem;
  opacity: 1;
}

.box_1 .page {
  margin: .39rem 4.33rem 0 12.93rem;
  display: flex;
  gap: .42rem;
  align-items: center;
}

.box_1 .page .btn {
  height: .2rem;
  width: .2rem;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.box_1 .page img {
  width: .19rem;
  height: .12rem;
}

.box_1 .page {
  font-weight: 400;
  font-family: 'LXGWWenKaiMonoTC-Regular';
  color: rgba(125, 63, 0, 0.5);
}

.box_1 .page strong {
  font-weight: 500;
  font-family: 'LXGWWenKaiMonoTC-Medium';
  color: rgba(125, 63, 0, 1);
}

.box_2 {
    position: relative;
    z-index: 1;
  display: flex;
  justify-content: center;
  gap: 1.48rem;
  margin: 2rem 0 0 0;
}

.box_2 .item {
  width: 5.12rem;
  height: 6.67rem;
  position: relative;
  padding: .15rem;
}

.box_2 .item .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}


.box_2 .item .img_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box_2 .item .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .5s ease-in-out;
}

.box_2 .item:hover .img_box img {
  transform: scale(1.1);
}

@media (max-width: 767px) {
    .container {
        overflow: hidden;
    }
    .box_1 {
        display: none;
    }
    .m_box_1 {
        display: block;
    }
    
    .m_box_1 {
        width: 100%;
        margin: 150px 0 0 0;
        position: relative;
    }
    .m_box_1 .swiper_box_2 {
        width: 100%;
        /*overflow: hidden;*/
    }
    
    .m_box_1 .item {
      display: flex;
      height: 120vw;
      width: 90%;
      margin: 0 auto;
      position: relative;
      
       
    }
    
    
    .m_box_1 .item .title {
      position: absolute;
      /*top: -110px;*/
      top: -48px;
      left: 50%;
      transform: translateX(-50%);
      /*width: 155px;*/
      /*height: 218px;*/
      width: 218px;
      height: 155px;
      flex: unset;
      z-index: 2;
    }
    
    .m_box_1 .item .title img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      object-position: left;
      object-fit: cover;
    }
    
    
    .m_box_1 .item .info {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      transition: all 1.5s;
      height: 100%;
      width: 100%;
    }
    
    
    .m_box_1 .item .info .sub_title {
      background: rgba(125, 63, 0, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: .16rem;
      width: .88rem;
      height: 3.28rem;
      opacity: 1;
    }
    
    .m_box_1 .item.on .info .sub_title {
      opacity: 0;
    }
    
    .m_box_1 .item .info .sub_title .dot {
      background: #fff;
      width: .16rem;
      height: .16rem;
      border-radius: 50%;
    }
    
    .m_box_1 .item .info .sub_title span {
      writing-mode: vertical-rl;
      text-orientation: upright;
      font-weight: 400;
      font-family: 'LXGWWenKaiMonoTC-Regular';
      color: rgba(246, 235, 223, 1);
    }
    
    
    .m_box_1 .item .info .desc_box {
      background: rgba(125, 63, 0, 1);
      transition: none; 
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      padding: 160.2px 30px 0 30px;
      z-index: 1;
    }
    
    .m_box_1 .item .info .desc_box img {
      opacity: 0.1;
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
      height: 100%;
      pointer-events: none;
    }
    
    
    .m_box_1 .item .info .desc_box .name {
      font-family: 'LXGWWenKaiMonoTC-Regular';
      font-weight: 400;
      color: rgba(246, 235, 223, 1);
      line-height: 1.5;
      margin-bottom: .4rem;
      opacity: 1;
      font-size: 16px;
    }
    
    .m_box_1 .item .info .desc_box .desc {
      font-weight: 400;
      line-height: 1.5;
      color: rgba(246, 235, 223, 0.8);
      opacity: 1;
      font-size: 14px;
    }
    
    .m_box_1 .page {
      display: flex;
      gap: .42rem;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 35px;
      width: 100%;
      padding: 0 40px;
      z-index: 1;
    }
    
    .m_box_1 .page .btn {
      height: 43px;
      width: 38px;
      cursor: pointer;
    
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .m_box_1 .page img {
      width: 100%;
      /*height: .12rem;*/
    }
    
    
    .box_2 {
        gap: 10px;
    }
    
    .box_2 .item {
        height: 59.46vw;
        width: auto;
    }
}