/**
 * @author: Jicc(103698177)
 * @date: 2026-07-08
 * @phone: 13790890981
 */
.journey-wrapper{
   width: 100%;
   height: 100%;
}
.journey-container{
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
}
.journey-step-box{
   width: 100%;
   display: flex;
}
.journey-step-side{
   width:33.8%;
   background: #E65965 url('../images/journey/journey-title.png') no-repeat 0 .94rem;
   background-size: 78.6% auto;
}
.journey-step-content{
   width: 66.2%;
   padding-bottom: 1.48rem;
   position: relative;
}
.journey-intro,
.journey-step-1,
.journey-step-2,
.journey-step-3,
.journey-step-4{
   opacity: 0;
   transform: translateY(.6rem);
   transition: opacity 1s ease, transform 1s ease;
}
.journey-intro{
   line-height: .48rem;
   font-size: .28rem;
   font-family: 'Manrope-Medium', Arial;
   color: #000;
   margin: 1.17rem 0 0 .9rem;
}
.journey-step-1{
   margin-top: .48rem;
}
.journey-step-title{
   display: flex;
   margin-left: -12.6%;
   position: relative;
   z-index: 10;
}
.journey-date{
   display: flex;
   flex-direction: column;
   grid-gap: .24rem;
}
.journey-date span{
   font-size: .48rem;
   font-family: 'Manrope-SemiBold', Arial;
   color: #fff;
}
.journey-date span.date-line{
   width: .08rem;
   height: .34rem;
   background-color: #fff;
}
.journey-step-title h2{
   line-height: 2.27rem;
   font-size: .8rem;
   font-family: 'Manrope-ExtraLight', Arial;
   color: #000;
   margin-left: -0.55rem;
}
.journey-step-intro{
   width: 85%;
   line-height: .48rem;
   font-size: .28rem;
   font-family: 'Manrope-Medium', Arial;
   color: #000;
   margin-left: .9rem;
   position: relative;
   z-index: 9;
}
.journey-step-img-1{
   width: 83.6%;
   margin: .36rem 0 0 .9rem;
}
.journey-step-img-1 img{
   width: 100%;
   height: auto;
}
.journey-step-img-1 img:nth-child(2){
   display: none;
}
.journey-step-2{
   position: relative;
}
.journey-step-2 .journey-step-intro{
   width: 58.6%;
}
.journey-step-img-2{
   width: 100%;
   position: absolute;
   top: 1.14rem;
   z-index: 1;
}
.journey-step-img-2 img{
   width: 100%;
   height: auto;
}
.journey-step-3{
   position: relative;
   margin-top: 2.5rem;
}
.journey-step-3 .journey-step-intro{
   width: 58.6%;
}
.journey-step-img-3{
   width: 37.2%;
   position: absolute;
   top: 1.75rem;
   right: 0;
   z-index: 1;
}
.journey-step-img-3 img{
   width: 100%;
   height: auto;
}
.journey-step-img-3 img:nth-child(2){
   display: none;
}

