@keyframes textSlideIn{
   from {
      transform: translateX(50px);
      opacity: 0 
   }
   to {
         transform: translateX(0px);
         opacity: 1 
   }
}
.banner{
   background-image: url(../images/consumer-industries/LargeDisplay.jpg);
}
.banner-text{
   transform: translateX(70px);
   animation: textSlideIn cubic-bezier(0.39, 0.06, 0.35, 0.57);
   animation-duration: 0.5s;
   animation-delay: 0.4s;
   opacity: 0;
   animation-fill-mode: forwards;
}
.textSlideIn{
   animation: fadeInRight cubic-bezier(0.39, 0.06, 0.46, 0.91);
   animation-delay: 0.5s;
   animation-duration: 0.4s;
   animation-fill-mode: forwards;
   opacity: 0; 
}
.journeyMain{
   width: 100%;
   flex-direction: column;
   display: flex;
   align-items: center;
   justify-content: center;
}
.JourneyView{
   /* margin: 0 auto; */
   overflow: hidden;
}
.journeyViewContent{
    flex-direction: row;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.journeyItem{
   flex-direction: column;
   align-items: center;
   justify-content: center;
   display: flex;
}
.noIconWidth{
   width: 74%;
}
.justContentBetween{
  justify-content: space-between;
}
.jouryLeft{
   width: 45%;
   padding: 22px 0px 22px 32px;
   /* background-color: red; */
   height: 100%;
}
.jouryLeftLast{
   position: relative;
   height: 100%;
   /* overflow: hidden; */
   width: 38%;
   justify-content: flex-start;
}
.jouryRight{
   width: 55%;
   position: relative;
   height: 100%;
   /* overflow: hidden; */
}
.jouryLeftRight{
   width: 62%;
   height: 100%;
   justify-content: flex-start;
   position: relative;
}
.bgJouryView{
   width: 782px;
   height: 1172px;
   background-image: url(../images/consumer-industries/vector.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: absolute;
   z-index: 10;
   bottom: -160px;
   left: 0px;
}
.bgJouryViewLast{
   left: -367px;
   bottom: -120px;
}
.activeFirst{
   background-image: url(../images/consumer-industries/vector.png);
}
.activeSecond{
   background-image: url(../images/consumer-industries/secion-2-bg-imagev2.png);
}
.activeThird{
   background-image: url(../images/consumer-industries/secion-3-bg-imagev2.png);
}
.jBgmap{
   width: 65%;
   height: 300px;
   position: absolute;
   z-index: 11;
   left: 30px;
   top: 35%;
   transform: rotate(145deg);
}
.jBgmap1{
   width: 70%;
   position: absolute;
   z-index: 11;
}
.mapImage{
   width: 90%;
   position: absolute;
   z-index:15 ;
}
.bottomMap{
   width: 78%;
   z-index:14;
   left: 7%;
   /* top: 0px; */
}
.colorMap{
   width: 78%;
   z-index:10;
   left: 7%;
}
.colorMapFirst{
   z-index:5;
}
.drinkImage{
   position: absolute;
   z-index:12 ;
   bottom: 0px;
   right: 32px;
   width: 89px;
   height: 162px;
}
.journeyIconItem{
   flex-direction: row;
   display: flex;
   align-items: center;
   width: 100%;
}
.juiceIcon{
   width: 65px;
   height: 64px;
}

.journeyIconArea{
   width: 110px;
   height: 110px;
   border-radius: 110px;
   overflow: hidden;
   border: 5px solid rgb(0, 183, 241);
}
.iconSecond{
   border: 5px solid rgb(176, 83, 209);
}
.iconThird{
   border: 5px solid rgb(242, 153, 74);
}
.journeyIconAreaFirst{
   border: 8px solid rgb(0, 183, 241);
}
.journeyIconAreaSecond{
   border: 8px solid rgb(176, 83, 209);
}
.journeyIconAreaThird{
   border: 8px solid rgb(242, 153, 74);
}
.journeyIcon{
   width: 100%;
   height: 100%;
}

.journeyIconItemRightT{
  color: #fff;
  font-size: 16px;
  line-height: 27px;
  font-family: Roboto;
  margin-left: 8px;
}
.arrowRight{
   width: 18px;
   height: 18px;
   background-color: rgb(0, 183, 241);
   padding: 3px;
   border-radius: 50px;
}
.arrowSecond{
   background-color: rgb(176, 83, 209);
}
.arrowThird{
   background-color: rgb(242, 153, 74);
}
.journeyIconItemHeader{
   font-size: 24px;
   font-weight: bold;
   font-family: "GT Sectra Display Bold-M5aQBYKb";
   color: #fff;
   line-height: 38px;
   width: 100%;
}
.sonRowItems{
   cursor: pointer;
   padding: 4px;
}
.sonRowItems:hover{
   background-color: rgba(4, 93, 158, 0.5);
   border-radius: 4px;

}
.photoHover{
   transform: scale(1.4);
   -webkit-transform: scale(1.4); /*Safari 和 Chrome*/
   -moz-transform: scale(1.4); /*Firefox*/
   -ms-transform: scale(1.4); /*IE9*/
   -o-transform: scale(1.4); /*Opera*/
}
.hideImage{
   overflow: hidden;
}
.lastView{
   flex-direction: row;
   display: flex;
}
.leftItemsArea{
   height: 80%;
   display: flex;
   justify-content: space-around;
   flex-direction: column;

}
.jouryLeftLastHeader{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
}
.backIcon{
   width: 10px;
   height: 17px;
   margin-right: 10px;
}
.backTitle{
   font-size: 16px;
   color: #fff;
}
.backTitle:hover{
   color: rgb(0, 183, 241);
}
.lastTitle{
   font-size: 24px;
   margin-top: 20px;
   width: 60%;
   color: #fff;
}
.CapabilitesTitle{
   margin-top: 82px;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.5);
}
.jouryLeftLastContent{
   flex-direction: column;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   width: 100%;
}
.jouryLeftLastContentItem{
   width: 80%;
   background-color: transparent;
   border-top-right-radius: 85px;
   height: 85px;
   border-bottom-right-radius: 85px;
   flex-direction: row;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 8px;
}
.jouryLeftLastContentItem.firstActive{
   background-color: rgba(0, 183, 241, 0.5);
}
.jouryLeftLastContentItem.secondActive{
   background-color: rgb(135, 87, 199);
}
.jouryLeftLastContentItem.thirdActive{
   background-color: rgb(30, 112, 184);
}
.jouryLeftLastContentItem:hover{
   background-color: rgba(0, 183, 241, 0.2);
}
.lastImage{
   width: 90px;
   height: 60px;
   margin-right: 25px;
   align-items: center;
   justify-content: center;
   display: flex;
}
.lastImageOtener{
   width: 90px;
   height: 58px;
}
.lastLearnM{
   width: 60px;
   height: 60px;
}
.lastItemTitle{
   font-size: 18px;
   color: white;
   width: 50%;
   font-weight: 300;
}
.lastNumberV{
   width: 40px;
   height: 40px;
   background-color: rgba(0, 183, 241);
   font-size: 20px;
   font-weight: bold;
   color: #fff;
   align-items: center;
   justify-content: center;
   display: flex;
   position: absolute;
   z-index: 12;
   left: 14px;
   border-radius: 40px;
   box-shadow: 5px 2px 7px 7px #00000050;
}
.lastNumberV.firstActive{
   background-color: rgba(0, 183, 241);
}
.lastNumberV.secondActive{
   background-color: rgb(135, 87, 199);
}
.lastNumberV.thirdActive{
   background-color: rgb(242, 153, 74);
}
.rightHeaderT{
   font-size: 30px;
   font-weight: 500;
   color: #fff;
   width: 100%;
   line-height: 30px;
}

.rightDetail{
   font-size: 24px;
   color: #fff;
   margin-top: 8px;
   font-family: Roboto;
   font-weight: 300;
   line-height: 27px;
}
.headDetail{
   margin-top: 10px;
}
.rightGiftV{
   width: 100%;
   margin-top: 10px;
   margin-bottom: 6px;
   position: relative;
}
.topImage{
   width: 68%;
   transform-origin: center center;
   position: absolute;
   z-index: 1002;
   bottom: 40px;
   left: 16%;
   display: none;
}

.learnHeaderV{
   width: 453px;
   height: 265px;
   background-image: url(../images/consumer-industries/circles.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   margin-left: 20%;
}
.guyIcon{
   width: 80%;
   margin-left: 10%;
}
.realResultsV{
   width: 100%;
   color: #fff;
   font-weight: bold;
   font-size: 20px;
   margin-top: 18px;
}
.realResultArea{
   flex-direction: column;
   display: flex;
   width: 93%;
   margin-top: 20px;
   border-bottom: 2px solid rgb(0, 183, 241);
}
.realResultAreaItems{
   width: 100%;
   flex-direction: row;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}
.resultIcon{
   width: 96px;
}
.pcWidthParent{
   flex-direction: column;
   align-items: center;
   justify-content: center;
   display: flex;
}
.resultRightV{
   width: calc(100% - 166px);
   flex-direction: column;
   display: flex;
}
.resultRightVTitle{
   font-size: 20px;
   color: #fff;
}
.learnLink{
   font-size: 20px;
   color: rgb(0, 183, 241);
}
.learnLink:hover{
   color: rgb(0, 94, 152);
}
.realBottomArea{
   flex-direction: row;
   display: flex;
   width: 100%;
   justify-content: space-between;
   margin-top: 20px;
}
.resoures{
   width: 60%;
   flex-direction: column;
   display: flex;
}
.solutions{
   width: 40%;
   flex-direction: column;
   display: flex;
}
.ResourcesT{
   font-size: 18px;
   color: #fff;
   font-weight: bold;
}
.resouresItems{
   flex-direction: row;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 100%;

}
.learnMoreIndex{
   display: none;
}
.resourcesIcon{
   width: 30px;
   margin-right: 10px;
}
.resourcesTitle{
   font-size: 17px;
   color: rgb(0, 183, 241);
   padding-top: 3px;
   font-family: Roboto;
}
.resourcesTitle:hover{
   color: rgb(0, 94, 152);
}
.bottomDetail{
   width: 78%;
   font-size: 20px;
}
.topDrink{
   right: 70px;
}
.JourneyView{
   width:1200px;
   height: 750px;
}

 .juiceTitle{
   font-size: 24px;
   font-family: Roboto;
   color: #fff;
   margin-left: 20px;
 }
 #Customers .Customers-swiper{
    margin: 0 auto;
 }
 
 #Customers .Customers-swiper .swiper-content .swiper-items {
   display: inline-block;
   /* width: auto !important;  */
}
#Customers .Customers-swiper .swiper-content .swiper-items img {
   width: 154px;
   height: 62px;
   margin: 5px 29px;
   transition: all ease-out 0.3s; 
}
#Customers .Customers-swiper .swiper-content .swiper-items img:hover {
   transform: scale(1.1); 
}
@media (max-width: 767px){
  .journeyMain{
     display: none;
  }
  .mobileJouneryView{
     width: 94.6vw;
     background-color: red;
     height: 90vh;
     background-color: #021A51;
     margin-left: 2.7vw;
     overflow-y: auto;
  }
  .mobileOrigin{
      flex-direction: column;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
  }
  .mobileBgJourney{
     background-image: url(../images/consumer-industries/mobileBG.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     width: 100%;
     height: 205px;
     flex-direction: column;
     display: flex;
     align-items: center;
  }
  .juiceTitle{
     font-size: 4.2667vw;
  }
  .juiceIcon{
     width: 15.4667vw;
     height: 14.9333vw;
  }
  .mobileHeader{
     /* justify-content: center; */
     margin-top: 5.4667vw;
  }
  .mobileMap{
     width: 41.3333vw;
     height: 29.8vw;
     margin: 0 auto;
     padding-bottom: 15px;
  }
  .journeyIconArea{
     width: 17.0667vw;
     height: 17.0667vw;
  }
  .journeyIconItemHeader{
     font-size: 3.2vw;
  }
  .journeyIconItemRightT{
     font-size: 2.2667vw;
     line-height: 24px;
  }
  .journeyIconAreaFirst{
      border: 5px solid rgb(0, 183, 241);
   }
   .journeyIconAreaSecond{
      border: 5px solid rgb(176, 83, 209);
   }
   .journeyIconAreaThird{
      border: 5px solid rgb(242, 153, 74);
   }
   .moblieLast{
      flex-direction: column;
      display: flex;
      width: 100%;
   }
   .backTitle{
      font-size: 3.2vw;
   }
   .backIcon{
      width: 9px;
      height: 14.5px;
   }
   .lastTitle{
      font-size: 4.4vw;
      width: 100%;
   }
   .CapabilitesTitle{
      font-size: 3.2vw;
      margin-top: 10px;
   }
   .mobileLine{
      width: 20vw;
      height: 0.5vw;
      background-color: rgb(0, 183, 241);
      margin-top: 10px;
      margin-left: 20px;
   }
   .mobileDetailContent{
      flex-direction: column;
      display: flex;
      width: 100%;
   }
   .lastItemTitle{
      font-size: 3.6vw;
   }
   .lastImageOtener{
      width: 18.4vw;
      height: 11.7333vw;
   }
   .lastLearnM{
      width: 9.3333vw;
      height: 9.3333vw
   }
   .lastImage{
      margin-right: 2vw;
      width: 18.4vw;
      height: 11.7333vw;
   }
   .lastNumberV{
      width: 8vw;
      height: 8vw;
      font-size: 3.6vw;
      left: 4vw;
   }
   .jouryLeftLastContentItem{
      height: 17.3333vw;
      margin-top: 4vw;
      position: relative;
   }
   .rightHeaderT{
      font-size: 4vw;
      width: 82.5%;
      margin-left: 7.75%;
      line-height: 4.2vw;
   }
   .headDetail{
      font-size: 3.2vw;
      width: 82.5%;
      margin-left: 7.75%;
      line-height: 3.8vw;
      margin-top: 10px;
   }
   .bottomDetail{
      width: 82.5%;
      margin-left: 7.75%;
      font-size: 2.6667vw;
      line-height: 3.6vw;
   }
   .realResultsV{
      font-size: 2.6667vw;
      margin-top: 20px;
   }
   .resultIcon{
      width: 21.3333vw;
   }
   .resultRightVTitle{
      font-size: 2.6667vw;
   }
   .learnLink{
      font-size: 2.6667vw;
   }
   .realResultArea{
      width: 100%;
   }
   .resultRightV{
      width: 60%;
   }
   .realBottomArea{
      flex-direction: column;
      display: flex;
      align-items: center;
   }
   .resoures{
      width: 100%;
   }
   .solutions{
      width: 100%;
      margin-top: 20px;
   }
   .ResourcesT{
      font-size: 2.4vw;
      margin-bottom: 5px;
   }
   .resourcesTitle{
      font-size: 2.2667vw;
      padding-top: 0px;
   }
   .resourcesIcon{
     width: 20px; 
   }
   #LatestInsights .LatestInsights-content ul li .LatestInsights-tags{
      margin-top: 22px;
   }
   #Customers .Customers-swiper .swiper-content .swiper-items {
      display: inline-block;
      width: 100% !important;
      text-align: center; 
  }
  #Customers .Customers-swiper .swiper-content .swiper-items img{
      width: 90px;
      height: 50px;
      margin: 0 auto;
  }
  .viewIsShow{
     display: none;
  }
  .viewIsShowNo{
    display: block;
  }
  .showPCH3{
     display: none;
  }
  #LatestInsights .LatestInsights-content ul li p{
      font-size: 1rem;
      font-weight: bold;
      color: #001b50;
   }
   #LatestInsights .LatestInsights-content ul li .LatestInsights-text{
      font-size: 1rem;
      font-weight: 400;
   }
}
@media (min-width: 768px){
   .showPCH3{
      display: block;
   }
   .mobileJouneryView{
      display: none;
   }
   .banner-text{
     max-width: 60%;
   }
   .JourneyView{
      background-color: #021A51;
      border-radius: 28px;
      transform: scale(0.640833, 0.640833);
      margin-top: -140px;
   }
   #Customers .Customers-swiper{
      width: 750px;
      padding: 40px 15px 50px;
  }
  #LatestInsights .LatestInsights-content ul li p{
      font-weight: bold;
      color: #001b50;
   }
   #LatestInsights .LatestInsights-content ul li .LatestInsights-text{
      font-weight: 400;
   }
}

@media (min-width: 992px){
   .JourneyView{
      transform: scale(0.784167, 0.784167);  
      margin-top: -80px;    
   }
   #Customers .Customers-swiper{
      width: 970px;
   }
}

@media (min-width: 1200px) {
   .JourneyView{
      transform: scale(0.9, 0.9);
      margin-top: -10px;   
   }
   #Customers .Customers-swiper{
      width: 1170px;
  }
}
@media (min-width: 1440px){
   .JourneyView{
      transform: scale(1, 1); 
      margin-top: 10px;
   }
   #Customers .Customers-swiper{
      width: 1260px;
  }
}

.rightGiftV .vjs-control-bar{
   visibility: hidden !important;
}
.lastImageHeight{
   height: 154px;
   margin-bottom: 20px;
   display: block;
   width: 100%
}
.videoPlay{
   position: absolute;
   z-index: 20;
   left: calc(50% - 2rem);
   right: 0;
   top: calc(50% - 2rem);
   width: 4rem;
   height: 4rem;
}
.videoShow{
   display: none;
}