.f {
  height: 100%;
  overflow: hidden;
}

.o {
  display: inline-block;
  vertical-align: top;
}

.first-screen {
  background: #121830;
  position: relative;
  width: 100vw;
  height: 500px;
}

.footer{
  width:100vw;
}
.first-screen .background-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background:url(../images/brandSell-page.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.first-screen .background-video::after {
  /* content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
  /* background: url(../../static/img/bg_dot.png)  rgba(0,0,0,.2)  left top repeat; */
}

/* title  8字动画*/
.first-screen .title {
  position: absolute;
  top: 35%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 75%;
}

.first-screen .font-ol-eight {
  position: relative;
  width: 100vw;
  height: 65px;
  margin: 0 auto;
}

.first-screen .font-ol-eight span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  

}

.first-screen .font-ol-eight .text-1,
.first-screen .font-ol-eight .text-2,
.first-screen .font-ol-eight .text-3,
.first-screen .font-ol-eight .text-4 {
  transform: translate(0px, 130px);
}

.first-screen .font-ol-eight .text-5,
.first-screen .font-ol-eight .text-6,
.first-screen .font-ol-eight .text-7,
.first-screen .font-ol-eight .text-8 {
  transform: translate(0px, 190px);
}
.active.first-screen .font-ol-eight span{
  opacity: 1;
  transition: all .8s;
}
.active.first-screen .font-ol-eight .text-1,
.active.first-screen .font-ol-eight .text-2,
.active.first-screen .font-ol-eight .text-3,
.active.first-screen .font-ol-eight .text-4 {
  transform: translate(0px, 0px);
}

.active.first-screen .font-ol-eight .text-5,
.active.first-screen .font-ol-eight .text-6,
.active.first-screen .font-ol-eight .text-7,
.active.first-screen .font-ol-eight .text-8 {
  transform: translate(0px, 70px);
}

/* title 短线动画 */
.first-screen .text-line {
   
  width: 27px;
  height: 5px;
  margin: 25px auto;
}

.first-screen .text-line span {
 opacity: 0;
  display: block;
  width: 27px;
  height: 2px;
  overflow: hidden;
  background: #fff;
  transform: translate(0px, 20px);
  
}

.first-screen.active .text-line span {
  opacity: 1;
  transform: translate(0px, 0px);
  transition: all .5s .8s;
}

/* title 整行文字动画 */
.first-screen .font-line-to-top {
  display: block;
  margin: 0px auto 0;
  width: 100%;
  /* height: 80px; */
  font-size: 13px;
  color: #fff;
  text-align: center;
  line-height: 22px;
}

.first-screen .font-line-to-top span {
  margin-top: 15px;
  opacity: 0;
  height: 100%;
  display: inline-block; 
  letter-spacing: 2px;
  transform: translate(0px, 50px);
  line-height: 120%;
}

