.banner {
  min-width: 1200px;
  position: relative; }
  .banner > img {
    width: 100%; }
  .banner > .box {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff; }
    .banner > .box.one {
      width: 51.3%; }
    .banner > .box.two {
      width: calc(30.3% + 0.5px); }
    .banner > .box > .text-box > .text:last-child {
      margin-top: 80px; }
    .banner > .box > .text-box > .text > .title {
      font-size: 46px;
      position: relative;
      overflow: hidden; }
      .banner > .box > .text-box > .text > .title::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: -1px;
        width: 5px;
        height: 0;
        background-color: #026eea;
        transform: translateY(-50%);
        transition-duration: .3s; }
      .banner > .box > .text-box > .text > .title.run::after {
        height: 40px; }
      .banner > .box > .text-box > .text > .title > span {
        display: inline-block;
        padding-left: 30px;
        padding-right: 30px;
        transform: translateX(-100%);
        animation: banner-title .4s ease-out .3s forwards; }
    .banner > .box > .text-box > .text > .sub {
      font-size: 26px;
      padding-left: 30px;
      transform: translateY(80px);
      opacity: 0;
      animation: banner-sub .3s ease .5s forwards; }

@keyframes banner-title {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0); } }

@keyframes banner-sub {
  from {
    transform: translateY(80px);
    opacity: 0; }
  to {
    transform: translateY(0);
    opacity: 1; } }

.contant-way > .block {
  position: relative; }
  .contant-way > .block > .box > div {
    padding: 280px 0 90px;
    min-height: 400px;
    box-sizing: border-box; }
    .contant-way > .block > .box > div .contant-text {
      position: absolute;
      top: 0;
      left: 0;
      border-left: 1px solid #dfdfdf;
      height: 100%;
      padding-top: 90px;
      box-sizing: border-box;
      overflow: hidden; }
      .contant-way > .block > .box > div .contant-text.fax {
        left: 50%; }
      .contant-way > .block > .box > div .contant-text > .text.run > .title::after {
        height: 34px; }
      .contant-way > .block > .box > div .contant-text > .text.run > .title > span {
        animation: banner-title .3s ease-out .2s forwards; }
      .contant-way > .block > .box > div .contant-text > .text.run > .sub {
        animation: banner-title .5s ease .5s forwards; }
      .contant-way > .block > .box > div .contant-text > .text > .title {
        font-size: 36px;
        position: relative;
        margin-bottom: 20px; }
        .contant-way > .block > .box > div .contant-text > .text > .title::after {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          left: 0;
          width: 4px;
          height: 0;
          background-color: #026eea;
          transform: translateY(-45%);
          transition-duration: .2s; }
        .contant-way > .block > .box > div .contant-text > .text > .title > span {
          display: inline-block;
          padding-left: 20px;
          transform: translateX(-100%); }
      .contant-way > .block > .box > div .contant-text > .text > .sub {
        font-size: 20px;
        padding-left: 20px;
        height: 52px;
        transform: translateX(-100%); }
    .contant-way > .block > .box > div.left {
      width: 53%;
      float: left;
      position: relative; }
      .contant-way > .block > .box > div.left > .input-box {
        position: relative;
        margin-right: 100px;
        z-index: 1; }
        .contant-way > .block > .box > div.left > .input-box > .btn {
          height: 50px;
          width: 120px;
          color: #fff;
          float: right;
          border: none;
          cursor: pointer;
          font-size: 18px;
          box-shadow: 1px 0 4px rgba(29, 32, 137, 0.6); }
          .contant-way > .block > .box > div.left > .input-box > .btn:active {
            opacity: .7; }
        .contant-way > .block > .box > div.left > .input-box > .li {
          margin-bottom: 15px; }
          .contant-way > .block > .box > div.left > .input-box > .li > input {
            height: 54px;
            width: 100%;
            background-color: #f1f1f1;
            padding: 0 30px;
            border: none;
            font-size: 18px;
            box-sizing: border-box; }
          .contant-way > .block > .box > div.left > .input-box > .li > textarea {
            height: 126px;
            width: 100%;
            background-color: #f1f1f1;
            font-size: 18px;
            border: none;
            padding: 30px;
            resize: none;
            display: block;
            box-sizing: border-box; }
    .contant-way > .block > .box > div.right {
      width: 47%;
      float: left;
      position: relative;
      padding-bottom: 155px; }
      .contant-way > .block > .box > div.right > .map {
        position: relative;
        z-index: 1; }
        .contant-way > .block > .box > div.right > .map > img {
          width: 100%; }
@keyframes run-loading {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg);
    }
}