.journey-step-4{
   margin-top: 1.53rem;
}
.journey-step-img-4{
   width: 86.4%;
   margin: .68rem 0 0 .9rem;
}
.journey-step-img-4 img{
   width: 100%;
   height: auto;
}
.journey-intro-continues{
   line-height: .48rem;
   font-size: .28rem;
   font-family: 'Manrope-Medium', Arial;
   color: #000;
   margin: 1.64rem 0 0 .9rem;
}
.matter-box{
   width: 100%;
   height: 4.45rem;
   display: flex;
   align-items: center;
   justify-content: center;
}
.matter-img{
   display: flex;
   width: 33.8%;
}
.matter-img img{
   width: 100%;
   height: auto;
}
.matter-title{
   width: 66.2%;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   font-size: .8rem;
   font-family: 'Manrope-SemiBold', Arial;
   color: #fff;
   background-color: #000;
}
.journey-img-box{
   width: 100%;
   padding-bottom: 1.7rem;
   display: flex;
   flex-direction: column;
}
.address-img-section{
   width: 75%;
   margin: 1.7rem auto 0;
}
.address-img-section h2{
   line-height: .48rem;
   font-size: .36rem;
   font-family: 'Manrope-SemiBold', Arial;
   color: #000;
}
.address-img-box{
   display: flex;
   margin-top: .3rem;
   padding-top: 74.4%;
   position: relative;
}
.address-img-box img{
   width: 100%;
   height: auto;
   opacity: 0;
   transition: opacity .3s ease;
}
.overseas-img-box img{
   width: 100%;
   height: auto;
   opacity: 0;
   transition: opacity .3s ease;
}
.gz-img-1{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 0;
   left: 0;
}
.gz-img-2{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 2.74rem;
   left: 0;
}
.gz-img-3{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 0;
   left: 38.4%;
}
.gz-img-4{
   display: flex;
   width: 23%;
   position: absolute;
   top: 0;
   left: 76.9%;
}
.gz-img-5{
   display: flex;
   width: 61.5%;
   position: absolute;
   top: 5.48rem;
   left: 0;
}
.gz-img-6{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 5.48rem;
   left: 63.2%;
}
.overseas-img-box{
   display: flex;
   margin-top: .3rem;
   padding-top: 113%;
   position: relative;
}
.overseas-img-box img{
   width: 100%;
   height: auto;
}
.ov-img-1{
   display: flex;
   width: 23%;
   position: absolute;
   top: 0;
   left: 0;
}
.ov-img-2{
   display: flex;
   width: 17.5%;
   position: absolute;
   top: 0;
   left: 24.7%;
}
.ov-img-3{
   display: flex;
   width: 17.5%;
   position: absolute;
   top: 0;
   left: 43.8%;
}
.ov-img-4{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 2.7rem;
   left: 24.7%;
}
.ov-img-5{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 0;
   left: 63.2%;
}
.ov-img-6{
   display: flex;
   width: 17.5%;
   position: absolute;
   top: 2.7rem;
   left: 63.2%;
}
.ov-img-7{
   display: flex;
   width: 17.5%;
   position: absolute;
   top: 2.7rem;
   left: 82.4%;
}
.ov-img-8{
   display: flex;
   width: 61.5%;
   position: absolute;
   top: 5.44rem;
   left: 0;
}
.ov-img-9{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 5.44rem;
   left: 63.2%;
}
.ov-img-10{
   display: flex;
   width: 36.8%;
   position: absolute;
   top: 10.92rem;
   left: 0;
}
.ov-img-11{
   display: flex;
   width: 17.5%;
   position: absolute;
   top: 13.64rem;
   left: 0;
}
.ov-img-12{
   display: flex;
   width: 17.5%;
   position: absolute;
   top: 13.64rem;
   left: 19.2%;
}
.ov-img-13{
   display: flex;
   width: 61.5%;
   position: absolute;
   top: 10.92rem;
   left: 38.4%;
}