.first-screen.active .font-line-to-top span {
  opacity: 1;
  transform: translate(0px, 4px);
  transition: all .6s 1.3s;
}
.first-screen .player {
    opacity: 0;
    width: 1.76rem;
    height: 1.76rem;
    margin:0 auto;
    z-index: 2;
    border: .0866667rem #008365 solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}
.first-screen .player p {
    position: relative;
    width: 0;
    height: 0;
    border-width: .24rem 0 .24rem .48rem;
    border-style: solid;
    border-color: transparent transparent transparent #008365;
    margin-top: 0px;
    margin-left: .2rem;
}
.first-screen.active .player {
  opacity: 1;
  transition: all 1s 1.8s;
}
.videoBg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1501;
}
.close {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1601;
}
.close i {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(http://sm.domobcdn.com/hm/2018/landing/img/domob/video_close.png);
    background-size: 100%;
    background-color: RGBA(51, 165, 33, 1);
}
/* animate-screen 出海 品牌 效果*/
.animate-screen {
  position: relative;
  width: 100vw;
  height: 770px;
  background-size: cover !important;
}

.animate-screen .content {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

.animate-screen .content .screen-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  
}

.animate-screen .content.active .screen-bg {
  transform: translate(0px, 0px);
  transition: all .5s ;
}

.animate-screen .content .text {
  /* position: absolute;
  top: 0; */
  margin-top:15%;
  display: flex;
  width: 100vw;
  height: 100%;
  color: #fff;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.animate-screen .content .text>div {
  width: 60vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.animate-screen .content .text-1 {
  font-size: 30px;
  font-weight: 500;
  height: 70px;
  line-height: 70px;
  margin-bottom: 10px;
}

.animate-screen .content .text-1 span {
  display: block;
  opacity: 0;
  transform: translateY(80px);
  
}

.animate-screen .content.active .text-1 span {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s .4s;
}

.animate-screen .content .text-2 {
  font-size: 26px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 30px;

}

.animate-screen .content .text-2 span {
  display: block;
  opacity: 0;
  transform: translateY(80px);
  
}

.animate-screen .content.active .text-2 span {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s .4s;
}

.animate-screen .content .text-3 {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 15px;
  color: #afaeae;
}

.animate-screen .content .text-3 span {
  display: block;
  opacity: 0;
  transform: translateY(100px);
  
}

.animate-screen .content.active .text-3 span {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s .5s;
}

.animate-screen .content .text-4 {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 40px;
  padding-left: 6px;
}

.animate-screen .content .text-4 span {
  opacity: 0;
  display: block;
  transform: translateY(100px);
  
}

.animate-screen .content.active .text-4 span {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s .5s;
}

.animate-screen .content .text-button {
  width: 154.5px;
  height: 41px;
  margin: 0;
}

.animate-screen .content .text-button a {
  display: block;
  color: #fff;
  font-size: 14px;
  width: 154.5px;
  height: 41px;
  line-height: 41px;
  text-align: center;
  border-radius: 25px;
  background: #003eec;
  overflow: hidden;
  opacity: 0;
  position: relative;
  transform: translateY(45px);
  
}

/* loading */
.animate-screen .content.active .text-button a {
  opacity: 1;
  transform: translateY(0px);
  transition: all .4s .8s;

}

.service-screen {
  background: #fff;
}
/* screen2 */
.oversea-screen {
  background: #fff;
}

.oversea-screen .content .screen-blue {
}

.brands-screen {
  background: #4d4d4d;
}

.brands-screen .content .screen-red {
  background-size: 100% 78%;
  transform: translate(0px, 1000px);
}

.effect-screen {
  background: #4d4d4d;
}

.effect-screen .content .screen-green {
  background-size: 100% 78%;
  transform: translate(0px, 1000px);
}

/* originan-brands 品牌墙 */
.original-brands {
  width: 100vw;
  height: 495px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  background: #f5f5f5;

}

.original-brands__inner {
  position: relative;
  z-index: 1;
}

/* 品牌墙 title 通用1 效果 */
.original-brands__inner .page-title {
  padding-top: 35px;
}

/* 白色标题 */
.original-brands__inner .page-title .c-font__en {
  height: 60px;
  text-align: center;
}

.original-brands__inner .page-title .c-font__en span {
  display: block;
  height: 44px;
  background: url(../images/index/original_brands_page_title_f.png.html) center center;
  background-size: 100% 100%;
  margin: 0 auto;
}


/* 白色标题end */
/* 彩色动画 */


.original-brands__inner .page-title .o img {
  height: 44px;
  display: inline-block;
  transform: translate(0px, 44px);
  /* 根据情况 数值可改 */
}

.original-brands__inner.active .page-title .o img {
  transform: translate(0px, 0px);
  transition: all .5s ;
}

/* 彩色 end */
.original-brands__inner .page-title .text-line {
  height: 5px;
  margin: 15px auto 6px;
  text-align: center;
}


.original-brands__inner .page-title .text-line span {
  display: block;
  width: 40px;
  height: 3px;
  background: #000;
  overflow: hidden;
  transform: translate(0px, 10px);
}

.original-brands__inner.active .page-title .text-line span {
  transform: translate(0px, 0px); 
  transition: all 1s;
}

.original-brands__inner .page-title .text-line span.cur {
  background: #fff;
  transition-delay: 0s;
}

.original-brands__inner .page-title .font-line-to-top span.cur {
  color: #fff;
  transition-delay: 0s;
}

/* title 短线动画 */

/* title 整行文字动画 */
.original-brands__inner .font-line-to-top {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  width: 100vw;
  height: 40px;
  margin: 0 auto;
}

.original-brands__inner .font-line-to-top span {
  opacity: 0;
  height: 20px;
  letter-spacing: 1px;
  display: inline-block;
  transform: translate(0px, 30px);
}

.original-brands__inner.active .font-line-to-top span {
  opacity: 1;
  transform: translate(0px, 4px);  
  transition: all .6s .5s;
}

.original-brands__list {
  overflow: hidden;
}

.original-brands__list>div {
  position: relative;
  z-index: 1;
  width: 315px;
  height: 76px;
  margin: 2px auto;
  transition: background .2s ease-in-out;
}

.original-brands__list>div span {
  background: #fff;
  width: 152px;
  height: 65px;
  text-align: center;
}

.original-brands__list>div span:nth-child(n) {
  float: left;
}

.original-brands__list>div span:nth-child(2n) {
  float: right;
}

.original-brands__list div span img {
  height: 100%;
}

.original-brands__list div {
  opacity: 0;
  transform: translate(0px, 100px);
}

.original-brands__inner.active .original-brands__list div {
  opacity: 1;
  transform: translate(0px, 0px);
  transition: all 1s ;
}

.original-brands__inner.active .original-brands__list .first-line {
  transition-delay: .8s;
}

.original-brands__inner.active .original-brands__list .second-line {
  transition-delay: 1s;
}

.original-brands__inner.active .original-brands__list .second-line {
  transition-delay: 1s;
}


.original-brands__inner.active .original-brands__list .third-line {
  transition-delay: 1.2s;
}

.original-brands__inner.active .original-brands__list .fourth-line {
  transition-delay: 1.4s;
}


.planRightImg1 {
  width: 100%;
  position: absolute;
  top: 20%;
}
.planRightImg1 .plan1Bg, .planRightImg1 .plan3Bg,.planRightImg1 .plan1Sw {
  position: absolute;
  -webkit-animation: plan1Anim 2.5s linear infinite alternate;
  animation: plan1Anim 2.5s linear infinite alternate;
}
.planRightImg1 .plan1Bg {
  width: 110px;
  left: 35%;
  top: 32%;
  z-index: 10;
}
.planRightImg1 .plan2Bg {
  position: absolute;
  width: 85px;
  left: 24%;
  top: 49%;
  z-index: 12;
  -webkit-animation: 2.5s linear 0s infinite alternate none running plan5Anim1-data-v;
  animation: 2.5s linear 0s infinite alternate none running plan5Anim1-data-v;
}

.planRightImg1 .plan3Bg {
  width: 73px;
  left: 40%;
  top: 10%;
  z-index: 8;
}
.planRightImg1 .plan1Sw {
  width: 367px;
  height: 265px;
  right: 42px;
  top: 60%;
  z-index: 5;
}
.planRightImg1 .plan1a {
  width: 39px;
  position: absolute;
  top: 57%;
  left: 63%;
  z-index: 10;
  -webkit-animation: 2.5s linear 0s infinite alternate none running plan4Anim3;
  animation: 2.5s linear 0s infinite alternate none running plan4Anim3;
}
.planRightImg1 .plan1b {
  width: 50px;
  position: absolute;
  top: 28%;
  left: 62%;
  z-index: 20;
  -webkit-animation: 2.5s linear 0s infinite alternate none running plan4Anim3;
  animation: 2.5s linear 0s infinite alternate none running plan4Anim3;
}
@-webkit-keyframes plan1Anim {
  0% {
      transform: translateY(-5px)
  }

  to {
      transform: translateY(5px)
  }
}

@keyframes plan1Anim {
  0% {
      transform: translateY(-5px)
  }

  to {
      transform: translateY(5px)
  }
}

@-webkit-keyframes plan5Anim1-data-v {
  0% {
    transform: translateZ(0px);
  }
  25% {
    transform: translate3d(-3.75px, 3px, 0px);
  }
  50% {
    transform: translate3d(-7.5px, 6px, 0px);
  }
  75% {
    transform: translate3d(-11.25px, 9px, 0px);
  }
  100% {
    transform: translate3d(-15px, 12px, 0px);
  }
}

@keyframes plan5Anim1-data-v {
  0% {
    transform: translateZ(0px);
  }
  25% {
    transform: translate3d(-3.75px, 3px, 0px);
  }
  50% {
    transform: translate3d(-7.5px, 6px, 0px);
  }
  75% {
    transform: translate3d(-11.25px, 9px, 0px);
  }
  100% {
    transform: translate3d(-15px, 12px, 0px);
  }
}
@-webkit-keyframes plan4Anim3 {
  0% {
      transform: translateY(-5px)
  }

  to {
      transform: translateY(5px)
  }
}

@keyframes plan4Anim3 {
  0% {
      transform: translateY(8px)
  }

  to {
      transform: translateY(-8px)
  }
}


.planRightImg6 {
  width: 100%;
  position: absolute;
  top: 8%;
}
.planRightImg6 .plan6Bg2 {
  position: absolute;
  width: 56%;
  top: 0%;
  left: 22%;
  z-index: 20;
  -webkit-animation: plan1Anim 2.5s linear -1.5s infinite alternate;
  animation: plan1Anim 2.5s linear -1.5s infinite alternate;
}
.planRightImg6 .plan6Bg3 {
  position: absolute;
  width: 36%;
  top: 43%;
  left: 32%;
  z-index: 15;
  -webkit-animation: plan1Anim 2.5s linear -2.5s infinite alternate;
  animation: plan1Anim 2.5s linear -2.5s infinite alternate;
}
.planRightImg6 .plan6Bg4 {
  position: absolute;
  width: 24%;
  top: 70%;
  left: 38%;
  z-index: 10;
}
.planRightImg6 .plan6Sw {
  position: absolute;
  width: 100%;
  height: 292px;
  left: 0%;
  top: 80%;
  z-index: 5;
}
.planRightImg6 .plan6a {
  position: absolute;
  width: 8%;
    top: 4%;
    left: 33%;
  z-index: 20;
  -webkit-animation: plan6Anim1 2.5s linear -.5s infinite alternate;
  animation: plan6Anim1 2.5s linear -.5s infinite alternate;
}

.planRightImg6 .plan6b {
  position: absolute;
  width: 8%;
  top: 0%;
  left: 62%;
  z-index: 20;
  -webkit-animation: plan6Anim1 2.5s linear -2.5s infinite alternate;
  animation: plan6Anim1 2.5s linear -2.5s infinite alternate
}

.planRightImg6 .plan6c {
  position: absolute;
  width: 8%;
  top: 37%;
  left: 49%;
  z-index: 25;
  -webkit-animation: plan6Anim1 2.5s linear infinite alternate;
  animation: plan6Anim1 2.5s linear infinite alternate
}

.planRightImg6 .plan6d {
  position: absolute;
  width: 8%;
  top: 0%;
  left: 48%;
  z-index: 20;
  -webkit-animation: plan6Anim1 2.5s linear -1.5s infinite alternate;
  animation: plan6Anim1 2.5s linear -1.5s infinite alternate
}

@-webkit-keyframes plan1Anim {
  0% {
      transform: translateY(-5px)
  }

  to {
      transform: translateY(5px)
  }
}

@keyframes plan1Anim {
  0% {
      transform: translateY(-5px)
  }

  to {
      transform: translateY(5px)
  }
}

@-webkit-keyframes plan6Anim1 {
  0% {
      transform: translateY(0)
  }

  to {
      transform: translateY(-30px)
  }
}

@keyframes plan6Anim1{
  0% {
      transform: translateY(0)
  }

  to {
      transform: translateY(-30px)
  }
}

.planRightImg5 {
  width: 100%;
  position: absolute;
}
.planRightImg5 .plan5Bg {
  position: absolute;
  width: 38%;
  top: 5%;
  left: 20%;
  z-index: 20;
  -webkit-animation: plan1Anim 2.5s linear infinite alternate;
  animation: plan1Anim 2.5s linear infinite alternate
}

.planRightImg5 .plan5Sw {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 86%;
  left: 23%;
  z-index: 5;
  -webkit-animation: plan2Anim 2.5s linear infinite alternate;
  animation: plan2Anim 2.5s linear infinite alternate
}

.planRightImg5 .plan5a {
  position: absolute;
  width: 20%;
    top: 48%;
    left: 48%;
  z-index: 30;
  -webkit-animation: plan5Anim1 2.5s linear infinite alternate;
  animation: plan5Anim1 2.5s linear infinite alternate
}

.planRightImg5 .plan5d {
  position: absolute;
  width: 5%;
    top: 68%;
    left: 66%;
  z-index: 33;
  -webkit-animation: plan5Anim1 2.5s linear infinite alternate;
  animation: plan5Anim1 2.5s linear infinite alternate
}

.planRightImg5 .plan5e {
  position: absolute;
  width: 12%;
  top: -1%;
  left: 36%;
  z-index: 30;
  -webkit-animation: plan5Anim1 2.5s linear infinite alternate;
  animation: plan5Anim1 2.5s linear infinite alternate
}

.planRightImg5 .plan5b {
  width: 11%;
    top: 13%;
    left: 58%;
}

.planRightImg5 .plan5b,.planRightImg5 .plan5c {
  position: absolute;
  z-index: 10;
  -webkit-animation: plan5Anim2 2.5s linear infinite alternate;
  animation: plan5Anim2 2.5s linear infinite alternate
}

.planRightImg5 .plan5c {
  width: 14%;
    top: 48%;
    left: 27%;
}

@-webkit-keyframes plan2Anim {
  0% {
      opacity: .5
  }

  to {
      opacity: 1
  }
}

@keyframes plan2Anim {
  0% {
      opacity: .5
  }

  to {
      opacity: 1
  }
}

@-webkit-keyframes plan5Anim2 {
  0% {
      transform: translateZ(0)
  }

  25% {
      transform: translate3d(-3.75px,3px,0)
  }

  50% {
      transform: translate3d(-7.5px,6px,0)
  }

  75% {
      transform: translate3d(-11.25px,9px,0)
  }

  to {
      transform: translate3d(-15px,12px,0)
  }
}

@keyframes plan5Anim2 {
  0% {
      transform: translateZ(0)
  }

  25% {
      transform: translate3d(-3.75px,3px,0)
  }

  50% {
      transform: translate3d(-7.5px,6px,0)
  }

  75% {
      transform: translate3d(-11.25px,9px,0)
  }

  to {
      transform: translate3d(-15px,12px,0)
  }
}

@-webkit-keyframes plan5Anim1 {
  0% {
      transform: translateZ(0)
  }

  25% {
      transform: translate3d(7.5px,6px,0)
  }

  50% {
      transform: translate3d(15px,12px,0)
  }

  75% {
      transform: translate3d(22.5px,18px,0)
  }

  to {
      transform: translate3d(30px,24px,0)
  }
}

@keyframes plan5Anim1 {
  0% {
      transform: translateZ(0)
  }

  25% {
      transform: translate3d(7.5px,6px,0)
  }

  50% {
      transform: translate3d(15px,12px,0)
  }

  75% {
      transform: translate3d(22.5px,18px,0)
  }

  to {
      transform: translate3d(30px,24px,0)
  }
}

.img-width-flag img {
  width: 80%;
}

.advantage .font-line-text{
  display: block;
  font-size: 18px;
  color: #1f2022;
  height: 230px;
  margin-top:20px;
  width: 73%;
}

.advantage {
  width: 100%;
  background: #f3f3f3;
  background:url(../../static/img/effectMarketing/advbg.png) 100% no-repeat;
  background-size: 100% 100%;
  height: 370px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-screen .content{
  padding: 0px 10%;
}
.service-screen .content .box1{
  /* background-color: #f3f3f3; */
  margin-bottom: 0.4167rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
  height: 5.5556rem;
}
.service-screen .content .box1 img{
  position: absolute;
  top: -1.3889rem;
  width: 80%;
}
.service-screen .content .box1 .desc1{
  font-size: 0.5556rem;
  font-weight: 700;
  position: absolute;
  bottom: 1.3889rem;
  font-size: 0.4722rem;
  text-align: center;
}
.service-screen .content .box1 .desc2{
  position: absolute;
  bottom: 0.2778rem;
  text-align: center;
  padding: 0 10%;
  font-size: 0.3333rem;
  
}
#solutionService .case-img-item .titles {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  width: 190.0008px;
  height: 1.6389rem;
  padding: 0 0.1389rem 0.1389rem;
  margin-top: 0.2778rem;
}
#solutionService .case-img-item .left {
  display: flex;
  justify-content: center;
}
#solutionService .case-img-item .left .nums{
  font-size: 0.6944rem;
  color: red;
  font-weight: 700;
}
#solutionService .case-img-item .left .title-small{
  color:#999999;
  font-size: 0.3333rem;
}
.up-img{
  width: 0.3556rem!important;
  height: 0.5556rem;
  margin-top: 0.1389rem;
}