@media screen and (max-width: 767px) {
   .journey-step-side{
      width:33.8%;
      background: #E65965 url('../images/journey/journey-title.png') no-repeat 0 .2rem;
      background-size: 78.5% auto;
   }
   .journey-step-content{
      width: 66.2%;
      position: relative;
      padding-bottom: .3rem;
   }
   .journey-intro{
      width: 2.19rem;
      line-height: .24rem;
      font-size: .12rem;
      margin: .23rem 0 0 .18rem;
   }
   .journey-step-1{
      margin-top: 0;
   }
   .journey-step-title{
      display: flex;
      margin-left: -18.6%;
      position: relative;
      z-index: 10;
   }
   .journey-date{
      display: flex;
      flex-direction: column;
      grid-gap: .08rem;
      align-items: center;
   }
   .journey-date span{
      font-size: .12rem;
      font-family: 'Manrope-SemiBold', Arial;
      color: #fff;
   }
   .journey-date span.date-line{
      width: .03rem;
      height: .12rem;
      background-color: #fff;
   }
   .journey-step-title h2{
      line-height: .56rem;
      font-size: .17rem;
      font-family: 'Manrope-ExtraLight', Arial;
      color: #000;
      margin-left: -0.04rem;
   }
   .journey-step-intro{
      width: 2.11rem;
      line-height: .24rem;
      font-size: .12rem;
      font-family: 'Manrope-Medium', Arial;
      color: #000;
      margin-left: .18rem;
      position: relative;
      z-index: 9;
   }
   .journey-step-img-1{
      width: 100%;
      margin: 0;
   }
   .journey-step-img-1 img{
      width: 100%;
      height: auto;
   }
   .journey-step-img-1 img:nth-child(1){
      display: none;
   }
   .journey-step-img-1 img:nth-child(2){
      display: block;
   }
   .journey-step-2{
      position: relative;
      top: 0;
      left: 0;
   }
   .journey-step-2 .journey-step-intro{
      width: 2.13rem;
   }
   .journey-step-img-2{
      width: 100%;
      position: relative;
      top: 0;
      z-index: 1;
   }
   .journey-step-img-2 img{
      width: 100%;
      height: auto;
   }
   .journey-step-3{
      position: relative;
      top: 0;
      left: 0;
      margin-top: 0;
   }
   .journey-step-3 .journey-step-intro{
      width: 2.13rem;
   }
   .journey-step-img-3{
      width: 100%;
      position: relative;
      top: 0;
      right: 0;
      z-index: 1;
   }
   .journey-step-img-3 img{
      width: 100%;
      height: auto;
   }
   .journey-step-img-3 img:nth-child(1){
      display: none;
   }
   .journey-step-img-3 img:nth-child(2){
      display: block;
   }

   .journey-step-4{
      position: relative;
      top: 0;
      left: 0;
      margin-top: 0;
   }
   .journey-step-img-4{
      width: 2.14rem;
      margin: .2rem 0 0 .18rem;
   }
   .journey-step-img-4 img{
      width: 100%;
      height: auto;
   }
   .journey-intro-continues{
      line-height: .24rem;
      font-size: .12rem;
      font-family: 'Manrope-Medium', Arial;
      color: #000;
      margin: .17rem 0 0 .18rem;
   }
   .matter-box{
      width: 100%;
      height: .88rem;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .matter-img{
      display: flex;
      width: 33.8%;
   }
   .matter-img img{
      width: 100%;
      height: auto;
   }
   .matter-title{
      width: 66.2%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: .18rem;
      font-family: 'Manrope-SemiBold', Arial;
      color: #fff;
      background-color: #000;
   }
   .journey-img-box{
      width: 100%;
      padding-bottom: .48rem;
      display: flex;
      flex-direction: column;
   }
   .address-img-section{
      width: 85%;
      margin: .24rem auto 0;
   }
   .address-img-section h2{
      line-height: .48rem;
      font-size: .16rem;
      font-family: 'Manrope-SemiBold', Arial;
      color: #000;
   }
   .address-img-box{
      display: flex;
      margin-top: 0;
      padding-top: 330%;
      position: relative;
   }
   .address-img-box img{
      width: 100%;
      height: auto;
   }
   .gz-img-1{
      display: flex;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }
   .gz-img-2{
      display: flex;
      width: 100%;
      position: absolute;
      top: 1.66rem;
      left: 0;
   }
   .gz-img-3{
      display: flex;
      width: 1.87rem;
      position: absolute;
      top: 3.32rem;
      left: 0;
   }
   .gz-img-4{
      display: flex;
      width: 1.17rem;
      position: absolute;
      top: 3.32rem;
      left: 2.02rem;
   }
   .gz-img-5{
      display: flex;
      width: 100%;
      position: absolute;
      top: 5.33rem;
      left: 0;
   }
   .gz-img-6{
      display: flex;
      width: 100%;
      position: absolute;
      top: 7.38rem;
      left:0;
   }
   .overseas-img-box{
      display: flex;
      margin-top: 0;
      padding-top: 592%;
      position: relative;
   }
   .overseas-img-box img{
      width: 100%;
      height: auto;
   }
   .ov-img-1{
      display: flex;
      width: 1.52rem;
      height: 3.16rem;
      position: absolute;
      top: 1.66rem;
      left: 0;
      overflow: hidden;
      justify-content: center;
   }
   .ov-img-1 img{
      width: auto;
      height: 100%;
   }
   .ov-img-2{
      display: flex;
      width: 1.52rem;
      position: absolute;
      top: 3.32rem;
      left: 1.68rem;
   }
   .ov-img-3{
      display: flex;
      width: 1.52rem;
      position: absolute;
      top: 1.66rem;
      left: 1.68rem;
   }
   .ov-img-4{
      display: flex;
      width: 100%;
      position: absolute;
      top: 6.64rem;
      left: 0;
   }
   .ov-img-5{
      display: flex;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }
   .ov-img-6{
      display: flex;
      width: 1.52rem;
      position: absolute;
      top: 4.98rem;
      left: 0;
   }
   .ov-img-7{
      display: flex;
      width: 1.52rem;
      position: absolute;
      top: 4.98rem;
      left: 1.68rem;
   }
   .ov-img-8{
      display: flex;
      width: 100%;
      position: absolute;
      top: 8.3rem;
      left: 0;
   }
   .ov-img-9{
      display: flex;
      width: 100%;
      position: absolute;
      top: 10.35rem;
      left: 0;
   }
   .ov-img-10{
      display: flex;
      width: 100%;
      position: absolute;
      top: 13.67rem;
      left: 0;
   }
   .ov-img-11{
      display: flex;
      width: 1.52rem;
      position: absolute;
      top: 15.33rem;
      left: 0;
   }
   .ov-img-12{
      display: flex;
      width: 1.52rem;
      position: absolute;
      top: 15.33rem;
      left: 1.66rem;
   }
   .ov-img-13{
      display: flex;
      width: 100%;
      position: absolute;
      top: 16.99rem;
      left: 0;
   }
}